Update assets/js/script.js

assets/js/script.js

@@ -81,6 +81,15 @@ class DebugManager {
         this.cameraStatusEl = document.getElementById('debugCameraStatus');
         this.lastErrorEl = document.getElementById('debugLastError');
         this.statusIndicator = document.getElementById('statusIndicator');
+        
+        // Get debug toggle button
+        this.toggleButton = document.getElementById('debugToggle');
+        this.debugPanel = document.getElementById('debugPanel');
+        
+        // Add click event listener
+        this.toggleButton.addEventListener('click', () => {
+            this.toggleDebugPanel();
+        });
     }
     
     updateStatus(status) {
@@ -129,6 +138,16 @@ class DebugManager {
         this.updateStatus('Processing...');
         this.statusIndicator.className = 'status-indicator processing';
     }
+    
+    toggleDebugPanel() {
+        if (this.debugPanel.classList.contains('visible')) {
+            this.debugPanel.classList.remove('visible');
+            this.toggleButton.innerHTML = '⚙️';
+        } else {
+            this.debugPanel.classList.add('visible');
+            this.toggleButton.innerHTML = '⚙️';
+        }
+    }
 }
 
 // ----------------------------
@@ -594,12 +613,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const uiManager = new UIManager();
     debugManager.setReady();
     
-    // Check if MediaPipe is loaded
-    if (typeof Hands === 'undefined') {
-        debugManager.logError(new Error("MediaPipe Hands not loaded. Check your internet connection."));
-        return;
-    }
-    
     // Request camera access
     const videoElement = document.getElementById('webcam');