Update public/script.js

public/script.js

@@ -19,17 +19,15 @@ const sizeDownBtn = document.getElementById('brushSizeDown');
 const sizeUpBtn = document.getElementById('brushSizeUp');
 
 // ============================================================
-// 2. Backend Logger – Sends logs to container logs
+// 2. Backend Logger
 // ============================================================
 function backendLog(message, level = 'info') {
   const payload = { message, level, timestamp: new Date().toISOString() };
-  // Send to backend log endpoint (fire-and-forget)
   fetch('/api/log', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(payload)
-  }).catch(() => {}); // Ignore errors
-  // Also show on status for user visibility
+  }).catch(() => {});
   statusDiv.textContent = message;
 }
 
@@ -52,8 +50,8 @@ let isModelReady = false;
 let canvasWidth = 0;
 let canvasHeight = 0;
 let modelLoadAttempts = 0;
-const MAX_MODEL_ATTEMPTS = 3;
-const TRIGGER_COUNT = 10; // Changed from 3 to 10
+const MAX_MODEL_ATTEMPTS = 5;
+const TRIGGER_COUNT = 10;
 
 // ============================================================
 // 4. Canvas Resize
@@ -78,7 +76,6 @@ function openAdminPanel() {
   window.location.href = '/admin.html';
 }
 
-// Keyboard trigger: press '3' ten times within 3 seconds
 document.addEventListener('keydown', (e) => {
   if (e.key === '3') {
     e.preventDefault();
@@ -98,13 +95,11 @@ document.addEventListener('keydown', (e) => {
   }
 });
 
-// Screen tap trigger: tap 10 times within 3 seconds
 function setupTapTrigger(element) {
   let tapCount = 0;
   let tapTimer = null;
   
   element.addEventListener('click', (e) => {
-    // Ignore clicks on buttons and toolbar
     if (e.target.closest('button') || e.target.closest('.toolbar') || e.target.closest('header')) {
       return;
     }
@@ -125,21 +120,49 @@ function setupTapTrigger(element) {
   });
 }
 
-// Attach tap trigger to canvas and gesture indicator
 setupTapTrigger(canvas);
 setupTapTrigger(gestureIndicator);
 
 // ============================================================
-// 6. MediaPipe Hand Landmarker with Detailed Logging
+// 6. Wait for FilesetResolver – Polling with Retry
+// ============================================================
+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() {
   try {
     backendLog(`⏳ Loading model (attempt ${modelLoadAttempts + 1})...`);
     
-    // Check if FilesetResolver is available
-    if (typeof FilesetResolver === 'undefined') {
-      backendLog('❌ FilesetResolver is not defined. Check CDN script.');
-      statusDiv.textContent = '❌ CDN load failed. Please refresh.';
+    // 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;
@@ -147,11 +170,10 @@ async function initHandLandmarker() {
     
     backendLog('Loading WASM...');
     const vision = await FilesetResolver.forVisionTasks(
-      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/wasm'
+      'https://unpkg.com/@mediapipe/tasks-vision@0.10.8/wasm'
     );
     backendLog('✅ WASM loaded');
 
-    // Model sources
     const modelSources = [
       '/hand_landmarker.task',
       'https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task',
@@ -161,7 +183,7 @@ async function initHandLandmarker() {
     let lastError = null;
     for (let i = 0; i < modelSources.length; i++) {
       try {
-        backendLog(`Trying source ${i+1}/${modelSources.length}...`);
+        backendLog(`Trying model source ${i+1}/${modelSources.length}...`);
         statusDiv.textContent = `⏳ Loading model (${i+1}/${modelSources.length})...`;
         
         handLandmarker = await HandLandmarker.createFromOptions(vision, {
@@ -179,7 +201,7 @@ async function initHandLandmarker() {
         return;
       } catch (err) {
         lastError = err;
-        backendLog(`❌ Source ${i+1} failed: ${err.message || 'unknown error'}`);
+        backendLog(`❌ Source ${i+1} failed: ${err.message || 'unknown'}`);
       }
     }
 
@@ -221,7 +243,7 @@ async function initHandLandmarker() {
 }
 
 // ============================================================
-// 7. Camera Setup
+// 8. Camera Setup
 // ============================================================
 async function startCamera() {
   try {
@@ -242,7 +264,7 @@ async function startCamera() {
 }
 
 // ============================================================
-// 8. Core Drawing Loop
+// 9. Core Drawing Loop
 // ============================================================
 function drawLoop(timestamp) {
   frameCount++;
@@ -306,7 +328,6 @@ function drawLoop(timestamp) {
           lastY = null;
         }
 
-        // Cursor
         ctx.beginPath();
         ctx.arc(x, y, 4, 0, 2 * Math.PI);
         ctx.fillStyle = eraserMode ? '#ff6666' : currentColor;
@@ -331,7 +352,7 @@ function drawLoop(timestamp) {
 }
 
 // ============================================================
-// 9. Snapshot Capture
+// 10. Snapshot Capture
 // ============================================================
 async function captureSnapshot() {
   try {
@@ -371,7 +392,7 @@ async function captureSnapshot() {
 }
 
 // ============================================================
-// 10. UI Event Bindings
+// 11. UI Event Bindings
 // ============================================================
 brushColorInput.addEventListener('input', (e) => {
   currentColor = e.target.value;
@@ -414,7 +435,6 @@ toggleCamBtn.addEventListener('click', () => {
   toggleCamBtn.classList.toggle('active');
 });
 
-// Keyboard shortcuts
 document.addEventListener('keydown', (e) => {
   if (e.key === 's' || e.key === 'S') captureSnapshot();
   if (e.key === 'e' || e.key === 'E') eraserBtn.click();
@@ -422,7 +442,7 @@ document.addEventListener('keydown', (e) => {
 });
 
 // ============================================================
-// 11. Initialization
+// 12. Initialization
 // ============================================================
 resizeCanvas();
 backendLog('🚀 App initialized. Tap canvas 10x or press 3 ten times for admin.');