Spaces:

srivatsavdamaraju
/

object_detection

Running

App Files Files Community

srivatsavdamaraju commited on Jan 13

Commit

6c77ca4

verified ·

1 Parent(s): 47a2d72

Update index.html

Browse files

Files changed (1) hide show

index.html +81 -45

index.html CHANGED Viewed

@@ -15,14 +15,14 @@
             background-color: #000;
         }
         #video {
-            width: 640px; /* Adjusted video size */
-            height: 480px; /* Adjusted video size */
             display: block;
             background-color: #000;
         }
         #canvas {
-            width: 640px; /* Adjusted canvas size */
-            height: 480px; /* Adjusted canvas size */
             position: absolute;
             top: 0;
             left: 0;
@@ -39,13 +39,25 @@
             border-radius: 5px;
             pointer-events: none;
         }
     </style>
 </head>
 <body>
-<video id="video" width="640" height="480" autoplay muted></video>
-<canvas id="canvas" width="640" height="480"></canvas>
 <div id="overlay" class="overlay"></div>
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
@@ -55,71 +67,95 @@
     const canvas = document.getElementById('canvas');
     const ctx = canvas.getContext('2d');
     const overlay = document.getElementById('overlay');
     // Initialize video stream from webcam
-    navigator.mediaDevices.getUserMedia({ video: true })
         .then((stream) => {
             video.srcObject = stream;
         })
         .catch((err) => {
             console.error('Error accessing webcam: ', err);
         });
     // Load the COCO-SSD model for object detection
-    let model;
     async function loadModel() {
-        model = await cocoSsd.load();
-        console.log('COCO-SSD model loaded!');
     }
-    loadModel();
     // Function to run object detection on each frame
     async function detectFrame() {
         // Clear the canvas before drawing
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         // Draw the video frame to canvas
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        if (model) {
-            const predictions = await model.detect(video);
-            // Clear previous overlay content
-            overlay.innerHTML = '';
-            predictions.forEach(prediction => {
-                // Draw bounding box
-                ctx.beginPath();
-                ctx.rect(
-                    prediction.bbox[0],
-                    prediction.bbox[1],
-                    prediction.bbox[2],
-                    prediction.bbox[3]
-                );
-                ctx.lineWidth = 2;
-                ctx.strokeStyle = 'red';
-                ctx.fillStyle = 'red';
-                ctx.stroke();
-                // Add label for the detected object
-                ctx.fillText(
-                    `${prediction.class} (${Math.round(prediction.score * 100)}%)`,
-                    prediction.bbox[0],
-                    prediction.bbox[1] > 10 ? prediction.bbox[1] - 5 : 10
-                );
-                // Optionally display detected class names in the overlay
-                overlay.innerHTML += `<p>${prediction.class} - ${Math.round(prediction.score * 100)}%</p>`;
-            });
-        }
         // Call detectFrame repeatedly for continuous object detection
         requestAnimationFrame(detectFrame);
     }
-    // Start the detection loop
-    detectFrame();
 </script>
 </body>

             background-color: #000;
         }
         #video {
+            width: 320px; /* Reduced video size */
+            height: 240px; /* Reduced video size */
             display: block;
             background-color: #000;
         }
         #canvas {
+            width: 320px; /* Reduced canvas size */
+            height: 240px; /* Reduced canvas size */
             position: absolute;
             top: 0;
             left: 0;
             border-radius: 5px;
             pointer-events: none;
         }
+        #loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 24px;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 20px;
+            border-radius: 5px;
+        }
     </style>
 </head>
 <body>
+<video id="video" width="320" height="240" autoplay muted></video>
+<canvas id="canvas" width="320" height="240"></canvas>
 <div id="overlay" class="overlay"></div>
+<div id="loading" style="display: none;">Loading model...</div>
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
     const canvas = document.getElementById('canvas');
     const ctx = canvas.getContext('2d');
     const overlay = document.getElementById('overlay');
+    const loading = document.getElementById('loading');
+    let model;
+    let frameCount = 0;
+    const detectionInterval = 2; // Process every 2nd frame
     // Initialize video stream from webcam
+    navigator.mediaDevices.getUserMedia({ video: { width: 320, height: 240 } })
         .then((stream) => {
             video.srcObject = stream;
+            loadModel();
         })
         .catch((err) => {
             console.error('Error accessing webcam: ', err);
         });
     // Load the COCO-SSD model for object detection
     async function loadModel() {
+        try {
+            loading.style.display = 'block'; // Show loading message
+            model = await cocoSsd.load();
+            console.log('COCO-SSD model loaded!');
+            loading.style.display = 'none'; // Hide loading message once model is ready
+            startDetection();
+        } catch (err) {
+            console.error('Error loading model:', err);
+            loading.innerHTML = 'Error loading model. Please try again.';
+        }
     }
     // Function to run object detection on each frame
     async function detectFrame() {
+        if (!model) return; // Only proceed if model is loaded
+        frameCount++;
+        // Skip frames to improve performance
+        if (frameCount % detectionInterval !== 0) {
+            requestAnimationFrame(detectFrame); // Skip this frame and move to the next
+            return;
+        }
+        frameCount = 0; // Reset frame count after detection
         // Clear the canvas before drawing
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         // Draw the video frame to canvas
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        // Run object detection
+        const predictions = await model.detect(video);
+        // Clear previous overlay content
+        overlay.innerHTML = '';
+        predictions.forEach(prediction => {
+            // Draw bounding box
+            ctx.beginPath();
+            ctx.rect(
+                prediction.bbox[0],
+                prediction.bbox[1],
+                prediction.bbox[2],
+                prediction.bbox[3]
+            );
+            ctx.lineWidth = 2;
+            ctx.strokeStyle = 'red';
+            ctx.fillStyle = 'red';
+            ctx.stroke();
+            // Add label for the detected object
+            ctx.fillText(
+                `${prediction.class} (${Math.round(prediction.score * 100)}%)`,
+                prediction.bbox[0],
+                prediction.bbox[1] > 10 ? prediction.bbox[1] - 5 : 10
+            );
+            // Optionally display detected class names in the overlay
+            overlay.innerHTML += `<p>${prediction.class} - ${Math.round(prediction.score * 100)}%</p>`;
+        });
         // Call detectFrame repeatedly for continuous object detection
         requestAnimationFrame(detectFrame);
     }
+    // Start the detection loop once the model is loaded
+    function startDetection() {
+        detectFrame();
+    }
 </script>
 </body>