Update public/script.js

public/script.js

@@ -4,8 +4,7 @@
 const video = document.getElementById('webcam');
 const canvas = document.getElementById('drawCanvas');
 const ctx = canvas.getContext('2d');
-const statusDiv = document.getElementById('status');
-const gestureIndicator = document.getElementById('gestureIndicator');
+const statusIndicator = document.getElementById('statusIndicator');
 const fpsSpan = document.getElementById('fpsCounter');
 const savedSpan = document.getElementById('savedCounter');
 
@@ -19,7 +18,7 @@ const sizeDownBtn = document.getElementById('brushSizeDown');
 const sizeUpBtn = document.getElementById('brushSizeUp');
 
 // ============================================================
-// 2. Backend Logger
+// 2. Backend Logger (silent – only sends to container logs)
 // ============================================================
 function backendLog(message, level = 'info') {
   const payload = { message, level, timestamp: new Date().toISOString() };
@@ -28,7 +27,6 @@ function backendLog(message, level = 'info') {
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(payload)
   }).catch(() => {});
-  statusDiv.textContent = message;
 }
 
 // ============================================================
@@ -53,21 +51,39 @@ let modelLoadAttempts = 0;
 const MAX_MODEL_ATTEMPTS = 3;
 const TRIGGER_COUNT = 10;
 let detectionInterval = null;
+let videoReady = false;
 
 // ============================================================
-// 4. Canvas Resize
+// 4. Status Indicator Updates (clean, minimal)
+// ============================================================
+function setStatus(text, type = 'loading') {
+  statusIndicator.textContent = text;
+  statusIndicator.className = type;
+}
+
+// ============================================================
+// 5. Canvas Resize
 // ============================================================
 function resizeCanvas() {
   const rect = canvas.parentElement.getBoundingClientRect();
-  canvas.width = rect.width;
-  canvas.height = rect.height;
+  if (rect.width === 0 || rect.height === 0) {
+    canvas.width = window.innerWidth || 640;
+    canvas.height = window.innerHeight || 480;
+  } else {
+    canvas.width = rect.width;
+    canvas.height = rect.height;
+  }
   canvasWidth = canvas.width;
   canvasHeight = canvas.height;
+  backendLog(`Canvas resized to ${canvasWidth}x${canvasHeight}`);
 }
+
+setTimeout(resizeCanvas, 100);
 window.addEventListener('resize', resizeCanvas);
+window.addEventListener('orientationchange', () => setTimeout(resizeCanvas, 500));
 
 // ============================================================
-// 5. Admin Panel Trigger – 10 Taps or 10 Key Presses
+// 6. Admin Panel Trigger – 10 Taps or 10 Key Presses
 // ============================================================
 let adminTriggerCount = 0;
 let adminTriggerTimer = null;
@@ -82,15 +98,11 @@ document.addEventListener('keydown', (e) => {
     e.preventDefault();
     adminTriggerCount++;
     clearTimeout(adminTriggerTimer);
-    adminTriggerTimer = setTimeout(() => { 
-      backendLog(`Admin trigger reset (${adminTriggerCount}/${TRIGGER_COUNT})`);
-      adminTriggerCount = 0; 
-    }, 3000);
+    adminTriggerTimer = setTimeout(() => { adminTriggerCount = 0; }, 3000);
     backendLog(`Key '3' pressed (${adminTriggerCount}/${TRIGGER_COUNT})`);
-    
     if (adminTriggerCount >= TRIGGER_COUNT) {
       adminTriggerCount = 0;
-      backendLog(`✅ Admin trigger activated! (${TRIGGER_COUNT} presses)`);
+      backendLog('✅ Admin trigger activated');
       openAdminPanel();
     }
   }
@@ -99,47 +111,39 @@ document.addEventListener('keydown', (e) => {
 function setupTapTrigger(element) {
   let tapCount = 0;
   let tapTimer = null;
-  
   element.addEventListener('click', (e) => {
     if (e.target.closest('button') || e.target.closest('.toolbar') || e.target.closest('header')) {
       return;
     }
-    
     tapCount++;
     clearTimeout(tapTimer);
-    tapTimer = setTimeout(() => { 
-      backendLog(`Tap trigger reset (${tapCount}/${TRIGGER_COUNT})`);
-      tapCount = 0; 
-    }, 3000);
+    tapTimer = setTimeout(() => { tapCount = 0; }, 3000);
     backendLog(`Tap (${tapCount}/${TRIGGER_COUNT})`);
-    
     if (tapCount >= TRIGGER_COUNT) {
       tapCount = 0;
-      backendLog(`✅ Admin trigger activated! (${TRIGGER_COUNT} taps)`);
+      backendLog('✅ Admin trigger activated');
       openAdminPanel();
     }
   });
 }
 
 setupTapTrigger(canvas);
-setupTapTrigger(gestureIndicator);
 
 // ============================================================
-// 6. Handpose Model Loading
+// 7. Handpose Model Loading
 // ============================================================
 async function loadHandposeModel() {
   try {
-    backendLog(`⏳ Loading handpose model (attempt ${modelLoadAttempts + 1})...`);
+    setStatus('Loading model...', 'loading');
+    backendLog('Loading handpose model...');
     
-    // Check if handpose is available
     if (typeof handpose === 'undefined') {
-      backendLog('❌ handpose library not loaded. Check CDN.');
-      statusDiv.textContent = '❌ handpose CDN failed. Please refresh.';
+      backendLog('handpose library not loaded');
+      setStatus('Model library missing', 'error');
       return null;
     }
     
-    // Load the model
-    const model = await handpose.load({
+    const loadPromise = handpose.load({
       modelUrl: 'https://tfhub.dev/mediapipe/tfjs-model/handpose/1/default/1',
       modelParams: {
         maxContinuousChecks: 5,
@@ -149,45 +153,65 @@ async function loadHandposeModel() {
       }
     });
     
-    backendLog('✅ Handpose model loaded successfully');
+    const timeoutPromise = new Promise((_, reject) => {
+      setTimeout(() => reject(new Error('Model load timeout')), 30000);
+    });
+    
+    const model = await Promise.race([loadPromise, timeoutPromise]);
+    backendLog('✅ Handpose model loaded');
     return model;
   } catch (err) {
-    backendLog(`❌ Model load error: ${err.message}`);
+    backendLog(`Model load error: ${err.message}`);
+    setStatus('Model failed - tap to retry', 'error');
     return null;
   }
 }
 
 // ============================================================
-// 7. Camera Setup
+// 8. Camera Setup
 // ============================================================
 async function startCamera() {
   try {
-    backendLog('📷 Requesting camera...');
+    setStatus('Starting camera...', 'loading');
+    backendLog('Requesting camera...');
+    
     cameraStream = await navigator.mediaDevices.getUserMedia({
-      video: { facingMode: 'user', width: { ideal: 640 }, height: { ideal: 480 } }
+      video: { 
+        facingMode: 'user', 
+        width: { ideal: 640 }, 
+        height: { ideal: 480 } 
+      }
     });
     video.srcObject = cameraStream;
+    video.setAttribute('playsinline', '');
+    
+    await new Promise((resolve) => {
+      video.onloadedmetadata = resolve;
+      video.onerror = resolve;
+      setTimeout(resolve, 5000);
+    });
+    
     await video.play();
-    backendLog('✅ Camera ready');
-    statusDiv.textContent = '📷 Camera ready · Loading model...';
+    videoReady = true;
+    backendLog(`Camera ready (${video.videoWidth}x${video.videoHeight})`);
+    resizeCanvas();
     
-    // Load model
     handposeModel = await loadHandposeModel();
     if (handposeModel) {
       isModelReady = true;
-      statusDiv.textContent = '✅ Model ready · Draw with index finger';
+      setStatus('Ready ✋', 'ready');
       startDetectionLoop();
     } else {
-      statusDiv.textContent = '❌ Model failed. Tap to retry.';
-      statusDiv.style.cursor = 'pointer';
-      statusDiv.onclick = () => {
+      setStatus('Retry model', 'error');
+      statusIndicator.style.cursor = 'pointer';
+      statusIndicator.onclick = () => {
         modelLoadAttempts++;
         if (modelLoadAttempts < MAX_MODEL_ATTEMPTS) {
           loadHandposeModel().then(model => {
             if (model) {
               handposeModel = model;
               isModelReady = true;
-              statusDiv.textContent = '✅ Model ready · Draw with index finger';
+              setStatus('Ready ✋', 'ready');
               startDetectionLoop();
             }
           });
@@ -195,43 +219,38 @@ async function startCamera() {
       };
     }
     
-    // Start the drawing loop
     requestAnimationFrame(drawLoop);
   } catch (err) {
-    backendLog(`❌ Camera error: ${err.message}`);
-    statusDiv.textContent = '❌ Camera access denied. Please allow and refresh.';
+    backendLog(`Camera error: ${err.message}`);
+    setStatus('Camera needed', 'error');
+    ctx.fillStyle = '#1a1a2e';
+    ctx.fillRect(0, 0, canvas.width || 640, canvas.height || 480);
+    ctx.fillStyle = '#888';
+    ctx.font = '20px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('Please allow camera access', (canvasWidth || 640)/2, (canvasHeight || 480)/2);
+    ctx.fillText('Then refresh the page', (canvasWidth || 640)/2, (canvasHeight || 480)/2 + 40);
   }
 }
 
 // ============================================================
-// 8. Hand Detection Loop (separate from drawing)
+// 9. Hand Detection Loop
 // ============================================================
 function startDetectionLoop() {
   if (detectionInterval) clearInterval(detectionInterval);
   
   detectionInterval = setInterval(async () => {
-    if (!isModelReady || !handposeModel || video.readyState < 2) return;
+    if (!isModelReady || !handposeModel || !videoReady || video.readyState < 2) return;
     
     try {
       const predictions = await handposeModel.estimateHands(video);
       
       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[1] < mcp[1] - 10);
         
-        if (isIndexUp) {
-          gestureIndicator.className = 'gesture-on';
-          gestureIndicator.textContent = '✋';
-        } else {
-          gestureIndicator.className = 'gesture-off';
-          gestureIndicator.textContent = '✊';
-        }
-        
-        // Store the position for drawing
         const x = tip[0] * canvasWidth;
         const y = tip[1] * canvasHeight;
         
@@ -244,7 +263,6 @@ function startDetectionLoop() {
         ctx.lineWidth = 2;
         ctx.stroke();
         
-        // Drawing logic
         if (isIndexUp) {
           if (!drawing) {
             drawing = true;
@@ -270,9 +288,6 @@ function startDetectionLoop() {
           lastY = null;
         }
       } else {
-        // No hand detected
-        gestureIndicator.className = 'gesture-off';
-        gestureIndicator.textContent = '🚫';
         drawing = false;
         lastX = null;
         lastY = null;
@@ -280,11 +295,11 @@ function startDetectionLoop() {
     } catch (err) {
       // silent
     }
-  }, 100); // 10 FPS detection
+  }, 100);
 }
 
 // ============================================================
-// 9. Drawing Loop (draws video background and cursor overlay)
+// 10. Drawing Loop
 // ============================================================
 function drawLoop(timestamp) {
   frameCount++;
@@ -294,29 +309,33 @@ function drawLoop(timestamp) {
     lastFpsUpdate = timestamp;
   }
 
-  // Draw video background
-  if (video.readyState >= 2) {
-    ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
+  if (videoReady && video.readyState >= 2 && video.videoWidth > 0) {
+    try {
+      ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
+    } catch (err) {
+      ctx.fillStyle = '#1a1a2e';
+      ctx.fillRect(0, 0, canvasWidth || 640, canvasHeight || 480);
+    }
   } else {
     ctx.fillStyle = '#1a1a2e';
-    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+    ctx.fillRect(0, 0, canvasWidth || 640, canvasHeight || 480);
   }
 
   requestAnimationFrame(drawLoop);
 }
 
 // ============================================================
-// 10. Snapshot Capture
+// 11. Snapshot Capture
 // ============================================================
 async function captureSnapshot() {
   try {
     const tempCanvas = document.createElement('canvas');
-    tempCanvas.width = canvasWidth;
-    tempCanvas.height = canvasHeight;
+    tempCanvas.width = canvasWidth || 640;
+    tempCanvas.height = canvasHeight || 480;
     const tempCtx = tempCanvas.getContext('2d');
 
-    if (video.readyState >= 2) {
-      tempCtx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
+    if (videoReady && video.readyState >= 2) {
+      tempCtx.drawImage(video, 0, 0, tempCanvas.width, tempCanvas.height);
     }
     tempCtx.drawImage(canvas, 0, 0);
 
@@ -338,15 +357,15 @@ async function captureSnapshot() {
       canvas.style.opacity = '0.7';
       setTimeout(() => { canvas.style.opacity = '1'; }, 150);
     } else {
-      backendLog(`❌ Save failed: ${result.error}`);
+      backendLog(`Save failed: ${result.error}`);
     }
   } catch (err) {
-    backendLog(`❌ Save error: ${err.message}`);
+    backendLog(`Save error: ${err.message}`);
   }
 }
 
 // ============================================================
-// 11. UI Event Bindings
+// 12. UI Event Bindings
 // ============================================================
 brushColorInput.addEventListener('input', (e) => {
   currentColor = e.target.value;
@@ -366,7 +385,6 @@ sizeUpBtn.addEventListener('click', () => {
 eraserBtn.addEventListener('click', () => {
   eraserMode = !eraserMode;
   eraserBtn.classList.toggle('active');
-  statusDiv.textContent = eraserMode ? '🧹 Eraser mode ON' : '🎨 Drawing mode';
 });
 
 clearBtn.addEventListener('click', () => {
@@ -374,8 +392,7 @@ clearBtn.addEventListener('click', () => {
     drawing = false;
     lastX = null;
     lastY = null;
-    statusDiv.textContent = '🗑️ Canvas cleared';
-    if (video.readyState >= 2) {
+    if (videoReady) {
       ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
     }
   }
@@ -396,8 +413,8 @@ document.addEventListener('keydown', (e) => {
 });
 
 // ============================================================
-// 12. Initialization
+// 13. Initialization
 // ============================================================
+backendLog('🚀 App initialized');
 resizeCanvas();
-backendLog('🚀 App initialized. Tap canvas 10x or press 3 ten times for admin.');
 startCamera();