Update index.html

index.html

@@ -4,8 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>GestureMail Pro</title>
-    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected].1646424915/hands.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/hands.js"></script>
     <style>
         * {
             margin: 0;
@@ -262,6 +261,7 @@
             background-color: #4285f4;
             border-radius: 50%;
             transform: translate(-50%, -50%);
+            z-index: 100;
         }
 
         .hand-landmarks .landmark.index-tip {
@@ -270,6 +270,86 @@
             height: 12px;
         }
 
+        .gesture-path {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+
+        .gesture-path .point {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background-color: #ff0000;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        /* Debug Panel */
+        .debug-panel {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background-color: rgba(0,0,0,0.7);
+            color: #0f0;
+            padding: 15px;
+            border-radius: 12px;
+            max-width: 300px;
+            z-index: 100;
+            font-family: monospace;
+            font-size: 12px;
+            line-height: 1.4;
+        }
+
+        .debug-panel h3 {
+            color: #4285f4;
+            margin-bottom: 10px;
+        }
+
+        .debug-item {
+            margin-bottom: 5px;
+        }
+
+        .debug-label {
+            display: inline-block;
+            width: 120px;
+            color: #aaa;
+        }
+
+        .debug-value {
+            color: #fff;
+        }
+
+        /* Status Indicator */
+        .status-indicator {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            z-index: 200;
+        }
+
+        .status-indicator.ready {
+            background-color: #34a853;
+            box-shadow: 0 0 10px #34a853;
+        }
+
+        .status-indicator.processing {
+            background-color: #fbbc05;
+            animation: blink 1s infinite;
+        }
+
+        .status-indicator.error {
+            background-color: #ea4335;
+            animation: blink 0.5s infinite;
+        }
+
+        @keyframes blink {
+            50% { opacity: 0.5; }
+        }
+
         /* For mobile responsiveness */
         @media (max-width: 768px) {
             .webcam-container {
@@ -279,7 +359,7 @@
                 right: 10px;
             }
 
-            .gesture-guide {
+            .gesture-guide, .debug-panel {
                 max-width: 240px;
                 font-size: 0.9em;
                 padding: 10px;
@@ -334,8 +414,44 @@
     
     <div class="gesture-visualization">
         <div class="hand-landmarks" id="handLandmarks"></div>
+        <div class="gesture-path" id="gesturePath"></div>
     </div>
+    
     <div class="selection-highlight" id="selectionHighlight" style="display: none;"></div>
+    
+    <div class="debug-panel">
+        <h3>Debug Information</h3>
+        <div class="debug-item">
+            <span class="debug-label">Status:</span>
+            <span class="debug-value" id="debugStatus">Initializing...</span>
+        </div>
+        <div class="debug-item">
+            <span class="debug-label">Selected Email:</span>
+            <span class="debug-value" id="debugSelectedEmail">None</span>
+        </div>
+        <div class="debug-item">
+            <span class="debug-label">Gesture Type:</span>
+            <span class="debug-value" id="debugGestureType">None</span>
+        </div>
+        <div class="debug-item">
+            <span class="debug-label">Gesture Buffer:</span>
+            <span class="debug-value" id="debugBufferCount">0 points</span>
+        </div>
+        <div class="debug-item">
+            <span class="debug-label">Circle Points:</span>
+            <span class="debug-value" id="debugCircleCount">0 points</span>
+        </div>
+        <div class="debug-item">
+            <span class="debug-label">Camera:</span>
+            <span class="debug-value" id="debugCameraStatus">Not initialized</span>
+        </div>
+        <div class="debug-item">
+            <span class="debug-label">Last Error:</span>
+            <span class="debug-value" id="debugLastError">None</span>
+        </div>
+    </div>
+    
+    <div class="status-indicator" id="statusIndicator"></div>
 
     <script>
         // ----------------------------
@@ -408,6 +524,69 @@
             }
         ];
 
+        // ----------------------------
+        // Debug Utilities
+        // ----------------------------
+        class DebugManager {
+            constructor() {
+                this.statusEl = document.getElementById('debugStatus');
+                this.selectedEmailEl = document.getElementById('debugSelectedEmail');
+                this.gestureTypeEl = document.getElementById('debugGestureType');
+                this.bufferCountEl = document.getElementById('debugBufferCount');
+                this.circleCountEl = document.getElementById('debugCircleCount');
+                this.cameraStatusEl = document.getElementById('debugCameraStatus');
+                this.lastErrorEl = document.getElementById('debugLastError');
+                this.statusIndicator = document.getElementById('statusIndicator');
+            }
+            
+            updateStatus(status) {
+                this.statusEl.textContent = status;
+            }
+            
+            updateSelectedEmail(emailId) {
+                if (emailId) {
+                    const email = emails.find(e => e.id === emailId);
+                    this.selectedEmailEl.textContent = email ? email.subject.substring(0, 20) + '...' : 'Unknown';
+                } else {
+                    this.selectedEmailEl.textContent = 'None';
+                }
+            }
+            
+            updateGestureType(gestureType) {
+                this.gestureTypeEl.textContent = gestureType;
+            }
+            
+            updateBufferCount(count) {
+                this.bufferCountEl.textContent = `${count} points`;
+            }
+            
+            updateCircleCount(count) {
+                this.circleCountEl.textContent = `${count} points`;
+            }
+            
+            updateCameraStatus(status) {
+                this.cameraStatusEl.textContent = status;
+            }
+            
+            logError(error) {
+                console.error("Gesture Detection Error:", error);
+                this.lastErrorEl.textContent = error.message.substring(0, 50) + (error.message.length > 50 ? '...' : '');
+                
+                // Update status indicator to red
+                this.statusIndicator.className = 'status-indicator error';
+            }
+            
+            setReady() {
+                this.updateStatus('Ready');
+                this.statusIndicator.className = 'status-indicator ready';
+            }
+            
+            setProcessing() {
+                this.updateStatus('Processing...');
+                this.statusIndicator.className = 'status-indicator processing';
+            }
+        }
+
         // ----------------------------
         // UI Management
         // ----------------------------
@@ -417,6 +596,7 @@
                 this.actionFeedback = document.getElementById('actionFeedback');
                 this.selectionHighlight = document.getElementById('selectionHighlight');
                 this.handLandmarks = document.getElementById('handLandmarks');
+                this.gesturePath = document.getElementById('gesturePath');
                 
                 this.selectedEmail = null;
                 this.emailElements = [];
@@ -563,14 +743,29 @@
                     this.handLandmarks.appendChild(landmarkEl);
                 });
             }
+            
+            updateGesturePath(points) {
+                this.gesturePath.innerHTML = '';
+                
+                if (!points || points.length === 0) return;
+                
+                points.forEach(point => {
+                    const pointEl = document.createElement('div');
+                    pointEl.className = 'point';
+                    pointEl.style.left = `${point.x * 100}%`;
+                    pointEl.style.top = `${point.y * 100}%`;
+                    this.gesturePath.appendChild(pointEl);
+                });
+            }
         }
 
         // ----------------------------
         // Gesture Detection
         // ----------------------------
         class GestureDetector {
-            constructor(uiManager) {
+            constructor(uiManager, debugManager) {
                 this.uiManager = uiManager;
+                this.debugManager = debugManager;
                 this.selectedEmailId = null;
                 this.gestureBuffer = [];
                 this.circlePoints = [];
@@ -578,212 +773,68 @@
                 this.swipeThreshold = 50;
                 this.gestureCooldown = 1500; // 1.5 seconds
                 this.lastGestureTime = 0;
+                this.isProcessing = false;
                 
+                this.debugManager.updateStatus('Setting up MediaPipe...');
                 this.setupMediaPipe();
             }
             
             setupMediaPipe() {
-                const hands = new Hands({locateFile: (file) => {
-                    return `https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1646424915/${file}`;
-                }});
-                
-                hands.setOptions({
-                    maxNumHands: 1,
-                    modelComplexity: 1,
-                    minDetectionConfidence: 0.7,
-                    minTrackingConfidence: 0.7
-                });
-                
-                hands.onResults(results => {
-                    this.processResults(results);
-                });
-                
-                const videoElement = document.getElementById('webcam');
-                
-                const camera = new Camera(videoElement, {
-                    onFrame: async () => {
-                        await hands.send({image: videoElement});
-                    },
-                    width: 320,
-                    height: 240
-                });
-                camera.start();
-            }
-            
-            processResults(results) {
-                // Update hand landmarks visualization
-                if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
-                    this.uiManager.updateHandLandmarks(results.multiHandLandmarks[0]);
-                    this.detectGesture(results.multiHandLandmarks[0]);
-                } else {
-                    this.uiManager.clearSelection();
-                    this.gestureBuffer = [];
-                    this.circlePoints = [];
-                }
-            }
-            
-            detectGesture(landmarks) {
-                // Convert to pixel coordinates for easier calculation
-                const indexTip = landmarks[8];
-                const middleTip = landmarks[12];
-                const wrist = landmarks[0];
-                
-                // Pointing detection (index finger higher than middle)
-                if (indexTip.y < middleTip.y) {
-                    this.checkEmailSelection(indexTip.x, indexTip.y);
-                } else {
-                    this.uiManager.clearSelection();
-                    this.gestureBuffer = [];
-                    this.circlePoints = [];
-                }
-                
-                // Only process gestures if an email is selected
-                if (this.selectedEmailId === null) {
-                    return;
-                }
-                
-                // Get palm center for gesture detection
-                const palmCenterX = (wrist.x + landmarks[9].x) / 2;
-                const palmCenterY = (wrist.y + landmarks[9].y) / 2;
-                
-                // Add to gesture buffer
-                this.gestureBuffer.push({x: palmCenterX, y: palmCenterY});
-                
-                // Check for swipe
-                if (this.gestureBuffer.length > 2) {
-                    const prev = this.gestureBuffer[this.gestureBuffer.length - 2];
-                    const current = this.gestureBuffer[this.gestureBuffer.length - 1];
+                try {
+                    const hands = new Hands({locateFile: (file) => {
+                        return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
+                    }});
                     
-                    const dx = (current.x - prev.x) * window.innerWidth;
-                    const dy = (current.y - prev.y) * window.innerHeight;
+                    hands.setOptions({
+                        maxNumHands: 1,
+                        modelComplexity: 1,
+                        minDetectionConfidence: 0.7,
+                        minTrackingConfidence: 0.7
+                    });
                     
-                    // Check if it's a horizontal swipe
-                    if (Math.abs(dx) > this.swipeThreshold && Math.abs(dx) > Math.abs(dy) * 2) {
-                        if (Date.now() - this.lastGestureTime > this.gestureCooldown) {
-                            this.lastGestureTime = Date.now();
-                            
-                            if (dx > 0) {
-                                this.handleGesture('swipe_right');
-                            } else {
-                                this.handleGesture('swipe_left');
-                            }
-                            
-                            this.gestureBuffer = [];
-                        }
-                    }
-                }
-                
-                // Check for circle
-                this.circlePoints.push({x: palmCenterX, y: palmCenterY});
-                if (this.circlePoints.length > this.circleThreshold) {
-                    const startPoint = this.circlePoints[0];
-                    const endPoint = this.circlePoints[this.circlePoints.length - 1];
+                    hands.onResults(results => {
+                        this.processResults(results);
+                    });
                     
-                    const distance = Math.sqrt(
-                        Math.pow(startPoint.x - endPoint.x, 2) + 
-                        Math.pow(startPoint.y - endPoint.y, 2)
-                    ) * window.innerWidth;
+                    const videoElement = document.getElementById('webcam');
                     
-                    if (distance < 40 && Date.now() - this.lastGestureTime > this.gestureCooldown) {
-                        this.lastGestureTime = Date.now();
-                        this.handleGesture('circle');
-                        this.circlePoints = [];
-                    }
-                }
-            }
-            
-            checkEmailSelection(x, y) {
-                // Convert normalized coordinates to screen coordinates
-                const screenX = x * window.innerWidth;
-                const screenY = y * window.innerHeight;
-                
-                // Check which email is under the finger
-                for (let i = this.uiManager.emailElements.length - 1; i >= 0; i--) {
-                    const email = this.uiManager.emailElements[i];
-                    if (email.rect && 
-                        screenX >= email.rect.left && 
-                        screenX <= email.rect.right &&
-                        screenY >= email.rect.top && 
-                        screenY <= email.rect.bottom) {
+                    const camera = new Camera(videoElement, {
+                        onFrame: async () => {
+                            try {
+                                this.debugManager.setProcessing();
+                                await hands.send({image: videoElement});
+                            } catch (error) {
+                                this.debugManager.logError(error);
+                            }
+                        },
+                        width: 320,
+                        height: 240
+                    });
+                    
+                    camera.start()
+                        .then(() => {
+                            this.debugManager.updateCameraStatus('Active');
+                            this.debugManager.setReady();
+                            console.log("Camera initialized successfully");
+                        })
+                        .catch(error => {
+                            this.debugManager.updateCameraStatus('Error');
+                            this.debugManager.logError(error);
+                            alert("Failed to start camera: " + error.message);
+                        });
                         
-                        // Only select if it's a different email
-                        if (this.selectedEmailId !== email.id) {
-                            this.selectedEmailId = email.id;
-                            this.uiManager.selectEmail(email.id);
-                        }
-                        return;
-                    }
-                }
-                
-                // If no email is selected, clear selection
-                if (!this.uiManager.emailElements.some(email => 
-                    email.rect && 
-                    screenX >= email.rect.left && 
-                    screenX <= email.rect.right &&
-                    screenY >= email.rect.top && 
-                    screenY <= email.rect.bottom)) {
-                    this.uiManager.clearSelection();
-                    this.selectedEmailId = null;
+                } catch (error) {
+                    this.debugManager.logError(error);
+                    console.error("MediaPipe setup error:", error);
+                    alert("Failed to initialize gesture detection: " + error.message);
                 }
             }
             
-            handleGesture(gesture) {
-                if (!this.selectedEmailId) return;
-                
-                const email = emails.find(e => e.id === this.selectedEmailId);
-                if (!email) return;
-                
-                switch (gesture) {
-                    case 'swipe_left':
-                        this.uiManager.showActionFeedback(`🗑️ Deleted: ${email.subject}`, 'delete');
-                        // Remove from UI
-                        const index = emails.findIndex(e => e.id === this.selectedEmailId);
-                        if (index !== -1) emails.splice(index, 1);
-                        this.uiManager.renderEmails();
-                        this.selectedEmailId = null;
-                        break;
-                        
-                    case 'swipe_right':
-                        this.uiManager.showActionFeedback(`✅ Archived: ${email.subject}`, 'archive');
-                        // In a real app, we'd move to archive
-                        const archiveIndex = emails.findIndex(e => e.id === this.selectedEmailId);
-                        if (archiveIndex !== -1) emails.splice(archiveIndex, 1);
-                        this.uiManager.renderEmails();
-                        this.selectedEmailId = null;
-                        break;
+            processResults(results) {
+                try {
+                    // Update hand landmarks visualization
+                    if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+                        this.uiManager.updateHandLandmarks(results.multiHandLandmarks[0]);
                         
-                    case 'circle':
-                        const summary = `This email discusses ${email.subject.toLowerCase()}.`;
-                        this.uiManager.showActionFeedback(`📝 Summary: ${summary}`, 'summary');
-                        break;
-                }
-            }
-        }
-
-        // ----------------------------
-        // Initialize App
-        // ----------------------------
-        document.addEventListener('DOMContentLoaded', () => {
-            // Request camera access
-            const videoElement = document.getElementById('webcam');
-            
-            navigator.mediaDevices.getUserMedia({ video: true })
-                .then(stream => {
-                    videoElement.srcObject = stream;
-                })
-                .catch(err => {
-                    console.error("Error accessing camera:", err);
-                    alert("Camera access is required for this app to function properly.");
-                });
-            
-            // Initialize UI
-            const uiManager = new UIManager();
-            
-            // Initialize gesture detection
-            setTimeout(() => {
-                new GestureDetector(uiManager);
-            }, 1000); // Give time for UI to render
-        });
-    </script>
-</body>
-</html>
+                        // Update gesture path for debugging
+                        i