Update assets/detection.js

assets/detection.js

@@ -1,70 +1,68 @@
-import * as tf from "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs";
-import * as cocoSsd from "https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd";
-
-// Get references to the HTML elements
 const video = document.getElementById("video");
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
-const statusLabel = document.getElementById("status");
-
-let model;
+const button = document.getElementById("start");
 
-// Load the YOLO (COCO-SSD) model
-async function loadModel() {
-  statusLabel.innerText = "Loading model...";
-  model = await cocoSsd.load();
-  statusLabel.innerText = "Model loaded successfully!";
+// Text-to-Speech for audio feedback
+function speak(text) {
+  const synth = window.speechSynthesis;
+  const utterance = new SpeechSynthesisUtterance(text);
+  synth.speak(utterance);
 }
 
-// Set up the webcam feed
-async function startWebcam() {
-  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+async function setupCamera() {
+  const stream = await navigator.mediaDevices.getUserMedia({
+    video: { width: 640, height: 480 },
+  });
   video.srcObject = stream;
-
   return new Promise((resolve) => {
-    video.onloadedmetadata = () => {
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
-      resolve(video);
-    };
+    video.onloadedmetadata = () => resolve(video);
   });
 }
 
-// Perform object detection on the video feed
 async function detectObjects() {
-  const predictions = await model.detect(video);
+  // Load YOLO model using TensorFlow.js or another library
+  const model = await tf.loadGraphModel("https://path-to-your-yolo-model/model.json");
 
-  // Clear the canvas and draw the video frame
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
 
-  // Draw bounding boxes and labels for detected objects
-  predictions.forEach((prediction) => {
-    const [x, y, width, height] = prediction.bbox;
+  async function processFrame() {
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-    // Draw bounding box
-    ctx.strokeStyle = "red";
-    ctx.lineWidth = 2;
-    ctx.strokeRect(x, y, width, height);
+    // Preprocess the video frame for YOLO model
+    const inputTensor = tf.browser.fromPixels(video).resizeBilinear([640, 480]).expandDims(0);
+    const predictions = await model.executeAsync(inputTensor);
 
-    // Draw label and confidence score
-    ctx.fillStyle = "red";
-    ctx.font = "18px Arial";
-    ctx.fillText(
-      `${prediction.class} (${Math.round(prediction.score * 100)}%)`,
-      x,
-      y > 10 ? y - 5 : 10
-    );
-  });
+    // Parse predictions and draw bounding boxes
+    predictions.forEach((prediction) => {
+      const [x, y, width, height] = prediction.bbox;
+      const label = prediction.class;
+      const confidence = prediction.score;
 
-  requestAnimationFrame(detectObjects); // Loop for real-time detection
-}
+      // Draw the bounding box
+      ctx.strokeStyle = "red";
+      ctx.lineWidth = 2;
+      ctx.strokeRect(x, y, width, height);
 
-// Initialize the application
-async function init() {
-  await loadModel();
-  await startWebcam();
-  detectObjects();
+      // Draw the label
+      ctx.fillStyle = "red";
+      ctx.font = "18px Arial";
+      ctx.fillText(`${label} (${(confidence * 100).toFixed(2)}%)`, x, y - 10);
+
+      // Provide audio feedback
+      speak(`${label} detected with ${(confidence * 100).toFixed(2)}% confidence.`);
+    });
+
+    requestAnimationFrame(processFrame);
+  }
+
+  processFrame();
 }
 
-init();
+button.addEventListener("click", async () => {
+  button.disabled = true; // Disable the button after starting
+  await setupCamera();
+  video.play();
+  detectObjects();
+});