Create script.js

public/script.js

@@ -0,0 +1,327 @@
+// ============================================================
+// 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');
+
+// Toolbar elements
+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');
+
+// ============================================================
+// 2. State Variables
+// ============================================================
+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;
+
+// ============================================================
+// 3. Canvas Resize
+// ============================================================
+function resizeCanvas() {
+  const rect = canvas.parentElement.getBoundingClientRect();
+  canvas.width = rect.width;
+  canvas.height = rect.height;
+  canvasWidth = canvas.width;
+  canvasHeight = canvas.height;
+  // Redraw background (if any) – we draw video each frame anyway
+}
+
+window.addEventListener('resize', resizeCanvas);
+
+// ============================================================
+// 4. MediaPipe Hand Landmarker Initialization
+// ============================================================
+async function initHandLandmarker() {
+  try {
+    statusDiv.textContent = '⏳ Loading hand model...';
+    
+    // Use the FilesetResolver to load wasm and model
+    const vision = await FilesetResolver.forVisionTasks(
+      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/wasm'
+    );
+    
+    handLandmarker = await HandLandmarker.createFromOptions(vision, {
+      baseOptions: {
+        modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task',
+        delegate: 'GPU'  // or 'CPU' if GPU fails
+      },
+      runningMode: 'VIDEO',
+      numHands: 1
+    });
+    
+    isModelReady = true;
+    statusDiv.textContent = '✅ Model ready · Move index finger up to draw';
+    console.log('[MediaPipe] HandLandmarker initialized');
+  } catch (err) {
+    console.error('[MediaPipe] Initialization error:', err);
+    statusDiv.textContent = '❌ Failed to load hand model. Please refresh.';
+  }
+}
+
+// ============================================================
+// 5. Camera Setup
+// ============================================================
+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...';
+    // Wait a moment then initialize model
+    initHandLandmarker();
+    // Start the main loop
+    requestAnimationFrame(drawLoop);
+  } catch (err) {
+    console.error('[Camera] Error:', err);
+    statusDiv.textContent = '❌ Camera access denied. Please allow camera permissions.';
+    alert('Camera access is required for hand tracking. Please allow permissions and refresh.');
+  }
+}
+
+// ============================================================
+// 6. Core Drawing Loop (requestAnimationFrame)
+// ============================================================
+function drawLoop(timestamp) {
+  // FPS counter
+  frameCount++;
+  if (timestamp - lastFpsUpdate >= 1000) {
+    fpsSpan.textContent = `${frameCount} FPS`;
+    frameCount = 0;
+    lastFpsUpdate = timestamp;
+  }
+
+  // 6a. Draw video background onto canvas
+  if (video.readyState >= 2) {
+    ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
+  } else {
+    // If video not ready, draw a dark background
+    ctx.fillStyle = '#1a1a2e';
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+  }
+
+  // 6b. Run hand detection if model is ready
+  if (isModelReady && handLandmarker && video.readyState >= 2) {
+    try {
+      const results = handLandmarker.detectForVideo(video, performance.now());
+      
+      if (results.landmarks && results.landmarks.length > 0) {
+        const lm = results.landmarks[0];
+        // Landmark 8 = index finger tip, 5 = index finger MCP (knuckle)
+        const tip = lm[8];
+        const mcp = lm[5];
+        
+        // Gesture detection: tip.y < mcp.y - threshold => finger pointing up
+        const isIndexUp = (tip.y < mcp.y - 0.02);
+        
+        // Update gesture indicator
+        if (isIndexUp) {
+          gestureIndicator.className = 'gesture-on';
+          gestureIndicator.textContent = '✋';
+        } else {
+          gestureIndicator.className = 'gesture-off';
+          gestureIndicator.textContent = '✊';
+        }
+
+        // Convert normalized coords to canvas pixels
+        const x = tip.x * canvasWidth;
+        const y = tip.y * canvasHeight;
+
+        // Drawing logic
+        if (isIndexUp) {
+          if (!drawing) {
+            // Start new stroke
+            drawing = true;
+            lastX = x;
+            lastY = y;
+          } else {
+            // Continue drawing
+            if (lastX !== null && lastY !== null) {
+              ctx.beginPath();
+              ctx.moveTo(lastX, lastY);
+              ctx.lineTo(x, y);
+              ctx.strokeStyle = eraserMode ? '#1a1a2e' : currentColor; // eraser matches background
+              ctx.lineWidth = eraserMode ? brushSize * 2 : brushSize;
+              ctx.lineCap = 'round';
+              ctx.lineJoin = 'round';
+              ctx.stroke();
+            }
+            lastX = x;
+            lastY = y;
+          }
+        } else {
+          // Finger down – stop drawing
+          drawing = false;
+          lastX = null;
+          lastY = null;
+        }
+
+        // Optional: Draw a small cursor at fingertip
+        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 {
+        // No hand detected
+        gestureIndicator.className = 'gesture-off';
+        gestureIndicator.textContent = '🚫';
+        drawing = false;
+        lastX = null;
+        lastY = null;
+      }
+    } catch (err) {
+      // Silently continue if detection fails
+    }
+  }
+
+  // Continue the loop
+  requestAnimationFrame(drawLoop);
+}
+
+// ============================================================
+// 7. Snapshot Capture and Save to Backend
+// ============================================================
+async function captureSnapshot() {
+  try {
+    // Create a temporary canvas that combines video and drawing
+    const tempCanvas = document.createElement('canvas');
+    tempCanvas.width = canvasWidth;
+    tempCanvas.height = canvasHeight;
+    const tempCtx = tempCanvas.getContext('2d');
+
+    // Draw current video frame (if available)
+    if (video.readyState >= 2) {
+      tempCtx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
+    }
+    // Overlay the drawing canvas (which already contains the video background + strokes)
+    tempCtx.drawImage(canvas, 0, 0);
+
+    // Convert to PNG base64 (without the header)
+    const dataURL = tempCanvas.toDataURL('image/png');
+    const base64 = dataURL.split(',')[1];
+
+    // Send to backend
+    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}`;
+      // Optional: show a brief flash
+      canvas.style.transition = 'opacity 0.1s';
+      canvas.style.opacity = '0.7';
+      setTimeout(() => { canvas.style.opacity = '1'; }, 150);
+    } else {
+      statusDiv.textContent = `❌ Save failed: ${result.error}`;
+    }
+  } catch (err) {
+    console.error('[Snapshot] Error:', err);
+    statusDiv.textContent = '❌ Network error while saving snapshot.';
+  }
+}
+
+// ============================================================
+// 8. UI Event Bindings
+// ============================================================
+
+// Color picker
+brushColorInput.addEventListener('input', (e) => {
+  currentColor = e.target.value;
+  eraserMode = false;
+  eraserBtn.classList.remove('active');
+});
+
+// Brush size
+sizeDownBtn.addEventListener('click', () => {
+  brushSize = Math.max(1, brushSize - 1);
+  sizeDisplay.textContent = brushSize;
+});
+sizeUpBtn.addEventListener('click', () => {
+  brushSize = Math.min(50, brushSize + 1);
+  sizeDisplay.textContent = brushSize;
+});
+
+// Eraser toggle
+eraserBtn.addEventListener('click', () => {
+  eraserMode = !eraserMode;
+  eraserBtn.classList.toggle('active');
+  statusDiv.textContent = eraserMode ? '🧹 Eraser mode ON' : '🎨 Drawing mode';
+});
+
+// Clear canvas
+clearBtn.addEventListener('click', () => {
+  if (confirm('Clear all drawings?')) {
+    // We redraw the video background; but since we draw video each frame,
+    // just reset the drawing state and clear the overlay by drawing video again.
+    // The loop will overwrite. But we also need to clear any stored strokes.
+    // Simplest: reset drawing and let the loop draw video.
+    drawing = false;
+    lastX = null;
+    lastY = null;
+    statusDiv.textContent = '🗑️ Canvas cleared';
+    // Force a redraw of video background
+    if (video.readyState >= 2) {
+      ctx.drawImage(video, 0, 0, canvasWidth, canvasHeight);
+    }
+  }
+});
+
+// Snapshot button
+snapshotBtn.addEventListener('click', captureSnapshot);
+
+// Toggle camera visibility (just hides the video element, but canvas still shows)
+toggleCamBtn.addEventListener('click', () => {
+  cameraVisible = !cameraVisible;
+  video.style.display = cameraVisible ? 'block' : 'none';
+  toggleCamBtn.classList.toggle('active');
+});
+
+// Keyboard shortcuts
+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();
+});
+
+// ============================================================
+// 9. Initialization
+// ============================================================
+resizeCanvas();
+startCamera();
+
+// Log ready
+console.log('[Gesture Draw] App initialized. Waiting for camera and model.');