rm folder

GAP_Large_project-fea-ui/Dockerfile

@@ -1,24 +0,0 @@
-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

@@ -1,9 +0,0 @@
----
-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

@@ -1,649 +0,0 @@
-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

@@ -1,9 +0,0 @@
----
-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

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

GAP_Large_project-fea-ui/models/yolov8n.pt

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

GAP_Large_project-fea-ui/requirements.txt

@@ -1,12 +0,0 @@
-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

@@ -1,244 +0,0 @@
-<!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

@@ -1,794 +0,0 @@
-// ================ 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

@@ -1,635 +0,0 @@
-/* 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

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