Update index.html

index.html

@@ -39,25 +39,6 @@
             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;
@@ -99,12 +80,6 @@
             <video id="video" autoplay playsinline></video>
             <canvas id="canvas"></canvas>
         </div>
-
-        <div class="controls">
-            <button onclick="toggleNightVision()">Toggle Night Vision</button>
-            <button onclick="toggleDetection()">Toggle Detection</button>
-        </div>
-
         <div class="detection-info">
             <div id="detections"></div>
             <div class="stats">
@@ -119,14 +94,16 @@
         let canvas = document.getElementById('canvas');
         let ctx = canvas.getContext('2d');
         let model;
-        let isNightVision = false;
-        let isDetecting = false;
+        let isNightVision = true;  // Night vision is enabled by default
+        let isDetecting = true;    // Detection is enabled by default
         let lastTime = performance.now();
         let frameCount = 0;
+
         // Initialize camera and AI model
         async function init() {
             // Load COCO-SSD model
             model = await cocoSsd.load();
+
             // Setup camera
             const constraints = {
                 video: {
@@ -141,26 +118,20 @@
             };
             const stream = await navigator.mediaDevices.getUserMedia(constraints);
             video.srcObject = stream;
+
             // Set canvas size
             canvas.width = 640;
             canvas.height = 480;
-            
-            // Automatically enable detection when camera is initialized
-            toggleDetection();  // This activates object detection as soon as the camera starts
+
+            // Enable night vision by default
+            if (isNightVision) {
+                video.className = 'night-vision';
+            }
 
             // Start detection loop
             requestAnimationFrame(detect);
         }
 
-        function toggleNightVision() {
-            isNightVision = !isNightVision;
-            video.className = isNightVision ? 'night-vision' : '';
-        }
-
-        function toggleDetection() {
-            isDetecting = !isDetecting;
-        }
-
         async function detect() {
             if (isDetecting) {
                 // Calculate FPS
@@ -171,11 +142,13 @@
                     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
@@ -187,6 +160,7 @@
                         prediction.bbox[2],
                         prediction.bbox[3]
                     );
+
                     // Draw label background
                     ctx.fillStyle = '#00ff00';
                     ctx.fillRect(
@@ -195,6 +169,7 @@
                         prediction.bbox[2],
                         20
                     );
+
                     // Draw label text
                     ctx.fillStyle = '#000000';
                     ctx.font = '16px monospace';
@@ -204,15 +179,17 @@
                         prediction.bbox[1] - 5
                     );
                 });
+
                 // Update detection info
-                document.getElementById('objects').textContent = 
+                document.getElementById('objects').textContent =
                     `Objects detected: ${predictions.length}`;
-                
-                document.getElementById('detections').innerHTML = 
-                    predictions.map(p => 
+
+                document.getElementById('detections').innerHTML =
+                    predictions.map(p =>
                         `Detected ${p.class} (${Math.round(p.score * 100)}% confidence)`
                     ).join('<br>');
             }
+
             requestAnimationFrame(detect);
         }
 
@@ -223,7 +200,7 @@
 
         // Add image processing for better night vision
         const imageProcessor = new ImageCapture(video.srcObject.getVideoTracks()[0]);
-        
+
         async function enhanceNightVision() {
             if (isNightVision) {
                 try {