Optimize MJPEG stream and fix first-frame UX

LaserPerception/LaserPerception.js

@@ -950,12 +950,11 @@
             const streamUrl = `${state.hf.baseUrl}${data.stream_url}`;
             setStreamingMode(streamUrl);
 
-            // Switch to Engage Tab
-            $$(".tabbtn").forEach(b => b.classList.remove("active"));
-            $("[data-tab='engage']").classList.add("active");
-            $$(".tab").forEach(t => t.classList.remove("active"));
-            $("#tab-engage").classList.add("active");
-            // Trigger resize/render
+            // NOTE: Auto-switch removed to allow viewing First Frame on Tab 1
+            log("Live view available in 'Engage' tab.", "g");
+            setStatus("warn", "Live processing... View in Engage tab");
+
+            // Trigger resize/render (background setup)
             resizeOverlays();
             renderRadar();
             renderTrackCards();

app.py

@@ -517,28 +517,44 @@ async def detect_first_frame_depth(job_id: str):
 
 @app.get("/detect/stream/{job_id}")
 async def stream_video(job_id: str):
-    """MJPEG stream of the processing video."""
+    """MJPEG stream of the processing video (optimized)."""
     import queue
     
     async def stream_generator():
+        loop = asyncio.get_running_loop()
         while True:
-            # Check if stream exists
             q = get_stream(job_id)
             if not q:
-                # Job finished or not started
                 break
                 
             try:
-                # Non-blocking get
+                # Get latest frame (skipping updated ones if laggy?)
+                # Actually, standard queue get is fine if we consume fast enough.
+                # To be super real-time, we could drain the queue?
                 frame = q.get_nowait()
+                while not q.empty():
+                    try:
+                        frame = q.get_nowait()
+                    except queue.Empty:
+                        break
+                
+                # Resize if too big (e.g. > 640 width)
+                h, w = frame.shape[:2]
+                if w > 640:
+                    scale = 640 / w
+                    new_h = int(h * scale)
+                    frame = cv2.resize(frame, (640, new_h), interpolation=cv2.INTER_NEAREST)
+
+                # Encode in thread
+                # JPEG Quality = 50 (Balance between speed/size)
+                encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 50]
+                success, buffer = await loop.run_in_executor(None, cv2.imencode, '.jpg', frame, encode_param)
                 
-                # Encode 
-                success, buffer = cv2.imencode('.jpg', frame)
                 if success:
                     yield (b'--frame\r\n'
                            b'Content-Type: image/jpeg\r\n\r\n' + buffer.tobytes() + b'\r\n')
             except queue.Empty:
-                await asyncio.sleep(0.02) # Yield to event loop, ~50fps max poll
+                await asyncio.sleep(0.02)
             except Exception:
                 await asyncio.sleep(0.1)