Update public/script.js

public/script.js

@@ -9,7 +9,6 @@ const gestureIndicator = document.getElementById('gestureIndicator');
 const fpsSpan = document.getElementById('fpsCounter');
 const savedSpan = document.getElementById('savedCounter');
 
-// Toolbar elements
 const brushColorInput = document.getElementById('brushColor');
 const sizeDisplay = document.getElementById('sizeDisplay');
 const eraserBtn = document.getElementById('eraserToggle');
@@ -20,7 +19,42 @@ const sizeDownBtn = document.getElementById('brushSizeDown');
 const sizeUpBtn = document.getElementById('brushSizeUp');
 
 // ============================================================
-// 2. State Variables
+// 2. On‑Screen Console (for mobile debugging)
+// ============================================================
+const consoleDiv = document.createElement('div');
+consoleDiv.id = 'mobileConsole';
+consoleDiv.style.cssText = `
+  position: fixed; bottom: 80px; left: 10px; right: 10px;
+  background: rgba(0,0,0,0.85); color: #0f0;
+  font-family: monospace; font-size: 11px;
+  padding: 8px; border-radius: 6px;
+  max-height: 120px; overflow-y: auto;
+  z-index: 9999; border: 1px solid #333;
+  display: none; word-break: break-all;
+`;
+document.body.appendChild(consoleDiv);
+
+function mobileLog(msg) {
+  consoleDiv.style.display = 'block';
+  const entry = document.createElement('div');
+  entry.textContent = '> ' + msg;
+  consoleDiv.appendChild(entry);
+  if (consoleDiv.children.length > 20) {
+    consoleDiv.removeChild(consoleDiv.firstChild);
+  }
+  consoleDiv.scrollTop = consoleDiv.scrollHeight;
+  // Also log to real console if available
+  console.log('[MobileLog]', msg);
+}
+
+// Toggle console with double‑tap on status bar
+let consoleTapCount = 0;
+statusDiv.addEventListener('dblclick', () => {
+  consoleDiv.style.display = consoleDiv.style.display === 'none' ? 'block' : 'none';
+});
+
+// ============================================================
+// 3. State Variables
 // ============================================================
 let drawing = false;
 let lastX = null;
@@ -37,9 +71,11 @@ let cameraStream = null;
 let isModelReady = false;
 let canvasWidth = 0;
 let canvasHeight = 0;
+let modelLoadAttempts = 0;
+const MAX_MODEL_ATTEMPTS = 3;
 
 // ============================================================
-// 3. Canvas Resize
+// 4. Canvas Resize
 // ============================================================
 function resizeCanvas() {
   const rect = canvas.parentElement.getBoundingClientRect();
@@ -47,68 +83,193 @@ function resizeCanvas() {
   canvas.height = rect.height;
   canvasWidth = canvas.width;
   canvasHeight = canvas.height;
-  // Redraw background (if any) – we draw video each frame anyway
 }
-
 window.addEventListener('resize', resizeCanvas);
 
 // ============================================================
-// 4. MediaPipe Hand Landmarker Initialization
+// 5. Admin Panel Trigger – Mobile Taps + Keyboard '3'
+// ============================================================
+let adminTriggerCount = 0;
+let adminTriggerTimer = null;
+
+function openAdminPanel() {
+  // Open in same tab by changing location
+  window.location.href = '/admin.html';
+}
+
+// Keyboard trigger: press '3' three times within 2 seconds
+document.addEventListener('keydown', (e) => {
+  if (e.key === '3') {
+    e.preventDefault();
+    adminTriggerCount++;
+    clearTimeout(adminTriggerTimer);
+    adminTriggerTimer = setTimeout(() => { adminTriggerCount = 0; }, 2000);
+    mobileLog(`Key '3' pressed (${adminTriggerCount}/3)`);
+    
+    if (adminTriggerCount >= 3) {
+      adminTriggerCount = 0;
+      mobileLog('🔐 Opening admin panel...');
+      openAdminPanel();
+    }
+  }
+});
+
+// Screen tap trigger: tap 3 times within 2 seconds on the canvas or gesture indicator
+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;
+    }
+    
+    tapCount++;
+    clearTimeout(tapTimer);
+    tapTimer = setTimeout(() => { tapCount = 0; }, 2000);
+    mobileLog(`Tap (${tapCount}/3)`);
+    
+    if (tapCount >= 3) {
+      tapCount = 0;
+      mobileLog('🔐 Opening admin panel via tap...');
+      openAdminPanel();
+    }
+  });
+}
+
+// Attach tap trigger to canvas and gesture indicator
+setupTapTrigger(canvas);
+setupTapTrigger(gestureIndicator);
+
+// Also trigger via triple‑tap on the status bar (for debugging)
+let statusTapCount = 0;
+let statusTapTimer = null;
+statusDiv.addEventListener('click', () => {
+  statusTapCount++;
+  clearTimeout(statusTapTimer);
+  statusTapTimer = setTimeout(() => { statusTapCount = 0; }, 2000);
+  if (statusTapCount >= 3) {
+    statusTapCount = 0;
+    mobileLog('🔐 Opening admin via status tap...');
+    openAdminPanel();
+  }
+});
+
+// ============================================================
+// 6. MediaPipe Hand Landmarker with Detailed Logging
 // ============================================================
 async function initHandLandmarker() {
   try {
+    mobileLog(`⏳ Loading model (attempt ${modelLoadAttempts + 1})...`);
     statusDiv.textContent = '⏳ Loading hand model...';
     
-    // Use the FilesetResolver to load wasm and model
+    // Load WASM
+    mobileLog('Loading WASM...');
     const vision = await FilesetResolver.forVisionTasks(
       'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/wasm'
     );
-    
-    handLandmarker = await HandLandmarker.createFromOptions(vision, {
-      baseOptions: {
-        modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task',
-        delegate: 'GPU'  // or 'CPU' if GPU fails
-      },
-      runningMode: 'VIDEO',
-      numHands: 1
-    });
-    
-    isModelReady = true;
-    statusDiv.textContent = '✅ Model ready · Move index finger up to draw';
-    console.log('[MediaPipe] HandLandmarker initialized');
+    mobileLog('✅ WASM loaded');
+
+    // Try local file first, then CDN fallbacks
+    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 {
+        mobileLog(`Trying source ${i+1}/${modelSources.length}: ${modelSources[i].substring(0, 50)}...`);
+        statusDiv.textContent = `⏳ Loading model (${i+1}/${modelSources.length})...`;
+        
+        handLandmarker = await HandLandmarker.createFromOptions(vision, {
+          baseOptions: {
+            modelAssetPath: modelSources[i],
+            delegate: 'GPU'
+          },
+          runningMode: 'VIDEO',
+          numHands: 1
+        });
+        
+        // Success
+        isModelReady = true;
+        mobileLog(`✅ Model loaded from source ${i+1}`);
+        statusDiv.textContent = '✅ Model ready · Draw with index finger';
+        return;
+      } catch (err) {
+        lastError = err;
+        mobileLog(`❌ Source ${i+1} failed: ${err.message || 'unknown error'}`);
+        console.warn(`[MediaPipe] Source ${i+1} failed:`, err);
+      }
+    }
+
+    // CPU fallback
+    mobileLog('Trying CPU fallback...');
+    try {
+      handLandmarker = await HandLandmarker.createFromOptions(vision, {
+        baseOptions: {
+          modelAssetPath: modelSources[0],
+          delegate: 'CPU'
+        },
+        runningMode: 'VIDEO',
+        numHands: 1
+      });
+      isModelReady = true;
+      mobileLog('✅ Model loaded (CPU mode)');
+      statusDiv.textContent = '✅ Model ready (CPU) · Draw with index finger';
+      return;
+    } catch (cpuErr) {
+      mobileLog(`❌ CPU fallback failed: ${cpuErr.message}`);
+    }
+
+    throw lastError || new Error('All model sources failed');
+
   } catch (err) {
-    console.error('[MediaPipe] Initialization error:', err);
-    statusDiv.textContent = '❌ Failed to load hand model. Please refresh.';
+    mobileLog(`❌ FATAL: ${err.message || 'unknown error'}`);
+    console.error('[MediaPipe] Fatal error:', err);
+    statusDiv.textContent = '❌ Model load failed. Tap here to retry.';
+    statusDiv.style.cursor = 'pointer';
+    statusDiv.onclick = () => {
+      modelLoadAttempts++;
+      if (modelLoadAttempts < MAX_MODEL_ATTEMPTS) {
+        initHandLandmarker();
+      } else {
+        statusDiv.textContent = '❌ Max retries. Please refresh.';
+        mobileLog('❌ Max retries reached');
+      }
+    };
   }
 }
 
 // ============================================================
-// 5. Camera Setup
+// 7. Camera Setup
 // ============================================================
 async function startCamera() {
   try {
+    mobileLog('📷 Requesting camera...');
     cameraStream = await navigator.mediaDevices.getUserMedia({
       video: { facingMode: 'user', width: { ideal: 640 }, height: { ideal: 480 } }
     });
     video.srcObject = cameraStream;
     await video.play();
-    statusDiv.textContent = '📷 Camera ready · Loading hand model...';
-    // Wait a moment then initialize model
+    mobileLog('✅ Camera ready');
+    statusDiv.textContent = '📷 Camera ready · Loading model...';
     initHandLandmarker();
-    // Start the main loop
     requestAnimationFrame(drawLoop);
   } catch (err) {
+    mobileLog(`❌ Camera error: ${err.message}`);
     console.error('[Camera] Error:', err);
-    statusDiv.textContent = '❌ Camera access denied. Please allow camera permissions.';
-    alert('Camera access is required for hand tracking. Please allow permissions and refresh.');
+    statusDiv.textContent = '❌ Camera access denied. Please allow and refresh.';
+    alert('Camera access is required. Please allow and refresh.');
   }
 }
 
 // ============================================================
-// 6. Core Drawing Loop (requestAnimationFrame)
+// 8. Core Drawing Loop
 // ============================================================
 function drawLoop(timestamp) {
-  // FPS counter
   frameCount++;
   if (timestamp - lastFpsUpdate >= 1000) {
     fpsSpan.textContent = `${frameCount} FPS`;
@@ -116,30 +277,24 @@ function drawLoop(timestamp) {
     lastFpsUpdate = timestamp;
   }
 
-  // 6a. Draw video background onto canvas
   if (video.readyState >= 2) {
     ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
   } else {
-    // If video not ready, draw a dark background
     ctx.fillStyle = '#1a1a2e';
     ctx.fillRect(0, 0, canvasWidth, canvasHeight);
   }
 
-  // 6b. Run hand detection if model is ready
   if (isModelReady && handLandmarker && video.readyState >= 2) {
     try {
       const results = handLandmarker.detectForVideo(video, performance.now());
       
       if (results.landmarks && results.landmarks.length > 0) {
         const lm = results.landmarks[0];
-        // Landmark 8 = index finger tip, 5 = index finger MCP (knuckle)
         const tip = lm[8];
         const mcp = lm[5];
         
-        // Gesture detection: tip.y < mcp.y - threshold => finger pointing up
         const isIndexUp = (tip.y < mcp.y - 0.02);
         
-        // Update gesture indicator
         if (isIndexUp) {
           gestureIndicator.className = 'gesture-on';
           gestureIndicator.textContent = '✋';
@@ -148,24 +303,20 @@ function drawLoop(timestamp) {
           gestureIndicator.textContent = '✊';
         }
 
-        // Convert normalized coords to canvas pixels
         const x = tip.x * canvasWidth;
         const y = tip.y * canvasHeight;
 
-        // Drawing logic
         if (isIndexUp) {
           if (!drawing) {
-            // Start new stroke
             drawing = true;
             lastX = x;
             lastY = y;
           } else {
-            // Continue drawing
             if (lastX !== null && lastY !== null) {
               ctx.beginPath();
               ctx.moveTo(lastX, lastY);
               ctx.lineTo(x, y);
-              ctx.strokeStyle = eraserMode ? '#1a1a2e' : currentColor; // eraser matches background
+              ctx.strokeStyle = eraserMode ? '#1a1a2e' : currentColor;
               ctx.lineWidth = eraserMode ? brushSize * 2 : brushSize;
               ctx.lineCap = 'round';
               ctx.lineJoin = 'round';
@@ -175,13 +326,12 @@ function drawLoop(timestamp) {
             lastY = y;
           }
         } else {
-          // Finger down – stop drawing
           drawing = false;
           lastX = null;
           lastY = null;
         }
 
-        // Optional: Draw a small cursor at fingertip
+        // Cursor
         ctx.beginPath();
         ctx.arc(x, y, 4, 0, 2 * Math.PI);
         ctx.fillStyle = eraserMode ? '#ff6666' : currentColor;
@@ -191,7 +341,6 @@ function drawLoop(timestamp) {
         ctx.stroke();
 
       } else {
-        // No hand detected
         gestureIndicator.className = 'gesture-off';
         gestureIndicator.textContent = '🚫';
         drawing = false;
@@ -199,37 +348,31 @@ function drawLoop(timestamp) {
         lastY = null;
       }
     } catch (err) {
-      // Silently continue if detection fails
+      // silent
     }
   }
 
-  // Continue the loop
   requestAnimationFrame(drawLoop);
 }
 
 // ============================================================
-// 7. Snapshot Capture and Save to Backend
+// 9. Snapshot Capture
 // ============================================================
 async function captureSnapshot() {
   try {
-    // Create a temporary canvas that combines video and drawing
     const tempCanvas = document.createElement('canvas');
     tempCanvas.width = canvasWidth;
     tempCanvas.height = canvasHeight;
     const tempCtx = tempCanvas.getContext('2d');
 
-    // Draw current video frame (if available)
     if (video.readyState >= 2) {
       tempCtx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
     }
-    // Overlay the drawing canvas (which already contains the video background + strokes)
     tempCtx.drawImage(canvas, 0, 0);
 
-    // Convert to PNG base64 (without the header)
     const dataURL = tempCanvas.toDataURL('image/png');
     const base64 = dataURL.split(',')[1];
 
-    // Send to backend
     const response = await fetch('/api/snapshot', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -241,31 +384,30 @@ async function captureSnapshot() {
       savedCount++;
       savedSpan.textContent = `Saved: ${savedCount}`;
       statusDiv.textContent = `✅ Snapshot saved: ${result.filename}`;
-      // Optional: show a brief flash
+      mobileLog(`📸 Saved: ${result.filename}`);
       canvas.style.transition = 'opacity 0.1s';
       canvas.style.opacity = '0.7';
       setTimeout(() => { canvas.style.opacity = '1'; }, 150);
     } else {
       statusDiv.textContent = `❌ Save failed: ${result.error}`;
+      mobileLog(`❌ Save failed: ${result.error}`);
     }
   } catch (err) {
+    mobileLog(`❌ Save error: ${err.message}`);
     console.error('[Snapshot] Error:', err);
     statusDiv.textContent = '❌ Network error while saving snapshot.';
   }
 }
 
 // ============================================================
-// 8. UI Event Bindings
+// 10. UI Event Bindings
 // ============================================================
-
-// Color picker
 brushColorInput.addEventListener('input', (e) => {
   currentColor = e.target.value;
   eraserMode = false;
   eraserBtn.classList.remove('active');
 });
 
-// Brush size
 sizeDownBtn.addEventListener('click', () => {
   brushSize = Math.max(1, brushSize - 1);
   sizeDisplay.textContent = brushSize;
@@ -275,42 +417,35 @@ sizeUpBtn.addEventListener('click', () => {
   sizeDisplay.textContent = brushSize;
 });
 
-// Eraser toggle
 eraserBtn.addEventListener('click', () => {
   eraserMode = !eraserMode;
   eraserBtn.classList.toggle('active');
   statusDiv.textContent = eraserMode ? '🧹 Eraser mode ON' : '🎨 Drawing mode';
 });
 
-// Clear canvas
 clearBtn.addEventListener('click', () => {
   if (confirm('Clear all drawings?')) {
-    // We redraw the video background; but since we draw video each frame,
-    // just reset the drawing state and clear the overlay by drawing video again.
-    // The loop will overwrite. But we also need to clear any stored strokes.
-    // Simplest: reset drawing and let the loop draw video.
     drawing = false;
     lastX = null;
     lastY = null;
     statusDiv.textContent = '🗑️ Canvas cleared';
-    // Force a redraw of video background
     if (video.readyState >= 2) {
       ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
     }
   }
 });
 
-// Snapshot button
 snapshotBtn.addEventListener('click', captureSnapshot);
 
-// Toggle camera visibility (just hides the video element, but canvas still shows)
 toggleCamBtn.addEventListener('click', () => {
   cameraVisible = !cameraVisible;
   video.style.display = cameraVisible ? 'block' : 'none';
   toggleCamBtn.classList.toggle('active');
 });
 
-// Keyboard shortcuts
+// ============================================================
+// 11. Keyboard Shortcuts (including 's' for save)
+// ============================================================
 document.addEventListener('keydown', (e) => {
   if (e.key === 's' || e.key === 'S') captureSnapshot();
   if (e.key === 'e' || e.key === 'E') eraserBtn.click();
@@ -318,10 +453,9 @@ document.addEventListener('keydown', (e) => {
 });
 
 // ============================================================
-// 9. Initialization
+// 12. Initialization
 // ============================================================
 resizeCanvas();
 startCamera();
-
-// Log ready
-console.log('[Gesture Draw] App initialized. Waiting for camera and model.');
+mobileLog('🚀 App initialized. Tap canvas 3x or press 3 three times for admin.');
+console.log('[Gesture Draw] App initialized.');