feat: UI nav, onboarding, L2CS weights path + torch.load; trim dev files

- Home nav: drop avatar, add Home; simplify home CTAs
- Focus onboarding + pipeline/L2CS fixes; history clear in Help only
- Ignore coverage; Docker log info; remove dead FocusPage, test_data, fetch_sweep

.gitignore

@@ -35,6 +35,10 @@ build/
 Thumbs.db
 ignore/
 
+# Coverage / caches
+.coverage
+htmlcov/
+
 # Project specific
 focus_guard.db
 test_focus_guard.db

Dockerfile

@@ -31,4 +31,4 @@ RUN mkdir -p /app/data && chown -R user:user /app
 USER user
 EXPOSE 7860
 
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860", "--log-level", "debug"]
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860", "--log-level", "info"]

data/README.md

@@ -1,11 +1,32 @@
 # data/
 
-One folder per participant: `collected_<name>/` with .npz files. 9 participants, 144,793 samples total. Each .npz has `features` (N×17), `labels` (0/1), `feature_names`. Training uses 10 of the 17 (see data_preparation).
+## Layout
 
-**Collect more:**
+One directory per contributor: `collected_<name>/` with one or more `.npz` files per session.  
+`collect_features.py` appends timestamped files when someone records again (e.g. `collected_Kexin/` has two sessions).
+
+Each `.npz` holds:
+
+- `features` — N×17 (training uses **10** of these for the `face_orientation` set; see `data_preparation/`)
+- `labels` — 0 = unfocused, 1 = focused (live key presses while recording)
+- `feature_names` — names for all 17 columns
+
+## What we have (pooled)
+
+Roughly **144.8k** samples from **10** `.npz` sessions across **9** people. Session sizes vary a lot (~8.7k–17.6k samples), so the pool isn’t one uniform block — different setups, days, and recording lengths.
+
+| Aspect | Snapshot |
+|--------|----------|
+| **Labels** | ~55.8k unfocused / ~89.0k focused (~39% / ~61%) |
+| **Temporal mix** | Hundreds of focus ↔ unfocus **transitions** in the pooled timeline (not one long stuck label) |
+| **Signals** | Same 10 inference features as in production: head deviation, face/eye scores, horizontal gaze, pitch, EAR (left/avg/right), gaze offset, PERCLOS — pose + eyes + short-window drowsiness |
+
+Run **`data_preparation/data_exploration.ipynb`** for histograms, label-over-time plots, feature–label correlations, correlation matrix, and the small quality checklist (sample count, class balance band, transition count).
+
+## Collect more
 
 ```bash
 python -m models.collect_features --name yourname
 ```
 
-Webcam + overlay; press 1 = focused, 0 = unfocused, p = pause, q = save and quit.
+Webcam + overlay: **1** = focused, **0** = unfocused, **p** = pause, **q** = save and quit.

evaluation/run_channel_ablation_only.py

@@ -1,63 +0,0 @@
-"""Run only channel ablation LOPO (no leave-one-out). Quick run for paper data."""
-import os
-import sys
-import numpy as np
-from sklearn.preprocessing import StandardScaler
-from sklearn.metrics import f1_score
-from xgboost import XGBClassifier
-
-_PROJECT_ROOT = os.path.abspath(os.path.join(os.path.dirname(__file__), ".."))
-sys.path.insert(0, _PROJECT_ROOT)
-from data_preparation.prepare_dataset import load_per_person, SELECTED_FEATURES
-
-SEED = 42
-FEATURES = SELECTED_FEATURES["face_orientation"]
-CHANNEL_SUBSETS = {
-    "head_pose": ["head_deviation", "s_face", "pitch"],
-    "eye_state": ["ear_left", "ear_avg", "ear_right", "perclos"],
-    "gaze": ["h_gaze", "gaze_offset", "s_eye"],
-}
-
-
-def main():
-    by_person, _, _ = load_per_person("face_orientation")
-    persons = sorted(by_person.keys())
-    results = {}
-    for subset_name, feat_list in CHANNEL_SUBSETS.items():
-        idx_keep = [FEATURES.index(f) for f in feat_list]
-        f1s = []
-        for held_out in persons:
-            train_X = np.concatenate([by_person[p][0] for p in persons if p != held_out])
-            train_y = np.concatenate([by_person[p][1] for p in persons if p != held_out])
-            X_test, y_test = by_person[held_out]
-            X_tr = train_X[:, idx_keep]
-            X_te = X_test[:, idx_keep]
-            scaler = StandardScaler().fit(X_tr)
-            xgb = XGBClassifier(n_estimators=600, max_depth=8, learning_rate=0.05,
-                subsample=0.8, colsample_bytree=0.8, reg_alpha=0.1, reg_lambda=1.0,
-                eval_metric="logloss", random_state=SEED, verbosity=0)
-            xgb.fit(scaler.transform(X_tr), train_y)
-            pred = xgb.predict(scaler.transform(X_te))
-            f1s.append(f1_score(y_test, pred, average="weighted"))
-        results[subset_name] = np.mean(f1s)
-        print(f"{subset_name}: {results[subset_name]:.4f}")
-    # baseline
-    f1s = []
-    for held_out in persons:
-        train_X = np.concatenate([by_person[p][0] for p in persons if p != held_out])
-        train_y = np.concatenate([by_person[p][1] for p in persons if p != held_out])
-        X_test, y_test = by_person[held_out]
-        scaler = StandardScaler().fit(train_X)
-        xgb = XGBClassifier(n_estimators=600, max_depth=8, learning_rate=0.05,
-            subsample=0.8, colsample_bytree=0.8, reg_alpha=0.1, reg_lambda=1.0,
-            eval_metric="logloss", random_state=SEED, verbosity=0)
-        xgb.fit(scaler.transform(train_X), train_y)
-        pred = xgb.predict(scaler.transform(X_test))
-        f1s.append(f1_score(y_test, pred, average="weighted"))
-    results["all_10"] = np.mean(f1s)
-    print(f"all_10: {results['all_10']:.4f}")
-    return results
-
-
-if __name__ == "__main__":
-    main()

main.py

@@ -20,8 +20,11 @@ from contextlib import asynccontextmanager
 import asyncio
 import concurrent.futures
 import threading
+import logging
 
 from aiortc import RTCPeerConnection, RTCSessionDescription, VideoStreamTrack
+
+logger = logging.getLogger(__name__)
 from av import VideoFrame
 
 from mediapipe.tasks.python.vision import FaceLandmarksConnections
@@ -138,26 +141,33 @@ def _draw_hud(frame, result, model_name):
 
 # 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(
-    [10,338,297,332,284,251,389,356,454,323,361,288,397,365,379,378,400,377,152,148,176,149,150,136,172,58,132,93,234,127,162,21,54,103,67,109]  # face oval
-    + [33,7,163,144,145,153,154,155,133,173,157,158,159,160,161,246]  # left eye
-    + [362,382,381,380,374,373,390,249,263,466,388,387,386,385,384,398]  # right eye
-    + [468,469,470,471,472, 473,474,475,476,477]  # irises
-    + [70,63,105,66,107,55,65,52,53,46]  # left eyebrow
-    + [300,293,334,296,336,285,295,282,283,276]  # right eyebrow
-    + [6,197,195,5,4,1,19,94,2]  # nose bridge
-    + [61,146,91,181,84,17,314,405,321,375,291,409,270,269,267,0,37,39,40,185]  # lips outer
-    + [78,95,88,178,87,14,317,402,318,324,308,415,310,311,312,13,82,81,80,191]  # lips inner
-    + [33,160,158,133,153,145]  # left EAR key points
-    + [362,385,387,263,373,380]  # right EAR key points
-))
+_MESH_INDICES = sorted(
+    set(
+        [
+            10, 338, 297, 332, 284, 251, 389, 356, 454,
+            323, 361, 288, 397, 365, 379, 378, 400, 377,
+            152, 148, 176, 149, 150, 136, 172, 58, 132,
+            93, 234, 127, 162, 21, 54, 103, 67, 109,
+        ]  # face oval
+        + [33, 7, 163, 144, 145, 153, 154, 155, 133, 173, 157, 158, 159, 160, 161, 246]  # left eye
+        + [362, 382, 381, 380, 374, 373, 390, 249, 263, 466, 388, 387, 386, 385, 384, 398]  # right eye
+        + [468, 469, 470, 471, 472, 473, 474, 475, 476, 477]  # irises
+        + [70, 63, 105, 66, 107, 55, 65, 52, 53, 46]  # left eyebrow
+        + [300, 293, 334, 296, 336, 285, 295, 282, 283, 276]  # right eyebrow
+        + [6, 197, 195, 5, 4, 1, 19, 94, 2]  # nose bridge
+        + [61, 146, 91, 181, 84, 17, 314, 405, 321, 375, 291, 409, 270, 269, 267, 0, 37, 39, 40, 185]  # lips outer
+        + [78, 95, 88, 178, 87, 14, 317, 402, 318, 324, 308, 415, 310, 311, 312, 13, 82, 81, 80, 191]  # lips inner
+        + [33, 160, 158, 133, 153, 145]  # left EAR key points
+        + [362, 385, 387, 263, 373, 380]  # right EAR key points
+    )
+)
 # 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...")
+    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")
@@ -196,9 +206,13 @@ async def lifespan(app):
             await db.commit()
     if resolved_model is not None:
         print(f"[OK] Active model set to {resolved_model}")
+    if is_l2cs_weights_available():
+        print("[OK] L2CS weights found (lazy-loaded on first use)")
+    else:
+        print("[WARN] L2CS weights not found")
     yield
     _inference_executor.shutdown(wait=False)
-    print(" Shutting down Focus Guard API...")
+    print("Shutting down Focus Guard API")
 
 app = FastAPI(title="Focus Guard API", lifespan=lifespan)
 
@@ -265,18 +279,14 @@ async def init_database():
         await db.execute("""
             CREATE TABLE IF NOT EXISTS user_settings (
                 id INTEGER PRIMARY KEY CHECK (id = 1),
-                sensitivity INTEGER DEFAULT 6,
-                notification_enabled BOOLEAN DEFAULT 1,
-                notification_threshold INTEGER DEFAULT 30,
-                frame_rate INTEGER DEFAULT 30,
                 model_name TEXT DEFAULT 'mlp'
             )
         """)
 
         # Insert default settings if not exists
         await db.execute("""
-            INSERT OR IGNORE INTO user_settings (id, sensitivity, notification_enabled, notification_threshold, frame_rate, model_name)
-            VALUES (1, 6, 1, 30, 30, 'mlp')
+            INSERT OR IGNORE INTO user_settings (id, model_name)
+            VALUES (1, 'mlp')
         """)
 
         await db.commit()
@@ -290,10 +300,6 @@ class SessionEnd(BaseModel):
     session_id: int
 
 class SettingsUpdate(BaseModel):
-    sensitivity: Optional[int] = None
-    notification_enabled: Optional[bool] = None
-    notification_threshold: Optional[int] = None
-    frame_rate: Optional[int] = None
     model_name: Optional[str] = None
     l2cs_boost: Optional[bool] = None
 
@@ -340,7 +346,12 @@ class VideoTransformTrack(VideoStreamTrack):
                 )
                 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}
+                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,
+                }
 
                 # Draw face mesh + HUD on the video frame
                 h_f, w_f = img.shape[:2]
@@ -610,112 +621,52 @@ def _process_frame_with_l2cs_boost(base_pipeline, frame, base_model_name):
 
     return base_out
 
-@app.on_event("startup")
-async def startup_event():
-    global pipelines, _cached_model_name
-    print(" Starting Focus Guard API...")
-    await init_database()
-    # Load cached model name from DB
-    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")
-
-@app.on_event("shutdown")
-async def shutdown_event():
-    _inference_executor.shutdown(wait=False)
-    print(" Shutting down Focus Guard API...")
-
 # ================ WEBRTC SIGNALING ================
 
 @app.post("/api/webrtc/offer")
 async def webrtc_offer(offer: dict):
     try:
-        print(f"Received WebRTC offer")
-
         pc = RTCPeerConnection()
         pcs.add(pc)
 
         session_id = await create_session()
-        print(f"Created session: {session_id}")
-
         channel_ref = {"channel": None}
 
         @pc.on("datachannel")
         def on_datachannel(channel):
-            print(f"Data channel opened")
             channel_ref["channel"] = channel
 
         @pc.on("track")
         def on_track(track):
-            print(f"Received track: {track.kind}")
             if track.kind == "video":
                 local_track = VideoTransformTrack(track, session_id, lambda: channel_ref["channel"])
                 pc.addTrack(local_track)
-                print(f"Video track added")
 
             @track.on("ended")
             async def on_ended():
-                print(f"Track ended")
+                pass
 
         @pc.on("connectionstatechange")
         async def on_connectionstatechange():
-            print(f"Connection state changed: {pc.connectionState}")
             if pc.connectionState in ("failed", "closed", "disconnected"):
                 try:
                     await end_session(session_id)
                 except Exception as e:
-                    print(f"⚠Error ending session: {e}")
+                    logger.warning("WebRTC session end failed: %s", e)
                 pcs.discard(pc)
                 await pc.close()
 
         await pc.setRemoteDescription(RTCSessionDescription(sdp=offer["sdp"], type=offer["type"]))
-        print(f"Remote description set")
 
         answer = await pc.createAnswer()
         await pc.setLocalDescription(answer)
-        print(f"Answer created")
 
         await _wait_for_ice_gathering(pc)
-        print(f"ICE gathering complete")
 
         return {"sdp": pc.localDescription.sdp, "type": pc.localDescription.type, "session_id": session_id}
 
     except Exception as e:
-        print(f"WebRTC offer error: {e}")
-        import traceback
-        traceback.print_exc()
+        logger.exception("WebRTC offer failed")
         raise HTTPException(status_code=500, detail=f"WebRTC error: {str(e)}")
 
 # ================ WEBSOCKET ================
@@ -732,7 +683,9 @@ async def websocket_endpoint(websocket: WebSocket):
     event_buffer = _EventBuffer(flush_interval=2.0)
 
     # Calibration state (per-connection)
-    _cal: dict = {"cal": None, "collecting": False, "fusion": None}
+    # verifying: after fit, show a verification target and check gaze accuracy
+    _cal: dict = {"cal": None, "collecting": False, "fusion": None,
+                  "verifying": False, "verify_target": None, "verify_samples": []}
 
     # Latest frame slot — only the most recent frame is kept, older ones are dropped.
     _slot = {"frame": None}
@@ -791,6 +744,10 @@ async def websocket_endpoint(websocket: WebSocket):
                     _cal["cal"] = GazeCalibration()
                     _cal["collecting"] = True
                     _cal["fusion"] = None
+                    # Tell L2CS pipeline to run every frame during calibration
+                    l2cs_pipe = pipelines.get("l2cs")
+                    if l2cs_pipe is not None and hasattr(l2cs_pipe, '_calibrating'):
+                        l2cs_pipe._calibrating = True
                     cal = _cal["cal"]
                     await websocket.send_json({
                         "type": "calibration_started",
@@ -801,7 +758,32 @@ async def websocket_endpoint(websocket: WebSocket):
 
                 elif data["type"] == "calibration_next":
                     cal = _cal.get("cal")
-                    if cal is not None:
+                    if _cal.get("verifying"):
+                        # Verification phase complete — user clicked next
+                        _cal["verifying"] = False
+                        _cal["collecting"] = False
+                        # Re-enable frame skipping
+                        l2cs_pipe = pipelines.get("l2cs")
+                        if l2cs_pipe is not None and hasattr(l2cs_pipe, '_calibrating'):
+                            l2cs_pipe._calibrating = False
+                        # Check verification samples
+                        v_samples = _cal.get("verify_samples", [])
+                        vt = _cal.get("verify_target", [0.5, 0.5])
+                        if len(v_samples) >= 3:
+                            med_yaw = float(np.median([s[0] for s in v_samples]))
+                            med_pitch = float(np.median([s[1] for s in v_samples]))
+                            px, py, err, passed = cal.verify(med_yaw, med_pitch, vt[0], vt[1])
+                            print(f"[CAL] Verification: target=({vt[0]:.2f},{vt[1]:.2f}) "
+                                  f"predicted=({px:.3f},{py:.3f}) error={err:.3f} passed={passed}")
+                        else:
+                            passed = True  # not enough samples, trust the fit
+                        _cal["fusion"] = GazeEyeFusion(cal)
+                        await websocket.send_json({
+                            "type": "calibration_done",
+                            "success": True,
+                            "verified": passed,
+                        })
+                    elif cal is not None:
                         more = cal.advance()
                         if more:
                             await websocket.send_json({
@@ -810,18 +792,39 @@ async def websocket_endpoint(websocket: WebSocket):
                                 "index": cal.current_index,
                             })
                         else:
+                            # All 9 points collected — try to fit
                             _cal["collecting"] = False
                             ok = cal.fit()
                             if ok:
-                                _cal["fusion"] = GazeEyeFusion(cal)
-                                await websocket.send_json({"type": "calibration_done", "success": True})
+                                # Enter verification phase: show center target
+                                _cal["verifying"] = True
+                                _cal["verify_target"] = [0.5, 0.5]
+                                _cal["verify_samples"] = []
+                                await websocket.send_json({
+                                    "type": "calibration_verify",
+                                    "target": [0.5, 0.5],
+                                    "message": "Look at the dot to verify calibration",
+                                })
                             else:
-                                await websocket.send_json({"type": "calibration_done", "success": False, "error": "Not enough samples"})
+                                # Re-enable frame skipping
+                                l2cs_pipe = pipelines.get("l2cs")
+                                if l2cs_pipe is not None and hasattr(l2cs_pipe, '_calibrating'):
+                                    l2cs_pipe._calibrating = False
+                                await websocket.send_json(
+                                    {
+                                        "type": "calibration_done",
+                                        "success": False,
+                                        "error": "Not enough samples",
+                                    }
+                                )
 
                 elif data["type"] == "calibration_cancel":
                     _cal["cal"] = None
                     _cal["collecting"] = False
                     _cal["fusion"] = None
+                    l2cs_pipe = pipelines.get("l2cs")
+                    if l2cs_pipe is not None and hasattr(l2cs_pipe, '_calibrating'):
+                        l2cs_pipe._calibrating = False
                     await websocket.send_json({"type": "calibration_cancelled"})
 
         except WebSocketDisconnect:
@@ -914,18 +917,27 @@ async def websocket_endpoint(websocket: WebSocket):
                         if pipe_yaw is not None and pipe_pitch is not None:
                             _cal["cal"].collect_sample(pipe_yaw, pipe_pitch)
 
-                    # Gaze fusion (when L2CS active + calibration fitted)
-                    fusion = _cal.get("fusion")
-                    if (
-                        fusion is not None
-                        and model_name == "l2cs"
-                        and out.get("gaze_yaw") is not None
-                    ):
-                        fuse = fusion.update(
-                            out["gaze_yaw"], out["gaze_pitch"], lm
+                    # Verification sample collection
+                    if _cal.get("verifying") and out.get("gaze_yaw") is not None:
+                        _cal["verify_samples"].append(
+                            (out["gaze_yaw"], out["gaze_pitch"])
                         )
-                        is_focused = fuse["focused"]
-                        confidence = fuse["focus_score"]
+
+                    # Gaze fusion (single call — applied before event logging
+                    # and response to avoid double-EMA smoothing)
+                    fusion = _cal.get("fusion")
+                    has_gaze = out.get("gaze_yaw") is not None
+                    fuse = None
+                    if fusion is not None and has_gaze and (model_name == "l2cs" or use_boost):
+                        fuse = fusion.update(out["gaze_yaw"], out["gaze_pitch"], lm)
+                        if model_name == "l2cs":
+                            # L2CS standalone: fusion fully controls focus decision
+                            is_focused = fuse["focused"]
+                            confidence = fuse["focus_score"]
+                        elif use_boost and not fuse["on_screen"]:
+                            # Boost mode: if gaze is clearly off-screen, override to unfocused
+                            is_focused = False
+                            confidence = min(confidence, 0.1)
 
                     if session_id:
                         metadata = {
@@ -958,17 +970,20 @@ async def websocket_endpoint(websocket: WebSocket):
                     resp["sf"] = round(out.get("s_face", 0), 3)
                     resp["se"] = round(out.get("s_eye", 0), 3)
 
-                    # Gaze fusion fields (L2CS standalone or boost mode)
-                    fusion = _cal.get("fusion")
-                    has_gaze = out.get("gaze_yaw") is not None
-                    if fusion is not None and has_gaze and (model_name == "l2cs" or use_boost):
-                        fuse = fusion.update(out["gaze_yaw"], out["gaze_pitch"], out.get("landmarks"))
+                    # Attach gaze fusion fields + raw gaze angles for visualization
+                    if fuse is not None:
                         resp["gaze_x"] = fuse["gaze_x"]
                         resp["gaze_y"] = fuse["gaze_y"]
                         resp["on_screen"] = fuse["on_screen"]
                         if model_name == "l2cs":
                             resp["focused"] = fuse["focused"]
                             resp["confidence"] = round(fuse["focus_score"], 3)
+                        elif use_boost and not fuse["on_screen"]:
+                            resp["focused"] = False
+                            resp["confidence"] = min(resp["confidence"], 0.1)
+                    if has_gaze:
+                        resp["gaze_yaw"] = round(out["gaze_yaw"], 4)
+                        resp["gaze_pitch"] = round(out["gaze_pitch"], 4)
 
                     if out.get("boost_active"):
                         resp["boost"] = True
@@ -1002,7 +1017,8 @@ async def api_start_session():
 @app.post("/api/sessions/end")
 async def api_end_session(data: SessionEnd):
     summary = await end_session(data.session_id)
-    if not summary: raise HTTPException(status_code=404, detail="Session not found")
+    if not summary:
+        raise HTTPException(status_code=404, detail="Session not found")
     return summary
 
 @app.get("/api/sessions")
@@ -1010,8 +1026,7 @@ async def get_sessions(filter: str = "all", limit: int = 50, offset: int = 0):
     async with aiosqlite.connect(db_path) as db:
         db.row_factory = aiosqlite.Row
 
-        # NEW: If importing/exporting all, remove limit if special flag or high limit
-        # For simplicity: if limit is -1, return all
+        # limit=-1 returns all rows (export); otherwise paginate
         limit_clause = "LIMIT ? OFFSET ?"
         params = []
         
@@ -1031,14 +1046,11 @@ async def get_sessions(filter: str = "all", limit: int = 50, offset: int = 0):
             where_clause = " WHERE start_time >= ?"
             params.append(date_filter.isoformat())
         elif filter == "all":
-            # Just ensure we only get completed sessions or all sessions
             where_clause = " WHERE end_time IS NOT NULL"
 
         query = f"{base_query}{where_clause} ORDER BY start_time DESC"
-        
-        # Handle Limit for Exports
-        if limit == -1: 
-            # No limit clause for export
+
+        if limit == -1:
             pass
         else:
             query += f" {limit_clause}"
@@ -1048,7 +1060,6 @@ async def get_sessions(filter: str = "all", limit: int = 50, offset: int = 0):
         rows = await cursor.fetchall()
         return [dict(row) for row in rows]
 
-# --- NEW: Import Endpoint ---
 @app.post("/api/import")
 async def import_sessions(sessions: List[dict]):
     count = 0
@@ -1057,7 +1068,10 @@ async def import_sessions(sessions: List[dict]):
             for session in sessions:
                 # Use .get() to handle potential missing fields from older versions or edits
                 await db.execute("""
-                    INSERT INTO focus_sessions (start_time, end_time, duration_seconds, focus_score, total_frames, focused_frames, created_at)
+                    INSERT INTO focus_sessions (
+                        start_time, end_time, duration_seconds, focus_score,
+                        total_frames, focused_frames, created_at
+                    )
                     VALUES (?, ?, ?, ?, ?, ?, ?)
                 """, (
                     session.get('start_time'),
@@ -1075,7 +1089,6 @@ async def import_sessions(sessions: List[dict]):
         print(f"Import Error: {e}")
         return {"status": "error", "message": str(e)}
 
-# --- NEW: Clear History Endpoint ---
 @app.delete("/api/history")
 async def clear_history():
     try:
@@ -1094,7 +1107,8 @@ async def get_session(session_id: int):
         db.row_factory = aiosqlite.Row
         cursor = await db.execute("SELECT * FROM focus_sessions WHERE id = ?", (session_id,))
         row = await cursor.fetchone()
-        if not row: raise HTTPException(status_code=404, detail="Session not found")
+        if not row:
+            raise HTTPException(status_code=404, detail="Session not found")
         session = dict(row)
         cursor = await db.execute("SELECT * FROM focus_events WHERE session_id = ? ORDER BY timestamp", (session_id,))
         events = [dict(r) for r in await cursor.fetchall()]
@@ -1107,7 +1121,9 @@ async def get_settings():
         db.row_factory = aiosqlite.Row
         cursor = await db.execute("SELECT * FROM user_settings WHERE id = 1")
         row = await cursor.fetchone()
-        result = dict(row) if row else {'sensitivity': 6, 'notification_enabled': True, 'notification_threshold': 30, 'frame_rate': 30, 'model_name': 'mlp'}
+        result = dict(row) if row else {
+            "model_name": "mlp",
+        }
         result['l2cs_boost'] = _l2cs_boost_enabled
         return result
 
@@ -1122,18 +1138,6 @@ async def update_settings(settings: SettingsUpdate):
 
         updates = []
         params = []
-        if settings.sensitivity is not None:
-            updates.append("sensitivity = ?")
-            params.append(max(1, min(10, settings.sensitivity)))
-        if settings.notification_enabled is not None:
-            updates.append("notification_enabled = ?")
-            params.append(settings.notification_enabled)
-        if settings.notification_threshold is not None:
-            updates.append("notification_threshold = ?")
-            params.append(max(5, min(300, settings.notification_threshold)))
-        if settings.frame_rate is not None:
-            updates.append("frame_rate = ?")
-            params.append(max(5, min(60, settings.frame_rate)))
         if settings.model_name is not None and settings.model_name in pipelines:
             if settings.model_name == "l2cs":
                 loop = asyncio.get_event_loop()
@@ -1158,7 +1162,7 @@ async def update_settings(settings: SettingsUpdate):
 
         if updates:
             query = f"UPDATE user_settings SET {', '.join(updates)} WHERE id = 1"
-            await db.execute(query, params)
+            await db.execute(query, tuple(params))
             await db.commit()
         return {"status": "success", "updated": len(updates) > 0}
 
@@ -1176,7 +1180,12 @@ async def get_system_stats():
             "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}
+        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():
@@ -1187,7 +1196,14 @@ async def get_stats_summary():
         total_focus_time = (await cursor.fetchone())[0] or 0
         cursor = await db.execute("SELECT AVG(focus_score) FROM focus_sessions WHERE end_time IS NOT NULL")
         avg_focus_score = (await cursor.fetchone())[0] or 0.0
-        cursor = await db.execute("SELECT DISTINCT DATE(start_time) as session_date FROM focus_sessions WHERE end_time IS NOT NULL ORDER BY session_date DESC")
+        cursor = await db.execute(
+            """
+            SELECT DISTINCT DATE(start_time) as session_date
+            FROM focus_sessions
+            WHERE end_time IS NOT NULL
+            ORDER BY session_date DESC
+            """
+        )
         dates = [row[0] for row in await cursor.fetchall()]
 
         streak_days = 0
@@ -1196,8 +1212,10 @@ async def get_stats_summary():
             for i, date_str in enumerate(dates):
                 session_date = datetime.fromisoformat(date_str).date()
                 expected_date = current_date - timedelta(days=i)
-                if session_date == expected_date: streak_days += 1
-                else: break
+                if session_date == expected_date:
+                    streak_days += 1
+                else:
+                    break
         return {
             'total_sessions': total_sessions,
             'total_focus_time': int(total_focus_time),

models/L2CS-Net/l2cs/datasets.py

@@ -1,157 +1,156 @@
-import os
-import numpy as np
-import cv2
-
-
-import torch
-from torch.utils.data.dataset import Dataset
-from torchvision import transforms
-from PIL import Image, ImageFilter
-
-
-class Gaze360(Dataset):
-    def __init__(self, path, root, transform, angle, binwidth, train=True):
-        self.transform = transform
-        self.root = root
-        self.orig_list_len = 0
-        self.angle = angle
-        if train==False:
-          angle=90
-        self.binwidth=binwidth
-        self.lines = []
-        if isinstance(path, list):
-            for i in path:
-                with open(i) as f:
-                    print("here")
-                    line = f.readlines()
-                    line.pop(0)
-                    self.lines.extend(line)
-        else:
-            with open(path) as f:
-                lines = f.readlines()
-                lines.pop(0)
-                self.orig_list_len = len(lines)
-                for line in lines:
-                    gaze2d = line.strip().split(" ")[5]
-                    label = np.array(gaze2d.split(",")).astype("float")
-                    if abs((label[0]*180/np.pi)) <= angle and abs((label[1]*180/np.pi)) <= angle:
-                        self.lines.append(line)
-                    
-                        
-        print("{} items removed from dataset that have an angle > {}".format(self.orig_list_len-len(self.lines), angle))
-
-    def __len__(self):
-        return len(self.lines)
-
-    def __getitem__(self, idx):
-        line = self.lines[idx]
-        line = line.strip().split(" ")
-
-        face = line[0]
-        lefteye = line[1]
-        righteye = line[2]
-        name = line[3]
-        gaze2d = line[5]
-        label = np.array(gaze2d.split(",")).astype("float")
-        label = torch.from_numpy(label).type(torch.FloatTensor)
-
-        pitch = label[0]* 180 / np.pi
-        yaw = label[1]* 180 / np.pi
-
-        img = Image.open(os.path.join(self.root, face))
-
-        # fimg = cv2.imread(os.path.join(self.root, face))
-        # fimg = cv2.resize(fimg, (448, 448))/255.0
-        # fimg = fimg.transpose(2, 0, 1)
-        # img=torch.from_numpy(fimg).type(torch.FloatTensor)
-
-        if self.transform:
-            img = self.transform(img)        
-        
-        # Bin values
-        bins = np.array(range(-1*self.angle, self.angle, self.binwidth))
-        binned_pose = np.digitize([pitch, yaw], bins) - 1
-
-        labels = binned_pose
-        cont_labels = torch.FloatTensor([pitch, yaw])
-        
-
-        return img, labels, cont_labels, name
-
-class Mpiigaze(Dataset): 
-  def __init__(self, pathorg, root, transform, train, angle,fold=0):
-    self.transform = transform
-    self.root = root
-    self.orig_list_len = 0
-    self.lines = []
-    path=pathorg.copy()
-    if train==True:
-      path.pop(fold)
-    else:
-      path=path[fold]
-    if isinstance(path, list):
-        for i in path:
-            with open(i) as f:
-                lines = f.readlines()
-                lines.pop(0)
-                self.orig_list_len += len(lines)
-                for line in lines:
-                    gaze2d = line.strip().split(" ")[7]
-                    label = np.array(gaze2d.split(",")).astype("float")
-                    if abs((label[0]*180/np.pi)) <= angle and abs((label[1]*180/np.pi)) <= angle:
-                        self.lines.append(line)
-    else:
-      with open(path) as f:
-        lines = f.readlines()
-        lines.pop(0)
-        self.orig_list_len += len(lines)
-        for line in lines:
-            gaze2d = line.strip().split(" ")[7]
-            label = np.array(gaze2d.split(",")).astype("float")
-            if abs((label[0]*180/np.pi)) <= 42 and abs((label[1]*180/np.pi)) <= 42:
-                self.lines.append(line)
-   
-    print("{} items removed from dataset that have an angle > {}".format(self.orig_list_len-len(self.lines),angle))
-        
-  def __len__(self):
-    return len(self.lines)
-
-  def __getitem__(self, idx):
-    line = self.lines[idx]
-    line = line.strip().split(" ")
-
-    name = line[3]
-    gaze2d = line[7]
-    head2d = line[8]
-    lefteye = line[1]
-    righteye = line[2]
-    face = line[0]
-
-    label = np.array(gaze2d.split(",")).astype("float")
-    label = torch.from_numpy(label).type(torch.FloatTensor)
-
-
-    pitch = label[0]* 180 / np.pi
-    yaw = label[1]* 180 / np.pi
-
-    img = Image.open(os.path.join(self.root, face))
-
-    # fimg = cv2.imread(os.path.join(self.root, face))
-    # fimg = cv2.resize(fimg, (448, 448))/255.0
-    # fimg = fimg.transpose(2, 0, 1)
-    # img=torch.from_numpy(fimg).type(torch.FloatTensor)
-    
-    if self.transform:
-        img = self.transform(img)        
-    
-    # Bin values
-    bins = np.array(range(-42, 42,3))
-    binned_pose = np.digitize([pitch, yaw], bins) - 1
-
-    labels = binned_pose
-    cont_labels = torch.FloatTensor([pitch, yaw])
-
-
-    return img, labels, cont_labels, name
-
-
+import os
+import numpy as np
+import cv2
+
+
+import torch
+from torch.utils.data.dataset import Dataset
+from torchvision import transforms
+from PIL import Image, ImageFilter
+
+
+class Gaze360(Dataset):
+    def __init__(self, path, root, transform, angle, binwidth, train=True):
+        self.transform = transform
+        self.root = root
+        self.orig_list_len = 0
+        self.angle = angle
+        if train==False:
+          angle=90
+        self.binwidth=binwidth
+        self.lines = []
+        if isinstance(path, list):
+            for i in path:
+                with open(i) as f:
+                    line = f.readlines()
+                    line.pop(0)
+                    self.lines.extend(line)
+        else:
+            with open(path) as f:
+                lines = f.readlines()
+                lines.pop(0)
+                self.orig_list_len = len(lines)
+                for line in lines:
+                    gaze2d = line.strip().split(" ")[5]
+                    label = np.array(gaze2d.split(",")).astype("float")
+                    if abs((label[0]*180/np.pi)) <= angle and abs((label[1]*180/np.pi)) <= angle:
+                        self.lines.append(line)
+                    
+                        
+        print("{} items removed from dataset that have an angle > {}".format(self.orig_list_len-len(self.lines), angle))
+
+    def __len__(self):
+        return len(self.lines)
+
+    def __getitem__(self, idx):
+        line = self.lines[idx]
+        line = line.strip().split(" ")
+
+        face = line[0]
+        lefteye = line[1]
+        righteye = line[2]
+        name = line[3]
+        gaze2d = line[5]
+        label = np.array(gaze2d.split(",")).astype("float")
+        label = torch.from_numpy(label).type(torch.FloatTensor)
+
+        pitch = label[0]* 180 / np.pi
+        yaw = label[1]* 180 / np.pi
+
+        img = Image.open(os.path.join(self.root, face))
+
+        # fimg = cv2.imread(os.path.join(self.root, face))
+        # fimg = cv2.resize(fimg, (448, 448))/255.0
+        # fimg = fimg.transpose(2, 0, 1)
+        # img=torch.from_numpy(fimg).type(torch.FloatTensor)
+
+        if self.transform:
+            img = self.transform(img)        
+        
+        # Bin values
+        bins = np.array(range(-1*self.angle, self.angle, self.binwidth))
+        binned_pose = np.digitize([pitch, yaw], bins) - 1
+
+        labels = binned_pose
+        cont_labels = torch.FloatTensor([pitch, yaw])
+        
+
+        return img, labels, cont_labels, name
+
+class Mpiigaze(Dataset): 
+  def __init__(self, pathorg, root, transform, train, angle,fold=0):
+    self.transform = transform
+    self.root = root
+    self.orig_list_len = 0
+    self.lines = []
+    path=pathorg.copy()
+    if train==True:
+      path.pop(fold)
+    else:
+      path=path[fold]
+    if isinstance(path, list):
+        for i in path:
+            with open(i) as f:
+                lines = f.readlines()
+                lines.pop(0)
+                self.orig_list_len += len(lines)
+                for line in lines:
+                    gaze2d = line.strip().split(" ")[7]
+                    label = np.array(gaze2d.split(",")).astype("float")
+                    if abs((label[0]*180/np.pi)) <= angle and abs((label[1]*180/np.pi)) <= angle:
+                        self.lines.append(line)
+    else:
+      with open(path) as f:
+        lines = f.readlines()
+        lines.pop(0)
+        self.orig_list_len += len(lines)
+        for line in lines:
+            gaze2d = line.strip().split(" ")[7]
+            label = np.array(gaze2d.split(",")).astype("float")
+            if abs((label[0]*180/np.pi)) <= 42 and abs((label[1]*180/np.pi)) <= 42:
+                self.lines.append(line)
+   
+    print("{} items removed from dataset that have an angle > {}".format(self.orig_list_len-len(self.lines),angle))
+        
+  def __len__(self):
+    return len(self.lines)
+
+  def __getitem__(self, idx):
+    line = self.lines[idx]
+    line = line.strip().split(" ")
+
+    name = line[3]
+    gaze2d = line[7]
+    head2d = line[8]
+    lefteye = line[1]
+    righteye = line[2]
+    face = line[0]
+
+    label = np.array(gaze2d.split(",")).astype("float")
+    label = torch.from_numpy(label).type(torch.FloatTensor)
+
+
+    pitch = label[0]* 180 / np.pi
+    yaw = label[1]* 180 / np.pi
+
+    img = Image.open(os.path.join(self.root, face))
+
+    # fimg = cv2.imread(os.path.join(self.root, face))
+    # fimg = cv2.resize(fimg, (448, 448))/255.0
+    # fimg = fimg.transpose(2, 0, 1)
+    # img=torch.from_numpy(fimg).type(torch.FloatTensor)
+    
+    if self.transform:
+        img = self.transform(img)        
+    
+    # Bin values
+    bins = np.array(range(-42, 42,3))
+    binned_pose = np.digitize([pitch, yaw], bins) - 1
+
+    labels = binned_pose
+    cont_labels = torch.FloatTensor([pitch, yaw])
+
+
+    return img, labels, cont_labels, name
+
+

models/L2CS-Net/l2cs/pipeline.py

@@ -1,4 +1,5 @@
 import pathlib
+import time
 from typing import Union
 
 import cv2
@@ -15,10 +16,10 @@ from .results import GazeResultContainer
 class Pipeline:
 
     def __init__(
-        self, 
-        weights: pathlib.Path, 
+        self,
+        weights: pathlib.Path,
         arch: str,
-        device: str = 'cpu', 
+        device: str = 'cpu',
         include_detector:bool = True,
         confidence_threshold:float = 0.5
         ):
@@ -31,10 +32,18 @@ class Pipeline:
 
         # Create L2CS model
         self.model = getArch(arch, 90)
-        self.model.load_state_dict(torch.load(self.weights, map_location=device))
+        # PyTorch 2.6+ defaults weights_only=True; these checkpoints need full unpickle
+        self.model.load_state_dict(
+            torch.load(self.weights, map_location=device, weights_only=False)
+        )
         self.model.to(self.device)
         self.model.eval()
 
+        # Half precision on GPU for ~2x speedup
+        self._use_half = (device.type != 'cpu')
+        if self._use_half:
+            self.model.half()
+
         # Create RetinaFace if requested
         if self.include_detector:
 
@@ -47,6 +56,19 @@ class Pipeline:
             self.idx_tensor = [idx for idx in range(90)]
             self.idx_tensor = torch.FloatTensor(self.idx_tensor).to(self.device)
 
+        # Warmup: dummy forward pass to avoid cold-start latency
+        self._warmup()
+
+    def _warmup(self):
+        """Run a dummy forward pass to warm up the model and CUDA kernels."""
+        dummy = np.zeros((224, 224, 3), dtype=np.uint8)
+        try:
+            with torch.no_grad():
+                self.predict_gaze(dummy)
+            print("[L2CS] Model warmup complete")
+        except Exception as e:
+            print(f"[L2CS] Warmup failed (non-fatal): {e}")
+
     def step(self, frame: np.ndarray) -> GazeResultContainer:
 
         # Creating containers
@@ -56,9 +78,12 @@ class Pipeline:
         scores = []
 
         if self.include_detector:
+            t0 = time.perf_counter()
             faces = self.detector(frame)
+            t_detect = (time.perf_counter() - t0) * 1000
 
-            if faces is not None: 
+            if faces is not None:
+                t0 = time.perf_counter()
                 for box, landmark, score in faces:
 
                     # Apply threshold
@@ -74,7 +99,7 @@ class Pipeline:
                         y_min = 0
                     x_max=int(box[2])
                     y_max=int(box[3])
-                    
+
                     # Crop image
                     img = frame[y_min:y_max, x_min:x_max]
                     img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
@@ -86,8 +111,20 @@ class Pipeline:
                     landmarks.append(landmark)
                     scores.append(score)
 
+                t_preprocess = (time.perf_counter() - t0) * 1000
+
                 # Predict gaze
-                pitch, yaw = self.predict_gaze(np.stack(face_imgs))
+                t0 = time.perf_counter()
+                with torch.no_grad():
+                    pitch, yaw = self.predict_gaze(np.stack(face_imgs))
+                t_inference = (time.perf_counter() - t0) * 1000
+
+                # Log timing every 30 frames (avoid spamming)
+                if not hasattr(self, '_step_count'):
+                    self._step_count = 0
+                self._step_count += 1
+                if self._step_count % 30 == 1:
+                    print(f"[L2CS timing] detect={t_detect:.1f}ms preprocess={t_preprocess:.1f}ms inference={t_inference:.1f}ms total={t_detect+t_preprocess+t_inference:.1f}ms")
 
             else:
 
@@ -95,7 +132,8 @@ class Pipeline:
                 yaw = np.empty((0,1))
 
         else:
-            pitch, yaw = self.predict_gaze(frame)
+            with torch.no_grad():
+                pitch, yaw = self.predict_gaze(frame)
 
         # Save data
         results = GazeResultContainer(
@@ -109,7 +147,7 @@ class Pipeline:
         return results
 
     def predict_gaze(self, frame: Union[np.ndarray, torch.Tensor]):
-        
+
         # Prepare input
         if isinstance(frame, np.ndarray):
             img = prep_input_numpy(frame, self.device)
@@ -117,17 +155,21 @@ class Pipeline:
             img = frame
         else:
             raise RuntimeError("Invalid dtype for input")
-    
-        # Predict 
+
+        # Half precision on GPU
+        if self._use_half:
+            img = img.half()
+
+        # Forward pass (caller should wrap in torch.no_grad())
         gaze_pitch, gaze_yaw = self.model(img)
-        pitch_predicted = self.softmax(gaze_pitch)
-        yaw_predicted = self.softmax(gaze_yaw)
-        
+        pitch_predicted = self.softmax(gaze_pitch.float())
+        yaw_predicted = self.softmax(gaze_yaw.float())
+
         # Get continuous predictions in degrees.
         pitch_predicted = torch.sum(pitch_predicted.data * self.idx_tensor, dim=1) * 4 - 180
         yaw_predicted = torch.sum(yaw_predicted.data * self.idx_tensor, dim=1) * 4 - 180
-        
-        pitch_predicted= pitch_predicted.cpu().detach().numpy()* np.pi/180.0
-        yaw_predicted= yaw_predicted.cpu().detach().numpy()* np.pi/180.0
+
+        pitch_predicted = pitch_predicted.cpu().detach().numpy() * np.pi / 180.0
+        yaw_predicted = yaw_predicted.cpu().detach().numpy() * np.pi / 180.0
 
         return pitch_predicted, yaw_predicted

models/gaze_calibration.py

@@ -73,6 +73,12 @@ class GazeCalibration:
         pt.pitches.append(float(pitch_rad))
 
     def advance(self):
+        # Log sample count for the point we're leaving
+        if self._current_idx < len(self._points):
+            pt = self._points[self._current_idx]
+            print(f"[CAL] Point {self._current_idx} "
+                  f"target=({pt.target_x:.2f},{pt.target_y:.2f}) "
+                  f"collected {len(pt.yaws)} samples")
         self._current_idx += 1
         return self._current_idx < len(self._targets)
 
@@ -112,6 +118,17 @@ class GazeCalibration:
             W, _, _, _ = np.linalg.lstsq(A, B, rcond=None)
             self._W = W
             self._fitted = True
+            # Log calibration quality
+            predicted = A @ W
+            residuals = B - predicted
+            rmse = float(np.sqrt(np.mean(residuals ** 2)))
+            print(f"[CAL] Fitted with {len(rows_A)} points, "
+                  f"yaw_bias={self._yaw_bias:.4f} pitch_bias={self._pitch_bias:.4f} "
+                  f"RMSE={rmse:.4f}")
+            # Verify center prediction
+            cx, cy = self.predict(self._yaw_bias, self._pitch_bias)
+            print(f"[CAL] Center prediction: ({cx:.3f}, {cy:.3f}) — "
+                  f"should be near (0.5, 0.5)")
             return True
         except np.linalg.LinAlgError:
             return False
@@ -121,7 +138,16 @@ class GazeCalibration:
             return 0.5, 0.5
         feat = self._poly_features(yaw_rad - self._yaw_bias, pitch_rad - self._pitch_bias)
         xy = feat @ self._W
-        return float(np.clip(xy[0], 0, 1)), float(np.clip(xy[1], 0, 1))
+        # Allow out-of-bounds values so on_screen detection can work.
+        # Clamp to [-0.5, 1.5] to prevent polynomial extrapolation going wild.
+        return float(np.clip(xy[0], -0.5, 1.5)), float(np.clip(xy[1], -0.5, 1.5))
+
+    def verify(self, yaw_rad, pitch_rad, target_x=0.5, target_y=0.5):
+        """Check if a gaze prediction lands near the expected target.
+        Returns (predicted_x, predicted_y, error, passed)."""
+        px, py = self.predict(yaw_rad, pitch_rad)
+        err = float(np.sqrt((px - target_x) ** 2 + (py - target_y) ** 2))
+        return px, py, err, err < 0.25
 
     def to_dict(self):
         return {

models/gaze_eye_fusion.py

@@ -8,12 +8,15 @@ from .gaze_calibration import GazeCalibration
 from .eye_scorer import compute_avg_ear
 
 _EAR_BLINK = 0.18
-_ON_SCREEN_MARGIN = 0.08
+_ON_SCREEN_MARGIN = 0.15
+
+
+_SUSTAINED_CLOSE_FRAMES = 4  # ~250ms at 15fps — ignore brief blinks
 
 
 class GazeEyeFusion:
 
-    def __init__(self, calibration, ear_weight=0.3, gaze_weight=0.7, focus_threshold=0.52):
+    def __init__(self, calibration, ear_weight=0.25, gaze_weight=0.75, focus_threshold=0.42):
         if not calibration.is_fitted:
             raise ValueError("Calibration must be fitted first")
         self._cal = calibration
@@ -22,7 +25,8 @@ class GazeEyeFusion:
         self._threshold = focus_threshold
         self._smooth_x = 0.5
         self._smooth_y = 0.5
-        self._alpha = 0.5
+        self._alpha = 0.35
+        self._closed_streak = 0
 
     def update(self, yaw_rad, pitch_rad, landmarks):
         gx, gy = self._cal.predict(yaw_rad, pitch_rad)
@@ -41,20 +45,32 @@ class GazeEyeFusion:
         ear_score = 1.0
         if landmarks is not None:
             ear = compute_avg_ear(landmarks)
-            ear_score = 0.0 if ear < _EAR_BLINK else min(ear / 0.30, 1.0)
+            if ear < _EAR_BLINK:
+                ear_score = 0.0
+                self._closed_streak += 1
+            else:
+                ear_score = min(ear / 0.30, 1.0)
+                self._closed_streak = 0
 
-        # penalise gaze near screen edges
-        gaze_score = 1.0 if on_screen else 0.0
-        if on_screen:
-            dx = max(0.0, abs(gx - 0.5) - 0.3)
-            dy = max(0.0, abs(gy - 0.5) - 0.3)
-            gaze_score = max(0.0, 1.0 - math.sqrt(dx**2 + dy**2) * 5.0)
+        # Gaze score: 1.0 anywhere on screen, gentle falloff near edges,
+        # 0.0 when clearly off screen.
+        if not on_screen:
+            gaze_score = 0.0
+        else:
+            dx = max(0.0, abs(gx - 0.5) - 0.4)
+            dy = max(0.0, abs(gy - 0.5) - 0.4)
+            dist = math.sqrt(dx ** 2 + dy ** 2)
+            gaze_score = max(0.0, 1.0 - dist * 2.5)
 
-        score = float(np.clip(self._gaze_w * gaze_score + self._ear_w * ear_score, 0, 1))
+        # Sustained eye closure veto — ignore brief blinks (< 4 frames)
+        if self._closed_streak >= _SUSTAINED_CLOSE_FRAMES:
+            score = 0.0
+        else:
+            score = float(np.clip(self._gaze_w * gaze_score + self._ear_w * ear_score, 0, 1))
 
         return {
-            "gaze_x": round(float(gx), 4),
-            "gaze_y": round(float(gy), 4),
+            "gaze_x": round(float(np.clip(gx, 0, 1)), 4),
+            "gaze_y": round(float(np.clip(gy, 0, 1)), 4),
             "on_screen": on_screen,
             "ear": round(ear, 4) if ear is not None else None,
             "focus_score": round(score, 4),
@@ -64,3 +80,4 @@ class GazeEyeFusion:
     def reset(self):
         self._smooth_x = 0.5
         self._smooth_y = 0.5
+        self._closed_streak = 0

models/xgboost/fetch_sweep_results.py

@@ -1,46 +0,0 @@
-import csv
-from clearml import Task
-
-print("Fetching tasks from ClearML...")
-tasks = Task.get_tasks(
-    project_name='FocusGuards Large Group Project',
-    tags=['optuna_manual'],
-    task_filter={'status': ['completed', 'failed']}
-)
-
-results = []
-for t in tasks:
-    if t.get_status() != 'completed': continue
-    params = t.get_parameters()
-    
-    # We reported logloss as Loss/Val, and F1 as Summary/val_f1
-    metrics = t.get_last_scalar_metrics()
-    val_loss = metrics.get('Loss', {}).get('Val', {}).get('last', float('inf'))
-    val_f1 = metrics.get('Summary', {}).get('val_f1', {}).get('last', 0.0)
-    val_acc = metrics.get('Summary', {}).get('val_accuracy', {}).get('last', 0.0)
-    
-    row = {
-        'task_id': t.id,
-        'val_loss': round(val_loss, 4) if val_loss != float('inf') else val_loss,
-        'val_f1': round(val_f1, 4),
-        'val_acc': round(val_acc, 4),
-    }
-    
-    # Default Optuna parameter names parsed back from ClearML storage format
-    for k in ['n_estimators', 'max_depth', 'learning_rate', 'subsample', 'colsample_bytree', 'reg_alpha', 'reg_lambda']:
-        val = params.get(f"General/{k}") or params.get(k)
-        row[k] = val
-        
-    results.append(row)
-
-# Sort by lowest validation loss
-results.sort(key=lambda x: x['val_loss'])
-
-filepath = 'models/xgboost/sweep_results_all_40.csv'
-with open(filepath, 'w', newline='') as f:
-    fieldnames = ['task_id', 'val_loss', 'val_f1', 'val_acc', 'n_estimators', 'max_depth', 'learning_rate', 'subsample', 'colsample_bytree', 'reg_alpha', 'reg_lambda']
-    writer = csv.DictWriter(f, fieldnames=fieldnames, extrasaction='ignore')
-    writer.writeheader()
-    writer.writerows(results)
-
-print(f"Successfully grabbed {len(results)} trials and saved to {filepath}")

package-lock.json

@@ -54,7 +54,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1429,7 +1428,6 @@
       "integrity": "sha512-tORuanb01iEzWvMGVGv2ZDhYZVeRMrw453DCSAIn/5yvcSVnMoUMTyf33nQJLahYEnv9xqrTNbgz4qY5EfSh0g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1471,7 +1469,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1577,7 +1574,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -1799,7 +1795,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2486,7 +2481,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2548,7 +2542,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2782,7 +2775,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -2904,7 +2896,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

public/test_data.json

@@ -1,112 +0,0 @@
-[
-  {
-    "id": 29,
-    "start_time": "2026-03-10T19:27:26.313545",
-    "end_time": "2026-03-10T19:27:59.454192",
-    "duration_seconds": 33,
-    "focus_score": 0.8848484848484849,
-    "total_frames": 165,
-    "focused_frames": 146,
-    "created_at": "2026-03-10 19:27:26"
-  },
-  {
-    "id": 27,
-    "start_time": "2026-03-10T15:09:42.264889",
-    "end_time": "2026-03-10T15:09:52.066905",
-    "duration_seconds": 9,
-    "focus_score": 0.575,
-    "total_frames": 120,
-    "focused_frames": 69,
-    "created_at": "2026-03-10 15:09:42"
-  },
-  {
-    "id": 20,
-    "start_time": "2026-03-10T12:10:08.838619",
-    "end_time": "2026-03-10T12:10:22.613099",
-    "duration_seconds": 13,
-    "focus_score": 0.3076923076923077,
-    "total_frames": 65,
-    "focused_frames": 20,
-    "created_at": "2026-03-10 12:10:08"
-  },
-  {
-    "id": 19,
-    "start_time": "2026-03-10T12:10:04.664410",
-    "end_time": "2026-03-10T12:21:08.528749",
-    "duration_seconds": 663,
-    "focus_score": 1,
-    "total_frames": 19,
-    "focused_frames": 19,
-    "created_at": "2026-03-10 12:10:04"
-  },
-  {
-    "id": 15,
-    "start_time": "2026-03-10T12:03:07.498863",
-    "end_time": "2026-03-10T12:03:19.454642",
-    "duration_seconds": 11,
-    "focus_score": 0.896551724137931,
-    "total_frames": 58,
-    "focused_frames": 52,
-    "created_at": "2026-03-10 12:03:07"
-  },
-  {
-    "id": 13,
-    "start_time": "2026-03-10T12:02:40.121044",
-    "end_time": "2026-03-10T12:03:03.700510",
-    "duration_seconds": 23,
-    "focus_score": 0.6923076923076923,
-    "total_frames": 117,
-    "focused_frames": 81,
-    "created_at": "2026-03-10 12:02:40"
-  },
-  {
-    "id": 12,
-    "start_time": "2026-03-10T12:02:36.741156",
-    "end_time": "2026-03-10T12:05:59.301680",
-    "duration_seconds": 202,
-    "focus_score": 0.13333333333333333,
-    "total_frames": 15,
-    "focused_frames": 2,
-    "created_at": "2026-03-10 12:02:36"
-  },
-  {
-    "id": 8,
-    "start_time": "2026-03-10T11:35:26.680264",
-    "end_time": "2026-03-10T11:36:07.574547",
-    "duration_seconds": 40,
-    "focus_score": 0.6225490196078431,
-    "total_frames": 204,
-    "focused_frames": 127,
-    "created_at": "2026-03-10 11:35:26"
-  },
-  {
-    "id": 7,
-    "start_time": "2026-03-10T11:35:16.587504",
-    "end_time": "2026-03-10T12:17:35.889266",
-    "duration_seconds": 2539,
-    "focus_score": 0.9387755102040817,
-    "total_frames": 49,
-    "focused_frames": 46,
-    "created_at": "2026-03-10 11:35:16"
-  },
-  {
-    "id": 4,
-    "start_time": "2026-03-10T11:16:31.204287",
-    "end_time": "2026-03-10T11:16:52.632759",
-    "duration_seconds": 21,
-    "focus_score": 0.75,
-    "total_frames": 104,
-    "focused_frames": 78,
-    "created_at": "2026-03-10 11:16:31"
-  },
-  {
-    "id": 2,
-    "start_time": "2026-03-10T11:15:37.543154",
-    "end_time": "2026-03-10T11:17:41.674593",
-    "duration_seconds": 124,
-    "focus_score": 0.9557522123893806,
-    "total_frames": 113,
-    "focused_frames": 108,
-    "created_at": "2026-03-10 11:15:37"
-  }
-]

src/App.css

@@ -39,9 +39,9 @@ body {
     background-color: white;
     display: flex;
     align-items: center;
-    justify-content: center; /* Center buttons horizontally */
+    justify-content: flex-start;
     gap: 0;
-    padding: 0 24px 0 76px;
+    padding: 0 16px 0 20px;
     box-sizing: border-box;
     box-shadow: 0 2px 5px rgba(0,0,0,0.05);
     position: fixed;
@@ -55,6 +55,16 @@ body {
     white-space: nowrap;
 }
 
+.top-menu-links {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0;
+    min-width: 0;
+}
+
 .menu-btn {
     background: none;
     border: none;
@@ -175,7 +185,7 @@ body {
 }
 
 .focus-display-shell {
-    background: linear-gradient(180deg, #f7f5f2 0%, #f1f0ec 100%);
+    background: #101010;
 }
 
 .focus-flow-overlay {
@@ -459,29 +469,182 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px 16px;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    margin: 10px auto;
+    max-width: 700px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+}
+
+/* --- Model info card --- */
+.model-card {
+    width: 60%;
+    margin: 14px auto 0;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 14px;
+    padding: 18px 22px 14px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
+    animation: cardFadeIn 0.25s ease;
+    box-sizing: border-box;
+}
+
+.model-card-details {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+}
+
+@keyframes cardFadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+.model-card-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 4px;
+}
+
+.model-card-title {
+    margin: 0;
+    font-size: 1.05rem;
+    color: #1a1a2e;
+}
+
+.model-card-badge {
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: #e7f3ff;
+    color: #007BFF;
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.model-card-badge-baseline {
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: #fff3e0;
+    color: #e67e22;
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.model-card-tagline {
+    margin: 0 0 12px;
+    color: #667281;
+    font-size: 0.85rem;
+    line-height: 1.4;
+}
+
+.model-card-metrics {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
     gap: 8px;
-    padding: 8px 16px;
-    background: #1a1a2e;
+    margin-bottom: 14px;
+}
+
+.model-card-metric {
+    text-align: center;
+    padding: 8px 4px;
+    background: #f8fbff;
+    border: 1px solid #e8f0fe;
+    border-radius: 10px;
+}
+
+.model-card-metric-value {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: 800;
+    color: #007BFF;
+    line-height: 1.2;
+}
+
+.model-card-metric-label {
+    display: block;
+    font-size: 0.65rem;
+    color: #8899aa;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-top: 2px;
+}
+
+.model-card-section {
+    margin-bottom: 8px;
+}
+
+.model-card-section h4 {
+    margin: 0 0 2px;
+    font-size: 0.78rem;
+    color: #555;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.model-card-section p {
+    margin: 0;
+    font-size: 0.82rem;
+    color: #4a4a4a;
+    line-height: 1.5;
+}
+
+.model-card-eval {
+    margin-top: 10px;
+    padding: 6px 10px;
+    background: #f5f7fa;
     border-radius: 8px;
-    margin: 8px auto;
-    max-width: 600px;
+    font-size: 0.72rem;
+    color: #7a8a9a;
+    font-weight: 600;
+}
+
+@media (max-width: 768px) {
+    .model-card {
+        width: 90%;
+    }
+    .model-card-metrics {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .model-card-details {
+        grid-template-columns: 1fr;
+    }
 }
 
 .focus-model-label {
-    color: #aaa;
+    color: #666;
     font-size: 13px;
+    font-weight: 700;
     margin-right: 4px;
 }
 
 .focus-model-button {
-    padding: 5px 14px;
+    padding: 6px 16px;
     border-radius: 16px;
-    border: 1px solid #555;
-    background: transparent;
-    color: #ccc;
+    border: 1px solid #d0d0d0;
+    background: #f5f5f5;
+    color: #555;
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.focus-model-button:hover {
+    border-color: #007BFF;
+    color: #007BFF;
+    background: #f0f7ff;
 }
 
 .focus-model-button.active {
@@ -490,6 +653,87 @@ body {
     color: #fff;
 }
 
+.focus-model-sep {
+    width: 1px;
+    height: 24px;
+    background: #d0d0d0;
+    margin: 0 4px;
+}
+
+.eye-gaze-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border-radius: 16px;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.25s ease;
+}
+
+.eye-gaze-toggle.off {
+    border: 1px solid #d0d0d0;
+    background: #f5f5f5;
+    color: #888;
+}
+
+.eye-gaze-toggle.off:hover {
+    border-color: #007BFF;
+    color: #007BFF;
+    background: #f0f7ff;
+}
+
+.eye-gaze-toggle.on {
+    border: 2px solid #007BFF;
+    background: #007BFF;
+    color: #fff;
+    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
+}
+
+.eye-gaze-toggle.on:hover {
+    background: #0069d9;
+    border-color: #0069d9;
+}
+
+.eye-gaze-icon {
+    flex-shrink: 0;
+}
+
+.focus-model-button.recalibrate {
+    border: 1px solid #007BFF;
+    background: transparent;
+    color: #007BFF;
+    font-weight: 600;
+    font-size: 11px;
+}
+
+.focus-model-button.recalibrate:hover {
+    background: #f0f7ff;
+}
+
+.focus-system-stats {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 4px 16px;
+    margin: 4px auto;
+    max-width: 400px;
+    font-size: 12px;
+    color: #888;
+}
+
+.focus-system-stats strong {
+    color: #555;
+}
+
+.focus-system-stats-sep {
+    width: 1px;
+    height: 12px;
+    background: #ccc;
+}
+
 #display-area video {
     width: 100%;
     height: 100%;
@@ -546,8 +790,8 @@ body {
 }
 
 .action-btn.green { background-color: #28a745; }
-.action-btn.yellow { background-color: #ffce0b; }
-.action-btn.blue { background-color: #326ed6; }
+.action-btn.blue { background-color: #007BFF; }
+.action-btn.orange { background-color: #e67e22; }
 .action-btn.red { background-color: #dc3545; }
 
 /* 4. Frame Control */
@@ -1548,14 +1792,163 @@ border: 2px solid transparent;
 
 .avatar-circle.user { background-color: #555; }
 .avatar-circle.admin { background-color: #ffaa00; border-color: #fff; box-shadow: 0 0 10px rgba(255, 170, 0, 0.5); }
+
+/* ================ CALIBRATION OVERLAY ================ */
+
+.cal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(8, 15, 28, 0.94);
+  backdrop-filter: blur(6px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Nunito', sans-serif;
+}
+
+/* ---- header / instructions ---- */
+.cal-header {
+  position: absolute;
+  top: 36px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  pointer-events: none;
+}
+
+.cal-eyebrow {
+  display: inline-block;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 0.82rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.cal-eyebrow-collect {
+  background: rgba(40, 167, 69, 0.18);
+  color: #5ee882;
+}
+
+.cal-eyebrow-verify {
+  background: rgba(0, 123, 255, 0.18);
+  color: #6bb8ff;
+}
+
+.cal-instruction {
+  margin: 10px 0 0;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+/* ---- target dot + ring ---- */
+.cal-target {
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+
+.cal-ring {
+  position: absolute;
+  left: -30px;
+  top: -30px;
+}
+
+.cal-dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  transition: box-shadow 0.3s ease;
+}
+
+/* ---- cancel button (matches focus-flow-secondary) ---- */
+.cal-cancel {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 999px;
+  padding: 12px 28px;
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.85);
+  font-family: 'Nunito', sans-serif;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.cal-cancel:hover {
+  background: rgba(255, 255, 255, 0.14);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+/* ---- done card (matches focus-flow-card style) ---- */
+.cal-done-card {
+  text-align: center;
+  padding: 36px 44px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
+  animation: fadeIn 0.4s ease;
+}
+
+.cal-done-success {
+  background: linear-gradient(168deg, rgba(40, 167, 69, 0.15) 0%, rgba(20, 30, 48, 0.95) 60%);
+  border-color: rgba(40, 167, 69, 0.3);
+}
+
+.cal-done-fail {
+  background: linear-gradient(168deg, rgba(220, 53, 69, 0.15) 0%, rgba(20, 30, 48, 0.95) 60%);
+  border-color: rgba(220, 53, 69, 0.3);
+}
+
+.cal-done-eyebrow {
+  display: inline-block;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-bottom: 14px;
+}
+
+.cal-done-success .cal-done-eyebrow {
+  background: rgba(40, 167, 69, 0.2);
+  color: #5ee882;
+}
+
+.cal-done-fail .cal-done-eyebrow {
+  background: rgba(220, 53, 69, 0.2);
+  color: #f87171;
+}
+
+.cal-done-title {
+  margin: 0 0 8px;
+  font-size: 1.6rem;
+  color: #fff;
+}
+
+.cal-done-subtitle {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
 /* ================= Home page 2x2 responsive button grid ================= */
 .home-button-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr; /* Force a clean two-column split. */
-  gap: 20px; /* Spacing between buttons. */
+  display: flex;
+  justify-content: center;
   width: 100%;
-  max-width: 500px; /* Cap the width so the grid does not feel oversized. */
-  margin: 40px auto 0 auto; /* Add top spacing and keep the grid centered. */
+  max-width: 360px;
+  margin: 40px auto 0;
 }
 
 .home-button-grid .btn-main {

src/App.jsx

@@ -14,12 +14,8 @@ function App() {
   const videoManagerRef = useRef(null);
   const [isSessionActive, setIsSessionActive] = useState(false);
   const [sessionResult, setSessionResult] = useState(null);
-  const [role, setRole] = useState('user'); 
 
-  // Clear persisted history on the initial page load without showing a prompt.
   useEffect(() => {
-    fetch('/api/history', { method: 'DELETE' }).catch(err => console.error(err));
-
     const callbacks = {
       onSessionStart: () => {
         setIsSessionActive(true);
@@ -37,54 +33,52 @@ function App() {
     };
   }, []);
 
-  // Clicking the avatar always returns the user to the Home tab.
-  const handleAvatarClick = () => {
-    setActiveTab('home');
-  };
+  const renderMenuButton = (tabId, label) => (
+    <button
+      className={`menu-btn ${activeTab === tabId ? 'active' : ''}`}
+      onClick={() => setActiveTab(tabId)}
+    >
+      {label}
+    </button>
+  );
 
   return (
     <div className="app-container">
       <nav id="top-menu">
-        <div className="avatar-container" onClick={handleAvatarClick} title="Back to Home">
-          <div className={`avatar-circle ${role}`}>
-            {role === 'admin' ? 'A' : 'U'}
-          </div>
-        </div>
-
+        <div className="top-menu-links">
+        <button
+          type="button"
+          className={`menu-btn ${activeTab === 'home' ? 'active' : ''}`}
+          onClick={() => setActiveTab('home')}
+        >
+          Home
+        </button>
+        <div className="separator" aria-hidden />
         <button className={`menu-btn ${activeTab === 'focus' ? 'active' : ''}`} onClick={() => setActiveTab('focus')}>
           Start Focus {isSessionActive && <span style={{ marginLeft: '8px', color: '#00FF00' }}>●</span>}
         </button>
         <div className="separator"></div>
 
-        <button className={`menu-btn ${activeTab === 'achievement' ? 'active' : ''}`} onClick={() => setActiveTab('achievement')}>
-          My Achievement
-        </button>
+        {renderMenuButton('achievement', 'My Achievement')}
         <div className="separator"></div>
 
-        <button className={`menu-btn ${activeTab === 'records' ? 'active' : ''}`} onClick={() => setActiveTab('records')}>
-          My Records
-        </button>
+        {renderMenuButton('records', 'My Records')}
         <div className="separator"></div>
 
-        <button className={`menu-btn ${activeTab === 'customise' ? 'active' : ''}`} onClick={() => setActiveTab('customise')}>
-          Customise
-        </button>
+        {renderMenuButton('customise', 'Customise')}
         <div className="separator"></div>
 
-        <button className={`menu-btn ${activeTab === 'help' ? 'active' : ''}`} onClick={() => setActiveTab('help')}>
-          Help
-        </button>
+        {renderMenuButton('help', 'Help')}
+        </div>
       </nav>
 
-      {/* Pass the current role controls down to the Home view. */}
-      {activeTab === 'home' && <Home setActiveTab={setActiveTab} role={role} setRole={setRole} />}
-      
+      {activeTab === 'home' && <Home setActiveTab={setActiveTab} />}
+
       <FocusPageLocal
         videoManager={videoManagerRef.current}
         sessionResult={sessionResult}
         setSessionResult={setSessionResult}
         isActive={activeTab === 'focus'}
-        role={role}
       />
       {activeTab === 'achievement' && <Achievement />}
       {activeTab === 'records' && <Records />}

src/components/CalibrationOverlay.jsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 
 const COLLECT_MS = 2000;
-const CENTER_MS = 3000; // centre point gets extra time (bias reference)
+const CENTER_MS = 3000;
+const VERIFY_MS = 3000;
 
 function CalibrationOverlay({ calibration, videoManager }) {
   const [progress, setProgress] = useState(0);
@@ -42,7 +43,7 @@ function CalibrationOverlay({ calibration, videoManager }) {
     }
 
     startRef.current = performance.now();
-    const duration = calibration.index === 0 ? CENTER_MS : COLLECT_MS;
+    const duration = calibration.verifying ? VERIFY_MS : (calibration.index === 0 ? CENTER_MS : COLLECT_MS);
 
     const tick = () => {
       const pct = Math.min((performance.now() - startRef.current) / duration, 1);
@@ -67,14 +68,18 @@ function CalibrationOverlay({ calibration, videoManager }) {
   if (!calibration || !calibration.active) return null;
 
   if (calibration.done) {
+    const success = calibration.success;
     return (
-      <div ref={overlayRef} style={overlayStyle}>
-        <div style={messageBoxStyle}>
-          <h2 style={{ margin: '0 0 10px', color: calibration.success ? '#4ade80' : '#f87171' }}>
-            {calibration.success ? 'Calibration Complete' : 'Calibration Failed'}
+      <div ref={overlayRef} className="cal-overlay">
+        <div className={`cal-done-card ${success ? 'cal-done-success' : 'cal-done-fail'}`}>
+          <div className="cal-done-eyebrow">
+            {success ? 'Complete' : 'Failed'}
+          </div>
+          <h2 className="cal-done-title">
+            {success ? 'Calibration Complete' : 'Calibration Failed'}
           </h2>
-          <p style={{ color: '#ccc', margin: 0 }}>
-            {calibration.success
+          <p className="cal-done-subtitle">
+            {success
               ? 'Gaze tracking is now active.'
               : 'Not enough samples collected. Try again.'}
           </p>
@@ -84,63 +89,60 @@ function CalibrationOverlay({ calibration, videoManager }) {
   }
 
   const [tx, ty] = calibration.target || [0.5, 0.5];
+  const isVerifying = calibration.verifying;
+  const accent = isVerifying ? '#007BFF' : '#28a745';
+  const glow = isVerifying ? 'rgba(0, 123, 255, 0.6)' : 'rgba(40, 167, 69, 0.6)';
 
   return (
-    <div ref={overlayRef} style={overlayStyle}>
-      <div style={{
-        position: 'absolute', top: '30px', left: '50%', transform: 'translateX(-50%)',
-        color: '#fff', fontSize: '16px', textAlign: 'center',
-        textShadow: '0 0 8px rgba(0,0,0,0.8)', pointerEvents: 'none',
-      }}>
-        <div style={{ fontWeight: 'bold', fontSize: '20px' }}>
-          Look at the dot ({calibration.index + 1}/{calibration.numPoints})
-        </div>
-        <div style={{ fontSize: '14px', color: '#aaa', marginTop: '6px' }}>
-          {calibration.index === 0
-            ? 'Look at the center dot - this sets your baseline'
-            : 'Hold your gaze steady on the target'}
-        </div>
+    <div ref={overlayRef} className="cal-overlay">
+      <div className="cal-header">
+        {isVerifying ? (
+          <>
+            <span className="cal-eyebrow cal-eyebrow-verify">Verification</span>
+            <p className="cal-instruction">
+              Look at the dot to confirm calibration accuracy
+            </p>
+          </>
+        ) : (
+          <>
+            <span className="cal-eyebrow cal-eyebrow-collect">
+              Point {calibration.index + 1} of {calibration.numPoints}
+            </span>
+            <p className="cal-instruction">
+              {calibration.index === 0
+                ? 'Look at the center dot \u2014 this sets your baseline'
+                : 'Hold your gaze steady on the target'}
+            </p>
+          </>
+        )}
       </div>
 
-      <div style={{
-        position: 'absolute', left: `${tx * 100}%`, top: `${ty * 100}%`,
-        transform: 'translate(-50%, -50%)',
-      }}>
-        <svg width="60" height="60" style={{ position: 'absolute', left: '-30px', top: '-30px' }}>
-          <circle cx="30" cy="30" r="24" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="3" />
-          <circle cx="30" cy="30" r="24" fill="none" stroke="#4ade80" strokeWidth="3"
+      <div
+        className="cal-target"
+        style={{ left: `${tx * 100}%`, top: `${ty * 100}%` }}
+      >
+        <svg width="60" height="60" className="cal-ring">
+          <circle cx="30" cy="30" r="24" fill="none" stroke="rgba(255,255,255,0.12)" strokeWidth="3" />
+          <circle
+            cx="30" cy="30" r="24" fill="none" stroke={accent} strokeWidth="3"
             strokeDasharray={`${progress * 150.8} 150.8`} strokeLinecap="round"
-            transform="rotate(-90, 30, 30)" />
+            transform="rotate(-90, 30, 30)"
+          />
         </svg>
-        <div style={{
-          width: '20px', height: '20px', borderRadius: '50%',
-          background: 'radial-gradient(circle, #fff 30%, #4ade80 100%)',
-          boxShadow: '0 0 20px rgba(74, 222, 128, 0.8)',
-        }} />
+        <div
+          className="cal-dot"
+          style={{
+            background: `radial-gradient(circle, #fff 30%, ${accent} 100%)`,
+            boxShadow: `0 0 24px ${glow}`,
+          }}
+        />
       </div>
 
-      <button onClick={handleCancel} style={{
-        position: 'absolute', bottom: '40px', left: '50%', transform: 'translateX(-50%)',
-        padding: '10px 28px', background: 'rgba(255,255,255,0.1)',
-        border: '1px solid rgba(255,255,255,0.3)', color: '#fff',
-        borderRadius: '20px', cursor: 'pointer', fontSize: '14px',
-      }}>
+      <button onClick={handleCancel} className="cal-cancel">
         Cancel Calibration
       </button>
     </div>
   );
 }
 
-const overlayStyle = {
-  position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh',
-  background: 'rgba(0, 0, 0, 0.92)', zIndex: 10000,
-  display: 'flex', alignItems: 'center', justifyContent: 'center',
-};
-
-const messageBoxStyle = {
-  textAlign: 'center', padding: '30px 40px',
-  background: 'rgba(30, 30, 50, 0.9)', borderRadius: '16px',
-  border: '1px solid rgba(255,255,255,0.1)',
-};
-
 export default CalibrationOverlay;

src/components/Customise.jsx

@@ -1,51 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 
 function Customise() {
-  const [sensitivity, setSensitivity] = useState(6);
-  const [frameRate, setFrameRate] = useState(30);
-  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
-  const [threshold, setThreshold] = useState(30);
-  
   // Reference to the hidden import input.
   const fileInputRef = useRef(null);
 
-  // 1. Load persisted settings.
-  useEffect(() => {
-    fetch('/api/settings')
-      .then(res => res.json())
-      .then(data => {
-        if (data) {
-          if (data.sensitivity) setSensitivity(data.sensitivity);
-          if (data.frame_rate) setFrameRate(data.frame_rate);
-          if (data.notification_threshold) setThreshold(data.notification_threshold);
-          if (data.notification_enabled !== undefined) setNotificationsEnabled(data.notification_enabled);
-        }
-      })
-      .catch(err => console.error("Failed to load settings", err));
-  }, []);
-
-  // 2. Save settings.
-  const handleSave = async () => {
-    const settings = {
-      sensitivity: parseInt(sensitivity),
-      frame_rate: parseInt(frameRate),
-      notification_enabled: notificationsEnabled,
-      notification_threshold: parseInt(threshold)
-    };
-
-    try {
-      const response = await fetch('/api/settings', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(settings)
-      });
-      if (response.ok) alert("Settings saved successfully!");
-      else alert("Failed to save settings.");
-    } catch (error) {
-      alert("Error saving settings: " + error.message);
-    }
-  };
-
   // 3. Export data.
   const handleExport = async () => {
     try {
@@ -148,41 +106,6 @@ function Customise() {
       <h1 className="page-title">Customise</h1>
 
       <div className="settings-container">
-        {/* Detection Settings */}
-        <div className="setting-group">
-          <h2>Detection Settings</h2>
-          <div className="setting-item">
-            <label htmlFor="sensitivity-slider">Detection Sensitivity</label>
-            <div className="slider-group">
-              <input type="range" id="sensitivity-slider" min="1" max="10" value={sensitivity} onChange={(e) => setSensitivity(e.target.value)} />
-              <span id="sensitivity-value">{sensitivity}</span>
-            </div>
-            <p className="setting-description">Higher values require stricter focus criteria</p>
-          </div>
-          <div className="setting-item">
-            <label htmlFor="default-framerate">Default Frame Rate</label>
-            <div className="slider-group">
-              <input type="range" id="default-framerate" min="5" max="60" value={frameRate} onChange={(e) => setFrameRate(e.target.value)} />
-              <span id="framerate-value">{frameRate}</span> FPS
-            </div>
-          </div>
-        </div>
-
-        {/* Notifications */}
-        <div className="setting-group">
-          <h2>Notifications</h2>
-          <div className="setting-item">
-            <label>
-              <input type="checkbox" id="enable-notifications" checked={notificationsEnabled} onChange={(e) => setNotificationsEnabled(e.target.checked)} />
-              Enable distraction notifications
-            </label>
-          </div>
-          <div className="setting-item">
-            <label htmlFor="notification-threshold">Alert after (seconds)</label>
-            <input type="number" id="notification-threshold" value={threshold} onChange={(e) => setThreshold(e.target.value)} min="5" max="300" />
-          </div>
-        </div>
-
         {/* Data Management */}
         <div className="setting-group">
           <h2>Data Management</h2>
@@ -214,7 +137,6 @@ function Customise() {
           </div>
         </div>
 
-        <button id="save-settings" className="btn-main" onClick={handleSave}>Save Settings</button>
       </div>
     </main>
   );

src/components/FocusPage.jsx

@@ -1,264 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-function FocusPage({ videoManager, sessionResult, setSessionResult, isActive, displayVideoRef }) {
-  const [currentFrame, setCurrentFrame] = useState(30);
-  const [timelineEvents, setTimelineEvents] = useState([]);
-
-  const videoRef = displayVideoRef;
-
-  // Helper for formatting a duration in seconds.
-  const formatDuration = (seconds) => {
-    // Show a compact zero state instead of "0m 0s".
-    if (seconds === 0) return "0s";
-
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}m ${secs}s`;
-  };
-
-  useEffect(() => {
-    if (!videoManager) return;
-
-    // Override the status callback so the timeline updates live.
-    const originalOnStatusUpdate = videoManager.callbacks.onStatusUpdate;
-    videoManager.callbacks.onStatusUpdate = (isFocused) => {
-      setTimelineEvents(prev => {
-        const newEvents = [...prev, { isFocused, timestamp: Date.now() }];
-        if (newEvents.length > 60) newEvents.shift();
-        return newEvents;
-      });
-      // Preserve the original callback if one was already registered.
-      if (originalOnStatusUpdate) originalOnStatusUpdate(isFocused);
-    };
-
-    // Cleanup only restores callbacks and does not force-stop the session.
-    return () => {
-      if (videoManager) {
-        videoManager.callbacks.onStatusUpdate = originalOnStatusUpdate;
-      }
-    };
-  }, [videoManager]);
-
-  const handleStart = async () => {
-    try {
-      if (videoManager) {
-        setSessionResult(null); // Clear any previous summary overlay before starting.
-        setTimelineEvents([]);
-
-        console.log('🎬 Initializing camera...');
-        await videoManager.initCamera(videoRef.current);
-        console.log('✅ Camera initialized');
-
-        console.log('🚀 Starting streaming...');
-        await videoManager.startStreaming();
-        console.log('✅ Streaming started successfully');
-      }
-    } catch (err) {
-      console.error('❌ Start error:', err);
-      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 if (err.message && err.message.includes('HTTPS')) {
-        errorMessage += "Camera requires HTTPS. Please use a secure connection.";
-      } else {
-        errorMessage += err.message || "Unknown error occurred.";
-      }
-
-      alert(errorMessage + "\n\nCheck browser console for details.");
-    }
-  };
-
-  const handleStop = () => {
-    if (videoManager) {
-      videoManager.stopStreaming();
-    }
-  };
-
-  const handlePiP = async () => {
-    try {
-      const sourceVideoEl = videoRef.current;
-      if (!sourceVideoEl) {
-        alert('Video not ready. Please click Start first.');
-        return;
-      }
-
-      if (document.pictureInPictureElement) {
-        await document.exitPictureInPicture();
-        return;
-      }
-
-      sourceVideoEl.disablePictureInPicture = false;
-
-      if (typeof sourceVideoEl.webkitSetPresentationMode === 'function') {
-        sourceVideoEl.play().catch(() => {});
-        sourceVideoEl.webkitSetPresentationMode('picture-in-picture');
-        return;
-      }
-
-      if (!document.pictureInPictureEnabled || typeof sourceVideoEl.requestPictureInPicture !== 'function') {
-        alert('Picture-in-Picture is not supported in this browser.');
-        return;
-      }
-
-      const pipPromise = sourceVideoEl.requestPictureInPicture();
-      sourceVideoEl.play().catch(() => {});
-      await pipPromise;
-    } catch (err) {
-      console.error('PiP error:', err);
-      alert('Failed to enter Picture-in-Picture.');
-    }
-  };
-
-  // Floating window helper.
-  const handleFloatingWindow = () => {
-    handlePiP();
-  };
-
-  // ==========================================
-  // Preview button handler
-  // ==========================================
-  const handlePreview = () => {
-    // Inject placeholder data so the overlay can be previewed on demand.
-    setSessionResult({
-        duration_seconds: 0,
-        focus_score: 0
-    });
-  };
-
-  const handleCloseOverlay = () => {
-    setSessionResult(null);
-  };
-  // ==========================================
-
-  const handleFrameChange = (val) => {
-    setCurrentFrame(val);
-    if (videoManager) {
-      videoManager.setFrameRate(val);
-    }
-  };
-
-  const pageStyle = isActive
-    ? undefined
-    : {
-        position: 'absolute',
-        width: '1px',
-        height: '1px',
-        overflow: 'hidden',
-        opacity: 0,
-        pointerEvents: 'none'
-      };
-
-  return (
-    <main id="page-b" className="page" style={pageStyle}>
-      {/* 1. Camera / display area */}
-      <section id="display-area" style={{ position: 'relative', overflow: 'hidden' }}>
-        <video
-          ref={videoRef}
-          muted
-          playsInline
-          autoPlay
-          style={{ width: '100%', height: '100%', objectFit: 'contain' }}
-        />
-
-        {/* Session result overlay */}
-        {sessionResult && (
-          <div className="session-result-overlay">
-            <h3>Session Complete!</h3>
-            <div className="result-item">
-              <span className="label">Duration:</span>
-              <span className="value">{formatDuration(sessionResult.duration_seconds)}</span>
-            </div>
-            <div className="result-item">
-              <span className="label">Focus Score:</span>
-              <span className="value">{(sessionResult.focus_score * 100).toFixed(1)}%</span>
-            </div>
-            
-            {/* Add a lightweight close button for preview mode. */}
-            <button 
-                onClick={handleCloseOverlay}
-                style={{
-                    marginTop: '20px',
-                    padding: '8px 20px',
-                    background: 'transparent',
-                    border: '1px solid white',
-                    color: 'white',
-                    borderRadius: '20px',
-                    cursor: 'pointer'
-                }}
-            >
-                Close
-            </button>
-          </div>
-        )}
-
-      </section>
-
-      {/* 2. 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>
-
-      {/* 3. 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>
-        
-        {/* Temporarily repurpose the Models button as a preview action. */}
-        <button 
-            id="btn-preview" 
-            className="action-btn" 
-            style={{ backgroundColor: '#6c5ce7' }} // Use purple so the preview action stands out.
-            onClick={handlePreview}
-        >
-            Preview Result
-        </button>
-        
-        <button id="btn-cam-stop" className="action-btn red" onClick={handleStop}>Stop</button>
-      </section>
-
-      {/* 4. Frame control */}
-      <section id="frame-control">
-        <label htmlFor="frame-slider">Frame</label>
-        <input 
-          type="range" 
-          id="frame-slider" 
-          min="1" 
-          max="60" 
-          value={currentFrame}
-          onChange={(e) => handleFrameChange(e.target.value)}
-        />
-        <input 
-          type="number" 
-          id="frame-input" 
-          value={currentFrame}
-          onChange={(e) => handleFrameChange(e.target.value)}
-        />
-      </section>
-    </main>
-  );
-}
-
-export default FocusPage;

src/components/FocusPageLocal.jsx

@@ -37,7 +37,64 @@ function CameraIcon() {
   );
 }
 
-function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActive, role }) {
+const MODEL_ORDER = ['hybrid', 'xgboost', 'mlp', 'geometric'];
+
+const MODEL_INFO = {
+  hybrid: {
+    label: 'Hybrid',
+    tagline: 'Best overall — combines ML with geometric scoring',
+    how: 'Fuses XGBoost predictions (30%) with geometric face/eye scores (70%). A logistic regression meta-classifier combines both signals for the final decision.',
+    accuracy: '84.3%',
+    f1: '0.864',
+    auc: '0.880',
+    threshold: '0.46',
+    evaluation: 'Leave-One-Person-Out (9 participants, 144K frames)',
+    features: '10 features: head deviation, face score, eye scores (EAR), gaze offset, pitch, horizontal gaze, PERCLOS',
+    strengths: 'Most robust across different people. Geometric scoring generalises well; ML catches subtle patterns.',
+    badge: 'Recommended',
+  },
+  xgboost: {
+    label: 'XGBoost',
+    tagline: 'Highest raw accuracy — gradient-boosted decision trees',
+    how: 'Ensemble of 600 decision trees (max depth 8). Each tree learns to correct errors from previous trees. Outputs probability of focused state.',
+    accuracy: '84.3%',
+    f1: '0.859',
+    auc: '0.880',
+    threshold: '0.38',
+    evaluation: 'Leave-One-Person-Out (9 participants, 144K frames)',
+    features: '10 features: head deviation, face score, eye scores (EAR), gaze offset, pitch, horizontal gaze, PERCLOS',
+    strengths: 'Strong pattern recognition. Handles non-linear feature interactions. 95.9% accuracy on random split (but LOPO is the fairer test).',
+    badge: null,
+  },
+  mlp: {
+    label: 'MLP',
+    tagline: 'Lightweight neural network — fast and efficient',
+    how: 'Two-layer neural network (64→32 neurons). Takes 10 face features, applies learned weights, outputs focused/unfocused probability via softmax.',
+    accuracy: '82.7%',
+    f1: '0.858',
+    auc: '0.862',
+    threshold: '0.23',
+    evaluation: 'Leave-One-Person-Out (9 participants, 144K frames)',
+    features: '10 features: head deviation, face score, eye scores (EAR), gaze offset, pitch, horizontal gaze, PERCLOS',
+    strengths: 'Fastest inference. Smallest model size. Good baseline. 92.9% accuracy on random split.',
+    badge: null,
+  },
+  geometric: {
+    label: 'Geometric',
+    tagline: 'Baseline only — hardcoded thresholds, no learning',
+    how: 'Uses fixed thresholds on head orientation (70%) and eye openness (30%). No training — just hand-tuned rules on 478 face landmarks. Cannot adapt to new faces or environments.',
+    accuracy: '~77%',
+    f1: '0.772',
+    auc: 'N/A',
+    threshold: '0.55',
+    evaluation: 'Leave-One-Person-Out geometric sweep',
+    features: 'Head yaw/pitch/roll angles, eye aspect ratio (EAR), iris gaze offset, mouth aspect ratio (MAR)',
+    strengths: 'No model files needed. Useful as a fallback. This is the baseline that motivated building the ML models — its fixed thresholds struggle with different face shapes, lighting, and camera angles.',
+    badge: 'Baseline',
+  },
+};
+
+function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActive }) {
   const [currentFrame, setCurrentFrame] = useState(15);
   const [timelineEvents, setTimelineEvents] = useState([]);
   const [stats, setStats] = useState(null);
@@ -131,6 +188,8 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
       setFocusState(FOCUS_STATES.pending);
       setCameraReady(false);
       if (originalOnSessionEnd) originalOnSessionEnd(summary);
+    };
+
     videoManager.callbacks.onCalibrationUpdate = (cal) => {
       setCalibration(cal && cal.active ? { ...cal } : null);
     };
@@ -144,6 +203,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
     return () => {
       if (videoManager) {
         videoManager.callbacks.onStatusUpdate = originalOnStatusUpdate;
+        videoManager.callbacks.onSessionEnd = originalOnSessionEnd;
         videoManager.callbacks.onCalibrationUpdate = null;
       }
       clearInterval(statsInterval);
@@ -156,7 +216,16 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
       .then((res) => res.json())
       .then((data) => {
         if (data.available) setAvailableModels(data.available);
-        if (data.current) setCurrentModel(data.current);
+        if (data.current) {
+          // If L2CS was the active model, switch to a base model + enable boost
+          if (data.current === 'l2cs') {
+            const fallback = data.available.find((m) => m !== 'l2cs') || 'mlp';
+            setCurrentModel(fallback);
+            handleModelChange(fallback);
+          } else {
+            setCurrentModel(data.current);
+          }
+        }
         if (data.l2cs_boost !== undefined) setL2csBoost(data.l2cs_boost);
         if (data.l2cs_boost_available !== undefined) setL2csBoostAvailable(data.l2cs_boost_available);
       })
@@ -214,8 +283,6 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
       const result = await res.json();
       if (result.updated) {
         setCurrentModel(modelName);
-        setL2csBoostAvailable(modelName !== 'l2cs' && availableModels.includes('l2cs'));
-        if (modelName === 'l2cs') setL2csBoost(false);
       }
     } catch (err) {
       console.error('Failed to switch model:', err);
@@ -238,7 +305,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
     }
   };
 
-  const handleBoostToggle = async () => {
+  const handleEyeGazeToggle = async () => {
     const next = !l2csBoost;
     try {
       const res = await fetch('/api/settings', {
@@ -246,9 +313,18 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ l2cs_boost: next })
       });
-      if (res.ok) setL2csBoost(next);
+      if (!res.ok) return;
+      setL2csBoost(next);
+
+      if (next && videoManager && videoManager.isStreaming) {
+        // Turning ON → auto-start calibration
+        videoManager.startCalibration();
+      } else if (!next && videoManager) {
+        // Turning OFF → cancel any active calibration
+        videoManager.cancelCalibration();
+      }
     } catch (err) {
-      console.error('Failed to toggle L2CS boost:', err);
+      console.error('Failed to toggle eye gaze:', err);
     }
   };
 
@@ -689,120 +765,61 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
           </div>
         )}
 
-        {role === 'admin' && stats && stats.isStreaming ? (
-          <div className="focus-debug-panel">
-            <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) && (
-        <section style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '16px',
-          padding: '6px 12px',
-          background: 'rgba(0,0,0,0.3)',
-          borderRadius: '8px',
-          margin: '6px auto',
-          maxWidth: '400px',
-          fontSize: '13px',
-          color: '#aaa'
-        }}>
-          <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
-              key={name}
-              onClick={() => handleModelChange(name)}
-              style={{
-                padding: '5px 14px',
-                borderRadius: '16px',
-                border: currentModel === name ? '2px solid #007BFF' : '1px solid #555',
-                background: currentModel === name ? '#007BFF' : 'transparent',
-                color: currentModel === name ? '#fff' : '#ccc',
-                fontSize: '12px',
-                fontWeight: currentModel === name ? 'bold' : 'normal',
-                cursor: 'pointer',
-                textTransform: 'uppercase',
-                transition: 'all 0.2s'
-              }}
-            >
-              {name}
-            </button>
-          ))}
-          {l2csBoostAvailable && currentModel !== 'l2cs' && (
-            <button
-              onClick={handleBoostToggle}
-              style={{
-                padding: '5px 14px',
-                borderRadius: '16px',
-                border: l2csBoost ? '2px solid #f59e0b' : '1px solid #555',
-                background: l2csBoost ? 'rgba(245, 158, 11, 0.15)' : 'transparent',
-                color: l2csBoost ? '#f59e0b' : '#888',
-                fontSize: '11px',
-                fontWeight: l2csBoost ? 'bold' : 'normal',
-                cursor: 'pointer',
-                transition: 'all 0.2s',
-                marginLeft: '4px',
-              }}
-            >
-              {l2csBoost ? 'GAZE ON' : 'GAZE'}
-            </button>
-          )}
-          {(currentModel === 'l2cs' || l2csBoost) && stats && stats.isStreaming && (
-            <button
-              onClick={() => videoManager && videoManager.startCalibration()}
-              style={{
-                padding: '5px 14px',
-                borderRadius: '16px',
-                border: '1px solid #4ade80',
-                background: 'transparent',
-                color: '#4ade80',
-                fontSize: '12px',
-                fontWeight: 'bold',
-                cursor: 'pointer',
-                transition: 'all 0.2s',
-                marginLeft: '4px',
-              }}
-            >
-              Calibrate
-            </button>
-          )}
-        </section>
-      )}
-
       {flowStep === FLOW_STEPS.ready ? (
         <>
+          {/* Model selector */}
           {availableModels.length > 0 ? (
             <section className="focus-model-strip">
               <span className="focus-model-label">Model:</span>
-              {availableModels.map((name) => (
+              {MODEL_ORDER.filter((n) => availableModels.includes(n)).map((name) => (
                 <button
                   key={name}
                   onClick={() => handleModelChange(name)}
                   className={`focus-model-button ${currentModel === name ? 'active' : ''}`}
                 >
-                  {name}
+                  {MODEL_INFO[name]?.label || name}
                 </button>
               ))}
+
+              {l2csBoostAvailable && (
+                <>
+                  <span className="focus-model-sep" />
+                  <button
+                    onClick={handleEyeGazeToggle}
+                    className={`eye-gaze-toggle ${l2csBoost ? 'on' : 'off'}`}
+                    title={l2csBoost ? 'Eye gaze tracking active — click to disable' : 'Enable eye gaze tracking (requires calibration)'}
+                  >
+                    <svg width="16" height="16" viewBox="0 0 16 16" className="eye-gaze-icon" aria-hidden="true">
+                      <ellipse cx="8" cy="8" rx="7" ry="4.5" fill="none" stroke="currentColor" strokeWidth="1.4" />
+                      <circle cx="8" cy="8" r="2.2" fill="currentColor" />
+                    </svg>
+                    {l2csBoost ? 'Eye Gaze On' : 'Eye Gaze'}
+                  </button>
+                  {l2csBoost && stats && stats.isStreaming && (
+                    <button
+                      onClick={() => videoManager && videoManager.startCalibration()}
+                      className="focus-model-button recalibrate"
+                      title="Re-run gaze calibration"
+                    >
+                      Recalibrate
+                    </button>
+                  )}
+                </>
+              )}
             </section>
           ) : null}
 
+          {/* Server stats */}
+          {systemStats && systemStats.cpu_percent != null && (
+            <section className="focus-system-stats">
+              <span>CPU: <strong>{systemStats.cpu_percent}%</strong></span>
+              <span className="focus-system-stats-sep" />
+              <span>RAM: <strong>{systemStats.memory_percent}%</strong> ({systemStats.memory_used_mb}/{systemStats.memory_total_mb} MB)</span>
+            </section>
+          )}
+
           <section id="timeline-area">
             <div className="timeline-label">Timeline</div>
             <div id="timeline-visuals">
@@ -811,7 +828,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
                   key={index}
                   className="timeline-block"
                   style={{
-                    backgroundColor: event.isFocused ? '#00FF00' : '#FF0000',
+                    backgroundColor: event.isFocused ? '#28a745' : '#dc3545',
                     width: '10px',
                     height: '20px',
                     display: 'inline-block',
@@ -830,19 +847,14 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
               {isStarting ? 'Starting...' : 'Start'}
             </button>
 
-            <button id="btn-floating" className="action-btn yellow" onClick={handlePiP}>
+            <button id="btn-floating" className="action-btn blue" onClick={handlePiP}>
               Floating Window
             </button>
-            <button
-              id="btn-preview"
-              className="action-btn"
-              style={{ backgroundColor: '#ff7a52' }}
-              onClick={handlePreview}
-            >
+
+            <button id="btn-preview" className="action-btn orange" onClick={handlePreview}>
               Preview Result
             </button>
 
-
             <button id="btn-cam-stop" className="action-btn red" onClick={handleStop}>
               Stop
             </button>
@@ -852,6 +864,59 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
             <div className="focus-inline-error focus-inline-error-standalone">{cameraError}</div>
           ) : null}
 
+          {/* Model info card — below action buttons */}
+          {MODEL_INFO[currentModel] && (
+            <section className="model-card">
+              <div className="model-card-header">
+                <h3 className="model-card-title">{MODEL_INFO[currentModel].label}</h3>
+                {MODEL_INFO[currentModel].badge && (
+                  <span className={MODEL_INFO[currentModel].badge === 'Baseline' ? 'model-card-badge-baseline' : 'model-card-badge'}>
+                    {MODEL_INFO[currentModel].badge}
+                  </span>
+                )}
+              </div>
+              <p className="model-card-tagline">{MODEL_INFO[currentModel].tagline}</p>
+
+              <div className="model-card-metrics">
+                <div className="model-card-metric">
+                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].accuracy}</span>
+                  <span className="model-card-metric-label">Accuracy</span>
+                </div>
+                <div className="model-card-metric">
+                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].f1}</span>
+                  <span className="model-card-metric-label">F1 Score</span>
+                </div>
+                <div className="model-card-metric">
+                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].auc}</span>
+                  <span className="model-card-metric-label">ROC-AUC</span>
+                </div>
+                <div className="model-card-metric">
+                  <span className="model-card-metric-value">{MODEL_INFO[currentModel].threshold}</span>
+                  <span className="model-card-metric-label">Threshold</span>
+                </div>
+              </div>
+
+              <div className="model-card-details">
+                <div className="model-card-section">
+                  <h4>How it works</h4>
+                  <p>{MODEL_INFO[currentModel].how}</p>
+                </div>
+                <div className="model-card-section">
+                  <h4>Features used</h4>
+                  <p>{MODEL_INFO[currentModel].features}</p>
+                </div>
+                <div className="model-card-section">
+                  <h4>Strengths</h4>
+                  <p>{MODEL_INFO[currentModel].strengths}</p>
+                </div>
+              </div>
+
+              <div className="model-card-eval">
+                Evaluated with {MODEL_INFO[currentModel].evaluation}
+              </div>
+            </section>
+          )}
+
           <section id="frame-control">
             <label htmlFor="frame-slider">Frame Rate (FPS)</label>
             <input
@@ -873,55 +938,6 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
           </section>
         </>
       ) : null}
-          ))}
-        </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>
-
-      {/* 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/components/Help.jsx

@@ -1,6 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 function Help() {
+  const [clearMsg, setClearMsg] = useState('');
+
+  const clearAllHistory = async () => {
+    if (!window.confirm('Delete all saved sessions? My Records and My Achievement will reset.')) return;
+    setClearMsg('');
+    try {
+      const res = await fetch('/api/history', { method: 'DELETE' });
+      const data = await res.json().catch(() => ({}));
+      if (res.ok && data.status === 'success') {
+        setClearMsg('Session history cleared.');
+      } else {
+        setClearMsg(data.message || 'Could not clear history.');
+      }
+    } catch (e) {
+      setClearMsg('Request failed.');
+    }
+  };
+
   return (
     <main id="page-f" className="page">
       <h1 className="page-title">Help</h1>
@@ -47,7 +65,27 @@ function Help() {
 
         <section className="help-section">
           <h2>Privacy & Data</h2>
-          <p>Video frames are processed in real-time on the server and are never stored. Only focus status metadata (timestamps, confidence scores) is saved to the session database. Sessions can be viewed in History and exported or cleared at any time.</p>
+          <p>Video frames are processed in real-time on the server and are never stored. Only focus status metadata (timestamps, confidence scores) is saved to the session database. View past runs under <strong>My Records</strong>; stats and badges live under <strong>My Achievement</strong>.</p>
+          <p style={{ marginTop: '12px' }}>
+            <button
+              type="button"
+              onClick={clearAllHistory}
+              style={{
+                padding: '8px 16px',
+                borderRadius: '8px',
+                border: '1px solid #c44',
+                background: 'transparent',
+                color: '#e88',
+                cursor: 'pointer',
+                fontSize: '14px'
+              }}
+            >
+              Clear all session history
+            </button>
+            {clearMsg && (
+              <span style={{ marginLeft: '12px', color: '#aaa', fontSize: '14px' }}>{clearMsg}</span>
+            )}
+          </p>
         </section>
 
         <section className="help-section">

src/components/Home.jsx

@@ -1,123 +1,15 @@
-import React, { useRef } from 'react';
-
-function Home({ setActiveTab, role, setRole }) {
-  const fileInputRef = useRef(null);
-
-  // 1. Start a fresh focus workflow.
-  const handleNewStart = async () => {
-    await fetch('/api/history', { method: 'DELETE' });
-    setActiveTab('focus');
-  };
-
-  // 2. Restore a backup automatically from local storage.
-  const handleAutoImport = async () => {
-    const backup = localStorage.getItem('focus_magic_backup');
-    if (backup) {
-      try {
-        const sessions = JSON.parse(backup);
-        const response = await fetch('/api/import', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(sessions)
-        });
-        if (response.ok) {
-          alert("Auto-recovery successful!");
-        } else {
-          alert("Auto-recovery failed.");
-        }
-      } catch (err) {
-        alert("Error: " + err.message);
-      }
-    } else {
-      alert("No previous backup found. Please use Manual Import.");
-    }
-  };
-
-  // 3. Import a backup file manually.
-  const handleFileChange = async (event) => {
-    const file = event.target.files[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      try {
-        const sessions = JSON.parse(e.target.result);
-        const response = await fetch('/api/import', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(sessions)
-        });
-        if (response.ok) {
-          alert("Import successful!");
-        }
-      } catch (err) {
-        alert("Error: " + err.message);
-      }
-      event.target.value = '';
-    };
-    reader.readAsText(file);
-  };
-
-  // 4. Toggle between Admin and User modes.
-  const handleAdminToggle = async () => {
-    if (role === 'admin') {
-      if (window.confirm("Switch back to User mode? Current data will be cleared.")) {
-        await fetch('/api/history', { method: 'DELETE' });
-        setRole('user');
-        alert("Switched to User mode.");
-      }
-    } else {
-      const pwd = window.prompt("Enter Admin Password:");
-      if (pwd === "123") {
-        try {
-          await fetch('/api/history', { method: 'DELETE' });
-          const res = await fetch('/test_data.json');
-          if (!res.ok) throw new Error("test_data.json not found");
-          const testData = await res.json();
-          const importRes = await fetch('/api/import', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(testData)
-          });
-          if (importRes.ok) {
-            setRole('admin');
-            alert("Admin mode activated!");
-          }
-        } catch (error) {
-          alert("Admin login failed: " + error.message);
-        }
-      } else if (pwd !== null) {
-        alert("Incorrect password!");
-      }
-    }
-  };
+import React from 'react';
 
+function Home({ setActiveTab }) {
   return (
     <main id="page-a" className="page">
       <h1>FocusGuard</h1>
       <p>Your productivity monitor assistant.</p>
 
-      {/* Keep the hidden file input outside the button grid so it never affects layout. */}
-      <input type="file" ref={fileInputRef} style={{ display: 'none' }} accept=".json" onChange={handleFileChange} />
-
-      {/* Render the four main actions inside a clean 2x2 grid. */}
       <div className="home-button-grid">
-        
-        <button className="btn-main" onClick={handleNewStart}>
+        <button type="button" className="btn-main" onClick={() => setActiveTab('focus')}>
           Start Focus
         </button>
-
-        <button className="btn-main" onClick={handleAutoImport}>
-          Auto Import History
-        </button>
-
-        <button className="btn-main" onClick={() => fileInputRef.current.click()}>
-          Manual Import History
-        </button>
-
-        <button className="btn-main" onClick={handleAdminToggle}>
-          {role === 'admin' ? 'Switch to User Mode' : 'Admin Login'}
-        </button>
-        
       </div>
     </main>
   );

src/utils/VideoManagerLocal.js

@@ -1,6 +1,29 @@
 // src/utils/VideoManagerLocal.js
 // Local video processing implementation using WebSocket + Canvas, without WebRTC.
 
+const DEFAULT_CALIBRATION_STATE = Object.freeze({
+    active: false,
+    collecting: false,
+    target: null,
+    index: 0,
+    numPoints: 0,
+    done: false,
+    success: false,
+});
+
+const createCalibrationState = (overrides = {}) => ({
+    ...DEFAULT_CALIBRATION_STATE,
+    ...overrides,
+});
+
+const formatSignedInt = (value) => `${value > 0 ? '+' : ''}${value.toFixed(0)}`;
+
+const buildHeadPoseText = (data) => (
+    `yaw:${formatSignedInt(data.yaw)}  `
+    + `pitch:${formatSignedInt(data.pitch)}  `
+    + `roll:${formatSignedInt(data.roll)}`
+);
+
 export class VideoManagerLocal {
     constructor(callbacks) {
         this.callbacks = callbacks || {};
@@ -33,23 +56,8 @@ export class VideoManagerLocal {
         // Continuous render loop
         this._animFrameId = null;
 
-        // Notification state
-        this.notificationEnabled = true;
-        this.notificationThreshold = 30;
-        this.unfocusedStartTime = null;
-        this.lastNotificationTime = null;
-        this.notificationCooldown = 60000;
-
         // Calibration state
-        this.calibration = {
-            active: false,
-            collecting: false,
-            target: null,
-            index: 0,
-            numPoints: 0,
-            done: false,
-            success: false,
-        };
+        this.calibration = createCalibrationState();
 
         // Performance metrics
         this.stats = {
@@ -122,10 +130,6 @@ export class VideoManagerLocal {
                 }
             }
 
-            // Request notification permission
-            await this.requestNotificationPermission();
-            await this.loadNotificationSettings();
-
             // Open the WebSocket connection
             await this.connectWebSocket();
 
@@ -207,7 +211,10 @@ 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.`);
+                rejectWithMessage(
+                    `Failed to connect to ${wsUrl}. `
+                    + 'Check that the backend server is running and reachable.'
+                );
             };
 
             socket.onclose = (event) => {
@@ -217,7 +224,11 @@ export class VideoManagerLocal {
                 }
 
                 if (!opened) {
-                    rejectWithMessage(`WebSocket closed before connection was established (${event.code || 'no code'}). Check that the backend server is running on the expected port.`);
+                    rejectWithMessage(
+                        `WebSocket closed before connection was established `
+                        + `(${event.code || 'no code'}). `
+                        + 'Check that the backend server is running on the expected port.'
+                    );
                     return;
                 }
 
@@ -319,21 +330,60 @@ export class VideoManagerLocal {
                         ctx.fillStyle = '#B4B4B4';
                         ctx.font = '11px Arial';
                         ctx.textAlign = 'right';
-                        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.fillText(buildHeadPoseText(data), w - 10, 48);
                         ctx.textAlign = 'left';
                     }
                 }
-                // Gaze pointer (L2CS + calibration)
+                // Gaze minimap — small screen representation in bottom-right corner
                 if (data && data.gaze_x !== undefined && data.gaze_y !== undefined) {
-                    const gx = data.gaze_x * w;
-                    const gy = data.gaze_y * h;
+                    const mapW = 120;
+                    const mapH = 80;
+                    const mapPad = 10;
+                    const mapX = w - mapW - mapPad;
+                    const mapY = h - mapH - 30; // above the performance stats bar
+
+                    // Background (rounded rect with fallback)
+                    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+                    ctx.beginPath();
+                    if (ctx.roundRect) {
+                        ctx.roundRect(mapX - 4, mapY - 4, mapW + 8, mapH + 8, 6);
+                    } else {
+                        ctx.rect(mapX - 4, mapY - 4, mapW + 8, mapH + 8);
+                    }
+                    ctx.fill();
+
+                    // Screen area
+                    ctx.fillStyle = data.on_screen ? 'rgba(30, 40, 60, 0.9)' : 'rgba(60, 20, 20, 0.9)';
+                    ctx.fillRect(mapX, mapY, mapW, mapH);
+                    ctx.strokeStyle = data.on_screen ? 'rgba(100, 180, 255, 0.6)' : 'rgba(255, 100, 100, 0.6)';
+                    ctx.lineWidth = 1;
+                    ctx.strokeRect(mapX, mapY, mapW, mapH);
+
+                    // Gaze dot — clamp to minimap bounds for visibility
+                    const dotX = mapX + Math.max(0, Math.min(1, data.gaze_x)) * mapW;
+                    const dotY = mapY + Math.max(0, Math.min(1, data.gaze_y)) * mapH;
+                    const dotColor = data.on_screen ? '#00FF00' : '#FF4444';
+
+                    // Glow
+                    ctx.beginPath();
+                    ctx.arc(dotX, dotY, 8, 0, 2 * Math.PI);
+                    ctx.fillStyle = data.on_screen ? 'rgba(0, 255, 0, 0.15)' : 'rgba(255, 68, 68, 0.15)';
+                    ctx.fill();
+
+                    // Dot
                     ctx.beginPath();
-                    ctx.arc(gx, gy, 8, 0, 2 * Math.PI);
-                    ctx.fillStyle = data.on_screen ? 'rgba(0, 200, 255, 0.7)' : 'rgba(255, 80, 80, 0.5)';
+                    ctx.arc(dotX, dotY, 4, 0, 2 * Math.PI);
+                    ctx.fillStyle = dotColor;
                     ctx.fill();
                     ctx.strokeStyle = '#FFFFFF';
-                    ctx.lineWidth = 2;
+                    ctx.lineWidth = 1.5;
                     ctx.stroke();
+
+                    // Label
+                    ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
+                    ctx.font = '9px Arial';
+                    ctx.textAlign = 'left';
+                    ctx.fillText('GAZE', mapX + 3, mapY + 10);
                 }
 
                 // Performance stats
@@ -376,7 +426,8 @@ export class VideoManagerLocal {
                     const latency = now - this._lastSendTime;
                     this.stats.lastLatencies.push(latency);
                     if (this.stats.lastLatencies.length > 10) this.stats.lastLatencies.shift();
-                    this.stats.avgLatency = this.stats.lastLatencies.reduce((a, b) => a + b, 0) / this.stats.lastLatencies.length;
+                    const latencySum = this.stats.lastLatencies.reduce((a, b) => a + b, 0);
+                    this.stats.avgLatency = latencySum / this.stats.lastLatencies.length;
                 }
 
                 this.updateStatus(data.focused);
@@ -407,6 +458,8 @@ export class VideoManagerLocal {
                     gaze_x: data.gaze_x,
                     gaze_y: data.gaze_y,
                     on_screen: data.on_screen,
+                    gaze_yaw: data.gaze_yaw,
+                    gaze_pitch: data.gaze_pitch,
                 };
                 this.drawDetectionResult(detectionData);
                 break;
@@ -447,8 +500,20 @@ export class VideoManagerLocal {
                 }
                 break;
 
+            case 'calibration_verify':
+                this.calibration.collecting = true;
+                this.calibration.target = data.target;
+                this.calibration.index = -1; // special: verification phase
+                this.calibration.verifying = true;
+                this.calibration.verifyMessage = data.message || 'Verify calibration';
+                if (this.callbacks.onCalibrationUpdate) {
+                    this.callbacks.onCalibrationUpdate({ ...this.calibration });
+                }
+                break;
+
             case 'calibration_done':
                 this.calibration.collecting = false;
+                this.calibration.verifying = false;
                 this.calibration.done = true;
                 this.calibration.success = data.success;
                 if (this.callbacks.onCalibrationUpdate) {
@@ -463,7 +528,7 @@ export class VideoManagerLocal {
                 break;
 
             case 'calibration_cancelled':
-                this.calibration = { active: false, collecting: false, target: null, index: 0, numPoints: 0, done: false, success: false };
+                this.calibration = createCalibrationState();
                 if (this.callbacks.onCalibrationUpdate) {
                     this.callbacks.onCalibrationUpdate({ ...this.calibration });
                 }
@@ -494,14 +559,19 @@ export class VideoManagerLocal {
         if (this.ws && this.ws.readyState === WebSocket.OPEN) {
             this.ws.send(JSON.stringify({ type: 'calibration_cancel' }));
         }
-        this.calibration = { active: false, collecting: false, target: null, index: 0, numPoints: 0, done: false, success: false };
+        this.calibration = createCalibrationState();
         if (this.callbacks.onCalibrationUpdate) {
             this.callbacks.onCalibrationUpdate({ ...this.calibration });
         }
     }
 
     // Face mesh landmark index groups (matches live_demo.py)
-    static FACE_OVAL = [10,338,297,332,284,251,389,356,454,323,361,288,397,365,379,378,400,377,152,148,176,149,150,136,172,58,132,93,234,127,162,21,54,103,67,109,10];
+    static FACE_OVAL = [
+        10, 338, 297, 332, 284, 251, 389, 356, 454,
+        323, 361, 288, 397, 365, 379, 378, 400, 377,
+        152, 148, 176, 149, 150, 136, 172, 58, 132,
+        93, 234, 127, 162, 21, 54, 103, 67, 109, 10,
+    ];
     static LEFT_EYE = [33,7,163,144,145,153,154,155,133,173,157,158,159,160,161,246];
     static RIGHT_EYE = [362,382,381,380,374,373,390,249,263,466,388,387,386,385,384,398];
     static LEFT_IRIS = [468,469,470,471,472];
@@ -593,9 +663,28 @@ export class VideoManagerLocal {
 
         // Irises (circles + gaze direction lines)
         const irisSets = [
-            { iris: VideoManagerLocal.LEFT_IRIS, center: VideoManagerLocal.LEFT_IRIS_CENTER, inner: VideoManagerLocal.LEFT_EYE_INNER, outer: VideoManagerLocal.LEFT_EYE_OUTER },
-            { iris: VideoManagerLocal.RIGHT_IRIS, center: VideoManagerLocal.RIGHT_IRIS_CENTER, inner: VideoManagerLocal.RIGHT_EYE_INNER, outer: VideoManagerLocal.RIGHT_EYE_OUTER },
+            {
+                iris: VideoManagerLocal.LEFT_IRIS,
+                center: VideoManagerLocal.LEFT_IRIS_CENTER,
+                inner: VideoManagerLocal.LEFT_EYE_INNER,
+                outer: VideoManagerLocal.LEFT_EYE_OUTER,
+            },
+            {
+                iris: VideoManagerLocal.RIGHT_IRIS,
+                center: VideoManagerLocal.RIGHT_IRIS_CENTER,
+                inner: VideoManagerLocal.RIGHT_EYE_INNER,
+                outer: VideoManagerLocal.RIGHT_EYE_OUTER,
+            },
         ];
+        // Get L2CS gaze angles + on_screen state from latest detection data
+        const detection = this._lastDetection;
+        const gazeYaw = detection ? detection.gaze_yaw : undefined;
+        const gazePitch = detection ? detection.gaze_pitch : undefined;
+        const onScreen = detection ? detection.on_screen : undefined;
+        const hasL2CSGaze = gazeYaw !== undefined && gazePitch !== undefined;
+        const gazeLineColor = (onScreen === false) ? '#FF0000' : '#00FF00';
+        const gazeLineLength = 100;
+
         for (const { iris, center: centerIdx, inner, outer } of irisSets) {
             const centerPt = _get(iris[0]);
             if (!centerPt) continue;
@@ -614,25 +703,65 @@ export class VideoManagerLocal {
             ctx.strokeStyle = '#FF00FF';
             ctx.lineWidth = 2;
             ctx.stroke();
-            // Iris center dot
+            // Iris center anchor dot (color-coded)
             ctx.beginPath();
-            ctx.arc(cx, cy, 2, 0, 2 * Math.PI);
-            ctx.fillStyle = '#FFFFFF';
+            ctx.arc(cx, cy, 3, 0, 2 * Math.PI);
+            ctx.fillStyle = gazeLineColor;
             ctx.fill();
-            // Gaze direction line (red)
-            const innerPt = _get(inner);
-            const outerPt = _get(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.strokeStyle = '#FFFFFF';
+            ctx.lineWidth = 1;
+            ctx.stroke();
+
+            // Gaze direction line — use L2CS angles when available, else geometric fallback
+            if (hasL2CSGaze) {
+                // L2CS pitch/yaw in radians -> pixel direction vector
+                // Matches upstream L2CS-Net vis.py draw_gaze formula:
+                //   dx = -length * sin(pitch) * cos(yaw)
+                //   dy = -length * sin(yaw)
+                const dx = -gazeLineLength * Math.sin(gazePitch) * Math.cos(gazeYaw);
+                const dy = -gazeLineLength * Math.sin(gazeYaw);
+                const ex = cx + dx;
+                const ey = cy + dy;
+
+                // Main gaze line (thick, color-coded)
                 ctx.beginPath();
                 ctx.moveTo(cx, cy);
-                ctx.lineTo(cx + dx * 3, cy + dy * 3);
-                ctx.strokeStyle = '#FF0000';
-                ctx.lineWidth = 1;
+                ctx.lineTo(ex, ey);
+                ctx.strokeStyle = gazeLineColor;
+                ctx.lineWidth = 3;
+                ctx.stroke();
+
+                // Arrowhead
+                const angle = Math.atan2(ey - cy, ex - cx);
+                const arrowLen = 10;
+                ctx.beginPath();
+                ctx.moveTo(ex, ey);
+                ctx.lineTo(ex - arrowLen * Math.cos(angle - 0.4), ey - arrowLen * Math.sin(angle - 0.4));
+                ctx.moveTo(ex, ey);
+                ctx.lineTo(ex - arrowLen * Math.cos(angle + 0.4), ey - arrowLen * Math.sin(angle + 0.4));
+                ctx.strokeStyle = gazeLineColor;
+                ctx.lineWidth = 2;
                 ctx.stroke();
+            } else {
+                // Geometric fallback: iris displacement from eye center (scaled up)
+                const innerPt = _get(inner);
+                const outerPt = _get(outer);
+                if (innerPt && outerPt) {
+                    const eyeCx = (innerPt[0] + outerPt[0]) / 2.0 * w;
+                    const eyeCy = (innerPt[1] + outerPt[1]) / 2.0 * h;
+                    const fdx = cx - eyeCx;
+                    const fdy = cy - eyeCy;
+                    const flen = Math.hypot(fdx, fdy);
+                    if (flen > 0.5) {
+                        const scale = gazeLineLength / flen;
+                        ctx.beginPath();
+                        ctx.moveTo(cx, cy);
+                        ctx.lineTo(cx + fdx * scale, cy + fdy * scale);
+                        ctx.strokeStyle = '#00FFFF';
+                        ctx.lineWidth = 2;
+                        ctx.stroke();
+                    }
+                }
             }
         }
     }
@@ -661,77 +790,6 @@ export class VideoManagerLocal {
             this.currentStatus = false;
         }
 
-        this.handleNotificationLogic(previousStatus, this.currentStatus);
-    }
-
-    handleNotificationLogic(previousStatus, currentStatus) {
-        const now = Date.now();
-
-        if (previousStatus && !currentStatus) {
-            this.unfocusedStartTime = now;
-        }
-
-        if (!previousStatus && currentStatus) {
-            this.unfocusedStartTime = null;
-        }
-
-        if (!currentStatus && this.unfocusedStartTime) {
-            const unfocusedDuration = (now - this.unfocusedStartTime) / 1000;
-
-            if (unfocusedDuration >= this.notificationThreshold) {
-                const canSendNotification = !this.lastNotificationTime ||
-                    (now - this.lastNotificationTime) >= this.notificationCooldown;
-
-                if (canSendNotification) {
-                    this.sendNotification(
-                        'Focus Alert',
-                        `You've been distracted for ${Math.floor(unfocusedDuration)} seconds. Get back to work!`
-                    );
-                    this.lastNotificationTime = now;
-                }
-            }
-        }
-    }
-
-    async requestNotificationPermission() {
-        if ('Notification' in window && Notification.permission === 'default') {
-            try {
-                await Notification.requestPermission();
-            } catch (error) {
-                console.error('Failed to request notification permission:', error);
-            }
-        }
-    }
-
-    async loadNotificationSettings() {
-        try {
-            const response = await fetch('/api/settings');
-            const settings = await response.json();
-            if (settings) {
-                this.notificationEnabled = settings.notification_enabled ?? true;
-                this.notificationThreshold = settings.notification_threshold ?? 30;
-            }
-        } catch (error) {
-            console.error('Failed to load notification settings:', error);
-        }
-    }
-
-    sendNotification(title, message) {
-        if (!this.notificationEnabled) return;
-        if ('Notification' in window && Notification.permission === 'granted') {
-            try {
-                const notification = new Notification(title, {
-                    body: message,
-                    icon: '/vite.svg',
-                    badge: '/vite.svg',
-                    tag: 'focus-guard-distraction',
-                    requireInteraction: false
-                });
-                setTimeout(() => notification.close(), 3000);
-            } catch (error) {
-                console.error('Failed to send notification:', error);
-            }
-        }
     }
 
     async stopStreaming() {
@@ -821,10 +879,6 @@ export class VideoManagerLocal {
             ctx.clearRect(0, 0, this.displayCanvas.width, this.displayCanvas.height);
         }
 
-        // Reset transient state
-        this.unfocusedStartTime = null;
-        this.lastNotificationTime = null;
-
         console.log('Streaming stopped');
         console.log('Stats:', this.stats);
     }

tests/test_gaze_pipeline.py

@@ -0,0 +1,363 @@
+"""
+Diagnostic test for the full gaze pipeline:
+  calibration → predict → fusion → focus decision
+
+Tests that looking at screen center reads as focused,
+and looking away reads as not focused.
+"""
+import math
+import sys
+import os
+import numpy as np
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+from models.gaze_calibration import GazeCalibration, DEFAULT_TARGETS
+from models.gaze_eye_fusion import GazeEyeFusion
+
+
+def _make_landmarks_with_ear(ear_value=0.28):
+    """Create a minimal 478-landmark array with given EAR.
+    Only the EAR indices (6 per eye) and iris indices need real values."""
+    lm = np.full((478, 3), 0.5, dtype=np.float32)
+    # Left eye EAR landmarks [33, 160, 158, 133, 153, 145]
+    # p1=33, p2=160, p3=158, p4=133, p5=153, p6=145
+    # EAR = (|p2-p6| + |p3-p5|) / (2 * |p1-p4|)
+    # Set them so EAR ≈ ear_value with horizontal dist = 0.1
+    h_dist = 0.1
+    v_dist = ear_value * h_dist  # EAR = v_dist / h_dist when both verticals equal
+    lm[33] = [0.4, 0.5, 0]   # p1 outer
+    lm[133] = [0.5, 0.5, 0]  # p4 inner
+    lm[160] = [0.45, 0.5 - v_dist/2, 0]  # p2 top
+    lm[145] = [0.45, 0.5 + v_dist/2, 0]  # p6 bottom
+    lm[158] = [0.45, 0.5 - v_dist/2, 0]  # p3 top
+    lm[153] = [0.45, 0.5 + v_dist/2, 0]  # p5 bottom
+    # Right eye — mirror
+    lm[362] = [0.6, 0.5, 0]
+    lm[263] = [0.5, 0.5, 0]
+    lm[385] = [0.55, 0.5 - v_dist/2, 0]
+    lm[380] = [0.55, 0.5 + v_dist/2, 0]
+    lm[387] = [0.55, 0.5 - v_dist/2, 0]
+    lm[373] = [0.55, 0.5 + v_dist/2, 0]
+    return lm
+
+
+def simulate_calibration(noise_std=0.01):
+    """Simulate a 9-point calibration where the user looks at each target.
+
+    For each target (screen_x, screen_y), we generate synthetic gaze angles:
+      yaw ≈ (screen_x - 0.5) * 0.7 radians  (maps 0..1 to roughly ±20°)
+      pitch ≈ (screen_y - 0.5) * 0.5 radians (maps 0..1 to roughly ±15°)
+    Plus some noise to simulate real jitter.
+    """
+    cal = GazeCalibration()
+
+    # Simulate gaze angle for a given screen target
+    def target_to_gaze(tx, ty):
+        yaw = (tx - 0.5) * 0.7   # ~±20° across screen width
+        pitch = (ty - 0.5) * 0.5  # ~±14° across screen height
+        return yaw, pitch
+
+    for i, (tx, ty) in enumerate(DEFAULT_TARGETS):
+        base_yaw, base_pitch = target_to_gaze(tx, ty)
+        n_samples = 45 if i == 0 else 30  # center gets more
+        for _ in range(n_samples):
+            yaw = base_yaw + np.random.normal(0, noise_std)
+            pitch = base_pitch + np.random.normal(0, noise_std)
+            cal.collect_sample(yaw, pitch)
+        cal.advance()
+
+    ok = cal.fit()
+    return cal, ok
+
+
+def test_calibration_accuracy():
+    """Test that calibration maps screen positions correctly."""
+    print("\n" + "="*60)
+    print("TEST 1: Calibration accuracy")
+    print("="*60)
+
+    np.random.seed(42)
+    cal, ok = simulate_calibration(noise_std=0.008)
+    assert ok, "Calibration fit failed!"
+    print(f"  Calibration fitted: {ok}")
+
+    # Test prediction at each target
+    max_error = 0
+    for tx, ty in DEFAULT_TARGETS:
+        yaw = (tx - 0.5) * 0.7
+        pitch = (ty - 0.5) * 0.5
+        px, py = cal.predict(yaw, pitch)
+        err = math.sqrt((px - tx)**2 + (py - ty)**2)
+        max_error = max(max_error, err)
+        status = "OK" if err < 0.1 else "BAD"
+        print(f"  Target ({tx:.2f},{ty:.2f}) → Predicted ({px:.3f},{py:.3f}) "
+              f"error={err:.4f} [{status}]")
+
+    print(f"\n  Max error: {max_error:.4f}")
+    assert max_error < 0.15, f"Calibration error too high: {max_error:.4f}"
+    print("  PASSED")
+
+
+def test_fusion_focused_at_center():
+    """Test that looking at screen center = focused."""
+    print("\n" + "="*60)
+    print("TEST 2: Looking at screen center → FOCUSED")
+    print("="*60)
+
+    np.random.seed(42)
+    cal, ok = simulate_calibration()
+    assert ok
+
+    fusion = GazeEyeFusion(cal)
+    lm = _make_landmarks_with_ear(0.28)  # eyes open
+
+    # Looking at center: yaw≈0, pitch≈0
+    center_yaw = (0.5 - 0.5) * 0.7  # = 0
+    center_pitch = (0.5 - 0.5) * 0.5  # = 0
+
+    # Run a few frames to let EMA settle
+    for i in range(10):
+        result = fusion.update(center_yaw, center_pitch, lm)
+
+    print(f"  gaze_x={result['gaze_x']:.3f} gaze_y={result['gaze_y']:.3f}")
+    print(f"  on_screen={result['on_screen']}")
+    print(f"  focus_score={result['focus_score']:.3f} (threshold=0.42)")
+    print(f"  focused={result['focused']}")
+    print(f"  ear={result['ear']:.4f}")
+
+    assert result["on_screen"], "Should be on screen!"
+    assert result["focused"], f"Should be focused! score={result['focus_score']}"
+    assert 0.35 < result["gaze_x"] < 0.65, f"gaze_x should be near 0.5, got {result['gaze_x']}"
+    assert 0.35 < result["gaze_y"] < 0.65, f"gaze_y should be near 0.5, got {result['gaze_y']}"
+    print("  PASSED")
+
+
+def test_fusion_focused_at_edges():
+    """Test that looking at screen edges still = focused."""
+    print("\n" + "="*60)
+    print("TEST 3: Looking at screen edges → FOCUSED")
+    print("="*60)
+
+    np.random.seed(42)
+    cal, ok = simulate_calibration()
+    assert ok
+    lm = _make_landmarks_with_ear(0.28)
+
+    edge_targets = [
+        (0.15, 0.15, "top-left"),
+        (0.85, 0.15, "top-right"),
+        (0.15, 0.85, "bottom-left"),
+        (0.85, 0.85, "bottom-right"),
+        (0.5, 0.15, "top-center"),
+        (0.5, 0.85, "bottom-center"),
+    ]
+
+    all_pass = True
+    for tx, ty, label in edge_targets:
+        fusion = GazeEyeFusion(cal)
+        yaw = (tx - 0.5) * 0.7
+        pitch = (ty - 0.5) * 0.5
+        for _ in range(10):
+            result = fusion.update(yaw, pitch, lm)
+
+        status = "PASS" if result["focused"] else "FAIL"
+        if not result["focused"]:
+            all_pass = False
+        print(f"  {label:15s} → gaze=({result['gaze_x']:.3f},{result['gaze_y']:.3f}) "
+              f"on_screen={result['on_screen']} score={result['focus_score']:.3f} "
+              f"[{status}]")
+
+    assert all_pass, "Some edge positions reported unfocused!"
+    print("  PASSED")
+
+
+def test_fusion_unfocused_off_screen():
+    """Test that looking far away = not focused."""
+    print("\n" + "="*60)
+    print("TEST 4: Looking far off screen → NOT FOCUSED")
+    print("="*60)
+
+    np.random.seed(42)
+    cal, ok = simulate_calibration()
+    assert ok
+    lm = _make_landmarks_with_ear(0.28)
+
+    off_screen_targets = [
+        (2.0, 0.5, "far right"),
+        (-1.0, 0.5, "far left"),
+        (0.5, 2.0, "far down"),
+        (0.5, -1.0, "far up"),
+    ]
+
+    all_pass = True
+    for tx, ty, label in off_screen_targets:
+        fusion = GazeEyeFusion(cal)
+        yaw = (tx - 0.5) * 0.7
+        pitch = (ty - 0.5) * 0.5
+        for _ in range(10):
+            result = fusion.update(yaw, pitch, lm)
+
+        status = "PASS" if not result["focused"] else "FAIL"
+        if result["focused"]:
+            all_pass = False
+        print(f"  {label:15s} → gaze=({result['gaze_x']:.3f},{result['gaze_y']:.3f}) "
+              f"on_screen={result['on_screen']} score={result['focus_score']:.3f} "
+              f"[{status}]")
+
+    assert all_pass, "Some off-screen positions reported focused!"
+    print("  PASSED")
+
+
+def test_fusion_with_closed_eyes():
+    """Test that sustained closed eyes = not focused, but brief blinks are OK."""
+    print("\n" + "="*60)
+    print("TEST 5: Sustained closed eyes → NOT FOCUSED, brief blink → still FOCUSED")
+    print("="*60)
+
+    np.random.seed(42)
+    cal, ok = simulate_calibration()
+    assert ok
+
+    lm_closed = _make_landmarks_with_ear(0.10)  # eyes almost closed
+    lm_open = _make_landmarks_with_ear(0.28)
+
+    # 5a: Brief blink (2 frames closed) should NOT trigger unfocused
+    fusion = GazeEyeFusion(cal)
+    for _ in range(8):
+        fusion.update(0, 0, lm_open)
+    for _ in range(2):  # 2-frame blink
+        result = fusion.update(0, 0, lm_closed)
+    print(f"  Brief blink (2 frames): focused={result['focused']} score={result['focus_score']:.3f}")
+    assert result["focused"], "Brief blink should NOT trigger unfocused!"
+
+    # 5b: Sustained closure (6+ frames) SHOULD trigger unfocused
+    fusion2 = GazeEyeFusion(cal)
+    for _ in range(10):
+        result2 = fusion2.update(0, 0, lm_closed)
+
+    print(f"  Sustained closure (10 frames): focused={result2['focused']} score={result2['focus_score']:.3f}")
+    assert not result2["focused"], f"Sustained closed eyes should be unfocused! score={result2['focus_score']}"
+    print("  PASSED")
+
+
+def test_l2cs_cosine_scoring():
+    """Test the L2CSPipeline cosine scoring directly."""
+    print("\n" + "="*60)
+    print("TEST 6: L2CS cosine scoring (no calibration)")
+    print("="*60)
+
+    YAW_THRESHOLD = 22.0
+    PITCH_THRESHOLD = 20.0
+
+    test_angles = [
+        (0, 0, "dead center"),
+        (5, 3, "slightly off"),
+        (10, 8, "moderate off"),
+        (15, 12, "near edge"),
+        (20, 18, "at threshold"),
+        (25, 22, "beyond threshold"),
+        (35, 30, "way off"),
+    ]
+
+    for yaw_deg, pitch_deg, label in test_angles:
+        yaw_t = min(yaw_deg / YAW_THRESHOLD, 1.0)
+        pitch_t = min(pitch_deg / PITCH_THRESHOLD, 1.0)
+        yaw_score = 0.5 * (1.0 + math.cos(math.pi * yaw_t))
+        pitch_score = 0.5 * (1.0 + math.cos(math.pi * pitch_t))
+        gaze_score = 0.55 * yaw_score + 0.45 * pitch_score
+        focused = gaze_score >= 0.52
+
+        print(f"  yaw={yaw_deg:3d}° pitch={pitch_deg:3d}° → "
+              f"score={gaze_score:.3f} focused={focused} [{label}]")
+
+    print("  (informational — no assertion)")
+
+
+def test_derotation_consistency():
+    """Test that derotation produces stable results."""
+    print("\n" + "="*60)
+    print("TEST 7: Derotation consistency")
+    print("="*60)
+
+    def _derotate_gaze(pitch_rad, yaw_rad, roll_deg):
+        roll_rad = -math.radians(roll_deg)
+        cos_r, sin_r = math.cos(roll_rad), math.sin(roll_rad)
+        return (yaw_rad * sin_r + pitch_rad * cos_r,
+                yaw_rad * cos_r - pitch_rad * sin_r)
+
+    pitch, yaw = 0.1, 0.2  # radians
+
+    results = []
+    for roll_deg in [0, 5, -5, 10, -10, 15]:
+        dr_pitch, dr_yaw = _derotate_gaze(pitch, yaw, roll_deg)
+        results.append((roll_deg, dr_pitch, dr_yaw))
+        print(f"  roll={roll_deg:+4d}° → pitch={dr_pitch:.4f} yaw={dr_yaw:.4f}")
+
+    # At roll=0, should pass through unchanged
+    assert abs(results[0][1] - pitch) < 0.001, "Derotation at roll=0 should be identity for pitch"
+    # Note: derotation formula swaps pitch/yaw, so at roll=0:
+    # returns (yaw*sin(0) + pitch*cos(0), yaw*cos(0) - pitch*sin(0)) = (pitch, yaw)
+    print(f"\n  Note: _derotate_gaze returns (pitch', yaw') = "
+          f"(yaw*sin(-roll) + pitch*cos(-roll), yaw*cos(-roll) - pitch*sin(-roll))")
+    print("  At roll=0: returns (pitch, yaw) — identity ✓")
+    print("  PASSED")
+
+
+def test_calibration_with_verification_points():
+    """Simulate a full calibration + verification workflow.
+    After calibrating, test 5 verification targets that weren't in calibration."""
+    print("\n" + "="*60)
+    print("TEST 8: Calibration + verification targets")
+    print("="*60)
+
+    np.random.seed(42)
+    cal, ok = simulate_calibration(noise_std=0.005)
+    assert ok
+
+    # Verification points NOT in the calibration grid
+    verify_targets = [
+        (0.3, 0.3, "upper-left quarter"),
+        (0.7, 0.3, "upper-right quarter"),
+        (0.5, 0.5, "dead center"),
+        (0.3, 0.7, "lower-left quarter"),
+        (0.7, 0.7, "lower-right quarter"),
+    ]
+
+    lm = _make_landmarks_with_ear(0.28)
+    all_pass = True
+
+    for tx, ty, label in verify_targets:
+        fusion = GazeEyeFusion(cal)
+        yaw = (tx - 0.5) * 0.7
+        pitch = (ty - 0.5) * 0.5
+        for _ in range(15):
+            result = fusion.update(yaw, pitch, lm)
+
+        px, py = result["gaze_x"], result["gaze_y"]
+        err = math.sqrt((px - tx)**2 + (py - ty)**2)
+        status = "PASS" if result["focused"] and err < 0.2 else "FAIL"
+        if status == "FAIL":
+            all_pass = False
+
+        print(f"  {label:25s} target=({tx:.1f},{ty:.1f}) → "
+              f"gaze=({px:.3f},{py:.3f}) err={err:.3f} "
+              f"focused={result['focused']} [{status}]")
+
+    assert all_pass, "Verification targets failed!"
+    print("  PASSED")
+
+
+if __name__ == "__main__":
+    test_calibration_accuracy()
+    test_fusion_focused_at_center()
+    test_fusion_focused_at_edges()
+    test_fusion_unfocused_off_screen()
+    test_fusion_with_closed_eyes()
+    test_l2cs_cosine_scoring()
+    test_derotation_consistency()
+    test_calibration_with_verification_points()
+
+    print("\n" + "="*60)
+    print("ALL TESTS PASSED")
+    print("="*60)

ui/pipeline.py

@@ -22,6 +22,7 @@ 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.collect_features import FEATURE_NAMES, TemporalTracker, extract_features
+from models.eye_scorer import compute_avg_ear
 
 # Same 10 features used for MLP training (prepare_dataset) and inference
 MLP_FEATURE_NAMES = SELECTED_FEATURES["face_orientation"]
@@ -653,13 +654,22 @@ class XGBoostPipeline:
         self.close()
 
 
+def _is_git_lfs_pointer(path: str) -> bool:
+    # *.pkl in repo are often LFS stubs; torch.load sees "v" from "version ..." and dies
+    try:
+        with open(path, "rb") as f:
+            return f.read(64).startswith(b"version https://git-lfs.github.com/spec/v1")
+    except OSError:
+        return False
+
+
 def _resolve_l2cs_weights():
     for p in [
+        os.path.join(_PROJECT_ROOT, "checkpoints", "L2CSNet_gaze360.pkl"),
         os.path.join(_PROJECT_ROOT, "models", "L2CS-Net", "models", "L2CSNet_gaze360.pkl"),
         os.path.join(_PROJECT_ROOT, "models", "L2CSNet_gaze360.pkl"),
-        os.path.join(_PROJECT_ROOT, "checkpoints", "L2CSNet_gaze360.pkl"),
     ]:
-        if os.path.isfile(p):
+        if os.path.isfile(p) and not _is_git_lfs_pointer(p):
             return p
     return None
 
@@ -671,17 +681,22 @@ def is_l2cs_weights_available():
 class L2CSPipeline:
     # Uses in-tree l2cs.Pipeline (RetinaFace + ResNet50) for gaze estimation
     # and MediaPipe for head pose, EAR, MAR, and roll de-rotation.
+    # L2CS inference is throttled to every Nth frame to reduce latency;
+    # intermediate frames reuse the last gaze result.
 
     YAW_THRESHOLD = 22.0
     PITCH_THRESHOLD = 20.0
+    _SKIP_CPU = 5   # run L2CS every 5th frame on CPU
+    _SKIP_GPU = 1   # run every frame on GPU (fast enough)
 
-    def __init__(self, weights_path=None, arch="ResNet50", device="cpu",
+    def __init__(self, weights_path=None, arch="ResNet50", device=None,
                  threshold=0.52, detector=None):
         resolved = weights_path or _resolve_l2cs_weights()
         if resolved is None or not os.path.isfile(resolved):
             raise FileNotFoundError(
-                "L2CS weights not found. Place L2CSNet_gaze360.pkl in "
-                "models/L2CS-Net/models/ or checkpoints/"
+                "L2CS weights missing or Git LFS not pulled. "
+                "Run: git lfs pull  or  python download_l2cs_weights.py  "
+                "(real .pkl in checkpoints/ or models/L2CS-Net/models/)"
             )
 
         # add in-tree L2CS-Net to import path
@@ -691,7 +706,14 @@ class L2CSPipeline:
         from l2cs import Pipeline as _L2CSPipeline
 
         import torch
-        # bypass upstream select_device bug by constructing torch.device directly
+
+        # Auto-detect GPU if no device specified
+        if device is None:
+            device = "cuda" if torch.cuda.is_available() else "cpu"
+        self._device_str = device
+        self._on_gpu = device.startswith("cuda")
+
+        # torch.device passed explicitly for reliable CPU/CUDA selection
         self._pipeline = _L2CSPipeline(
             weights=pathlib.Path(resolved), arch=arch, device=torch.device(device),
         )
@@ -704,10 +726,21 @@ class L2CSPipeline:
         self._threshold = threshold
         self._smoother = _OutputSmoother()
 
+        # Frame skipping: GPU is fast enough to run every frame
+        self.L2CS_SKIP_FRAMES = self._SKIP_GPU if self._on_gpu else self._SKIP_CPU
+        self._frame_count = 0
+        self._last_l2cs_result = None  # cached (derotated pitch_rad, yaw_rad)
+        self._calibrating = False  # set True during calibration to disable frame skipping
+
+        # Blink tolerance: hold score steady during brief blinks
+        self._blink_streak = 0
+        self._BLINK_EAR = 0.18
+        self._BLINK_GRACE = 5  # ignore blinks shorter than this many frames (~300ms)
+
         print(
             f"[L2CS] Loaded {resolved} | arch={arch} device={device} "
             f"yaw_thresh={self.YAW_THRESHOLD} pitch_thresh={self.PITCH_THRESHOLD} "
-            f"threshold={threshold}"
+            f"threshold={threshold} skip_frames={self.L2CS_SKIP_FRAMES}"
         )
 
     @staticmethod
@@ -728,8 +761,9 @@ class L2CSPipeline:
             "yaw": None, "pitch": None, "roll": None, "mar": None, "is_yawning": False,
         }
 
-        # MediaPipe: head pose, eye/mouth scores
+        # MediaPipe: head pose, eye/mouth scores (runs every frame — fast)
         roll_deg = 0.0
+        blinking = False
         if landmarks is not None:
             angles = self._head_pose.estimate(landmarks, w, h)
             if angles is not None:
@@ -740,19 +774,54 @@ class L2CSPipeline:
             out["mar"] = compute_mar(landmarks)
             out["is_yawning"] = out["mar"] > MAR_YAWN_THRESHOLD
 
-        # L2CS gaze (uses its own RetinaFace detector internally)
-        results = self._pipeline.step(bgr_frame)
+            # Detect blink — EAR drops below threshold
+            ear = compute_avg_ear(landmarks)
+            if ear < self._BLINK_EAR:
+                self._blink_streak += 1
+                blinking = True
+            else:
+                self._blink_streak = 0
+
+        # During a brief blink, L2CS gaze angles are unreliable (eyes closed).
+        # Hold the previous score steady until blink ends or becomes sustained.
+        if blinking and self._blink_streak < self._BLINK_GRACE:
+            # Brief blink — freeze score, skip L2CS inference
+            out["raw_score"] = self._smoother._score
+            out["is_focused"] = out["raw_score"] >= self._threshold
+            # Keep previous gaze angles for visualization continuity
+            if self._last_l2cs_result is not None:
+                out["gaze_pitch"] = self._last_l2cs_result[0]
+                out["gaze_yaw"] = self._last_l2cs_result[1]
+            return out
+
+        # L2CS gaze — throttled: only run every Nth frame, reuse cached result otherwise.
+        # During calibration, run every frame for accurate sample collection.
+        self._frame_count += 1
+        if self._calibrating:
+            run_l2cs = True
+        else:
+            run_l2cs = (self._frame_count % self.L2CS_SKIP_FRAMES == 1) or self._last_l2cs_result is None
+
+        if run_l2cs:
+            results = self._pipeline.step(bgr_frame)
+            if results is not None and results.pitch.shape[0] > 0:
+                raw_pitch = float(results.pitch[0])
+                raw_yaw = float(results.yaw[0])
+                # Derotate immediately and cache the derotated result
+                # so cached frames don't get re-derotated with a different roll.
+                dr_pitch, dr_yaw = self._derotate_gaze(raw_pitch, raw_yaw, roll_deg)
+                self._last_l2cs_result = (dr_pitch, dr_yaw)
+            else:
+                self._last_l2cs_result = None
 
-        if results is None or results.pitch.shape[0] == 0:
+        if self._last_l2cs_result is None:
             smoothed = self._smoother.update(0.0, landmarks is not None)
             out["raw_score"] = smoothed
             out["is_focused"] = smoothed >= self._threshold
             return out
 
-        pitch_rad = float(results.pitch[0])
-        yaw_rad = float(results.yaw[0])
-
-        pitch_rad, yaw_rad = self._derotate_gaze(pitch_rad, yaw_rad, roll_deg)
+        pitch_rad, yaw_rad = self._last_l2cs_result
+        # Already derotated above — use directly
         out["gaze_pitch"] = pitch_rad
         out["gaze_yaw"] = yaw_rad
 
@@ -773,12 +842,20 @@ class L2CSPipeline:
         if out["is_yawning"]:
             gaze_score = 0.0
 
+        # Sustained closed eyes — let score drop
+        if self._blink_streak >= self._BLINK_GRACE:
+            gaze_score = 0.0
+
         out["raw_score"] = self._smoother.update(float(gaze_score), True)
         out["is_focused"] = out["raw_score"] >= self._threshold
         return out
 
     def reset_session(self):
         self._smoother.reset()
+        self._frame_count = 0
+        self._last_l2cs_result = None
+        self._calibrating = False
+        self._blink_streak = 0
 
     def close(self):
         if self._owns_detector: