Update static/script.js

static/script.js

@@ -1,50 +1,27 @@
-const itsekiri_labels = [
-  'Méene', 'Méji', 'Métà', 'Mérin', 'Márùn',
-  'Méfa', 'Méje', 'Méjọ', 'Méṣan', 'Méwà'
-];
-
 const video = document.getElementById('video');
 const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 const predictionText = document.getElementById('prediction');
-const fingersDisplay = document.getElementById('fingers');
-const enableWebcamBtn = document.getElementById('enable-webcam');
-let stream;
-
-enableWebcamBtn.addEventListener('click', () => {
-  if (!stream) {
-    navigator.mediaDevices.getUserMedia({ video: true })
-      .then(s => {
-        stream = s;
-        video.srcObject = stream;
-        enableWebcamBtn.style.display = 'none';
-        startPrediction();
-      })
-      .catch(console.error);
-  }
-});
-
-function startPrediction() {
-  setInterval(() => {
-    // Draw video frame to canvas
-    ctx.drawImage(video, 0, 0, 640, 480);
 
-    // Simulate finger detection (random for demo)
-    const fingerCount = Math.floor(Math.random() * 5) + 1; // Random 1-5 fingers
-    fingersDisplay.textContent = `Fingers Detected: ${fingerCount}`;
+navigator.mediaDevices.getUserMedia({ video: true })
+  .then(stream => {
+    video.srcObject = stream;
+  })
+  .catch(console.error);
 
-    // Mock prediction based on finger count
-    predictionText.textContent = `Prediction: Sign ${fingerCount}`;
+setInterval(() => {
+  // Crop and resize the area with digit from webcam video (adjust coords if needed)
+  ctx.drawImage(video, 100, 100, 200, 200, 0, 0, 64, 64);
+  const dataUrl = canvas.toDataURL('image/jpeg');
 
-    // Optional: Draw circles for fingers (visualization)
-    ctx.strokeStyle = '#ff4444';
-    ctx.lineWidth = 2;
-    for (let i = 0; i < fingerCount; i++) {
-      const x = 100 + (i * 100);
-      const y = 100 + Math.random() * 200;
-      ctx.beginPath();
-      ctx.arc(x, y, 20, 0, Math.PI * 2);
-      ctx.stroke();
-    }
-  }, 500);
-}
+  fetch('/predict', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ image: dataUrl })
+  })
+  .then(res => res.json())
+  .then(data => {
+    predictionText.textContent = data.prediction;
+  })
+  .catch(console.error);
+}, 500);