Update static/app.js

static/app.js

@@ -1,31 +1,48 @@
 const video = document.getElementById('video');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
 const predictionEl = document.getElementById('prediction');
 const confidenceEl = document.getElementById('confidence');
 
-// Start webcam
 navigator.mediaDevices.getUserMedia({ video: true })
-  .then(stream => { video.srcObject = stream; })
-  .catch(err => console.error("Webcam error:", err));
+  .then(stream => {
+    video.srcObject = stream;
+    video.play();
+    requestAnimationFrame(drawLoop);
+  })
+  .catch(err => console.error("Error accessing webcam:", err));
+
+function drawLoop() {
+  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+  // Draw fixed ROI box
+  const x = 100, y = 60, w = 400, h = 360;
+  ctx.strokeStyle = 'red';
+  ctx.lineWidth = 3;
+  ctx.strokeRect(x, y, w, h);
+
+  requestAnimationFrame(drawLoop);
+}
 
 setInterval(() => {
-  // Crop whole frame to 228x228 to match training
+  const x = 100, y = 60, w = 400, h = 360;
   const roiCanvas = document.createElement('canvas');
-  roiCanvas.width = 228;
-  roiCanvas.height = 228;
+  roiCanvas.width = w;
+  roiCanvas.height = h;
   const roiCtx = roiCanvas.getContext('2d');
-  roiCtx.drawImage(video, 0, 0, 228, 228);
-
+  roiCtx.drawImage(video, x, y, w, h, 0, 0, w, h);
   const imgData = roiCanvas.toDataURL('image/jpeg');
 
   fetch('/predict', {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers: {'Content-Type': 'application/json'},
     body: JSON.stringify({ image: imgData })
   })
   .then(res => res.json())
   .then(data => {
-    predictionEl.textContent = `Prediction: ${data.prediction}`;
-    confidenceEl.textContent = `Confidence: ${data.confidence.toFixed(1)}%`;
+    predictionEl.textContent = data.prediction;
+    confidenceEl.textContent = data.confidence.toFixed(1);
   })
-  .catch(console.error);
+  .catch(err => console.error(err));
 }, 500);