Upload 12 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+GAP_Large_project-fea-ui/focus_guard.db filter=lfs diff=lfs merge=lfs -text

GAP_Large_project-fea-ui/Dockerfile

@@ -0,0 +1,24 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Install system dependencies for OpenCV
+RUN apt-get update && apt-get install -y \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    libgomp1 \
+    libgthread-2.0-0 \
+    libgl1 \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

GAP_Large_project-fea-ui/README.md

@@ -0,0 +1,9 @@
+---
+title: FOCUS GUARD
+colorFrom: green
+colorTo: red
+sdk: docker
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

GAP_Large_project-fea-ui/app.py

@@ -0,0 +1,649 @@
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, HTTPException
+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
+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
+
+# 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
+model = None
+db_path = "focus_guard.db"
+
+# ================ 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
+
+# ================ YOLO MODEL LOADING ================
+
+def load_yolo_model():
+    """Load YOLOv8 model with optimizations for CPU"""
+    global model
+    try:
+        # Fix PyTorch 2.6+ weights_only issue
+        # Set environment variable to allow loading YOLO weights
+        os.environ['TORCH_LOAD_WEIGHTS_ONLY'] = '0'
+
+        import torch
+        if hasattr(torch.serialization, 'add_safe_globals'):
+            # PyTorch 2.6+ compatibility - add required classes
+            try:
+                from ultralytics.nn.tasks import DetectionModel
+                import torch.nn as nn
+                torch.serialization.add_safe_globals([
+                    DetectionModel,
+                    nn.modules.container.Sequential,
+                ])
+            except Exception as e:
+                print(f"  Safe globals setup: {e}")
+
+        from ultralytics import YOLO
+
+        model_path = "models/yolov8n.pt"
+
+        # Check if model file exists, if not use yolov8n (will download)
+        if not os.path.exists(model_path):
+            print(f"Model file {model_path} not found, downloading yolov8n.pt...")
+            model_path = "yolov8n.pt"  # This will trigger auto-download
+
+        # Load model (ultralytics handles weights_only internally in newer versions)
+        model = YOLO(model_path)
+
+        # Optimize for CPU
+        try:
+            model.fuse()  # Fuse Conv2d + BatchNorm layers
+            print("[OK] Model layers fused for optimization")
+        except Exception as e:
+            print(f"  Model fusion skipped: {e}")
+
+        # Warm up model with dummy inference
+        print("Warming up model...")
+        dummy_img = np.zeros((416, 416, 3), dtype=np.uint8)
+        model(dummy_img, imgsz=416, conf=0.4, iou=0.45, max_det=5, classes=[0], verbose=False)
+
+        print("[OK] YOLOv8 model loaded and warmed up successfully")
+        return True
+    except Exception as e:
+        print(f"[ERROR] Failed to load YOLOv8 model: {e}")
+        print("  The app will run without detection features")
+        import traceback
+        traceback.print_exc()
+        return False
+
+# ================ FOCUS DETECTION ALGORITHM ================
+
+def is_user_focused(detections, frame_shape, sensitivity=6):
+    """
+    Determine if user is focused based on YOLOv8 detections
+
+    Simple logic: Detects person with confidence >= 80% (0.8)
+
+    Args:
+        detections: List of detection dictionaries
+        frame_shape: Tuple of (height, width, channels)
+        sensitivity: Integer 1-10, higher = stricter criteria (adjusts confidence threshold)
+
+    Returns:
+        Tuple of (is_focused: bool, confidence: float, metadata: dict)
+    """
+    # Filter person detections (class 0 in COCO dataset)
+    persons = [d for d in detections if d.get('class') == 0]
+
+    if not persons:
+        return False, 0.0, {'reason': 'no_person', 'count': 0}
+
+    # Find person with highest confidence
+    best_person = max(persons, key=lambda x: x.get('confidence', 0))
+    bbox = best_person['bbox']  # [x1, y1, x2, y2]
+    conf = best_person['confidence']
+
+    # Calculate confidence threshold based on sensitivity
+    # sensitivity 6 (default) = 0.8 threshold
+    # sensitivity 1 (lowest) = 0.5 threshold
+    # sensitivity 10 (highest) = 0.9 threshold
+    base_threshold = 0.8
+    sensitivity_adjustment = (sensitivity - 6) * 0.02  # ±0.08 range
+    confidence_threshold = base_threshold + sensitivity_adjustment
+    confidence_threshold = max(0.5, min(0.95, confidence_threshold))  # Clamp to 0.5-0.95
+
+    # Simple focus determination: confidence >= threshold
+    is_focused = conf >= confidence_threshold
+
+    # Optional: Check if person is somewhat centered (loose requirement)
+    h, w = frame_shape[0], frame_shape[1]
+    bbox_center_x = (bbox[0] + bbox[2]) / 2
+    bbox_center_y = (bbox[1] + bbox[3]) / 2
+
+    # Normalize to 0-1 range
+    center_x_norm = bbox_center_x / w if w > 0 else 0.5
+    center_y_norm = bbox_center_y / h if h > 0 else 0.5
+
+    # Check if person is in frame (not at extreme edges)
+    # Allow very loose centering: 20%-80% horizontal, 15%-85% vertical
+    in_frame = (0.2 <= center_x_norm <= 0.8) and (0.15 <= center_y_norm <= 0.85)
+
+    # Reduce focus score if person is at extreme edge
+    position_factor = 1.0 if in_frame else 0.7
+    final_score = conf * position_factor
+
+    # Also reduce if multiple persons detected
+    if len(persons) > 1:
+        final_score *= 0.9
+        reason = f"person_detected_multi_{len(persons)}"
+    else:
+        reason = "person_detected" if is_focused else "low_confidence"
+
+    metadata = {
+        'bbox': bbox,
+        'detection_confidence': round(conf, 3),
+        'confidence_threshold': round(confidence_threshold, 3),
+        'center_position': [round(center_x_norm, 3), round(center_y_norm, 3)],
+        'in_frame': in_frame,
+        'person_count': len(persons),
+        'reason': reason
+    }
+
+    return is_focused and in_frame, final_score, metadata
+
+def parse_yolo_results(results):
+    """Parse YOLOv8 results into a list of detections"""
+    detections = []
+
+    if results and len(results) > 0:
+        result = results[0]
+        boxes = result.boxes
+
+        if boxes is not None and len(boxes) > 0:
+            for box in boxes:
+                # Get box coordinates
+                xyxy = box.xyxy[0].cpu().numpy()
+                conf = float(box.conf[0].cpu().numpy())
+                cls = int(box.cls[0].cpu().numpy())
+
+                detection = {
+                    'bbox': [float(x) for x in xyxy],
+                    'confidence': conf,
+                    'class': cls,
+                    'class_name': result.names[cls] if hasattr(result, 'names') else str(cls)
+                }
+                detections.append(detection)
+
+    return detections
+
+# ================ DATABASE OPERATIONS ================
+
+async def create_session():
+    """Create a new focus 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):
+    """End a focus session and calculate statistics"""
+    async with aiosqlite.connect(db_path) as db:
+        # Get session data
+        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()
+
+        # Calculate focus score
+        focus_score = focused_frames / total_frames if total_frames > 0 else 0.0
+
+        # Update session
+        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):
+    """Store a focus detection event"""
+    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)))
+
+        # Update session frame counts
+        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 EVENTS ================
+
+@app.on_event("startup")
+async def startup_event():
+    """Initialize database and load model on startup"""
+    print(" Starting Focus Guard API...")
+    await init_database()
+    print("[OK] Database initialized")
+    load_yolo_model()
+
+@app.on_event("shutdown")
+async def shutdown_event():
+    """Cleanup on shutdown"""
+    print(" Shutting down Focus Guard API...")
+
+# ================ STATIC FILES ================
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+@app.get("/")
+async def read_index():
+    return FileResponse("static/index.html")
+
+# ================ WEBSOCKET ENDPOINT ================
+
+@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 = 0.1  # Max 10 FPS server-side
+
+    try:
+        # Get user settings
+        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:
+            # Receive data from client
+            data = await websocket.receive_json()
+
+            if data['type'] == 'frame':
+                from time import time
+                current_time = time()
+
+                # Rate limiting
+                if current_time - last_inference_time < min_inference_interval:
+                    # Skip inference, just acknowledge
+                    await websocket.send_json({
+                        'type': 'ack',
+                        'frame_count': frame_count
+                    })
+                    continue
+
+                last_inference_time = current_time
+
+                try:
+                    # Decode base64 image
+                    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
+
+                    # Resize for faster inference
+                    frame = cv2.resize(frame, (640, 480))
+
+                    # YOLOv8 inference
+                    if model is not None:
+                        results = model(
+                            frame,
+                            imgsz=416,
+                            conf=0.4,
+                            iou=0.45,
+                            max_det=5,
+                            classes=[0],  # Only person class
+                            verbose=False
+                        )
+                        detections = parse_yolo_results(results)
+                    else:
+                        # Fallback if model not loaded
+                        detections = []
+
+                    # Determine focus status
+                    is_focused, confidence, metadata = is_user_focused(
+                        detections, frame.shape, sensitivity
+                    )
+
+                    # Store event in database if session active
+                    if session_id:
+                        await store_focus_event(session_id, is_focused, confidence, metadata)
+
+                    # Send results back to client
+                    response = {
+                        'type': 'detection',
+                        'focused': is_focused,
+                        'confidence': round(confidence, 3),
+                        'detections': detections,
+                        'frame_count': frame_count
+                    }
+
+                    await websocket.send_json(response)
+                    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:
+                    summary = await end_session(session_id)
+                    await websocket.send_json({
+                        'type': 'session_ended',
+                        'summary': summary
+                    })
+                    session_id = None
+
+    except WebSocketDisconnect:
+        if session_id:
+            await end_session(session_id)
+        print(f"WebSocket disconnected (session: {session_id})")
+    except Exception as e:
+        print(f"WebSocket error: {e}")
+        if websocket.client_state.value == 1:  # CONNECTED
+            await websocket.close()
+
+# ================ REST API ENDPOINTS ================
+
+@app.post("/api/sessions/start")
+async def api_start_session():
+    """Start a new focus session"""
+    session_id = await create_session()
+    return {"session_id": session_id}
+
+@app.post("/api/sessions/end")
+async def api_end_session(data: SessionEnd):
+    """End a focus session"""
+    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):
+    """Get focus sessions with optional filtering"""
+    async with aiosqlite.connect(db_path) as db:
+        db.row_factory = aiosqlite.Row
+
+        # Build query based on filter
+        if filter == "today":
+            date_filter = datetime.now().replace(hour=0, minute=0, second=0, microsecond=0)
+            query = "SELECT * FROM focus_sessions WHERE start_time >= ? ORDER BY start_time DESC LIMIT ? OFFSET ?"
+            params = (date_filter.isoformat(), limit, offset)
+        elif filter == "week":
+            date_filter = datetime.now() - timedelta(days=7)
+            query = "SELECT * FROM focus_sessions WHERE start_time >= ? ORDER BY start_time DESC LIMIT ? OFFSET ?"
+            params = (date_filter.isoformat(), limit, offset)
+        elif filter == "month":
+            date_filter = datetime.now() - timedelta(days=30)
+            query = "SELECT * FROM focus_sessions WHERE start_time >= ? ORDER BY start_time DESC LIMIT ? OFFSET ?"
+            params = (date_filter.isoformat(), limit, offset)
+        else:
+            query = "SELECT * FROM focus_sessions WHERE end_time IS NOT NULL ORDER BY start_time DESC LIMIT ? OFFSET ?"
+            params = (limit, offset)
+
+        cursor = await db.execute(query, params)
+        rows = await cursor.fetchall()
+
+        sessions = [dict(row) for row in rows]
+        return sessions
+
+@app.get("/api/sessions/{session_id}")
+async def get_session(session_id: int):
+    """Get detailed session information"""
+    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)
+
+        # Get events
+        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():
+    """Get user 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):
+    """Update user settings"""
+    async with aiosqlite.connect(db_path) as db:
+        # First ensure the record exists
+        cursor = await db.execute("SELECT id FROM user_settings WHERE id = 1")
+        exists = await cursor.fetchone()
+
+        if not exists:
+            # Insert default record if it doesn't exist
+            await db.execute("""
+                INSERT INTO user_settings (id, sensitivity, notification_enabled, notification_threshold, frame_rate, model_name)
+                VALUES (1, 6, 1, 30, 30, 'yolov8n.pt')
+            """)
+            await db.commit()
+            print("[OK] Created default user_settings record")
+
+        # Now update with provided values
+        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()
+            print(f"[OK] Settings updated: {settings.model_dump(exclude_none=True)}")
+
+        return {"status": "success", "updated": len(updates) > 0}
+
+@app.get("/api/stats/summary")
+async def get_stats_summary():
+    """Get overall statistics summary"""
+    async with aiosqlite.connect(db_path) as db:
+        # Total sessions
+        cursor = await db.execute("SELECT COUNT(*) FROM focus_sessions WHERE end_time IS NOT NULL")
+        total_sessions = (await cursor.fetchone())[0]
+
+        # Total focus time
+        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
+
+        # Average focus score
+        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
+
+        # Streak calculation (consecutive days with sessions)
+        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
+        }
+
+# ================ HEALTH CHECK ================
+
+@app.get("/health")
+async def health_check():
+    """Health check endpoint"""
+    return {
+        "status": "healthy",
+        "model_loaded": model is not None,
+        "database": os.path.exists(db_path)
+    }

GAP_Large_project-fea-ui/assets/README.md

@@ -0,0 +1,9 @@
+---
+title: FOCUS GUARD
+colorFrom: green
+colorTo: red
+sdk: docker
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

GAP_Large_project-fea-ui/focus_guard.db

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fb042116505f0019d73e87a8262be3ef313b2b1f1471c3fd9bd1d61ee34d73ea
+size 1105920

GAP_Large_project-fea-ui/models/yolov8n.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:31e20dde3def09e2cf938c7be6fe23d9150bbbe503982af13345706515f2ef95
+size 6534387

GAP_Large_project-fea-ui/requirements.txt

@@ -0,0 +1,12 @@
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+websockets==12.0
+opencv-python-headless==4.8.1.78
+ultralytics==8.0.206
+numpy==1.24.3
+Pillow==10.1.0
+python-multipart==0.0.6
+aiosqlite==0.19.0
+pydantic==2.4.2
+torch==2.5.1
+torchvision==0.20.1

GAP_Large_project-fea-ui/static/index.html

@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Focus Guard</title>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/styles.css?v=2">
+</head>
+<body>
+    <h1>Focus Guard</h1>
+  
+    <!-- Top Menu -->
+    <nav id="top-menu">
+        <button id="menu-start" class="menu-btn">Start Focus</button>
+        <div class="separator"></div>
+        <button id="menu-achievement" class="menu-btn">My Achievement</button>
+        <div class="separator"></div>
+        <button id="menu-records" class="menu-btn">My Records</button>
+        <div class="separator"></div>
+        <button id="menu-customise" class="menu-btn">Customise</button>
+        <div class="separator"></div>
+        <button id="menu-help" class="menu-btn">Help</button>
+    </nav>
+    <!-- Page A -->
+    <main id="page-a" class="page">
+        <h1>Focus Guard</h1>
+        <p>Your productivity monitor assistant.</p>
+        <button id="start-button" class="btn-main">Start</button>
+    </main>
+    <!-- Page B -->
+    <main id="page-b" class="page hidden">
+        <!-- 1. Camera / Display Area -->
+        <section id="display-area">
+            <p id="display-placeholder">Nothing</p>
+        </section>
+
+        <!-- 2. Timeline Area -->
+        <section id="timeline-area">
+            <div class="timeline-label">Timeline</div>
+            <div id="timeline-visuals"></div>
+            <div id="timeline-line"></div>
+        </section>
+
+        <!-- 3. Control Buttons -->
+        <section id="control-panel">
+            <button id="btn-cam-start" class="action-btn green">Start</button>
+            <button id="btn-floating" class="action-btn yellow">Floating Window</button>
+            <button id="btn-models" class="action-btn blue">Models</button>
+            <button id="btn-cam-stop" class="action-btn red">Stop</button>
+        </section>
+
+        <!-- 4. Frame Control -->
+        <section id="frame-control">
+            <label for="frame-slider">Frame</label>
+            <input type="range" id="frame-slider" min="1" max="60" value="30">
+            <input type="number" id="frame-input" value="30">
+        </section>
+    </main>
+
+    <!-- Page C - My Achievement -->
+    <main id="page-c" class="page hidden">
+        <h1>My Achievement</h1>
+
+        <div class="stats-grid">
+            <div class="stat-card">
+                <div class="stat-number" id="total-sessions">0</div>
+                <div class="stat-label">Total Sessions</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="total-hours">0h</div>
+                <div class="stat-label">Total Focus Time</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="avg-focus">0%</div>
+                <div class="stat-label">Average Focus</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="current-streak">0</div>
+                <div class="stat-label">Day Streak</div>
+            </div>
+        </div>
+
+        <div class="achievements-section">
+            <h2>Badges</h2>
+            <div id="badges-container" class="badges-grid"></div>
+        </div>
+    </main>
+
+    <!-- Page D - My Records -->
+    <main id="page-d" class="page hidden">
+        <h1>My Records</h1>
+
+        <div class="records-controls">
+            <button id="filter-today" class="filter-btn active">Today</button>
+            <button id="filter-week" class="filter-btn">This Week</button>
+            <button id="filter-month" class="filter-btn">This Month</button>
+            <button id="filter-all" class="filter-btn">All Time</button>
+        </div>
+
+        <div class="chart-container">
+            <canvas id="focus-chart"></canvas>
+        </div>
+
+        <div class="sessions-list">
+            <h2>Recent Sessions</h2>
+            <table id="sessions-table">
+                <thead>
+                    <tr>
+                        <th>Date</th>
+                        <th>Duration</th>
+                        <th>Focus Score</th>
+                        <th>Action</th>
+                    </tr>
+                </thead>
+                <tbody id="sessions-tbody"></tbody>
+            </table>
+        </div>
+    </main>
+
+    <!-- Page E - Customise -->
+    <main id="page-e" class="page hidden">
+        <h1>Customise</h1>
+
+        <div class="settings-container">
+            <div class="setting-group">
+                <h2>Detection Settings</h2>
+
+                <div class="setting-item">
+                    <label for="sensitivity-slider">Detection Sensitivity</label>
+                    <div class="slider-group">
+                        <input type="range" id="sensitivity-slider" min="1" max="10" value="6">
+                        <span id="sensitivity-value">6</span>
+                    </div>
+                    <p class="setting-description">Higher values require stricter focus criteria</p>
+                </div>
+
+                <div class="setting-item">
+                    <label for="default-framerate">Default Frame Rate</label>
+                    <div class="slider-group">
+                        <input type="range" id="default-framerate" min="5" max="60" value="30">
+                        <span id="framerate-value">30</span> FPS
+                    </div>
+                </div>
+            </div>
+
+            <div class="setting-group">
+                <h2>Notifications</h2>
+
+                <div class="setting-item">
+                    <label>
+                        <input type="checkbox" id="enable-notifications" checked>
+                        Enable distraction notifications
+                    </label>
+                </div>
+
+                <div class="setting-item">
+                    <label for="notification-threshold">Alert after (seconds)</label>
+                    <input type="number" id="notification-threshold" value="30" min="5" max="300">
+                </div>
+            </div>
+
+            <div class="setting-group">
+                <h2>Data Management</h2>
+
+                <button id="export-data" class="action-btn blue">Export Data</button>
+                <button id="clear-history" class="action-btn red">Clear History</button>
+            </div>
+
+            <button id="save-settings" class="btn-main">Save Settings</button>
+        </div>
+    </main>
+
+    <!-- Page F - Help -->
+    <main id="page-f" class="page hidden">
+        <h1>Help</h1>
+
+        <div class="help-container">
+            <section class="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 class="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 class="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 class="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 class="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 class="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>
+
+    <script src="/static/script.js?v=2"></script>
+</body>
+</html>

GAP_Large_project-fea-ui/static/script.js

@@ -0,0 +1,794 @@
+// ================ PAGE NAVIGATION ================
+
+const pages = {
+    'page-a': document.getElementById('page-a'),
+    'page-b': document.getElementById('page-b'),
+    'page-c': document.getElementById('page-c'), // Achievement
+    'page-d': document.getElementById('page-d'), // Records
+    'page-e': document.getElementById('page-e'), // Customise
+    'page-f': document.getElementById('page-f')  // Help
+};
+
+function showPage(pageId) {
+    for (const key in pages) {
+        pages[key].classList.add('hidden');
+    }
+    if (pages[pageId]) {
+        pages[pageId].classList.remove('hidden');
+    }
+}
+
+// ================ VIDEO MANAGER CLASS ================
+
+class VideoManager {
+    constructor() {
+        this.videoElement = null;
+        this.canvasElement = null;
+        this.ctx = null;
+        this.captureCanvas = null;
+        this.captureCtx = null;
+        this.stream = null;
+        this.ws = null;
+        this.isStreaming = false;
+        this.sessionId = null;
+        this.frameRate = 30;
+        this.frameInterval = null;
+        this.renderLoopId = null;
+
+        // Status smoothing for stable display
+        this.currentStatus = false;  // Default: not focused
+        this.previousStatus = false;  // Track previous status to detect changes
+        this.statusBuffer = [];  // Buffer for last N frames
+        this.bufferSize = 5;  // Number of frames to average (smaller = more responsive)
+
+        // Latest detection data for rendering
+        this.latestDetectionData = null;
+        this.lastConfidence = 0;
+        this.detectionHoldMs = 30;
+    }
+
+    async initCamera() {
+        try {
+            this.stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    width: { ideal: 640 },
+                    height: { ideal: 480 },
+                    facingMode: 'user'
+                }
+            });
+
+            this.videoElement = document.createElement('video');
+            this.videoElement.srcObject = this.stream;
+            this.videoElement.autoplay = true;
+            this.videoElement.playsInline = true;
+
+            this.canvasElement = document.createElement('canvas');
+            this.canvasElement.width = 640;
+            this.canvasElement.height = 480;
+            this.ctx = this.canvasElement.getContext('2d');
+
+            this.captureCanvas = document.createElement('canvas');
+            this.captureCanvas.width = 640;
+            this.captureCanvas.height = 480;
+            this.captureCtx = this.captureCanvas.getContext('2d');
+
+            const displayArea = document.getElementById('display-area');
+            displayArea.innerHTML = '';
+            displayArea.appendChild(this.canvasElement);
+
+            await this.videoElement.play();
+            this.startRenderLoop();
+
+            return true;
+        } catch (error) {
+            console.error('Camera init error:', error);
+            throw error;
+        }
+    }
+
+    connectWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${protocol}//${window.location.host}/ws/video`;
+
+        this.ws = new WebSocket(wsUrl);
+
+        this.ws.onopen = () => {
+            console.log('WebSocket connected');
+            this.startSession();
+        };
+
+        this.ws.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            this.handleServerMessage(data);
+        };
+
+        this.ws.onerror = (error) => {
+            console.error('WebSocket error:', error);
+        };
+
+        this.ws.onclose = () => {
+            console.log('WebSocket closed');
+        };
+    }
+
+    startStreaming() {
+        this.isStreaming = true;
+        this.connectWebSocket();
+
+        this.frameInterval = setInterval(() => {
+            if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+                this.captureAndSendFrame();
+            }
+        }, 1000 / this.frameRate);
+    }
+
+    captureAndSendFrame() {
+        if (!this.videoElement || !this.captureCanvas || !this.captureCtx) return;
+
+        this.captureCtx.drawImage(this.videoElement, 0, 0, 640, 480);
+
+        const imageData = this.captureCanvas.toDataURL('image/jpeg', 0.8);
+        const base64Data = imageData.split(',')[1];
+
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify({
+                type: 'frame',
+                image: base64Data
+            }));
+        }
+    }
+
+    handleServerMessage(data) {
+        switch (data.type) {
+            case 'detection':
+                // Update status with smoothing
+                this.updateStatus(data.focused);
+
+                // Render with smoothed status
+                this.renderDetections(data);
+
+                // Update timeline and notifications with smoothed status
+                timeline.addEvent(this.currentStatus);
+                checkDistraction(this.currentStatus);
+                break;
+            case 'session_started':
+                this.sessionId = data.session_id;
+                console.log('Session started:', this.sessionId);
+                break;
+            case 'session_ended':
+                console.log('Session ended:', data.summary);
+                showSessionSummary(data.summary);
+                break;
+            case 'ack':
+                // Frame acknowledged but not processed
+                break;
+            case 'error':
+                console.error('Server error:', data.message);
+                break;
+        }
+    }
+
+    updateStatus(newFocused) {
+        // Add to buffer
+        this.statusBuffer.push(newFocused);
+
+        // Keep buffer size limited
+        if (this.statusBuffer.length > this.bufferSize) {
+            this.statusBuffer.shift();
+        }
+
+        // Don't update status until buffer is full (prevents initial flickering)
+        if (this.statusBuffer.length < this.bufferSize) {
+            return false;  // Status hasn't changed
+        }
+
+        // Calculate majority vote with moderate thresholds for better responsiveness
+        const focusedCount = this.statusBuffer.filter(f => f).length;
+        const focusedRatio = focusedCount / this.statusBuffer.length;
+
+        // Store previous status
+        this.previousStatus = this.currentStatus;
+
+        // Moderate thresholds: quicker to change, still avoids rapid flipping
+        // For 8 frames: need 6+ focused to become FOCUSED, or 6+ not focused to become NOT FOCUSED
+        if (focusedRatio >= 0.75) {
+            this.currentStatus = true;
+        } else if (focusedRatio <= 0.25) {
+            this.currentStatus = false;
+        }
+        // Between 0.25-0.75: keep current status (hysteresis to avoid jitter)
+
+        // Log only when status actually changes
+        const statusChanged = this.currentStatus !== this.previousStatus;
+        if (statusChanged) {
+            console.log(`Status changed: ${this.previousStatus ? 'FOCUSED' : 'NOT FOCUSED'} -> ${this.currentStatus ? 'FOCUSED' : 'NOT FOCUSED'} (ratio: ${focusedRatio.toFixed(2)})`);
+        }
+
+        // Return whether status changed
+        return statusChanged;
+    }
+
+    renderDetections(data) {
+        this.latestDetectionData = {
+            detections: data.detections || [],
+            confidence: data.confidence || 0,
+            focused: data.focused,
+            timestamp: performance.now()
+        };
+        this.lastConfidence = data.confidence || 0;
+    }
+
+    startRenderLoop() {
+        if (this.renderLoopId) return;
+
+        const render = () => {
+            if (this.videoElement && this.ctx) {
+                this.ctx.drawImage(this.videoElement, 0, 0, 640, 480);
+
+                const now = performance.now();
+                const latest = this.latestDetectionData;
+                const hasFresh = latest && (now - latest.timestamp) <= this.detectionHoldMs;
+
+                // Draw detection boxes using last known data (prevents flicker)
+                if (hasFresh && latest.detections.length > 0) {
+                    latest.detections.forEach(det => {
+                        const [x1, y1, x2, y2] = det.bbox;
+                        this.ctx.strokeStyle = this.currentStatus ? '#00FF00' : '#FF0000';
+                        this.ctx.lineWidth = 3;
+                        this.ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+
+                        this.ctx.fillStyle = this.currentStatus ? '#00FF00' : '#FF0000';
+                        this.ctx.font = '16px Nunito';
+                        const label = `${det.class_name} ${(det.confidence * 100).toFixed(1)}%`;
+                        this.ctx.fillText(label, x1, y1 - 5);
+                    });
+                }
+
+                const statusText = this.currentStatus ? 'FOCUSED' : 'NOT FOCUSED';
+                this.ctx.fillStyle = this.currentStatus ? '#00FF00' : '#FF0000';
+                this.ctx.font = 'bold 24px Nunito';
+                this.ctx.fillText(statusText, 10, 30);
+
+                this.ctx.font = '16px Nunito';
+                this.ctx.fillText(`Confidence: ${(this.lastConfidence * 100).toFixed(1)}%`, 10, 55);
+            }
+
+            this.renderLoopId = requestAnimationFrame(render);
+        };
+
+        this.renderLoopId = requestAnimationFrame(render);
+    }
+
+    stopRenderLoop() {
+        if (this.renderLoopId) {
+            cancelAnimationFrame(this.renderLoopId);
+            this.renderLoopId = null;
+        }
+    }
+
+    startSession() {
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify({ type: 'start_session' }));
+        }
+    }
+
+    stopStreaming() {
+        this.isStreaming = false;
+        this.stopRenderLoop();
+
+        if (this.frameInterval) {
+            clearInterval(this.frameInterval);
+            this.frameInterval = null;
+        }
+
+        if (this.ws) {
+            this.ws.send(JSON.stringify({ type: 'end_session' }));
+            this.ws.close();
+            this.ws = null;
+        }
+
+        if (this.stream) {
+            this.stream.getTracks().forEach(track => track.stop());
+            this.stream = null;
+        }
+
+        if (this.canvasElement && this.ctx) {
+            this.ctx.clearRect(0, 0, 640, 480);
+        }
+
+        // Reset status
+        this.currentStatus = false;
+        this.statusBuffer = [];
+        this.latestDetectionData = null;
+        this.lastConfidence = 0;
+    }
+
+    setFrameRate(rate) {
+        this.frameRate = Math.max(1, Math.min(60, rate));
+
+        if (this.isStreaming && this.frameInterval) {
+            clearInterval(this.frameInterval);
+            this.frameInterval = setInterval(() => {
+                if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+                    this.captureAndSendFrame();
+                }
+            }, 1000 / this.frameRate);
+        }
+    }
+}
+
+// ================ TIMELINE MANAGER CLASS ================
+
+class TimelineManager {
+    constructor(maxEvents = 60) {
+        this.events = [];
+        this.maxEvents = maxEvents;
+        this.container = document.getElementById('timeline-visuals');
+    }
+
+    addEvent(isFocused) {
+        const timestamp = Date.now();
+        this.events.push({ timestamp, isFocused });
+
+        if (this.events.length > this.maxEvents) {
+            this.events.shift();
+        }
+
+        this.render();
+    }
+
+    render() {
+        if (!this.container) return;
+
+        this.container.innerHTML = '';
+
+        this.events.forEach((event, index) => {
+            const block = document.createElement('div');
+            block.className = 'timeline-block';
+            block.style.backgroundColor = event.isFocused ? '#00FF00' : '#FF0000';
+            block.style.width = '10px';
+            block.style.height = '20px';
+            block.style.display = 'inline-block';
+            block.style.marginRight = '2px';
+            block.title = event.isFocused ? 'Focused' : 'Distracted';
+            this.container.appendChild(block);
+        });
+    }
+
+    clear() {
+        this.events = [];
+        this.render();
+    }
+}
+
+// ================ NOTIFICATION SYSTEM ================
+
+let distractionStartTime = null;
+let notificationTimeout = null;
+let currentSettings = null;
+
+async function loadCurrentSettings() {
+    try {
+        const response = await fetch('/api/settings');
+        currentSettings = await response.json();
+    } catch (error) {
+        console.error('Failed to load settings:', error);
+        currentSettings = {
+            notification_enabled: true,
+            notification_threshold: 30
+        };
+    }
+}
+
+function checkDistraction(isFocused) {
+    if (!currentSettings || !currentSettings.notification_enabled) return;
+
+    if (!isFocused) {
+        if (!distractionStartTime) {
+            distractionStartTime = Date.now();
+        }
+
+        const distractionDuration = (Date.now() - distractionStartTime) / 1000;
+
+        if (distractionDuration >= currentSettings.notification_threshold && !notificationTimeout) {
+            sendNotification('Focus Guard Alert', 'You seem distracted. Time to refocus!');
+            notificationTimeout = setTimeout(() => {
+                notificationTimeout = null;
+            }, 60000);
+        }
+    } else {
+        distractionStartTime = null;
+    }
+}
+
+async function sendNotification(title, body) {
+    if ('Notification' in window) {
+        if (Notification.permission === 'granted') {
+            new Notification(title, { body });
+        } else if (Notification.permission !== 'denied') {
+            const permission = await Notification.requestPermission();
+            if (permission === 'granted') {
+                new Notification(title, { body });
+            }
+        }
+    }
+}
+
+// ================ SESSION SUMMARY MODAL ================
+
+function showSessionSummary(summary) {
+    const modal = document.createElement('div');
+    modal.className = 'modal-overlay';
+    modal.innerHTML = `
+        <div class="modal-content">
+            <h2>Session Complete!</h2>
+            <div class="summary-stats">
+                <div class="summary-item">
+                    <span class="summary-label">Duration:</span>
+                    <span class="summary-value">${formatDuration(summary.duration_seconds)}</span>
+                </div>
+                <div class="summary-item">
+                    <span class="summary-label">Focus Score:</span>
+                    <span class="summary-value">${(summary.focus_score * 100).toFixed(1)}%</span>
+                </div>
+                <div class="summary-item">
+                    <span class="summary-label">Total Frames:</span>
+                    <span class="summary-value">${summary.total_frames}</span>
+                </div>
+                <div class="summary-item">
+                    <span class="summary-label">Focused Frames:</span>
+                    <span class="summary-value">${summary.focused_frames}</span>
+                </div>
+            </div>
+            <button class="btn-main" onclick="closeModal()">Close</button>
+        </div>
+    `;
+
+    document.body.appendChild(modal);
+}
+
+function closeModal() {
+    const modal = document.querySelector('.modal-overlay');
+    if (modal) {
+        modal.remove();
+    }
+}
+
+function formatDuration(seconds) {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+
+    if (hours > 0) {
+        return `${hours}h ${minutes}m ${secs}s`;
+    } else if (minutes > 0) {
+        return `${minutes}m ${secs}s`;
+    } else {
+        return `${secs}s`;
+    }
+}
+
+// ================ GLOBAL INSTANCES ================
+
+const videoManager = new VideoManager();
+const timeline = new TimelineManager();
+
+// ================ EVENT LISTENERS ================
+
+// Page navigation
+document.getElementById('menu-start').addEventListener('click', () => showPage('page-b'));
+document.getElementById('menu-achievement').addEventListener('click', () => {
+    showPage('page-c');
+    loadAchievements();
+});
+document.getElementById('menu-records').addEventListener('click', () => {
+    showPage('page-d');
+    loadRecords('today');
+});
+document.getElementById('menu-customise').addEventListener('click', () => {
+    showPage('page-e');
+    loadSettings();
+});
+document.getElementById('menu-help').addEventListener('click', () => showPage('page-f'));
+
+document.getElementById('start-button').addEventListener('click', () => showPage('page-b'));
+
+// Page B controls
+document.getElementById('btn-cam-start').addEventListener('click', async () => {
+    try {
+        await videoManager.initCamera();
+        videoManager.startStreaming();
+        timeline.clear();
+        await loadCurrentSettings();
+    } catch (error) {
+        console.error('Failed to start camera:', error);
+        alert('Camera access denied. Please allow camera permissions and ensure you are using HTTPS or localhost.');
+    }
+});
+
+document.getElementById('btn-cam-stop').addEventListener('click', () => {
+    videoManager.stopStreaming();
+});
+
+document.getElementById('btn-floating').addEventListener('click', () => {
+    alert('Floating window feature coming soon!');
+});
+
+document.getElementById('btn-models').addEventListener('click', () => {
+    alert('Model selection feature coming soon!');
+});
+
+// Frame control
+const frameSlider = document.getElementById('frame-slider');
+const frameInput = document.getElementById('frame-input');
+
+frameSlider.addEventListener('input', (e) => {
+    const rate = parseInt(e.target.value);
+    frameInput.value = rate;
+    videoManager.setFrameRate(rate);
+});
+
+frameInput.addEventListener('input', (e) => {
+    const rate = parseInt(e.target.value);
+    frameSlider.value = rate;
+    videoManager.setFrameRate(rate);
+});
+
+// ================ ACHIEVEMENT PAGE ================
+
+async function loadAchievements() {
+    try {
+        const response = await fetch('/api/stats/summary');
+        const stats = await response.json();
+
+        document.getElementById('total-sessions').textContent = stats.total_sessions;
+        document.getElementById('total-hours').textContent =
+            (stats.total_focus_time / 3600).toFixed(1) + 'h';
+        document.getElementById('avg-focus').textContent =
+            (stats.avg_focus_score * 100).toFixed(1) + '%';
+        document.getElementById('current-streak').textContent = stats.streak_days;
+
+        loadBadges(stats);
+    } catch (error) {
+        console.error('Failed to load achievements:', error);
+    }
+}
+
+function loadBadges(stats) {
+    const badges = [
+        { name: 'First Session', condition: stats.total_sessions >= 1, icon: '' },
+        { name: '10 Sessions', condition: stats.total_sessions >= 10, icon: '' },
+        { name: '50 Sessions', condition: stats.total_sessions >= 50, icon: '' },
+        { name: '10 Hour Focus', condition: stats.total_focus_time >= 36000, icon: '' },
+        { name: '7 Day Streak', condition: stats.streak_days >= 7, icon: '' },
+        { name: '90% Avg Focus', condition: stats.avg_focus_score >= 0.9, icon: '' }
+    ];
+
+    const container = document.getElementById('badges-container');
+    container.innerHTML = '';
+
+    badges.forEach(badge => {
+        const badgeEl = document.createElement('div');
+        badgeEl.className = 'badge ' + (badge.condition ? 'earned' : 'locked');
+        badgeEl.innerHTML = `
+            <div class="badge-icon">${badge.icon}</div>
+            <div class="badge-name">${badge.name}</div>
+        `;
+        container.appendChild(badgeEl);
+    });
+}
+
+// ================ RECORDS PAGE ================
+
+async function loadRecords(filter = 'today') {
+    try {
+        const response = await fetch(`/api/sessions?filter=${filter}`);
+        const sessions = await response.json();
+
+        renderSessionsTable(sessions);
+        renderChart(sessions);
+    } catch (error) {
+        console.error('Failed to load records:', error);
+    }
+}
+
+function renderSessionsTable(sessions) {
+    const tbody = document.getElementById('sessions-tbody');
+    tbody.innerHTML = '';
+
+    sessions.forEach(session => {
+        const row = document.createElement('tr');
+        const date = new Date(session.start_time).toLocaleString();
+        const duration = formatDuration(session.duration_seconds);
+        const score = (session.focus_score * 100).toFixed(1) + '%';
+
+        row.innerHTML = `
+            <td>${date}</td>
+            <td>${duration}</td>
+            <td>${score}</td>
+            <td><button class="btn-view" onclick="viewSessionDetails(${session.id})">View</button></td>
+        `;
+        tbody.appendChild(row);
+    });
+
+    if (sessions.length === 0) {
+        const row = document.createElement('tr');
+        row.innerHTML = '<td colspan="4" style="text-align: center;">No sessions found</td>';
+        tbody.appendChild(row);
+    }
+}
+
+function renderChart(sessions) {
+    const canvas = document.getElementById('focus-chart');
+    const ctx = canvas.getContext('2d');
+
+    canvas.width = 800;
+    canvas.height = 300;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (sessions.length === 0) {
+        ctx.fillStyle = '#888';
+        ctx.font = '20px Nunito';
+        ctx.fillText('No data available', canvas.width / 2 - 80, canvas.height / 2);
+        return;
+    }
+
+    const barWidth = Math.min((canvas.width - 40) / sessions.length - 10, 80);
+    const maxScore = 1.0;
+
+    sessions.forEach((session, index) => {
+        const x = index * (barWidth + 10) + 20;
+        const barHeight = (session.focus_score / maxScore) * (canvas.height - 60);
+        const y = canvas.height - barHeight - 30;
+
+        ctx.fillStyle = session.focus_score > 0.7 ? '#28a745' :
+            session.focus_score > 0.4 ? '#ffc107' : '#dc3545';
+        ctx.fillRect(x, y, barWidth, barHeight);
+
+        ctx.fillStyle = '#333';
+        ctx.font = '12px Nunito';
+        const scoreText = (session.focus_score * 100).toFixed(0) + '%';
+        ctx.fillText(scoreText, x + barWidth / 2 - 15, y - 5);
+    });
+}
+
+function viewSessionDetails(sessionId) {
+    alert(`Session details for ID ${sessionId} - Feature coming soon!`);
+}
+
+// Filter buttons
+document.getElementById('filter-today').addEventListener('click', () => {
+    setActiveFilter('filter-today');
+    loadRecords('today');
+});
+
+document.getElementById('filter-week').addEventListener('click', () => {
+    setActiveFilter('filter-week');
+    loadRecords('week');
+});
+
+document.getElementById('filter-month').addEventListener('click', () => {
+    setActiveFilter('filter-month');
+    loadRecords('month');
+});
+
+document.getElementById('filter-all').addEventListener('click', () => {
+    setActiveFilter('filter-all');
+    loadRecords('all');
+});
+
+function setActiveFilter(activeId) {
+    document.querySelectorAll('.filter-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    document.getElementById(activeId).classList.add('active');
+}
+
+// ================ SETTINGS PAGE ================
+
+async function loadSettings() {
+    try {
+        const response = await fetch('/api/settings');
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const settings = await response.json();
+        console.log('Loaded settings:', settings);
+
+        // Apply settings with fallback to defaults
+        document.getElementById('sensitivity-slider').value = settings.sensitivity || 6;
+        document.getElementById('sensitivity-value').textContent = settings.sensitivity || 6;
+        document.getElementById('default-framerate').value = settings.frame_rate || 30;
+        document.getElementById('framerate-value').textContent = settings.frame_rate || 30;
+        document.getElementById('enable-notifications').checked = settings.notification_enabled !== false;
+        document.getElementById('notification-threshold').value = settings.notification_threshold || 30;
+    } catch (error) {
+        console.error('Failed to load settings:', error);
+        alert('Failed to load settings: ' + error.message);
+    }
+}
+
+async function saveSettings() {
+    const settings = {
+        sensitivity: parseInt(document.getElementById('sensitivity-slider').value),
+        frame_rate: parseInt(document.getElementById('default-framerate').value),
+        notification_enabled: document.getElementById('enable-notifications').checked,
+        notification_threshold: parseInt(document.getElementById('notification-threshold').value)
+    };
+
+    console.log('Saving settings:', settings);
+
+    try {
+        const response = await fetch('/api/settings', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(settings)
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            console.log('Settings saved:', result);
+            alert('Settings saved successfully!');
+            await loadCurrentSettings();
+        } else {
+            const error = await response.text();
+            console.error('Save failed with status:', response.status, error);
+            alert(`Failed to save settings: ${response.status} ${response.statusText}`);
+        }
+    } catch (error) {
+        console.error('Failed to save settings:', error);
+        alert('Failed to save settings: ' + error.message);
+    }
+}
+
+// Settings UI handlers
+document.getElementById('sensitivity-slider').addEventListener('input', (e) => {
+    document.getElementById('sensitivity-value').textContent = e.target.value;
+});
+
+document.getElementById('default-framerate').addEventListener('input', (e) => {
+    document.getElementById('framerate-value').textContent = e.target.value;
+});
+
+document.getElementById('save-settings').addEventListener('click', saveSettings);
+
+document.getElementById('export-data').addEventListener('click', async () => {
+    try {
+        const response = await fetch('/api/sessions?filter=all');
+        const sessions = await response.json();
+
+        const dataStr = JSON.stringify(sessions, null, 2);
+        const dataBlob = new Blob([dataStr], { type: 'application/json' });
+        const url = URL.createObjectURL(dataBlob);
+
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `focus-guard-data-${new Date().toISOString().split('T')[0]}.json`;
+        link.click();
+
+        URL.revokeObjectURL(url);
+    } catch (error) {
+        console.error('Failed to export data:', error);
+        alert('Failed to export data');
+    }
+});
+
+document.getElementById('clear-history').addEventListener('click', async () => {
+    if (confirm('Are you sure you want to clear all history? This cannot be undone.')) {
+        alert('Clear history feature requires backend implementation');
+    }
+});
+
+// ================ INITIALIZATION ================
+
+// Request notification permission on load
+if ('Notification' in window && Notification.permission === 'default') {
+    Notification.requestPermission();
+}
+
+// Load settings on startup
+loadCurrentSettings();
+
+console.log(' Focus Guard initialized');

GAP_Large_project-fea-ui/static/styles.css

@@ -0,0 +1,635 @@
+/* GLOBAL STYLES */
+body {
+    margin: 0;
+    font-family: 'Nunito', sans-serif; /* Rounded font */
+    background-color: #f9f9f9;
+    height: 100vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.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;
+}
+
+.separator {
+    width: 1px;
+    height: 20px;
+    background-color: #555; /* Dark gray separator */
+    margin: 0 5px;
+}
+
+/* PAGE CONTAINER */
+.page {
+    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; /* Enable vertical scrolling */
+}
+
+/* PAGE A SPECIFIC */
+#page-a {
+    justify-content: center; /* Center vertically */
+    margin-top: -40px; /* Slight offset to look optical centered */
+}
+
+#page-a h1 {
+    font-size: 80px;
+    margin: 0 0 10px 0;
+    color: #000;
+}
+
+#page-a p {
+    color: #666;
+    font-size: 20px;
+    margin-bottom: 40px;
+}
+
+.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;
+}
+
+/* 1. Display Area */
+#display-area {
+    width: 60%;
+    height: 50%; /* Takes up half the page height */
+    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;
+}
+
+/* 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: #ffc107; color: #333; }
+.action-btn.blue { background-color: #17a2b8; }
+.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;
+}
+
+.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 {
+    margin-right: 10px;
+    margin-top: 10px;
+}
+
+#save-settings {
+    display: block;
+    margin: 20px auto;
+}
+
+/* ================ HELP PAGE ================ */
+
+.help-container {
+    width: 70%;
+    max-width: 900px;
+    margin: 20px auto;
+}
+
+.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;
+    }
+}

GAP_Large_project-fea-ui/yolov8n.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:31e20dde3def09e2cf938c7be6fe23d9150bbbe503982af13345706515f2ef95
+size 6534387