Spaces:

Arhamjawad896
/

Seestuff

Sleeping

App Files Files Community

Arhamjawad896 commited on Sep 12, 2025

Commit

54a9a57

1 Parent(s): ecf8af9

Add Dockerfile, YOLO model, and frontend

Browse files

Files changed (4) hide show

Dockerfile +14 -0
main.html +1751 -0
requirements.txt +14 -0
yolo12x.pt +3 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,14 @@

+FROM python:3.13
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+WORKDIR /app
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

main.html ADDED Viewed

	@@ -0,0 +1,1751 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SeeStuff - AI Object Detection</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --secondary: #10b981;
+            --dark: #1f2937;
+            --light: #f9fafb;
+            --gray: #9ca3af;
+            --danger: #ef4444;
+            --success: #22c55e;
+            --warning: #f59e0b;
+            --info: #3b82f6;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: var(--dark);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
+            overflow: hidden;
+        }
+        header {
+            background: var(--primary);
+            color: white;
+            padding: 20px;
+            text-align: center;
+            position: relative;
+        }
+        .logo {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+        }
+        .tagline {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        .main-content {
+            display: flex;
+            flex-direction: column;
+            padding: 30px;
+        }
+        .upload-section {
+            text-align: center;
+            margin-bottom: 30px;
+            padding: 30px;
+            border: 3px dashed var(--primary);
+            border-radius: 15px;
+            background: rgba(99, 102, 241, 0.05);
+            transition: all 0.3s ease;
+        }
+        .upload-section:hover {
+            background: rgba(99, 102, 241, 0.1);
+            border-color: var(--primary-dark);
+        }
+        .upload-icon {
+            font-size: 4rem;
+            color: var(--primary);
+            margin-bottom: 15px;
+        }
+        .upload-text {
+            font-size: 1.2rem;
+            margin-bottom: 20px;
+        }
+        .file-input {
+            display: none;
+        }
+        .btn {
+            padding: 12px 25px;
+            border: none;
+            border-radius: 50px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+        }
+        .btn-primary:hover {
+            background: var(--primary-dark);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        .btn-secondary {
+            background: var(--secondary);
+            color: white;
+        }
+        .btn-secondary:hover {
+            background: #0da271;
+            transform: translateY(-2px);
+        }
+        .btn-outline {
+            background: transparent;
+            border: 2px solid var(--primary);
+            color: var(--primary);
+        }
+        .btn-outline:hover {
+            background: var(--primary);
+            color: white;
+        }
+        .controls {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            margin-bottom: 30px;
+            flex-wrap: wrap;
+        }
+        .toggle-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            background: #f3f4f6;
+            padding: 10px 20px;
+            border-radius: 50px;
+        }
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 30px;
+        }
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: var(--gray);
+            transition: .4s;
+            border-radius: 34px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 22px;
+            width: 22px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: var(--primary);
+        }
+        input:checked + .slider:before {
+            transform: translateX(30px);
+        }
+        .results-section {
+            display: none;
+            margin-top: 30px;
+        }
+        .scan-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 2px solid #e5e7eb;
+        }
+        .scan-id {
+            font-weight: 600;
+            color: var(--primary);
+        }
+        .scan-date {
+            color: var(--gray);
+        }
+        .results-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        .result-card {
+            background: white;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s ease;
+        }
+        .result-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .card-header {
+            background: var(--primary);
+            color: white;
+            padding: 15px;
+            font-weight: 600;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .category-badge {
+            background: rgba(255, 255, 255, 0.2);
+            padding: 4px 10px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+        }
+        .card-body {
+            padding: 20px;
+        }
+        .card-description {
+            margin-bottom: 15px;
+            line-height: 1.5;
+        }
+        .card-facts {
+            background: #f0f9ff;
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 15px;
+            border-left: 4px solid var(--info);
+        }
+        .fact-title {
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: var(--info);
+        }
+        .similar-objects {
+            margin-top: 15px;
+        }
+        .similar-title {
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: var(--dark);
+        }
+        .similar-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+        .similar-item {
+            background: #f3f4f6;
+            padding: 5px 12px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+        }
+        .history-section {
+            margin-top: 40px;
+            display: none;
+        }
+        .section-title {
+            font-size: 1.5rem;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #e5e7eb;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .history-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+        }
+        .history-card {
+            background: white;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+        }
+        .history-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .history-image {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+        }
+        .history-content {
+            padding: 15px;
+        }
+        .history-date {
+            font-size: 0.9rem;
+            color: var(--gray);
+            margin-bottom: 10px;
+        }
+        .history-objects {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-bottom: 15px;
+        }
+        .history-object {
+            background: #f0f9ff;
+            padding: 4px 10px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+        }
+        .history-actions {
+            display: flex;
+            justify-content: space-between;
+        }
+        .favorite-btn {
+            color: var(--gray);
+            cursor: pointer;
+            transition: color 0.3s ease;
+        }
+        .favorite-btn.active {
+            color: var(--danger);
+        }
+        .export-btn {
+            color: var(--primary);
+            cursor: pointer;
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 40px;
+        }
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(99, 102, 241, 0.2);
+            border-radius: 50%;
+            border-top-color: var(--primary);
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .error-message {
+            background: #fee2e2;
+            color: var(--danger);
+            padding: 15px;
+            border-radius: 10px;
+            margin: 20px 0;
+            display: none;
+        }
+        .success-message {
+            background: #d1fae5;
+            color: var(--success);
+            padding: 15px;
+            border-radius: 10px;
+            margin: 20px 0;
+            display: none;
+        }
+        .image-preview {
+            max-width: 100%;
+            max-height: 300px;
+            border-radius: 10px;
+            margin: 20px auto;
+            display: none;
+        }
+        .tab-container {
+            display: flex;
+            margin-bottom: 20px;
+            border-bottom: 2px solid #e5e7eb;
+        }
+        .tab {
+            padding: 12px 25px;
+            cursor: pointer;
+            font-weight: 600;
+            color: var(--gray);
+            border-bottom: 3px solid transparent;
+            transition: all 0.3s ease;
+        }
+        .tab.active {
+            color: var(--primary);
+            border-bottom: 3px solid var(--primary);
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        .ollama-status {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 15px;
+            border-radius: 8px;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+        footer {
+            text-align: center;
+            padding: 20px;
+            color: var(--gray);
+            font-size: 0.9rem;
+            margin-top: 40px;
+        }
+        @media (max-width: 768px) {
+            .results-grid, .history-grid {
+                grid-template-columns: 1fr;
+            }
+            .controls {
+                flex-direction: column;
+                align-items: center;
+            }
+            .scan-info {
+                flex-direction: column;
+                gap: 10px;
+                align-items: flex-start;
+            }
+        }
+        /* Add these to your CSS */
+        .realtime-controls {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 20px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .video-container {
+            display: flex;
+            justify-content: center;
+            margin: 20px 0;
+            background: #000;
+            border-radius: 10px;
+            padding: 10px;
+        }
+        .objects-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 15px;
+        }
+        .object-pill {
+            background: var(--primary);
+            color: white;
+            padding: 8px 15px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+                /* Search & Ask Styles */
+        .search-controls {
+            margin-bottom: 20px;
+        }
+        .search-type-toggle {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            justify-content: center;
+        }
+        .search-input-container {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        #search-query, #object-name, #question-input {
+            flex: 1;
+            padding: 12px 15px;
+            border: 2px solid #e5e7eb;
+            border-radius: 50px;
+            font-size: 1rem;
+            outline: none;
+        }
+        #search-query:focus, #object-name:focus, #question-input:focus {
+            border-color: var(--primary);
+        }
+        .ask-input {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+        .ask-input input {
+            min-width: 200px;
+        }
+        .object-links .similar-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+        .object-links .similar-item {
+            background: var(--primary);
+            color: white;
+            padding: 8px 15px;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            transition: all 0.3s ease;
+        }
+        .object-links .similar-item:hover {
+            background: var(--primary-dark);
+            transform: translateY(-2px);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="logo">
+                <i class="fas fa-camera"></i>
+                SeeStuff
+            </div>
+            <div class="tagline">AI-Powered Object Detection & Recognition</div>
+        </header>
+        <div class="main-content">
+            <div class="tab-container">
+                <div class="tab active" data-tab="scan">Scan</div>
+                <div class="tab" data-tab="history">History</div>
+                <div class="tab" data-tab="realtime">Real-Time</div>
+                <div class="tab" data-tab="search">Search & Ask</div>
+            </div>
+            <div class="tab-content active" id="scan-tab">
+                <div class="upload-section" id="drop-zone">
+                    <i class="fas fa-cloud-upload-alt upload-icon"></i>
+                    <div class="upload-text">Drag & drop an image or click to browse</div>
+                    <button class="btn btn-primary" id="browse-btn">
+                        <i class="fas fa-folder-open"></i> Browse Files
+                    </button>
+                    <input type="file" id="file-input" class="file-input" accept="image/*">
+                </div>
+                <img id="image-preview" class="image-preview" alt="Image preview">
+                <div class="controls">
+                    <div class="toggle-container">
+                        <span>Offline Mode</span>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="offline-toggle">
+                            <span class="slider"></span>
+                        </label>
+                    </div>
+                    <div id="ollama-status" class="ollama-status" style="display: none; padding: 10px; border-radius: 8px; background: #f0f9ff; margin: 0 10px;">
+                        <i class="fas fa-microchip"></i>
+                        <span id="ollama-status-text">Checking Ollama...</span>
+                    </div>
+                    <button class="btn btn-secondary" id="scan-btn" disabled>
+                        <i class="fas fa-search"></i> Scan Image
+                    </button>
+                </div>
+                <div class="error-message" id="error-message"></div>
+                <div class="success-message" id="success-message"></div>
+                <div class="loading" id="loading">
+                    <div class="spinner"></div>
+                    <div>Analyzing your image with AI...</div>
+                </div>
+                <div class="results-section" id="results-section">
+                    <div class="scan-info">
+                        <div>
+                            <div class="scan-id">Scan ID: <span id="scan-id"></span></div>
+                            <div class="scan-date">Scanned on: <span id="scan-date"></span></div>
+                        </div>
+                        <div>
+                            <button class="btn btn-outline" id="export-json-btn" onclick="exportScan(currentScanId, 'json')">
+                                <i class="fas fa-file-export"></i> Export JSON
+                            </button>
+                            <button class="btn btn-outline" id="export-csv-btn" onclick="exportScan(currentScanId, 'csv')">
+                                <i class="fas fa-file-csv"></i> Export CSV
+                            </button>
+                        </div>
+                    </div>
+                    <div class="results-grid" id="results-grid">
+                        <!-- Results will be populated here -->
+                    </div>
+                </div>
+            </div>
+            <div class="tab-content" id="history-tab">
+                <div class="history-section" id="history-section">
+                    <h2 class="section-title">
+                        <i class="fas fa-history"></i> Scan History
+                    </h2>
+                    <div class="history-grid" id="history-grid">
+                        <!-- History items will be populated here -->
+                    </div>
+                </div>
+            </div>
+                        <!-- Add this after the history-tab div -->
+            <div class="tab-content" id="realtime-tab">
+                <div class="realtime-section">
+                    <h2 class="section-title">
+                        <i class="fas fa-video"></i> Real-Time Object Detection
+                    </h2>
+                    <div class="realtime-controls">
+                        <button class="btn btn-primary" id="start-camera-btn">
+                            <i class="fas fa-play"></i> Start Camera
+                        </button>
+                        <button class="btn btn-secondary" id="stop-camera-btn" disabled>
+                            <i class="fas fa-stop"></i> Stop Camera
+                        </button>
+                        <button class="btn btn-success" id="capture-frame-btn" disabled>
+                            <i class="fas fa-camera"></i> Capture & Analyze
+                        </button>
+                    </div>
+                    <div class="video-container">
+                        <video id="webcam-video" autoplay playsinline muted style="display: none; width: 100%; max-width: 640px; border-radius: 10px;"></video>
+                        <canvas id="webcam-canvas" style="display: none; width: 100%; max-width: 640px; border-radius: 10px;"></canvas>
+                    </div>
+                    <div class="realtime-results">
+                        <h3>Detected Objects:</h3>
+                        <div id="detected-objects-list" class="objects-list">
+                            <!-- Objects will be populated here -->
+                        </div>
+                    </div>
+                    <div class="loading" id="realtime-loading" style="display: none;">
+                        <div class="spinner"></div>
+                        <div>Processing frame...</div>
+                    </div>
+                </div>
+            </div>
+            <div class="tab-content" id="search-tab">
+                <div class="search-ask-section">
+                    <h2 class="section-title">
+                        <i class="fas fa-search"></i> Search & Ask Anything
+                    </h2>
+                    <div class="search-controls">
+                        <div class="search-type-toggle">
+                            <button class="btn btn-primary active" data-search-type="text">
+                                <i class="fas fa-font"></i> Text Search
+                            </button>
+                            <button class="btn btn-outline" data-search-type="image">
+                                <i class="fas fa-image"></i> Image Search
+                            </button>
+                        </div>
+                        <div class="search-input-container" id="text-search">
+                            <input type="text" id="search-query" placeholder="Search for objects (e.g., 'red book', 'electronics')">
+                            <button class="btn btn-secondary" id="search-btn">
+                                <i class="fas fa-search"></i> Search
+                            </button>
+                        </div>
+                        <div class="search-input-container" id="image-search" style="display: none;">
+                            <div class="upload-section" id="search-drop-zone" style="margin: 0;">
+                                <i class="fas fa-cloud-upload-alt upload-icon"></i>
+                                <div class="upload-text">Drag & drop an image to search</div>
+                                <button class="btn btn-outline" id="search-browse-btn">
+                                    <i class="fas fa-folder-open"></i> Browse
+                                </button>
+                                <input type="file" id="search-file-input" class="file-input" accept="image/*">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ask-container" style="margin-top: 30px;">
+                        <h3 class="section-title">
+                            <i class="fas fa-question-circle"></i> Ask About Any Object
+                        </h3>
+                        <div class="ask-input">
+                            <input type="text" id="object-name" placeholder="Object name (e.g., 'coffee mug')">
+                            <input type="text" id="question-input" placeholder="Your question (e.g., 'How to clean this?')">
+                            <button class="btn btn-secondary" id="ask-btn">
+                                <i class="fas fa-paper-plane"></i> Ask
+                            </button>
+                        </div>
+                        <div class="answer-container" id="answer-container" style="display: none;">
+                            <div class="card-facts">
+                                <div class="fact-title">Answer:</div>
+                                <p id="ai-answer"></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="search-results" id="search-results" style="margin-top: 30px; display: none;">
+                        <h3 class="section-title">Search Results</h3>
+                        <div class="results-grid" id="search-results-grid">
+                            <!-- Search results will appear here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <footer>
+            <p>SeeStuff MVP - AI Object Detection powered by YOLOv8, CLIP, and Groq LLM</p>
+        </footer>
+    </div>
+    <script>
+        // DOM Elements
+        const API_BASE_URL = 'http://localhost:8000';
+        const startCameraBtn = document.getElementById('start-camera-btn');
+        const stopCameraBtn = document.getElementById('stop-camera-btn');
+        const captureFrameBtn = document.getElementById('capture-frame-btn');
+        const webcamVideo = document.getElementById('webcam-video');
+        const webcamCanvas = document.getElementById('webcam-canvas');
+        const detectedObjectsList = document.getElementById('detected-objects-list');
+        const realtimeLoading = document.getElementById('realtime-loading');
+        const fileInput = document.getElementById('file-input');
+        const browseBtn = document.getElementById('browse-btn');
+        const dropZone = document.getElementById('drop-zone');
+        const scanBtn = document.getElementById('scan-btn');
+        const offlineToggle = document.getElementById('offline-toggle');
+        const imagePreview = document.getElementById('image-preview');
+        const loading = document.getElementById('loading');
+        const errorMessage = document.getElementById('error-message');
+        const successMessage = document.getElementById('success-message');
+        const resultsSection = document.getElementById('results-section');
+        const resultsGrid = document.getElementById('results-grid');
+        const scanIdElement = document.getElementById('scan-id');
+        const scanDateElement = document.getElementById('scan-date');
+        const historySection = document.getElementById('history-section');
+        const historyGrid = document.getElementById('history-grid');
+        const tabs = document.querySelectorAll('.tab');
+        const tabContents = document.querySelectorAll('.tab-content');
+        // State
+        let currentFile = null;
+        let currentScanId = null;
+        let offlineMode = false;
+        // Event Listeners
+        browseBtn.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', handleFileSelect);
+        dropZone.addEventListener('dragover', handleDragOver);
+        dropZone.addEventListener('drop', handleDrop);
+        scanBtn.addEventListener('click', handleScan);
+        offlineToggle.addEventListener('change', toggleOfflineMode);
+        startCameraBtn.addEventListener('click', startCamera);
+        stopCameraBtn.addEventListener('click', stopCamera);
+        captureFrameBtn.addEventListener('click', captureAndAnalyzeFrame);
+        // Tab switching
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                const tabId = tab.getAttribute('data-tab');
+                // Update active tab
+                tabs.forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+                // Show corresponding content
+                tabContents.forEach(content => {
+                    content.classList.remove('active');
+                    if (content.id === `${tabId}-tab`) {
+                        content.classList.add('active');
+                    }
+                });
+                // Load history if history tab is selected
+                if (tabId === 'history') {
+                    loadHistory();
+                }
+            });
+        });
+        // Functions
+        function handleDragOver(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            dropZone.style.borderColor = '#6366f1';
+            dropZone.style.backgroundColor = 'rgba(99, 102, 241, 0.1)';
+        }
+        function handleDrop(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            dropZone.style.borderColor = '#6366f1';
+            dropZone.style.backgroundColor = 'rgba(99, 102, 241, 0.05)';
+            if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+                handleFile(e.dataTransfer.files[0]);
+            }
+        }
+        function handleFileSelect(e) {
+            if (e.target.files && e.target.files[0]) {
+                handleFile(e.target.files[0]);
+            }
+        }
+        function handleFile(file) {
+            if (!file.type.match('image.*')) {
+                showError('Please select an image file');
+                return;
+            }
+            currentFile = file;
+            scanBtn.disabled = false;
+            // Preview image
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                imagePreview.src = e.target.result;
+                imagePreview.style.display = 'block';
+            };
+            reader.readAsDataURL(file);
+            hideError();
+            showSuccess('Image selected. Click "Scan Image" to analyze.');
+        }
+        async function toggleOfflineMode() {
+            offlineMode = offlineToggle.checked;
+            try {
+                const response = await fetch(`${API_BASE_URL}/offline_toggle?mode=${offlineMode}`);
+                const data = await response.json();
+                let message = `Offline mode: ${data.offline_mode ? 'ON' : 'OFF'}`;
+                // Show Ollama status if in offline mode
+                if (data.offline_mode) {
+                    const ollamaStatus = document.getElementById('ollama-status');
+                    const ollamaStatusText = document.getElementById('ollama-status-text');
+                    if (data.ollama_available === false) {
+                        ollamaStatus.style.display = 'flex';
+                        ollamaStatus.style.background = '#fef3c7';
+                        ollamaStatusText.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Ollama not available';
+                        message += ' (Using basic descriptions)';
+                    } else if (data.ollama_available === true) {
+                        ollamaStatus.style.display = 'flex';
+                        ollamaStatus.style.background = '#d1fae5';
+                        ollamaStatusText.innerHTML = '<i class="fas fa-check-circle"></i> Ollama available';
+                        message += ' (Using Ollama)';
+                    }
+                } else {
+                    document.getElementById('ollama-status').style.display = 'none';
+                }
+                showSuccess(message);
+            } catch (error) {
+                showError('Failed to toggle offline mode');
+                console.error(error);
+            }
+        }
+        async function checkOllamaStatus() {
+            try {
+                const response = await fetch(`${API_BASE_URL}/ollama_status`);
+                const data = await response.json();
+                const ollamaStatus = document.getElementById('ollama-status');
+                const ollamaStatusText = document.getElementById('ollama-status-text');
+                if (data.ollama_available) {
+                    ollamaStatus.style.display = 'flex';
+                    ollamaStatus.style.background = '#d1fae5';
+                    ollamaStatusText.innerHTML = `<i class="fas fa-check-circle"></i> Ollama: ${data.recommended_model || 'Available'}`;
+                } else {
+                    ollamaStatus.style.display = 'flex';
+                    ollamaStatus.style.background = '#fef3c7';
+                    ollamaStatusText.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Ollama not installed';
+                }
+            } catch (error) {
+                console.error('Failed to check Ollama status:', error);
+            }
+        }
+        async function handleScan() {
+            if (!currentFile) {
+                showError('Please select an image first');
+                return;
+            }
+            loading.style.display = 'block';
+            resultsSection.style.display = 'none';
+            hideError();
+            hideSuccess();
+            const formData = new FormData();
+            formData.append('file', currentFile);
+            try {
+                const response = await fetch(`${API_BASE_URL}/scan`, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+                }
+                const data = await response.json();
+                displayResults(data);
+                currentScanId = data.scan_id;
+                // Update history if we're on the history tab
+                if (document.querySelector('[data-tab="history"]').classList.contains('active')) {
+                    loadHistory();
+                }
+            } catch (error) {
+                showError('Scan failed: ' + error.message);
+                console.error(error);
+            } finally {
+                loading.style.display = 'none';
+            }
+        }
+        async function deleteScan(scanId, element) {
+            if (!confirm('Are you sure you want to delete this scan?')) return;
+            try {
+                const response = await fetch(`${API_BASE_URL}/scan/${scanId}`, {
+                    method: 'DELETE'
+                });
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+                }
+                // Remove the card from UI
+                element.closest('.history-card').remove();
+                showSuccess('Scan deleted successfully');
+            } catch (error) {
+                showError('Delete failed: ' + error.message);
+                console.error(error);
+            }
+        }
+        function displayResults(data) {
+            resultsSection.style.display = 'block';
+            scanIdElement.textContent = data.scan_id;
+            scanDateElement.textContent = new Date(data.timestamp).toLocaleString();
+            // Clear previous results
+            resultsGrid.innerHTML = '';
+            // Display each detected object
+            data.objects.forEach(obj => {
+                const card = document.createElement('div');
+                card.className = 'result-card';
+                // Generate links HTML if available
+                let linksHTML = '';
+                if (obj.links) {
+                    linksHTML = `
+                        <div class="object-links" style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #e5e7eb;">
+                            <div class="similar-title">Learn more:</div>
+                            <div class="similar-list">
+                                ${obj.links.wikipedia ? `<a href="${obj.links.wikipedia}" target="_blank" class="similar-item"><i class="fab fa-wikipedia-w"></i> Wikipedia</a>` : ''}
+                                ${obj.links.amazon ? `<a href="${obj.links.amazon}" target="_blank" class="similar-item"><i class="fab fa-amazon"></i> Buy</a>` : ''}
+                                ${obj.links.youtube ? `<a href="${obj.links.youtube}" target="_blank" class="similar-item"><i class="fab fa-youtube"></i> Videos</a>` : ''}
+                                ${obj.links.tutorial ? `<a href="${obj.links.tutorial}" target="_blank" class="similar-item"><i class="fas fa-graduation-cap"></i> Tutorial</a>` : ''}
+                                ${obj.links.manual ? `<a href="${obj.links.manual}" target="_blank" class="similar-item"><i class="fas fa-book"></i> Manual</a>` : ''}
+                            </div>
+                        </div>
+                    `;
+                }
+                card.innerHTML = `
+                    <div class="card-header">
+                        ${obj.name}
+                        <span class="category-badge">${obj.category}</span>
+                    </div>
+                    <div class="card-body">
+                        <div class="card-description">${obj.description}</div>
+                        ${obj.facts ? `
+                        <div class="card-facts">
+                            <div class="fact-title">Did you know?</div>
+                            ${obj.facts}
+                        </div>
+                        ` : ''}
+                        ${obj.similar_objects && obj.similar_objects.length > 0 ? `
+                        <div class="similar-objects">
+                            <div class="similar-title">Similar objects:</div>
+                            <div class="similar-list">
+                                ${obj.similar_objects.map(item => `<span class="similar-item">${item}</span>`).join('')}
+                            </div>
+                        </div>
+                        ` : ''}
+                        ${linksHTML}
+                    </div>
+                `;
+                resultsGrid.appendChild(card);
+            });
+            showSuccess('Scan completed successfully!');
+        }
+        async function loadHistory() {
+            try {
+                const response = await fetch(`${API_BASE_URL}/history`);
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+                }
+                const data = await response.json();
+                displayHistory(data);
+            } catch (error) {
+                showError('Failed to load history: ' + error.message);
+                console.error(error);
+            }
+        }
+        function displayHistory(scans) {
+            historyGrid.innerHTML = '';
+            if (scans.length === 0) {
+                historyGrid.innerHTML = '<p>No scan history yet. Upload an image to get started!</p>';
+                return;
+            }
+            scans.forEach(scan => {
+                const card = document.createElement('div');
+                card.className = 'history-card';
+                card.addEventListener('click', () => viewScanDetails(scan.scan_id));
+                // Format date
+                const scanDate = new Date(scan.timestamp);
+                const formattedDate = scanDate.toLocaleDateString() + ' ' + scanDate.toLocaleTimeString();
+                // Get first 5 objects for preview
+                const previewObjects = scan.objects.slice(0, 5);
+                card.innerHTML = `
+                        <img src="${API_BASE_URL}/image/${scan.scan_id}" alt="Scan image" class="history-image">                    <div class="history-content">
+                        <div class="history-date">${formattedDate}</div>
+                        <div class="history-objects">
+                            ${previewObjects.map(obj => `<span class="history-object">${obj.name}</span>`).join('')}
+                            ${scan.objects.length > 5 ? `<span class="history-object">+${scan.objects.length - 5} more</span>` : ''}
+                        </div>
+                        <div class="history-actions">
+                            <i class="fas fa-heart favorite-btn ${scan.favorite ? 'active' : ''}"
+                               data-scan-id="${scan.scan_id}"
+                               onclick="event.stopPropagation(); toggleFavorite('${scan.scan_id}', this)"></i>
+                            <i class="fas fa-download export-btn"
+                            onclick="event.stopPropagation(); exportScan('${scan.scan_id}', 'json')"></i>
+                            <i class="fas fa-trash delete-btn"
+                            onclick="event.stopPropagation(); deleteScan('${scan.scan_id}', this)"></i>
+                        </div>
+                    </div>
+                `;
+                historyGrid.appendChild(card);
+            });
+            historySection.style.display = 'block';
+        }
+        async function viewScanDetails(scanId) {
+            try {
+                const response = await fetch(`${API_BASE_URL}/scan/${scanId}`);
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+                }
+                const data = await response.json();
+                // Switch to scan tab
+                document.querySelector('[data-tab="scan"]').click();
+                // Display the results
+                displayResults(data);
+                currentScanId = scanId;
+            } catch (error) {
+                showError('Failed to load scan details: ' + error.message);
+                console.error(error);
+            }
+        }
+        async function toggleFavorite(scanId, element) {
+            try {
+                const currentlyFavorite = element.classList.contains('active');
+                const response = await fetch(`${API_BASE_URL}/favorite/${scanId}?favorite=${!currentlyFavorite}`, {
+                    method: 'POST'
+                });
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+                }
+                // The response now returns JSON with favorite status
+                const data = await response.json();
+                if (data.favorite) {
+                    element.classList.add('active');
+                    showSuccess('Scan added to favorites');
+                } else {
+                    element.classList.remove('active');
+                    showSuccess('Scan removed from favorites');
+                }
+            } catch (error) {
+                showError('Failed to update favorite: ' + error.message);
+                console.error(error);
+            }
+        }
+        async function exportScan(scanId, format = 'json') {
+            if (!scanId) {
+                showError('No scan selected for export');
+                return;
+            }
+            try {
+                const url = `${API_BASE_URL}/export?scan_id=${scanId}&format=${format}`;
+                const response = await fetch(url);
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+                }
+                const blob = await response.blob();
+                const downloadUrl = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = downloadUrl;
+                a.download = `scan-${scanId}.${format}`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(downloadUrl);
+                showSuccess(`Exported as ${format.toUpperCase()}`);
+            } catch (error) {
+                showError('Export failed: ' + error.message);
+                console.error(error);
+            }
+        }
+        function showError(message) {
+            errorMessage.textContent = message;
+            errorMessage.style.display = 'block';
+            setTimeout(hideError, 5000);
+        }
+        function hideError() {
+            errorMessage.style.display = 'none';
+        }
+        function showSuccess(message) {
+            successMessage.textContent = message;
+            successMessage.style.display = 'block';
+            setTimeout(hideSuccess, 5000);
+        }
+        function hideSuccess() {
+            successMessage.style.display = 'none';
+        }
+        let ws = null;
+        let stream = null;
+        let isCameraActive = false;
+    // Modify the startCamera function to handle errors better
+        async function startCamera() {
+            try {
+                // First check if backend can access camera
+                const cameraAvailable = await checkCameraStatus();
+                if (!cameraAvailable) {
+                    showError('No camera available or camera in use by another application');
+                    return;
+                }
+                // Try to access frontend camera
+                stream = await navigator.mediaDevices.getUserMedia({
+                    video: { width: 640, height: 480 }
+                });
+                webcamVideo.srcObject = stream;
+                webcamVideo.style.display = 'block';
+                // Connect to WebSocket
+                connectWebSocket();
+                startCameraBtn.disabled = true;
+                stopCameraBtn.disabled = false;
+                captureFrameBtn.disabled = false;
+                isCameraActive = true;
+                showSuccess('Camera started successfully');
+            } catch (error) {
+                showError('Failed to access camera: ' + error.message);
+                console.error('Camera error:', error);
+                // Check if it's a permission error
+                if (error.name === 'NotAllowedError') {
+                    showError('Camera permission denied. Please allow camera access in your browser settings.');
+                } else if (error.name === 'NotFoundError') {
+                    showError('No camera found. Please check if your camera is connected properly.');
+                }
+            }
+        }
+        function stopCamera() {
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+                stream = null;
+            }
+            if (ws) {
+                ws.close();
+                ws = null;
+            }
+            webcamVideo.style.display = 'none';
+            webcamCanvas.style.display = 'none';
+            detectedObjectsList.innerHTML = '';
+            startCameraBtn.disabled = false;
+            stopCameraBtn.disabled = true;
+            captureFrameBtn.disabled = true;
+            isCameraActive = false;
+            showSuccess('Camera stopped');
+        }
+        function connectWebSocket() {
+            ws = new WebSocket(`ws://localhost:8001/ws/realtime`);
+            ws.onopen = () => {
+                console.log('WebSocket connected');
+                showSuccess('Real-time detection connected');
+            };
+            ws.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                updateDetectedObjects(data.objects);
+                // If you want to display the processed frame
+                if (data.frame) {
+                    displayProcessedFrame(data.frame);
+                }
+            };
+            ws.onclose = () => {
+                console.log('WebSocket disconnected');
+                if (isCameraActive) {
+                    showError('Real-time connection lost');
+                }
+            };
+            ws.onerror = (error) => {
+                console.error('WebSocket error:', error);
+                showError('Real-time connection error');
+            };
+        }
+        function updateDetectedObjects(objects) {
+            detectedObjectsList.innerHTML = '';
+            if (objects.length === 0) {
+                detectedObjectsList.innerHTML = '<p>No objects detected</p>';
+                return;
+            }
+            objects.forEach(obj => {
+                const pill = document.createElement('div');
+                pill.className = 'object-pill';
+                pill.textContent = obj;
+                detectedObjectsList.appendChild(pill);
+            });
+        }
+        function displayProcessedFrame(frameData) {
+            const img = new Image();
+            img.onload = () => {
+                const ctx = webcamCanvas.getContext('2d');
+                webcamCanvas.width = img.width;
+                webcamCanvas.height = img.height;
+                ctx.drawImage(img, 0, 0);
+                webcamCanvas.style.display = 'block';
+            };
+            img.src = 'data:image/jpeg;base64,' + frameData;
+        }
+// Fallback capture method
+        async function captureFallback() {
+            try {
+                // Capture from the video element
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                canvas.width = webcamVideo.videoWidth;
+                canvas.height = webcamVideo.videoHeight;
+                ctx.drawImage(webcamVideo, 0, 0, canvas.width, canvas.height);
+                // Convert to blob and send as form data
+                canvas.toBlob(async (blob) => {
+                    const formData = new FormData();
+                    formData.append('file', blob, 'capture.jpg');
+                    const response = await fetch(`${API_BASE_URL}/scan`, {
+                        method: 'POST',
+                        body: formData
+                    });
+                    if (!response.ok) {
+                        throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+                    }
+                    const data = await response.json();
+                    // Switch to scan tab and show results
+                    document.querySelector('[data-tab="scan"]').click();
+                    displayResults(data);
+                    currentScanId = data.scan_id;
+                    showSuccess('Frame captured and analyzed successfully!');
+                }, 'image/jpeg', 0.8);
+            } catch (error) {
+                showError('Fallback capture also failed: ' + error.message);
+                console.error(error);
+            }
+        }
+        async function captureAndAnalyzeFrame() {
+            if (!isCameraActive) {
+                showError('Please start the camera first');
+                return;
+            }
+            realtimeLoading.style.display = 'block';
+            try {
+                const response = await fetch(`${API_BASE_URL}/realtime/capture`, {
+                    method: 'POST'
+                });
+                if (!response.ok) {
+                    // If capture fails, try with a different endpoint as fallback
+                    await captureFallback();
+                    return;
+                }
+                const data = await response.json();
+                // Switch to scan tab and show results
+                document.querySelector('[data-tab="scan"]').click();
+                displayResults(data);
+                currentScanId = data.scan_id;
+                showSuccess('Frame captured and analyzed successfully!');
+            } catch (error) {
+                showError('Capture failed: ' + error.message);
+                console.error(error);
+            } finally {
+                realtimeLoading.style.display = 'none';
+            }
+        }
+        async function checkCameraStatus() {
+            try {
+                const response = await fetch(`${API_BASE_URL}/camera_status`);
+                const data = await response.json();
+                const realtimeTab = document.querySelector('[data-tab="realtime"]');
+                if (data.cameras_available) {
+                    realtimeTab.style.opacity = "1";
+                    realtimeTab.style.cursor = "pointer";
+                    showSuccess(`Camera detected: ${data.message}`);
+                } else {
+                    realtimeTab.style.opacity = "0.5";
+                    realtimeTab.style.cursor = "not-allowed";
+                    showError('No camera detected. Real-time features disabled.');
+                }
+                return data.cameras_available;
+            } catch (error) {
+                console.error('Failed to check camera status:', error);
+                return false;
+            }
+        }
+        // Search and Ask functionality
+        document.getElementById('search-btn').addEventListener('click', performTextSearch);
+        document.querySelectorAll('[data-search-type]').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const searchType = e.target.getAttribute('data-search-type');
+                // Update active button
+                document.querySelectorAll('[data-search-type]').forEach(b => {
+                    b.classList.remove('active');
+                    b.classList.add('btn-outline');
+                });
+                e.target.classList.add('active');
+                e.target.classList.remove('btn-outline');
+                e.target.classList.add('btn-primary');
+                // Show appropriate search input
+                document.getElementById('text-search').style.display =
+                    searchType === 'text' ? 'flex' : 'none';
+                document.getElementById('image-search').style.display =
+                    searchType === 'image' ? 'flex' : 'none';
+            });
+        });
+        document.getElementById('ask-btn').addEventListener('click', askQuestion);
+        document.getElementById('search-browse-btn').addEventListener('click', () => {
+            document.getElementById('search-file-input').click();
+        });
+        document.getElementById('search-file-input').addEventListener('change', handleSearchImage);
+        // Handle drag and drop for search image
+        const searchDropZone = document.getElementById('search-drop-zone');
+        searchDropZone.addEventListener('dragover', handleDragOver);
+        searchDropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            searchDropZone.style.borderColor = '#6366f1';
+            searchDropZone.style.backgroundColor = 'rgba(99, 102, 241, 0.05)';
+            if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+                handleSearchImageFile(e.dataTransfer.files[0]);
+            }
+        });
+        async function performTextSearch() {
+            const query = document.getElementById('search-query').value.trim();
+            if (!query || query.length < 2) {
+                showError('Please enter at least 2 characters to search');
+                return;
+            }
+            try {
+                const response = await fetch(`${API_BASE_URL}/search`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ query })
+                });
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+                }
+                const results = await response.json();
+                displaySearchResults(results);
+            } catch (error) {
+                showError('Search failed: ' + error.message);
+                console.error(error);
+            }
+        }
+        function handleSearchImage(e) {
+            if (e.target.files && e.target.files[0]) {
+                handleSearchImageFile(e.target.files[0]);
+            }
+        }
+        function handleSearchImageFile(file) {
+            if (!file.type.match('image.*')) {
+                showError('Please select an image file');
+                return;
+            }
+            // Preview image
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                // You could show a small preview here if desired
+            };
+            reader.readAsDataURL(file);
+            // Perform the search
+            performImageSearch(file);
+        }
+        async function performImageSearch(file) {
+            const formData = new FormData();
+            formData.append('file', file);
+            try {
+                const response = await fetch(`${API_BASE_URL}/search/image`, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+                }
+                const result = await response.json();
+                if (result.message && result.message.includes('No matching')) {
+                    showError('No matching image found in your history');
+                    document.getElementById('search-results').style.display = 'none';
+                } else {
+                    // Switch to scan tab and show the result
+                    document.querySelector('[data-tab="scan"]').click();
+                    displayResults(result);
+                    currentScanId = result.scan_id;
+                }
+            } catch (error) {
+                showError('Image search failed: ' + error.message);
+                console.error(error);
+            }
+        }
+        async function askQuestion() {
+            const objectName = document.getElementById('object-name').value.trim();
+            const question = document.getElementById('question-input').value.trim();
+            if (!objectName || !question) {
+                showError('Please enter both an object name and a question');
+                return;
+            }
+            try {
+                const response = await fetch(`${API_BASE_URL}/ask`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ object_name: objectName, question })
+                });
+                if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+                }
+                const result = await response.json();
+                // Display the answer
+                document.getElementById('ai-answer').textContent = result.answer;
+                document.getElementById('answer-container').style.display = 'block';
+            } catch (error) {
+                showError('Failed to get answer: ' + error.message);
+                console.error(error);
+            }
+        }
+        function displaySearchResults(results) {
+            const resultsContainer = document.getElementById('search-results');
+            const resultsGrid = document.getElementById('search-results-grid');
+            resultsContainer.style.display = 'block';
+            resultsGrid.innerHTML = '';
+            if (results.length === 0) {
+                resultsGrid.innerHTML = '<p>No results found for your search.</p>';
+                return;
+            }
+            results.forEach(scan => {
+                const card = document.createElement('div');
+                card.className = 'history-card';
+                card.addEventListener('click', () => viewScanDetails(scan.scan_id));
+                // Format date
+                const scanDate = new Date(scan.timestamp);
+                const formattedDate = scanDate.toLocaleDateString() + ' ' + scanDate.toLocaleTimeString();
+                // Get first 5 objects for preview
+                const previewObjects = scan.objects.slice(0, 5);
+                card.innerHTML = `
+                    <img src="${API_BASE_URL}/image/${scan.scan_id}" alt="Scan image" class="history-image">
+                    <div class="history-content">
+                        <div class="history-date">${formattedDate}</div>
+                        <div class="history-objects">
+                            ${previewObjects.map(obj => `<span class="history-object">${obj.name}</span>`).join('')}
+                            ${scan.objects.length > 5 ? `<span class="history-object">+${scan.objects.length - 5} more</span>` : ''}
+                        </div>
+                    </div>
+                `;
+                resultsGrid.appendChild(card);
+            });
+        }
+        // Add cleanup when switching tabs
+        // Add cleanup when switching tabs
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                const tabId = tab.getAttribute('data-tab');
+                // Stop camera if switching away from real-time tab
+                if (tabId !== 'realtime' && isCameraActive) {
+                    stopCamera();
+                }
+                // Update active tab
+                tabs.forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+                // Show corresponding content
+                tabContents.forEach(content => {
+                    content.classList.remove('active');
+                    if (content.id === `${tabId}-tab`) {
+                        content.classList.add('active');
+                    }
+                });
+                // Load history if history tab is selected
+                if (tabId === 'history') {
+                    loadHistory();
+                }
+                // Clear search results if search tab is selected
+                if (tabId === 'search') {
+                    document.getElementById('search-results').style.display = 'none';
+                    document.getElementById('answer-container').style.display = 'none';
+                }
+            });
+        });
+        // Initialize
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+    // Check Ollama status on page load
+            checkOllamaStatus();
+            // Check camera status
+            checkCameraStatus();
+            // Check if we're in offline mode
+            fetch(`${API_BASE_URL}/offline_toggle?mode=false`)
+                .then(response => response.json())
+                .then(data => {
+                    offlineMode = data.offline_mode;
+                    offlineToggle.checked = offlineMode;
+                    // Show Ollama status if offline mode is enabled
+                    if (offlineMode) {
+                        const ollamaStatus = document.getElementById('ollama-status');
+                        const ollamaStatusText = document.getElementById('ollama-status-text');
+                        // We need to check Ollama status again to get the current state
+                        checkOllamaStatus();
+                    }
+                })
+                .catch(error => {
+                    console.error('Failed to get offline mode status:', error);
+                });
+        });
+        // Add this to handle page unload
+        window.addEventListener('beforeunload', () => {
+            if (isCameraActive) {
+                stopCamera();
+            }
+            if (ws) {
+                ws.close();
+            }
+        });
+    </script>
+</body>
+</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1,14 @@

+fastapi==0.115.0
+uvicorn[standard]==0.30.6
+torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+ultralytics==8.3.2
+clip-by-openai==1.0.0  # For CLIP
+groq==0.9.0
+python-dotenv==1.0.1
+pillow==10.4.0
+opencv-python-headless==4.10.0.84  # Headless for server
+numpy==2.1.1
+imagehash==4.3.1
+aiohttp==3.10.5
+pydantic==2.9.2
+sqlite3  # Built-in

yolo12x.pt ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:682ce8dadee004dbe964950f1bf3eda451671815a6ed62db80b398916b9b7c6f
+size 119322638