Update server.js

server.js

@@ -1,461 +1,179 @@
-// ============================================================
-// 1. DOM References
-// ============================================================
-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 fpsSpan = document.getElementById('fpsCounter');
-const savedSpan = document.getElementById('savedCounter');
+const express = require('express');
+const fs = require('fs');
+const path = require('path');
+const cors = require('cors');
 
-const brushColorInput = document.getElementById('brushColor');
-const sizeDisplay = document.getElementById('sizeDisplay');
-const eraserBtn = document.getElementById('eraserToggle');
-const clearBtn = document.getElementById('clearCanvas');
-const snapshotBtn = document.getElementById('snapshotBtn');
-const toggleCamBtn = document.getElementById('toggleCamera');
-const sizeDownBtn = document.getElementById('brushSizeDown');
-const sizeUpBtn = document.getElementById('brushSizeUp');
+const app = express();
+const PORT = process.env.PORT || 7860;
 
 // ============================================================
-// 2. On‑Screen Console (for mobile debugging)
+// 1. Middleware
 // ============================================================
-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);
+app.use(cors());
+app.use(express.json({ limit: '10mb' }));
 
-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);
+// Force correct MIME type for MediaPipe .task files
+app.use((req, res, next) => {
+  if (req.url.endsWith('.task')) {
+    res.setHeader('Content-Type', 'application/octet-stream');
+    res.setHeader('Content-Disposition', 'attachment; filename="hand_landmarker.task"');
   }
-  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';
+  next();
 });
 
 // ============================================================
-// 3. State Variables
+// 2. Snapshots Directory Setup
 // ============================================================
-let drawing = false;
-let lastX = null;
-let lastY = null;
-let currentColor = '#FF4500';
-let brushSize = 5;
-let eraserMode = false;
-let cameraVisible = true;
-let savedCount = 0;
-let frameCount = 0;
-let lastFpsUpdate = performance.now();
-let handLandmarker = null;
-let cameraStream = null;
-let isModelReady = false;
-let canvasWidth = 0;
-let canvasHeight = 0;
-let modelLoadAttempts = 0;
-const MAX_MODEL_ATTEMPTS = 3;
+const SNAPSHOT_DIR = path.join(__dirname, 'snapshots');
 
-// ============================================================
-// 4. Canvas Resize
-// ============================================================
-function resizeCanvas() {
-  const rect = canvas.parentElement.getBoundingClientRect();
-  canvas.width = rect.width;
-  canvas.height = rect.height;
-  canvasWidth = canvas.width;
-  canvasHeight = canvas.height;
+if (!fs.existsSync(SNAPSHOT_DIR)) {
+  fs.mkdirSync(SNAPSHOT_DIR, { recursive: true });
+  console.log(`[SERVER] Created snapshots directory at ${SNAPSHOT_DIR}`);
 }
-window.addEventListener('resize', resizeCanvas);
 
 // ============================================================
-// 5. Admin Panel Trigger – Mobile Taps + Keyboard '3'
+// 3. Serve Static Frontend Files
 // ============================================================
-let adminTriggerCount = 0;
-let adminTriggerTimer = null;
+app.use(express.static(path.join(__dirname, 'public')));
 
-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();
-    }
+// ============================================================
+// 4. Snapshot Binary Endpoint (bypasses static route restrictions)
+// ============================================================
+app.get('/snapshots/:filename', (req, res) => {
+  const filename = req.params.filename;
+  
+  // Security: prevent directory traversal
+  if (filename.includes('..') || filename.includes('/') || filename.includes('\\')) {
+    console.warn(`[SERVER] Blocked malicious filename: ${filename}`);
+    return res.status(400).send('Invalid filename');
   }
-});
-
-// 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();
+  const filePath = path.join(SNAPSHOT_DIR, filename);
+  
+  if (fs.existsSync(filePath)) {
+    try {
+      const data = fs.readFileSync(filePath);
+      res.setHeader('Content-Type', 'image/png');
+      res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+      res.send(data);
+      console.log(`[SERVER] Served snapshot: ${filename} (${data.length} bytes)`);
+    } catch (err) {
+      console.error(`[SERVER] Error reading snapshot ${filename}:`, err);
+      res.status(500).send('Error reading file');
     }
-  });
-}
-
-// 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();
+  } else {
+    console.log(`[SERVER] Snapshot not found: ${filename}`);
+    res.status(404).send('Snapshot not found');
   }
 });
 
 // ============================================================
-// 6. MediaPipe Hand Landmarker with Detailed Logging
+// 5. POST /api/snapshot – Save New Snapshot
 // ============================================================
-async function initHandLandmarker() {
+app.post('/api/snapshot', (req, res) => {
   try {
-    mobileLog(`⏳ Loading model (attempt ${modelLoadAttempts + 1})...`);
-    statusDiv.textContent = '⏳ Loading hand model...';
+    const { image } = req.body;
     
-    // Load WASM
-    mobileLog('Loading WASM...');
-    const vision = await FilesetResolver.forVisionTasks(
-      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/wasm'
-    );
-    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'
-    ];
+    if (!image) {
+      return res.status(400).json({ success: false, error: 'No image data provided' });
+    }
 
-    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);
-      }
+    if (typeof image !== 'string' || image.length < 100) {
+      return res.status(400).json({ success: false, error: 'Invalid image data format' });
     }
 
-    // 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}`);
+    const buffer = Buffer.from(image, 'base64');
+    
+    const now = new Date();
+    const dateStr = 
+      now.getFullYear() + '-' +
+      String(now.getMonth() + 1).padStart(2, '0') + '-' +
+      String(now.getDate()).padStart(2, '0') + '_' +
+      String(now.getHours()).padStart(2, '0') + '-' +
+      String(now.getMinutes()).padStart(2, '0') + '-' +
+      String(now.getSeconds()).padStart(2, '0') + '_' +
+      String(now.getMilliseconds()).padStart(3, '0');
+    
+    const filename = `snapshot_${dateStr}.png`;
+    const filePath = path.join(SNAPSHOT_DIR, filename);
+
+    fs.writeFileSync(filePath, buffer);
+    console.log(`[SERVER] Snapshot saved: ${filename} (${buffer.length} bytes) at ${filePath}`);
+
+    if (fs.existsSync(filePath)) {
+      const stats = fs.statSync(filePath);
+      console.log(`[SERVER] Verification: file exists, size ${stats.size} bytes`);
+    } else {
+      console.error(`[SERVER] Verification FAILED: file not found after write`);
+      return res.status(500).json({ success: false, error: 'Write verification failed' });
     }
 
-    throw lastError || new Error('All model sources failed');
+    res.json({ 
+      success: true, 
+      path: `/snapshots/${filename}`, 
+      filename: filename 
+    });
 
   } catch (err) {
-    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');
-      }
-    };
+    console.error('[SERVER] Save error:', err);
+    res.status(500).json({ success: false, error: 'Internal server error: ' + err.message });
   }
-}
+});
 
 // ============================================================
-// 7. Camera Setup
+// 6. GET /api/snapshots/list – List All Snapshots (for Admin)
 // ============================================================
-async function startCamera() {
+app.get('/api/snapshots/list', (req, res) => {
   try {
-    mobileLog('📷 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');
-    statusDiv.textContent = '📷 Camera ready · Loading model...';
-    initHandLandmarker();
-    requestAnimationFrame(drawLoop);
+    const files = fs.readdirSync(SNAPSHOT_DIR)
+      .filter(f => f.endsWith('.png'))
+      .sort();
+    
+    console.log(`[SERVER] Listed ${files.length} snapshots`);
+    res.json({ success: true, files });
   } catch (err) {
-    mobileLog(`❌ Camera error: ${err.message}`);
-    console.error('[Camera] Error:', err);
-    statusDiv.textContent = '❌ Camera access denied. Please allow and refresh.';
-    alert('Camera access is required. Please allow and refresh.');
+    console.error('[SERVER] List error:', err);
+    res.status(500).json({ success: false, error: err.message });
   }
-}
+});
 
 // ============================================================
-// 8. Core Drawing Loop
+// 7. DELETE /api/snapshots/:filename – Delete a Snapshot
 // ============================================================
-function drawLoop(timestamp) {
-  frameCount++;
-  if (timestamp - lastFpsUpdate >= 1000) {
-    fpsSpan.textContent = `${frameCount} FPS`;
-    frameCount = 0;
-    lastFpsUpdate = timestamp;
-  }
-
-  if (video.readyState >= 2) {
-    ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
-  } else {
-    ctx.fillStyle = '#1a1a2e';
-    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+app.delete('/api/snapshots/:filename', (req, res) => {
+  const filename = req.params.filename;
+  
+  if (filename.includes('..') || filename.includes('/') || filename.includes('\\')) {
+    return res.status(400).json({ success: false, error: 'Invalid filename' });
   }
-
-  if (isModelReady && handLandmarker && video.readyState >= 2) {
+  
+  const filePath = path.join(SNAPSHOT_DIR, filename);
+  
+  if (fs.existsSync(filePath)) {
     try {
-      const results = handLandmarker.detectForVideo(video, performance.now());
-      
-      if (results.landmarks && results.landmarks.length > 0) {
-        const lm = results.landmarks[0];
-        const tip = lm[8];
-        const mcp = lm[5];
-        
-        const isIndexUp = (tip.y < mcp.y - 0.02);
-        
-        if (isIndexUp) {
-          gestureIndicator.className = 'gesture-on';
-          gestureIndicator.textContent = '✋';
-        } else {
-          gestureIndicator.className = 'gesture-off';
-          gestureIndicator.textContent = '✊';
-        }
-
-        const x = tip.x * canvasWidth;
-        const y = tip.y * canvasHeight;
-
-        if (isIndexUp) {
-          if (!drawing) {
-            drawing = true;
-            lastX = x;
-            lastY = y;
-          } else {
-            if (lastX !== null && lastY !== null) {
-              ctx.beginPath();
-              ctx.moveTo(lastX, lastY);
-              ctx.lineTo(x, y);
-              ctx.strokeStyle = eraserMode ? '#1a1a2e' : currentColor;
-              ctx.lineWidth = eraserMode ? brushSize * 2 : brushSize;
-              ctx.lineCap = 'round';
-              ctx.lineJoin = 'round';
-              ctx.stroke();
-            }
-            lastX = x;
-            lastY = y;
-          }
-        } else {
-          drawing = false;
-          lastX = null;
-          lastY = null;
-        }
-
-        // Cursor
-        ctx.beginPath();
-        ctx.arc(x, y, 4, 0, 2 * Math.PI);
-        ctx.fillStyle = eraserMode ? '#ff6666' : currentColor;
-        ctx.fill();
-        ctx.strokeStyle = '#fff';
-        ctx.lineWidth = 1;
-        ctx.stroke();
-
-      } else {
-        gestureIndicator.className = 'gesture-off';
-        gestureIndicator.textContent = '🚫';
-        drawing = false;
-        lastX = null;
-        lastY = null;
-      }
+      fs.unlinkSync(filePath);
+      console.log(`[SERVER] Deleted snapshot: ${filename}`);
+      res.json({ success: true, message: 'Deleted' });
     } catch (err) {
-      // silent
-    }
-  }
-
-  requestAnimationFrame(drawLoop);
-}
-
-// ============================================================
-// 9. Snapshot Capture
-// ============================================================
-async function captureSnapshot() {
-  try {
-    const tempCanvas = document.createElement('canvas');
-    tempCanvas.width = canvasWidth;
-    tempCanvas.height = canvasHeight;
-    const tempCtx = tempCanvas.getContext('2d');
-
-    if (video.readyState >= 2) {
-      tempCtx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
-    }
-    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}`;
-      statusDiv.textContent = `✅ Snapshot saved: ${result.filename}`;
-      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.';
-  }
-}
-
-// ============================================================
-// 10. UI Event Bindings
-// ============================================================
-brushColorInput.addEventListener('input', (e) => {
-  currentColor = e.target.value;
-  eraserMode = false;
-  eraserBtn.classList.remove('active');
-});
-
-sizeDownBtn.addEventListener('click', () => {
-  brushSize = Math.max(1, brushSize - 1);
-  sizeDisplay.textContent = brushSize;
-});
-sizeUpBtn.addEventListener('click', () => {
-  brushSize = Math.min(50, brushSize + 1);
-  sizeDisplay.textContent = brushSize;
-});
-
-eraserBtn.addEventListener('click', () => {
-  eraserMode = !eraserMode;
-  eraserBtn.classList.toggle('active');
-  statusDiv.textContent = eraserMode ? '🧹 Eraser mode ON' : '🎨 Drawing mode';
-});
-
-clearBtn.addEventListener('click', () => {
-  if (confirm('Clear all drawings?')) {
-    drawing = false;
-    lastX = null;
-    lastY = null;
-    statusDiv.textContent = '🗑️ Canvas cleared';
-    if (video.readyState >= 2) {
-      ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
+      res.status(500).json({ success: false, error: err.message });
     }
+  } else {
+    res.status(404).json({ success: false, error: 'File not found' });
   }
 });
 
-snapshotBtn.addEventListener('click', captureSnapshot);
-
-toggleCamBtn.addEventListener('click', () => {
-  cameraVisible = !cameraVisible;
-  video.style.display = cameraVisible ? 'block' : 'none';
-  toggleCamBtn.classList.toggle('active');
-});
-
 // ============================================================
-// 11. Keyboard Shortcuts (including 's' for save)
+// 8. Health Check
 // ============================================================
-document.addEventListener('keydown', (e) => {
-  if (e.key === 's' || e.key === 'S') captureSnapshot();
-  if (e.key === 'e' || e.key === 'E') eraserBtn.click();
-  if (e.key === 'c' || e.key === 'C') clearBtn.click();
+app.get('/health', (req, res) => {
+  res.status(200).send('OK');
 });
 
 // ============================================================
-// 12. Initialization
+// 9. Start Server
 // ============================================================
-resizeCanvas();
-startCamera();
-mobileLog('🚀 App initialized. Tap canvas 3x or press 3 three times for admin.');
-console.log('[Gesture Draw] App initialized.');
+app.listen(PORT, () => {
+  console.log(`[SERVER] Running on port ${PORT}`);
+  console.log(`[SERVER] Snapshots directory: ${SNAPSHOT_DIR}`);
+  console.log(`[SERVER] Serving static files from: ${path.join(__dirname, 'public')}`);
+});