Update static/app.js

static/app.js

@@ -58,8 +58,15 @@ function drawFaceBoxes(faces) {
 }
 
 function updateDebugCrops(faces) {
-    if (!faces || faces.length === 0) return;
-    debugCrops.innerHTML = ''; // Clear for fresh frame
+    // Always clear previous crops
+    debugCrops.innerHTML = '';
+    
+    if (!faces || faces.length === 0) {
+        debugCrops.innerHTML = '<div class="text-xs text-slate-600 italic">Waiting for detection...</div>';
+        cropCount.textContent = '0 faces';
+        return;
+    }
+
     cropCount.textContent = `${faces.length} faces`;
 
     faces.forEach(face => {
@@ -69,7 +76,7 @@ function updateDebugCrops(faces) {
             
             const img = document.createElement('img');
             img.src = face.crop;
-            img.className = `w-16 h-16 rounded border-2 ${face.status === 'match' ? 'border-emerald-500' : 'border-slate-700'} object-cover`;
+            img.className = `w-16 h-16 rounded border-2 ${face.status === 'match' ? 'border-emerald-500' : (face.status === 'fail' ? 'border-amber-500' : 'border-slate-700')} object-cover`;
             
             const badge = document.createElement('div');
             badge.className = 'absolute bottom-0 left-0 right-0 bg-black/70 text-[8px] text-center py-0.5 truncate';
@@ -201,7 +208,8 @@ function processFrame() {
     if (ws && ws.readyState === WebSocket.OPEN && !isProcessing) {
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         isProcessing = true; 
-        ws.send(JSON.stringify({ type: 'frame', image: canvas.toDataURL('image/jpeg', 1.0) }));
+        // Lowered to 0.8 quality for network stability
+        ws.send(JSON.stringify({ type: 'frame', image: canvas.toDataURL('image/jpeg', 0.8) }));
     }
     requestAnimationFrame(processFrame);
 }