file updated

harshitj183 · Aug 20, 2024 · bc8e60a · bc8e60a
1 parent 6ca74eb
commit bc8e60a
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -3,14 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Object Detection</title>
-    <link rel="stylesheet" href="styles.css">
+    <title>Object Detection and Tracking</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>Object Detection</h1>
-    <input type="file" id="file-input" accept="image/*">
-    <div id="canvas-container">
-        <canvas id="canvas"></canvas>
+    <div class="container">
+        <video id="video" width="640" height="480" autoplay></video>
+        <canvas id="canvas" width="640" height="480"></canvas>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>

diff --git a/model/yolo_model.js b/model/yolo_model.js
@@ -0,0 +1,32 @@
+let model;
+
+async function loadModel() {
+    try {
+        const modelUrl = 'path_to_your_model/model.json'; // Replace with your model path
+        model = await tf.loadGraphModel(modelUrl);
+        console.log('Model loaded.');
+    } catch (error) {
+        console.error('Error loading model:', error);
+    }
+}
+
+async function detectObjects(image) {
+    try {
+        const inputTensor = tf.browser.fromPixels(image);
+        const predictions = await model.executeAsync(inputTensor);
+        return formatPredictions(predictions);
+    } catch (error) {
+        console.error('Error during object detection:', error);
+        return [];
+    }
+}
+
+function formatPredictions(predictions) {
+    // Convert raw predictions to a format suitable for drawing
+    // Example implementation; adjust based on your model's output
+    return predictions.map(pred => ({
+        bbox: [pred[0], pred[1], pred[2], pred[3]],
+        class: 'Object', // Placeholder for actual class label
+        score: pred[4]    // Placeholder for actual confidence score
+    }));
+}
diff --git a/script.js b/script.js
@@ -0,0 +1,67 @@
+const video = document.getElementById('video');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Set up video stream
+navigator.mediaDevices.getUserMedia({ video: true })
+    .then(stream => {
+        video.srcObject = stream;
+    })
+    .catch(err => {
+        console.error("Error accessing video stream: ", err);
+    });
+
+// Load COCO-SSD model
+let model;
+async function loadModel() {
+    try {
+        model = await cocoSsd.load();
+        console.log('Model loaded.');
+    } catch (error) {
+        console.error('Error loading model:', error);
+    }
+}
+
+// Draw bounding boxes and labels on canvas
+function drawPredictions(predictions) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    if (!predictions || predictions.length === 0) {
+        console.log('No predictions detected');
+        return;
+    }
+
+    predictions.forEach(prediction => {
+        // Draw bounding box
+        ctx.beginPath();
+        ctx.rect(prediction.bbox[0], prediction.bbox[1], prediction.bbox[2] - prediction.bbox[0], prediction.bbox[3] - prediction.bbox[1]);
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = 'red';
+        ctx.stroke();
+
+        // Draw label and score
+        ctx.font = '16px Arial';
+        ctx.fillStyle = 'red';
+        ctx.fillText(`${prediction.class}: ${Math.round(prediction.score * 100)}%`, prediction.bbox[0], prediction.bbox[1] > 10 ? prediction.bbox[1] - 10 : 10);
+    });
+}
+
+// Object detection function
+async function detectObjects() {
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    try {
+        const predictions = await model.detect(canvas);
+        drawPredictions(predictions);
+    } catch (error) {
+        console.error('Error during object detection:', error);
+    }
+
+    setTimeout(detectObjects, 100);
+}
+
+// Initialize
+loadModel().then(() => {
+    detectObjects();
+});
diff --git a/style.css b/style.css
@@ -1,4 +1,18 @@
-html {
-  height: 100%;
-  width: 100%;
-}
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: black;
+}
+
+.container {
+    position: relative;
+}
+
+video, canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+}