Spaces:

leoandeol
/

test

Running

App Files Files Community

leoandeol commited on Mar 31

Commit

0e16082

verified ·

1 Parent(s): 83dc62e

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +916 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Test
-emoji: 👀
-colorFrom: indigo
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: test
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,916 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VisionAI - Interactive 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: #4361ee;
+            --secondary: #3f37c9;
+            --accent: #4cc9f0;
+            --light: #f8f9fa;
+            --dark: #212529;
+            --success: #4caf50;
+            --warning: #ff9800;
+            --danger: #f44336;
+            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --transition: all 0.3s ease;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: #f5f7fa;
+            color: var(--dark);
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        header {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            color: white;
+            padding: 20px 0;
+            text-align: center;
+            border-radius: 0 0 20px 20px;
+            box-shadow: var(--shadow);
+            margin-bottom: 30px;
+            position: relative;
+            overflow: hidden;
+        }
+        header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
+            opacity: 0.5;
+        }
+        header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            position: relative;
+            animation: fadeInDown 0.8s ease;
+        }
+        header p {
+            font-size: 1.1rem;
+            opacity: 0.9;
+            position: relative;
+            animation: fadeInUp 0.8s ease;
+        }
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .main-content {
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+        }
+        .detection-section {
+            background-color: white;
+            border-radius: 15px;
+            box-shadow: var(--shadow);
+            padding: 25px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .section-title {
+            font-size: 1.5rem;
+            color: var(--primary);
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .section-title i {
+            font-size: 1.8rem;
+        }
+        .controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        .btn {
+            background-color: var(--primary);
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 50px;
+            cursor: pointer;
+            font-size: 1rem;
+            font-weight: 600;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            box-shadow: var(--shadow);
+        }
+        .btn:hover {
+            background-color: var(--secondary);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+        }
+        .btn:active {
+            transform: translateY(0);
+        }
+        .btn.btn-outline {
+            background-color: transparent;
+            border: 2px solid var(--primary);
+            color: var(--primary);
+        }
+        .btn.btn-outline:hover {
+            background-color: var(--primary);
+            color: white;
+        }
+        .btn.btn-success {
+            background-color: var(--success);
+        }
+        .btn.btn-warning {
+            background-color: var(--warning);
+        }
+        .btn.btn-danger {
+            background-color: var(--danger);
+        }
+        .btn.btn-accent {
+            background-color: var(--accent);
+        }
+        .btn:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .video-container {
+            position: relative;
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: var(--shadow);
+        }
+        #video {
+            width: 100%;
+            display: block;
+            background-color: #e9ecef;
+        }
+        #canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .file-input {
+            display: none;
+        }
+        .file-label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 12px 20px;
+            background-color: var(--primary);
+            color: white;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: var(--transition);
+            box-shadow: var(--shadow);
+            max-width: 300px;
+        }
+        .file-label:hover {
+            background-color: var(--secondary);
+            transform: translateY(-2px);
+        }
+        .detection-results {
+            margin-top: 20px;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            gap: 15px;
+        }
+        .detection-card {
+            background-color: white;
+            border-radius: 10px;
+            padding: 15px;
+            box-shadow: var(--shadow);
+            transition: var(--transition);
+        }
+        .detection-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+        .detection-label {
+            font-weight: bold;
+            color: var(--primary);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 5px;
+        }
+        .detection-confidence {
+            height: 6px;
+            background-color: #e9ecef;
+            border-radius: 3px;
+            margin-bottom: 8px;
+            overflow: hidden;
+        }
+        .confidence-bar {
+            height: 100%;
+            background: linear-gradient(90deg, var(--accent), var(--primary));
+            border-radius: 3px;
+        }
+        .detection-stats {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.8rem;
+            color: #6c757d;
+        }
+        .loading {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
+            padding: 30px;
+            background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 10px;
+            margin: 20px 0;
+        }
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid rgba(67, 97, 238, 0.2);
+            border-top-color: var(--primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+        .stats-container {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+        .stat-card {
+            flex: 1;
+            min-width: 150px;
+            background-color: white;
+            border-radius: 10px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            box-shadow: var(--shadow);
+            transition: var(--transition);
+        }
+        .stat-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+        }
+        .stat-value {
+            font-size: 2.5rem;
+            font-weight: bold;
+            color: var(--primary);
+            line-height: 1;
+        }
+        .stat-label {
+            font-size: 0.9rem;
+            color: #6c757d;
+            text-align: center;
+        }
+        footer {
+            text-align: center;
+            padding: 30px 0;
+            margin-top: 50px;
+            color: #6c757d;
+            font-size: 0.9rem;
+        }
+        @media (max-width: 768px) {
+            header h1 {
+                font-size: 2rem;
+            }
+            .controls {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            .file-label {
+                max-width: 100%;
+            }
+            .detection-results {
+                grid-template-columns: 1fr 1fr;
+            }
+            .stats-container {
+                flex-direction: column;
+            }
+        }
+        /* Toggle switch */
+        .toggle-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 34px;
+        }
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            transition: .4s;
+            border-radius: 34px;
+        }
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 26px;
+            width: 26px;
+            left: 4px;
+            bottom: 4px;
+            background-color: white;
+            transition: .4s;
+            border-radius: 50%;
+        }
+        input:checked + .slider {
+            background-color: var(--primary);
+        }
+        input:focus + .slider {
+            box-shadow: 0 0 1px var(--primary);
+        }
+        input:checked + .slider:before {
+            transform: translateX(26px);
+        }
+        /* Custom select */
+        .select-container {
+            position: relative;
+            min-width: 200px;
+        }
+        .custom-select {
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            width: 100%;
+            padding: 10px 20px;
+            border: 2px solid #e9ecef;
+            border-radius: 50px;
+            background-color: white;
+            font-size: 1rem;
+            font-weight: 600;
+            color: var(--dark);
+            cursor: pointer;
+            transition: var(--transition);
+            box-shadow: var(--shadow);
+        }
+        .custom-select:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+        .select-container::after {
+            content: "\f078";
+            font-family: "Font Awesome 6 Free";
+            font-weight: 900;
+            position: absolute;
+            top: 50%;
+            right: 20px;
+            transform: translateY(-50%);
+            pointer-events: none;
+            color: var(--primary);
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="container">
+            <h1><i class="fas fa-eye"></i> VisionAI</h1>
+            <p>Real-time interactive object detection powered by TensorFlow.js</p>
+        </div>
+    </header>
+    <div class="container">
+        <div class="main-content">
+            <section class="detection-section">
+                <h2 class="section-title"><i class="fas fa-camera"></i> Real-time Detection</h2>
+                <div class="controls">
+                    <button id="startBtn" class="btn btn-success">
+                        <i class="fas fa-play"></i> Start Webcam
+                    </button>
+                    <button id="stopBtn" class="btn btn-danger" disabled>
+                        <i class="fas fa-stop"></i> Stop Webcam
+                    </button>
+                    <div class="toggle-container">
+                        <span>Detection:</span>
+                        <label class="switch">
+                            <input type="checkbox" id="detectToggle" checked>
+                            <span class="slider"></span>
+                        </label>
+                    </div>
+                    <div class="select-container">
+                        <select id="modelSelect" class="custom-select">
+                            <option value="lite">Lite Model (Fast)</option>
+                            <option value="default" selected>Default Model (Balanced)</option>
+                            <option value="heavy">Heavy Model (Accurate)</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="video-container">
+                    <video id="video" autoplay muted playsinline></video>
+                    <canvas id="canvas"></canvas>
+                </div>
+                <div class="loading" id="modelLoading" style="display: none;">
+                    <div class="spinner"></div>
+                    <p>Loading AI model. Please wait...</p>
+                </div>
+                <div id="statsContainer" class="stats-container">
+                    <div class="stat-card">
+                        <div class="stat-value" id="detectionCount">0</div>
+                        <div class="stat-label">Objects Detected</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="fpsCount">0</div>
+                        <div class="stat-label">FPS</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value" id="avgConfidence">0%</div>
+                        <div class="stat-label">Avg Confidence</div>
+                    </div>
+                </div>
+            </section>
+            <section class="detection-section">
+                <h2 class="section-title"><i class="fas fa-image"></i> Image Detection</h2>
+                <div class="controls">
+                    <label for="fileInput" class="file-label">
+                        <i class="fas fa-upload"></i> Upload Image
+                    </label>
+                    <input type="file" id="fileInput" accept="image/*" class="file-input">
+                    <button id="detectBtn" class="btn btn-accent" disabled>
+                        <i class="fas fa-search"></i> Detect Objects
+                    </button>
+                    <button id="clearBtn" class="btn btn-outline">
+                        <i class="fas fa-trash-alt"></i> Clear
+                    </button>
+                </div>
+                <div id="imageContainer" style="display: flex; justify-content: center; margin-bottom: 20px;">
+                    <img id="uploadedImage" style="max-width: 100%; border-radius: 10px; display: none; box-shadow: var(--shadow);">
+                    <canvas id="imageCanvas" style="display: none; max-width: 100%; border-radius: 10px; box-shadow: var(--shadow);"></canvas>
+                </div>
+                <div class="loading" id="imageLoading" style="display: none;">
+                    <div class="spinner"></div>
+                    <p>Detecting objects in image...</p>
+                </div>
+                <div id="imageResultsContainer">
+                    <h3 class="section-title"><i class="fas fa-list"></i> Detection Results</h3>
+                    <div id="detectionResults" class="detection-results"></div>
+                </div>
+            </section>
+        </div>
+    </div>
+    <footer>
+        <div class="container">
+            <p>Interactive Object Detection Demo using TensorFlow.js COCO-SSD model</p>
+            <p>Created with <i class="fas fa-heart" style="color: var(--danger);"></i> for computer vision enthusiasts</p>
+        </div>
+    </footer>
+    <!-- Load TensorFlow.js and COCO-SSD model -->
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.11.0/dist/tf.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.2/dist/coco-ssd.min.js"></script>
+    <script>
+        // DOM Elements
+        const video = document.getElementById('video');
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const startBtn = document.getElementById('startBtn');
+        const stopBtn = document.getElementById('stopBtn');
+        const detectToggle = document.getElementById('detectToggle');
+        const modelSelect = document.getElementById('modelSelect');
+        const modelLoading = document.getElementById('modelLoading');
+        const detectionCount = document.getElementById('detectionCount');
+        const fpsCount = document.getElementById('fpsCount');
+        const avgConfidence = document.getElementById('avgConfidence');
+        const fileInput = document.getElementById('fileInput');
+        const uploadedImage = document.getElementById('uploadedImage');
+        const imageCanvas = document.getElementById('imageCanvas');
+        const imageCtx = imageCanvas.getContext('2d');
+        const detectBtn = document.getElementById('detectBtn');
+        const clearBtn = document.getElementById('clearBtn');
+        const imageLoading = document.getElementById('imageLoading');
+        const detectionResults = document.getElementById('detectionResults');
+        // Variables
+        let model = null;
+        let stream = null;
+        let detectionActive = true;
+        let lastTime = 0;
+        let frameCount = 0;
+        let fps = 0;
+        let objectsDetected = 0;
+        let totalConfidence = 0;
+        // Initialize
+        async function init() {
+            // Load model
+            modelLoading.style.display = 'flex';
+            try {
+                model = await cocoSsd.load({
+                    base: modelSelect.value
+                });
+                console.log('Model loaded successfully');
+            } catch (error) {
+                console.error('Error loading model:', error);
+                alert('Failed to load the AI model. Please try again.');
+            }
+            modelLoading.style.display = 'none';
+            // Add event listeners
+            startBtn.addEventListener('click', startWebcam);
+            stopBtn.addEventListener('click', stopWebcam);
+            detectToggle.addEventListener('change', toggleDetection);
+            modelSelect.addEventListener('change', reloadModel);
+            fileInput.addEventListener('change', handleFileUpload);
+            detectBtn.addEventListener('click', detectInImage);
+            clearBtn.addEventListener('click', clearImageDetection);
+            // Start animate loop for FPS calculation
+            requestAnimationFrame(updateFPS);
+        }
+        // Webcam functions
+        async function startWebcam() {
+            try {
+                stream = await navigator.mediaDevices.getUserMedia({
+                    video: {
+                        facingMode: 'environment',
+                        width: { ideal: 1280 },
+                        height: { ideal: 720 }
+                    },
+                    audio: false
+                });
+                video.srcObject = stream;
+                startBtn.disabled = true;
+                stopBtn.disabled = false;
+                // Wait for video to be ready
+                video.onloadedmetadata = () => {
+                    // Set canvas dimensions to match video
+                    canvas.width = video.videoWidth;
+                    canvas.height = video.videoHeight;
+                    // Start detection loop
+                    detectObjectsInVideo();
+                };
+            } catch (error) {
+                console.error('Error accessing webcam:', error);
+                alert('Could not access the webcam. Make sure you have granted camera permissions.');
+            }
+        }
+        function stopWebcam() {
+            if (stream) {
+                stream.getTracks().forEach(track => track.stop());
+                video.srcObject = null;
+                startBtn.disabled = false;
+                stopBtn.disabled = true;
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            }
+        }
+        // Object detection in video
+        async function detectObjectsInVideo() {
+            if (!stream || !detectionActive || !model) return;
+            try {
+                // Perform detection
+                const predictions = await model.detect(video);
+                // Clear previous drawings
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                // Draw new detections
+                drawDetections(predictions, ctx);
+                // Update stats
+                objectsDetected = predictions.length;
+                detectionCount.textContent = objectsDetected;
+                // Calculate average confidence
+                if (predictions.length > 0) {
+                    totalConfidence = predictions.reduce((sum, pred) => sum + pred.score, 0);
+                    avgConfidence.textContent = Math.round((totalConfidence / predictions.length) * 100) + '%';
+                } else {
+                    avgConfidence.textContent = '0%';
+                }
+                // Call next frame
+                requestAnimationFrame(detectObjectsInVideo);
+            } catch (error) {
+                console.error('Detection error:', error);
+                setTimeout(detectObjectsInVideo, 1000); // Try again after delay
+            }
+        }
+        // Object detection in image
+        async function detectInImage() {
+            if (!uploadedImage.style.display || !model) return;
+            imageLoading.style.display = 'flex';
+            detectBtn.disabled = true;
+            try {
+                // Set canvas dimensions to match image
+                imageCanvas.width = uploadedImage.width;
+                imageCanvas.height = uploadedImage.height;
+                // Draw image on canvas
+                imageCtx.drawImage(uploadedImage, 0, 0, imageCanvas.width, imageCanvas.height);
+                // Perform detection
+                const predictions = await model.detect(imageCanvas);
+                // Show canvas (with detections)
+                uploadedImage.style.display = 'none';
+                imageCanvas.style.display = 'block';
+                // Draw detections
+                drawDetections(predictions, imageCtx);
+                // Display results
+                displayDetectionResults(predictions);
+            } catch (error) {
+                console.error('Image detection error:', error);
+                alert('Error detecting objects in image. Please try again.');
+            }
+            imageLoading.style.display = 'none';
+            detectBtn.disabled = false;
+        }
+        // Helper functions
+        function drawDetections(predictions, context) {
+            predictions.forEach(prediction => {
+                // Draw bounding box
+                context.beginPath();
+                context.rect(
+                    prediction.bbox[0],
+                    prediction.bbox[1],
+                    prediction.bbox[2],
+                    prediction.bbox[3]
+                );
+                context.lineWidth = 3;
+                context.strokeStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
+                context.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
+                context.stroke();
+                // Draw label background
+                context.font = '16px Arial';
+                const textWidth = context.measureText(`${prediction.class} ${(prediction.score * 100).toFixed(1)}%`).width;
+                context.fillRect(
+                    prediction.bbox[0],
+                    prediction.bbox[1] - 25,
+                    textWidth + 10,
+                    25
+                );
+                // Draw label text
+                context.fillStyle = '#ffffff';
+                context.fillText(
+                    `${prediction.class} ${(prediction.score * 100).toFixed(1)}%`,
+                    prediction.bbox[0] + 5,
+                    prediction.bbox[1] - 7
+                );
+            });
+        }
+        function displayDetectionResults(predictions) {
+            // Clear previous results
+            detectionResults.innerHTML = '';
+            // Group predictions by class and count occurrences
+            const classCounts = {};
+            const classConfidences = {};
+            predictions.forEach(pred => {
+                if (!classCounts[pred.class]) {
+                    classCounts[pred.class] = 0;
+                    classConfidences[pred.class] = 0;
+                }
+                classCounts[pred.class]++;
+                classConfidences[pred.class] += pred.score;
+            });
+            // Create cards for each detected class
+            Object.keys(classCounts).forEach(className => {
+                const count = classCounts[className];
+                const avgConfidence = (classConfidences[className] / count) * 100;
+                const card = document.createElement('div');
+                card.className = 'detection-card';
+                card.innerHTML = `
+                    <div class="detection-label">
+                        <i class="fas fa-tag"></i> ${className}
+                    </div>
+                    <div class="detection-confidence">
+                        <div class="confidence-bar" style="width: ${avgConfidence}%"></div>
+                    </div>
+                    <div class="detection-stats">
+                        <span>${count}x</span>
+                        <span>${avgConfidence.toFixed(1)}%</span>
+                    </div>
+                `;
+                detectionResults.appendChild(card);
+            });
+            // If no objects detected
+            if (predictions.length === 0) {
+                const noResults = document.createElement('div');
+                noResults.className = 'detection-card';
+                noResults.textContent = 'No objects detected';
+                detectionResults.appendChild(noResults);
+            }
+        }
+        function toggleDetection() {
+            detectionActive = detectToggle.checked;
+            if (detectionActive && stream) {
+                detectObjectsInVideo();
+            } else {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            }
+        }
+        async function reloadModel() {
+            modelLoading.style.display = 'flex';
+            if (model) {
+                model.dispose(); // Clean up previous model
+            }
+            try {
+                model = await cocoSsd.load({
+                    base: modelSelect.value
+                });
+                console.log('Model reloaded with:', modelSelect.value);
+            } catch (error) {
+                console.error('Error reloading model:', error);
+            }
+            modelLoading.style.display = 'none';
+            // Restart detection if active
+            if (detectionActive && stream) {
+                detectObjectsInVideo();
+            }
+            // Redetect image if one is loaded
+            if (uploadedImage.style.display === 'block') {
+                detectInImage();
+            }
+        }
+        function handleFileUpload(event) {
+            const file = event.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    uploadedImage.src = e.target.result;
+                    uploadedImage.style.display = 'block';
+                    imageCanvas.style.display = 'none';
+                    detectBtn.disabled = false;
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+        function clearImageDetection() {
+            uploadedImage.src = '';
+            uploadedImage.style.display = 'none';
+            imageCanvas.style.display = 'none';
+            detectBtn.disabled = true;
+            fileInput.value = '';
+            detectionResults.innerHTML = '';
+        }
+        function updateFPS(timestamp) {
+            frameCount++;
+            if (timestamp >= lastTime + 1000) {
+                fps = Math.round((frameCount * 1000) / (timestamp - lastTime));
+                fpsCount.textContent = fps;
+                frameCount = 0;
+                lastTime = timestamp;
+            }
+            requestAnimationFrame(updateFPS);
+        }
+        // Initialize the app
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>