fix: upgrade browser capture to 640x480, server encode to 85, and implement client-side TTS

isl_detection.py

@@ -842,7 +842,7 @@ def core_processing_engine(shared_state, shm_name=None, frame_lock_val=None, fra
                 # Send full 640×480 frame — browser displays at native resolution.
                 # Skeleton/overlay removed so JPEG compresses cleanly at quality 75.
                 _, buffer_img = cv2.imencode(
-                    ".jpg", frame, [cv2.IMWRITE_JPEG_QUALITY, 75])
+                    ".jpg", frame, [cv2.IMWRITE_JPEG_QUALITY, 85])
                 frame_base64 = base64.b64encode(buffer_img.tobytes()).decode("utf-8")
 
             # ── State packet ───────────────────────────────────────────────

templates/dashboard.html

@@ -959,7 +959,7 @@
         }
         try {
           cameraStream = await navigator.mediaDevices.getUserMedia({
-            video: { width: { ideal: 320 }, height: { ideal: 240 }, facingMode: 'user' },
+            video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: 'user' },
             audio: false
           });
           videoElement = document.createElement('video');
@@ -970,21 +970,21 @@
           videoElement.style.position = 'absolute';
           videoElement.style.top = '-10000px';
           videoElement.style.left = '-10000px';
-          videoElement.style.width = '320px';
-          videoElement.style.height = '240px';
+          videoElement.style.width = '640px';
+          videoElement.style.height = '480px';
           videoElement.style.pointerEvents = 'none';
           document.body.appendChild(videoElement);
 
           videoElement.addEventListener('loadeddata', () => {
-            captureCanvas.width  = 320;
-            captureCanvas.height = 240;
+            captureCanvas.width  = 640;
+            captureCanvas.height = 480;
             if (!window.cameraInterval) {
               window.cameraInterval = setInterval(() => {
                 // Skip if a frame is still being processed by server
                 if (_frameInFlight) return;
                 if (document.visibilityState === 'visible' && socket && socket.connected) {
-                  captureCtx.drawImage(videoElement, 0, 0, 320, 240);
-                  const frame = captureCanvas.toDataURL('image/jpeg', 0.5);
+                  captureCtx.drawImage(videoElement, 0, 0, 640, 480);
+                  const frame = captureCanvas.toDataURL('image/jpeg', 0.7);
                   _frameInFlight = true;
                   socket.emit('browser_frame', { frame: frame.split(',')[1] });
                   // Auto-release lock after 600ms even if no ack received
@@ -1160,7 +1160,16 @@
           const sentence = document.getElementById('cur-sentence').textContent.trim();
           const word = document.getElementById('cur-word').textContent.trim();
           const text = sentence || (word !== '—' ? word : '');
-          if (text && socket) socket.emit('command', { action: 'speak', text });
+          if (text) {
+            // Client-side Web Speech API Synthesis
+            if ('speechSynthesis' in window) {
+              window.speechSynthesis.cancel(); // Stop any currently speaking voice
+              const utterance = new SpeechSynthesisUtterance(text);
+              utterance.lang = 'en-US';
+              window.speechSynthesis.speak(utterance);
+            }
+            if (socket) socket.emit('command', { action: 'speak', text });
+          }
         } else {
           if (socket) socket.emit('command', { action });
         }