Replace merged files with working IntegrationTest versions

The merge created broken UI with duplicate sections and missing
closing braces. Replaced all L2CS-related files with the tested
versions from the original IntegrationTest Space deployment.

main.py

@@ -1,5 +1,3 @@
-from __future__ import annotations
-
 from fastapi import FastAPI, WebSocket, WebSocketDisconnect, HTTPException, Request
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse
@@ -16,7 +14,6 @@ import math
 import os
 from pathlib import Path
 from typing import Callable
-from contextlib import asynccontextmanager
 import asyncio
 import concurrent.futures
 import threading
@@ -136,38 +133,6 @@ def _draw_hud(frame, result, model_name):
     if result.get("is_yawning"):
         cv2.putText(frame, "YAWN", (10, 75), _FONT, 0.7, _ORANGE, 2, cv2.LINE_AA)
 
-
-def _draw_gaze_arrows(frame, result, lm, w, h):
-    """Draw eyes, irises, and iris-based gaze lines matching live_demo.py."""
-    if lm is None:
-        return
-    # Eye contours
-    left_pts = np.array([_lm_px(lm, i, w, h) for i in FaceMeshDetector.LEFT_EYE_INDICES], dtype=np.int32)
-    cv2.polylines(frame, [left_pts], True, _GREEN, 2, cv2.LINE_AA)
-    right_pts = np.array([_lm_px(lm, i, w, h) for i in FaceMeshDetector.RIGHT_EYE_INDICES], dtype=np.int32)
-    cv2.polylines(frame, [right_pts], True, _GREEN, 2, cv2.LINE_AA)
-    # EAR key points (yellow dots)
-    for indices in [_LEFT_EAR_POINTS, _RIGHT_EAR_POINTS]:
-        for idx in indices:
-            cv2.circle(frame, _lm_px(lm, idx, w, h), 3, (0, 255, 255), -1, cv2.LINE_AA)
-    # Irises + gaze direction lines
-    for iris_idx, eye_inner, eye_outer in [
-        (FaceMeshDetector.LEFT_IRIS_INDICES, 133, 33),
-        (FaceMeshDetector.RIGHT_IRIS_INDICES, 362, 263),
-    ]:
-        iris_pts = np.array([_lm_px(lm, i, w, h) for i in iris_idx], dtype=np.int32)
-        center = iris_pts[0]
-        if len(iris_pts) >= 5:
-            radii = [np.linalg.norm(iris_pts[j] - center) for j in range(1, 5)]
-            radius = max(int(np.mean(radii)), 2)
-            cv2.circle(frame, tuple(center), radius, _MAGENTA, 2, cv2.LINE_AA)
-            cv2.circle(frame, tuple(center), 2, _WHITE, -1, cv2.LINE_AA)
-        eye_cx = int((lm[eye_inner, 0] + lm[eye_outer, 0]) / 2.0 * w)
-        eye_cy = int((lm[eye_inner, 1] + lm[eye_outer, 1]) / 2.0 * h)
-        dx, dy = center[0] - eye_cx, center[1] - eye_cy
-        cv2.line(frame, tuple(center), (int(center[0] + dx * 3), int(center[1] + dy * 3)), _RED, 1, cv2.LINE_AA)
-
-
 # Landmark indices used for face mesh drawing on client (union of all groups).
 # Sending only these instead of all 478 saves ~60% of the landmarks payload.
 _MESH_INDICES = sorted(set(
@@ -186,57 +151,8 @@ _MESH_INDICES = sorted(set(
 # Build a lookup: original_index -> position in sparse array, so client can reconstruct.
 _MESH_INDEX_SET = set(_MESH_INDICES)
 
-@asynccontextmanager
-async def lifespan(app):
-    global _cached_model_name
-    print(" Starting Focus Guard API...")
-    await init_database()
-    async with aiosqlite.connect(db_path) as db:
-        cursor = await db.execute("SELECT model_name FROM user_settings WHERE id = 1")
-        row = await cursor.fetchone()
-        if row:
-            _cached_model_name = row[0]
-    print("[OK] Database initialized")
-    try:
-        pipelines["geometric"] = FaceMeshPipeline()
-        print("[OK] FaceMeshPipeline (geometric) loaded")
-    except Exception as e:
-        print(f"[WARN] FaceMeshPipeline unavailable: {e}")
-    try:
-        pipelines["mlp"] = MLPPipeline()
-        print("[OK] MLPPipeline loaded")
-    except Exception as e:
-        print(f"[ERR] Failed to load MLPPipeline: {e}")
-    try:
-        pipelines["hybrid"] = HybridFocusPipeline()
-        print("[OK] HybridFocusPipeline loaded")
-    except Exception as e:
-        print(f"[WARN] HybridFocusPipeline unavailable: {e}")
-    try:
-        pipelines["xgboost"] = XGBoostPipeline()
-        print("[OK] XGBoostPipeline loaded")
-    except Exception as e:
-        print(f"[ERR] Failed to load XGBoostPipeline: {e}")
-    if is_l2cs_weights_available():
-        print("[OK] L2CS weights found — pipeline will be lazy-loaded on first use")
-    else:
-        print("[WARN] L2CS weights not found — l2cs model unavailable")
-    resolved_model = _first_available_pipeline_name(_cached_model_name)
-    if resolved_model is not None and resolved_model != _cached_model_name:
-        _cached_model_name = resolved_model
-        async with aiosqlite.connect(db_path) as db:
-            await db.execute(
-                "UPDATE user_settings SET model_name = ? WHERE id = 1",
-                (_cached_model_name,),
-            )
-            await db.commit()
-    if resolved_model is not None:
-        print(f"[OK] Active model set to {resolved_model}")
-    yield
-    _inference_executor.shutdown(wait=False)
-    print(" Shutting down Focus Guard API...")
-
-app = FastAPI(title="Focus Guard API", lifespan=lifespan)
+# Initialize FastAPI app
+app = FastAPI(title="Focus Guard API")
 
 # Add CORS middleware
 app.add_middleware(
@@ -250,8 +166,8 @@ app.add_middleware(
 # Global variables
 db_path = "focus_guard.db"
 pcs = set()
-_cached_model_name = "mlp"
-_l2cs_boost_enabled = False
+_cached_model_name = "mlp"  # in-memory cache, updated via /api/settings
+_l2cs_boost_enabled = False  # when True, L2CS runs alongside the base model
 
 async def _wait_for_ice_gathering(pc: RTCPeerConnection):
     if pc.iceGatheringState == "complete":
@@ -357,37 +273,23 @@ class VideoTransformTrack(VideoStreamTrack):
 
         if do_infer:
             self.last_inference_time = now
-
+            
             model_name = _cached_model_name
             if model_name == "l2cs" and pipelines.get("l2cs") is None:
                 _ensure_l2cs()
             if model_name not in pipelines or pipelines.get(model_name) is None:
-                model_name = "mlp"
+                model_name = 'mlp'
             active_pipeline = pipelines.get(model_name)
 
             if active_pipeline is not None:
                 loop = asyncio.get_event_loop()
-                use_boost = (
-                    _l2cs_boost_enabled
-                    and model_name != "l2cs"
-                    and pipelines.get("l2cs") is not None
+                out = await loop.run_in_executor(
+                    _inference_executor,
+                    _process_frame_safe,
+                    active_pipeline,
+                    img,
+                    model_name,
                 )
-                if use_boost:
-                    out = await loop.run_in_executor(
-                        _inference_executor,
-                        _process_frame_with_l2cs_boost,
-                        active_pipeline,
-                        img,
-                        model_name,
-                    )
-                else:
-                    out = await loop.run_in_executor(
-                        _inference_executor,
-                        _process_frame_safe,
-                        active_pipeline,
-                        img,
-                        model_name,
-                    )
                 is_focused = out["is_focused"]
                 confidence = out.get("mlp_prob", out.get("raw_score", 0.0))
                 metadata = {"s_face": out.get("s_face", 0.0), "s_eye": out.get("s_eye", 0.0), "mar": out.get("mar", 0.0), "model": model_name}
@@ -395,10 +297,8 @@ class VideoTransformTrack(VideoStreamTrack):
                 # Draw face mesh + HUD on the video frame
                 h_f, w_f = img.shape[:2]
                 lm = out.get("landmarks")
-                if lm is not None and model_name != "l2cs":
+                if lm is not None:
                     _draw_face_mesh(img, lm, w_f, h_f)
-                if model_name == "l2cs" and lm is not None:
-                    _draw_gaze_arrows(img, out, lm, w_f, h_f)
                 _draw_hud(img, out, model_name)
             else:
                 is_focused = False
@@ -413,13 +313,7 @@ class VideoTransformTrack(VideoStreamTrack):
             channel = self.get_channel()
             if channel and channel.readyState == "open":
                 try:
-                    channel.send(json.dumps({
-                        "type": "detection",
-                        "focused": is_focused,
-                        "confidence": round(confidence, 3),
-                        "detections": [],
-                        "model": model_name,
-                    }))
+                    channel.send(json.dumps({"type": "detection", "focused": is_focused, "confidence": round(confidence, 3), "detections": detections}))
                 except Exception:
                     pass
 
@@ -611,15 +505,6 @@ def _process_frame_safe(pipeline, frame, model_name):
         return pipeline.process_frame(frame)
 
 
-def _first_available_pipeline_name(preferred: str | None = None) -> str | None:
-    if preferred and preferred in pipelines and pipelines.get(preferred) is not None:
-        return preferred
-    for name, pipeline in pipelines.items():
-        if pipeline is not None:
-            return name
-    return None
-
-
 _BOOST_BASE_W = 0.35
 _BOOST_L2CS_W = 0.65
 _BOOST_VETO = 0.38  # L2CS below this -> forced not-focused
@@ -995,10 +880,8 @@ async def websocket_endpoint(websocket: WebSocket):
                     "type": "detection",
                     "focused": is_focused,
                     "confidence": round(confidence, 3),
-                    "detections": [],
                     "model": model_name,
                     "fc": frame_count,
-                    "frame_count": frame_count,
                 }
                 if out is not None:
                     if out.get("yaw") is not None:
@@ -1029,14 +912,7 @@ async def websocket_endpoint(websocket: WebSocket):
 
                 if landmarks_list is not None:
                     resp["lm"] = landmarks_list
-                try:
-                    await websocket.send_json(resp)
-                except Exception as send_err:
-                    # Connection can close between loop ticks; end cleanly.
-                    if "Unexpected ASGI message 'websocket.send'" in str(send_err):
-                        running = False
-                        return
-                    raise
+                await websocket.send_json(resp)
                 frame_count += 1
             except Exception as e:
                 print(f"[WS] process error: {e}")
@@ -1172,7 +1048,6 @@ async def get_settings():
 
 @app.put("/api/settings")
 async def update_settings(settings: SettingsUpdate):
-    global _cached_model_name, _l2cs_boost_enabled
     async with aiosqlite.connect(db_path) as db:
         cursor = await db.execute("SELECT id FROM user_settings WHERE id = 1")
         exists = await cursor.fetchone()
@@ -1222,22 +1097,6 @@ async def update_settings(settings: SettingsUpdate):
             await db.commit()
         return {"status": "success", "updated": len(updates) > 0}
 
-@app.get("/api/stats/system")
-async def get_system_stats():
-    """Return server CPU and memory usage for UI display."""
-    try:
-        import psutil
-        cpu = psutil.cpu_percent(interval=0.1)
-        mem = psutil.virtual_memory()
-        return {
-            "cpu_percent": round(cpu, 1),
-            "memory_percent": round(mem.percent, 1),
-            "memory_used_mb": round(mem.used / (1024 * 1024), 0),
-            "memory_total_mb": round(mem.total / (1024 * 1024), 0),
-        }
-    except ImportError:
-        return {"cpu_percent": None, "memory_percent": None, "memory_used_mb": None, "memory_total_mb": None}
-
 @app.get("/api/stats/summary")
 async def get_stats_summary():
     async with aiosqlite.connect(db_path) as db:
@@ -1265,14 +1124,6 @@ async def get_stats_summary():
             'streak_days': streak_days
         }
 
-@app.get("/api/l2cs/status")
-async def get_l2cs_status():
-    return {
-        "weights_available": is_l2cs_weights_available(),
-        "loaded": pipelines.get("l2cs") is not None,
-        "error": _l2cs_error,
-    }
-
 @app.get("/api/models")
 async def get_available_models():
     """Return model names, statuses, and which is currently active."""
@@ -1337,13 +1188,9 @@ async def health_check():
 
 # ================ STATIC FILES (SPA SUPPORT) ================
 
-# Resolve frontend dir from this file so it works regardless of cwd.
-# Prefer a built `dist/` app when present, otherwise fall back to `static/`.
-_BASE_DIR = Path(__file__).resolve().parent
-_DIST_DIR = _BASE_DIR / "dist"
-_STATIC_DIR = _BASE_DIR / "static"
-_FRONTEND_DIR = _DIST_DIR if (_DIST_DIR / "index.html").is_file() else _STATIC_DIR
-_ASSETS_DIR = _FRONTEND_DIR / "assets"
+# Resolve static dir from this file so it works regardless of cwd
+_STATIC_DIR = Path(__file__).resolve().parent / "static"
+_ASSETS_DIR = _STATIC_DIR / "assets"
 
 # 1. Mount the assets folder (JS/CSS) first so /assets/* is never caught by catch-all
 if _ASSETS_DIR.is_dir():
@@ -1358,11 +1205,7 @@ async def serve_react_app(full_path: str, request: Request):
     if full_path.startswith("assets") or full_path.startswith("assets/"):
         raise HTTPException(status_code=404, detail="Not Found")
 
-    file_path = _FRONTEND_DIR / full_path
-    if full_path and file_path.is_file():
-        return FileResponse(str(file_path))
-
-    index_path = _FRONTEND_DIR / "index.html"
+    index_path = _STATIC_DIR / "index.html"
     if index_path.is_file():
         return FileResponse(str(index_path))
-    return {"message": "React app not found. Please run 'npm run build' and copy dist to static if needed."}
+    return {"message": "React app not found. Please run 'npm run build' and copy dist to static."}

src/components/FocusPageLocal.jsx

@@ -1,138 +1,42 @@
 import React, { useState, useEffect, useRef } from 'react';
 import CalibrationOverlay from './CalibrationOverlay';
 
-const FLOW_STEPS = {
-  intro: 'intro',
-  permission: 'permission',
-  ready: 'ready'
-};
-
-const FOCUS_STATES = {
-  pending: 'pending',
-  focused: 'focused',
-  notFocused: 'not-focused'
-};
-
-function HelloIcon() {
-  return (
-    <svg width="96" height="96" viewBox="0 0 96 96" aria-hidden="true">
-      <circle cx="48" cy="48" r="40" fill="#007BFF" />
-      <path d="M30 38c0-4 2.7-7 6-7s6 3 6 7" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" />
-      <path d="M54 38c0-4 2.7-7 6-7s6 3 6 7" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" />
-      <path d="M30 52c3 11 10 17 18 17s15-6 18-17" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-function CameraIcon() {
-  return (
-    <svg width="110" height="110" viewBox="0 0 110 110" aria-hidden="true">
-      <rect x="30" y="36" width="50" height="34" rx="5" fill="none" stroke="#007BFF" strokeWidth="6" />
-      <path d="M24 72h62c0 9-7 16-16 16H40c-9 0-16-7-16-16Z" fill="none" stroke="#007BFF" strokeWidth="6" />
-      <path d="M55 28v8" stroke="#007BFF" strokeWidth="6" strokeLinecap="round" />
-      <circle cx="55" cy="36" r="14" fill="none" stroke="#007BFF" strokeWidth="6" />
-      <circle cx="55" cy="36" r="4" fill="#007BFF" />
-      <path d="M46 83h18" stroke="#007BFF" strokeWidth="6" strokeLinecap="round" />
-    </svg>
-  );
-}
-
-function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActive, role }) {
+function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActive }) {
   const [currentFrame, setCurrentFrame] = useState(15);
   const [timelineEvents, setTimelineEvents] = useState([]);
   const [stats, setStats] = useState(null);
-  const [systemStats, setSystemStats] = useState(null);
   const [availableModels, setAvailableModels] = useState([]);
   const [currentModel, setCurrentModel] = useState('mlp');
-  const [flowStep, setFlowStep] = useState(FLOW_STEPS.intro);
-  const [cameraReady, setCameraReady] = useState(false);
-  const [isStarting, setIsStarting] = useState(false);
-  const [focusState, setFocusState] = useState(FOCUS_STATES.pending);
-  const [cameraError, setCameraError] = useState('');
   const [calibration, setCalibration] = useState(null);
   const [l2csBoost, setL2csBoost] = useState(false);
   const [l2csBoostAvailable, setL2csBoostAvailable] = useState(false);
 
   const localVideoRef = useRef(null);
   const displayCanvasRef = useRef(null);
-  const pipVideoRef = useRef(null);
+  const pipVideoRef = useRef(null); // 用于 PiP 的隐藏 video 元素
   const pipStreamRef = useRef(null);
-  const previewFrameRef = useRef(null);
 
+  // 辅助函数：格式化时间
   const formatDuration = (seconds) => {
-    if (seconds === 0) return '0s';
+    if (seconds === 0) return "0s";
     const mins = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);
     return `${mins}m ${secs}s`;
   };
-  
-  const stopPreviewLoop = () => {
-    if (previewFrameRef.current) {
-      cancelAnimationFrame(previewFrameRef.current);
-      previewFrameRef.current = null;
-    }
-  };
-
-  const startPreviewLoop = () => {
-    stopPreviewLoop();
-    const renderPreview = () => {
-      const canvas = displayCanvasRef.current;
-      const video = localVideoRef.current;
-
-      if (!canvas || !video || !cameraReady || videoManager?.isStreaming) {
-        previewFrameRef.current = null;
-        return;
-      }
-
-      if (video.readyState >= 2) {
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      }
-
-      previewFrameRef.current = requestAnimationFrame(renderPreview);
-    };
-
-    previewFrameRef.current = requestAnimationFrame(renderPreview);
-  };
-
-  const getErrorMessage = (err) => {
-    if (err?.name === 'NotAllowedError') {
-      return 'Camera permission denied. Please allow camera access.';
-    }
-    if (err?.name === 'NotFoundError') {
-      return 'No camera found. Please connect a camera.';
-    }
-    if (err?.name === 'NotReadableError') {
-      return 'Camera is already in use by another application.';
-    }
-    if (err?.target?.url) {
-      return `WebSocket connection failed: ${err.target.url}. Check that the backend server is running.`;
-    }
-    return err?.message || 'Failed to start focus session.';
-  };
 
   useEffect(() => {
     if (!videoManager) return;
 
     const originalOnStatusUpdate = videoManager.callbacks.onStatusUpdate;
-    const originalOnSessionEnd = videoManager.callbacks.onSessionEnd;
-
     videoManager.callbacks.onStatusUpdate = (isFocused) => {
-      setTimelineEvents((prev) => {
+      setTimelineEvents(prev => {
         const newEvents = [...prev, { isFocused, timestamp: Date.now() }];
         if (newEvents.length > 60) newEvents.shift();
         return newEvents;
       });
-      setFocusState(isFocused ? FOCUS_STATES.focused : FOCUS_STATES.notFocused);
       if (originalOnStatusUpdate) originalOnStatusUpdate(isFocused);
     };
 
-    videoManager.callbacks.onSessionEnd = (summary) => {
-      setFocusState(FOCUS_STATES.pending);
-      setCameraReady(false);
-      if (originalOnSessionEnd) originalOnSessionEnd(summary);
-    };
-
     videoManager.callbacks.onCalibrationUpdate = (cal) => {
       setCalibration(cal && cal.active ? { ...cal } : null);
     };
@@ -155,55 +59,14 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
   // Fetch available models on mount
   useEffect(() => {
     fetch('/api/models')
-      .then((res) => res.json())
-      .then((data) => {
+      .then(res => res.json())
+      .then(data => {
         if (data.available) setAvailableModels(data.available);
         if (data.current) setCurrentModel(data.current);
         if (data.l2cs_boost !== undefined) setL2csBoost(data.l2cs_boost);
         if (data.l2cs_boost_available !== undefined) setL2csBoostAvailable(data.l2cs_boost_available);
       })
-      .catch((err) => console.error('Failed to fetch models:', err));
-  }, []);
-
-  useEffect(() => {
-    if (flowStep === FLOW_STEPS.ready && cameraReady && !videoManager?.isStreaming) {
-      startPreviewLoop();
-      return;
-    }
-    stopPreviewLoop();
-  }, [cameraReady, flowStep, videoManager?.isStreaming]);
-
-  useEffect(() => {
-    if (!isActive) {
-      stopPreviewLoop();
-    }
-  }, [isActive]);
-
-  useEffect(() => {
-    return () => {
-      stopPreviewLoop();
-      if (pipVideoRef.current) {
-        pipVideoRef.current.pause();
-        pipVideoRef.current.srcObject = null;
-      }
-      if (pipStreamRef.current) {
-        pipStreamRef.current.getTracks().forEach((t) => t.stop());
-        pipStreamRef.current = null;
-      }
-    };
-  }, []);
-
-  // Poll server CPU/memory for UI
-  useEffect(() => {
-    const fetchSystem = () => {
-      fetch('/api/stats/system')
-        .then(res => res.json())
-        .then(data => setSystemStats(data))
-        .catch(() => setSystemStats(null));
-    };
-    fetchSystem();
-    const interval = setInterval(fetchSystem, 3000);
-    return () => clearInterval(interval);
+      .catch(err => console.error('Failed to fetch models:', err));
   }, []);
 
   const handleModelChange = async (modelName) => {
@@ -224,22 +87,6 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
     }
   };
 
-  const handleEnableCamera = async () => {
-    if (!videoManager) return;
-
-    try {
-      setCameraError('');
-      await videoManager.initCamera(localVideoRef.current, displayCanvasRef.current);
-      setCameraReady(true);
-      setFlowStep(FLOW_STEPS.ready);
-      setFocusState(FOCUS_STATES.pending);
-    } catch (err) {
-      const errorMessage = getErrorMessage(err);
-      setCameraError(errorMessage);
-      console.error('Camera init error:', err);
-    }
-  };
-
   const handleBoostToggle = async () => {
     const next = !l2csBoost;
     try {
@@ -256,33 +103,39 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
 
   const handleStart = async () => {
     try {
-      setIsStarting(true);
-      setSessionResult(null);
-      setTimelineEvents([]);
-      setFocusState(FOCUS_STATES.pending);
-      setCameraError('');
+      if (videoManager) {
+        setSessionResult(null);
+        setTimelineEvents([]);
 
-      if (!cameraReady) {
+        console.log('Initializing local camera...');
         await videoManager.initCamera(localVideoRef.current, displayCanvasRef.current);
-        setCameraReady(true);
-        setFlowStep(FLOW_STEPS.ready);
-      }
+        console.log('Camera initialized');
 
-      await videoManager.startStreaming();
+        console.log('Starting local streaming...');
+        await videoManager.startStreaming();
+        console.log('Streaming started successfully');
+      }
     } catch (err) {
-      const errorMessage = getErrorMessage(err);
-      setCameraError(errorMessage);
-      setFocusState(FOCUS_STATES.pending);
       console.error('Start error:', err);
-      alert(`Failed to start: ${errorMessage}\n\nCheck browser console for details.`);
-    } finally {
-      setIsStarting(false);
+      let errorMessage = "Failed to start: ";
+
+      if (err.name === 'NotAllowedError') {
+        errorMessage += "Camera permission denied. Please allow camera access.";
+      } else if (err.name === 'NotFoundError') {
+        errorMessage += "No camera found. Please connect a camera.";
+      } else if (err.name === 'NotReadableError') {
+        errorMessage += "Camera is already in use by another application.";
+      } else {
+        errorMessage += err.message || "Unknown error occurred.";
+      }
+
+      alert(errorMessage + "\n\nCheck browser console for details.");
     }
   };
 
   const handleStop = async () => {
     if (videoManager) {
-      await videoManager.stopStreaming();
+      videoManager.stopStreaming();
     }
     try {
       if (document.pictureInPictureElement === pipVideoRef.current) {
@@ -294,17 +147,14 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
       pipVideoRef.current.srcObject = null;
     }
     if (pipStreamRef.current) {
-      pipStreamRef.current.getTracks().forEach((t) => t.stop());
+      pipStreamRef.current.getTracks().forEach(t => t.stop());
       pipStreamRef.current = null;
     }
-    stopPreviewLoop();
-    setFocusState(FOCUS_STATES.pending);
-    setCameraReady(false);
   };
 
   const handlePiP = async () => {
     try {
-      //
+      // 检查是否有视频管理器和是否在运行
       if (!videoManager || !videoManager.isStreaming) {
         alert('Please start the video first.');
         return;
@@ -315,20 +165,20 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
         return;
       }
 
-      //
+      // 如果已经在 PiP 模式，且是本视频，退出
       if (document.pictureInPictureElement === pipVideoRef.current) {
         await document.exitPictureInPicture();
         console.log('PiP exited');
         return;
       }
 
-      //
+      // 检查浏览器支持
       if (!document.pictureInPictureEnabled) {
         alert('Picture-in-Picture is not supported in this browser.');
         return;
       }
 
-      //
+      // 创建或获取 PiP video 元素
       const pipVideo = pipVideoRef.current;
       if (!pipVideo) {
         alert('PiP video element not ready.');
@@ -337,7 +187,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
 
       const isSafariPiP = typeof pipVideo.webkitSetPresentationMode === 'function';
 
-      //
+      // 优先用画布流（带检测框），失败再回退到摄像头流
       let stream = pipStreamRef.current;
       if (!stream) {
         const capture = displayCanvasRef.current.captureStream;
@@ -355,7 +205,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
         pipStreamRef.current = stream;
       }
 
-      //
+      // 确保流有轨道
       if (!stream || stream.getTracks().length === 0) {
         alert('Failed to capture video stream from canvas.');
         return;
@@ -363,7 +213,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
 
       pipVideo.srcObject = stream;
 
-      //
+      // 播放视频（Safari 可能不会触发 onloadedmetadata）
       if (pipVideo.readyState < 2) {
         await new Promise((resolve) => {
           const onReady = () => {
@@ -373,23 +223,25 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
           };
           pipVideo.addEventListener('loadeddata', onReady);
           pipVideo.addEventListener('canplay', onReady);
-          //
+          // 兜底：短延迟后继续尝试
           setTimeout(resolve, 600);
         });
       }
 
       try {
         await pipVideo.play();
-      } catch (_) {}
+      } catch (_) {
+        // Safari 可能拒绝自动播放，但仍可进入 PiP
+      }
 
-      //
+      // Safari 支持（优先）
       if (isSafariPiP) {
         try {
           pipVideo.webkitSetPresentationMode('picture-in-picture');
           console.log('PiP activated (Safari)');
           return;
         } catch (e) {
-          //
+          // 如果画布流失败，回退到摄像头流再试一次
           const cameraStream = localVideoRef.current?.srcObject;
           if (cameraStream && cameraStream !== pipVideo.srcObject) {
             pipVideo.srcObject = cameraStream;
@@ -404,7 +256,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
         }
       }
 
-      //
+      // 标准 API
       if (typeof pipVideo.requestPictureInPicture === 'function') {
         await pipVideo.requestPictureInPicture();
         console.log('PiP activated');
@@ -414,7 +266,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
 
     } catch (err) {
       console.error('PiP error:', err);
-      alert(`Failed to enter Picture-in-Picture: ${err.message}`);
+      alert('Failed to enter Picture-in-Picture: ' + err.message);
     }
   };
 
@@ -423,7 +275,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
   };
 
   const handleFrameChange = (val) => {
-    const rate = parseInt(val, 10);
+    const rate = parseInt(val);
     setCurrentFrame(rate);
     if (videoManager) {
       videoManager.setFrameRate(rate);
@@ -436,7 +288,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
       return;
     }
 
-    //
+    // 获取当前统计数据
     const currentStats = videoManager.getStats();
 
     if (!currentStats.sessionId) {
@@ -444,15 +296,15 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
       return;
     }
 
-    //
+    // 计算当前持续时间（从 session 开始到现在）
     const sessionDuration = Math.floor((Date.now() - (videoManager.sessionStartTime || Date.now())) / 1000);
 
-    //
+    // 计算当前专注分数
     const focusScore = currentStats.framesProcessed > 0
       ? (currentStats.framesProcessed * (currentStats.currentStatus ? 1 : 0)) / currentStats.framesProcessed
       : 0;
 
-    //
+    // 显示当前实时数据
     setSessionResult({
       duration_seconds: sessionDuration,
       focus_score: focusScore,
@@ -476,142 +328,24 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
         pointerEvents: 'none'
       };
 
-  const focusStateLabel = {
-    [FOCUS_STATES.pending]: 'Pending',
-    [FOCUS_STATES.focused]: 'Focused',
-    [FOCUS_STATES.notFocused]: 'Not Focused'
-  }[focusState];
-
-  const introHighlights = [
-    {
-      title: 'Live focus tracking',
-      text: 'Head pose, gaze, and eye openness are read continuously during the session.'
-    },
-    {
-      title: 'Quick setup',
-      text: 'Front-facing light and a stable camera angle give the cleanest preview.'
-    },
-    {
-      title: 'Private by default',
-      text: 'Only session metadata is stored, not the raw camera footage.'
-    }
-  ];
-
-  const permissionSteps = [
-    {
-      title: 'Allow browser access',
-      text: 'Approve the camera prompt so the preview can appear immediately.'
-    },
-    {
-      title: 'Check your framing',
-      text: 'Keep your face visible and centered for more stable landmark detection.'
-    },
-    {
-      title: 'Start when ready',
-      text: 'After the preview appears, use the page controls to begin or stop.'
-    }
-  ];
-
-  const renderIntroCard = () => {
-    if (flowStep === FLOW_STEPS.intro) {
-      return (
-        <div className="focus-flow-overlay">
-          <div className="focus-flow-card">
-            <div className="focus-flow-header">
-              <div>
-                <div className="focus-flow-eyebrow">Focus Session</div>
-                <h2>Before you begin</h2>
-              </div>
-              <div className="focus-flow-icon">
-                <HelloIcon />
-              </div>
-            </div>
-
-            <p className="focus-flow-lead">
-              The focus page uses your live camera preview to estimate attention in real time.
-              Review the setup notes below, then continue to camera access.
-            </p>
-
-            <div className="focus-flow-grid">
-              {introHighlights.map((item) => (
-                <article key={item.title} className="focus-flow-panel">
-                  <h3>{item.title}</h3>
-                  <p>{item.text}</p>
-                </article>
-              ))}
-            </div>
-
-            <div className="focus-flow-footer">
-              <div className="focus-flow-note">
-                You can still change frame rate and available model options after the preview loads.
-              </div>
-              <button className="focus-flow-button" onClick={() => setFlowStep(FLOW_STEPS.permission)}>
-                Continue
-              </button>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    if (flowStep === FLOW_STEPS.permission && !cameraReady) {
-      return (
-        <div className="focus-flow-overlay">
-          <div className="focus-flow-card">
-            <div className="focus-flow-header">
-              <div>
-                <div className="focus-flow-eyebrow">Camera Setup</div>
-                <h2>Enable camera access</h2>
-              </div>
-              <div className="focus-flow-icon">
-                <CameraIcon />
-              </div>
-            </div>
-
-            <p className="focus-flow-lead">
-              Once access is granted, your preview appears here and the rest of the Focus page
-              behaves like the other dashboard screens.
-            </p>
-
-            <div className="focus-flow-steps">
-              {permissionSteps.map((item, index) => (
-                <div key={item.title} className="focus-flow-step">
-                  <div className="focus-flow-step-number">{index + 1}</div>
-                  <div className="focus-flow-step-copy">
-                    <h3>{item.title}</h3>
-                    <p>{item.text}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            {cameraError ? <div className="focus-inline-error">{cameraError}</div> : null}
-
-            <div className="focus-flow-footer">
-              <button
-                type="button"
-                className="focus-flow-secondary"
-                onClick={() => setFlowStep(FLOW_STEPS.intro)}
-              >
-                Back
-              </button>
-              <button className="focus-flow-button" onClick={handleEnableCamera}>
-                Enable Camera
-              </button>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return null;
-  };
+  useEffect(() => {
+    return () => {
+      if (pipVideoRef.current) {
+        pipVideoRef.current.pause();
+        pipVideoRef.current.srcObject = null;
+      }
+      if (pipStreamRef.current) {
+        pipStreamRef.current.getTracks().forEach(t => t.stop());
+        pipStreamRef.current = null;
+      }
+    };
+  }, []);
 
   return (
     <main id="page-b" className="page" style={pageStyle}>
-      {renderIntroCard()}
-
-      <section id="display-area" className="focus-display-shell">
+      {/* 1. Camera / Display Area */}
+      <section id="display-area" style={{ position: 'relative', overflow: 'hidden' }}>
+        {/* 用于 PiP 的隐藏 video 元素（保持在 DOM 以提高兼容性） */}
         <video
           ref={pipVideoRef}
           muted
@@ -625,7 +359,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
             pointerEvents: 'none'
           }}
         />
-        {/* local video (hidden, for capture) */}
+        {/* 本地视频流（隐藏，仅用于截图） */}
         <video
           ref={localVideoRef}
           muted
@@ -634,7 +368,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
           style={{ display: 'none' }}
         />
 
-        {/* processed video (canvas) */}
+        {/* 显示处理后的视频（使用 Canvas） */}
         <canvas
           ref={displayCanvasRef}
           width={640}
@@ -643,25 +377,11 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
             width: '100%',
             height: '100%',
             objectFit: 'contain',
-            backgroundColor: '#101010'
+            backgroundColor: '#000'
           }}
         />
 
-        {flowStep === FLOW_STEPS.ready ? (
-          <>
-            <div className={`focus-state-pill ${focusState}`}>
-              <span className="focus-state-dot" />
-              {focusStateLabel}
-            </div>
-            {!cameraReady && !videoManager?.isStreaming ? (
-              <div className="focus-idle-overlay">
-                <p>Camera is paused.</p>
-                <span>Use Start to enable the camera and begin detection.</span>
-              </div>
-            ) : null}
-          </>
-        ) : null}
-
+        {/* 结果覆盖层 */}
         {sessionResult && (
           <div className="session-result-overlay">
             <h3>Session Complete!</h3>
@@ -691,41 +411,42 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
           </div>
         )}
 
-        {role === 'admin' && stats && stats.isStreaming ? (
-          <div className="focus-debug-panel">
+        {/* 性能统计显示（开发模式） */}
+        {stats && stats.isStreaming && (
+          <div style={{
+            position: 'absolute',
+            top: '10px',
+            right: '10px',
+            background: 'rgba(0,0,0,0.7)',
+            color: 'white',
+            padding: '10px',
+            borderRadius: '5px',
+            fontSize: '12px',
+            fontFamily: 'monospace'
+          }}>
             <div>Session: {stats.sessionId}</div>
             <div>Sent: {stats.framesSent}</div>
             <div>Processed: {stats.framesProcessed}</div>
             <div>Latency: {stats.avgLatency.toFixed(0)}ms</div>
             <div>Status: {stats.currentStatus ? 'Focused' : 'Not Focused'}</div>
             <div>Confidence: {(stats.lastConfidence * 100).toFixed(1)}%</div>
-            {systemStats && systemStats.cpu_percent != null && (
-              <div style={{ marginTop: '6px', borderTop: '1px solid #444', paddingTop: '4px' }}>
-                <div>CPU: {systemStats.cpu_percent}%</div>
-                <div>RAM: {systemStats.memory_percent}% ({systemStats.memory_used_mb}/{systemStats.memory_total_mb} MB)</div>
-              </div>
-            )}
           </div>
-        ) : null}
+        )}
       </section>
 
-      {/* Server CPU / Memory (always visible) */}
-      {systemStats && (systemStats.cpu_percent != null || systemStats.memory_percent != null) && (
+      {/* 2. Model Selector */}
+      {availableModels.length > 0 && (
         <section style={{
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          gap: '16px',
-          padding: '6px 12px',
-          background: 'rgba(0,0,0,0.3)',
+          gap: '8px',
+          padding: '8px 16px',
+          background: '#1a1a2e',
           borderRadius: '8px',
-          margin: '6px auto',
-          maxWidth: '400px',
-          fontSize: '13px',
-          color: '#aaa'
+          margin: '8px auto',
+          maxWidth: '600px'
         }}>
-          <span title="Server CPU">CPU: <strong style={{ color: '#8f8' }}>{systemStats.cpu_percent}%</strong></span>
-          <span title="Server memory">RAM: <strong style={{ color: '#8af' }}>{systemStats.memory_percent}%</strong> ({systemStats.memory_used_mb}/{systemStats.memory_total_mb} MB)</span>
           <span style={{ color: '#aaa', fontSize: '13px', marginRight: '4px' }}>Model:</span>
           {availableModels.map(name => (
             <button
@@ -788,93 +509,73 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
         </section>
       )}
 
-      {flowStep === FLOW_STEPS.ready ? (
-        <>
-          {availableModels.length > 0 ? (
-            <section className="focus-model-strip">
-              <span className="focus-model-label">Model:</span>
-              {availableModels.map((name) => (
-                <button
-                  key={name}
-                  onClick={() => handleModelChange(name)}
-                  className={`focus-model-button ${currentModel === name ? 'active' : ''}`}
-                >
-                  {name}
-                </button>
-              ))}
-            </section>
-          ) : null}
-
-          <section id="timeline-area">
-            <div className="timeline-label">Timeline</div>
-            <div id="timeline-visuals">
-              {timelineEvents.map((event, index) => (
-                <div
-                  key={index}
-                  className="timeline-block"
-                  style={{
-                    backgroundColor: event.isFocused ? '#00FF00' : '#FF0000',
-                    width: '10px',
-                    height: '20px',
-                    display: 'inline-block',
-                    marginRight: '2px',
-                    borderRadius: '2px'
-                  }}
-                  title={event.isFocused ? 'Focused' : 'Distracted'}
-                />
-              ))}
-            </div>
-            <div id="timeline-line" />
-          </section>
-
-          <section id="control-panel">
-            <button id="btn-cam-start" className="action-btn green" onClick={handleStart} disabled={isStarting}>
-              {isStarting ? 'Starting...' : 'Start'}
-            </button>
-
-            <button id="btn-floating" className="action-btn yellow" onClick={handlePiP}>
-              Floating Window
-            </button>
-            <button
-              id="btn-preview"
-              className="action-btn"
-              style={{ backgroundColor: '#ff7a52' }}
-              onClick={handlePreview}
-            >
-              Preview Result
-            </button>
+      {/* 3. Timeline Area */}
+      <section id="timeline-area">
+        <div className="timeline-label">Timeline</div>
+        <div id="timeline-visuals">
+          {timelineEvents.map((event, index) => (
+            <div
+              key={index}
+              className="timeline-block"
+              style={{
+                backgroundColor: event.isFocused ? '#00FF00' : '#FF0000',
+                width: '10px',
+                height: '20px',
+                display: 'inline-block',
+                marginRight: '2px',
+                borderRadius: '2px'
+              }}
+              title={event.isFocused ? 'Focused' : 'Distracted'}
+            />
+          ))}
+        </div>
+        <div id="timeline-line"></div>
+      </section>
 
+      {/* 4. Control Buttons */}
+      <section id="control-panel">
+        <button id="btn-cam-start" className="action-btn green" onClick={handleStart}>
+          Start
+        </button>
+
+        <button id="btn-floating" className="action-btn yellow" onClick={handleFloatingWindow}>
+          Floating Window
+        </button>
+
+        <button
+          id="btn-preview"
+          className="action-btn"
+          style={{ backgroundColor: '#6c5ce7' }}
+          onClick={handlePreview}
+        >
+          Preview Result
+        </button>
+
+        <button id="btn-cam-stop" className="action-btn red" onClick={handleStop}>
+          Stop
+        </button>
+      </section>
 
-            <button id="btn-cam-stop" className="action-btn red" onClick={handleStop}>
-              Stop
-            </button>
-          </section>
-
-          {cameraError ? (
-            <div className="focus-inline-error focus-inline-error-standalone">{cameraError}</div>
-          ) : null}
-
-          <section id="frame-control">
-            <label htmlFor="frame-slider">Frame Rate (FPS)</label>
-            <input
-              type="range"
-              id="frame-slider"
-              min="10"
-              max="30"
-              value={currentFrame}
-              onChange={(e) => handleFrameChange(e.target.value)}
-            />
-            <input
-              type="number"
-              id="frame-input"
-              min="10"
-              max="30"
-              value={currentFrame}
-              onChange={(e) => handleFrameChange(e.target.value)}
-            />
-          </section>
-        </>
-      ) : null}
+      {/* 5. Frame Control */}
+      <section id="frame-control">
+        <label htmlFor="frame-slider">Frame Rate (FPS)</label>
+        <input
+          type="range"
+          id="frame-slider"
+          min="10"
+          max="30"
+          value={currentFrame}
+          onChange={(e) => handleFrameChange(e.target.value)}
+        />
+        <input
+          type="number"
+          id="frame-input"
+          min="10"
+          max="30"
+          value={currentFrame}
+          onChange={(e) => handleFrameChange(e.target.value)}
+        />
+      </section>
 
       {/* Calibration overlay (fixed fullscreen, must be outside overflow:hidden containers) */}
       <CalibrationOverlay calibration={calibration} videoManager={videoManager} />

src/utils/VideoManagerLocal.js

@@ -1,12 +1,12 @@
 // src/utils/VideoManagerLocal.js
-// Local video processing implementation using WebSocket + Canvas, without WebRTC.
+// 本地视频处理版本 - 使用 WebSocket + Canvas，不依赖 WebRTC
 
 export class VideoManagerLocal {
     constructor(callbacks) {
         this.callbacks = callbacks || {};
 
-        this.localVideoElement = null;  // Local camera preview element.
-        this.displayVideoElement = null; // Processed output display element.
+        this.localVideoElement = null;  // 显示本地摄像头
+        this.displayVideoElement = null; // 显示处理后的视频
         this.canvas = null;
         this.stream = null;
         this.ws = null;
@@ -14,16 +14,15 @@ export class VideoManagerLocal {
         this.isStreaming = false;
         this.sessionId = null;
         this.sessionStartTime = null;
-        this.frameRate = 15; // Lower FPS reduces transfer and processing load.
+        this.frameRate = 15; // 降低帧率以减少网络负载
         this.captureInterval = null;
-        this.reconnectTimeout = null;
 
-        // Status smoothing
+        // 状态平滑处理
         this.currentStatus = false;
         this.statusBuffer = [];
         this.bufferSize = 3;
 
-        // Detection data
+        // 检测数据
         this.latestDetectionData = null;
         this.lastConfidence = 0;
 
@@ -33,7 +32,7 @@ export class VideoManagerLocal {
         // Continuous render loop
         this._animFrameId = null;
 
-        // Notification state
+        // 通知系统
         this.notificationEnabled = true;
         this.notificationThreshold = 30;
         this.unfocusedStartTime = null;
@@ -51,27 +50,16 @@ export class VideoManagerLocal {
             success: false,
         };
 
-        // Performance metrics
+        // 性能统计
         this.stats = {
             framesSent: 0,
             framesProcessed: 0,
             avgLatency: 0,
             lastLatencies: []
         };
-
-        // Calibration state (9-point gaze calibration)
-        this.calibrationState = {
-            active: false,
-            collecting: false,
-            done: false,
-            success: false,
-            target: [0.5, 0.5],
-            index: 0,
-            numPoints: 9
-        };
     }
 
-    // Initialize the camera
+    // 初始化摄像头
     async initCamera(localVideoRef, displayCanvasRef) {
         try {
             console.log('Initializing local camera...');
@@ -88,13 +76,13 @@ export class VideoManagerLocal {
             this.localVideoElement = localVideoRef;
             this.displayCanvas = displayCanvasRef;
 
-            // Show the local camera stream
+            // 显示本地视频流
             if (this.localVideoElement) {
                 this.localVideoElement.srcObject = this.stream;
                 this.localVideoElement.play();
             }
 
-            // Capture at 640x480 for L2CS / gaze (matches HF commit 2eba0cc).
+            // 创建用于截图的 canvas (smaller for faster encode + transfer)
             this.canvas = document.createElement('canvas');
             this.canvas.width = 640;
             this.canvas.height = 480;
@@ -107,7 +95,7 @@ export class VideoManagerLocal {
         }
     }
 
-    // Start streaming
+    // 开始流式处理
     async startStreaming() {
         if (!this.stream) {
             throw new Error('Camera not initialized');
@@ -121,64 +109,35 @@ export class VideoManagerLocal {
         console.log('Starting WebSocket streaming...');
         this.isStreaming = true;
 
-        try {
-            // Fetch tessellation topology (once)
-            if (!this._tessellation) {
-                try {
-                    const res = await fetch('/api/mesh-topology');
-                    const data = await res.json();
-                    this._tessellation = data.tessellation; // [[start, end], ...]
-                } catch (e) {
-                    console.warn('Failed to fetch mesh topology:', e);
-                }
+        // Fetch tessellation topology (once)
+        if (!this._tessellation) {
+            try {
+                const res = await fetch('/api/mesh-topology');
+                const data = await res.json();
+                this._tessellation = data.tessellation; // [[start, end], ...]
+            } catch (e) {
+                console.warn('Failed to fetch mesh topology:', e);
             }
+        }
 
-            // Request notification permission
-            await this.requestNotificationPermission();
-            await this.loadNotificationSettings();
-
-            // Open the WebSocket connection
-            await this.connectWebSocket();
-
-            // Start sending captured frames on a timer
-            this.startCapture();
-
-            // Start continuous render loop for smooth video
-            this._lastDetection = null;
-            this._startRenderLoop();
-
-            console.log('Streaming started');
-        } catch (error) {
-            this.isStreaming = false;
-            this._stopRenderLoop();
-            this._lastDetection = null;
+        // 请求通知权限
+        await this.requestNotificationPermission();
+        await this.loadNotificationSettings();
 
-            if (this.captureInterval) {
-                clearInterval(this.captureInterval);
-                this.captureInterval = null;
-            }
+        // 建立 WebSocket 连接
+        await this.connectWebSocket();
 
-            if (this.reconnectTimeout) {
-                clearTimeout(this.reconnectTimeout);
-                this.reconnectTimeout = null;
-            }
+        // 开始定期截图并发送
+        this.startCapture();
 
-            if (this.ws) {
-                this.ws.onopen = null;
-                this.ws.onmessage = null;
-                this.ws.onerror = null;
-                this.ws.onclose = null;
-                try {
-                    this.ws.close();
-                } catch (_) {}
-                this.ws = null;
-            }
+        // Start continuous render loop for smooth video
+        this._lastDetection = null;
+        this._startRenderLoop();
 
-            throw error instanceof Error ? error : new Error('Failed to start video streaming.');
-        }
+        console.log('Streaming started');
     }
 
-    // Connect the WebSocket
+    // 建立 WebSocket 连接
     async connectWebSocket() {
         return new Promise((resolve, reject) => {
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -186,28 +145,17 @@ export class VideoManagerLocal {
 
             console.log('Connecting to WebSocket:', wsUrl);
 
-            const socket = new WebSocket(wsUrl);
-            this.ws = socket;
-
-            let settled = false;
-            let opened = false;
-            const rejectWithMessage = (message) => {
-                if (settled) return;
-                settled = true;
-                reject(new Error(message));
-            };
+            this.ws = new WebSocket(wsUrl);
 
-            socket.onopen = () => {
-                opened = true;
-                settled = true;
+            this.ws.onopen = () => {
                 console.log('WebSocket connected');
 
-                // Send the start-session control message
-                socket.send(JSON.stringify({ type: 'start_session' }));
+                // 发送开始会话请求
+                this.ws.send(JSON.stringify({ type: 'start_session' }));
                 resolve();
             };
 
-            socket.onmessage = (event) => {
+            this.ws.onmessage = (event) => {
                 try {
                     const data = JSON.parse(event.data);
                     this.handleServerMessage(data);
@@ -216,40 +164,22 @@ export class VideoManagerLocal {
                 }
             };
 
-            socket.onerror = () => {
-                console.error('WebSocket error:', { url: wsUrl, readyState: socket.readyState });
-                rejectWithMessage(`Failed to connect to ${wsUrl}. Check that the backend server is running and reachable.`);
+            this.ws.onerror = (error) => {
+                console.error('WebSocket error:', error);
+                reject(error);
             };
 
-            socket.onclose = (event) => {
-                console.log('WebSocket disconnected', event.code, event.reason);
-                if (this.ws === socket) {
-                    this.ws = null;
-                }
-
-                if (!opened) {
-                    rejectWithMessage(`WebSocket closed before connection was established (${event.code || 'no code'}). Check that the backend server is running on the expected port.`);
-                    return;
-                }
-
+            this.ws.onclose = () => {
+                console.log('WebSocket disconnected');
                 if (this.isStreaming) {
                     console.log('Attempting to reconnect...');
-                    if (this.reconnectTimeout) {
-                        clearTimeout(this.reconnectTimeout);
-                    }
-                    this.reconnectTimeout = setTimeout(() => {
-                        this.reconnectTimeout = null;
-                        if (!this.isStreaming) return;
-                        this.connectWebSocket().catch((error) => {
-                            console.error('Reconnect failed:', error);
-                        });
-                    }, 2000);
+                    setTimeout(() => this.connectWebSocket(), 2000);
                 }
             };
         });
     }
 
-    // Capture and send frames (binary blobs for speed)
+    // 开始截图并发送 (binary blobs for speed)
     startCapture() {
         const interval = 1000 / this.frameRate;
         this._sendingBlob = false; // prevent overlapping toBlob calls
@@ -294,8 +224,7 @@ export class VideoManagerLocal {
                 // Overlay last known detection results
                 const data = this._lastDetection;
                 if (data) {
-                    const isL2cs = data.model === 'l2cs';
-                    if (data.landmarks && !isL2cs) {
+                    if (data.landmarks) {
                         this.drawFaceMesh(ctx, data.landmarks, w, h);
                     }
                     // Top HUD bar (matching live_demo.py)
@@ -334,82 +263,6 @@ export class VideoManagerLocal {
                         ctx.fillText(`yaw:${data.yaw > 0 ? '+' : ''}${data.yaw.toFixed(0)}  pitch:${data.pitch > 0 ? '+' : ''}${data.pitch.toFixed(0)}  roll:${data.roll > 0 ? '+' : ''}${data.roll.toFixed(0)}`, w - 10, 48);
                         ctx.textAlign = 'left';
                     }
-
-                    // Gaze pointer removed from camera — shown in mini-map only.
-
-                    // Eye gaze (L2CS): iris-based arrows matching live_demo.py
-                    if (isL2cs && data.landmarks) {
-                        const lm = data.landmarks;
-                        const getPt = (idx) => {
-                            if (!lm) return null;
-                            if (Array.isArray(lm)) return lm[idx] || null;
-                            return lm[String(idx)] || null;
-                        };
-
-                        // Draw eye contours (green)
-                        this._drawPolyline(ctx, lm, VideoManagerLocal.LEFT_EYE, w, h, '#00FF00', 2, true);
-                        this._drawPolyline(ctx, lm, VideoManagerLocal.RIGHT_EYE, w, h, '#00FF00', 2, true);
-
-                        // EAR key points (yellow)
-                        for (const earIndices of [VideoManagerLocal.LEFT_EAR_POINTS, VideoManagerLocal.RIGHT_EAR_POINTS]) {
-                            for (const idx of earIndices) {
-                                const pt = getPt(idx);
-                                if (!pt) continue;
-                                ctx.beginPath();
-                                ctx.arc(pt[0] * w, pt[1] * h, 3, 0, 2 * Math.PI);
-                                ctx.fillStyle = '#FFFF00';
-                                ctx.fill();
-                            }
-                        }
-
-                        // Irises + gaze lines (matching live_demo.py)
-                        const irisSets = [
-                            { iris: VideoManagerLocal.LEFT_IRIS, inner: 133, outer: 33 },
-                            { iris: VideoManagerLocal.RIGHT_IRIS, inner: 362, outer: 263 },
-                        ];
-                        for (const { iris, inner, outer } of irisSets) {
-                            const centerPt = getPt(iris[0]);
-                            if (!centerPt) continue;
-                            const cx = centerPt[0] * w, cy = centerPt[1] * h;
-
-                            // Iris circle (magenta)
-                            let radiusSum = 0, count = 0;
-                            for (let i = 1; i < iris.length; i++) {
-                                const pt = getPt(iris[i]);
-                                if (!pt) continue;
-                                radiusSum += Math.hypot(pt[0] * w - cx, pt[1] * h - cy);
-                                count++;
-                            }
-                            const radius = Math.max(count > 0 ? radiusSum / count : 3, 2);
-                            ctx.beginPath();
-                            ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
-                            ctx.strokeStyle = '#FF00FF';
-                            ctx.lineWidth = 2;
-                            ctx.stroke();
-
-                            // Iris center dot (white)
-                            ctx.beginPath();
-                            ctx.arc(cx, cy, 2, 0, 2 * Math.PI);
-                            ctx.fillStyle = '#FFFFFF';
-                            ctx.fill();
-
-                            // Gaze direction line (red) — from iris center, 3x displacement
-                            const innerPt = getPt(inner);
-                            const outerPt = getPt(outer);
-                            if (innerPt && outerPt) {
-                                const eyeCx = (innerPt[0] + outerPt[0]) / 2.0 * w;
-                                const eyeCy = (innerPt[1] + outerPt[1]) / 2.0 * h;
-                                const dx = cx - eyeCx;
-                                const dy = cy - eyeCy;
-                                ctx.beginPath();
-                                ctx.moveTo(cx, cy);
-                                ctx.lineTo(cx + dx * 3, cy + dy * 3);
-                                ctx.strokeStyle = '#FF0000';
-                                ctx.lineWidth = 1;
-                                ctx.stroke();
-                            }
-                        }
-                    }
                 }
                 // Gaze pointer (L2CS + calibration)
                 if (data && data.gaze_x !== undefined && data.gaze_y !== undefined) {
@@ -443,7 +296,7 @@ export class VideoManagerLocal {
         }
     }
 
-    // Handle messages from the server
+    // 处理服务器消息
     handleServerMessage(data) {
         switch (data.type) {
             case 'session_started':
@@ -497,70 +350,6 @@ export class VideoManagerLocal {
                     on_screen: data.on_screen,
                 };
                 this.drawDetectionResult(detectionData);
-
-                // Emit gaze data for mini-map
-                if (this.callbacks.onGazeData) {
-                    this.callbacks.onGazeData({
-                        gaze_x: data.gaze_x != null ? data.gaze_x : null,
-                        gaze_y: data.gaze_y != null ? data.gaze_y : null,
-                        on_screen: data.on_screen != null ? data.on_screen : null,
-                    });
-                }
-                break;
-
-            case 'calibration_started':
-                this.calibrationState = {
-                    active: true,
-                    collecting: true,
-                    done: false,
-                    success: false,
-                    target: data.target || [0.5, 0.5],
-                    index: data.index ?? 0,
-                    numPoints: data.num_points ?? 9,
-                };
-                if (this.callbacks.onCalibrationUpdate) {
-                    this.callbacks.onCalibrationUpdate(this.calibrationState);
-                }
-                break;
-
-            case 'calibration_point':
-                this.calibrationState = {
-                    ...this.calibrationState,
-                    target: data.target || [0.5, 0.5],
-                    index: data.index ?? this.calibrationState.index,
-                };
-                if (this.callbacks.onCalibrationUpdate) {
-                    this.callbacks.onCalibrationUpdate(this.calibrationState);
-                }
-                break;
-
-            case 'calibration_done':
-                this.calibrationState = {
-                    ...this.calibrationState,
-                    active: true,
-                    collecting: false,
-                    done: true,
-                    success: data.success === true,
-                    error: data.error || null,
-                };
-                if (this.callbacks.onCalibrationUpdate) {
-                    this.callbacks.onCalibrationUpdate(this.calibrationState);
-                }
-                break;
-
-            case 'calibration_cancelled':
-                this.calibrationState = {
-                    active: false,
-                    collecting: false,
-                    done: false,
-                    success: false,
-                    target: [0.5, 0.5],
-                    index: 0,
-                    numPoints: 9,
-                };
-                if (this.callbacks.onCalibrationUpdate) {
-                    this.callbacks.onCalibrationUpdate(this.calibrationState);
-                }
                 break;
 
             case 'session_ended':
@@ -891,26 +680,21 @@ export class VideoManagerLocal {
 
         this.isStreaming = false;
 
-        if (this.reconnectTimeout) {
-            clearTimeout(this.reconnectTimeout);
-            this.reconnectTimeout = null;
-        }
-
-        // Stop the render loop
+        // Stop render loop
         this._stopRenderLoop();
         this._lastDetection = null;
 
-        // Stop frame capture
+        // 停止截图
         if (this.captureInterval) {
             clearInterval(this.captureInterval);
             this.captureInterval = null;
         }
 
-        // Send the end-session request and wait for the response
+        // 发送结束会话请求并等待响应
         if (this.ws && this.ws.readyState === WebSocket.OPEN && this.sessionId) {
             const sessionId = this.sessionId;
 
-            // Wait for the session_ended message
+            // 等待 session_ended 消息
             const waitForSessionEnd = new Promise((resolve) => {
                 const originalHandler = this.ws.onmessage;
                 const timeout = setTimeout(() => {
@@ -928,7 +712,7 @@ export class VideoManagerLocal {
                             this.ws.onmessage = originalHandler;
                             resolve();
                         } else {
-                            // Continue handling non-terminal messages
+                            // 仍然处理其他消息
                             this.handleServerMessage(data);
                         }
                     } catch (e) {
@@ -943,37 +727,37 @@ export class VideoManagerLocal {
                 session_id: sessionId
             }));
 
-            // Wait for the response or a timeout
+            // 等待响应或超时
             await waitForSessionEnd;
         }
 
-        // Delay socket shutdown briefly so pending messages can flush
+        // 延迟关闭 WebSocket 确保消息发送完成
         await new Promise(resolve => setTimeout(resolve, 200));
 
-        // Close the WebSocket
+        // 关闭 WebSocket
         if (this.ws) {
             this.ws.close();
             this.ws = null;
         }
 
-        // Stop the camera
+        // 停止摄像头
         if (this.stream) {
             this.stream.getTracks().forEach(track => track.stop());
             this.stream = null;
         }
 
-        // Clear the video element
+        // 清空视频
         if (this.localVideoElement) {
             this.localVideoElement.srcObject = null;
         }
 
-        // Clear the canvas
+        // 清空 canvas
         if (this.displayCanvas) {
             const ctx = this.displayCanvas.getContext('2d');
             ctx.clearRect(0, 0, this.displayCanvas.width, this.displayCanvas.height);
         }
 
-        // Reset transient state
+        // 清理状态
         this.unfocusedStartTime = null;
         this.lastNotificationTime = null;
 
@@ -985,47 +769,13 @@ export class VideoManagerLocal {
         this.frameRate = Math.max(10, Math.min(30, rate));
         console.log(`Frame rate set to ${this.frameRate} FPS`);
 
-        // Restart capture if streaming is already active
+        // 重启截图（如果正在运行）
         if (this.isStreaming && this.captureInterval) {
             clearInterval(this.captureInterval);
             this.startCapture();
         }
     }
 
-    startCalibration() {
-        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
-        this.ws.send(JSON.stringify({ type: 'calibration_start' }));
-    }
-
-    nextCalibrationPoint() {
-        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
-        this.ws.send(JSON.stringify({ type: 'calibration_next' }));
-    }
-
-    cancelCalibration() {
-        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
-        this.ws.send(JSON.stringify({ type: 'calibration_cancel' }));
-    }
-
-    getCalibrationState() {
-        return this.calibrationState;
-    }
-
-    dismissCalibrationDone() {
-        this.calibrationState = {
-            active: false,
-            collecting: false,
-            done: false,
-            success: false,
-            target: [0.5, 0.5],
-            index: 0,
-            numPoints: 9,
-        };
-        if (this.callbacks.onCalibrationUpdate) {
-            this.callbacks.onCalibrationUpdate(this.calibrationState);
-        }
-    }
-
     getStats() {
         return {
             ...this.stats,

ui/pipeline.py

@@ -1,5 +1,3 @@
-from __future__ import annotations
-
 import collections
 import glob
 import json
@@ -10,26 +8,23 @@ import sys
 
 import numpy as np
 import joblib
-import torch
-import torch.nn as nn
 
 _PROJECT_ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 if _PROJECT_ROOT not in sys.path:
     sys.path.insert(0, _PROJECT_ROOT)
 
-from data_preparation.prepare_dataset import SELECTED_FEATURES
 from models.face_mesh import FaceMeshDetector
 from models.head_pose import HeadPoseEstimator
 from models.eye_scorer import EyeBehaviourScorer, compute_mar, MAR_YAWN_THRESHOLD
+from models.eye_crop import extract_eye_crops
+from models.eye_classifier import load_eye_classifier, GeometricOnlyClassifier
 from models.collect_features import FEATURE_NAMES, TemporalTracker, extract_features
 
-# Same 10 features used for MLP training (prepare_dataset) and inference
-MLP_FEATURE_NAMES = SELECTED_FEATURES["face_orientation"]
-
 _FEAT_IDX = {name: i for i, name in enumerate(FEATURE_NAMES)}
 
 
 def _clip_features(vec):
+    """Clip raw features to the same ranges used during training."""
     out = vec.copy()
     _i = _FEAT_IDX
 
@@ -82,21 +77,19 @@ class _OutputSmoother:
 
 
 DEFAULT_HYBRID_CONFIG = {
-    "use_xgb": False,
-    "w_mlp": 0.3,
-    "w_xgb": 0.0,
-    "w_geo": 0.7,
-    "threshold": 0.35,
+    "w_mlp": 0.7,
+    "w_geo": 0.3,
+    "threshold": 0.55,
     "use_yawn_veto": True,
-    "geo_face_weight": 0.7,
-    "geo_eye_weight": 0.3,
+    "geo_face_weight": 0.4,
+    "geo_eye_weight": 0.6,
     "mar_yawn_threshold": float(MAR_YAWN_THRESHOLD),
-    "combiner": None,
-    "combiner_path": None,
 }
 
 
 class _RuntimeFeatureEngine:
+    """Runtime feature engineering (magnitudes, velocities, variances) with EMA baselines."""
+
     _MAG_FEATURES = ["pitch", "yaw", "head_deviation", "gaze_offset", "v_gaze", "h_gaze"]
     _VEL_FEATURES = ["pitch", "yaw", "h_gaze", "v_gaze", "head_deviation", "gaze_offset"]
     _VAR_FEATURES = ["h_gaze", "v_gaze", "pitch"]
@@ -182,9 +175,12 @@ class FaceMeshPipeline:
     def __init__(
         self,
         max_angle: float = 22.0,
-        alpha: float = 0.7,
-        beta: float = 0.3,
+        alpha: float = 0.4,
+        beta: float = 0.6,
         threshold: float = 0.55,
+        eye_model_path: str | None = None,
+        eye_backend: str = "yolo",
+        eye_blend: float = 0.5,
         detector=None,
     ):
         self.detector = detector or FaceMeshDetector()
@@ -194,6 +190,16 @@ class FaceMeshPipeline:
         self.alpha = alpha
         self.beta = beta
         self.threshold = threshold
+        self.eye_blend = eye_blend
+
+        self.eye_classifier = load_eye_classifier(
+            path=eye_model_path if eye_model_path and os.path.exists(eye_model_path) else None,
+            backend=eye_backend,
+            device="cpu",
+        )
+        self._has_eye_model = not isinstance(self.eye_classifier, GeometricOnlyClassifier)
+        if self._has_eye_model:
+            print(f"[PIPELINE] Eye model: {self.eye_classifier.name}")
         self._smoother = _OutputSmoother()
 
     def process_frame(self, bgr_frame: np.ndarray) -> dict:
@@ -225,7 +231,17 @@ class FaceMeshPipeline:
         if angles is not None:
             out["yaw"], out["pitch"], out["roll"] = angles
         out["s_face"] = self.head_pose.score(landmarks, w, h)
-        out["s_eye"] = self.eye_scorer.score(landmarks)
+
+        s_eye_geo = self.eye_scorer.score(landmarks)
+        if self._has_eye_model:
+            left_crop, right_crop, left_bbox, right_bbox = extract_eye_crops(bgr_frame, landmarks)
+            out["left_bbox"] = left_bbox
+            out["right_bbox"] = right_bbox
+            s_eye_model = self.eye_classifier.predict_score([left_crop, right_crop])
+            out["s_eye"] = (1.0 - self.eye_blend) * s_eye_geo + self.eye_blend * s_eye_model
+        else:
+            out["s_eye"] = s_eye_geo
+
         out["mar"] = compute_mar(landmarks)
         out["is_yawning"] = out["mar"] > MAR_YAWN_THRESHOLD
 
@@ -237,6 +253,10 @@ class FaceMeshPipeline:
 
         return out
 
+    @property
+    def has_eye_model(self) -> bool:
+        return self._has_eye_model
+
     def reset_session(self):
         self._smoother.reset()
 
@@ -251,45 +271,23 @@ class FaceMeshPipeline:
         self.close()
 
 
-# PyTorch MLP matching models/mlp/train.py BaseModel (10 -> 64 -> 32 -> 2)
-class _FocusMLP(nn.Module):
-    def __init__(self, num_features: int, num_classes: int = 2):
-        super().__init__()
-        self.network = nn.Sequential(
-            nn.Linear(num_features, 64),
-            nn.ReLU(),
-            nn.Linear(64, 32),
-            nn.ReLU(),
-            nn.Linear(32, num_classes),
-        )
-
-    def forward(self, x):
-        return self.network(x)
-
-
-def _mlp_artifacts_available(model_dir: str) -> bool:
-    pt_path = os.path.join(model_dir, "mlp_best.pt")
-    scaler_path = os.path.join(model_dir, "scaler_mlp.joblib")
-    return os.path.isfile(pt_path) and os.path.isfile(scaler_path)
-
-
-def _load_mlp_artifacts(model_dir: str):
-    """Load PyTorch MLP + scaler from checkpoints. Returns (model, scaler, feature_names)."""
-    pt_path = os.path.join(model_dir, "mlp_best.pt")
-    scaler_path = os.path.join(model_dir, "scaler_mlp.joblib")
-    if not os.path.isfile(pt_path):
-        raise FileNotFoundError(f"No MLP checkpoint at {pt_path}")
-    if not os.path.isfile(scaler_path):
-        raise FileNotFoundError(f"No scaler at {scaler_path}")
-
-    num_features = len(MLP_FEATURE_NAMES)
-    num_classes = 2
-    model = _FocusMLP(num_features, num_classes)
-    model.load_state_dict(torch.load(pt_path, map_location="cpu", weights_only=True))
-    model.eval()
-
-    scaler = joblib.load(scaler_path)
-    return model, scaler, list(MLP_FEATURE_NAMES)
+def _latest_model_artifacts(model_dir):
+    model_files = sorted(glob.glob(os.path.join(model_dir, "model_*.joblib")))
+    if not model_files:
+        model_files = sorted(glob.glob(os.path.join(model_dir, "mlp_*.joblib")))
+    if not model_files:
+        return None, None, None
+    basename = os.path.basename(model_files[-1])
+    tag = ""
+    for prefix in ("model_", "mlp_"):
+        if basename.startswith(prefix):
+            tag = basename[len(prefix) :].replace(".joblib", "")
+            break
+    scaler_path = os.path.join(model_dir, f"scaler_{tag}.joblib")
+    meta_path = os.path.join(model_dir, f"meta_{tag}.npz")
+    if not os.path.isfile(scaler_path) or not os.path.isfile(meta_path):
+        return None, None, None
+    return model_files[-1], scaler_path, meta_path
 
 
 def _load_hybrid_config(model_dir: str, config_path: str | None = None):
@@ -306,41 +304,43 @@ def _load_hybrid_config(model_dir: str, config_path: str | None = None):
         if key in file_cfg:
             cfg[key] = file_cfg[key]
 
-    cfg["use_xgb"] = bool(cfg.get("use_xgb", False))
-    cfg["w_mlp"] = float(cfg.get("w_mlp", 0.3))
-    cfg["w_xgb"] = float(cfg.get("w_xgb", 0.0))
+    cfg["w_mlp"] = float(cfg["w_mlp"])
     cfg["w_geo"] = float(cfg["w_geo"])
-    if cfg["use_xgb"]:
-        weight_sum = cfg["w_xgb"] + cfg["w_geo"]
-        if weight_sum <= 0:
-            raise ValueError("[HYBRID] Invalid config: w_xgb + w_geo must be > 0")
-        cfg["w_xgb"] /= weight_sum
-        cfg["w_geo"] /= weight_sum
-    else:
-        weight_sum = cfg["w_mlp"] + cfg["w_geo"]
-        if weight_sum <= 0:
-            raise ValueError("[HYBRID] Invalid config: w_mlp + w_geo must be > 0")
-        cfg["w_mlp"] /= weight_sum
-        cfg["w_geo"] /= weight_sum
+    weight_sum = cfg["w_mlp"] + cfg["w_geo"]
+    if weight_sum <= 0:
+        raise ValueError("[HYBRID] Invalid config: w_mlp + w_geo must be > 0")
+    cfg["w_mlp"] /= weight_sum
+    cfg["w_geo"] /= weight_sum
     cfg["threshold"] = float(cfg["threshold"])
     cfg["use_yawn_veto"] = bool(cfg["use_yawn_veto"])
     cfg["geo_face_weight"] = float(cfg["geo_face_weight"])
     cfg["geo_eye_weight"] = float(cfg["geo_eye_weight"])
     cfg["mar_yawn_threshold"] = float(cfg["mar_yawn_threshold"])
-    cfg["combiner"] = cfg.get("combiner") or None
-    cfg["combiner_path"] = cfg.get("combiner_path") or None
 
     print(f"[HYBRID] Loaded config: {resolved}")
     return cfg, resolved
 
 
 class MLPPipeline:
-    def __init__(self, model_dir=None, detector=None, threshold=0.23):
+    def __init__(self, model_dir=None, detector=None, threshold=0.5):
         if model_dir is None:
-            model_dir = os.path.join(_PROJECT_ROOT, "checkpoints")
-
-        self._mlp, self._scaler, self._feature_names = _load_mlp_artifacts(model_dir)
-        self._indices = [FEATURE_NAMES.index(n) for n in self._feature_names]
+            # Check primary location
+            model_dir = os.path.join(_PROJECT_ROOT, "MLP", "models")
+            if not os.path.exists(model_dir):
+                model_dir = os.path.join(_PROJECT_ROOT, "checkpoints")
+
+        mlp_path, scaler_path, meta_path = _latest_model_artifacts(model_dir)
+        if mlp_path is None:
+            raise FileNotFoundError(f"No MLP artifacts in {model_dir}")
+        self._mlp = joblib.load(mlp_path)
+        self._scaler = joblib.load(scaler_path)
+        meta = np.load(meta_path, allow_pickle=True)
+        self._feature_names = list(meta["feature_names"])
+
+        norm_feats = list(meta["norm_features"]) if "norm_features" in meta else []
+        self._engine = _RuntimeFeatureEngine(FEATURE_NAMES, norm_features=norm_feats)
+        ext_names = self._engine.extended_names
+        self._indices = [ext_names.index(n) for n in self._feature_names]
 
         self._detector = detector or FaceMeshDetector()
         self._owns_detector = detector is None
@@ -350,7 +350,7 @@ class MLPPipeline:
         self._temporal = TemporalTracker()
         self._smoother = _OutputSmoother()
         self._threshold = threshold
-        print(f"[MLP] Loaded PyTorch MLP from {model_dir} | {len(self._feature_names)} features | threshold={threshold}")
+        print(f"[MLP] Loaded {mlp_path} | {len(self._feature_names)} features | threshold={threshold}")
 
     def process_frame(self, bgr_frame):
         landmarks = self._detector.process(bgr_frame)
@@ -382,13 +382,13 @@ class MLPPipeline:
         out["s_eye"] = float(vec[_FEAT_IDX["s_eye"]])
         out["mar"] = float(vec[_FEAT_IDX["mar"]])
 
-        X = vec[self._indices].reshape(1, -1).astype(np.float32)
-        X_sc = self._scaler.transform(X) if self._scaler is not None else X
-        with torch.no_grad():
-            x_t = torch.from_numpy(X_sc).float()
-            logits = self._mlp(x_t)
-            probs = torch.softmax(logits, dim=1)
-            mlp_prob = float(probs[0, 1])
+        ext_vec = self._engine.transform(vec)
+        X = ext_vec[self._indices].reshape(1, -1).astype(np.float64)
+        X_sc = self._scaler.transform(X)
+        if hasattr(self._mlp, "predict_proba"):
+            mlp_prob = float(self._mlp.predict_proba(X_sc)[0, 1])
+        else:
+            mlp_prob = float(self._mlp.predict(X_sc)[0] == 1)
         out["mlp_prob"] = float(np.clip(mlp_prob, 0.0, 1.0))
         out["raw_score"] = self._smoother.update(out["mlp_prob"], True)
         out["is_focused"] = out["raw_score"] >= self._threshold
@@ -409,66 +409,62 @@ class MLPPipeline:
         self.close()
 
 
-def _resolve_xgb_path():
-    return os.path.join(_PROJECT_ROOT, "checkpoints", "xgboost_face_orientation_best.json")
-
-
 class HybridFocusPipeline:
     def __init__(
         self,
         model_dir=None,
         config_path: str | None = None,
+        eye_model_path: str | None = None,
+        eye_backend: str = "yolo",
+        eye_blend: float = 0.5,
         max_angle: float = 22.0,
         detector=None,
     ):
         if model_dir is None:
             model_dir = os.path.join(_PROJECT_ROOT, "checkpoints")
+        mlp_path, scaler_path, meta_path = _latest_model_artifacts(model_dir)
+        if mlp_path is None:
+            raise FileNotFoundError(f"No MLP artifacts in {model_dir}")
+
+        self._mlp = joblib.load(mlp_path)
+        self._scaler = joblib.load(scaler_path)
+        meta = np.load(meta_path, allow_pickle=True)
+        self._feature_names = list(meta["feature_names"])
+
+        norm_feats = list(meta["norm_features"]) if "norm_features" in meta else []
+        self._engine = _RuntimeFeatureEngine(FEATURE_NAMES, norm_features=norm_feats)
+        ext_names = self._engine.extended_names
+        self._indices = [ext_names.index(n) for n in self._feature_names]
+
         self._cfg, self._cfg_path = _load_hybrid_config(model_dir=model_dir, config_path=config_path)
-        self._use_xgb = self._cfg["use_xgb"]
 
         self._detector = detector or FaceMeshDetector()
         self._owns_detector = detector is None
         self._head_pose = HeadPoseEstimator(max_angle=max_angle)
         self._eye_scorer = EyeBehaviourScorer()
         self._temporal = TemporalTracker()
+        self._eye_blend = eye_blend
+        self.eye_classifier = load_eye_classifier(
+            path=eye_model_path if eye_model_path and os.path.exists(eye_model_path) else None,
+            backend=eye_backend,
+            device="cpu",
+        )
+        self._has_eye_model = not isinstance(self.eye_classifier, GeometricOnlyClassifier)
+        if self._has_eye_model:
+            print(f"[HYBRID] Eye model: {self.eye_classifier.name}")
+
         self.head_pose = self._head_pose
         self._smoother = _OutputSmoother()
 
-        self._combiner = None
-        combiner_path = self._cfg.get("combiner_path")
-        if combiner_path and self._cfg.get("combiner") == "logistic":
-            resolved_combiner = combiner_path if os.path.isabs(combiner_path) else os.path.join(model_dir, combiner_path)
-            if not os.path.isfile(resolved_combiner):
-                resolved_combiner = os.path.join(_PROJECT_ROOT, combiner_path)
-            if os.path.isfile(resolved_combiner):
-                blob = joblib.load(resolved_combiner)
-                self._combiner = blob.get("combiner")
-                if self._combiner is None:
-                    self._combiner = blob
-                print(f"[HYBRID] LR combiner loaded from {resolved_combiner}")
-            else:
-                print(f"[HYBRID] combiner_path not found: {resolved_combiner}, using heuristic weights")
-        if self._use_xgb:
-            from xgboost import XGBClassifier
-            xgb_path = _resolve_xgb_path()
-            if not os.path.isfile(xgb_path):
-                raise FileNotFoundError(f"No XGBoost checkpoint at {xgb_path}")
-            self._xgb_model = XGBClassifier()
-            self._xgb_model.load_model(xgb_path)
-            self._xgb_indices = [FEATURE_NAMES.index(n) for n in XGBoostPipeline.SELECTED]
-            self._mlp = None
-            self._scaler = None
-            self._indices = None
-            self._feature_names = list(XGBoostPipeline.SELECTED)
-            mode = "LR combiner" if self._combiner else f"w_xgb={self._cfg['w_xgb']:.2f}, w_geo={self._cfg['w_geo']:.2f}"
-            print(f"[HYBRID] XGBoost+geo | {xgb_path} | {mode}, threshold={self._cfg['threshold']:.2f}")
-        else:
-            self._mlp, self._scaler, self._feature_names = _load_mlp_artifacts(model_dir)
-            self._indices = [FEATURE_NAMES.index(n) for n in self._feature_names]
-            self._xgb_model = None
-            self._xgb_indices = None
-            mode = "LR combiner" if self._combiner else f"w_mlp={self._cfg['w_mlp']:.2f}, w_geo={self._cfg['w_geo']:.2f}"
-            print(f"[HYBRID] MLP+geo | {len(self._feature_names)} features | {mode}, threshold={self._cfg['threshold']:.2f}")
+        print(
+            f"[HYBRID] Loaded {mlp_path} | {len(self._feature_names)} features | "
+            f"w_mlp={self._cfg['w_mlp']:.2f}, w_geo={self._cfg['w_geo']:.2f}, "
+            f"threshold={self._cfg['threshold']:.2f}"
+        )
+
+    @property
+    def has_eye_model(self) -> bool:
+        return self._has_eye_model
 
     @property
     def config(self) -> dict:
@@ -506,8 +502,15 @@ class HybridFocusPipeline:
             out["yaw"], out["pitch"], out["roll"] = angles
 
         out["s_face"] = self._head_pose.score(landmarks, w, h)
-        out["s_eye"] = self._eye_scorer.score(landmarks)
-        s_eye_geo = out["s_eye"]
+        s_eye_geo = self._eye_scorer.score(landmarks)
+        if self._has_eye_model:
+            left_crop, right_crop, left_bbox, right_bbox = extract_eye_crops(bgr_frame, landmarks)
+            out["left_bbox"] = left_bbox
+            out["right_bbox"] = right_bbox
+            s_eye_model = self.eye_classifier.predict_score([left_crop, right_crop])
+            out["s_eye"] = (1.0 - self._eye_blend) * s_eye_geo + self._eye_blend * s_eye_model
+        else:
+            out["s_eye"] = s_eye_geo
 
         geo_score = (
             self._cfg["geo_face_weight"] * out["s_face"] +
@@ -529,32 +532,16 @@ class HybridFocusPipeline:
         }
         vec = extract_features(landmarks, w, h, self._head_pose, self._eye_scorer, self._temporal, _pre=pre)
         vec = _clip_features(vec)
-
-        if self._use_xgb:
-            X = vec[self._xgb_indices].reshape(1, -1).astype(np.float32)
-            prob = self._xgb_model.predict_proba(X)[0]
-            model_prob = float(np.clip(prob[1], 0.0, 1.0))
-            out["mlp_prob"] = model_prob
-            if self._combiner is not None:
-                meta = np.array([[model_prob, out["geo_score"]]], dtype=np.float32)
-                focus_score = float(self._combiner.predict_proba(meta)[0, 1])
-            else:
-                focus_score = self._cfg["w_xgb"] * model_prob + self._cfg["w_geo"] * out["geo_score"]
+        ext_vec = self._engine.transform(vec)
+        X = ext_vec[self._indices].reshape(1, -1).astype(np.float64)
+        X_sc = self._scaler.transform(X)
+        if hasattr(self._mlp, "predict_proba"):
+            mlp_prob = float(self._mlp.predict_proba(X_sc)[0, 1])
         else:
-            X = vec[self._indices].reshape(1, -1).astype(np.float32)
-            X_sc = self._scaler.transform(X) if self._scaler is not None else X
-            with torch.no_grad():
-                x_t = torch.from_numpy(X_sc).float()
-                logits = self._mlp(x_t)
-                probs = torch.softmax(logits, dim=1)
-                mlp_prob = float(probs[0, 1])
-            out["mlp_prob"] = float(np.clip(mlp_prob, 0.0, 1.0))
-            if self._combiner is not None:
-                meta = np.array([[out["mlp_prob"], out["geo_score"]]], dtype=np.float32)
-                focus_score = float(self._combiner.predict_proba(meta)[0, 1])
-            else:
-                focus_score = self._cfg["w_mlp"] * out["mlp_prob"] + self._cfg["w_geo"] * out["geo_score"]
+            mlp_prob = float(self._mlp.predict(X_sc)[0] == 1)
+        out["mlp_prob"] = float(np.clip(mlp_prob, 0.0, 1.0))
 
+        focus_score = self._cfg["w_mlp"] * out["mlp_prob"] + self._cfg["w_geo"] * out["geo_score"]
         out["focus_score"] = self._smoother.update(float(np.clip(focus_score, 0.0, 1.0)), True)
         out["raw_score"] = out["focus_score"]
         out["is_focused"] = out["focus_score"] >= self._cfg["threshold"]
@@ -576,16 +563,22 @@ class HybridFocusPipeline:
 
 
 class XGBoostPipeline:
+    """Real-time XGBoost inference pipeline using the same feature extraction as MLPPipeline."""
+
+    # Same 10 features used during training (data_preparation.prepare_dataset.SELECTED_FEATURES)
     SELECTED = [
         'head_deviation', 's_face', 's_eye', 'h_gaze', 'pitch',
         'ear_left', 'ear_avg', 'ear_right', 'gaze_offset', 'perclos',
     ]
 
-    def __init__(self, model_path=None, threshold=0.38):
+    def __init__(self, model_path=None, threshold=0.5):
         from xgboost import XGBClassifier
 
         if model_path is None:
-            model_path = os.path.join(_PROJECT_ROOT, "checkpoints", "xgboost_face_orientation_best.json")
+            model_path = os.path.join(_PROJECT_ROOT, "models", "xgboost", "checkpoints", "face_orientation_best.json")
+            if not os.path.isfile(model_path):
+                # Fallback to legacy path
+                model_path = os.path.join(_PROJECT_ROOT, "checkpoints", "xgboost_face_orientation_best.json")
         if not os.path.isfile(model_path):
             raise FileNotFoundError(f"No XGBoost checkpoint at {model_path}")