Update index.html

index.html

@@ -39,6 +39,25 @@
             left: 0;
             transform: scaleX(-1);
         }
+        .controls {
+            margin-top: 20px;
+            display: flex;
+            gap: 10px;
+        }
+        button {
+            background: #0f0;
+            color: #000;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: all 0.3s;
+        }
+        button:hover {
+            background: #0f0;
+            box-shadow: 0 0 10px #0f0;
+        }
         .detection-info {
             margin-top: 20px;
             padding: 10px;
@@ -54,6 +73,9 @@
             margin-top: 10px;
             font-size: 14px;
         }
+        .night-vision {
+            filter: brightness(2) contrast(1.2) hue-rotate(120deg) grayscale(0.5);
+        }
         .detection-box {
             position: absolute;
             border: 2px solid #0f0;
@@ -78,6 +100,9 @@
             <canvas id="canvas"></canvas>
         </div>
 
+       
+        </div>
+
         <div class="detection-info">
             <div id="detections"></div>
             <div class="stats">
@@ -92,9 +117,10 @@
         let canvas = document.getElementById('canvas');
         let ctx = canvas.getContext('2d');
         let model;
+        let isNightVision = false;
+        let isDetecting = false;
         let lastTime = performance.now();
         let frameCount = 0;
-        
         // Initialize camera and AI model
         async function init() {
             // Load COCO-SSD model
@@ -119,68 +145,92 @@
             // Start detection loop
             requestAnimationFrame(detect);
         }
-
+        function toggleNightVision() {
+            isNightVision = !isNightVision;
+            video.className = isNightVision ? 'night-vision' : '';
+        }
+        function toggleDetection() {
+            isDetecting = !isDetecting;
+        }
         async function detect() {
-            // Calculate FPS
-            const now = performance.now();
-            frameCount++;
-            if (now - lastTime >= 1000) {
-                document.getElementById('fps').textContent = `FPS: ${frameCount}`;
-                frameCount = 0;
-                lastTime = now;
+            if (isDetecting) {
+                // Calculate FPS
+                const now = performance.now();
+                frameCount++;
+                if (now - lastTime >= 1000) {
+                    document.getElementById('fps').textContent = `FPS: ${frameCount}`;
+                    frameCount = 0;
+                    lastTime = now;
+                }
+                // Detect objects
+                const predictions = await model.detect(video);
+                
+                // Clear previous detections
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                // Draw new detections
+                predictions.forEach(prediction => {
+                    // Draw bounding box
+                    ctx.strokeStyle = '#00ff00';
+                    ctx.lineWidth = 2;
+                    ctx.strokeRect(
+                        prediction.bbox[0],
+                        prediction.bbox[1],
+                        prediction.bbox[2],
+                        prediction.bbox[3]
+                    );
+                    // Draw label background
+                    ctx.fillStyle = '#00ff00';
+                    ctx.fillRect(
+                        prediction.bbox[0],
+                        prediction.bbox[1] - 20,
+                        prediction.bbox[2],
+                        20
+                    );
+                    // Draw label text
+                    ctx.fillStyle = '#000000';
+                    ctx.font = '16px monospace';
+                    ctx.fillText(
+                        `${prediction.class} ${Math.round(prediction.score * 100)}%`,
+                        prediction.bbox[0] + 5,
+                        prediction.bbox[1] - 5
+                    );
+                });
+                // Update detection info
+                document.getElementById('objects').textContent = 
+                    `Objects detected: ${predictions.length}`;
+                
+                document.getElementById('detections').innerHTML = 
+                    predictions.map(p => 
+                        `Detected ${p.class} (${Math.round(p.score * 100)}% confidence)`
+                    ).join('<br>');
             }
-
-            // Detect objects
-            const predictions = await model.detect(video);
-            
-            // Clear previous detections
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-            // Draw new detections
-            predictions.forEach(prediction => {
-                // Draw bounding box
-                ctx.strokeStyle = '#00ff00';
-                ctx.lineWidth = 2;
-                ctx.strokeRect(
-                    prediction.bbox[0],
-                    prediction.bbox[1],
-                    prediction.bbox[2],
-                    prediction.bbox[3]
-                );
-                // Draw label background
-                ctx.fillStyle = '#00ff00';
-                ctx.fillRect(
-                    prediction.bbox[0],
-                    prediction.bbox[1] - 20,
-                    prediction.bbox[2],
-                    20
-                );
-                // Draw label text
-                ctx.fillStyle = '#000000';
-                ctx.font = '16px monospace';
-                ctx.fillText(
-                    `${prediction.class} ${Math.round(prediction.score * 100)}%`,
-                    prediction.bbox[0] + 5,
-                    prediction.bbox[1] - 5
-                );
-            });
-
-            // Update detection info
-            document.getElementById('objects').textContent = 
-                `Objects detected: ${predictions.length}`;
-            
-            document.getElementById('detections').innerHTML = 
-                predictions.map(p => 
-                    `Detected ${p.class} (${Math.round(p.score * 100)}% confidence)`
-                ).join('<br>');
-
             requestAnimationFrame(detect);
         }
-
         // Start application
         init().catch(err => {
             console.error('Error initializing camera:', err);
         });
+        // Add image processing for better night vision
+        const imageProcessor = new ImageCapture(video.srcObject.getVideoTracks()[0]);
+        
+        async function enhanceNightVision() {
+            if (isNightVision) {
+                try {
+                    const photoCapabilities = await imageProcessor.getPhotoCapabilities();
+                    await imageProcessor.setOptions({
+                        brightness: photoCapabilities.brightness.max,
+                        contrast: photoCapabilities.contrast.max,
+                        saturation: 0,
+                        sharpness: photoCapabilities.sharpness.max,
+                        exposureMode: 'manual',
+                        exposureCompensation: 2,
+                        whiteBalanceMode: 'manual'
+                    });
+                } catch (err) {
+                    console.log('Night vision enhancement not supported');
+                }
+            }
+        }
     </script>
 </body>
-</html>
+</html>