Spaces:

FocusGuard
/

FocusGuardBaseModel

Sleeping

App Files Files Community

Kexin-251202 commited on 16 days ago

Commit

c86c45b

verified ·

1 Parent(s): 49eb313

Deploy base model

Browse files

changed main.py(Fast API, delete yolo), Dockerfile, requirements

Files changed (46) hide show

.gitignore +24 -0
Dockerfile +22 -0
api/history +0 -0
api/import +0 -0
api/sessions +0 -0
app.py +1 -0
checkpoints/gru_best.pt +3 -0
checkpoints/gru_meta_best.npz +3 -0
checkpoints/gru_scaler_best.npz +3 -0
checkpoints/hybrid_focus_config.json +10 -0
checkpoints/meta_best.npz +3 -0
checkpoints/model_best.joblib +3 -0
checkpoints/scaler_best.joblib +3 -0
docker-compose.yml +5 -0
eslint.config.js +29 -0
index.html +17 -0
main.py +598 -0
models/__init__.py +1 -0
models/collect_features.py +356 -0
models/eye_classifier.py +69 -0
models/eye_crop.py +77 -0
models/eye_scorer.py +168 -0
models/face_mesh.py +94 -0
models/head_pose.py +121 -0
package-lock.json +0 -0
package.json +27 -0
public/assets/111.jpg +0 -0
public/vite.svg +1 -0
requirements.txt +14 -0
src/App.css +799 -0
src/App.jsx +119 -0
src/assets/react.svg +1 -0
src/components/Achievement.jsx +245 -0
src/components/Customise.jsx +220 -0
src/components/FocusPage.jsx +264 -0
src/components/FocusPageLocal.jsx +454 -0
src/components/Help.jsx +87 -0
src/components/Home.jsx +22 -0
src/components/Records.jsx +312 -0
src/index.css +73 -0
src/main.jsx +10 -0
src/utils/VideoManager.js +353 -0
src/utils/VideoManagerLocal.js +497 -0
ui/live_demo.py +303 -0
ui/pipeline.py +700 -0
vite.config.js +22 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Dockerfile ADDED Viewed

	@@ -0,0 +1,22 @@

+FROM python:3.10-slim
+RUN useradd -m -u 1000 user
+ENV HOME=/home/user PATH=/home/user/.local/bin:$PATH
+WORKDIR /app
+RUN apt-get update && apt-get install -y --no-install-recommends libglib2.0-0 libsm6 libxrender1 libxext6 libxcb1 libgl1 libgomp1 ffmpeg libavcodec-dev libavformat-dev libavutil-dev libswscale-dev libavdevice-dev libopus-dev libvpx-dev libsrtp2-dev curl build-essential && rm -rf /var/lib/apt/lists/*
+RUN curl -fsSL  | bash - && apt-get install -y --no-install-recommends nodejs && rm -rf /var/lib/apt/lists/*
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+ENV FOCUSGUARD_CACHE_DIR=/app/.cache/focusguard
+RUN python -c "from models.face_mesh import _ensure_model; _ensure_model()"
+RUN mkdir -p /app/data && chown -R user:user /app
+USER user
+EXPOSE 7860
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

api/history ADDED Viewed

File without changes

api/import ADDED Viewed

File without changes

api/sessions ADDED Viewed

File without changes

app.py ADDED Viewed

	@@ -0,0 +1 @@


1	+ from main import app

checkpoints/gru_best.pt ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:cb913f877e7976dea927d1f05503a4ca8ed423720688fc1f911595dcd6260746
+size 170769

checkpoints/gru_meta_best.npz ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:aa3424cb87c51e9ad30e6fc0139abd095b201c91bcde47682749886739b360d9
+size 3282

checkpoints/gru_scaler_best.npz ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:0e308ab172128506873b811b0cdea5a90fcde2ecff170d792d101c77b80d63e5
+size 648

checkpoints/hybrid_focus_config.json ADDED Viewed

	@@ -0,0 +1,10 @@

+{
+  "w_mlp": 0.6000000000000001,
+  "w_geo": 0.3999999999999999,
+  "threshold": 0.35,
+  "use_yawn_veto": true,
+  "geo_face_weight": 0.4,
+  "geo_eye_weight": 0.6,
+  "mar_yawn_threshold": 0.55,
+  "metric": "f1"
+}

checkpoints/meta_best.npz ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:5d78d1df5e25536a2c82c4b8f5fd0c26dd35f44b28fd59761634cbf78c7546f8
+size 4196

checkpoints/model_best.joblib ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:183f2d4419e0eb1e58704e5a7312eb61e331523566d4dc551054a07b3aac7557
+size 5775881

checkpoints/scaler_best.joblib ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:02ed6b4c0d99e0254c6a740a949da2384db58ec7d3e6df6432b9bfcd3a296c71
+size 783

docker-compose.yml ADDED Viewed

	@@ -0,0 +1,5 @@

+services:
+  focus-guard:
+    build: .
+    ports:
+      - "7860:7860"

eslint.config.js ADDED Viewed

	@@ -0,0 +1,29 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

index.html ADDED Viewed

	@@ -0,0 +1,17 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>哈哈卧槽几点了</title>
+  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

main.py ADDED Viewed

	@@ -0,0 +1,598 @@

+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, HTTPException, Request
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from typing import Optional, List, Any
+import base64
+import cv2
+import numpy as np
+import aiosqlite
+import json
+from datetime import datetime, timedelta
+import math
+import os
+from pathlib import Path
+from typing import Callable
+import asyncio
+from aiortc import RTCPeerConnection, RTCSessionDescription, VideoStreamTrack
+from av import VideoFrame
+from ui.pipeline import MLPPipeline
+# Initialize FastAPI app
+app = FastAPI(title="Focus Guard API")
+# Add CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+# Global variables
+db_path = "focus_guard.db"
+pcs = set()
+async def _wait_for_ice_gathering(pc: RTCPeerConnection):
+    if pc.iceGatheringState == "complete":
+        return
+    done = asyncio.Event()
+    @pc.on("icegatheringstatechange")
+    def _on_state_change():
+        if pc.iceGatheringState == "complete":
+            done.set()
+    await done.wait()
+# ================ DATABASE MODELS ================
+async def init_database():
+    """Initialize SQLite database with required tables"""
+    async with aiosqlite.connect(db_path) as db:
+        # FocusSessions table
+        await db.execute("""
+            CREATE TABLE IF NOT EXISTS focus_sessions (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                start_time TIMESTAMP NOT NULL,
+                end_time TIMESTAMP,
+                duration_seconds INTEGER DEFAULT 0,
+                focus_score REAL DEFAULT 0.0,
+                total_frames INTEGER DEFAULT 0,
+                focused_frames INTEGER DEFAULT 0,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+        """)
+        # FocusEvents table
+        await db.execute("""
+            CREATE TABLE IF NOT EXISTS focus_events (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                session_id INTEGER NOT NULL,
+                timestamp TIMESTAMP NOT NULL,
+                is_focused BOOLEAN NOT NULL,
+                confidence REAL NOT NULL,
+                detection_data TEXT,
+                FOREIGN KEY (session_id) REFERENCES focus_sessions (id)
+            )
+        """)
+        # UserSettings table
+        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 'yolov8n.pt'
+            )
+        """)
+        # 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, 'yolov8n.pt')
+        """)
+        await db.commit()
+# ================ PYDANTIC MODELS ================
+class SessionCreate(BaseModel):
+    pass
+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
+class VideoTransformTrack(VideoStreamTrack):
+    def __init__(self, track, session_id: int, get_channel: Callable[[], Any]):
+        super().__init__()
+        self.track = track
+        self.session_id = session_id
+        self.get_channel = get_channel
+        self.last_inference_time = 0
+        self.min_inference_interval = 1 / 60
+        self.last_frame = None
+    async def recv(self):
+        frame = await self.track.recv()
+        img = frame.to_ndarray(format="bgr24")
+        if img is None:
+            return frame
+        # Normalize size for inference/drawing
+        img = cv2.resize(img, (640, 480))
+        now = datetime.now().timestamp()
+        do_infer = (now - self.last_inference_time) >= self.min_inference_interval
+        if do_infer and mlp_pipeline is not None:
+            self.last_inference_time = now
+            out = mlp_pipeline.process_frame(img)detections = parse_yolo_results(results)
+            is_focused = out["is_focused"]
+            confidence = out["mlp_prob"]
+            metadata = {"s_face": out["s_face"], "s_eye": out["s_eye"], "mar": out["mar"]}
+            detections = []
+            status_text = "FOCUSED" if is_focused else "NOT FOCUSED"
+            color = (0, 255, 0) if is_focused else (0, 0, 255)
+            cv2.putText(img, status_text, (10, 25), cv2.FONT_HERSHEY_SIMPLEX, 0.7, color, 2)
+            cv2.putText(img, f"Confidence: {confidence * 100:.1f}%", (10, 50), cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 1)
+            if self.session_id:
+                await store_focus_event(self.session_id, is_focused, confidence, metadata)
+            channel = self.get_channel()
+            if channel and channel.readyState == "open":
+                try:
+                    channel.send(json.dumps({"type": "detection", "focused": is_focused, "confidence": round(confidence, 3), "detections": detections}))
+                except Exception:
+                    pass
+            self.last_frame = img
+        elif self.last_frame is not None:
+            img = self.last_frame
+        new_frame = VideoFrame.from_ndarray(img, format="bgr24")
+        new_frame.pts = frame.pts
+        new_frame.time_base = frame.time_base
+        return new_frame
+# ================ DATABASE OPERATIONS ================
+async def create_session():
+    async with aiosqlite.connect(db_path) as db:
+        cursor = await db.execute(
+            "INSERT INTO focus_sessions (start_time) VALUES (?)",
+            (datetime.now().isoformat(),)
+        )
+        await db.commit()
+        return cursor.lastrowid
+async def end_session(session_id: int):
+    async with aiosqlite.connect(db_path) as db:
+        cursor = await db.execute(
+            "SELECT start_time, total_frames, focused_frames FROM focus_sessions WHERE id = ?",
+            (session_id,)
+        )
+        row = await cursor.fetchone()
+        if not row:
+            return None
+        start_time_str, total_frames, focused_frames = row
+        start_time = datetime.fromisoformat(start_time_str)
+        end_time = datetime.now()
+        duration = (end_time - start_time).total_seconds()
+        focus_score = focused_frames / total_frames if total_frames > 0 else 0.0
+        await db.execute("""
+            UPDATE focus_sessions
+            SET end_time = ?, duration_seconds = ?, focus_score = ?
+            WHERE id = ?
+        """, (end_time.isoformat(), int(duration), focus_score, session_id))
+        await db.commit()
+        return {
+            'session_id': session_id,
+            'start_time': start_time_str,
+            'end_time': end_time.isoformat(),
+            'duration_seconds': int(duration),
+            'focus_score': round(focus_score, 3),
+            'total_frames': total_frames,
+            'focused_frames': focused_frames
+        }
+async def store_focus_event(session_id: int, is_focused: bool, confidence: float, metadata: dict):
+    async with aiosqlite.connect(db_path) as db:
+        await db.execute("""
+            INSERT INTO focus_events (session_id, timestamp, is_focused, confidence, detection_data)
+            VALUES (?, ?, ?, ?, ?)
+        """, (session_id, datetime.now().isoformat(), is_focused, confidence, json.dumps(metadata)))
+        await db.execute(f"""
+            UPDATE focus_sessions
+            SET total_frames = total_frames + 1,
+                focused_frames = focused_frames + {1 if is_focused else 0}
+            WHERE id = ?
+        """, (session_id,))
+        await db.commit()
+# ================ STARTUP/SHUTDOWN ================
+mlp_pipeline = None
+@app.on_event("startup")
+async def startup_event():
+    global mlp_pipeline
+    print(" Starting Focus Guard API...")
+    await init_database()
+    print("[OK] Database initialized")
+    mlp_pipeline = MLPPipeline()
+    print("[OK] MLPPipeline loaded")
+@app.on_event("shutdown")
+async def shutdown_event():
+    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")
+        @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}")
+                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()
+        raise HTTPException(status_code=500, detail=f"WebRTC error: {str(e)}")
+# ================ WEBSOCKET ================
+@app.websocket("/ws/video")
+async def websocket_endpoint(websocket: WebSocket):
+    await websocket.accept()
+    session_id = None
+    frame_count = 0
+    last_inference_time = 0
+    min_inference_interval = 1 / 60
+    try:
+        async with aiosqlite.connect(db_path) as db:
+            cursor = await db.execute("SELECT sensitivity FROM user_settings WHERE id = 1")
+            row = await cursor.fetchone()
+            sensitivity = row[0] if row else 6
+        while True:
+            data = await websocket.receive_json()
+            if data['type'] == 'frame':
+                from time import time
+                current_time = time()
+                if current_time - last_inference_time < min_inference_interval:
+                    await websocket.send_json({'type': 'ack', 'frame_count': frame_count})
+                    continue
+                last_inference_time = current_time
+                try:
+                    img_data = base64.b64decode(data['image'])
+                    nparr = np.frombuffer(img_data, np.uint8)
+                    frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+                    if frame is None: continue
+                    frame = cv2.resize(frame, (640, 480))
+                    if mlp_pipeline is not None:
+                        out = mlp_pipeline.process_frame(frame)
+                        is_focused = out["is_focused"]
+                        confidence = out["mlp_prob"]
+                        metadata = {
+                            "s_face": out["s_face"],
+                            "s_eye": out["s_eye"],
+                            "mar": out["mar"]
+                        }
+                    else:
+                        is_focused = False
+                        confidence = 0.0
+                        metadata = {}
+                    detections = []
+                    if session_id:
+                        await store_focus_event(session_id, is_focused, confidence, metadata)
+                    await websocket.send_json({
+                        'type': 'detection',
+                        'focused': is_focused,
+                        'confidence': round(confidence, 3),
+                        'detections': detections,
+                        'frame_count': frame_count
+                    })
+                    frame_count += 1
+                except Exception as e:
+                    print(f"Error processing frame: {e}")
+                    await websocket.send_json({'type': 'error', 'message': str(e)})
+            elif data['type'] == 'start_session':
+                session_id = await create_session()
+                await websocket.send_json({'type': 'session_started', 'session_id': session_id})
+            elif data['type'] == 'end_session':
+                if session_id:
+                    print(f"Ending session {session_id}...")
+                    summary = await end_session(session_id)
+                    print(f"Session summary: {summary}")
+                    if summary:
+                        await websocket.send_json({'type': 'session_ended', 'summary': summary})
+                        print("Session ended message sent")
+                    else:
+                        print("Warning: No summary returned")
+                    session_id = None
+                else:
+                    print("Warning: end_session called but no active session_id")
+    except WebSocketDisconnect:
+        if session_id: await end_session(session_id)
+    except Exception as e:
+        if websocket.client_state.value == 1: await websocket.close()
+# ================ API ENDPOINTS ================
+@app.post("/api/sessions/start")
+async def api_start_session():
+    session_id = await create_session()
+    return {"session_id": session_id}
+@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")
+    return summary
+@app.get("/api/sessions")
+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_clause = "LIMIT ? OFFSET ?"
+        params = []
+        base_query = "SELECT * FROM focus_sessions"
+        where_clause = ""
+        if filter == "today":
+            date_filter = datetime.now().replace(hour=0, minute=0, second=0, microsecond=0)
+            where_clause = " WHERE start_time >= ?"
+            params.append(date_filter.isoformat())
+        elif filter == "week":
+            date_filter = datetime.now() - timedelta(days=7)
+            where_clause = " WHERE start_time >= ?"
+            params.append(date_filter.isoformat())
+        elif filter == "month":
+            date_filter = datetime.now() - timedelta(days=30)
+            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
+            pass
+        else:
+            query += f" {limit_clause}"
+            params.extend([limit, offset])
+        cursor = await db.execute(query, tuple(params))
+        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
+    try:
+        async with aiosqlite.connect(db_path) as db:
+            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)
+                    VALUES (?, ?, ?, ?, ?, ?, ?)
+                """, (
+                    session.get('start_time'),
+                    session.get('end_time'),
+                    session.get('duration_seconds', 0),
+                    session.get('focus_score', 0.0),
+                    session.get('total_frames', 0),
+                    session.get('focused_frames', 0),
+                    session.get('created_at', session.get('start_time'))
+                ))
+                count += 1
+            await db.commit()
+        return {"status": "success", "count": count}
+    except Exception as e:
+        print(f"Import Error: {e}")
+        return {"status": "error", "message": str(e)}
+# --- NEW: Clear History Endpoint ---
+@app.delete("/api/history")
+async def clear_history():
+    try:
+        async with aiosqlite.connect(db_path) as db:
+            # Delete events first (foreign key good practice)
+            await db.execute("DELETE FROM focus_events")
+            await db.execute("DELETE FROM focus_sessions")
+            await db.commit()
+        return {"status": "success", "message": "History cleared"}
+    except Exception as e:
+        return {"status": "error", "message": str(e)}
+@app.get("/api/sessions/{session_id}")
+async def get_session(session_id: int):
+    async with aiosqlite.connect(db_path) as db:
+        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")
+        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()]
+        session['events'] = events
+        return session
+@app.get("/api/settings")
+async def get_settings():
+    async with aiosqlite.connect(db_path) as db:
+        db.row_factory = aiosqlite.Row
+        cursor = await db.execute("SELECT * FROM user_settings WHERE id = 1")
+        row = await cursor.fetchone()
+        if row: return dict(row)
+        else: return {'sensitivity': 6, 'notification_enabled': True, 'notification_threshold': 30, 'frame_rate': 30, 'model_name': 'yolov8n.pt'}
+@app.put("/api/settings")
+async def update_settings(settings: SettingsUpdate):
+    async with aiosqlite.connect(db_path) as db:
+        cursor = await db.execute("SELECT id FROM user_settings WHERE id = 1")
+        exists = await cursor.fetchone()
+        if not exists:
+            await db.execute("INSERT INTO user_settings (id, sensitivity) VALUES (1, 6)")
+            await db.commit()
+        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 updates:
+            query = f"UPDATE user_settings SET {', '.join(updates)} WHERE id = 1"
+            await db.execute(query, params)
+            await db.commit()
+        return {"status": "success", "updated": len(updates) > 0}
+@app.get("/api/stats/summary")
+async def get_stats_summary():
+    async with aiosqlite.connect(db_path) as db:
+        cursor = await db.execute("SELECT COUNT(*) FROM focus_sessions WHERE end_time IS NOT NULL")
+        total_sessions = (await cursor.fetchone())[0]
+        cursor = await db.execute("SELECT SUM(duration_seconds) FROM focus_sessions WHERE end_time IS NOT NULL")
+        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")
+        dates = [row[0] for row in await cursor.fetchall()]
+        streak_days = 0
+        if dates:
+            current_date = datetime.now().date()
+            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
+        return {
+            'total_sessions': total_sessions,
+            'total_focus_time': int(total_focus_time),
+            'avg_focus_score': round(avg_focus_score, 3),
+            'streak_days': streak_days
+        }
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy", "model_loaded": mlp_pipeline is not None, "database": os.path.exists(db_path)}
+# ================ STATIC FILES (SPA SUPPORT) ================
+# 1. Mount the assets folder (JS/CSS built by Vite/React)
+if os.path.exists("static/assets"):
+    app.mount("/assets", StaticFiles(directory="static/assets"), name="assets")
+# 2. Catch-all route for SPA (React Router)
+# This ensures that if you refresh /customise, it serves index.html instead of 404
+@app.get("/{full_path:path}")
+async def serve_react_app(full_path: str, request: Request):
+    # Skip API and WS routes
+    if full_path.startswith("api") or full_path.startswith("ws"):
+        raise HTTPException(status_code=404, detail="Not Found")
+    # Serve index.html for any other route
+    if os.path.exists("static/index.html"):
+        return FileResponse("static/index.html")
+    else:
+        return {"message": "React app not found. Please run 'npm run build' and copy dist to static."}

models/__init__.py ADDED Viewed

	@@ -0,0 +1 @@


1	+

models/collect_features.py ADDED Viewed

	@@ -0,0 +1,356 @@

+import argparse
+import collections
+import math
+import os
+import sys
+import time
+import cv2
+import numpy as np
+_PROJECT_ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+if _PROJECT_ROOT not in sys.path:
+    sys.path.insert(0, _PROJECT_ROOT)
+from models.face_mesh import FaceMeshDetector
+from models.head_pose import HeadPoseEstimator
+from models.eye_scorer import EyeBehaviourScorer, compute_gaze_ratio, compute_mar
+FONT = cv2.FONT_HERSHEY_SIMPLEX
+GREEN = (0, 255, 0)
+RED = (0, 0, 255)
+WHITE = (255, 255, 255)
+YELLOW = (0, 255, 255)
+ORANGE = (0, 165, 255)
+GRAY = (120, 120, 120)
+FEATURE_NAMES = [
+    "ear_left", "ear_right", "ear_avg", "h_gaze", "v_gaze", "mar",
+    "yaw", "pitch", "roll", "s_face", "s_eye", "gaze_offset", "head_deviation",
+    "perclos", "blink_rate", "closure_duration", "yawn_duration",
+]
+NUM_FEATURES = len(FEATURE_NAMES)
+assert NUM_FEATURES == 17
+class TemporalTracker:
+    EAR_BLINK_THRESH = 0.21
+    MAR_YAWN_THRESH = 0.55
+    PERCLOS_WINDOW = 60
+    BLINK_WINDOW_SEC = 30.0
+    def __init__(self):
+        self.ear_history = collections.deque(maxlen=self.PERCLOS_WINDOW)
+        self.blink_timestamps = collections.deque()
+        self._eyes_closed = False
+        self._closure_start = None
+        self._yawn_start = None
+    def update(self, ear_avg, mar, now=None):
+        if now is None:
+            now = time.time()
+        closed = ear_avg < self.EAR_BLINK_THRESH
+        self.ear_history.append(1.0 if closed else 0.0)
+        perclos = sum(self.ear_history) / len(self.ear_history) if self.ear_history else 0.0
+        if self._eyes_closed and not closed:
+            self.blink_timestamps.append(now)
+        self._eyes_closed = closed
+        cutoff = now - self.BLINK_WINDOW_SEC
+        while self.blink_timestamps and self.blink_timestamps[0] < cutoff:
+            self.blink_timestamps.popleft()
+        blink_rate = len(self.blink_timestamps) * (60.0 / self.BLINK_WINDOW_SEC)
+        if closed:
+            if self._closure_start is None:
+                self._closure_start = now
+            closure_dur = now - self._closure_start
+        else:
+            self._closure_start = None
+            closure_dur = 0.0
+        yawning = mar > self.MAR_YAWN_THRESH
+        if yawning:
+            if self._yawn_start is None:
+                self._yawn_start = now
+            yawn_dur = now - self._yawn_start
+        else:
+            self._yawn_start = None
+            yawn_dur = 0.0
+        return perclos, blink_rate, closure_dur, yawn_dur
+def extract_features(landmarks, w, h, head_pose, eye_scorer, temporal,
+                     *, _pre=None):
+    from models.eye_scorer import _LEFT_EYE_EAR, _RIGHT_EYE_EAR, compute_ear
+    p = _pre or {}
+    ear_left = p.get("ear_left", compute_ear(landmarks, _LEFT_EYE_EAR))
+    ear_right = p.get("ear_right", compute_ear(landmarks, _RIGHT_EYE_EAR))
+    ear_avg = (ear_left + ear_right) / 2.0
+    if "h_gaze" in p and "v_gaze" in p:
+        h_gaze, v_gaze = p["h_gaze"], p["v_gaze"]
+    else:
+        h_gaze, v_gaze = compute_gaze_ratio(landmarks)
+    mar = p.get("mar", compute_mar(landmarks))
+    angles = p.get("angles")
+    if angles is None:
+        angles = head_pose.estimate(landmarks, w, h)
+    yaw = angles[0] if angles else 0.0
+    pitch = angles[1] if angles else 0.0
+    roll = angles[2] if angles else 0.0
+    s_face = p.get("s_face", head_pose.score(landmarks, w, h))
+    s_eye = p.get("s_eye", eye_scorer.score(landmarks))
+    gaze_offset = math.sqrt((h_gaze - 0.5) ** 2 + (v_gaze - 0.5) ** 2)
+    head_deviation = math.sqrt(yaw ** 2 + pitch ** 2)  # cleaned downstream
+    perclos, blink_rate, closure_dur, yawn_dur = temporal.update(ear_avg, mar)
+    return np.array([
+        ear_left, ear_right, ear_avg,
+        h_gaze, v_gaze,
+        mar,
+        yaw, pitch, roll,
+        s_face, s_eye,
+        gaze_offset,
+        head_deviation,
+        perclos, blink_rate, closure_dur, yawn_dur,
+    ], dtype=np.float32)
+def quality_report(labels):
+    n = len(labels)
+    n1 = int((labels == 1).sum())
+    n0 = n - n1
+    transitions = int(np.sum(np.diff(labels) != 0))
+    duration_sec = n / 30.0  # approximate at 30fps
+    warnings = []
+    print(f"\n{'='*50}")
+    print(f"  DATA QUALITY REPORT")
+    print(f"{'='*50}")
+    print(f"  Total samples : {n}")
+    print(f"  Focused       : {n1} ({n1/max(n,1)*100:.1f}%)")
+    print(f"  Unfocused     : {n0} ({n0/max(n,1)*100:.1f}%)")
+    print(f"  Duration      : {duration_sec:.0f}s ({duration_sec/60:.1f} min)")
+    print(f"  Transitions   : {transitions}")
+    if transitions > 0:
+        print(f"  Avg segment   : {n/transitions:.0f} frames ({n/transitions/30:.1f}s)")
+    # checks
+    if duration_sec < 120:
+        warnings.append(f"TOO SHORT: {duration_sec:.0f}s — aim for 5-10 minutes (300-600s)")
+    if n < 3000:
+        warnings.append(f"LOW SAMPLE COUNT: {n} frames — aim for 9000+ (5 min at 30fps)")
+    balance = n1 / max(n, 1)
+    if balance < 0.3 or balance > 0.7:
+        warnings.append(f"IMBALANCED: {balance:.0%} focused — aim for 35-65% focused")
+    if transitions < 10:
+        warnings.append(f"TOO FEW TRANSITIONS: {transitions} — switch every 10-30s, aim for 20+")
+    if transitions == 1:
+        warnings.append("SINGLE BLOCK: you recorded one unfocused + one focused block — "
+                         "model will learn temporal position, not focus patterns")
+    if warnings:
+        print(f"\n  ⚠️  WARNINGS ({len(warnings)}):")
+        for w in warnings:
+            print(f"    • {w}")
+        print(f"\n  Consider re-recording this session.")
+    else:
+        print(f"\n  ✅ All checks passed!")
+    print(f"{'='*50}\n")
+    return len(warnings) == 0
+# ---------------------------------------------------------------------------
+# Main
+def main():
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--name", type=str, default="session",
+                        help="Your name or session ID")
+    parser.add_argument("--camera", type=int, default=0,
+                        help="Camera index")
+    parser.add_argument("--duration", type=int, default=600,
+                        help="Max recording time (seconds, default 10 min)")
+    parser.add_argument("--output-dir", type=str,
+                        default=os.path.join(_PROJECT_ROOT, "collected_data"),
+                        help="Where to save .npz files")
+    args = parser.parse_args()
+    os.makedirs(args.output_dir, exist_ok=True)
+    detector = FaceMeshDetector()
+    head_pose = HeadPoseEstimator()
+    eye_scorer = EyeBehaviourScorer()
+    temporal = TemporalTracker()
+    cap = cv2.VideoCapture(args.camera)
+    if not cap.isOpened():
+        print("[COLLECT] ERROR: can't open camera")
+        return
+    print("[COLLECT] Data Collection Tool")
+    print(f"[COLLECT] Session: {args.name}, max {args.duration}s")
+    print(f"[COLLECT] Features per frame: {NUM_FEATURES}")
+    print("[COLLECT] Controls:")
+    print("  1 = FOCUSED       (looking at screen normally)")
+    print("  0 = NOT FOCUSED   (phone, away, eyes closed, yawning)")
+    print("  p = pause")
+    print("  q = save & quit")
+    print()
+    print("[COLLECT] TIPS for good data:")
+    print("  • Switch between 1 and 0 every 10-30 seconds")
+    print("  • Aim for 20+ transitions total")
+    print("  • Act out varied scenarios: reading, phone, talking, drowsy")
+    print("  • Record at least 5 minutes")
+    print()
+    features_list = []
+    labels_list = []
+    label = None        # None = paused
+    transitions = 0     # count label switches
+    prev_label = None
+    status = "PAUSED -- press 1 (focused) or 0 (not focused)"
+    t_start = time.time()
+    prev_time = time.time()
+    fps = 0.0
+    try:
+        while True:
+            elapsed = time.time() - t_start
+            if elapsed > args.duration:
+                print(f"[COLLECT] Time limit ({args.duration}s)")
+                break
+            ret, frame = cap.read()
+            if not ret:
+                break
+            h, w = frame.shape[:2]
+            landmarks = detector.process(frame)
+            face_ok = landmarks is not None
+            if face_ok and label is not None:
+                vec = extract_features(landmarks, w, h, head_pose, eye_scorer, temporal)
+                features_list.append(vec)
+                labels_list.append(label)
+                if prev_label is not None and label != prev_label:
+                    transitions += 1
+                prev_label = label
+            now = time.time()
+            fps = 0.9 * fps + 0.1 * (1.0 / max(now - prev_time, 1e-6))
+            prev_time = now
+            # --- draw UI ---
+            n = len(labels_list)
+            n1 = sum(1 for x in labels_list if x == 1)
+            n0 = n - n1
+            remaining = max(0, args.duration - elapsed)
+            bar_color = GREEN if label == 1 else (RED if label == 0 else (80, 80, 80))
+            cv2.rectangle(frame, (0, 0), (w, 70), (0, 0, 0), -1)
+            cv2.putText(frame, status, (10, 22), FONT, 0.55, bar_color, 2, cv2.LINE_AA)
+            cv2.putText(frame, f"Samples: {n}  (F:{n1}  U:{n0})  Switches: {transitions}",
+                        (10, 48), FONT, 0.42, WHITE, 1, cv2.LINE_AA)
+            cv2.putText(frame, f"FPS:{fps:.0f}", (w - 80, 22), FONT, 0.45, WHITE, 1, cv2.LINE_AA)
+            cv2.putText(frame, f"{int(remaining)}s left", (w - 80, 48), FONT, 0.42, YELLOW, 1, cv2.LINE_AA)
+            if n > 0:
+                bar_w = min(w - 20, 300)
+                bar_x = w - bar_w - 10
+                bar_y = 58
+                frac = n1 / n
+                cv2.rectangle(frame, (bar_x, bar_y), (bar_x + bar_w, bar_y + 8), (40, 40, 40), -1)
+                cv2.rectangle(frame, (bar_x, bar_y), (bar_x + int(bar_w * frac), bar_y + 8), GREEN, -1)
+                cv2.putText(frame, f"{frac:.0%}F", (bar_x + bar_w + 4, bar_y + 8),
+                            FONT, 0.3, GRAY, 1, cv2.LINE_AA)
+            if not face_ok:
+                cv2.putText(frame, "NO FACE", (w // 2 - 60, h // 2), FONT, 0.7, RED, 2, cv2.LINE_AA)
+            # red dot = recording
+            if label is not None and face_ok:
+                cv2.circle(frame, (w - 20, 80), 8, RED, -1)
+            # live warnings
+            warn_y = h - 35
+            if n > 100 and transitions < 3:
+                cv2.putText(frame, "! Switch more often (aim for 20+ transitions)",
+                            (10, warn_y), FONT, 0.38, ORANGE, 1, cv2.LINE_AA)
+                warn_y -= 18
+            if elapsed > 30 and n > 0:
+                bal = n1 / n
+                if bal < 0.25 or bal > 0.75:
+                    cv2.putText(frame, f"! Imbalanced ({bal:.0%} focused) - record more of the other",
+                                (10, warn_y), FONT, 0.38, ORANGE, 1, cv2.LINE_AA)
+                    warn_y -= 18
+            cv2.putText(frame, "1:focused  0:unfocused  p:pause  q:save+quit",
+                        (10, h - 10), FONT, 0.38, GRAY, 1, cv2.LINE_AA)
+            cv2.imshow("FocusGuard -- Data Collection", frame)
+            key = cv2.waitKey(1) & 0xFF
+            if key == ord("1"):
+                label = 1
+                status = "Recording: FOCUSED"
+                print(f"[COLLECT] -> FOCUSED (n={n}, transitions={transitions})")
+            elif key == ord("0"):
+                label = 0
+                status = "Recording: NOT FOCUSED"
+                print(f"[COLLECT] -> NOT FOCUSED (n={n}, transitions={transitions})")
+            elif key == ord("p"):
+                label = None
+                status = "PAUSED"
+                print(f"[COLLECT] paused (n={n})")
+            elif key == ord("q"):
+                break
+    finally:
+        cap.release()
+        cv2.destroyAllWindows()
+        detector.close()
+        if len(features_list) > 0:
+            feats = np.stack(features_list)
+            labs = np.array(labels_list, dtype=np.int64)
+            ts = time.strftime("%Y%m%d_%H%M%S")
+            fname = f"{args.name}_{ts}.npz"
+            fpath = os.path.join(args.output_dir, fname)
+            np.savez(fpath,
+                     features=feats,
+                     labels=labs,
+                     feature_names=np.array(FEATURE_NAMES))
+            print(f"\n[COLLECT] Saved {len(labs)} samples -> {fpath}")
+            print(f"  Shape: {feats.shape}  ({NUM_FEATURES} features)")
+            quality_report(labs)
+        else:
+            print("\n[COLLECT] No data collected")
+        print("[COLLECT] Done")
+if __name__ == "__main__":
+    main()

models/eye_classifier.py ADDED Viewed

	@@ -0,0 +1,69 @@

+from __future__ import annotations
+from abc import ABC, abstractmethod
+import numpy as np
+class EyeClassifier(ABC):
+    @property
+    @abstractmethod
+    def name(self) -> str:
+        pass
+    @abstractmethod
+    def predict_score(self, crops_bgr: list[np.ndarray]) -> float:
+        pass
+class GeometricOnlyClassifier(EyeClassifier):
+    @property
+    def name(self) -> str:
+        return "geometric"
+    def predict_score(self, crops_bgr: list[np.ndarray]) -> float:
+        return 1.0
+class YOLOv11Classifier(EyeClassifier):
+    def __init__(self, checkpoint_path: str, device: str = "cpu"):
+        from ultralytics import YOLO
+        self._model = YOLO(checkpoint_path)
+        self._device = device
+        names = self._model.names
+        self._attentive_idx = None
+        for idx, cls_name in names.items():
+            if cls_name in ("open", "attentive"):
+                self._attentive_idx = idx
+                break
+        if self._attentive_idx is None:
+            self._attentive_idx = max(names.keys())
+        print(f"[YOLO] Classes: {names}, attentive_idx={self._attentive_idx}")
+    @property
+    def name(self) -> str:
+        return "yolo"
+    def predict_score(self, crops_bgr: list[np.ndarray]) -> float:
+        if not crops_bgr:
+            return 1.0
+        results = self._model.predict(crops_bgr, device=self._device, verbose=False)
+        scores = [float(r.probs.data[self._attentive_idx]) for r in results]
+        return sum(scores) / len(scores) if scores else 1.0
+def load_eye_classifier(
+    path: str | None = None,
+    backend: str = "yolo",
+    device: str = "cpu",
+) -> EyeClassifier:
+    if path is None or backend == "geometric":
+        return GeometricOnlyClassifier()
+    try:
+        return YOLOv11Classifier(path, device=device)
+    except ImportError:
+        print("[CLASSIFIER] ultralytics required for YOLO. pip install ultralytics")
+        raise

models/eye_crop.py ADDED Viewed

	@@ -0,0 +1,77 @@

+import cv2
+import numpy as np
+from models.face_mesh import FaceMeshDetector
+LEFT_EYE_CONTOUR = FaceMeshDetector.LEFT_EYE_INDICES
+RIGHT_EYE_CONTOUR = FaceMeshDetector.RIGHT_EYE_INDICES
+IMAGENET_MEAN = (0.485, 0.456, 0.406)
+IMAGENET_STD = (0.229, 0.224, 0.225)
+CROP_SIZE = 96
+def _bbox_from_landmarks(
+    landmarks: np.ndarray,
+    indices: list[int],
+    frame_w: int,
+    frame_h: int,
+    expand: float = 0.4,
+) -> tuple[int, int, int, int]:
+    pts = landmarks[indices, :2]
+    px = pts[:, 0] * frame_w
+    py = pts[:, 1] * frame_h
+    x_min, x_max = px.min(), px.max()
+    y_min, y_max = py.min(), py.max()
+    w = x_max - x_min
+    h = y_max - y_min
+    cx = (x_min + x_max) / 2
+    cy = (y_min + y_max) / 2
+    size = max(w, h) * (1 + expand)
+    half = size / 2
+    x1 = int(max(cx - half, 0))
+    y1 = int(max(cy - half, 0))
+    x2 = int(min(cx + half, frame_w))
+    y2 = int(min(cy + half, frame_h))
+    return x1, y1, x2, y2
+def extract_eye_crops(
+    frame: np.ndarray,
+    landmarks: np.ndarray,
+    expand: float = 0.4,
+    crop_size: int = CROP_SIZE,
+) -> tuple[np.ndarray, np.ndarray, tuple, tuple]:
+    h, w = frame.shape[:2]
+    left_bbox = _bbox_from_landmarks(landmarks, LEFT_EYE_CONTOUR, w, h, expand)
+    right_bbox = _bbox_from_landmarks(landmarks, RIGHT_EYE_CONTOUR, w, h, expand)
+    left_crop = frame[left_bbox[1] : left_bbox[3], left_bbox[0] : left_bbox[2]]
+    right_crop = frame[right_bbox[1] : right_bbox[3], right_bbox[0] : right_bbox[2]]
+    if left_crop.size == 0:
+        left_crop = np.zeros((crop_size, crop_size, 3), dtype=np.uint8)
+    else:
+        left_crop = cv2.resize(left_crop, (crop_size, crop_size), interpolation=cv2.INTER_AREA)
+    if right_crop.size == 0:
+        right_crop = np.zeros((crop_size, crop_size, 3), dtype=np.uint8)
+    else:
+        right_crop = cv2.resize(right_crop, (crop_size, crop_size), interpolation=cv2.INTER_AREA)
+    return left_crop, right_crop, left_bbox, right_bbox
+def crop_to_tensor(crop_bgr: np.ndarray):
+    import torch
+    rgb = cv2.cvtColor(crop_bgr, cv2.COLOR_BGR2RGB).astype(np.float32) / 255.0
+    for c in range(3):
+        rgb[:, :, c] = (rgb[:, :, c] - IMAGENET_MEAN[c]) / IMAGENET_STD[c]
+    return torch.from_numpy(rgb.transpose(2, 0, 1))

models/eye_scorer.py ADDED Viewed

	@@ -0,0 +1,168 @@

+import math
+import numpy as np
+_LEFT_EYE_EAR = [33, 160, 158, 133, 153, 145]
+_RIGHT_EYE_EAR = [362, 385, 387, 263, 373, 380]
+_LEFT_IRIS_CENTER = 468
+_RIGHT_IRIS_CENTER = 473
+_LEFT_EYE_INNER = 133
+_LEFT_EYE_OUTER = 33
+_RIGHT_EYE_INNER = 362
+_RIGHT_EYE_OUTER = 263
+_LEFT_EYE_TOP = 159
+_LEFT_EYE_BOTTOM = 145
+_RIGHT_EYE_TOP = 386
+_RIGHT_EYE_BOTTOM = 374
+_MOUTH_TOP = 13
+_MOUTH_BOTTOM = 14
+_MOUTH_LEFT = 78
+_MOUTH_RIGHT = 308
+_MOUTH_UPPER_1 = 82
+_MOUTH_UPPER_2 = 312
+_MOUTH_LOWER_1 = 87
+_MOUTH_LOWER_2 = 317
+MAR_YAWN_THRESHOLD = 0.55
+def _distance(p1: np.ndarray, p2: np.ndarray) -> float:
+    return float(np.linalg.norm(p1 - p2))
+def compute_ear(landmarks: np.ndarray, eye_indices: list[int]) -> float:
+    p1 = landmarks[eye_indices[0], :2]
+    p2 = landmarks[eye_indices[1], :2]
+    p3 = landmarks[eye_indices[2], :2]
+    p4 = landmarks[eye_indices[3], :2]
+    p5 = landmarks[eye_indices[4], :2]
+    p6 = landmarks[eye_indices[5], :2]
+    vertical1 = _distance(p2, p6)
+    vertical2 = _distance(p3, p5)
+    horizontal = _distance(p1, p4)
+    if horizontal < 1e-6:
+        return 0.0
+    return (vertical1 + vertical2) / (2.0 * horizontal)
+def compute_avg_ear(landmarks: np.ndarray) -> float:
+    left_ear = compute_ear(landmarks, _LEFT_EYE_EAR)
+    right_ear = compute_ear(landmarks, _RIGHT_EYE_EAR)
+    return (left_ear + right_ear) / 2.0
+def compute_gaze_ratio(landmarks: np.ndarray) -> tuple[float, float]:
+    left_iris = landmarks[_LEFT_IRIS_CENTER, :2]
+    left_inner = landmarks[_LEFT_EYE_INNER, :2]
+    left_outer = landmarks[_LEFT_EYE_OUTER, :2]
+    left_top = landmarks[_LEFT_EYE_TOP, :2]
+    left_bottom = landmarks[_LEFT_EYE_BOTTOM, :2]
+    right_iris = landmarks[_RIGHT_IRIS_CENTER, :2]
+    right_inner = landmarks[_RIGHT_EYE_INNER, :2]
+    right_outer = landmarks[_RIGHT_EYE_OUTER, :2]
+    right_top = landmarks[_RIGHT_EYE_TOP, :2]
+    right_bottom = landmarks[_RIGHT_EYE_BOTTOM, :2]
+    left_h_total = _distance(left_inner, left_outer)
+    right_h_total = _distance(right_inner, right_outer)
+    if left_h_total < 1e-6 or right_h_total < 1e-6:
+        return 0.5, 0.5
+    left_h_ratio = _distance(left_outer, left_iris) / left_h_total
+    right_h_ratio = _distance(right_outer, right_iris) / right_h_total
+    h_ratio = (left_h_ratio + right_h_ratio) / 2.0
+    left_v_total = _distance(left_top, left_bottom)
+    right_v_total = _distance(right_top, right_bottom)
+    if left_v_total < 1e-6 or right_v_total < 1e-6:
+        return h_ratio, 0.5
+    left_v_ratio = _distance(left_top, left_iris) / left_v_total
+    right_v_ratio = _distance(right_top, right_iris) / right_v_total
+    v_ratio = (left_v_ratio + right_v_ratio) / 2.0
+    return float(np.clip(h_ratio, 0, 1)), float(np.clip(v_ratio, 0, 1))
+def compute_mar(landmarks: np.ndarray) -> float:
+    top = landmarks[_MOUTH_TOP, :2]
+    bottom = landmarks[_MOUTH_BOTTOM, :2]
+    left = landmarks[_MOUTH_LEFT, :2]
+    right = landmarks[_MOUTH_RIGHT, :2]
+    upper1 = landmarks[_MOUTH_UPPER_1, :2]
+    lower1 = landmarks[_MOUTH_LOWER_1, :2]
+    upper2 = landmarks[_MOUTH_UPPER_2, :2]
+    lower2 = landmarks[_MOUTH_LOWER_2, :2]
+    horizontal = _distance(left, right)
+    if horizontal < 1e-6:
+        return 0.0
+    v1 = _distance(upper1, lower1)
+    v2 = _distance(top, bottom)
+    v3 = _distance(upper2, lower2)
+    return (v1 + v2 + v3) / (2.0 * horizontal)
+class EyeBehaviourScorer:
+    def __init__(
+        self,
+        ear_open: float = 0.30,
+        ear_closed: float = 0.16,
+        gaze_max_offset: float = 0.28,
+    ):
+        self.ear_open = ear_open
+        self.ear_closed = ear_closed
+        self.gaze_max_offset = gaze_max_offset
+    def _ear_score(self, ear: float) -> float:
+        if ear >= self.ear_open:
+            return 1.0
+        if ear <= self.ear_closed:
+            return 0.0
+        return (ear - self.ear_closed) / (self.ear_open - self.ear_closed)
+    def _gaze_score(self, h_ratio: float, v_ratio: float) -> float:
+        h_offset = abs(h_ratio - 0.5)
+        v_offset = abs(v_ratio - 0.5)
+        offset = math.sqrt(h_offset**2 + v_offset**2)
+        t = min(offset / self.gaze_max_offset, 1.0)
+        return 0.5 * (1.0 + math.cos(math.pi * t))
+    def score(self, landmarks: np.ndarray) -> float:
+        left_ear = compute_ear(landmarks, _LEFT_EYE_EAR)
+        right_ear = compute_ear(landmarks, _RIGHT_EYE_EAR)
+        # Use minimum EAR so closing ONE eye is enough to drop the score
+        ear = min(left_ear, right_ear)
+        ear_s = self._ear_score(ear)
+        if ear_s < 0.3:
+            return ear_s
+        h_ratio, v_ratio = compute_gaze_ratio(landmarks)
+        gaze_s = self._gaze_score(h_ratio, v_ratio)
+        return ear_s * gaze_s
+    def detailed_score(self, landmarks: np.ndarray) -> dict:
+        left_ear = compute_ear(landmarks, _LEFT_EYE_EAR)
+        right_ear = compute_ear(landmarks, _RIGHT_EYE_EAR)
+        ear = min(left_ear, right_ear)
+        ear_s = self._ear_score(ear)
+        h_ratio, v_ratio = compute_gaze_ratio(landmarks)
+        gaze_s = self._gaze_score(h_ratio, v_ratio)
+        s_eye = ear_s if ear_s < 0.3 else ear_s * gaze_s
+        return {
+            "ear": round(ear, 4),
+            "ear_score": round(ear_s, 4),
+            "h_gaze": round(h_ratio, 4),
+            "v_gaze": round(v_ratio, 4),
+            "gaze_score": round(gaze_s, 4),
+            "s_eye": round(s_eye, 4),
+        }

models/face_mesh.py ADDED Viewed

	@@ -0,0 +1,94 @@

+import os
+import time
+from pathlib import Path
+from urllib.request import urlretrieve
+import cv2
+import numpy as np
+import mediapipe as mp
+from mediapipe.tasks.python.vision import FaceLandmarkerOptions, FaceLandmarker, RunningMode
+from mediapipe.tasks import python as mp_tasks
+_MODEL_URL = (
+    "https://storage.googleapis.com/mediapipe-models/face_landmarker/"
+    "face_landmarker/float16/latest/face_landmarker.task"
+)
+def _ensure_model() -> str:
+    cache_dir = Path(os.environ.get(
+        "FOCUSGUARD_CACHE_DIR",
+        Path.home() / ".cache" / "focusguard",
+    ))
+    model_path = cache_dir / "face_landmarker.task"
+    if model_path.exists():
+        return str(model_path)
+    cache_dir.mkdir(parents=True, exist_ok=True)
+    print(f"[FACE_MESH] Downloading model to {model_path}...")
+    urlretrieve(_MODEL_URL, model_path)
+    print("[FACE_MESH] Download complete.")
+    return str(model_path)
+class FaceMeshDetector:
+    LEFT_EYE_INDICES = [33, 7, 163, 144, 145, 153, 154, 155, 133, 173, 157, 158, 159, 160, 161, 246]
+    RIGHT_EYE_INDICES = [362, 382, 381, 380, 374, 373, 390, 249, 263, 466, 388, 387, 386, 385, 384, 398]
+    LEFT_IRIS_INDICES = [468, 469, 470, 471, 472]
+    RIGHT_IRIS_INDICES = [473, 474, 475, 476, 477]
+    def __init__(
+        self,
+        max_num_faces: int = 1,
+        min_detection_confidence: float = 0.5,
+        min_tracking_confidence: float = 0.5,
+    ):
+        model_path = _ensure_model()
+        options = FaceLandmarkerOptions(
+            base_options=mp_tasks.BaseOptions(model_asset_path=model_path),
+            num_faces=max_num_faces,
+            min_face_detection_confidence=min_detection_confidence,
+            min_face_presence_confidence=min_detection_confidence,
+            min_tracking_confidence=min_tracking_confidence,
+            running_mode=RunningMode.VIDEO,
+        )
+        self._landmarker = FaceLandmarker.create_from_options(options)
+        self._t0 = time.monotonic()
+        self._last_ts = 0
+    def process(self, bgr_frame: np.ndarray) -> np.ndarray | None:
+        # BGR in -> (478,3) norm x,y,z or None
+        rgb = cv2.cvtColor(bgr_frame, cv2.COLOR_BGR2RGB)
+        mp_image = mp.Image(image_format=mp.ImageFormat.SRGB, data=rgb)
+        ts = max(int((time.monotonic() - self._t0) * 1000), self._last_ts + 1)
+        self._last_ts = ts
+        result = self._landmarker.detect_for_video(mp_image, ts)
+        if not result.face_landmarks:
+            return None
+        face = result.face_landmarks[0]
+        return np.array([(lm.x, lm.y, lm.z) for lm in face], dtype=np.float32)
+    def get_pixel_landmarks(self, landmarks: np.ndarray, frame_w: int, frame_h: int) -> np.ndarray:
+        # norm -> pixel (x,y)
+        pixel = np.zeros((landmarks.shape[0], 2), dtype=np.int32)
+        pixel[:, 0] = (landmarks[:, 0] * frame_w).astype(np.int32)
+        pixel[:, 1] = (landmarks[:, 1] * frame_h).astype(np.int32)
+        return pixel
+    def get_3d_landmarks(self, landmarks: np.ndarray, frame_w: int, frame_h: int) -> np.ndarray:
+        # norm -> pixel-scale x,y,z (z scaled by width)
+        pts = np.zeros_like(landmarks)
+        pts[:, 0] = landmarks[:, 0] * frame_w
+        pts[:, 1] = landmarks[:, 1] * frame_h
+        pts[:, 2] = landmarks[:, 2] * frame_w
+        return pts
+    def close(self):
+        self._landmarker.close()
+    def __enter__(self):
+        return self
+    def __exit__(self, *args):
+        self.close()

models/head_pose.py ADDED Viewed

	@@ -0,0 +1,121 @@

+import math
+import cv2
+import numpy as np
+_LANDMARK_INDICES = [1, 152, 33, 263, 61, 291]
+_MODEL_POINTS = np.array(
+    [
+        [0.0, 0.0, 0.0],
+        [0.0, -330.0, -65.0],
+        [-225.0, 170.0, -135.0],
+        [225.0, 170.0, -135.0],
+        [-150.0, -150.0, -125.0],
+        [150.0, -150.0, -125.0],
+    ],
+    dtype=np.float64,
+)
+class HeadPoseEstimator:
+    def __init__(self, max_angle: float = 30.0, roll_weight: float = 0.5):
+        self.max_angle = max_angle
+        self.roll_weight = roll_weight
+        self._camera_matrix = None
+        self._frame_size = None
+        self._dist_coeffs = np.zeros((4, 1), dtype=np.float64)
+        self._cache_key = None
+        self._cache_result = None
+    def _get_camera_matrix(self, frame_w: int, frame_h: int) -> np.ndarray:
+        if self._camera_matrix is not None and self._frame_size == (frame_w, frame_h):
+            return self._camera_matrix
+        focal_length = float(frame_w)
+        cx, cy = frame_w / 2.0, frame_h / 2.0
+        self._camera_matrix = np.array(
+            [[focal_length, 0, cx], [0, focal_length, cy], [0, 0, 1]],
+            dtype=np.float64,
+        )
+        self._frame_size = (frame_w, frame_h)
+        return self._camera_matrix
+    def _solve(self, landmarks: np.ndarray, frame_w: int, frame_h: int):
+        key = (landmarks.data.tobytes(), frame_w, frame_h)
+        if self._cache_key == key:
+            return self._cache_result
+        image_points = np.array(
+            [
+                [landmarks[i, 0] * frame_w, landmarks[i, 1] * frame_h]
+                for i in _LANDMARK_INDICES
+            ],
+            dtype=np.float64,
+        )
+        camera_matrix = self._get_camera_matrix(frame_w, frame_h)
+        success, rvec, tvec = cv2.solvePnP(
+            _MODEL_POINTS,
+            image_points,
+            camera_matrix,
+            self._dist_coeffs,
+            flags=cv2.SOLVEPNP_ITERATIVE,
+        )
+        result = (success, rvec, tvec, image_points)
+        self._cache_key = key
+        self._cache_result = result
+        return result
+    def estimate(
+        self, landmarks: np.ndarray, frame_w: int, frame_h: int
+    ) -> tuple[float, float, float] | None:
+        success, rvec, tvec, _ = self._solve(landmarks, frame_w, frame_h)
+        if not success:
+            return None
+        rmat, _ = cv2.Rodrigues(rvec)
+        nose_dir = rmat @ np.array([0.0, 0.0, 1.0])
+        face_up = rmat @ np.array([0.0, 1.0, 0.0])
+        yaw = math.degrees(math.atan2(nose_dir[0], -nose_dir[2]))
+        pitch = math.degrees(math.asin(np.clip(-nose_dir[1], -1.0, 1.0)))
+        roll = math.degrees(math.atan2(face_up[0], -face_up[1]))
+        return (yaw, pitch, roll)
+    def score(self, landmarks: np.ndarray, frame_w: int, frame_h: int) -> float:
+        angles = self.estimate(landmarks, frame_w, frame_h)
+        if angles is None:
+            return 0.0
+        yaw, pitch, roll = angles
+        deviation = math.sqrt(yaw**2 + pitch**2 + (self.roll_weight * roll) ** 2)
+        t = min(deviation / self.max_angle, 1.0)
+        return 0.5 * (1.0 + math.cos(math.pi * t))
+    def draw_axes(
+        self,
+        frame: np.ndarray,
+        landmarks: np.ndarray,
+        axis_length: float = 50.0,
+    ) -> np.ndarray:
+        h, w = frame.shape[:2]
+        success, rvec, tvec, image_points = self._solve(landmarks, w, h)
+        if not success:
+            return frame
+        camera_matrix = self._get_camera_matrix(w, h)
+        nose = tuple(image_points[0].astype(int))
+        axes_3d = np.float64(
+            [[axis_length, 0, 0], [0, axis_length, 0], [0, 0, axis_length]]
+        )
+        projected, _ = cv2.projectPoints(
+            axes_3d, rvec, tvec, camera_matrix, self._dist_coeffs
+        )
+        colors = [(0, 0, 255), (0, 255, 0), (255, 0, 0)]
+        for i, color in enumerate(colors):
+            pt = tuple(projected[i].ravel().astype(int))
+            cv2.line(frame, nose, pt, color, 2)
+        return frame

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,27 @@

+{
+  "name": "my-ai-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.2.4"
+  }
+}

public/assets/111.jpg ADDED Viewed

public/vite.svg ADDED Viewed

requirements.txt ADDED Viewed

	@@ -0,0 +1,14 @@

+websockets
+python-multipart
+jinja2
+aiortc
+av
+mediapipe>=0.10.14
+opencv-python-headless>=4.8.0
+numpy>=1.24.0
+scikit-learn>=1.2.0
+joblib>=1.2.0
+fastapi>=0.104.0
+uvicorn[standard]>=0.24.0
+aiosqlite>=0.19.0
+pydantic>=2.0.0

src/App.css ADDED Viewed

	@@ -0,0 +1,799 @@

+/* =========================================
+   1. REACT layout setting
+   ========================================= */
+html, body, #root {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+.app-container {
+    width: 100%;
+    min-height: 100vh; /* screen height */
+    display: flex;
+    flex-direction: column;
+    background-color: #f9f9f9;
+}
+/* =========================================
+   2. original layout
+   ========================================= */
+/* GLOBAL STYLES */
+body {
+    font-family: 'Nunito', sans-serif;
+    background-color: #f9f9f9;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+/* dynamic class name */
+.hidden {
+    display: none !important;
+}
+/* TOP MENU */
+#top-menu {
+    height: 60px;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Center buttons horizontally */
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+}
+.menu-btn {
+    background: none;
+    border: none;
+    font-family: 'Nunito', sans-serif;
+    font-size: 16px;
+    color: #333;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+.menu-btn:hover {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+}
+/* active for React */
+.menu-btn.active {
+    font-weight: bold;
+    color: #007BFF;
+    background-color: #eef7ff;
+    border-radius: 4px;
+}
+.separator {
+    width: 1px;
+    height: 20px;
+    background-color: #555; /* Dark gray separator */
+    margin: 0 5px;
+}
+/* PAGE CONTAINER */
+.page {
+    /* content under menu */
+    min-height: calc(100vh - 60px);
+    width: 100%;
+    padding-top: 60px; /* Space for fixed menu */
+    padding-bottom: 40px; /* Space at bottom for scrolling */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+}
+/* Ensure page titles are black */
+.page h1 {
+    color: #000 !important;
+    background: transparent !important;
+}
+.page-title {
+    color: #000 !important;
+    background: transparent !important;
+}
+/* PAGE A SPECIFIC */
+#page-a {
+    justify-content: center; /* Center vertically */
+    /* 注意：因为 React 结构变化，如果感觉偏下，可以微调这个 margin-top */
+    margin-top: -40px;
+    flex: 1; /* 确保它占满剩余空间以便垂直居中 */
+}
+#page-a h1 {
+    font-size: 80px;
+    margin: 0 0 10px 0;
+    color: #000;
+    text-align: center; /* 确保文字居中 */
+}
+#page-a p {
+    color: #666;
+    font-size: 20px;
+    margin-bottom: 40px;
+    text-align: center;
+}
+.btn-main {
+    background-color: #007BFF; /* Blue */
+    color: white;
+    border: none;
+    padding: 15px 50px;
+    font-size: 20px;
+    font-family: 'Nunito', sans-serif;
+    border-radius: 30px; /* Fully rounded corners */
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+.btn-main:hover {
+    transform: scale(1.1); /* Zoom effect */
+}
+/* PAGE B SPECIFIC */
+#page-b {
+    justify-content: space-evenly; /* Distribute vertical space */
+    padding-bottom: 20px;
+    min-height: calc(100vh - 60px); /* 再次确保高度足够 */
+}
+/* 1. Display Area */
+#display-area {
+    width: 60%;
+    height: 50vh; /* 改用 vh 单位，确保在不同屏幕下的高度比例 */
+    min-height: 300px;
+    border: 2px solid #ddd;
+    border-radius: 12px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #555;
+    font-size: 24px;
+    position: relative;
+    /* 确保视频元素也能居中且不溢出 */
+    overflow: hidden;
+}
+#display-area video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* 类似于 background-size: cover */
+}
+/* 2. Timeline Area */
+#timeline-area {
+    width: 60%;
+    height: 80px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+.timeline-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: #888;
+    font-size: 14px;
+}
+#timeline-line {
+    width: 100%;
+    height: 2px;
+    background-color: #87CEEB; /* Light blue */
+}
+/* 3. Control Panel */
+#control-panel {
+    display: flex;
+    gap: 20px;
+    width: 60%;
+    justify-content: space-between;
+}
+.action-btn {
+    flex: 1; /* Evenly distributed width */
+    padding: 12px 0;
+    border: none;
+    border-radius: 12px;
+    font-size: 16px;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 700;
+    cursor: pointer;
+    color: white;
+    transition: opacity 0.2s;
+}
+.action-btn:hover {
+    opacity: 0.9;
+}
+.action-btn.green { background-color: #28a745; }
+.action-btn.yellow { background-color: #ffce0b; }
+.action-btn.blue { background-color: #326ed6; }
+.action-btn.red { background-color: #dc3545; }
+/* 4. Frame Control */
+#frame-control {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    color: #333;
+    font-weight: bold;
+}
+#frame-slider {
+    width: 200px;
+    cursor: pointer;
+}
+#frame-input {
+    width: 50px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    text-align: center;
+    font-family: 'Nunito', sans-serif;
+}
+/* ================ ACHIEVEMENT PAGE ================ */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    width: 80%;
+    margin: 40px auto;
+}
+.stat-card {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.stat-number {
+    font-size: 48px;
+    font-weight: bold;
+    color: #007BFF;
+    margin-bottom: 10px;
+}
+.stat-label {
+    font-size: 16px;
+    color: #666;
+}
+.achievements-section {
+    width: 80%;
+    margin: 0 auto;
+}
+.achievements-section h2 {
+    color: #333;
+    margin-bottom: 20px;
+}
+.badges-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+.badge {
+    background: white;
+    padding: 30px 20px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    transition: transform 0.2s;
+}
+.badge:hover {
+    transform: translateY(-5px);
+}
+.badge.locked {
+    opacity: 0.4;
+    filter: grayscale(100%);
+}
+.badge-icon {
+    font-size: 64px;
+    margin-bottom: 15px;
+}
+.badge-name {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+}
+/* ================ RECORDS PAGE ================ */
+.records-controls {
+    display: flex;
+    gap: 10px;
+    margin: 20px auto;
+    width: 80%;
+    justify-content: center;
+}
+.filter-btn {
+    padding: 10px 20px;
+    border: 2px solid #007BFF;
+    background: white;
+    color: #007BFF;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+.filter-btn:hover {
+    background: #e7f3ff;
+}
+.filter-btn.active {
+    background: #007BFF;
+    color: white;
+}
+.chart-container {
+    width: 80%;
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin: 20px auto;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+#focus-chart {
+    display: block;
+    margin: 0 auto;
+    /* 确保图表在容器内自适应 */
+    max-width: 100%;
+}
+.sessions-list {
+    width: 80%;
+    margin: 20px auto;
+}
+.sessions-list h2 {
+    color: #333;
+    margin-bottom: 15px;
+}
+#sessions-table {
+    width: 100%;
+    background: white;
+    border-collapse: collapse;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+#sessions-table th {
+    background: #007BFF;
+    color: white;
+    padding: 15px;
+    text-align: left;
+    font-weight: 600;
+}
+#sessions-table td {
+    padding: 12px 15px;
+    border-bottom: 1px solid #eee;
+}
+#sessions-table tr:last-child td {
+    border-bottom: none;
+}
+#sessions-table tbody tr:hover {
+    background: #f8f9fa;
+}
+.btn-view {
+    padding: 6px 12px;
+    background: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    transition: background 0.2s;
+}
+.btn-view:hover {
+    background: #0056b3;
+}
+/* ================ SETTINGS PAGE ================ */
+.settings-container {
+    width: 60%;
+    max-width: 800px;
+    margin: 20px auto;
+}
+.setting-group {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.setting-group h2 {
+    margin-top: 0;
+    color: #333;
+    font-size: 20px;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #007BFF;
+    padding-bottom: 10px;
+}
+.setting-item {
+    margin-bottom: 25px;
+}
+.setting-item:last-child {
+    margin-bottom: 0;
+}
+.setting-item label {
+    display: block;
+    margin-bottom: 8px;
+    color: #333;
+    font-weight: 600;
+}
+.slider-group {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+.slider-group input[type="range"] {
+    flex: 1;
+}
+.slider-group span {
+    min-width: 40px;
+    text-align: center;
+    font-weight: bold;
+    color: #007BFF;
+    font-size: 18px;
+}
+.setting-description {
+    font-size: 14px;
+    color: #666;
+    margin-top: 5px;
+    font-style: italic;
+}
+input[type="checkbox"] {
+    margin-right: 10px;
+    cursor: pointer;
+}
+input[type="number"] {
+    width: 100px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-family: 'Nunito', sans-serif;
+}
+/* --- 新的代码：让按钮居中且变宽 --- */
+.setting-group .action-btn {
+    display: inline-block;   /* 允许并排显示 */
+    width: 48%;              /* 两个按钮各占约一半宽度 (留2%缝隙) */
+    margin: 15px 1%;         /* 上下 15px，左右 1% 间距来实现居中和分隔 */
+    text-align: center;      /* 文字居中 */
+    box-sizing: border-box;  /* ��保边框不会撑大按钮导致换行 */
+}
+#save-settings {
+    display: block;
+    margin: 20px auto;
+}
+/* ================ HELP PAGE ================ */
+.help-container {
+    width: 70%;
+    max-width: 900px;
+    margin: 20px auto;
+}
+/* Fake ad block (Help page) */
+.fake-ad {
+    position: relative;
+    display: block;
+    width: min(600px, 90%);
+    margin: 10px auto 30px auto;
+    border: 1px solid #e5e5e5;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #fff;
+    text-decoration: none;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.fake-ad:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
+}
+.fake-ad img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+.fake-ad-badge {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    background: rgba(0,0,0,0.75);
+    color: #fff;
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    letter-spacing: 0.5px;
+}
+.fake-ad-cta {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    background: #111;
+    color: #fff;
+    font-size: 14px;
+    padding: 8px 12px;
+    border-radius: 8px;
+}
+.help-section {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.help-section h2 {
+    color: #007BFF;
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+.help-section ol,
+.help-section ul {
+    line-height: 1.8;
+    color: #333;
+}
+.help-section p {
+    line-height: 1.6;
+    color: #333;
+}
+details {
+    margin: 15px 0;
+    cursor: pointer;
+    padding: 10px;
+    background: #f8f9fa;
+    border-radius: 5px;
+}
+summary {
+    font-weight: bold;
+    padding: 5px;
+    color: #007BFF;
+}
+details[open] summary {
+    margin-bottom: 10px;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 10px;
+}
+details p {
+    margin: 10px 0 0 0;
+}
+/* ================ SESSION SUMMARY MODAL ================ */
+/* 如果将来要做弹窗，这些样式可以直接复用 */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+.modal-content {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+    max-width: 500px;
+    width: 90%;
+}
+.modal-content h2 {
+    margin-top: 0;
+    color: #333;
+    text-align: center;
+    margin-bottom: 30px;
+}
+.summary-stats {
+    margin-bottom: 30px;
+}
+.summary-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 15px 0;
+    border-bottom: 1px solid #eee;
+}
+.summary-item:last-child {
+    border-bottom: none;
+}
+.summary-label {
+    font-weight: 600;
+    color: #666;
+}
+.summary-value {
+    font-weight: bold;
+    color: #007BFF;
+    font-size: 18px;
+}
+.modal-content .btn-main {
+    display: block;
+    margin: 0 auto;
+    padding: 12px 40px;
+}
+/* ================ TIMELINE BLOCKS ================ */
+.timeline-block {
+    transition: opacity 0.2s;
+    border-radius: 2px;
+}
+.timeline-block:hover {
+    opacity: 0.7;
+}
+/* ================ RESPONSIVE DESIGN ================ */
+@media (max-width: 1200px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .badges-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+@media (max-width: 768px) {
+    .stats-grid,
+    .badges-grid {
+        grid-template-columns: 1fr;
+        width: 90%;
+    }
+    .settings-container,
+    .help-container,
+    .chart-container,
+    .sessions-list,
+    .records-controls {
+        width: 90%;
+    }
+    #control-panel {
+        width: 90%;
+        flex-wrap: wrap;
+    }
+    #display-area {
+        width: 90%;
+    }
+    #timeline-area {
+        width: 90%;
+    }
+    #frame-control {
+        width: 90%;
+        flex-direction: column;
+    }
+}
+/* =========================================
+   SESSION RESULT OVERLAY (新增)
+   ========================================= */
+.session-result-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.85); /* 深色半透明背景 */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    z-index: 10;
+    animation: fadeIn 0.5s ease;
+    backdrop-filter: blur(5px); /* 背景模糊效果 (可选) */
+}
+.session-result-overlay h3 {
+    font-size: 32px;
+    margin-bottom: 30px;
+    color: #4cd137; /* 绿色标题 */
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+.session-result-overlay .result-item {
+    display: flex;
+    justify-content: space-between;
+    width: 200px; /* 控制宽度 */
+    margin-bottom: 15px;
+    font-size: 20px;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    padding-bottom: 5px;
+}
+.session-result-overlay .label {
+    color: #ccc;
+    font-weight: normal;
+}
+.session-result-overlay .value {
+    color: #fff;
+    font-weight: bold;
+    font-family: 'Courier New', monospace; /* 看起来像数据 */
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+}

src/App.jsx ADDED Viewed

	@@ -0,0 +1,119 @@

+import React, { useState, useRef, useEffect } from 'react';
+import './App.css';
+import { VideoManagerLocal } from './utils/VideoManagerLocal';
+// 引入我们刚刚拆分好的组件
+// 注意：确保你的文件名和这里 import 的名字完全一致
+import Home from './components/Home';
+import FocusPageLocal from './components/FocusPageLocal';
+import Achievement from './components/Achievement';
+import Records from './components/Records';
+import Customise from './components/Customise';
+import Help from './components/Help';
+function App() {
+  // 定义状态：当前显示哪个页面
+  const [activeTab, setActiveTab] = useState('home');
+  // 全局VideoManagerLocal实例和session状态
+  const videoManagerRef = useRef(null);
+  const [isSessionActive, setIsSessionActive] = useState(false);
+  const [sessionResult, setSessionResult] = useState(null);
+  // 初始化VideoManagerLocal（只创建一次）
+  useEffect(() => {
+    const callbacks = {
+      onSessionStart: () => {
+        setIsSessionActive(true);
+        setSessionResult(null);
+      },
+      onSessionEnd: (summary) => {
+        console.log("App.jsx: onSessionEnd called");
+        console.log("App.jsx: Session Summary:", summary);
+        setIsSessionActive(false);
+        if (summary) {
+          console.log("App.jsx: Setting sessionResult with summary");
+          setSessionResult(summary);
+        } else {
+          console.warn("App.jsx: Summary is null or undefined");
+        }
+      }
+    };
+    videoManagerRef.current = new VideoManagerLocal(callbacks);
+    // 清理函数：只在整个App卸载时才清理
+    return () => {
+      if (videoManagerRef.current) {
+        videoManagerRef.current.stopStreaming();
+      }
+    };
+  }, []);
+  // 页面切换时保持session连接，不自动断开
+  return (
+    <div className="app-container">
+      {/* 顶部导航栏 (Top Menu) - 它是全局共用的，所以留在 App.jsx 里 */}
+      <nav id="top-menu">
+        <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>
+        <div className="separator"></div>
+        <button
+          className={`menu-btn ${activeTab === 'records' ? 'active' : ''}`}
+          onClick={() => setActiveTab('records')}
+        >
+          My Records
+        </button>
+        <div className="separator"></div>
+        <button
+          className={`menu-btn ${activeTab === 'customise' ? 'active' : ''}`}
+          onClick={() => setActiveTab('customise')}
+        >
+          Customise
+        </button>
+        <div className="separator"></div>
+        <button
+          className={`menu-btn ${activeTab === 'help' ? 'active' : ''}`}
+          onClick={() => setActiveTab('help')}
+        >
+          Help
+        </button>
+      </nav>
+      {/* 页面内容区域：根据 activeTab 的值，渲染对应的组件 */}
+      {/* Home 页：我们需要把 setActiveTab 传给它，因为它的 'Start' 按钮要能跳转页面 */}
+      {activeTab === 'home' && <Home setActiveTab={setActiveTab} />}
+      {/* FocusPageLocal 保持常驻，避免切页中断视频/连接 - 使用本地处理，不依赖WebRTC */}
+      <FocusPageLocal
+        videoManager={videoManagerRef.current}
+        sessionResult={sessionResult}
+        setSessionResult={setSessionResult}
+        isActive={activeTab === 'focus'}
+      />
+      {activeTab === 'achievement' && <Achievement />}
+      {activeTab === 'records' && <Records />}
+      {activeTab === 'customise' && <Customise />}
+      {activeTab === 'help' && <Help />}
+    </div>
+  );
+}
+export default App;

src/assets/react.svg ADDED Viewed

src/components/Achievement.jsx ADDED Viewed

	@@ -0,0 +1,245 @@

+import React, { useState, useEffect } from 'react';
+function Achievement() {
+  const [stats, setStats] = useState({
+    total_sessions: 0,
+    total_focus_time: 0,
+    avg_focus_score: 0,
+    streak_days: 0
+  });
+  const [badges, setBadges] = useState([]);
+  const [loading, setLoading] = useState(true);
+  // 格式化时间显示
+  const formatTime = (seconds) => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    if (hours > 0) return `${hours}h ${minutes}m`;
+    return `${minutes}m`;
+  };
+  // 加载统计数据
+  useEffect(() => {
+    fetch('/api/stats/summary')
+      .then(res => res.json())
+      .then(data => {
+        setStats(data);
+        calculateBadges(data);
+        setLoading(false);
+      })
+      .catch(err => {
+        console.error('Failed to load stats:', err);
+        setLoading(false);
+      });
+  }, []);
+  // 根据统计数据计算徽章
+  const calculateBadges = (data) => {
+    const earnedBadges = [];
+    // 首次会话徽章
+    if (data.total_sessions >= 1) {
+      earnedBadges.push({
+        id: 'first-session',
+        name: 'First Step',
+        description: 'Complete your first focus session',
+        icon: '🎯',
+        unlocked: true
+      });
+    }
+    // 10次会话徽章
+    if (data.total_sessions >= 10) {
+      earnedBadges.push({
+        id: 'ten-sessions',
+        name: 'Getting Started',
+        description: 'Complete 10 focus sessions',
+        icon: '⭐',
+        unlocked: true
+      });
+    }
+    // 50次会话徽章
+    if (data.total_sessions >= 50) {
+      earnedBadges.push({
+        id: 'fifty-sessions',
+        name: 'Dedicated',
+        description: 'Complete 50 focus sessions',
+        icon: '🏆',
+        unlocked: true
+      });
+    }
+    // 专注大师徽章 (平均专注度 > 80%)
+    if (data.avg_focus_score >= 0.8 && data.total_sessions >= 5) {
+      earnedBadges.push({
+        id: 'focus-master',
+        name: 'Focus Master',
+        description: 'Maintain 80%+ average focus score',
+        icon: '🧠',
+        unlocked: true
+      });
+    }
+    // 连续天数徽章
+    if (data.streak_days >= 7) {
+      earnedBadges.push({
+        id: 'week-streak',
+        name: 'Week Warrior',
+        description: '7 day streak',
+        icon: '🔥',
+        unlocked: true
+      });
+    }
+    if (data.streak_days >= 30) {
+      earnedBadges.push({
+        id: 'month-streak',
+        name: 'Month Master',
+        description: '30 day streak',
+        icon: '💎',
+        unlocked: true
+      });
+    }
+    // 时长徽章 (10小时+)
+    if (data.total_focus_time >= 36000) {
+      earnedBadges.push({
+        id: 'ten-hours',
+        name: 'Endurance',
+        description: '10+ hours total focus time',
+        icon: '⏱️',
+        unlocked: true
+      });
+    }
+    // 未解锁徽章（示例）
+    const allBadges = [
+      {
+        id: 'first-session',
+        name: 'First Step',
+        description: 'Complete your first focus session',
+        icon: '🎯',
+        unlocked: data.total_sessions >= 1
+      },
+      {
+        id: 'ten-sessions',
+        name: 'Getting Started',
+        description: 'Complete 10 focus sessions',
+        icon: '⭐',
+        unlocked: data.total_sessions >= 10
+      },
+      {
+        id: 'fifty-sessions',
+        name: 'Dedicated',
+        description: 'Complete 50 focus sessions',
+        icon: '🏆',
+        unlocked: data.total_sessions >= 50
+      },
+      {
+        id: 'focus-master',
+        name: 'Focus Master',
+        description: 'Maintain 80%+ average focus score',
+        icon: '🧠',
+        unlocked: data.avg_focus_score >= 0.8 && data.total_sessions >= 5
+      },
+      {
+        id: 'week-streak',
+        name: 'Week Warrior',
+        description: '7 day streak',
+        icon: '🔥',
+        unlocked: data.streak_days >= 7
+      },
+      {
+        id: 'month-streak',
+        name: 'Month Master',
+        description: '30 day streak',
+        icon: '💎',
+        unlocked: data.streak_days >= 30
+      },
+      {
+        id: 'ten-hours',
+        name: 'Endurance',
+        description: '10+ hours total focus time',
+        icon: '⏱️',
+        unlocked: data.total_focus_time >= 36000
+      },
+      {
+        id: 'hundred-sessions',
+        name: 'Centurion',
+        description: 'Complete 100 focus sessions',
+        icon: '👑',
+        unlocked: data.total_sessions >= 100
+      }
+    ];
+    setBadges(allBadges);
+  };
+  return (
+    <main id="page-c" className="page">
+      <h1 className="page-title">My Achievement</h1>
+      {loading ? (
+        <div style={{ textAlign: 'center', padding: '40px', color: '#888' }}>
+          Loading stats...
+        </div>
+      ) : (
+        <>
+          <div className="stats-grid">
+            <div className="stat-card">
+              <div className="stat-number" id="total-sessions">{stats.total_sessions}</div>
+              <div className="stat-label">Total Sessions</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-number" id="total-hours">{formatTime(stats.total_focus_time)}</div>
+              <div className="stat-label">Total Focus Time</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-number" id="avg-focus">{(stats.avg_focus_score * 100).toFixed(1)}%</div>
+              <div className="stat-label">Average Focus</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-number" id="current-streak">{stats.streak_days}</div>
+              <div className="stat-label">Day Streak</div>
+            </div>
+          </div>
+          <div className="achievements-section">
+            <h2>Badges</h2>
+            <div id="badges-container" className="badges-grid">
+              {badges.map(badge => (
+                <div
+                  key={badge.id}
+                  className={`badge ${badge.unlocked ? 'unlocked' : 'locked'}`}
+                  style={{
+                    padding: '20px',
+                    textAlign: 'center',
+                    border: '2px solid',
+                    borderColor: badge.unlocked ? '#00FF00' : '#444',
+                    borderRadius: '10px',
+                    backgroundColor: badge.unlocked ? 'rgba(0, 255, 0, 0.1)' : 'rgba(68, 68, 68, 0.1)',
+                    opacity: badge.unlocked ? 1 : 0.5,
+                    transition: 'all 0.3s'
+                  }}
+                >
+                  <div style={{ fontSize: '48px', marginBottom: '10px' }}>
+                    {badge.unlocked ? badge.icon : '🔒'}
+                  </div>
+                  <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>
+                    {badge.name}
+                  </div>
+                  <div style={{ fontSize: '12px', color: '#888' }}>
+                    {badge.description}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+    </main>
+  );
+}
+export default Achievement;

src/components/Customise.jsx ADDED Viewed

	@@ -0,0 +1,220 @@

+import React, { useState, useEffect, 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);
+  // 引用隐藏的文件输入框
+  const fileInputRef = useRef(null);
+  // 1. 加载设置
+  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. 保存设置
+  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)
+  const handleExport = async () => {
+    try {
+      // 请求获取所有历史记录
+      const response = await fetch('/api/sessions?filter=all');
+      if (!response.ok) throw new Error("Failed to fetch data");
+      const data = await response.json();
+      // 创建 JSON Blob
+      const jsonString = JSON.stringify(data, null, 2);
+      const blob = new Blob([jsonString], { type: 'application/json' });
+      // 创建临时下载链接
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      // 文件名包含当前日期
+      link.download = `focus-guard-backup-${new Date().toISOString().slice(0, 10)}.json`;
+      // 触发下载
+      document.body.appendChild(link);
+      link.click();
+      // 清理
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error(error);
+      alert("Export failed: " + error.message);
+    }
+  };
+  // 4. 触发导入文件选择
+  const triggerImport = () => {
+    fileInputRef.current.click();
+  };
+  // 5. 处理文件导入 (Import)
+  const handleFileChange = async (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      try {
+        const content = e.target.result;
+        const sessions = JSON.parse(content);
+        // 简单的验证：确保它是一个数组
+        if (!Array.isArray(sessions)) {
+          throw new Error("Invalid file format: Expected a list of sessions.");
+        }
+        // 发送给后端进行存储
+        const response = await fetch('/api/import', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(sessions)
+        });
+        if (response.ok) {
+            const result = await response.json();
+            alert(`Success! Imported ${result.count} sessions.`);
+        } else {
+            alert("Import failed on server side.");
+        }
+      } catch (err) {
+        alert("Error parsing file: " + err.message);
+      }
+      // 清空 input，允许重复上传同一个文件
+      event.target.value = '';
+    };
+    reader.readAsText(file);
+  };
+  // 6. 清除历史 (Clear History)
+  const handleClearHistory = async () => {
+    if (!window.confirm("Are you sure? This will delete ALL your session history permanently.")) {
+        return;
+    }
+    try {
+        const response = await fetch('/api/history', { method: 'DELETE' });
+        if (response.ok) {
+            alert("All history has been cleared.");
+        } else {
+            alert("Failed to clear history.");
+        }
+    } catch (err) {
+        alert("Error: " + err.message);
+    }
+  };
+  return (
+    <main id="page-e" className="page">
+      <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>
+          {/* 隐藏的文件输入框，只接受 json */}
+          <input
+            type="file"
+            ref={fileInputRef}
+            style={{ display: 'none' }}
+            accept=".json"
+            onChange={handleFileChange}
+          />
+          <div style={{ display: 'flex', gap: '10px', justifyContent: 'center', flexWrap: 'wrap' }}>
+            {/* Export 按钮 */}
+            <button id="export-data" className="action-btn blue" onClick={handleExport} style={{ width: '30%', minWidth: '120px' }}>
+                Export Data
+            </button>
+            {/* Import 按钮 */}
+            <button id="import-data" className="action-btn yellow" onClick={triggerImport} style={{ width: '30%', minWidth: '120px' }}>
+                Import Data
+            </button>
+            {/* Clear 按钮 */}
+            <button id="clear-history" className="action-btn red" onClick={handleClearHistory} style={{ width: '30%', minWidth: '120px' }}>
+                Clear History
+            </button>
+          </div>
+        </div>
+        <button id="save-settings" className="btn-main" onClick={handleSave}>Save Settings</button>
+      </div>
+    </main>
+  );
+}
+export default Customise;

src/components/FocusPage.jsx ADDED Viewed

	@@ -0,0 +1,264 @@

+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;
+  // 辅助函数：格式化时间
+  const formatDuration = (seconds) => {
+    // 如果是 0，直接显示 0s (或者你可以保留原来的 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;
+    // 设置回调函数来更新时间轴
+    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;
+      });
+      // 调用原始回调（如果有）
+      if (originalOnStatusUpdate) originalOnStatusUpdate(isFocused);
+    };
+    // 清理函数：不再自动停止session，只清理回调
+    return () => {
+      if (videoManager) {
+        videoManager.callbacks.onStatusUpdate = originalOnStatusUpdate;
+      }
+    };
+  }, [videoManager]);
+  const handleStart = async () => {
+    try {
+      if (videoManager) {
+        setSessionResult(null); // 开始时清除结果层
+        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.');
+    }
+  };
+  // 浮窗功能
+  const handleFloatingWindow = () => {
+    handlePiP();
+  };
+  // ==========================================
+  // 新增功能：预览按钮的处理函数
+  // ==========================================
+  const handlePreview = () => {
+    // 强制设置一个 0 分 0 秒的假数据，触发 overlay 显示
+    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' }}
+        />
+        {/* 结果覆盖层 */}
+        {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>
+            {/* 新增：加一个小按钮方便关闭预览 */}
+            <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>
+        {/* 修改：把 Models 按钮暂时改成 Preview 按钮，或者加在它后面 */}
+        <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>
+      {/* 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 ADDED Viewed

	@@ -0,0 +1,454 @@

+import React, { useState, useEffect, useRef } from 'react';
+function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActive }) {
+  const [currentFrame, setCurrentFrame] = useState(15);
+  const [timelineEvents, setTimelineEvents] = useState([]);
+  const [stats, setStats] = useState(null);
+  const localVideoRef = useRef(null);
+  const displayCanvasRef = useRef(null);
+  const pipVideoRef = useRef(null); // 用于 PiP 的隐藏 video 元素
+  const pipStreamRef = useRef(null);
+  // 辅助函数：格式化时间
+  const formatDuration = (seconds) => {
+    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;
+    // 设置回调函数来更新时间轴
+    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;
+      });
+      if (originalOnStatusUpdate) originalOnStatusUpdate(isFocused);
+    };
+    // 定期更新统计信息
+    const statsInterval = setInterval(() => {
+      if (videoManager && videoManager.getStats) {
+        setStats(videoManager.getStats());
+      }
+    }, 1000);
+    return () => {
+      if (videoManager) {
+        videoManager.callbacks.onStatusUpdate = originalOnStatusUpdate;
+      }
+      clearInterval(statsInterval);
+    };
+  }, [videoManager]);
+  const handleStart = async () => {
+    try {
+      if (videoManager) {
+        setSessionResult(null);
+        setTimelineEvents([]);
+        console.log('Initializing local camera...');
+        await videoManager.initCamera(localVideoRef.current, displayCanvasRef.current);
+        console.log('Camera initialized');
+        console.log('Starting local 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 {
+        errorMessage += err.message || "Unknown error occurred.";
+      }
+      alert(errorMessage + "\n\nCheck browser console for details.");
+    }
+  };
+  const handleStop = async () => {
+    if (videoManager) {
+      videoManager.stopStreaming();
+    }
+    try {
+      if (document.pictureInPictureElement === pipVideoRef.current) {
+        await document.exitPictureInPicture();
+      }
+    } catch (_) {}
+    if (pipVideoRef.current) {
+      pipVideoRef.current.pause();
+      pipVideoRef.current.srcObject = null;
+    }
+    if (pipStreamRef.current) {
+      pipStreamRef.current.getTracks().forEach(t => t.stop());
+      pipStreamRef.current = null;
+    }
+  };
+  const handlePiP = async () => {
+    try {
+      // 检查是否有视频管理器和是否在运行
+      if (!videoManager || !videoManager.isStreaming) {
+        alert('Please start the video first.');
+        return;
+      }
+      if (!displayCanvasRef.current) {
+        alert('Video not ready.');
+        return;
+      }
+      // 如果已经在 PiP 模式，且是本视频，退出
+      if (document.pictureInPictureElement === pipVideoRef.current) {
+        await document.exitPictureInPicture();
+        console.log('PiP exited');
+        return;
+      }
+      // 检查浏览器支持
+      if (!document.pictureInPictureEnabled) {
+        alert('Picture-in-Picture is not supported in this browser.');
+        return;
+      }
+      // 创建或获取 PiP video 元素
+      const pipVideo = pipVideoRef.current;
+      if (!pipVideo) {
+        alert('PiP video element not ready.');
+        return;
+      }
+      const isSafariPiP = typeof pipVideo.webkitSetPresentationMode === 'function';
+      // 优先用画布流（带检测框），失败再回退到摄像头流
+      let stream = pipStreamRef.current;
+      if (!stream) {
+        const capture = displayCanvasRef.current.captureStream;
+        if (typeof capture === 'function') {
+          stream = capture.call(displayCanvasRef.current, 30);
+        }
+        if (!stream || stream.getTracks().length === 0) {
+          const cameraStream = localVideoRef.current?.srcObject;
+          if (!cameraStream) {
+            alert('Camera stream not ready.');
+            return;
+          }
+          stream = cameraStream;
+        }
+        pipStreamRef.current = stream;
+      }
+      // 确保��有轨道
+      if (!stream || stream.getTracks().length === 0) {
+        alert('Failed to capture video stream from canvas.');
+        return;
+      }
+      pipVideo.srcObject = stream;
+      // 播放视频（Safari 可能不会触发 onloadedmetadata）
+      if (pipVideo.readyState < 2) {
+        await new Promise((resolve) => {
+          const onReady = () => {
+            pipVideo.removeEventListener('loadeddata', onReady);
+            pipVideo.removeEventListener('canplay', onReady);
+            resolve();
+          };
+          pipVideo.addEventListener('loadeddata', onReady);
+          pipVideo.addEventListener('canplay', onReady);
+          // 兜底：短延迟后继续尝试
+          setTimeout(resolve, 600);
+        });
+      }
+      try {
+        await pipVideo.play();
+      } catch (_) {
+        // Safari 可能拒绝自动播放，但仍可进入 PiP
+      }
+      // Safari 支持（优先）
+      if (isSafariPiP) {
+        try {
+          pipVideo.webkitSetPresentationMode('picture-in-picture');
+          console.log('PiP activated (Safari)');
+          return;
+        } catch (e) {
+          // 如果画布流失败，回退到摄像头流再试一次
+          const cameraStream = localVideoRef.current?.srcObject;
+          if (cameraStream && cameraStream !== pipVideo.srcObject) {
+            pipVideo.srcObject = cameraStream;
+            try {
+              await pipVideo.play();
+            } catch (_) {}
+            pipVideo.webkitSetPresentationMode('picture-in-picture');
+            console.log('PiP activated (Safari fallback)');
+            return;
+          }
+          throw e;
+        }
+      }
+      // 标准 API
+      if (typeof pipVideo.requestPictureInPicture === 'function') {
+        await pipVideo.requestPictureInPicture();
+        console.log('PiP activated');
+      } else {
+        alert('Picture-in-Picture is not supported in this browser.');
+      }
+    } catch (err) {
+      console.error('PiP error:', err);
+      alert('Failed to enter Picture-in-Picture: ' + err.message);
+    }
+  };
+  const handleFloatingWindow = () => {
+    handlePiP();
+  };
+  const handleFrameChange = (val) => {
+    const rate = parseInt(val);
+    setCurrentFrame(rate);
+    if (videoManager) {
+      videoManager.setFrameRate(rate);
+    }
+  };
+  const handlePreview = () => {
+    if (!videoManager || !videoManager.isStreaming) {
+      alert('Please start a session first.');
+      return;
+    }
+    // 获取当前统计数据
+    const currentStats = videoManager.getStats();
+    if (!currentStats.sessionId) {
+      alert('No active session.');
+      return;
+    }
+    // 计算当前持续时间（从 session 开始到现在）
+    const sessionDuration = Math.floor((Date.now() - (videoManager.sessionStartTime || Date.now())) / 1000);
+    // 计算当前专注分数
+    const focusScore = currentStats.framesProcessed > 0
+      ? (currentStats.framesProcessed * (currentStats.currentStatus ? 1 : 0)) / currentStats.framesProcessed
+      : 0;
+    // 显示当前实时数据
+    setSessionResult({
+      duration_seconds: sessionDuration,
+      focus_score: focusScore,
+      total_frames: currentStats.framesProcessed,
+      focused_frames: Math.floor(currentStats.framesProcessed * focusScore)
+    });
+  };
+  const handleCloseOverlay = () => {
+    setSessionResult(null);
+  };
+  const pageStyle = isActive
+    ? undefined
+    : {
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        overflow: 'hidden',
+        opacity: 0,
+        pointerEvents: 'none'
+      };
+  useEffect(() => {
+    return () => {
+      if (pipVideoRef.current) {
+        pipVideoRef.current.pause();
+        pipVideoRef.current.srcObject = null;
+      }
+      if (pipStreamRef.current) {
+        pipStreamRef.current.getTracks().forEach(t => t.stop());
+        pipStreamRef.current = null;
+      }
+    };
+  }, []);
+  return (
+    <main id="page-b" className="page" style={pageStyle}>
+      {/* 1. Camera / Display Area */}
+      <section id="display-area" style={{ position: 'relative', overflow: 'hidden' }}>
+        {/* 用于 PiP 的隐藏 video 元素（保持在 DOM 以提高兼容性） */}
+        <video
+          ref={pipVideoRef}
+          muted
+          playsInline
+          autoPlay
+          style={{
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            opacity: 0,
+            pointerEvents: 'none'
+          }}
+        />
+        {/* 本地视频流（隐藏，仅用于截图） */}
+        <video
+          ref={localVideoRef}
+          muted
+          playsInline
+          autoPlay
+          style={{ display: 'none' }}
+        />
+        {/* 显示处理后的视频（使用 Canvas） */}
+        <canvas
+          ref={displayCanvasRef}
+          width={640}
+          height={480}
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+            backgroundColor: '#000'
+          }}
+        />
+        {/* 结果覆盖层 */}
+        {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>
+            <button
+              onClick={handleCloseOverlay}
+              style={{
+                marginTop: '20px',
+                padding: '8px 20px',
+                background: 'transparent',
+                border: '1px solid white',
+                color: 'white',
+                borderRadius: '20px',
+                cursor: 'pointer'
+              }}
+            >
+              Close
+            </button>
+          </div>
+        )}
+        {/* 性能统计显示（开发模式） */}
+        {stats && stats.isStreaming && (
+          <div style={{
+            position: 'absolute',
+            top: '10px',
+            right: '10px',
+            background: 'rgba(0,0,0,0.7)',
+            color: 'white',
+            padding: '10px',
+            borderRadius: '5px',
+            fontSize: '12px',
+            fontFamily: 'monospace'
+          }}>
+            <div>Session: {stats.sessionId}</div>
+            <div>Sent: {stats.framesSent}</div>
+            <div>Processed: {stats.framesProcessed}</div>
+            <div>Latency: {stats.avgLatency.toFixed(0)}ms</div>
+            <div>Status: {stats.currentStatus ? 'Focused' : 'Not Focused'}</div>
+            <div>Confidence: {(stats.lastConfidence * 100).toFixed(1)}%</div>
+          </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>
+        <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>
+      {/* 4. Frame Control */}
+      <section id="frame-control">
+        <label htmlFor="frame-slider">Frame Rate (FPS)</label>
+        <input
+          type="range"
+          id="frame-slider"
+          min="5"
+          max="30"
+          value={currentFrame}
+          onChange={(e) => handleFrameChange(e.target.value)}
+        />
+        <input
+          type="number"
+          id="frame-input"
+          min="5"
+          max="30"
+          value={currentFrame}
+          onChange={(e) => handleFrameChange(e.target.value)}
+        />
+      </section>
+    </main>
+  );
+}
+export default FocusPageLocal;

src/components/Help.jsx ADDED Viewed

	@@ -0,0 +1,87 @@

+import React from 'react';
+function Help() {
+  return (
+    <main id="page-f" className="page">
+      <h1 className="page-title">Help</h1>
+      <a
+        className="fake-ad"
+        href="https://www.kcl.ac.uk/"
+        target="_blank"
+        rel="noreferrer"
+        aria-label="Sponsored: King's College London"
+      >
+        <div className="fake-ad-badge">Sponsored</div>
+        <img src="/assets/111.jpg" alt="King's College London campus sign" />
+        <div className="fake-ad-cta">Learn More</div>
+      </a>
+      <div className="help-container">
+        <section className="help-section">
+          <h2>How to Use Focus Guard</h2>
+          <ol>
+            <li>Click "Start" or navigate to "Start Focus" in the menu</li>
+            <li>Allow camera access when prompted</li>
+            <li>Click the green "Start" button to begin monitoring</li>
+            <li>Position yourself in front of the camera</li>
+            <li>The system will track your focus in real-time</li>
+            <li>Click "Stop" when you're done to save the session</li>
+          </ol>
+        </section>
+        <section className="help-section">
+          <h2>What is "Focused"?</h2>
+          <p>The system considers you focused when:</p>
+          <ul>
+            <li>You are clearly visible in the camera frame</li>
+            <li>You are centered in the view</li>
+            <li>Your face is directed toward the screen</li>
+            <li>No other people are detected in the frame</li>
+          </ul>
+        </section>
+        <section className="help-section">
+          <h2>Adjusting Settings</h2>
+          <p><strong>Frame Rate:</strong> Lower values reduce CPU usage but update less frequently. Recommended: 15-30 FPS.</p>
+          <p><strong>Sensitivity:</strong> Higher values require stricter focus criteria. Adjust based on your setup.</p>
+        </section>
+        <section className="help-section">
+          <h2>Privacy & Data</h2>
+          <p>All video processing happens in real-time. No video frames are stored - only detection metadata (focus status, timestamps) is saved in your local database.</p>
+        </section>
+        <section className="help-section">
+          <h2>FAQ</h2>
+          <details>
+            <summary>Why is my focus score low?</summary>
+            <p>Ensure good lighting, center yourself in the camera frame, and adjust sensitivity settings in the Customise page.</p>
+          </details>
+          <details>
+            <summary>Can I use this without a camera?</summary>
+            <p>No, camera access is required for focus detection.</p>
+          </details>
+          <details>
+            <summary>Does this work on mobile?</summary>
+            <p>The app works on mobile browsers but performance may vary due to processing requirements.</p>
+          </details>
+          <details>
+            <summary>Is my data private?</summary>
+            <p>Yes! All processing happens locally. Video frames are analyzed in real-time and never stored. Only metadata is saved.</p>
+          </details>
+        </section>
+        <section className="help-section">
+          <h2>Technical Info</h2>
+          <p><strong>Model:</strong> YOLOv8n (Nano)</p>
+          <p><strong>Detection:</strong> Real-time person detection with pose analysis</p>
+          <p><strong>Storage:</strong> SQLite local database</p>
+          <p><strong>Framework:</strong> FastAPI + Native JavaScript</p>
+        </section>
+      </div>
+    </main>
+  );
+}
+export default Help;

src/components/Home.jsx ADDED Viewed

	@@ -0,0 +1,22 @@

+import React from 'react';
+// receive setActiveTab to change page
+function Home({ setActiveTab }) {
+  return (
+    <main id="page-a" className="page">
+      <h1>FocusGuard</h1>
+      <p>Your productivity monitor assistant.</p>
+      {/* click button change to 'focus' page */}
+      <button
+        id="start-button"
+        className="btn-main"
+        onClick={() => setActiveTab('focus')}
+      >
+        Start
+      </button>
+    </main>
+  );
+}
+export default Home;

src/components/Records.jsx ADDED Viewed

	@@ -0,0 +1,312 @@

+import React, { useState, useEffect, useRef } from 'react';
+function Records() {
+  const [filter, setFilter] = useState('all');
+  const [sessions, setSessions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const chartRef = useRef(null);
+  // 格式化时间
+  const formatDuration = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}m ${secs}s`;
+  };
+  // 格式化日期
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+  // 加载会话数据
+  const loadSessions = async (filterType) => {
+    setLoading(true);
+    try {
+      const response = await fetch(`/api/sessions?filter=${filterType}&limit=50`);
+      const data = await response.json();
+      setSessions(data);
+      drawChart(data);
+    } catch (error) {
+      console.error('Failed to load sessions:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  // 绘制图表
+  const drawChart = (data) => {
+    const canvas = chartRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const width = canvas.width = canvas.offsetWidth;
+    const height = canvas.height = 300;
+    // 清空画布
+    ctx.clearRect(0, 0, width, height);
+    if (data.length === 0) {
+      ctx.fillStyle = '#999';
+      ctx.font = '16px Nunito';
+      ctx.textAlign = 'center';
+      ctx.fillText('No data available', width / 2, height / 2);
+      return;
+    }
+    // 准备数据 (最多显示最近20个会话)
+    const displayData = data.slice(0, 20).reverse();
+    const padding = 50;
+    const chartWidth = width - padding * 2;
+    const chartHeight = height - padding * 2;
+    const barWidth = chartWidth / displayData.length;
+    // 找到最大值用于缩放
+    const maxScore = 1.0;
+    // 绘制坐标轴
+    ctx.strokeStyle = '#E0E0E0';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(padding, padding);
+    ctx.lineTo(padding, height - padding);
+    ctx.lineTo(width - padding, height - padding);
+    ctx.stroke();
+    // 绘制Y轴刻度
+    ctx.fillStyle = '#666';
+    ctx.font = '12px Nunito';
+    ctx.textAlign = 'right';
+    for (let i = 0; i <= 4; i++) {
+      const y = height - padding - (chartHeight * i / 4);
+      const value = (maxScore * i / 4 * 100).toFixed(0);
+      ctx.fillText(value + '%', padding - 10, y + 4);
+      // 绘制网格线
+      ctx.strokeStyle = '#F0F0F0';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(padding, y);
+      ctx.lineTo(width - padding, y);
+      ctx.stroke();
+    }
+    // 绘制柱状图
+    displayData.forEach((session, index) => {
+      const barHeight = (session.focus_score / maxScore) * chartHeight;
+      const x = padding + index * barWidth + barWidth * 0.1;
+      const y = height - padding - barHeight;
+      const barActualWidth = barWidth * 0.8;
+      // 根据分数设置颜色 - 使用蓝色主题
+      const score = session.focus_score;
+      let color;
+      if (score >= 0.8) color = '#4A90E2';
+      else if (score >= 0.6) color = '#5DADE2';
+      else if (score >= 0.4) color = '#85C1E9';
+      else color = '#AED6F1';
+      ctx.fillStyle = color;
+      ctx.fillRect(x, y, barActualWidth, barHeight);
+      // 绘制边框
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
+      ctx.strokeRect(x, y, barActualWidth, barHeight);
+    });
+    // 绘制图例
+    ctx.textAlign = 'left';
+    ctx.font = 'bold 14px Nunito';
+    ctx.fillStyle = '#4A90E2';
+    ctx.fillText('Focus Score by Session', padding, 30);
+  };
+  // 初始加载
+  useEffect(() => {
+    loadSessions(filter);
+  }, [filter]);
+  // 处理筛选按钮点击
+  const handleFilterClick = (filterType) => {
+    setFilter(filterType);
+  };
+  // 查看详情
+  const handleViewDetails = (sessionId) => {
+    // 这里可以实现查看详情的功能，比如弹窗显示该会话的详细信息
+    alert(`View details for session ${sessionId}\n(Feature can be extended later)`);
+  };
+  return (
+    <main id="page-d" className="page">
+      <h1 className="page-title">My Records</h1>
+      <div className="records-controls" style={{ display: 'flex', justifyContent: 'center', gap: '10px', marginBottom: '30px' }}>
+        <button
+          id="filter-today"
+          onClick={() => handleFilterClick('today')}
+          style={{
+            padding: '10px 30px',
+            borderRadius: '8px',
+            border: filter === 'today' ? 'none' : '2px solid #4A90E2',
+            background: filter === 'today' ? '#4A90E2' : 'transparent',
+            color: filter === 'today' ? 'white' : '#4A90E2',
+            fontSize: '14px',
+            fontWeight: '500',
+            cursor: 'pointer',
+            transition: 'all 0.3s'
+          }}
+        >
+          Today
+        </button>
+        <button
+          id="filter-week"
+          onClick={() => handleFilterClick('week')}
+          style={{
+            padding: '10px 30px',
+            borderRadius: '8px',
+            border: filter === 'week' ? 'none' : '2px solid #4A90E2',
+            background: filter === 'week' ? '#4A90E2' : 'transparent',
+            color: filter === 'week' ? 'white' : '#4A90E2',
+            fontSize: '14px',
+            fontWeight: '500',
+            cursor: 'pointer',
+            transition: 'all 0.3s'
+          }}
+        >
+          This Week
+        </button>
+        <button
+          id="filter-month"
+          onClick={() => handleFilterClick('month')}
+          style={{
+            padding: '10px 30px',
+            borderRadius: '8px',
+            border: filter === 'month' ? 'none' : '2px solid #4A90E2',
+            background: filter === 'month' ? '#4A90E2' : 'transparent',
+            color: filter === 'month' ? 'white' : '#4A90E2',
+            fontSize: '14px',
+            fontWeight: '500',
+            cursor: 'pointer',
+            transition: 'all 0.3s'
+          }}
+        >
+          This Month
+        </button>
+        <button
+          id="filter-all"
+          onClick={() => handleFilterClick('all')}
+          style={{
+            padding: '10px 30px',
+            borderRadius: '8px',
+            border: filter === 'all' ? 'none' : '2px solid #4A90E2',
+            background: filter === 'all' ? '#4A90E2' : 'transparent',
+            color: filter === 'all' ? 'white' : '#4A90E2',
+            fontSize: '14px',
+            fontWeight: '500',
+            cursor: 'pointer',
+            transition: 'all 0.3s'
+          }}
+        >
+          All Time
+        </button>
+      </div>
+      <div className="chart-container" style={{
+        background: 'white',
+        padding: '20px',
+        borderRadius: '10px',
+        marginBottom: '30px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+      }}>
+        <canvas ref={chartRef} id="focus-chart" style={{ width: '100%', height: '300px' }}></canvas>
+      </div>
+      <div className="sessions-list" style={{
+        background: 'white',
+        padding: '20px',
+        borderRadius: '10px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+      }}>
+        <h2 style={{ color: '#333', marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Recent Sessions</h2>
+        {loading ? (
+          <div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
+            Loading sessions...
+          </div>
+        ) : sessions.length === 0 ? (
+          <div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
+            No sessions found for this period.
+          </div>
+        ) : (
+          <table id="sessions-table" style={{ width: '100%', borderCollapse: 'collapse', borderRadius: '10px', overflow: 'hidden' }}>
+            <thead>
+              <tr style={{ background: '#4A90E2' }}>
+                <th style={{ padding: '15px', textAlign: 'left', color: 'white', fontWeight: '600', fontSize: '14px' }}>Date</th>
+                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Duration</th>
+                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Focus Score</th>
+                <th style={{ padding: '15px', textAlign: 'center', color: 'white', fontWeight: '600', fontSize: '14px' }}>Action</th>
+              </tr>
+            </thead>
+            <tbody id="sessions-tbody">
+              {sessions.map((session, index) => (
+                <tr key={session.id} style={{
+                  background: index % 2 === 0 ? '#f8f9fa' : 'white',
+                  borderBottom: '1px solid #e9ecef'
+                }}>
+                  <td style={{ padding: '15px', color: '#333', fontSize: '13px' }}>{formatDate(session.start_time)}</td>
+                  <td style={{ padding: '15px', textAlign: 'center', color: '#333', fontSize: '13px' }}>{formatDuration(session.duration_seconds)}</td>
+                  <td style={{ padding: '15px', textAlign: 'center' }}>
+                    <span
+                      style={{
+                        color:
+                          session.focus_score >= 0.8
+                            ? '#28a745'
+                            : session.focus_score >= 0.6
+                            ? '#ffc107'
+                            : session.focus_score >= 0.4
+                            ? '#fd7e14'
+                            : '#dc3545',
+                        fontWeight: '600',
+                        fontSize: '13px'
+                      }}
+                    >
+                      {(session.focus_score * 100).toFixed(1)}%
+                    </span>
+                  </td>
+                  <td style={{ padding: '15px', textAlign: 'center' }}>
+                    <button
+                      onClick={() => handleViewDetails(session.id)}
+                      style={{
+                        padding: '6px 20px',
+                        background: '#4A90E2',
+                        border: 'none',
+                        color: 'white',
+                        borderRadius: '6px',
+                        cursor: 'pointer',
+                        fontSize: '12px',
+                        fontWeight: '500',
+                        transition: 'background 0.3s'
+                      }}
+                      onMouseOver={(e) => e.target.style.background = '#357ABD'}
+                      onMouseOut={(e) => e.target.style.background = '#4A90E2'}
+                    >
+                      View
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </main>
+  );
+}
+export default Records;

src/index.css ADDED Viewed

	@@ -0,0 +1,73 @@

+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/utils/VideoManager.js ADDED Viewed

	@@ -0,0 +1,353 @@

+// src/utils/VideoManager.js
+export class VideoManager {
+    constructor(callbacks) {
+        // callbacks 用于通知 React 组件更新界面
+        // 例如: onStatusUpdate, onSessionStart, onSessionEnd
+        this.callbacks = callbacks || {};
+        this.videoElement = null; // 显示后端处理后的视频
+        this.stream = null; // 本地摄像头流
+        this.pc = null;
+        this.dataChannel = null;
+        this.isStreaming = false;
+        this.sessionId = null;
+        this.frameRate = 30;
+        // 状态平滑处理
+        this.currentStatus = false;
+        this.statusBuffer = [];
+        this.bufferSize = 5;
+        // 检测数据
+        this.latestDetectionData = null;
+        this.lastConfidence = 0;
+        this.detectionHoldMs = 30;
+        // 通知系统
+        this.notificationEnabled = true;
+        this.notificationThreshold = 30; // 默认30秒
+        this.unfocusedStartTime = null;
+        this.lastNotificationTime = null;
+        this.notificationCooldown = 60000; // 通知冷却时间60秒
+    }
+    // 初始化：获取摄像头流，并记录展示视频的元素
+    async initCamera(videoRef) {
+        try {
+            this.stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    width: { ideal: 640 },
+                    height: { ideal: 480 },
+                    facingMode: 'user'
+                },
+                audio: false
+            });
+            this.videoElement = videoRef;
+            return true;
+        } catch (error) {
+            console.error('Camera init error:', error);
+            throw error;
+        }
+    }
+    async startStreaming() {
+        if (!this.stream) {
+            console.error('❌ No stream available');
+            throw new Error('Camera stream not initialized');
+        }
+        this.isStreaming = true;
+        console.log('📹 Starting streaming...');
+        // 请求通知权限
+        await this.requestNotificationPermission();
+        // 加载通知设置
+        await this.loadNotificationSettings();
+        this.pc = new RTCPeerConnection({
+            iceServers: [
+                { urls: 'stun:stun.l.google.com:19302' },
+                { urls: 'stun:stun1.l.google.com:19302' },
+                { urls: 'stun:stun2.l.google.com:19302' },
+                { urls: 'stun:stun3.l.google.com:19302' },
+                { urls: 'stun:stun4.l.google.com:19302' }
+            ],
+            iceCandidatePoolSize: 10
+        });
+        // 添加连接状态监控
+        this.pc.onconnectionstatechange = () => {
+            console.log('🔗 Connection state:', this.pc.connectionState);
+        };
+        this.pc.oniceconnectionstatechange = () => {
+            console.log('🧊 ICE connection state:', this.pc.iceConnectionState);
+        };
+        this.pc.onicegatheringstatechange = () => {
+            console.log('📡 ICE gathering state:', this.pc.iceGatheringState);
+        };
+        // DataChannel for status updates
+        this.dataChannel = this.pc.createDataChannel('status');
+        this.dataChannel.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                this.handleServerMessage(data);
+            } catch (e) {
+                console.error('Failed to parse data channel message:', e);
+            }
+        };
+        this.pc.ontrack = (event) => {
+            const stream = event.streams[0];
+            if (this.videoElement) {
+                this.videoElement.srcObject = stream;
+                this.videoElement.autoplay = true;
+                this.videoElement.playsInline = true;
+                this.videoElement.play().catch(() => {});
+            }
+        };
+        // Add local camera tracks
+        this.stream.getTracks().forEach((track) => {
+            this.pc.addTrack(track, this.stream);
+        });
+        const offer = await this.pc.createOffer();
+        await this.pc.setLocalDescription(offer);
+        // Wait for ICE gathering to complete so SDP includes candidates
+        await new Promise((resolve) => {
+            if (this.pc.iceGatheringState === 'complete') {
+                resolve();
+                return;
+            }
+            const onIce = () => {
+                if (this.pc.iceGatheringState === 'complete') {
+                    this.pc.removeEventListener('icegatheringstatechange', onIce);
+                    resolve();
+                }
+            };
+            this.pc.addEventListener('icegatheringstatechange', onIce);
+        });
+        console.log('📤 Sending offer to server...');
+        const response = await fetch('/api/webrtc/offer', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                sdp: this.pc.localDescription.sdp,
+                type: this.pc.localDescription.type
+            })
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            console.error('❌ Server error:', errorText);
+            throw new Error(`Server returned ${response.status}: ${errorText}`);
+        }
+        const answer = await response.json();
+        console.log('✅ Received answer from server, session_id:', answer.session_id);
+        await this.pc.setRemoteDescription(answer);
+        console.log('✅ Remote description set successfully');
+        this.sessionId = answer.session_id;
+        if (this.callbacks.onSessionStart) {
+            this.callbacks.onSessionStart(this.sessionId);
+        }
+    }
+    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
+                });
+                // 3秒后自动关闭
+                setTimeout(() => notification.close(), 3000);
+            } catch (error) {
+                console.error('Failed to send notification:', error);
+            }
+        }
+    }
+    handleServerMessage(data) {
+        switch (data.type) {
+            case 'detection':
+                this.updateStatus(data.focused);
+                this.latestDetectionData = {
+                    detections: data.detections || [],
+                    confidence: data.confidence || 0,
+                    focused: data.focused,
+                    timestamp: performance.now()
+                };
+                this.lastConfidence = data.confidence || 0;
+                if (this.callbacks.onStatusUpdate) {
+                    this.callbacks.onStatusUpdate(this.currentStatus);
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    updateStatus(newFocused) {
+        this.statusBuffer.push(newFocused);
+        if (this.statusBuffer.length > this.bufferSize) {
+            this.statusBuffer.shift();
+        }
+        if (this.statusBuffer.length < this.bufferSize) return false;
+        const focusedCount = this.statusBuffer.filter(f => f).length;
+        const focusedRatio = focusedCount / this.statusBuffer.length;
+        const previousStatus = this.currentStatus;
+        if (focusedRatio >= 0.75) {
+            this.currentStatus = true;
+        } else if (focusedRatio <= 0.25) {
+            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 stopStreaming() {
+        this.isStreaming = false;
+        try {
+            if (document.pictureInPictureElement) {
+                await document.exitPictureInPicture();
+            }
+            if (this.videoElement && typeof this.videoElement.webkitSetPresentationMode === 'function') {
+                if (this.videoElement.webkitPresentationMode === 'picture-in-picture') {
+                    this.videoElement.webkitSetPresentationMode('inline');
+                }
+            }
+        } catch (e) {
+            // ignore PiP exit errors
+        }
+        if (this.pc) {
+            try {
+                this.pc.getSenders().forEach(sender => sender.track && sender.track.stop());
+                this.pc.close();
+            } catch (e) {
+                console.error('Failed to close RTCPeerConnection:', e);
+            }
+            this.pc = null;
+        }
+        if (this.stream) {
+            this.stream.getTracks().forEach(track => track.stop());
+            this.stream = null;
+        }
+        if (this.videoElement) {
+            this.videoElement.srcObject = null;
+        }
+        if (this.sessionId) {
+            try {
+                const response = await fetch('/api/sessions/end', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ session_id: this.sessionId })
+                });
+                const summary = await response.json();
+                if (this.callbacks.onSessionEnd) {
+                    this.callbacks.onSessionEnd(summary);
+                }
+            } catch (e) {
+                console.error('Failed to end session:', e);
+            }
+        }
+        // 清理通知状态
+        this.unfocusedStartTime = null;
+        this.lastNotificationTime = null;
+        this.sessionId = null;
+    }
+    setFrameRate(rate) {
+        this.frameRate = Math.max(1, Math.min(60, rate));
+        if (this.stream) {
+            const videoTrack = this.stream.getVideoTracks()[0];
+            if (videoTrack && videoTrack.applyConstraints) {
+                videoTrack.applyConstraints({ frameRate: { ideal: this.frameRate, max: this.frameRate } }).catch(() => {});
+            }
+        }
+    }
+}

src/utils/VideoManagerLocal.js ADDED Viewed

	@@ -0,0 +1,497 @@

+// src/utils/VideoManagerLocal.js
+// 本地视频处理版本 - 使用 WebSocket + Canvas，不依赖 WebRTC
+export class VideoManagerLocal {
+    constructor(callbacks) {
+        this.callbacks = callbacks || {};
+        this.localVideoElement = null;  // 显示本地摄像头
+        this.displayVideoElement = null; // 显示处理后的视频
+        this.canvas = null;
+        this.stream = null;
+        this.ws = null;
+        this.isStreaming = false;
+        this.sessionId = null;
+        this.sessionStartTime = null;
+        this.frameRate = 15; // 降低帧率以减少网络负载
+        this.captureInterval = null;
+        // 状态平滑处理
+        this.currentStatus = false;
+        this.statusBuffer = [];
+        this.bufferSize = 3;
+        // 检测数据
+        this.latestDetectionData = null;
+        this.lastConfidence = 0;
+        // 通知系统
+        this.notificationEnabled = true;
+        this.notificationThreshold = 30;
+        this.unfocusedStartTime = null;
+        this.lastNotificationTime = null;
+        this.notificationCooldown = 60000;
+        // 性能统计
+        this.stats = {
+            framesSent: 0,
+            framesProcessed: 0,
+            avgLatency: 0,
+            lastLatencies: []
+        };
+    }
+    // 初始化摄像头
+    async initCamera(localVideoRef, displayCanvasRef) {
+        try {
+            console.log('Initializing local camera...');
+            this.stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    width: { ideal: 640 },
+                    height: { ideal: 480 },
+                    facingMode: 'user'
+                },
+                audio: false
+            });
+            this.localVideoElement = localVideoRef;
+            this.displayCanvas = displayCanvasRef;
+            // 显示本地视频流
+            if (this.localVideoElement) {
+                this.localVideoElement.srcObject = this.stream;
+                this.localVideoElement.play();
+            }
+            // 创建用于截图的 canvas
+            this.canvas = document.createElement('canvas');
+            this.canvas.width = 640;
+            this.canvas.height = 480;
+            console.log('Local camera initialized');
+            return true;
+        } catch (error) {
+            console.error('Camera init error:', error);
+            throw error;
+        }
+    }
+    // 开始流式处理
+    async startStreaming() {
+        if (!this.stream) {
+            throw new Error('Camera not initialized');
+        }
+        if (this.isStreaming) {
+            console.warn('Already streaming');
+            return;
+        }
+        console.log('Starting WebSocket streaming...');
+        this.isStreaming = true;
+        // 请求通知权限
+        await this.requestNotificationPermission();
+        await this.loadNotificationSettings();
+        // 建立 WebSocket 连接
+        await this.connectWebSocket();
+        // 开始定期截图并发送
+        this.startCapture();
+        console.log('Streaming started');
+    }
+    // 建立 WebSocket 连接
+    async connectWebSocket() {
+        return new Promise((resolve, reject) => {
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsUrl = `${protocol}//${window.location.host}/ws/video`;
+            console.log('Connecting to WebSocket:', wsUrl);
+            this.ws = new WebSocket(wsUrl);
+            this.ws.onopen = () => {
+                console.log('WebSocket connected');
+                // 发送开始会话请求
+                this.ws.send(JSON.stringify({ type: 'start_session' }));
+                resolve();
+            };
+            this.ws.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    this.handleServerMessage(data);
+                } catch (e) {
+                    console.error('Failed to parse message:', e);
+                }
+            };
+            this.ws.onerror = (error) => {
+                console.error('WebSocket error:', error);
+                reject(error);
+            };
+            this.ws.onclose = () => {
+                console.log('WebSocket disconnected');
+                if (this.isStreaming) {
+                    console.log('Attempting to reconnect...');
+                    setTimeout(() => this.connectWebSocket(), 2000);
+                }
+            };
+        });
+    }
+    // 开始截图并发送
+    startCapture() {
+        const interval = 1000 / this.frameRate; // 转换为毫秒
+        this.captureInterval = setInterval(() => {
+            if (!this.isStreaming || !this.ws || this.ws.readyState !== WebSocket.OPEN) {
+                return;
+            }
+            try {
+                // 从视频流截取一帧
+                const ctx = this.canvas.getContext('2d');
+                ctx.drawImage(this.localVideoElement, 0, 0, this.canvas.width, this.canvas.height);
+                // 转换为 JPEG base64（压缩质量 0.8）
+                const imageData = this.canvas.toDataURL('image/jpeg', 0.8);
+                const base64Data = imageData.split(',')[1];
+                // 发送到服务器
+                const timestamp = Date.now();
+                this.ws.send(JSON.stringify({
+                    type: 'frame',
+                    image: base64Data,
+                    timestamp: timestamp
+                }));
+                this.stats.framesSent++;
+            } catch (error) {
+                console.error('Capture error:', error);
+            }
+        }, interval);
+        console.log(`Capturing at ${this.frameRate} FPS`);
+    }
+    // 处理服务器消息
+    handleServerMessage(data) {
+        switch (data.type) {
+            case 'session_started':
+                this.sessionId = data.session_id;
+                this.sessionStartTime = Date.now();
+                console.log('Session started:', this.sessionId);
+                if (this.callbacks.onSessionStart) {
+                    this.callbacks.onSessionStart(this.sessionId);
+                }
+                break;
+            case 'detection':
+                this.stats.framesProcessed++;
+                // 计算延迟
+                if (data.timestamp) {
+                    const latency = Date.now() - data.timestamp;
+                    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;
+                }
+                // 更新状态
+                this.updateStatus(data.focused);
+                this.latestDetectionData = {
+                    detections: data.detections || [],
+                    confidence: data.confidence || 0,
+                    focused: data.focused,
+                    timestamp: performance.now()
+                };
+                this.lastConfidence = data.confidence || 0;
+                if (this.callbacks.onStatusUpdate) {
+                    this.callbacks.onStatusUpdate(this.currentStatus);
+                }
+                // 在 display canvas 上绘制结果
+                this.drawDetectionResult(data);
+                break;
+            case 'session_ended':
+                console.log('Received session_ended message');
+                console.log('Session summary:', data.summary);
+                if (this.callbacks.onSessionEnd) {
+                    console.log('Calling onSessionEnd callback');
+                    this.callbacks.onSessionEnd(data.summary);
+                } else {
+                    console.warn('No onSessionEnd callback registered');
+                }
+                this.sessionId = null;
+                this.sessionStartTime = null;
+                break;
+            case 'error':
+                console.error('Server error:', data.message);
+                break;
+            default:
+                console.log('Unknown message type:', data.type);
+        }
+    }
+    // 在 canvas 上绘制检测结果
+    drawDetectionResult(data) {
+        if (!this.displayCanvas) return;
+        const ctx = this.displayCanvas.getContext('2d');
+        // 绘制当前帧
+        ctx.drawImage(this.localVideoElement, 0, 0, this.displayCanvas.width, this.displayCanvas.height);
+        // 绘制检测框
+        if (data.detections && data.detections.length > 0) {
+            data.detections.forEach(det => {
+                const [x1, y1, x2, y2] = det.bbox;
+                const color = data.focused ? '#00FF00' : '#FF0000';
+                // 绘制边框
+                ctx.strokeStyle = color;
+                ctx.lineWidth = 3;
+                ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+                // 绘制标签
+                const label = `${det.class_name || 'person'} ${(det.confidence * 100).toFixed(1)}%`;
+                ctx.fillStyle = color;
+                ctx.font = '16px Arial';
+                ctx.fillText(label, x1, Math.max(20, y1 - 5));
+            });
+        }
+        // 绘制状态文字
+        const statusText = data.focused ? 'FOCUSED' : 'NOT FOCUSED';
+        const color = data.focused ? '#00FF00' : '#FF0000';
+        ctx.fillStyle = color;
+        ctx.font = 'bold 24px Arial';
+        ctx.fillText(statusText, 10, 30);
+        ctx.font = '16px Arial';
+        ctx.fillText(`Confidence: ${(data.confidence * 100).toFixed(1)}%`, 10, 55);
+        // 显示性能统计
+        ctx.font = '12px Arial';
+        ctx.fillStyle = '#FFFFFF';
+        ctx.fillText(`FPS: ${this.frameRate} | Latency: ${this.stats.avgLatency.toFixed(0)}ms`, 10, this.displayCanvas.height - 10);
+    }
+    updateStatus(newFocused) {
+        this.statusBuffer.push(newFocused);
+        if (this.statusBuffer.length > this.bufferSize) {
+            this.statusBuffer.shift();
+        }
+        if (this.statusBuffer.length < this.bufferSize) return false;
+        const focusedCount = this.statusBuffer.filter(f => f).length;
+        const focusedRatio = focusedCount / this.statusBuffer.length;
+        const previousStatus = this.currentStatus;
+        if (focusedRatio >= 0.75) {
+            this.currentStatus = true;
+        } else if (focusedRatio <= 0.25) {
+            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() {
+        console.log('Stopping streaming...');
+        this.isStreaming = false;
+        // 停止截图
+        if (this.captureInterval) {
+            clearInterval(this.captureInterval);
+            this.captureInterval = null;
+        }
+        // 发送结束会话请求并等待响应
+        if (this.ws && this.ws.readyState === WebSocket.OPEN && this.sessionId) {
+            const sessionId = this.sessionId;
+            // 等待 session_ended 消息
+            const waitForSessionEnd = new Promise((resolve) => {
+                const originalHandler = this.ws.onmessage;
+                const timeout = setTimeout(() => {
+                    this.ws.onmessage = originalHandler;
+                    console.log('Session end timeout, proceeding anyway');
+                    resolve();
+                }, 2000);
+                this.ws.onmessage = (event) => {
+                    try {
+                        const data = JSON.parse(event.data);
+                        if (data.type === 'session_ended') {
+                            clearTimeout(timeout);
+                            this.handleServerMessage(data);
+                            this.ws.onmessage = originalHandler;
+                            resolve();
+                        } else {
+                            // 仍然处理其他消息
+                            this.handleServerMessage(data);
+                        }
+                    } catch (e) {
+                        console.error('Failed to parse message:', e);
+                    }
+                };
+            });
+            console.log('Sending end_session request for session:', sessionId);
+            this.ws.send(JSON.stringify({
+                type: 'end_session',
+                session_id: sessionId
+            }));
+            // 等待响应或超时
+            await waitForSessionEnd;
+        }
+        // 延迟关闭 WebSocket 确保消息发送完成
+        await new Promise(resolve => setTimeout(resolve, 200));
+        // 关闭 WebSocket
+        if (this.ws) {
+            this.ws.close();
+            this.ws = null;
+        }
+        // 停止摄像头
+        if (this.stream) {
+            this.stream.getTracks().forEach(track => track.stop());
+            this.stream = null;
+        }
+        // 清空视频
+        if (this.localVideoElement) {
+            this.localVideoElement.srcObject = null;
+        }
+        // 清空 canvas
+        if (this.displayCanvas) {
+            const ctx = this.displayCanvas.getContext('2d');
+            ctx.clearRect(0, 0, this.displayCanvas.width, this.displayCanvas.height);
+        }
+        // 清理状态
+        this.unfocusedStartTime = null;
+        this.lastNotificationTime = null;
+        console.log('Streaming stopped');
+        console.log('Stats:', this.stats);
+    }
+    setFrameRate(rate) {
+        this.frameRate = Math.max(1, Math.min(30, rate));
+        console.log(`Frame rate set to ${this.frameRate} FPS`);
+        // 重启截图（如果正在运行）
+        if (this.isStreaming && this.captureInterval) {
+            clearInterval(this.captureInterval);
+            this.startCapture();
+        }
+    }
+    getStats() {
+        return {
+            ...this.stats,
+            isStreaming: this.isStreaming,
+            sessionId: this.sessionId,
+            currentStatus: this.currentStatus,
+            lastConfidence: this.lastConfidence
+        };
+    }
+}

ui/live_demo.py ADDED Viewed

	@@ -0,0 +1,303 @@

+import argparse
+import os
+import sys
+import time
+import cv2
+import numpy as np
+from mediapipe.tasks.python.vision import FaceLandmarksConnections
+_PROJECT_ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+if _PROJECT_ROOT not in sys.path:
+    sys.path.insert(0, _PROJECT_ROOT)
+from ui.pipeline import (
+    FaceMeshPipeline, MLPPipeline, HybridFocusPipeline, GRUPipeline,
+    _load_gru_artifacts, _latest_model_artifacts,
+)
+from models.face_mesh import FaceMeshDetector
+FONT = cv2.FONT_HERSHEY_SIMPLEX
+CYAN = (255, 255, 0)
+GREEN = (0, 255, 0)
+MAGENTA = (255, 0, 255)
+ORANGE = (0, 165, 255)
+RED = (0, 0, 255)
+WHITE = (255, 255, 255)
+YELLOW = (0, 255, 255)
+LIGHT_GREEN = (144, 238, 144)
+_TESSELATION = [(c.start, c.end) for c in FaceLandmarksConnections.FACE_LANDMARKS_TESSELATION]
+_CONTOURS = [(c.start, c.end) for c in FaceLandmarksConnections.FACE_LANDMARKS_CONTOURS]
+_LEFT_EYEBROW = [70, 63, 105, 66, 107, 55, 65, 52, 53, 46]
+_RIGHT_EYEBROW = [300, 293, 334, 296, 336, 285, 295, 282, 283, 276]
+_NOSE_BRIDGE = [6, 197, 195, 5, 4, 1, 19, 94, 2]
+_LIPS_OUTER = [61, 146, 91, 181, 84, 17, 314, 405, 321, 375, 291, 409, 270, 269, 267, 0, 37, 39, 40, 185, 61]
+_LIPS_INNER = [78, 95, 88, 178, 87, 14, 317, 402, 318, 324, 308, 415, 310, 311, 312, 13, 82, 81, 80, 191, 78]
+_LEFT_EAR_POINTS = [33, 160, 158, 133, 153, 145]
+_RIGHT_EAR_POINTS = [362, 385, 387, 263, 373, 380]
+MESH_FULL = 0
+MESH_CONTOURS = 1
+MESH_OFF = 2
+_MESH_NAMES = ["FULL MESH", "CONTOURS", "MESH OFF"]
+MODE_GEO = 0
+MODE_MLP = 1
+MODE_GRU = 2
+MODE_HYBRID = 3
+_MODE_NAMES = ["GEOMETRIC", "MLP", "GRU", "HYBRID"]
+_MODE_KEYS = {ord("1"): MODE_GEO, ord("2"): MODE_MLP, ord("3"): MODE_GRU, ord("4"): MODE_HYBRID}
+def _lm_to_px(landmarks, idx, w, h):
+    return (int(landmarks[idx, 0] * w), int(landmarks[idx, 1] * h))
+def draw_tessellation(frame, landmarks, w, h):
+    overlay = frame.copy()
+    for conn in _TESSELATION:
+        pt1 = _lm_to_px(landmarks, conn[0], w, h)
+        pt2 = _lm_to_px(landmarks, conn[1], w, h)
+        cv2.line(overlay, pt1, pt2, (200, 200, 200), 1, cv2.LINE_AA)
+    cv2.addWeighted(overlay, 0.3, frame, 0.7, 0, frame)
+def draw_contours(frame, landmarks, w, h):
+    for conn in _CONTOURS:
+        pt1 = _lm_to_px(landmarks, conn[0], w, h)
+        pt2 = _lm_to_px(landmarks, conn[1], w, h)
+        cv2.line(frame, pt1, pt2, CYAN, 1, cv2.LINE_AA)
+    for indices in [_LEFT_EYEBROW, _RIGHT_EYEBROW]:
+        for i in range(len(indices) - 1):
+            pt1 = _lm_to_px(landmarks, indices[i], w, h)
+            pt2 = _lm_to_px(landmarks, indices[i + 1], w, h)
+            cv2.line(frame, pt1, pt2, LIGHT_GREEN, 2, cv2.LINE_AA)
+    for i in range(len(_NOSE_BRIDGE) - 1):
+        pt1 = _lm_to_px(landmarks, _NOSE_BRIDGE[i], w, h)
+        pt2 = _lm_to_px(landmarks, _NOSE_BRIDGE[i + 1], w, h)
+        cv2.line(frame, pt1, pt2, ORANGE, 1, cv2.LINE_AA)
+    for i in range(len(_LIPS_OUTER) - 1):
+        pt1 = _lm_to_px(landmarks, _LIPS_OUTER[i], w, h)
+        pt2 = _lm_to_px(landmarks, _LIPS_OUTER[i + 1], w, h)
+        cv2.line(frame, pt1, pt2, MAGENTA, 1, cv2.LINE_AA)
+    for i in range(len(_LIPS_INNER) - 1):
+        pt1 = _lm_to_px(landmarks, _LIPS_INNER[i], w, h)
+        pt2 = _lm_to_px(landmarks, _LIPS_INNER[i + 1], w, h)
+        cv2.line(frame, pt1, pt2, (200, 0, 200), 1, cv2.LINE_AA)
+def draw_eyes_and_irises(frame, landmarks, w, h):
+    left_pts = np.array(
+        [_lm_to_px(landmarks, i, w, h) for i in FaceMeshDetector.LEFT_EYE_INDICES],
+        dtype=np.int32,
+    )
+    cv2.polylines(frame, [left_pts], True, GREEN, 2, cv2.LINE_AA)
+    right_pts = np.array(
+        [_lm_to_px(landmarks, i, w, h) for i in FaceMeshDetector.RIGHT_EYE_INDICES],
+        dtype=np.int32,
+    )
+    cv2.polylines(frame, [right_pts], True, GREEN, 2, cv2.LINE_AA)
+    for indices in [_LEFT_EAR_POINTS, _RIGHT_EAR_POINTS]:
+        for idx in indices:
+            pt = _lm_to_px(landmarks, idx, w, h)
+            cv2.circle(frame, pt, 3, YELLOW, -1, cv2.LINE_AA)
+    for iris_indices, eye_inner, eye_outer in [
+        (FaceMeshDetector.LEFT_IRIS_INDICES, 133, 33),
+        (FaceMeshDetector.RIGHT_IRIS_INDICES, 362, 263),
+    ]:
+        iris_pts = np.array(
+            [_lm_to_px(landmarks, i, w, h) for i in iris_indices],
+            dtype=np.int32,
+        )
+        center = iris_pts[0]
+        if len(iris_pts) >= 5:
+            radii = [np.linalg.norm(iris_pts[j] - center) for j in range(1, 5)]
+            radius = max(int(np.mean(radii)), 2)
+            cv2.circle(frame, tuple(center), radius, MAGENTA, 2, cv2.LINE_AA)
+            cv2.circle(frame, tuple(center), 2, WHITE, -1, cv2.LINE_AA)
+        eye_center_x = (landmarks[eye_inner, 0] + landmarks[eye_outer, 0]) / 2.0
+        eye_center_y = (landmarks[eye_inner, 1] + landmarks[eye_outer, 1]) / 2.0
+        eye_center = (int(eye_center_x * w), int(eye_center_y * h))
+        dx = center[0] - eye_center[0]
+        dy = center[1] - eye_center[1]
+        gaze_end = (int(center[0] + dx * 3), int(center[1] + dy * 3))
+        cv2.line(frame, tuple(center), gaze_end, RED, 1, cv2.LINE_AA)
+def main():
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--camera", type=int, default=0)
+    parser.add_argument("--mlp-dir", type=str, default=None)
+    parser.add_argument("--max-angle", type=float, default=22.0)
+    parser.add_argument("--eye-model", type=str, default=None)
+    parser.add_argument("--eye-backend", type=str, default="yolo", choices=["yolo", "geometric"])
+    parser.add_argument("--eye-blend", type=float, default=0.5)
+    args = parser.parse_args()
+    model_dir = args.mlp_dir or os.path.join(_PROJECT_ROOT, "checkpoints")
+    detector = FaceMeshDetector()
+    pipelines = {}
+    available_modes = []
+    pipelines[MODE_GEO] = FaceMeshPipeline(
+        max_angle=args.max_angle,
+        eye_model_path=args.eye_model,
+        eye_backend=args.eye_backend,
+        eye_blend=args.eye_blend,
+        detector=detector,
+    )
+    available_modes.append(MODE_GEO)
+    mlp_path, _, _ = _latest_model_artifacts(model_dir)
+    if mlp_path is not None:
+        try:
+            pipelines[MODE_MLP] = MLPPipeline(model_dir=model_dir, detector=detector)
+            available_modes.append(MODE_MLP)
+        except Exception as e:
+            print(f"[DEMO] MLP unavailable: {e}")
+        try:
+            pipelines[MODE_HYBRID] = HybridFocusPipeline(
+                model_dir=model_dir,
+                eye_model_path=args.eye_model,
+                eye_backend=args.eye_backend,
+                eye_blend=args.eye_blend,
+                max_angle=args.max_angle,
+                detector=detector,
+            )
+            available_modes.append(MODE_HYBRID)
+        except Exception as e:
+            print(f"[DEMO] Hybrid unavailable: {e}")
+    gru_arts = _load_gru_artifacts(model_dir)
+    if gru_arts[0] is not None:
+        try:
+            pipelines[MODE_GRU] = GRUPipeline(model_dir=model_dir, detector=detector)
+            available_modes.append(MODE_GRU)
+        except Exception as e:
+            print(f"[DEMO] GRU unavailable: {e}")
+    current_mode = available_modes[0]
+    pipeline = pipelines[current_mode]
+    cap = cv2.VideoCapture(args.camera)
+    if not cap.isOpened():
+        print("[DEMO] ERROR: Cannot open camera")
+        return
+    mode_hint = "  ".join(f"{k+1}:{_MODE_NAMES[k]}" for k in available_modes)
+    print(f"[DEMO] Available modes: {mode_hint}")
+    print(f"[DEMO] Active: {_MODE_NAMES[current_mode]}")
+    print("[DEMO] q=quit  m=mesh  1-4=switch mode")
+    prev_time = time.time()
+    fps = 0.0
+    mesh_mode = MESH_FULL
+    try:
+        while True:
+            ret, frame = cap.read()
+            if not ret:
+                break
+            result = pipeline.process_frame(frame)
+            now = time.time()
+            fps = 0.9 * fps + 0.1 * (1.0 / max(now - prev_time, 1e-6))
+            prev_time = now
+            h, w = frame.shape[:2]
+            lm = result["landmarks"]
+            if lm is not None:
+                if mesh_mode == MESH_FULL:
+                    draw_tessellation(frame, lm, w, h)
+                    draw_contours(frame, lm, w, h)
+                elif mesh_mode == MESH_CONTOURS:
+                    draw_contours(frame, lm, w, h)
+                draw_eyes_and_irises(frame, lm, w, h)
+                if hasattr(pipeline, "head_pose"):
+                    pipeline.head_pose.draw_axes(frame, lm)
+                if result.get("left_bbox") and result.get("right_bbox"):
+                    lx1, ly1, lx2, ly2 = result["left_bbox"]
+                    rx1, ry1, rx2, ry2 = result["right_bbox"]
+                    cv2.rectangle(frame, (lx1, ly1), (lx2, ly2), YELLOW, 1)
+                    cv2.rectangle(frame, (rx1, ry1), (rx2, ry2), YELLOW, 1)
+            # --- HUD ---
+            status = "FOCUSED" if result["is_focused"] else "NOT FOCUSED"
+            status_color = GREEN if result["is_focused"] else RED
+            cv2.rectangle(frame, (0, 0), (w, 55), (0, 0, 0), -1)
+            cv2.putText(frame, status, (10, 28), FONT, 0.8, status_color, 2, cv2.LINE_AA)
+            mode_label = _MODE_NAMES[current_mode]
+            cv2.putText(frame, f"{mode_label}  {_MESH_NAMES[mesh_mode]}  FPS:{fps:.0f}",
+                        (w - 340, 28), FONT, 0.45, WHITE, 1, cv2.LINE_AA)
+            detail = ""
+            if current_mode == MODE_GEO:
+                sf = result.get("s_face", 0)
+                se = result.get("s_eye", 0)
+                rs = result.get("raw_score", 0)
+                mar_s = f" MAR:{result['mar']:.2f}" if result.get("mar") is not None else ""
+                detail = f"S_face:{sf:.2f} S_eye:{se:.2f}{mar_s} score:{rs:.2f}"
+            elif current_mode == MODE_MLP:
+                mp = result.get("mlp_prob", 0)
+                rs = result.get("raw_score", 0)
+                mar_s = f" MAR:{result['mar']:.2f}" if result.get("mar") is not None else ""
+                detail = f"mlp_prob:{mp:.2f} score:{rs:.2f}{mar_s}"
+            elif current_mode == MODE_GRU:
+                gp = result.get("gru_prob", 0)
+                rs = result.get("raw_score", 0)
+                mar_s = f" MAR:{result['mar']:.2f}" if result.get("mar") is not None else ""
+                detail = f"gru_prob:{gp:.2f} score:{rs:.2f}{mar_s}"
+            elif current_mode == MODE_HYBRID:
+                mp = result.get("mlp_prob", 0)
+                gs = result.get("geo_score", 0)
+                fs = result.get("focus_score", 0)
+                mar_s = f" MAR:{result['mar']:.2f}" if result.get("mar") is not None else ""
+                detail = f"focus:{fs:.2f} mlp:{mp:.2f} geo:{gs:.2f}{mar_s}"
+            cv2.putText(frame, detail, (10, 48), FONT, 0.45, WHITE, 1, cv2.LINE_AA)
+            if result.get("is_yawning"):
+                cv2.putText(frame, "YAWN", (10, 75), FONT, 0.7, ORANGE, 2, cv2.LINE_AA)
+            if result.get("yaw") is not None:
+                cv2.putText(
+                    frame,
+                    f"yaw:{result['yaw']:+.0f} pitch:{result['pitch']:+.0f} roll:{result['roll']:+.0f}",
+                    (w - 280, 48), FONT, 0.4, (180, 180, 180), 1, cv2.LINE_AA,
+                )
+            cv2.putText(frame, f"q:quit  m:mesh  {mode_hint}",
+                        (10, h - 10), FONT, 0.35, (150, 150, 150), 1, cv2.LINE_AA)
+            cv2.imshow("FocusGuard", frame)
+            key = cv2.waitKey(1) & 0xFF
+            if key == ord("q"):
+                break
+            elif key == ord("m"):
+                mesh_mode = (mesh_mode + 1) % 3
+                print(f"[DEMO] Mesh: {_MESH_NAMES[mesh_mode]}")
+            elif key in _MODE_KEYS:
+                requested = _MODE_KEYS[key]
+                if requested in pipelines:
+                    current_mode = requested
+                    pipeline = pipelines[current_mode]
+                    print(f"[DEMO] Switched to {_MODE_NAMES[current_mode]}")
+                else:
+                    print(f"[DEMO] {_MODE_NAMES[requested]} not available (no checkpoint)")
+    finally:
+        cap.release()
+        cv2.destroyAllWindows()
+        for p in pipelines.values():
+            p.close()
+        detector.close()
+        print("[DEMO] Done")
+if __name__ == "__main__":
+    main()

ui/pipeline.py ADDED Viewed

	@@ -0,0 +1,700 @@

+import collections
+import glob
+import json
+import math
+import os
+import sys
+import numpy as np
+import joblib
+_PROJECT_ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+if _PROJECT_ROOT not in sys.path:
+    sys.path.insert(0, _PROJECT_ROOT)
+from models.face_mesh import FaceMeshDetector
+from models.head_pose import HeadPoseEstimator
+from models.eye_scorer import EyeBehaviourScorer, compute_mar, MAR_YAWN_THRESHOLD
+from models.eye_crop import extract_eye_crops
+from models.eye_classifier import load_eye_classifier, GeometricOnlyClassifier
+from models.collect_features import FEATURE_NAMES, TemporalTracker, extract_features
+_FEAT_IDX = {name: i for i, name in enumerate(FEATURE_NAMES)}
+def _clip_features(vec):
+    """Clip raw features to the same ranges used during training."""
+    out = vec.copy()
+    _i = _FEAT_IDX
+    out[_i["yaw"]] = np.clip(out[_i["yaw"]], -45, 45)
+    out[_i["pitch"]] = np.clip(out[_i["pitch"]], -30, 30)
+    out[_i["roll"]] = np.clip(out[_i["roll"]], -30, 30)
+    out[_i["head_deviation"]] = math.sqrt(
+        float(out[_i["yaw"]]) ** 2 + float(out[_i["pitch"]]) ** 2
+    )
+    for f in ("ear_left", "ear_right", "ear_avg"):
+        out[_i[f]] = np.clip(out[_i[f]], 0, 0.85)
+    out[_i["mar"]] = np.clip(out[_i["mar"]], 0, 1.0)
+    out[_i["gaze_offset"]] = np.clip(out[_i["gaze_offset"]], 0, 0.50)
+    out[_i["perclos"]] = np.clip(out[_i["perclos"]], 0, 0.80)
+    out[_i["blink_rate"]] = np.clip(out[_i["blink_rate"]], 0, 30.0)
+    out[_i["closure_duration"]] = np.clip(out[_i["closure_duration"]], 0, 10.0)
+    out[_i["yawn_duration"]] = np.clip(out[_i["yawn_duration"]], 0, 10.0)
+    return out
+class _OutputSmoother:
+    """EMA smoothing on focus score with no-face grace period."""
+    def __init__(self, alpha: float = 0.3, grace_frames: int = 15):
+        self._alpha = alpha
+        self._grace = grace_frames
+        self._score = 0.5
+        self._no_face = 0
+    def update(self, raw_score: float, face_detected: bool) -> float:
+        if face_detected:
+            self._no_face = 0
+            self._score += self._alpha * (raw_score - self._score)
+        else:
+            self._no_face += 1
+            if self._no_face > self._grace:
+                self._score *= 0.85
+        return self._score
+DEFAULT_HYBRID_CONFIG = {
+    "w_mlp": 0.7,
+    "w_geo": 0.3,
+    "threshold": 0.55,
+    "use_yawn_veto": True,
+    "geo_face_weight": 0.4,
+    "geo_eye_weight": 0.6,
+    "mar_yawn_threshold": float(MAR_YAWN_THRESHOLD),
+}
+class _RuntimeFeatureEngine:
+    """Runtime feature engineering (magnitudes, velocities, variances) with EMA baselines."""
+    _MAG_FEATURES = ["pitch", "yaw", "head_deviation", "gaze_offset", "v_gaze", "h_gaze"]
+    _VEL_FEATURES = ["pitch", "yaw", "h_gaze", "v_gaze", "head_deviation", "gaze_offset"]
+    _VAR_FEATURES = ["h_gaze", "v_gaze", "pitch"]
+    _VAR_WINDOW = 30
+    _WARMUP = 15
+    def __init__(self, base_feature_names, norm_features=None):
+        self._base_names = list(base_feature_names)
+        self._norm_features = list(norm_features) if norm_features else []
+        tracked = set(self._MAG_FEATURES) | set(self._norm_features)
+        self._ema_mean = {f: 0.0 for f in tracked}
+        self._ema_var = {f: 1.0 for f in tracked}
+        self._n = 0
+        self._prev = None
+        self._var_bufs = {
+            f: collections.deque(maxlen=self._VAR_WINDOW) for f in self._VAR_FEATURES
+        }
+        self._ext_names = (
+            list(self._base_names)
+            + [f"{f}_mag" for f in self._MAG_FEATURES]
+            + [f"{f}_vel" for f in self._VEL_FEATURES]
+            + [f"{f}_var" for f in self._VAR_FEATURES]
+        )
+    @property
+    def extended_names(self):
+        return list(self._ext_names)
+    def transform(self, base_vec):
+        self._n += 1
+        raw = {name: float(base_vec[i]) for i, name in enumerate(self._base_names)}
+        alpha = 2.0 / (min(self._n, 120) + 1)
+        for feat in self._ema_mean:
+            if feat not in raw:
+                continue
+            v = raw[feat]
+            if self._n == 1:
+                self._ema_mean[feat] = v
+                self._ema_var[feat] = 0.0
+            else:
+                self._ema_mean[feat] += alpha * (v - self._ema_mean[feat])
+                self._ema_var[feat] += alpha * (
+                    (v - self._ema_mean[feat]) ** 2 - self._ema_var[feat]
+                )
+        out = base_vec.copy().astype(np.float32)
+        if self._n > self._WARMUP:
+            for feat in self._norm_features:
+                if feat in raw:
+                    idx = self._base_names.index(feat)
+                    std = max(math.sqrt(self._ema_var[feat]), 1e-6)
+                    out[idx] = (raw[feat] - self._ema_mean[feat]) / std
+        mag = np.zeros(len(self._MAG_FEATURES), dtype=np.float32)
+        for i, feat in enumerate(self._MAG_FEATURES):
+            if feat in raw:
+                mag[i] = abs(raw[feat] - self._ema_mean.get(feat, raw[feat]))
+        vel = np.zeros(len(self._VEL_FEATURES), dtype=np.float32)
+        if self._prev is not None:
+            for i, feat in enumerate(self._VEL_FEATURES):
+                if feat in raw and feat in self._prev:
+                    vel[i] = abs(raw[feat] - self._prev[feat])
+        self._prev = dict(raw)
+        for feat in self._VAR_FEATURES:
+            if feat in raw:
+                self._var_bufs[feat].append(raw[feat])
+        var = np.zeros(len(self._VAR_FEATURES), dtype=np.float32)
+        for i, feat in enumerate(self._VAR_FEATURES):
+            buf = self._var_bufs[feat]
+            if len(buf) >= 2:
+                arr = np.array(buf)
+                var[i] = float(arr.var())
+        return np.concatenate([out, mag, vel, var])
+class FaceMeshPipeline:
+    def __init__(
+        self,
+        max_angle: float = 22.0,
+        alpha: float = 0.4,
+        beta: float = 0.6,
+        threshold: float = 0.55,
+        eye_model_path: str | None = None,
+        eye_backend: str = "yolo",
+        eye_blend: float = 0.5,
+        detector=None,
+    ):
+        self.detector = detector or FaceMeshDetector()
+        self._owns_detector = detector is None
+        self.head_pose = HeadPoseEstimator(max_angle=max_angle)
+        self.eye_scorer = EyeBehaviourScorer()
+        self.alpha = alpha
+        self.beta = beta
+        self.threshold = threshold
+        self.eye_blend = eye_blend
+        self.eye_classifier = load_eye_classifier(
+            path=eye_model_path if eye_model_path and os.path.exists(eye_model_path) else None,
+            backend=eye_backend,
+            device="cpu",
+        )
+        self._has_eye_model = not isinstance(self.eye_classifier, GeometricOnlyClassifier)
+        if self._has_eye_model:
+            print(f"[PIPELINE] Eye model: {self.eye_classifier.name}")
+        self._smoother = _OutputSmoother()
+    def process_frame(self, bgr_frame: np.ndarray) -> dict:
+        landmarks = self.detector.process(bgr_frame)
+        h, w = bgr_frame.shape[:2]
+        out = {
+            "landmarks": landmarks,
+            "s_face": 0.0,
+            "s_eye": 0.0,
+            "raw_score": 0.0,
+            "is_focused": False,
+            "yaw": None,
+            "pitch": None,
+            "roll": None,
+            "mar": None,
+            "is_yawning": False,
+            "left_bbox": None,
+            "right_bbox": None,
+        }
+        if landmarks is None:
+            smoothed = self._smoother.update(0.0, False)
+            out["raw_score"] = smoothed
+            out["is_focused"] = smoothed >= self.threshold
+            return out
+        angles = self.head_pose.estimate(landmarks, w, h)
+        if angles is not None:
+            out["yaw"], out["pitch"], out["roll"] = angles
+        out["s_face"] = self.head_pose.score(landmarks, w, h)
+        s_eye_geo = self.eye_scorer.score(landmarks)
+        if self._has_eye_model:
+            left_crop, right_crop, left_bbox, right_bbox = extract_eye_crops(bgr_frame, landmarks)
+            out["left_bbox"] = left_bbox
+            out["right_bbox"] = right_bbox
+            s_eye_model = self.eye_classifier.predict_score([left_crop, right_crop])
+            out["s_eye"] = (1.0 - self.eye_blend) * s_eye_geo + self.eye_blend * s_eye_model
+        else:
+            out["s_eye"] = s_eye_geo
+        out["mar"] = compute_mar(landmarks)
+        out["is_yawning"] = out["mar"] > MAR_YAWN_THRESHOLD
+        raw = self.alpha * out["s_face"] + self.beta * out["s_eye"]
+        if out["is_yawning"]:
+            raw = 0.0
+        out["raw_score"] = self._smoother.update(raw, True)
+        out["is_focused"] = out["raw_score"] >= self.threshold
+        return out
+    @property
+    def has_eye_model(self) -> bool:
+        return self._has_eye_model
+    def close(self):
+        if self._owns_detector:
+            self.detector.close()
+    def __enter__(self):
+        return self
+    def __exit__(self, *args):
+        self.close()
+def _latest_model_artifacts(model_dir):
+    model_files = sorted(glob.glob(os.path.join(model_dir, "model_*.joblib")))
+    if not model_files:
+        model_files = sorted(glob.glob(os.path.join(model_dir, "mlp_*.joblib")))
+    if not model_files:
+        return None, None, None
+    basename = os.path.basename(model_files[-1])
+    for prefix in ("model_", "mlp_"):
+        if basename.startswith(prefix):
+            tag = basename[len(prefix) :].replace(".joblib", "")
+            break
+    scaler_path = os.path.join(model_dir, f"scaler_{tag}.joblib")
+    meta_path = os.path.join(model_dir, f"meta_{tag}.npz")
+    if not os.path.isfile(scaler_path) or not os.path.isfile(meta_path):
+        return None, None, None
+    return model_files[-1], scaler_path, meta_path
+def _load_hybrid_config(model_dir: str, config_path: str | None = None):
+    cfg = dict(DEFAULT_HYBRID_CONFIG)
+    resolved = config_path or os.path.join(model_dir, "hybrid_focus_config.json")
+    if not os.path.isfile(resolved):
+        print(f"[HYBRID] No config found at {resolved}; using defaults")
+        return cfg, None
+    with open(resolved, "r", encoding="utf-8") as f:
+        file_cfg = json.load(f)
+    for key in DEFAULT_HYBRID_CONFIG:
+        if key in file_cfg:
+            cfg[key] = file_cfg[key]
+    cfg["w_mlp"] = float(cfg["w_mlp"])
+    cfg["w_geo"] = float(cfg["w_geo"])
+    weight_sum = cfg["w_mlp"] + cfg["w_geo"]
+    if weight_sum <= 0:
+        raise ValueError("[HYBRID] Invalid config: w_mlp + w_geo must be > 0")
+    cfg["w_mlp"] /= weight_sum
+    cfg["w_geo"] /= weight_sum
+    cfg["threshold"] = float(cfg["threshold"])
+    cfg["use_yawn_veto"] = bool(cfg["use_yawn_veto"])
+    cfg["geo_face_weight"] = float(cfg["geo_face_weight"])
+    cfg["geo_eye_weight"] = float(cfg["geo_eye_weight"])
+    cfg["mar_yawn_threshold"] = float(cfg["mar_yawn_threshold"])
+    print(f"[HYBRID] Loaded config: {resolved}")
+    return cfg, resolved
+class MLPPipeline:
+    def __init__(self, model_dir=None, detector=None):
+        if model_dir is None:
+            model_dir = os.path.join(_PROJECT_ROOT, "checkpoints")
+        mlp_path, scaler_path, meta_path = _latest_model_artifacts(model_dir)
+        if mlp_path is None:
+            raise FileNotFoundError(f"No MLP artifacts in {model_dir}")
+        self._mlp = joblib.load(mlp_path)
+        self._scaler = joblib.load(scaler_path)
+        meta = np.load(meta_path, allow_pickle=True)
+        self._feature_names = list(meta["feature_names"])
+        norm_feats = list(meta["norm_features"]) if "norm_features" in meta else []
+        self._engine = _RuntimeFeatureEngine(FEATURE_NAMES, norm_features=norm_feats)
+        ext_names = self._engine.extended_names
+        self._indices = [ext_names.index(n) for n in self._feature_names]
+        self._detector = detector or FaceMeshDetector()
+        self._owns_detector = detector is None
+        self._head_pose = HeadPoseEstimator()
+        self.head_pose = self._head_pose
+        self._eye_scorer = EyeBehaviourScorer()
+        self._temporal = TemporalTracker()
+        self._smoother = _OutputSmoother()
+        self._threshold = 0.5
+        print(f"[MLP] Loaded {mlp_path} | {len(self._feature_names)} features")
+    def process_frame(self, bgr_frame):
+        landmarks = self._detector.process(bgr_frame)
+        h, w = bgr_frame.shape[:2]
+        out = {
+            "landmarks": landmarks,
+            "is_focused": False,
+            "s_face": 0.0,
+            "s_eye": 0.0,
+            "raw_score": 0.0,
+            "mlp_prob": 0.0,
+            "mar": None,
+            "yaw": None,
+            "pitch": None,
+            "roll": None,
+        }
+        if landmarks is None:
+            smoothed = self._smoother.update(0.0, False)
+            out["raw_score"] = smoothed
+            out["is_focused"] = smoothed >= self._threshold
+            return out
+        vec = extract_features(landmarks, w, h, self._head_pose, self._eye_scorer, self._temporal)
+        vec = _clip_features(vec)
+        out["yaw"] = float(vec[_FEAT_IDX["yaw"]])
+        out["pitch"] = float(vec[_FEAT_IDX["pitch"]])
+        out["roll"] = float(vec[_FEAT_IDX["roll"]])
+        out["s_face"] = float(vec[_FEAT_IDX["s_face"]])
+        out["s_eye"] = float(vec[_FEAT_IDX["s_eye"]])
+        out["mar"] = float(vec[_FEAT_IDX["mar"]])
+        ext_vec = self._engine.transform(vec)
+        X = ext_vec[self._indices].reshape(1, -1).astype(np.float64)
+        X_sc = self._scaler.transform(X)
+        if hasattr(self._mlp, "predict_proba"):
+            mlp_prob = float(self._mlp.predict_proba(X_sc)[0, 1])
+        else:
+            mlp_prob = float(self._mlp.predict(X_sc)[0] == 1)
+        out["mlp_prob"] = float(np.clip(mlp_prob, 0.0, 1.0))
+        out["raw_score"] = self._smoother.update(out["mlp_prob"], True)
+        out["is_focused"] = out["raw_score"] >= self._threshold
+        return out
+    def close(self):
+        if self._owns_detector:
+            self._detector.close()
+    def __enter__(self):
+        return self
+    def __exit__(self, *args):
+        self.close()
+class HybridFocusPipeline:
+    def __init__(
+        self,
+        model_dir=None,
+        config_path: str | None = None,
+        eye_model_path: str | None = None,
+        eye_backend: str = "yolo",
+        eye_blend: float = 0.5,
+        max_angle: float = 22.0,
+        detector=None,
+    ):
+        if model_dir is None:
+            model_dir = os.path.join(_PROJECT_ROOT, "checkpoints")
+        mlp_path, scaler_path, meta_path = _latest_model_artifacts(model_dir)
+        if mlp_path is None:
+            raise FileNotFoundError(f"No MLP artifacts in {model_dir}")
+        self._mlp = joblib.load(mlp_path)
+        self._scaler = joblib.load(scaler_path)
+        meta = np.load(meta_path, allow_pickle=True)
+        self._feature_names = list(meta["feature_names"])
+        norm_feats = list(meta["norm_features"]) if "norm_features" in meta else []
+        self._engine = _RuntimeFeatureEngine(FEATURE_NAMES, norm_features=norm_feats)
+        ext_names = self._engine.extended_names
+        self._indices = [ext_names.index(n) for n in self._feature_names]
+        self._cfg, self._cfg_path = _load_hybrid_config(model_dir=model_dir, config_path=config_path)
+        self._detector = detector or FaceMeshDetector()
+        self._owns_detector = detector is None
+        self._head_pose = HeadPoseEstimator(max_angle=max_angle)
+        self._eye_scorer = EyeBehaviourScorer()
+        self._temporal = TemporalTracker()
+        self._eye_blend = eye_blend
+        self.eye_classifier = load_eye_classifier(
+            path=eye_model_path if eye_model_path and os.path.exists(eye_model_path) else None,
+            backend=eye_backend,
+            device="cpu",
+        )
+        self._has_eye_model = not isinstance(self.eye_classifier, GeometricOnlyClassifier)
+        if self._has_eye_model:
+            print(f"[HYBRID] Eye model: {self.eye_classifier.name}")
+        self.head_pose = self._head_pose
+        self._smoother = _OutputSmoother()
+        print(
+            f"[HYBRID] Loaded {mlp_path} | {len(self._feature_names)} features | "
+            f"w_mlp={self._cfg['w_mlp']:.2f}, w_geo={self._cfg['w_geo']:.2f}, "
+            f"threshold={self._cfg['threshold']:.2f}"
+        )
+    @property
+    def has_eye_model(self) -> bool:
+        return self._has_eye_model
+    @property
+    def config(self) -> dict:
+        return dict(self._cfg)
+    def process_frame(self, bgr_frame: np.ndarray) -> dict:
+        landmarks = self._detector.process(bgr_frame)
+        h, w = bgr_frame.shape[:2]
+        out = {
+            "landmarks": landmarks,
+            "is_focused": False,
+            "focus_score": 0.0,
+            "mlp_prob": 0.0,
+            "geo_score": 0.0,
+            "raw_score": 0.0,
+            "s_face": 0.0,
+            "s_eye": 0.0,
+            "mar": None,
+            "is_yawning": False,
+            "yaw": None,
+            "pitch": None,
+            "roll": None,
+            "left_bbox": None,
+            "right_bbox": None,
+        }
+        if landmarks is None:
+            smoothed = self._smoother.update(0.0, False)
+            out["focus_score"] = smoothed
+            out["raw_score"] = smoothed
+            out["is_focused"] = smoothed >= self._cfg["threshold"]
+            return out
+        angles = self._head_pose.estimate(landmarks, w, h)
+        if angles is not None:
+            out["yaw"], out["pitch"], out["roll"] = angles
+        out["s_face"] = self._head_pose.score(landmarks, w, h)
+        s_eye_geo = self._eye_scorer.score(landmarks)
+        if self._has_eye_model:
+            left_crop, right_crop, left_bbox, right_bbox = extract_eye_crops(bgr_frame, landmarks)
+            out["left_bbox"] = left_bbox
+            out["right_bbox"] = right_bbox
+            s_eye_model = self.eye_classifier.predict_score([left_crop, right_crop])
+            out["s_eye"] = (1.0 - self._eye_blend) * s_eye_geo + self._eye_blend * s_eye_model
+        else:
+            out["s_eye"] = s_eye_geo
+        geo_score = (
+            self._cfg["geo_face_weight"] * out["s_face"] +
+            self._cfg["geo_eye_weight"] * out["s_eye"]
+        )
+        geo_score = float(np.clip(geo_score, 0.0, 1.0))
+        out["mar"] = compute_mar(landmarks)
+        out["is_yawning"] = out["mar"] > self._cfg["mar_yawn_threshold"]
+        if self._cfg["use_yawn_veto"] and out["is_yawning"]:
+            geo_score = 0.0
+        out["geo_score"] = geo_score
+        pre = {
+            "angles": angles,
+            "s_face": out["s_face"],
+            "s_eye": s_eye_geo,
+            "mar": out["mar"],
+        }
+        vec = extract_features(landmarks, w, h, self._head_pose, self._eye_scorer, self._temporal, _pre=pre)
+        vec = _clip_features(vec)
+        ext_vec = self._engine.transform(vec)
+        X = ext_vec[self._indices].reshape(1, -1).astype(np.float64)
+        X_sc = self._scaler.transform(X)
+        if hasattr(self._mlp, "predict_proba"):
+            mlp_prob = float(self._mlp.predict_proba(X_sc)[0, 1])
+        else:
+            mlp_prob = float(self._mlp.predict(X_sc)[0] == 1)
+        out["mlp_prob"] = float(np.clip(mlp_prob, 0.0, 1.0))
+        focus_score = self._cfg["w_mlp"] * out["mlp_prob"] + self._cfg["w_geo"] * out["geo_score"]
+        out["focus_score"] = self._smoother.update(float(np.clip(focus_score, 0.0, 1.0)), True)
+        out["raw_score"] = out["focus_score"]
+        out["is_focused"] = out["focus_score"] >= self._cfg["threshold"]
+        return out
+    def close(self):
+        if self._owns_detector:
+            self._detector.close()
+    def __enter__(self):
+        return self
+    def __exit__(self, *args):
+        self.close()
+# ---------------------------------------------------------------------------
+# GRU Pipeline
+# ---------------------------------------------------------------------------
+def _load_gru_artifacts(model_dir=None):
+    if model_dir is None:
+        model_dir = os.path.join(_PROJECT_ROOT, "checkpoints")
+    pt_path = os.path.join(model_dir, "gru_best.pt")
+    scaler_path = os.path.join(model_dir, "gru_scaler_best.npz")
+    meta_path = os.path.join(model_dir, "gru_meta_best.npz")
+    if not all(os.path.isfile(p) for p in [pt_path, scaler_path, meta_path]):
+        return None, None, None
+    return pt_path, scaler_path, meta_path
+class _AttentionGRU:
+    def __init__(self, pt_path, input_size, hidden_size=64, num_layers=2, dropout=0.3):
+        import torch
+        import torch.nn as nn
+        class _GRUNet(nn.Module):
+            def __init__(self, in_sz, h_sz, n_layers, drop):
+                super().__init__()
+                self.gru = nn.GRU(
+                    input_size=in_sz, hidden_size=h_sz,
+                    num_layers=n_layers, batch_first=True,
+                    dropout=drop if n_layers > 1 else 0.0,
+                )
+                self.classifier = nn.Sequential(
+                    nn.Dropout(drop),
+                    nn.Linear(h_sz, 32),
+                    nn.ReLU(),
+                    nn.Dropout(drop * 0.5),
+                    nn.Linear(32, 1),
+                )
+            def forward(self, x):
+                gru_out, _ = self.gru(x)
+                return self.classifier(gru_out[:, -1, :])
+        self._device = torch.device("cpu")
+        self._model = _GRUNet(input_size, hidden_size, num_layers, dropout)
+        checkpoint = torch.load(pt_path, map_location=self._device, weights_only=False)
+        if isinstance(checkpoint, dict) and "model_state_dict" in checkpoint:
+            self._model.load_state_dict(checkpoint["model_state_dict"])
+        else:
+            self._model.load_state_dict(checkpoint)
+        self._model.eval()
+    def predict_proba(self, x_np):
+        """x_np: (1, window, features) numpy array -> float probability of focused."""
+        import torch
+        with torch.no_grad():
+            t = torch.tensor(x_np, dtype=torch.float32, device=self._device)
+            logit = self._model(t)
+            prob = torch.sigmoid(logit).item()
+        return prob
+class GRUPipeline:
+    def __init__(self, model_dir=None, detector=None):
+        pt_path, scaler_path, meta_path = _load_gru_artifacts(model_dir)
+        if pt_path is None:
+            d = model_dir or os.path.join(_PROJECT_ROOT, "checkpoints")
+            raise FileNotFoundError(f"No GRU artifacts in {d}")
+        meta = np.load(meta_path, allow_pickle=True)
+        self._feature_names = list(meta["feature_names"])
+        self._window_size = int(meta["window_size"])
+        hidden_size = int(meta["hidden_size"])
+        num_layers = int(meta["num_layers"])
+        dropout = float(meta["dropout"])
+        self._threshold = float(meta["default_threshold"])
+        sc = np.load(scaler_path)
+        self._sc_mean = sc["mean"]
+        self._sc_scale = sc["scale"]
+        self._gru = _AttentionGRU(
+            pt_path, input_size=len(self._feature_names),
+            hidden_size=hidden_size, num_layers=num_layers, dropout=dropout,
+        )
+        self._feat_indices = [FEATURE_NAMES.index(n) for n in self._feature_names]
+        self._detector = detector or FaceMeshDetector()
+        self._owns_detector = detector is None
+        self._head_pose = HeadPoseEstimator()
+        self.head_pose = self._head_pose
+        self._eye_scorer = EyeBehaviourScorer()
+        self._temporal = TemporalTracker()
+        self._smoother = _OutputSmoother(alpha=0.6, grace_frames=10)
+        self._buffer = collections.deque(maxlen=self._window_size)
+        print(
+            f"[GRU] Loaded {pt_path} | {len(self._feature_names)} features | "
+            f"window={self._window_size} | threshold={self._threshold:.3f}"
+        )
+    def process_frame(self, bgr_frame):
+        landmarks = self._detector.process(bgr_frame)
+        h, w = bgr_frame.shape[:2]
+        out = {
+            "landmarks": landmarks,
+            "is_focused": False,
+            "raw_score": 0.0,
+            "gru_prob": 0.0,
+            "s_face": 0.0,
+            "s_eye": 0.0,
+            "mar": None,
+            "yaw": None,
+            "pitch": None,
+            "roll": None,
+        }
+        if landmarks is None:
+            smoothed = self._smoother.update(0.0, False)
+            out["raw_score"] = smoothed
+            out["is_focused"] = smoothed >= self._threshold
+            return out
+        vec = extract_features(landmarks, w, h, self._head_pose, self._eye_scorer, self._temporal)
+        vec = _clip_features(vec)
+        out["yaw"] = float(vec[_FEAT_IDX["yaw"]])
+        out["pitch"] = float(vec[_FEAT_IDX["pitch"]])
+        out["roll"] = float(vec[_FEAT_IDX["roll"]])
+        out["s_face"] = float(vec[_FEAT_IDX["s_face"]])
+        out["s_eye"] = float(vec[_FEAT_IDX["s_eye"]])
+        out["mar"] = float(vec[_FEAT_IDX["mar"]])
+        selected = vec[self._feat_indices].astype(np.float64)
+        scaled = (selected - self._sc_mean) / np.maximum(self._sc_scale, 1e-8)
+        scaled_f32 = scaled.astype(np.float32)
+        # Pad buffer on first frame so GRU can predict immediately
+        if len(self._buffer) == 0:
+            for _ in range(self._window_size):
+                self._buffer.append(scaled_f32)
+        else:
+            self._buffer.append(scaled_f32)
+        window = np.array(self._buffer)[np.newaxis, :, :]  # (1, W, F)
+        gru_prob = self._gru.predict_proba(window)
+        out["gru_prob"] = float(np.clip(gru_prob, 0.0, 1.0))
+        out["raw_score"] = self._smoother.update(out["gru_prob"], True)
+        out["is_focused"] = out["raw_score"] >= self._threshold
+        return out
+    def close(self):
+        if self._owns_detector:
+            self._detector.close()
+    def __enter__(self):
+        return self
+    def __exit__(self, *args):
+        self.close()

vite.config.js ADDED Viewed

	@@ -0,0 +1,22 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      // 告诉 Vite：凡是以 /api 开头的请求，都转发给 Python 后端
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+        secure: false,
+      },
+      // 告诉 Vite：凡是以 /ws 开头的请求，都转发给 Python 后端
+      '/ws': {
+        target: 'ws://localhost:8000',
+        ws: true,
+      }
+    }
+  }
+})