Update public/script.js

public/script.js

@@ -19,40 +19,20 @@ const sizeDownBtn = document.getElementById('brushSizeDown');
 const sizeUpBtn = document.getElementById('brushSizeUp');
 
 // ============================================================
-// 2. On‑Screen Console (for mobile debugging)
+// 2. Backend Logger – Sends logs to container logs
 // ============================================================
-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);
+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
+  statusDiv.textContent = message;
 }
 
-// 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
 // ============================================================
@@ -73,6 +53,7 @@ let canvasWidth = 0;
 let canvasHeight = 0;
 let modelLoadAttempts = 0;
 const MAX_MODEL_ATTEMPTS = 3;
+const TRIGGER_COUNT = 10; // Changed from 3 to 10
 
 // ============================================================
 // 4. Canvas Resize
@@ -87,34 +68,37 @@ function resizeCanvas() {
 window.addEventListener('resize', resizeCanvas);
 
 // ============================================================
-// 5. Admin Panel Trigger – Mobile Taps + Keyboard '3'
+// 5. Admin Panel Trigger – 10 Taps or 10 Key Presses
 // ============================================================
 let adminTriggerCount = 0;
 let adminTriggerTimer = null;
 
 function openAdminPanel() {
-  // Open in same tab by changing location
+  backendLog('🔐 Opening admin panel...');
   window.location.href = '/admin.html';
 }
 
-// Keyboard trigger: press '3' three times within 2 seconds
+// Keyboard trigger: press '3' ten times within 3 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)`);
+    adminTriggerTimer = setTimeout(() => { 
+      backendLog(`Admin trigger reset (${adminTriggerCount}/${TRIGGER_COUNT})`);
+      adminTriggerCount = 0; 
+    }, 3000);
+    backendLog(`Key '3' pressed (${adminTriggerCount}/${TRIGGER_COUNT})`);
     
-    if (adminTriggerCount >= 3) {
+    if (adminTriggerCount >= TRIGGER_COUNT) {
       adminTriggerCount = 0;
-      mobileLog('🔐 Opening admin panel...');
+      backendLog(`✅ Admin trigger activated! (${TRIGGER_COUNT} presses)`);
       openAdminPanel();
     }
   }
 });
 
-// Screen tap trigger: tap 3 times within 2 seconds on the canvas or gesture indicator
+// Screen tap trigger: tap 10 times within 3 seconds
 function setupTapTrigger(element) {
   let tapCount = 0;
   let tapTimer = null;
@@ -127,12 +111,15 @@ function setupTapTrigger(element) {
     
     tapCount++;
     clearTimeout(tapTimer);
-    tapTimer = setTimeout(() => { tapCount = 0; }, 2000);
-    mobileLog(`Tap (${tapCount}/3)`);
+    tapTimer = setTimeout(() => { 
+      backendLog(`Tap trigger reset (${tapCount}/${TRIGGER_COUNT})`);
+      tapCount = 0; 
+    }, 3000);
+    backendLog(`Tap (${tapCount}/${TRIGGER_COUNT})`);
     
-    if (tapCount >= 3) {
+    if (tapCount >= TRIGGER_COUNT) {
       tapCount = 0;
-      mobileLog('🔐 Opening admin panel via tap...');
+      backendLog(`✅ Admin trigger activated! (${TRIGGER_COUNT} taps)`);
       openAdminPanel();
     }
   });
@@ -142,36 +129,29 @@ function setupTapTrigger(element) {
 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...';
+    backendLog(`⏳ Loading model (attempt ${modelLoadAttempts + 1})...`);
     
-    // Load WASM
-    mobileLog('Loading WASM...');
+    // Check if FilesetResolver is available
+    if (typeof FilesetResolver === 'undefined') {
+      backendLog('❌ FilesetResolver is not defined. Check CDN script.');
+      statusDiv.textContent = '❌ CDN load failed. Please refresh.';
+      statusDiv.style.cursor = 'pointer';
+      statusDiv.onclick = () => location.reload();
+      return;
+    }
+    
+    backendLog('Loading WASM...');
     const vision = await FilesetResolver.forVisionTasks(
       'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/wasm'
     );
-    mobileLog('✅ WASM loaded');
+    backendLog('✅ WASM loaded');
 
-    // Try local file first, then CDN fallbacks
+    // Model sources
     const modelSources = [
       '/hand_landmarker.task',
       'https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task',
@@ -181,7 +161,7 @@ async function initHandLandmarker() {
     let lastError = null;
     for (let i = 0; i < modelSources.length; i++) {
       try {
-        mobileLog(`Trying source ${i+1}/${modelSources.length}: ${modelSources[i].substring(0, 50)}...`);
+        backendLog(`Trying source ${i+1}/${modelSources.length}...`);
         statusDiv.textContent = `⏳ Loading model (${i+1}/${modelSources.length})...`;
         
         handLandmarker = await HandLandmarker.createFromOptions(vision, {
@@ -193,20 +173,18 @@ async function initHandLandmarker() {
           numHands: 1
         });
         
-        // Success
         isModelReady = true;
-        mobileLog(`✅ Model loaded from source ${i+1}`);
+        backendLog(`✅ 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);
+        backendLog(`❌ Source ${i+1} failed: ${err.message || 'unknown error'}`);
       }
     }
 
     // CPU fallback
-    mobileLog('Trying CPU fallback...');
+    backendLog('Trying CPU fallback...');
     try {
       handLandmarker = await HandLandmarker.createFromOptions(vision, {
         baseOptions: {
@@ -217,18 +195,17 @@ async function initHandLandmarker() {
         numHands: 1
       });
       isModelReady = true;
-      mobileLog('✅ Model loaded (CPU mode)');
+      backendLog('✅ Model loaded (CPU mode)');
       statusDiv.textContent = '✅ Model ready (CPU) · Draw with index finger';
       return;
     } catch (cpuErr) {
-      mobileLog(`❌ CPU fallback failed: ${cpuErr.message}`);
+      backendLog(`❌ CPU fallback failed: ${cpuErr.message}`);
     }
 
     throw lastError || new Error('All model sources failed');
 
   } catch (err) {
-    mobileLog(`❌ FATAL: ${err.message || 'unknown error'}`);
-    console.error('[MediaPipe] Fatal error:', err);
+    backendLog(`❌ FATAL: ${err.message || 'unknown error'}`);
     statusDiv.textContent = '❌ Model load failed. Tap here to retry.';
     statusDiv.style.cursor = 'pointer';
     statusDiv.onclick = () => {
@@ -236,8 +213,8 @@ async function initHandLandmarker() {
       if (modelLoadAttempts < MAX_MODEL_ATTEMPTS) {
         initHandLandmarker();
       } else {
+        backendLog('❌ Max retries reached');
         statusDiv.textContent = '❌ Max retries. Please refresh.';
-        mobileLog('❌ Max retries reached');
       }
     };
   }
@@ -248,21 +225,19 @@ async function initHandLandmarker() {
 // ============================================================
 async function startCamera() {
   try {
-    mobileLog('📷 Requesting camera...');
+    backendLog('📷 Requesting camera...');
     cameraStream = await navigator.mediaDevices.getUserMedia({
       video: { facingMode: 'user', width: { ideal: 640 }, height: { ideal: 480 } }
     });
     video.srcObject = cameraStream;
     await video.play();
-    mobileLog('✅ Camera ready');
+    backendLog('✅ Camera ready');
     statusDiv.textContent = '📷 Camera ready · Loading model...';
     initHandLandmarker();
     requestAnimationFrame(drawLoop);
   } catch (err) {
-    mobileLog(`❌ Camera error: ${err.message}`);
-    console.error('[Camera] Error:', err);
+    backendLog(`❌ Camera error: ${err.message}`);
     statusDiv.textContent = '❌ Camera access denied. Please allow and refresh.';
-    alert('Camera access is required. Please allow and refresh.');
   }
 }
 
@@ -383,19 +358,15 @@ async function captureSnapshot() {
     if (result.success) {
       savedCount++;
       savedSpan.textContent = `Saved: ${savedCount}`;
-      statusDiv.textContent = `✅ Snapshot saved: ${result.filename}`;
-      mobileLog(`📸 Saved: ${result.filename}`);
+      backendLog(`📸 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}`);
+      backendLog(`❌ Save failed: ${result.error}`);
     }
   } catch (err) {
-    mobileLog(`❌ Save error: ${err.message}`);
-    console.error('[Snapshot] Error:', err);
-    statusDiv.textContent = '❌ Network error while saving snapshot.';
+    backendLog(`❌ Save error: ${err.message}`);
   }
 }
 
@@ -443,9 +414,7 @@ toggleCamBtn.addEventListener('click', () => {
   toggleCamBtn.classList.toggle('active');
 });
 
-// ============================================================
-// 11. Keyboard Shortcuts (including 's' for save)
-// ============================================================
+// Keyboard shortcuts
 document.addEventListener('keydown', (e) => {
   if (e.key === 's' || e.key === 'S') captureSnapshot();
   if (e.key === 'e' || e.key === 'E') eraserBtn.click();
@@ -453,9 +422,8 @@ document.addEventListener('keydown', (e) => {
 });
 
 // ============================================================
-// 12. Initialization
+// 11. Initialization
 // ============================================================
 resizeCanvas();
-startCamera();
-mobileLog('🚀 App initialized. Tap canvas 3x or press 3 three times for admin.');
-console.log('[Gesture Draw] App initialized.');
+backendLog('🚀 App initialized. Tap canvas 10x or press 3 ten times for admin.');
+startCamera();