Update assets/detection.js

assets/detection.js

@@ -3,6 +3,16 @@ const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 const startButton = document.getElementById("start");
 
+async function loadModel() {
+  console.log("Loading model...");
+  const model = await tf.loadGraphModel(
+    "https://tfhub.dev/tensorflow/ssd_mobilenet_v2/1/default/1", // Replace with your model URL if required
+    { fromTFHub: true }
+  );
+  console.log("Model loaded successfully.");
+  return model;
+}
+
 function speak(text) {
   const synth = window.speechSynthesis;
   const utterance = new SpeechSynthesisUtterance(text);
@@ -19,12 +29,10 @@ async function setupCamera() {
   });
 }
 
-async function detectObjects() {
-  console.log("Loading YOLO model...");
-  const model = await tf.loadGraphModel(
-    "https://path-to-your-model/model.json"
-  ); // Replace with your actual model path
+async function detectObjects(model) {
+  console.log("Starting detection...");
 
+  video.play();
   canvas.width = video.videoWidth;
   canvas.height = video.videoHeight;
 
@@ -33,31 +41,43 @@ async function detectObjects() {
 
     const inputTensor = tf.browser
       .fromPixels(video)
-      .resizeBilinear([640, 480])
-      .expandDims(0);
+      .resizeBilinear([300, 300])
+      .expandDims(0)
+      .div(tf.scalar(255));
 
     const predictions = await model.executeAsync(inputTensor);
 
+    const [boxes, scores, classes] = predictions;
+
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-    predictions.forEach((prediction) => {
-      const [x, y, width, height] = prediction.bbox;
-      const label = prediction.class;
-      const confidence = prediction.score;
+    const detectionThreshold = 0.5;
+
+    scores.arraySync()[0].forEach((score, index) => {
+      if (score > detectionThreshold) {
+        const bbox = boxes.arraySync()[0][index];
+        const classId = classes.arraySync()[0][index];
+        const label = `Object ${classId}`;
 
-      // Draw bounding box
-      ctx.strokeStyle = "red";
-      ctx.lineWidth = 2;
-      ctx.strokeRect(x, y, width, height);
+        const x = bbox[1] * canvas.width;
+        const y = bbox[0] * canvas.height;
+        const width = (bbox[3] - bbox[1]) * canvas.width;
+        const height = (bbox[2] - bbox[0]) * canvas.height;
 
-      // Draw label
-      ctx.fillStyle = "red";
-      ctx.font = "18px Arial";
-      ctx.fillText(`${label} (${(confidence * 100).toFixed(2)}%)`, x, y - 10);
+        // Draw bounding box
+        ctx.strokeStyle = "red";
+        ctx.lineWidth = 2;
+        ctx.strokeRect(x, y, width, height);
 
-      // Provide audio feedback
-      speak(`${label} detected with ${(confidence * 100).toFixed(2)}% confidence.`);
+        // Draw label
+        ctx.fillStyle = "red";
+        ctx.font = "16px Arial";
+        ctx.fillText(label, x, y > 10 ? y - 5 : y + 20);
+
+        // Speak detected object
+        speak(`Detected ${label}`);
+      }
     });
 
     requestAnimationFrame(processFrame);
@@ -68,7 +88,7 @@ async function detectObjects() {
 
 startButton.addEventListener("click", async () => {
   startButton.disabled = true;
+  const model = await loadModel();
   await setupCamera();
-  video.play();
-  detectObjects();
+  detectObjects(model);
 });