Update static/script.js

static/script.js

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', () => {
+function setupEventListeners() {
   const topCard = document.getElementById('top-card');
   const enableWebcamBtn = document.getElementById('enable-webcam-btn');
   const predictionDiv = document.getElementById('prediction');
@@ -13,8 +13,18 @@ document.addEventListener('DOMContentLoaded', () => {
     return;
   }
 
-  enableWebcamBtn.addEventListener('click', () => {
-    console.log('Enable Webcam button clicked');
+  // Remove existing listeners to prevent duplicates
+  enableWebcamBtn.removeEventListener('click', handleWebcamClick);
+  enableWebcamBtn.removeEventListener('touchstart', handleWebcamClick);
+
+  // Add click and touchstart listeners for desktop and mobile
+  enableWebcamBtn.addEventListener('click', handleWebcamClick);
+  enableWebcamBtn.addEventListener('touchstart', handleWebcamClick);
+
+  function handleWebcamClick(event) {
+    event.preventDefault(); // Prevent default touch/click behavior
+    console.log('Enable Webcam button activated (click or touch)');
+    alert('Webcam button clicked!'); // Test responsiveness
     topCard.innerHTML = `
       <div id="container">
         <video id="input_video" autoplay muted playsinline></video>
@@ -22,110 +32,127 @@ document.addEventListener('DOMContentLoaded', () => {
       </div>
     `;
     console.log('Video and canvas elements added to DOM');
-    setTimeout(() => initMediaPipe(), 100);
-  });
+    setTimeout(() => initMediaPipe(), 200); // Increased delay for DOM update
+  }
 
-  clearBtn.addEventListener('click', () => {
-    console.log('Clear button clicked');
-    predictionText.textContent = 'None';
-    loadingSpan.style.display = 'none';
-  });
+  if (clearBtn) {
+    clearBtn.addEventListener('click', () => {
+      console.log('Clear button clicked');
+      predictionText.textContent = 'None';
+      loadingSpan.style.display = 'none';
+    });
+  }
 
-  listenBtn.addEventListener('click', () => {
-    console.log('Listen button clicked');
-    alert('Listen functionality not implemented yet');
-  });
+  if (listenBtn) {
+    listenBtn.addEventListener('click', () => {
+      console.log('Listen button clicked');
+      alert('Listen functionality not implemented yet');
+    });
+  }
+}
 
-  function initMediaPipe() {
-    const videoElement = document.getElementById('input_video');
-    const canvasElement = document.getElementById('output_canvas');
-    const canvasCtx = canvasElement.getContext('2d');
+function initMediaPipe() {
+  const videoElement = document.getElementById('input_video');
+  const canvasElement = document.getElementById('output_canvas');
+  const canvasCtx = canvasElement.getContext('2d');
+  const predictionText = document.getElementById('prediction-text');
+  const loadingSpan = document.getElementById('loading');
 
-    if (!videoElement || !canvasElement || !canvasCtx) {
-      console.error('Required elements not found:', { videoElement, canvasElement, canvasCtx });
-      predictionText.textContent = 'Error: Video or canvas not found';
-      return;
-    }
+  if (!videoElement || !canvasElement || !canvasCtx) {
+    console.error('Required elements not found:', { videoElement, canvasElement, canvasCtx });
+    predictionText.textContent = 'Error: Video or canvas not found';
+    return;
+  }
 
-    console.log('Initializing MediaPipe Hands');
-    const isMobile = window.innerWidth <= 700;
-    canvasElement.width = isMobile ? 480 : 640;
-    canvasElement.height = isMobile ? 360 : 480;
+  console.log('Initializing MediaPipe Hands');
+  const isMobile = window.innerWidth <= 700;
+  canvasElement.width = isMobile ? 480 : 640;
+  canvasElement.height = isMobile ? 360 : 480;
 
-    const hands = new Hands({
-      locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4/${file}`
-    });
+  const hands = new Hands({
+    locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4/${file}`
+  });
 
-    hands.setOptions({
-      maxNumHands: 2,
-      minDetectionConfidence: 0.7,
-      minTrackingConfidence: 0.7,
-    });
+  hands.setOptions({
+    maxNumHands: 2,
+    minDetectionConfidence: 0.7,
+    minTrackingConfidence: 0.7,
+  });
 
-    let lastPredictionTime = 0;
+  let lastPredictionTime = 0;
 
-    hands.onResults((results) => {
-      if (!results.image) {
-        console.warn('No video frame received from MediaPipe');
-        predictionText.textContent = 'Error: No video frame received';
-        loadingSpan.style.display = 'none';
-        return;
-      }
+  hands.onResults((results) => {
+    if (!results.image) {
+      console.warn('No video frame received from MediaPipe');
+      predictionText.textContent = 'Error: No video frame received';
+      loadingSpan.style.display = 'none';
+      return;
+    }
+
+    canvasCtx.save();
+    canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
+    canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
 
-      canvasCtx.save();
-      canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
-      canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
-
-      if (results.multiHandLandmarks && results.multiHandedness) {
-        for (let i = 0; i < results.multiHandLandmarks.length; i++) {
-          if (results.multiHandedness[i].label === "Right") {
-            const landmarks = results.multiHandLandmarks[i];
-            drawConnectors(canvasCtx, landmarks, Hands.HAND_CONNECTIONS, { color: '#00FF00', lineWidth: 4 });
-            drawLandmarks(canvasCtx, landmarks, { color: '#FF0000', lineWidth: 2 });
-          }
+    if (results.multiHandLandmarks && results.multiHandedness) {
+      for (let i = 0; i < results.multiHandLandmarks.length; i++) {
+        if (results.multiHandedness[i].label === "Right") {
+          const landmarks = results.multiHandLandmarks[i];
+          drawConnectors(canvasCtx, landmarks, Hands.HAND_CONNECTIONS, { color: '#00FF00', lineWidth: 4 });
+          drawLandmarks(canvasCtx, landmarks, { color: '#FF0000', lineWidth: 2 });
         }
       }
-      canvasCtx.restore();
-
-      const now = Date.now();
-      if (now - lastPredictionTime > 500) {
-        lastPredictionTime = now;
-        loadingSpan.style.display = 'inline';
-        const imageBase64 = canvasElement.toDataURL('image/png');
-        fetch('/predict', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ image: imageBase64 }),
+    }
+    canvasCtx.restore();
+
+    const now = Date.now();
+    if (now - lastPredictionTime > 500) {
+      lastPredictionTime = now;
+      loadingSpan.style.display = 'inline';
+      const imageBase64 = canvasElement.toDataURL('image/png');
+      fetch('/predict', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ image: imageBase64 }),
+      })
+        .then(res => {
+          if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
+          return res.json();
         })
-          .then(res => {
-            if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
-            return res.json();
-          })
-          .then(data => {
-            predictionText.textContent = data.prediction;
-          })
-          .catch(err => {
-            console.error('Prediction error:', err);
-            predictionText.textContent = 'Error: Prediction failed';
-          })
-          .finally(() => {
-            loadingSpan.style.display = 'none';
-          });
-      }
-    });
+        .then(data => {
+          predictionText.textContent = data.prediction;
+        })
+        .catch(err => {
+          console.error('Prediction error:', err);
+          predictionText.textContent = 'Error: Prediction failed';
+        })
+        .finally(() => {
+          loadingSpan.style.display = 'none';
+        });
+    }
+  });
 
-    console.log('Starting camera');
-    const camera = new Camera(videoElement, {
-      onFrame: async () => {
-        await hands.send({ image: videoElement });
-      },
-      width: isMobile ? 480 : 640,
-      height: isMobile ? 360 : 480,
-    });
+  console.log('Starting camera');
+  const camera = new Camera(videoElement, {
+    onFrame: async () => {
+      await hands.send({ image: videoElement });
+    },
+    width: isMobile ? 480 : 640,
+    height: isMobile ? 360 : 480,
+  });
 
-    camera.start().catch(err => {
-      console.error('Camera failed to start:', err);
-      predictionText.textContent = 'Error: Failed to start webcam. Check permissions.';
-    });
+  camera.start().catch(err => {
+    console.error('Camera failed to start:', err);
+    predictionText.textContent = 'Error: Failed to start webcam. Check permissions.';
+  });
+}
+
+// Initial setup
+setupEventListeners();
+
+// Retry setup if DOM changes (e.g., dynamic reload)
+const observer = new MutationObserver(() => {
+  if (document.getElementById('enable-webcam-btn')) {
+    setupEventListeners();
   }
-});
+});
+observer.observe(document.body, { childList: true, subtree: true });