Update public/script.js

public/script.js

@@ -44,14 +44,15 @@ let cameraVisible = true;
 let savedCount = 0;
 let frameCount = 0;
 let lastFpsUpdate = performance.now();
-let handLandmarker = null;
+let handposeModel = null;
 let cameraStream = null;
 let isModelReady = false;
 let canvasWidth = 0;
 let canvasHeight = 0;
 let modelLoadAttempts = 0;
-const MAX_MODEL_ATTEMPTS = 5;
+const MAX_MODEL_ATTEMPTS = 3;
 const TRIGGER_COUNT = 10;
+let detectionInterval = null;
 
 // ============================================================
 // 4. Canvas Resize
@@ -124,126 +125,40 @@ setupTapTrigger(canvas);
 setupTapTrigger(gestureIndicator);
 
 // ============================================================
-// 6. Wait for FilesetResolver – Polling with Retry
+// 6. Handpose Model Loading
 // ============================================================
-function waitForFilesetResolver(timeout = 30000) {
-  return new Promise((resolve, reject) => {
-    const startTime = Date.now();
-    
-    function check() {
-      if (typeof FilesetResolver !== 'undefined') {
-        backendLog('✅ FilesetResolver found');
-        resolve();
-        return;
-      }
-      
-      if (Date.now() - startTime > timeout) {
-        reject(new Error('FilesetResolver timeout after ' + timeout + 'ms'));
-        return;
-      }
-      
-      // Check again in 500ms
-      setTimeout(check, 500);
-    }
-    
-    check();
-  });
-}
-
-// ============================================================
-// 7. MediaPipe Hand Landmarker Initialization
-// ============================================================
-async function initHandLandmarker() {
+async function loadHandposeModel() {
   try {
-    backendLog(`⏳ Loading model (attempt ${modelLoadAttempts + 1})...`);
+    backendLog(`⏳ Loading handpose model (attempt ${modelLoadAttempts + 1})...`);
     
-    // Wait for FilesetResolver to be available
-    try {
-      await waitForFilesetResolver(30000);
-    } catch (waitErr) {
-      backendLog(`❌ FilesetResolver timeout: ${waitErr.message}`);
-      statusDiv.textContent = '❌ MediaPipe CDN not loading. Please refresh.';
-      statusDiv.style.cursor = 'pointer';
-      statusDiv.onclick = () => location.reload();
-      return;
+    // Check if handpose is available
+    if (typeof handpose === 'undefined') {
+      backendLog('❌ handpose library not loaded. Check CDN.');
+      statusDiv.textContent = '❌ handpose CDN failed. Please refresh.';
+      return null;
     }
     
-    backendLog('Loading WASM...');
-    const vision = await FilesetResolver.forVisionTasks(
-      'https://unpkg.com/@mediapipe/tasks-vision@0.10.8/wasm'
-    );
-    backendLog('✅ WASM loaded');
-
-    const modelSources = [
-      '/hand_landmarker.task',
-      'https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task',
-      'https://huggingface.co/spaces/GoogleMediaPipe/hand_landmarker/resolve/main/hand_landmarker.task'
-    ];
-
-    let lastError = null;
-    for (let i = 0; i < modelSources.length; i++) {
-      try {
-        backendLog(`Trying model source ${i+1}/${modelSources.length}...`);
-        statusDiv.textContent = `⏳ Loading model (${i+1}/${modelSources.length})...`;
-        
-        handLandmarker = await HandLandmarker.createFromOptions(vision, {
-          baseOptions: {
-            modelAssetPath: modelSources[i],
-            delegate: 'GPU'
-          },
-          runningMode: 'VIDEO',
-          numHands: 1
-        });
-        
-        isModelReady = true;
-        backendLog(`✅ Model loaded from source ${i+1}`);
-        statusDiv.textContent = '✅ Model ready · Draw with index finger';
-        return;
-      } catch (err) {
-        lastError = err;
-        backendLog(`❌ Source ${i+1} failed: ${err.message || 'unknown'}`);
+    // Load the model
+    const model = await handpose.load({
+      modelUrl: 'https://tfhub.dev/mediapipe/tfjs-model/handpose/1/default/1',
+      modelParams: {
+        maxContinuousChecks: 5,
+        detectionConfidence: 0.8,
+        iouThreshold: 0.3,
+        scoreThreshold: 0.75
       }
-    }
-
-    // CPU fallback
-    backendLog('Trying CPU fallback...');
-    try {
-      handLandmarker = await HandLandmarker.createFromOptions(vision, {
-        baseOptions: {
-          modelAssetPath: modelSources[0],
-          delegate: 'CPU'
-        },
-        runningMode: 'VIDEO',
-        numHands: 1
-      });
-      isModelReady = true;
-      backendLog('✅ Model loaded (CPU mode)');
-      statusDiv.textContent = '✅ Model ready (CPU) · Draw with index finger';
-      return;
-    } catch (cpuErr) {
-      backendLog(`❌ CPU fallback failed: ${cpuErr.message}`);
-    }
-
-    throw lastError || new Error('All model sources failed');
-
+    });
+    
+    backendLog('✅ Handpose model loaded successfully');
+    return model;
   } catch (err) {
-    backendLog(`❌ FATAL: ${err.message || 'unknown error'}`);
-    statusDiv.textContent = '❌ Model load failed. Tap here to retry.';
-    statusDiv.style.cursor = 'pointer';
-    statusDiv.onclick = () => {
-      modelLoadAttempts++;
-      if (modelLoadAttempts < MAX_MODEL_ATTEMPTS) {
-        initHandLandmarker();
-      } else {
-        backendLog('❌ Max retries reached');
-        statusDiv.textContent = '❌ Max retries. Please refresh.';
-      }
-    };
+    backendLog(`❌ Model load error: ${err.message}`);
+    return null;
   }
 }
 
 // ============================================================
-// 8. Camera Setup
+// 7. Camera Setup
 // ============================================================
 async function startCamera() {
   try {
@@ -255,7 +170,32 @@ async function startCamera() {
     await video.play();
     backendLog('✅ Camera ready');
     statusDiv.textContent = '📷 Camera ready · Loading model...';
-    initHandLandmarker();
+    
+    // Load model
+    handposeModel = await loadHandposeModel();
+    if (handposeModel) {
+      isModelReady = true;
+      statusDiv.textContent = '✅ Model ready · Draw with index finger';
+      startDetectionLoop();
+    } else {
+      statusDiv.textContent = '❌ Model failed. Tap to retry.';
+      statusDiv.style.cursor = 'pointer';
+      statusDiv.onclick = () => {
+        modelLoadAttempts++;
+        if (modelLoadAttempts < MAX_MODEL_ATTEMPTS) {
+          loadHandposeModel().then(model => {
+            if (model) {
+              handposeModel = model;
+              isModelReady = true;
+              statusDiv.textContent = '✅ Model ready · Draw with index finger';
+              startDetectionLoop();
+            }
+          });
+        }
+      };
+    }
+    
+    // Start the drawing loop
     requestAnimationFrame(drawLoop);
   } catch (err) {
     backendLog(`❌ Camera error: ${err.message}`);
@@ -264,33 +204,24 @@ async function startCamera() {
 }
 
 // ============================================================
-// 9. Core Drawing Loop
+// 8. Hand Detection Loop (separate from drawing)
 // ============================================================
-function drawLoop(timestamp) {
-  frameCount++;
-  if (timestamp - lastFpsUpdate >= 1000) {
-    fpsSpan.textContent = `${frameCount} FPS`;
-    frameCount = 0;
-    lastFpsUpdate = timestamp;
-  }
-
-  if (video.readyState >= 2) {
-    ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
-  } else {
-    ctx.fillStyle = '#1a1a2e';
-    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-  }
-
-  if (isModelReady && handLandmarker && video.readyState >= 2) {
+function startDetectionLoop() {
+  if (detectionInterval) clearInterval(detectionInterval);
+  
+  detectionInterval = setInterval(async () => {
+    if (!isModelReady || !handposeModel || video.readyState < 2) return;
+    
     try {
-      const results = handLandmarker.detectForVideo(video, performance.now());
+      const predictions = await handposeModel.estimateHands(video);
       
-      if (results.landmarks && results.landmarks.length > 0) {
-        const lm = results.landmarks[0];
-        const tip = lm[8];
-        const mcp = lm[5];
+      if (predictions && predictions.length > 0) {
+        const landmarks = predictions[0].landmarks;
+        // Index finger tip is landmark 8, MCP is landmark 5
+        const tip = landmarks[8];
+        const mcp = landmarks[5];
         
-        const isIndexUp = (tip.y < mcp.y - 0.02);
+        const isIndexUp = (tip[1] < mcp[1] - 10);
         
         if (isIndexUp) {
           gestureIndicator.className = 'gesture-on';
@@ -299,10 +230,21 @@ function drawLoop(timestamp) {
           gestureIndicator.className = 'gesture-off';
           gestureIndicator.textContent = '✊';
         }
-
-        const x = tip.x * canvasWidth;
-        const y = tip.y * canvasHeight;
-
+        
+        // Store the position for drawing
+        const x = tip[0] * canvasWidth;
+        const y = tip[1] * canvasHeight;
+        
+        // Draw cursor
+        ctx.beginPath();
+        ctx.arc(x, y, 6, 0, 2 * Math.PI);
+        ctx.fillStyle = eraserMode ? '#ff6666' : currentColor;
+        ctx.fill();
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        
+        // Drawing logic
         if (isIndexUp) {
           if (!drawing) {
             drawing = true;
@@ -327,16 +269,8 @@ function drawLoop(timestamp) {
           lastX = null;
           lastY = null;
         }
-
-        ctx.beginPath();
-        ctx.arc(x, y, 4, 0, 2 * Math.PI);
-        ctx.fillStyle = eraserMode ? '#ff6666' : currentColor;
-        ctx.fill();
-        ctx.strokeStyle = '#fff';
-        ctx.lineWidth = 1;
-        ctx.stroke();
-
       } else {
+        // No hand detected
         gestureIndicator.className = 'gesture-off';
         gestureIndicator.textContent = '🚫';
         drawing = false;
@@ -346,6 +280,26 @@ function drawLoop(timestamp) {
     } catch (err) {
       // silent
     }
+  }, 100); // 10 FPS detection
+}
+
+// ============================================================
+// 9. Drawing Loop (draws video background and cursor overlay)
+// ============================================================
+function drawLoop(timestamp) {
+  frameCount++;
+  if (timestamp - lastFpsUpdate >= 1000) {
+    fpsSpan.textContent = `${frameCount} FPS`;
+    frameCount = 0;
+    lastFpsUpdate = timestamp;
+  }
+
+  // Draw video background
+  if (video.readyState >= 2) {
+    ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
+  } else {
+    ctx.fillStyle = '#1a1a2e';
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
   }
 
   requestAnimationFrame(drawLoop);