Update server.js

server.js

@@ -1,368 +1,183 @@
-// ============================================================
-// 1. DOM References (unchanged)
-// ============================================================
-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. State Variables
+// 1. Middleware
 // ============================================================
-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;
+app.use(cors());
+app.use(express.json({ limit: '10mb' }));
 
-// ============================================================
-// 3. Canvas Resize (unchanged)
-// ============================================================
-function resizeCanvas() {
-  const rect = canvas.parentElement.getBoundingClientRect();
-  canvas.width = rect.width;
-  canvas.height = rect.height;
-  canvasWidth = canvas.width;
-  canvasHeight = canvas.height;
-}
-window.addEventListener('resize', resizeCanvas);
+// 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"');
+  }
+  next();
+});
 
 // ============================================================
-// 4. MediaPipe Hand Landmarker with Fallbacks
+// 2. Snapshots Directory Setup
 // ============================================================
-async function initHandLandmarker() {
-  try {
-    statusDiv.textContent = '⏳ Loading hand model (attempt ' + (modelLoadAttempts + 1) + ')...';
-    
-    // Use the FilesetResolver to load wasm
-    const vision = await FilesetResolver.forVisionTasks(
-      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/wasm'
-    );
-
-    // Model sources - try in order
-    const modelSources = [
-      // Local file (you placed in public/)
-      '/hand_landmarker.task',
-      // Google CDN (official)
-      'https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task',
-      // Hugging Face mirror (community hosted)
-      'https://huggingface.co/spaces/GoogleMediaPipe/hand_landmarker/resolve/main/hand_landmarker.task'
-    ];
-
-    let lastError = null;
-    for (let i = 0; i < modelSources.length; i++) {
-      try {
-        statusDiv.textContent = `⏳ Loading model from source ${i+1}/${modelSources.length}...`;
-        console.log(`[MediaPipe] Trying source ${i+1}: ${modelSources[i]}`);
-        
-        handLandmarker = await HandLandmarker.createFromOptions(vision, {
-          baseOptions: {
-            modelAssetPath: modelSources[i],
-            delegate: 'GPU'
-          },
-          runningMode: 'VIDEO',
-          numHands: 1
-        });
-        
-        // If we get here, model loaded successfully
-        isModelReady = true;
-        statusDiv.textContent = '✅ Model ready · Move index finger up to draw';
-        console.log('[MediaPipe] HandLandmarker initialized successfully from source', i+1);
-        return; // Exit function on success
-      } catch (err) {
-        lastError = err;
-        console.warn(`[MediaPipe] Source ${i+1} failed:`, err.message);
-        // Continue to next source
-      }
-    }
-
-    // If all sources fail, try CPU delegate as last resort
-    try {
-      statusDiv.textContent = '⏳ Trying CPU fallback...';
-      handLandmarker = await HandLandmarker.createFromOptions(vision, {
-        baseOptions: {
-          modelAssetPath: modelSources[0], // try local file again
-          delegate: 'CPU'
-        },
-        runningMode: 'VIDEO',
-        numHands: 1
-      });
-      isModelReady = true;
-      statusDiv.textContent = '✅ Model ready (CPU mode) · Move index finger up to draw';
-      console.log('[MediaPipe] Model loaded with CPU delegate');
-      return;
-    } catch (cpuErr) {
-      console.error('[MediaPipe] CPU fallback also failed:', cpuErr);
-    }
-
-    // If we reach here, all attempts failed
-    throw lastError || new Error('All model sources failed');
+const SNAPSHOT_DIR = path.join(__dirname, 'snapshots');
 
-  } catch (err) {
-    console.error('[MediaPipe] Fatal initialization error:', err);
-    statusDiv.textContent = '❌ Model load failed. Click here to retry.';
-    // Make status clickable to retry
-    statusDiv.style.cursor = 'pointer';
-    statusDiv.onclick = () => {
-      modelLoadAttempts++;
-      if (modelLoadAttempts < MAX_MODEL_ATTEMPTS) {
-        initHandLandmarker();
-      } else {
-        statusDiv.textContent = '❌ Max retries reached. Please refresh the page.';
-        statusDiv.onclick = null;
-      }
-    };
-  }
+if (!fs.existsSync(SNAPSHOT_DIR)) {
+  fs.mkdirSync(SNAPSHOT_DIR, { recursive: true });
+  console.log(`[SERVER] Created snapshots directory at ${SNAPSHOT_DIR}`);
 }
 
 // ============================================================
-// 5. Camera Setup (unchanged)
+// 3. Serve Static Frontend Files
 // ============================================================
-async function startCamera() {
-  try {
-    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...';
-    initHandLandmarker();
-    requestAnimationFrame(drawLoop);
-  } catch (err) {
-    console.error('[Camera] Error:', err);
-    statusDiv.textContent = '❌ Camera access denied. Please allow permissions.';
-    alert('Camera access is required. Please allow and refresh.');
-  }
-}
+app.use(express.static(path.join(__dirname, 'public')));
 
 // ============================================================
-// 6. Core Drawing Loop (unchanged except for drawing logic)
+// 4. Snapshot Binary Endpoint (bypasses static route restrictions)
 // ============================================================
-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.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');
   }
-
-  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;
-        }
-
-        // Draw 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;
-      }
+      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) {
-      // silent
+      console.error(`[SERVER] Error reading snapshot ${filename}:`, err);
+      res.status(500).send('Error reading file');
     }
+  } else {
+    console.log(`[SERVER] Snapshot not found: ${filename}`);
+    res.status(404).send('Snapshot not found');
   }
-
-  requestAnimationFrame(drawLoop);
-}
+});
 
 // ============================================================
-// 7. Snapshot Capture (unchanged)
+// 5. POST /api/snapshot – Save New Snapshot
 // ============================================================
-async function captureSnapshot() {
+app.post('/api/snapshot', (req, res) => {
   try {
-    const tempCanvas = document.createElement('canvas');
-    tempCanvas.width = canvasWidth;
-    tempCanvas.height = canvasHeight;
-    const tempCtx = tempCanvas.getContext('2d');
+    const { image } = req.body;
+    
+    if (!image) {
+      return res.status(400).json({ success: false, error: 'No image data provided' });
+    }
 
-    if (video.readyState >= 2) {
-      tempCtx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
+    // Validate base64 format
+    if (typeof image !== 'string' || image.length < 100) {
+      return res.status(400).json({ success: false, error: 'Invalid image data format' });
     }
-    tempCtx.drawImage(canvas, 0, 0);
 
-    const dataURL = tempCanvas.toDataURL('image/png');
-    const base64 = dataURL.split(',')[1];
+    const buffer = Buffer.from(image, 'base64');
+    
+    // Generate timestamp-based filename (YYYY-MM-DD_HH-MM-SS_SSS.png)
+    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);
 
-    const response = await fetch('/api/snapshot', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ image: base64 })
-    });
+    // Write file synchronously
+    fs.writeFileSync(filePath, buffer);
+    console.log(`[SERVER] Snapshot saved: ${filename} (${buffer.length} bytes) at ${filePath}`);
 
-    const result = await response.json();
-    if (result.success) {
-      savedCount++;
-      savedSpan.textContent = `Saved: ${savedCount}`;
-      statusDiv.textContent = `✅ Snapshot saved: ${result.filename}`;
-      canvas.style.transition = 'opacity 0.1s';
-      canvas.style.opacity = '0.7';
-      setTimeout(() => { canvas.style.opacity = '1'; }, 150);
+    // Verify write succeeded
+    if (fs.existsSync(filePath)) {
+      const stats = fs.statSync(filePath);
+      console.log(`[SERVER] Verification: file exists, size ${stats.size} bytes`);
     } else {
-      statusDiv.textContent = `❌ Save failed: ${result.error}`;
+      console.error(`[SERVER] Verification FAILED: file not found after write`);
+      return res.status(500).json({ success: false, error: 'Write verification failed' });
     }
+
+    res.json({ 
+      success: true, 
+      path: `/snapshots/${filename}`, 
+      filename: filename 
+    });
+
   } catch (err) {
-    console.error('[Snapshot] Error:', err);
-    statusDiv.textContent = '❌ Network error while saving snapshot.';
+    console.error('[SERVER] Save error:', err);
+    res.status(500).json({ success: false, error: 'Internal server error: ' + err.message });
   }
-}
+});
 
 // ============================================================
-// 8. Admin Panel Trigger (Triple-tap '3' key)
+// 6. GET /api/snapshots/list – List All Snapshots (for Admin)
 // ============================================================
-let keyPressCount = 0;
-let keyPressTimer = null;
-
-document.addEventListener('keydown', (e) => {
-  // Admin trigger: press '3' three times within 2 seconds
-  if (e.key === '3') {
-    keyPressCount++;
-    clearTimeout(keyPressTimer);
-    keyPressTimer = setTimeout(() => { keyPressCount = 0; }, 2000);
+app.get('/api/snapshots/list', (req, res) => {
+  try {
+    const files = fs.readdirSync(SNAPSHOT_DIR)
+      .filter(f => f.endsWith('.png'))
+      .sort();
     
-    if (keyPressCount >= 3) {
-      keyPressCount = 0;
-      // Open admin.html in new tab
-      window.open('/admin.html', '_blank');
-      statusDiv.textContent = '🔐 Admin panel opened in new tab';
-    }
+    console.log(`[SERVER] Listed ${files.length} snapshots`);
+    res.json({ success: true, files });
+  } catch (err) {
+    console.error('[SERVER] List error:', err);
+    res.status(500).json({ success: false, error: err.message });
   }
-
-  // Existing shortcuts
-  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();
 });
 
 // ============================================================
-// 9. UI Event Bindings (unchanged)
+// 7. DELETE /api/snapshots/:filename – Delete a Snapshot (optional)
 // ============================================================
-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);
+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' });
+  }
+  
+  const filePath = path.join(SNAPSHOT_DIR, filename);
+  
+  if (fs.existsSync(filePath)) {
+    try {
+      fs.unlinkSync(filePath);
+      console.log(`[SERVER] Deleted snapshot: ${filename}`);
+      res.json({ success: true, message: 'Deleted' });
+    } catch (err) {
+      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');
+// ============================================================
+// 8. Health Check
+// ============================================================
+app.get('/health', (req, res) => {
+  res.status(200).send('OK');
 });
 
 // ============================================================
-// 10. Initialization
+// 9. Start Server
 // ============================================================
-resizeCanvas();
-startCamera();
-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')}`);
+});