Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ClarifAI - Smart Image Recognition</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="mobile-frame"> | |
| <div class="app-container"> | |
| <div class="app-header"> | |
| <div class="header-content"> | |
| <div class="logo-container"> | |
| <div class="logo-icon"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| <div class="logo-text"> | |
| <h1>ClarifAI</h1> | |
| <p class="header-subtitle">Smart Image Recognition</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content active" id="home"> | |
| <div class="scan-area"> | |
| <div class="camera-view"> | |
| <div class="placeholder-image" id="placeholderImage"> | |
| <div class="camera-overlay"> | |
| <div class="camera-icon"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <p>Intelligent Image Analysis</p> | |
| <div class="scanning-dots"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <div class="feature-grid"> | |
| <div class="feature-item"> | |
| <i class="fas fa-text-height"></i> | |
| <span>Text</span> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fas fa-object-group"></i> | |
| <span>Objects</span> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fas fa-qrcode"></i> | |
| <span>Codes</span> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="fas fa-landmark"></i> | |
| <span>Landmarks</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <video id="cameraStream" style="display: none; width: 100%; height: 100%; object-fit: cover;"></video> | |
| <canvas id="captureCanvas" style="display: none;"></canvas> | |
| <div class="image-preview-container" style="display: none;"> | |
| <h4>Original Image</h4> | |
| <div class="image-preview"> | |
| <img id="preview-image" src="" alt="Captured image"> | |
| <button class="close-preview" onclick="closeImagePreview()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scan-buttons"> | |
| <button class="scan-button upload-button" id="uploadButton"> | |
| <i class="fas fa-upload"></i> | |
| </button> | |
| <button class="scan-button capture-button" id="captureButton"> | |
| <i class="fas fa-camera"></i> | |
| </button> | |
| </div> | |
| <div class="results-preview"> | |
| <h3>Last Scan Result</h3> | |
| <div class="text-preview"> | |
| <div class="empty-state"> | |
| <i class="fas fa-magic"></i> | |
| <p>Analyze images to discover intelligent insights...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="history"> | |
| <div class="history-list"> | |
| <h3><i class="fas fa-brain"></i> Analysis History</h3> | |
| <div class="history-empty"> | |
| <p>No previous scans yet</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="settings"> | |
| <div class="settings-options"> | |
| <h3><i class="fas fa-sliders-h"></i> AI Settings</h3> | |
| <div class="setting-item"> | |
| <label>Dark Mode</label> | |
| <label class="switch"> | |
| <input type="checkbox"> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <div class="setting-item"> | |
| <label>Auto Copy to Clipboard</label> | |
| <label class="switch"> | |
| <input type="checkbox" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <div class="setting-item"> | |
| <label>Language</label> | |
| <select> | |
| <option>English</option> | |
| <option>Spanish</option> | |
| <option>French</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bottom-tabs"> | |
| <a href="#" class="tab-button active" data-tab="home"> | |
| <i class="fas fa-home"></i> | |
| <span>Home</span> | |
| </a> | |
| <a href="#" class="tab-button" data-tab="history"> | |
| <i class="fas fa-history"></i> | |
| <span>History</span> | |
| </a> | |
| <a href="#" class="tab-button" data-tab="settings"> | |
| <i class="fas fa-cog"></i> | |
| <span>Settings</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |