Update assets/detection.js

assets/detection.js

@@ -1,7 +1,7 @@
 const video = document.getElementById("video");
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
-const button = document.getElementById("start");
+const startButton = document.getElementById("start");
 
 function speak(text) {
   const synth = window.speechSynthesis;
@@ -20,8 +20,10 @@ async function setupCamera() {
 }
 
 async function detectObjects() {
-  console.log("Loading model...");
-  const model = await tf.loadGraphModel("https://path-to-your-yolo-model/model.json");
+  console.log("Loading YOLO model...");
+  const model = await tf.loadGraphModel(
+    "https://path-to-your-model/model.json"
+  ); // Replace with your actual model path
 
   canvas.width = video.videoWidth;
   canvas.height = video.videoHeight;
@@ -29,24 +31,32 @@ async function detectObjects() {
   async function processFrame() {
     ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-    const inputTensor = tf.browser.fromPixels(video).resizeBilinear([640, 480]).expandDims(0);
+    const inputTensor = tf.browser
+      .fromPixels(video)
+      .resizeBilinear([640, 480])
+      .expandDims(0);
+
     const predictions = await model.executeAsync(inputTensor);
 
-    console.log("Predictions:", 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;
 
+      // Draw bounding box
       ctx.strokeStyle = "red";
       ctx.lineWidth = 2;
       ctx.strokeRect(x, y, width, height);
 
+      // Draw 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.`);
     });
 
@@ -56,8 +66,8 @@ async function detectObjects() {
   processFrame();
 }
 
-button.addEventListener("click", async () => {
-  button.disabled = true;
+startButton.addEventListener("click", async () => {
+  startButton.disabled = true;
   await setupCamera();
   video.play();
   detectObjects();