Upload 31 files

.gitattributes

@@ -33,3 +33,6 @@ 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
+database/face_index.faiss filter=lfs diff=lfs merge=lfs -text
+static/images/face-id-success.png filter=lfs diff=lfs merge=lfs -text
+static/images/logo.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,27 @@
+# One Step Greener – Face recognition attendance (Hugging Face Spaces)
+# Spaces expect the app to listen on port 7860.
+
+FROM python:3.10-slim
+
+# OpenCV and other libs need these
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt gunicorn
+
+COPY . .
+
+# Hugging Face Spaces use port 7860
+ENV PORT=7860
+EXPOSE 7860
+
+# Single worker (ML models in memory); multiple threads for concurrent requests
+CMD gunicorn --bind 0.0.0.0:7860 --workers 1 --threads 4 --timeout 120 app:app

README.md

@@ -1,11 +1,215 @@
 ---
-title: Attendance Apps
-emoji: 🐨
-colorFrom: gray
-colorTo: yellow
+title: AttendanceFaceRecognition
+emoji: 🐠
+colorFrom: green
+colorTo: pink
 sdk: docker
 pinned: false
-license: mit
+short_description: Face recognition attendance for One Step Greener
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# One Step Greener – Face Recognition Attendance
+
+A web-based **face recognition attendance system** for waste management teams. Employees and field workers (manforce) check in and out using their face—no cards or PINs. The app includes **anti-spoofing** (liveness detection) to block photos, screens, and replay attacks.
+
+---
+
+## What it does
+
+- **Register** users by capturing their face (with live guidance: position, size, centering). Supports **employees** (by employee ID) and **manforce** (by Aadhaar, name, mobile).
+- **Attendance** punch in/out via webcam: first scan of the day = punch in, next = punch out. One-minute cooldown between punches.
+- **Dashboard** shows today’s attendance (punch-in and punch-out times) and quick links to Attendance and Register.
+- **Liveness checks** during registration and recognition to reject printed photos, phone screens, and video replays (texture, motion, blink, and other cues).
+
+---
+
+## Features
+
+| Feature | Description |
+|--------|-------------|
+| **Face registration** | Multi-frame capture with real-time feedback (face detected, centered, big enough). Optional PIN to unlock the Register page. |
+| **Face recognition** | Match live face to stored embeddings (FAISS + 512-d FaceNet). Returns name, punch type (in/out), timestamp. |
+| **Anti-spoofing** | Multi-layer checks: LBP texture, Moiré/FFT, color, edges, specular, central-difference; plus motion and blink for sequences. |
+| **User types** | **Employee**: ID + optional name. **Manforce**: Aadhaar, full name, mobile. |
+| **Duplicate prevention** | Same face cannot be registered for two different people. |
+| **Cooldown** | 1-minute cooldown per user between punches to avoid double taps. |
+| **Today’s view** | Today’s attendance list with first punch-in and last punch-out per person. |
+
+---
+
+## Tech stack
+
+- **Backend:** Flask (Python 3.10)
+- **Face detection & embeddings:** MTCNN + InceptionResnetV1 (VGGFace2) via `facenet-pytorch`
+- **Embedding search:** FAISS (L2 index, cosine similarity)
+- **Anti-spoofing:** Custom pipeline (LBP, FFT/Moiré, color, edges, specular, CDCN-style; MediaPipe for blink)
+- **Database:** SQLite (`employees`, `attendance` tables)
+- **Frontend:** HTML/CSS/JS, camera capture via browser
+
+---
+
+## Project structure
+
+```
+.
+├── app.py                 # Flask app, routes, API handlers
+├── requirements.txt       # Python dependencies
+├── Dockerfile             # Docker image for HF Spaces (port 7860)
+├── database/
+│   ├── db.py              # SQLite helpers (employees, attendance)
+│   ├── constable.db       # SQLite DB (created at runtime)
+│   ├── face_index.faiss   # FAISS index (created at runtime)
+│   └── face_meta.json     # FAISS ID → employee_id mapping
+├── models/
+│   ├── face_engine.py     # MTCNN + InceptionResnetV1, decode/crop/embed
+│   ├── embeddings_store.py # FAISS wrapper, add/search
+│   └── anti_spoof.py      # Liveness (single frame + sequence)
+├── static/
+│   ├── css/style.css
+│   ├── js/
+│   │   ├── camera.js      # Shared camera logic
+│   │   ├── register.js    # Registration flow + face-check
+│   │   └── attendance.js  # Recognition + punch
+│   └── images/
+└── templates/
+    ├── base.html
+    ├── dashboard.html     # Home: Attendance + Register links
+    ├── register.html      # Enroll employee / manforce
+    └── attendance.html    # Punch in/out by face
+```
+
+---
+
+## Prerequisites
+
+- **Python 3.10** (or 3.8+)
+- **Camera** for registration and attendance (browser will request access)
+- **Optional:** GPU for faster face models (CUDA); runs on CPU otherwise
+
+---
+
+## Installation
+
+### 1. Clone and enter the project
+
+```bash
+git clone <your-repo-url>
+cd hf-space
+```
+
+### 2. Create a virtual environment (recommended)
+
+```bash
+python3 -m venv venv
+source venv/bin/activate   # Linux/macOS
+# or: venv\Scripts\activate  # Windows
+```
+
+### 3. Install dependencies
+
+```bash
+pip install -r requirements.txt
+```
+
+On Linux, OpenCV and other libs may need system packages:
+
+```bash
+# Debian/Ubuntu
+sudo apt-get update
+sudo apt-get install -y libgl1-mesa-glx libglib2.0-0 libsm6 libxext6 libxrender-dev
+```
+
+---
+
+## Configuration
+
+| Variable | Description | Default |
+|----------|-------------|--------|
+| `PORT` | HTTP port | `5000` (local) / `7860` (Docker/HF Spaces) |
+| `SECRET_KEY` | Flask secret key | `constable-secret-2025` |
+| `REGISTER_PIN` | PIN to unlock Register page | `3620` |
+| `FLASK_DEBUG` | Set to `1` for debug mode | `0` |
+
+Example:
+
+```bash
+export REGISTER_PIN=1234
+export PORT=5000
+```
+
+---
+
+## Running the app
+
+### Local (development)
+
+```bash
+python app.py
+```
+
+Then open **http://localhost:5000** (or the port you set). You should see the dashboard with **Attendance** and **Register**.
+
+### Docker (e.g. Hugging Face Spaces)
+
+The Dockerfile is set up for **Hugging Face Spaces** (port **7860**):
+
+```bash
+docker build -t attendance-face .
+docker run -p 7860:7860 attendance-face
+```
+
+Open **http://localhost:7860**.
+
+---
+
+## Usage instructions
+
+### Dashboard (`/` or `/dashboard`)
+
+- **Attendance** – Open the attendance page to punch in/out with your face.
+- **Register** – Open the registration page (optionally enter a PIN if set).
+
+### Register (`/register`)
+
+1. Optionally enter the **Register PIN** (default `3620`) to unlock the form.
+2. Choose **Employee** or **Manforce**:
+   - **Employee:** Enter Employee ID (and optional name). Submit with face capture.
+   - **Manforce:** Enter Aadhaar, full name, and mobile. Submit with face capture.
+3. Allow camera access. Position your face in the oval; wait until the indicator shows **Ready** (face detected, centered, big enough).
+4. Capture multiple frames when prompted. The app runs **liveness checks** (e.g. motion, blink); do not use a photo or screen.
+5. On success, the person is stored in the DB and their face embeddings are added to the FAISS index. You can then use **Attendance** to punch in/out.
+
+### Attendance (`/attendance`)
+
+1. Open the Attendance page and allow camera access.
+2. Look at the camera. The app will:
+   - Detect your face and run **liveness** (single frame or sequence).
+   - Match your face to the stored embeddings.
+   - If matched: **first punch of the day** = punch **in**, **next** = punch **out** (with a 1-minute cooldown between punches).
+3. You’ll see your name, punch type (in/out), and time. Today’s attendance is available from the dashboard.
+
+### API (for integration)
+
+| Endpoint | Method | Purpose |
+|----------|--------|--------|
+| `/api/face-check` | POST | Check if a frame has a valid face (centered, big enough). Body: `{ "frame": "<base64DataUrl>" }`. |
+| `/api/register` | POST | Register employee or manforce. Body: `user_type`, `frames`, and either `employee_id` or `aadhaar`+`name`+`mobile`. |
+| `/api/recognize` | POST | Recognize face and punch in/out. Body: `{ "frame": "..." }` or `{ "frames": ["...", ...] }`. |
+| `/api/verify-pin` | POST | Verify Register PIN. Body: `{ "pin": "3620" }`. |
+| `/api/employees` | GET | List all employees. |
+| `/api/attendance/today` | GET | Today’s attendance records. |
+| `/api/health` | GET | Health check + total indexed faces. |
+
+---
+
+## Notes
+
+- **First run:** The app creates `database/constable.db`, `face_index.faiss`, and `face_meta.json` on first use. No manual DB setup required.
+- **Hugging Face Spaces:** Use the Dockerfile and set the Space to use **Docker** and port **7860**.
+- **Security:** Set `SECRET_KEY` and `REGISTER_PIN` in production; avoid default PIN in production.
+
+---
+
+## License
+
+See repository license (if any).

app.py

@@ -0,0 +1,286 @@
+"""
+One Step Greener – Face recognition attendance (waste management).
+Flask application entry point.
+"""
+
+import os
+import logging
+from flask import Flask, render_template, request, jsonify, redirect
+
+from database.db import init_db, add_employee, get_employee, get_all_employees, mark_attendance, get_today_attendance
+from models.embeddings_store import EmbeddingStore
+from models.face_engine import (
+    decode_image,
+    get_face_embedding,
+    check_face_in_frame,
+    get_embeddings_from_frames,
+    get_embeddings_and_crops_from_frames,
+    get_face_crops_from_frames,
+)
+from models.anti_spoof import check_liveness, check_liveness_sequence
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+app.secret_key = os.environ.get("SECRET_KEY", "constable-secret-2025")
+
+REGISTER_PIN = os.environ.get("REGISTER_PIN", "3620")
+
+# ── Initialise database and embedding store ─────────────────────────────────
+init_db()
+store = EmbeddingStore()
+
+# ══════════════════════════════════════════════════════════════════════════════
+# Page routes
+# ══════════════════════════════════════════════════════════════════════════════
+
+@app.route("/")
+@app.route("/dashboard")
+def dashboard():
+    return render_template("dashboard.html")
+
+
+@app.route("/register")
+def register_page():
+    return render_template("register.html")
+
+
+@app.route("/manage")
+def manage_redirect():
+    return redirect("/dashboard", code=302)
+
+
+@app.route("/attendance")
+def attendance_page():
+    return render_template("attendance.html")
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+# API routes
+# ══════════════════════════════════════════════════════════════════════════════
+
+@app.route("/api/face-check", methods=["POST"])
+def api_face_check():
+    """
+    Lightweight face-in-frame check for registration flow.
+    Body: { frame: base64DataUrl }
+    Returns: { face_detected, centered, big_enough, ready } (ready = all true).
+    """
+    data = request.get_json(force=True)
+    frame = data.get("frame", "")
+    if not frame:
+        return jsonify({"face_detected": False, "centered": False, "big_enough": False, "ready": False})
+    try:
+        img = decode_image(frame)
+    except Exception:
+        return jsonify({"face_detected": False, "centered": False, "big_enough": False, "ready": False})
+    r = check_face_in_frame(img)
+    r["ready"] = r["face_detected"] and r["centered"] and r["big_enough"]
+    return jsonify(r)
+
+
+@app.route("/api/register", methods=["POST"])
+def api_register():
+    """
+    Body JSON:
+      Manforce: { user_type: 'manforce', aadhaar, name, mobile, frames }
+      Employee: { user_type: 'employee', employee_id, frames }
+    """
+    data = request.get_json(force=True)
+    user_type = (data.get("user_type") or "employee").strip().lower()
+    frames = data.get("frames", [])
+
+    if not frames:
+        return jsonify({"status": "error", "message": "No frames provided."}), 400
+
+    if user_type == "manforce":
+        aadhaar = data.get("aadhaar", "").strip()
+        name = data.get("name", "").strip()
+        mobile = data.get("mobile", "").strip()
+        if not aadhaar or not name or not mobile:
+            return jsonify({"status": "error", "message": "Aadhaar number, full name and mobile number are required for Manforce."}), 400
+        employee_id = aadhaar
+    else:
+        employee_id = data.get("employee_id", "").strip()
+        if not employee_id:
+            return jsonify({"status": "error", "message": "Employee code is required."}), 400
+        name = data.get("name", "").strip() or employee_id
+        aadhaar = ""
+        mobile = ""
+
+    logger.info(f"Registering {employee_id} ({name}, type={user_type}) with {len(frames)} frames …")
+    embeddings, face_crops = get_embeddings_and_crops_from_frames(frames)
+
+    if not embeddings:
+        return jsonify({
+            "status": "error",
+            "message": "No face detected in the provided frames. "
+                       "Please ensure good lighting and that your face is clearly visible."
+        }), 400
+
+    # Anti-spoofing: reject photo/screen/video (motion + blink + texture)
+    if len(face_crops) >= 2:
+        liveness = check_liveness_sequence([c for c in face_crops if c is not None and c.size > 0])
+    else:
+        liveness = check_liveness(face_crops[0]) if face_crops and face_crops[0] is not None else {"is_live": False}
+    if not liveness.get("is_live", True):
+        logger.warning(f"Registration rejected (spoof): {liveness.get('reason', 'liveness failed')}")
+        return jsonify({
+            "status": "spoof",
+            "message": liveness.get("reason", "Liveness check failed. Use a live face, not a photo or screen."),
+            "reason": liveness.get("reason", "Liveness check failed"),
+            "composite": liveness.get("score", 0.0),
+        }), 400
+
+    # Check for duplicate face registration
+    for emb in embeddings:
+        match_id, score = store.search(emb)
+        if match_id:
+            match_emp = get_employee(match_id)
+            match_name = match_emp["name"] if match_emp else match_id
+            logger.warning(f"Registration rejected: face already registered to {match_name} ({match_id})")
+            return jsonify({
+                "status": "error",
+                "message": f"This face is already registered to {match_name} ({match_id})."
+            }), 400
+
+    # Persist employee in DB and embeddings in FAISS
+    add_employee(employee_id, name, user_type=user_type, aadhaar=aadhaar, mobile=mobile)
+    store.add(employee_id, embeddings)
+
+    logger.info(f"Registered {employee_id} with {len(embeddings)} embedding(s).")
+    return jsonify({
+        "status": "registered",
+        "employee_id": employee_id,
+        "name": name,
+        "user_type": user_type,
+        "embeddings_stored": len(embeddings),
+    })
+
+
+@app.route("/api/recognize", methods=["POST"])
+def api_recognize():
+    """
+    Body JSON:
+      { frame: base64DataUrl }  or  { frames: [base64DataUrl, ...] }
+    When frames is provided, uses sequence liveness (motion + blink).
+
+    Response JSON (one of):
+      { status: 'success',        name, timestamp }
+      { status: 'already_marked', name }
+      { status: 'spoof', reason, composite }
+      { status: 'unknown' }
+      { status: 'no_face' }
+    """
+    data = request.get_json(force=True)
+    frame = data.get("frame", "")
+    frames = data.get("frames", [])
+
+    # Prefer frames for sequence liveness (motion + blink) when available
+    if frames and len(frames) >= 2:
+        try:
+            face_crops = get_face_crops_from_frames(frames)
+        except Exception:
+            face_crops = []
+        if not face_crops:
+            return jsonify({"status": "no_face"})
+        # Use latest frame for identity
+        try:
+            img = decode_image(frames[-1])
+        except Exception:
+            return jsonify({"status": "no_face"})
+        embedding, _ = get_face_embedding(img)
+        if embedding is None:
+            return jsonify({"status": "no_face"})
+        liveness = check_liveness_sequence(face_crops)
+    else:
+        if not frame:
+            return jsonify({"status": "no_face"})
+        try:
+            img = decode_image(frame)
+        except Exception:
+            return jsonify({"status": "no_face"})
+        embedding, face_crop = get_face_embedding(img)
+        if embedding is None:
+            return jsonify({"status": "no_face"})
+        if face_crop is not None:
+            liveness = check_liveness(face_crop)
+        else:
+            liveness = {"is_live": True}
+
+    if not liveness.get("is_live", True):
+        logger.info(f"Spoof detected (score={liveness.get('score', 0):.4f}, reason={liveness.get('reason', '')})")
+        return jsonify({
+            "status": "spoof",
+            "reason": liveness.get("reason", "Liveness check failed"),
+            "scores": liveness.get("scores", {}),
+            "composite": liveness.get("score", 0.0),
+        })
+
+    # Identity search
+    employee_id, score = store.search(embedding)
+    if employee_id is None:
+        return jsonify({"status": "unknown"})
+
+    employee = get_employee(employee_id)
+    name = employee["name"] if employee else employee_id
+
+    result = mark_attendance(employee_id)
+
+    if result["status"] == "cooldown":
+        return jsonify({
+            "status": "cooldown",
+            "name": name,
+            "message": "Please wait 1 minute before punching again.",
+        })
+
+    punch_type = result.get("punch_type", "in")
+    logger.info(f"Punch {punch_type}: {employee_id} ({name}) at {result['timestamp']}")
+    return jsonify({
+        "status": "success",
+        "name": name,
+        "employee_id": employee_id,
+        "timestamp": result["timestamp"],
+        "punch_type": punch_type,
+        "confidence": round(score, 4),
+    })
+
+
+@app.route("/api/verify-pin", methods=["POST"])
+def api_verify_pin():
+    """Verify PIN to unlock Register form for this page. PIN must match REGISTER_PIN (default 3620)."""
+    data = request.get_json(force=True)
+    pin = (data.get("pin") or "").strip()
+    if pin == REGISTER_PIN:
+        return jsonify({"status": "ok", "message": "Verified"})
+    return jsonify({"status": "error", "message": "Incorrect PIN"}), 403
+
+
+@app.route("/api/employees", methods=["GET"])
+def api_employees_list():
+    employees = get_all_employees()
+    return jsonify({"status": "ok", "employees": employees, "count": len(employees)})
+
+
+@app.route("/api/attendance/today", methods=["GET"])
+def api_today_attendance():
+    records = get_today_attendance()
+    return jsonify({"status": "ok", "records": records, "count": len(records)})
+
+
+@app.route("/api/health", methods=["GET"])
+def health():
+    return jsonify({
+        "status": "ok",
+        "total_employees_indexed": store.total_vectors,
+    })
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 5000))
+    debug = os.environ.get("FLASK_DEBUG", "0") == "1"
+    logger.info(f"One Step Greener starting on http://localhost:{port}")
+    app.run(host="0.0.0.0", port=port, debug=debug, threaded=True)

database/db.py

@@ -0,0 +1,191 @@
+"""
+CONSTABLE – SQLite database helpers.
+Tables:
+  employees  – id (TEXT PK), name (TEXT), user_type (TEXT), aadhaar (TEXT), mobile (TEXT), registered_at (TEXT)
+  attendance – id (INTEGER PK), employee_id (TEXT FK), timestamp (TEXT), date (TEXT), punch_type (TEXT 'in'|'out')
+"""
+
+import sqlite3
+import os
+from datetime import datetime, date
+
+DB_DIR = os.path.join(os.path.dirname(__file__))
+DB_PATH = os.path.join(DB_DIR, "constable.db")
+
+
+def get_connection():
+    conn = sqlite3.connect(DB_PATH, check_same_thread=False)
+    conn.row_factory = sqlite3.Row
+    return conn
+
+
+def init_db():
+    """Create tables if they don't exist; add new columns to existing tables."""
+    os.makedirs(DB_DIR, exist_ok=True)
+    conn = get_connection()
+    cur = conn.cursor()
+    cur.executescript("""
+        CREATE TABLE IF NOT EXISTS employees (
+            id            TEXT PRIMARY KEY,
+            name          TEXT NOT NULL,
+            registered_at TEXT NOT NULL,
+            user_type     TEXT DEFAULT 'employee',
+            aadhaar       TEXT DEFAULT '',
+            mobile        TEXT DEFAULT ''
+        );
+
+        CREATE TABLE IF NOT EXISTS attendance (
+            id          INTEGER PRIMARY KEY AUTOINCREMENT,
+            employee_id TEXT NOT NULL,
+            timestamp   TEXT NOT NULL,
+            date        TEXT NOT NULL,
+            punch_type  TEXT NOT NULL DEFAULT 'in',
+            at_iso      TEXT,
+            FOREIGN KEY (employee_id) REFERENCES employees(id)
+        );
+    """)
+    # Migrate: add punch_type to attendance if missing
+    try:
+        cur.execute("SELECT punch_type FROM attendance LIMIT 1")
+    except sqlite3.OperationalError:
+        cur.execute("ALTER TABLE attendance ADD COLUMN punch_type TEXT DEFAULT 'in'")
+        cur.execute("UPDATE attendance SET punch_type = 'in' WHERE punch_type IS NULL OR punch_type = ''")
+    # Migrate: add at_iso for cooldown if missing
+    cur.execute("PRAGMA table_info(attendance)")
+    cols = [r[1] for r in cur.fetchall()]
+    if "at_iso" not in cols:
+        cur.execute("ALTER TABLE attendance ADD COLUMN at_iso TEXT")
+    # Migrate employees: add user_type, aadhaar, mobile if missing
+    for col, default in [("user_type", "employee"), ("aadhaar", ""), ("mobile", "")]:
+        try:
+            cur.execute("SELECT " + col + " FROM employees LIMIT 1")
+        except sqlite3.OperationalError:
+            cur.execute("ALTER TABLE employees ADD COLUMN " + col + " TEXT DEFAULT '" + default.replace("'", "''") + "'")
+            cur.execute("UPDATE employees SET " + col + " = ? WHERE " + col + " IS NULL", (default,))
+    conn.commit()
+    conn.close()
+
+
+# ---------------------------------------------------------------------------
+# Employee helpers
+# ---------------------------------------------------------------------------
+
+def add_employee(employee_id: str, name: str, user_type: str = "employee", aadhaar: str = "", mobile: str = "") -> bool:
+    """Insert or replace an employee record. Returns True on success."""
+    conn = get_connection()
+    try:
+        conn.execute(
+            """INSERT OR REPLACE INTO employees (id, name, registered_at, user_type, aadhaar, mobile)
+               VALUES (?, ?, ?, ?, ?, ?)""",
+            (employee_id, name, datetime.now().isoformat(timespec="seconds"), user_type, aadhaar or "", mobile or ""),
+        )
+        conn.commit()
+        return True
+    except Exception as e:
+        print(f"[DB] add_employee error: {e}")
+        return False
+    finally:
+        conn.close()
+
+
+def get_employee(employee_id: str):
+    """Return employee row or None."""
+    conn = get_connection()
+    try:
+        row = conn.execute(
+            "SELECT * FROM employees WHERE id = ?", (employee_id,)
+        ).fetchone()
+        return dict(row) if row else None
+    finally:
+        conn.close()
+
+
+def get_all_employees():
+    conn = get_connection()
+    try:
+        rows = conn.execute("SELECT * FROM employees ORDER BY registered_at DESC").fetchall()
+        return [dict(r) for r in rows]
+    finally:
+        conn.close()
+
+
+def delete_employee(employee_id: str) -> bool:
+    """Delete an employee and their attendance records. Returns True on success."""
+    conn = get_connection()
+    try:
+        conn.execute("DELETE FROM attendance WHERE employee_id = ?", (employee_id,))
+        conn.execute("DELETE FROM employees WHERE id = ?", (employee_id,))
+        conn.commit()
+        return True
+    except Exception as e:
+        print(f"[DB] delete_employee error: {e}")
+        return False
+    finally:
+        conn.close()
+
+
+# ---------------------------------------------------------------------------
+# Attendance: one punch in per day, then only punch out; 1 min cooldown; last punch out only
+# ---------------------------------------------------------------------------
+
+COOLDOWN_SECONDS = 60
+
+
+def mark_attendance(employee_id: str) -> dict:
+    """
+    First time today = punch in only. Every other time = punch out only.
+    1 min cooldown for same user. Only last punch out time is used for display.
+    Returns {'status': 'success'|'cooldown', 'punch_type': 'in'|'out', 'timestamp': ...}
+    """
+    today = date.today().isoformat()
+    now = datetime.now()
+    now_iso = now.isoformat()
+    ts = now.strftime("%I:%M %p")
+    conn = get_connection()
+    try:
+        last_row = conn.execute(
+            "SELECT at_iso FROM attendance WHERE employee_id = ? AND date = ? ORDER BY id DESC LIMIT 1",
+            (employee_id, today),
+        ).fetchone()
+        if last_row and last_row["at_iso"]:
+            try:
+                last_dt = datetime.fromisoformat(last_row["at_iso"])
+                if (now - last_dt).total_seconds() < COOLDOWN_SECONDS:
+                    return {"status": "cooldown", "punch_type": None, "timestamp": None}
+            except (ValueError, TypeError):
+                pass
+
+        has_any_today = conn.execute(
+            "SELECT 1 FROM attendance WHERE employee_id = ? AND date = ? LIMIT 1",
+            (employee_id, today),
+        ).fetchone()
+        next_punch = "out" if has_any_today else "in"
+
+        conn.execute(
+            "INSERT INTO attendance (employee_id, timestamp, date, punch_type, at_iso) VALUES (?, ?, ?, ?, ?)",
+            (employee_id, ts, today, next_punch, now_iso),
+        )
+        conn.commit()
+        return {"status": "success", "punch_type": next_punch, "timestamp": ts}
+    finally:
+        conn.close()
+
+
+def get_today_attendance():
+    """Return today's attendance: one row per employee with first punch_in and last punch_out."""
+    today = date.today().isoformat()
+    conn = get_connection()
+    try:
+        rows = conn.execute(
+            """SELECT e.id, e.name,
+                      (SELECT MIN(a.timestamp) FROM attendance a WHERE a.employee_id = e.id AND a.date = ? AND a.punch_type = 'in') AS punch_in,
+                      (SELECT MAX(a.timestamp) FROM attendance a WHERE a.employee_id = e.id AND a.date = ? AND a.punch_type = 'out') AS punch_out
+               FROM attendance a
+               JOIN employees e ON a.employee_id = e.id
+               WHERE a.date = ?
+               GROUP BY e.id, e.name""",
+            (today, today, today),
+        ).fetchall()
+        return [dict(r) for r in rows]
+    finally:
+        conn.close()

database/face_index.faiss

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

database/face_meta.json

@@ -0,0 +1 @@
+{"0": "sahil", "1": "sahil", "2": "sahil", "3": "sahil", "4": "sahil", "5": "tt", "6": "tt", "7": "tt", "8": "tt", "9": "tt", "10": "EMP-TEST", "11": "dasdasd", "12": "dasdasd", "13": "dasdasd", "14": "dasdasd", "15": "dasdasd", "16": "TANISHK", "17": "TANISHK", "18": "TANISHK", "19": "TANISHK", "20": "TANISHK", "21": "PRIYANSHU", "22": "PRIYANSHU", "23": "PRIYANSHU", "24": "PRIYANSHU", "25": "PRIYANSHU", "26": "Amber", "27": "Amber", "28": "Amber", "29": "Amber", "30": "Amber", "31": "Gunjan", "32": "Gunjan", "33": "Gunjan", "34": "Gunjan", "35": "Gunjan", "36": "Abhilash", "37": "Abhilash", "38": "Abhilash", "39": "Abhilash", "40": "Abhilash", "41": "48670hy", "42": "48670hy", "43": "48670hy", "44": "48670hy", "45": "48670hy", "46": "sadsa", "47": "sadsa", "48": "sadsa", "49": "sadsa", "50": "sadsa"}

models/anti_spoof.py

@@ -0,0 +1,476 @@
+"""
+Multi-Layer Face Anti-Spoofing Engine (DeepFAS-inspired)
+=========================================================
+Design follows the taxonomy of "Deep Learning for Face Anti-Spoofing: A Survey"
+(TPAMI 2022): https://github.com/ZitongYu/DeepFAS
+
+Combines hybrid (handcrafted) cues + temporal (motion/blink) to detect
+print, replay, and screen attacks. Each layer scores 0.0–1.0 (1.0 = live).
+
+Static layers (single frame)
+----------------------------
+1. LBP Texture        – Real skin has rich micro-texture; flat media does not.
+2. Moiré / FFT        – Screens emit periodic grid patterns (frequency domain).
+3. Color Distribution  – Real skin: warm HSV, broad hue spread; screens flatter.
+4. Edge Density        – 3D faces yield strong edges; printed photos softer.
+5. Specular Highlights – Live faces: specular spots; flat media rarely.
+6. Central Difference – CDCN-inspired (CVPR'20): gradient structure; live skin
+   has richer central-difference response than flat prints/screens.
+   Ref: https://github.com/ZitongYu/CDCN
+
+Temporal (multi-frame)
+----------------------
+7. Motion  – Frame-to-frame variance (static image → spoof).
+8. Blink   – Eye Aspect Ratio; no blink in sequence → likely photo/video.
+"""
+
+import logging
+import numpy as np
+
+logger = logging.getLogger(__name__)
+
+# ─── Optional imports ────────────────────────────────────────────────────────
+try:
+    from skimage.feature import local_binary_pattern
+    SKIMAGE_OK = True
+except ImportError:
+    SKIMAGE_OK = False
+
+try:
+    import cv2
+    CV2_OK = True
+except ImportError:
+    CV2_OK = False
+
+try:
+    import mediapipe as mp
+    MEDIAPIPE_OK = True
+except (ImportError, TypeError, Exception):
+    MEDIAPIPE_OK = False
+    mp = None
+
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# Tunable thresholds / weights
+# ═══════════════════════════════════════════════════════════════════════════════
+COMPOSITE_THRESHOLD = 0.60          # below this → spoof (stricter: block images/screens)
+
+WEIGHTS = {
+    "lbp":       0.20,
+    "moire":     0.20,
+    "color":     0.18,
+    "edge":      0.12,
+    "specular":  0.10,
+    "cdc":       0.20,   # Central Difference (CDCN-inspired)
+}
+
+# Per-layer knobs
+LBP_RADIUS          = 1
+LBP_N_POINTS        = 8
+LBP_VAR_LIVE_MIN    = 0.0025        # higher bar (photos are flatter)
+
+MOIRE_HIGH_RATIO_MAX = 0.32         # stricter for screens         # high-freq energy ratio above this → likely screen
+
+COLOR_SAT_LIVE_MIN   = 35.0         # real skin has more saturation
+COLOR_HUE_STD_MIN    = 14.0         # more hue spread for live skin
+
+EDGE_RATIO_LIVE_MIN  = 0.05         # printed photos often softer
+EDGE_RATIO_MAX       = 0.28
+
+SPECULAR_BRIGHT_THRES = 228
+SPECULAR_RATIO_MIN   = 0.0025
+
+# Central Difference (CDCN-inspired): gradient structure variance
+CDC_VAR_LIVE_MIN = 8.0    # below this → flat → spoof (tuned for 64x64 diff map)
+
+# Sequence: motion and blink
+MOTION_VAR_MIN = 2.5e-5             # frame-to-frame variance below this → static → spoof
+MIN_FRAMES_FOR_MOTION = 3
+EAR_BLINK_THRESHOLD = 0.22          # EAR below this = blink
+EAR_MIN_FRAMES = 4
+BLINK_REQUIRED = True               # require at least one blink in sequence
+
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# Helpers
+# ═══════════════════════════════════════════════════════════════════════════════
+
+def _to_uint8(img: np.ndarray) -> np.ndarray:
+    if img.dtype != np.uint8:
+        return (img * 255).clip(0, 255).astype(np.uint8)
+    return img
+
+
+def _to_gray(img: np.ndarray) -> np.ndarray:
+    img = _to_uint8(img)
+    if img.ndim == 3:
+        if CV2_OK:
+            code = cv2.COLOR_RGBA2GRAY if img.shape[2] == 4 else cv2.COLOR_RGB2GRAY
+            return cv2.cvtColor(img, code)
+        return (0.299 * img[..., 0] + 0.587 * img[..., 1] + 0.114 * img[..., 2]).astype(np.uint8)
+    return img
+
+
+def _to_hsv(img: np.ndarray) -> np.ndarray:
+    img = _to_uint8(img)
+    if img.ndim == 2:
+        img = np.stack([img, img, img], axis=-1)
+    if img.shape[2] == 4:
+        img = img[..., :3]
+    if CV2_OK:
+        return cv2.cvtColor(img, cv2.COLOR_RGB2HSV)
+    # Minimal fallback – enough for heuristic scoring
+    r, g, b = img[..., 0].astype(float), img[..., 1].astype(float), img[..., 2].astype(float)
+    mx = np.maximum(np.maximum(r, g), b)
+    mn = np.minimum(np.minimum(r, g), b)
+    diff = mx - mn + 1e-10
+    h = np.where(mx == r, 60 * ((g - b) / diff) % 360,
+        np.where(mx == g, 60 * ((b - r) / diff) + 120,
+                           60 * ((r - g) / diff) + 240))
+    s = np.where(mx == 0, 0, (diff / (mx + 1e-10)) * 255)
+    v = mx
+    return np.stack([h / 2, s, v], axis=-1).astype(np.uint8)
+
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# Individual scoring layers (each returns 0.0 – 1.0, higher = more live-like)
+# ═══════════════════════════════════════════════════════════════════════════════
+
+def _score_lbp(gray: np.ndarray) -> float:
+    """LBP histogram variance — rich texture ⇒ high score."""
+    if not SKIMAGE_OK:
+        return 0.5  # neutral fallback
+    lbp = local_binary_pattern(gray, LBP_N_POINTS, LBP_RADIUS, method="uniform")
+    n_bins = LBP_N_POINTS + 2
+    hist, _ = np.histogram(lbp.ravel(), bins=n_bins, range=(0, n_bins), density=True)
+    var = float(np.var(hist))
+    # Map variance to 0-1. Anything ≥ 2× the threshold is fully live.
+    score = min(1.0, var / (LBP_VAR_LIVE_MIN * 2))
+    return score
+
+
+def _score_moire(gray: np.ndarray) -> float:
+    """
+    FFT high-frequency energy ratio.
+    Screens produce periodic moiré patterns that concentrate energy at
+    specific high frequencies.  A high ratio → likely screen → low score.
+    """
+    f = np.fft.fft2(gray.astype(np.float32))
+    fshift = np.fft.fftshift(f)
+    magnitude = np.abs(fshift)
+
+    rows, cols = gray.shape
+    crow, ccol = rows // 2, cols // 2
+    # Define "low frequency" as the central 30% of the spectrum
+    r = int(min(rows, cols) * 0.15)
+    mask_low = np.zeros_like(magnitude, dtype=bool)
+    y, x = np.ogrid[:rows, :cols]
+    mask_low[((y - crow)**2 + (x - ccol)**2) <= r**2] = True
+
+    total = magnitude.sum() + 1e-10
+    low_energy = magnitude[mask_low].sum()
+    high_ratio = 1.0 - (low_energy / total)
+
+    # high_ratio close to 1 means most energy is high-freq → moiré likely
+    if high_ratio >= MOIRE_HIGH_RATIO_MAX:
+        score = max(0.0, 1.0 - (high_ratio - MOIRE_HIGH_RATIO_MAX) / 0.3)
+    else:
+        score = 1.0
+    return float(score)
+
+
+def _score_color(hsv: np.ndarray) -> float:
+    """
+    HSV colour analysis.
+    Real skin has warm hue, moderate-to-high saturation, and broad hue spread.
+    Screen reproductions tend to have shifted hue and flat saturation.
+    """
+    h, s, v = hsv[..., 0].astype(float), hsv[..., 1].astype(float), hsv[..., 2].astype(float)
+
+    mean_sat = float(np.mean(s))
+    hue_std  = float(np.std(h))
+
+    sat_score = min(1.0, mean_sat / (COLOR_SAT_LIVE_MIN * 2.0))
+    hue_score = min(1.0, hue_std / (COLOR_HUE_STD_MIN * 2.0))
+
+    return 0.5 * sat_score + 0.5 * hue_score
+
+
+def _score_edge(gray: np.ndarray) -> float:
+    """
+    Canny edge density.
+    3-D faces yield strong depth/shadow edges; printed photos are softer.
+    """
+    if not CV2_OK:
+        return 0.5
+    edges = cv2.Canny(gray, 50, 150)
+    ratio = float(np.count_nonzero(edges)) / max(edges.size, 1)
+    ratio = min(ratio, EDGE_RATIO_MAX)
+    score = min(1.0, ratio / (EDGE_RATIO_LIVE_MIN * 2.0))
+    return score
+
+
+def _score_specular(hsv: np.ndarray) -> float:
+    """
+    Specular highlight detection.
+    Real 3D faces reflect light → bright spots on nose / forehead.
+    Flat media rarely reproduces these.
+    """
+    v = hsv[..., 2]
+    bright = np.count_nonzero(v >= SPECULAR_BRIGHT_THRES)
+    total = max(v.size, 1)
+    ratio = bright / total
+    score = min(1.0, ratio / (SPECULAR_RATIO_MIN * 3.0))
+    return float(score)
+
+
+def _score_central_difference(gray: np.ndarray) -> float:
+    """
+    Central-difference (CDCN-inspired) cue: gradient structure.
+    CDCN (CVPR'20) uses central difference convolution to capture fine-grained
+    structure; live skin has richer local gradient variance than flat prints.
+    We approximate with Laplacian response variance on the face crop.
+    Ref: https://github.com/ZitongYu/CDCN
+    """
+    if gray.size < 100:
+        return 0.5
+    g = _to_uint8(gray).astype(np.float32)
+    if CV2_OK:
+        # Laplacian: center-weighted difference from neighbors (CDCN-like)
+        lap = cv2.Laplacian(g, cv2.CV_32F, ksize=3)
+    else:
+        # 3x3 Laplacian via numpy: center - (L+R+U+D)
+        h, w = g.shape
+        c = g[1:-1, 1:-1]
+        lap = 4.0 * c - (g[:-2, 1:-1] + g[2:, 1:-1] + g[1:-1, :-2] + g[1:-1, 2:])
+        lap = np.pad(lap, 1, mode="edge").astype(np.float32)
+    var = float(np.var(lap))
+    score = min(1.0, var / (CDC_VAR_LIVE_MIN * 4.0)) if CDC_VAR_LIVE_MIN else 1.0
+    return score
+
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# Public API
+# ═══════════════════════════════════════════════════════════════════════════════
+
+def check_liveness(face_array: np.ndarray) -> dict:
+    """
+    Parameters
+    ----------
+    face_array : np.ndarray
+        Cropped face region (RGB, uint8 or float32, any resolution).
+
+    Returns
+    -------
+    dict
+        is_live  : bool
+        score    : float   (composite 0-1, higher = more live)
+        scores   : dict    (per-layer breakdown)
+        reason   : str     (human-readable reason if spoof)
+        method   : str
+    """
+    if face_array is None or face_array.size == 0:
+        return {
+            "is_live": False, "score": 0.0,
+            "scores": {}, "reason": "Empty face input", "method": "empty",
+        }
+
+    gray = _to_gray(face_array)
+    hsv  = _to_hsv(face_array)
+
+    # Run all layers (including CDCN-inspired central difference)
+    layer_scores = {
+        "lbp":      _score_lbp(gray),
+        "moire":    _score_moire(gray),
+        "color":    _score_color(hsv),
+        "edge":     _score_edge(gray),
+        "specular": _score_specular(hsv),
+        "cdc":      _score_central_difference(gray),
+    }
+
+    # Weighted composite
+    composite = sum(WEIGHTS[k] * layer_scores[k] for k in WEIGHTS)
+    composite = round(composite, 4)
+
+    is_live = composite >= COMPOSITE_THRESHOLD
+
+    # Determine the weakest signal for the reason string
+    reason = ""
+    if not is_live:
+        weakest = min(layer_scores, key=lambda k: layer_scores[k])
+        reason_map = {
+            "lbp":      "Flat texture — possible printed photo",
+            "moire":    "Screen moiré pattern — possible video / phone replay",
+            "color":    "Abnormal colour — possible screen reproduction",
+            "edge":     "Low edge detail — possible printed photo",
+            "specular": "No specular highlights — possible flat surface",
+            "cdc":      "Flat gradient structure — possible photo or screen (CDCN cue)",
+        }
+        reason = reason_map.get(weakest, "Liveness check failed")
+
+    logger.info(
+        f"[AntiSpoof] composite={composite:.3f} live={is_live} "
+        f"layers={{{', '.join(f'{k}={v:.3f}' for k, v in layer_scores.items())}}}"
+    )
+
+    return {
+        "is_live": is_live,
+        "score":   composite,
+        "scores":  {k: round(v, 4) for k, v in layer_scores.items()},
+        "reason":  reason,
+        "method":  "multi_layer_v1",
+    }
+
+
+# ═══════════════════════════════════════════════════════════════════════════════
+# Motion and blink (sequence liveness)
+# ═══════════════════════════════════════════════════════════════════════════════
+
+def _motion_score(face_arrays: list) -> float:
+    """
+    Frame-to-frame variance in face region. Static image → near-zero variance → 0.
+    Returns 0.0–1.0 (1.0 = enough motion).
+    """
+    if not face_arrays or len(face_arrays) < MIN_FRAMES_FOR_MOTION:
+        return 0.5  # neutral if too few frames
+    grays = []
+    for arr in face_arrays:
+        if arr is None or arr.size == 0:
+            continue
+        g = _to_gray(arr)
+        if g.size < 100:
+            continue
+        # Resize to fixed size for consistent variance
+        if CV2_OK:
+            g = cv2.resize(g, (64, 64), interpolation=cv2.INTER_AREA)
+        else:
+            from PIL import Image
+            g = np.array(Image.fromarray(g).resize((64, 64), Image.Resampling.LANCZOS))
+        grays.append(g.astype(np.float32))
+    if len(grays) < 2:
+        return 0.5
+    variances = []
+    for i in range(1, len(grays)):
+        diff = np.abs(grays[i] - grays[i - 1])
+        variances.append(float(np.mean(diff ** 2)))
+    mean_var = np.mean(variances) if variances else 0.0
+    score = min(1.0, mean_var / (MOTION_VAR_MIN * 10)) if MOTION_VAR_MIN else 1.0
+    return float(score)
+
+
+def _ear_from_landmarks(landmarks, idx1, idx2, idx3, idx4, idx5, idx6):
+    """EAR = (||p2-p6|| + ||p3-p5||) / (2*||p1-p4||)."""
+    p1 = np.array([landmarks[idx1].x, landmarks[idx1].y])
+    p2 = np.array([landmarks[idx2].x, landmarks[idx2].y])
+    p3 = np.array([landmarks[idx3].x, landmarks[idx3].y])
+    p4 = np.array([landmarks[idx4].x, landmarks[idx4].y])
+    p5 = np.array([landmarks[idx5].x, landmarks[idx5].y])
+    p6 = np.array([landmarks[idx6].x, landmarks[idx6].y])
+    v1 = np.linalg.norm(p2 - p6)
+    v2 = np.linalg.norm(p3 - p5)
+    h = 2 * np.linalg.norm(p1 - p4)
+    if h < 1e-6:
+        return 0.3
+    return (v1 + v2) / h
+
+
+# MediaPipe Face Mesh eye indices: left 33,133,160,158,153,144; right 362,263,385,387,373,380
+_LEFT_EYE = (33, 133, 160, 158, 153, 144)
+_RIGHT_EYE = (362, 263, 385, 387, 373, 380)
+
+_face_mesh = None
+
+def _get_face_mesh():
+    global _face_mesh
+    if _face_mesh is None and MEDIAPIPE_OK:
+        _face_mesh = mp.solutions.face_mesh.FaceMesh(
+            static_image_mode=True,
+            max_num_faces=1,
+            refine_landmarks=True,
+            min_detection_confidence=0.5,
+        )
+    return _face_mesh
+
+
+def _blink_detected(face_arrays: list) -> tuple:
+    """
+    Returns (has_blink: bool, ear_scores: list). Uses EAR; below EAR_BLINK_THRESHOLD = blink.
+    """
+    if not MEDIAPIPE_OK or len(face_arrays) < EAR_MIN_FRAMES:
+        return True, []  # no blink required if we can't check
+    mesh = _get_face_mesh()
+    if mesh is None:
+        return True, []
+    ear_scores = []
+    for arr in face_arrays:
+        if arr is None or arr.size == 0:
+            continue
+        img = _to_uint8(arr)
+        if img.ndim == 2:
+            img = np.stack([img, img, img], axis=-1)
+        if img.shape[2] == 4:
+            img = img[..., :3]
+        results = mesh.process(img)
+        if not results.multi_face_landmarks:
+            continue
+        lm = results.multi_face_landmarks[0]
+        ear_left = _ear_from_landmarks(lm.landmark, *_LEFT_EYE)
+        ear_right = _ear_from_landmarks(lm.landmark, *_RIGHT_EYE)
+        ear = (ear_left + ear_right) / 2.0
+        ear_scores.append(ear)
+    if len(ear_scores) < EAR_MIN_FRAMES:
+        return True, ear_scores
+    has_blink = any(e < EAR_BLINK_THRESHOLD for e in ear_scores)
+    return has_blink, ear_scores
+
+
+def check_liveness_sequence(face_arrays: list) -> dict:
+    """
+    Multi-frame liveness: single-frame composite + motion + blink.
+    face_arrays: list of cropped face numpy arrays (RGB).
+    Returns same shape as check_liveness; is_live False if any check fails.
+    """
+    if not face_arrays:
+        return {
+            "is_live": False, "score": 0.0,
+            "scores": {}, "reason": "No frames", "method": "sequence",
+        }
+    # Single-frame checks on the latest frame
+    latest = face_arrays[-1] if face_arrays else None
+    single = check_liveness(latest) if latest is not None and latest.size > 0 else {
+        "is_live": False, "score": 0.0, "scores": {}, "reason": "No face", "method": "single",
+    }
+    if not single["is_live"]:
+        return single
+
+    # Motion: require some frame-to-frame change (reject static photo)
+    motion = _motion_score(face_arrays)
+    if motion < 0.15:  # very low motion → likely static image
+        logger.info(f"[AntiSpoof] sequence: motion too low ({motion:.4f}) → spoof")
+        return {
+            "is_live": False,
+            "score": round(single["score"] * 0.5, 4),
+            "scores": {**single.get("scores", {}), "motion": round(motion, 4)},
+            "reason": "No motion detected — possible photo or screen.",
+            "method": "sequence",
+        }
+
+    # Blink: require at least one blink in sequence (reject photo/video without blink)
+    has_blink, ear_scores = _blink_detected(face_arrays)
+    if BLINK_REQUIRED and len(ear_scores) >= EAR_MIN_FRAMES and not has_blink:
+        logger.info(f"[AntiSpoof] sequence: no blink in {len(ear_scores)} frames → spoof")
+        return {
+            "is_live": False,
+            "score": round(single["score"] * 0.6, 4),
+            "scores": {**single.get("scores", {}), "blink": 0.0},
+            "reason": "No blink detected — please look at the camera and blink naturally.",
+            "method": "sequence",
+        }
+
+    return {
+        "is_live": True,
+        "score": single["score"],
+        "scores": single.get("scores", {}),
+        "reason": "",
+        "method": "sequence",
+    }

models/embeddings_store.py

@@ -0,0 +1,138 @@
+"""
+CONSTABLE – FAISS embedding store for face vectors.
+Face embeddings (512-d float32 from FaceNet/InceptionResnetV1) are stored in a
+flat L2 index.  A parallel JSON sidecar maps FAISS integer IDs → employee IDs.
+"""
+
+import os
+import json
+import numpy as np
+
+try:
+    import faiss
+    FAISS_AVAILABLE = True
+except ImportError:
+    FAISS_AVAILABLE = False
+    print("[EmbeddingStore] faiss-cpu not installed – using brute-force fallback.")
+
+DB_DIR = os.path.join(os.path.dirname(__file__), "..", "database")
+INDEX_PATH = os.path.join(DB_DIR, "face_index.faiss")
+META_PATH  = os.path.join(DB_DIR, "face_meta.json")
+
+EMBEDDING_DIM = 512
+SIMILARITY_THRESHOLD = 0.85   # cosine similarity threshold (after L2-normalisation)
+
+
+class EmbeddingStore:
+    def __init__(self):
+        os.makedirs(DB_DIR, exist_ok=True)
+        self._load()
+
+    # ------------------------------------------------------------------
+    # Internal helpers
+    # ------------------------------------------------------------------
+
+    def _load(self):
+        if FAISS_AVAILABLE and os.path.exists(INDEX_PATH) and os.path.exists(META_PATH):
+            self.index = faiss.read_index(INDEX_PATH)
+            with open(META_PATH) as f:
+                self.meta = json.load(f)   # {str(faiss_id): employee_id}
+        else:
+            if FAISS_AVAILABLE:
+                self.index = faiss.IndexFlatIP(EMBEDDING_DIM)   # inner product on L2-normed vecs = cosine
+            else:
+                self.index = None
+            self.meta = {}
+
+    def _save(self):
+        if FAISS_AVAILABLE and self.index is not None:
+            faiss.write_index(self.index, INDEX_PATH)
+        with open(META_PATH, "w") as f:
+            json.dump(self.meta, f)
+
+    @staticmethod
+    def _normalise(vec: np.ndarray) -> np.ndarray:
+        norm = np.linalg.norm(vec)
+        return vec / norm if norm > 1e-10 else vec
+
+    # ------------------------------------------------------------------
+    # Public API
+    # ------------------------------------------------------------------
+
+    def add(self, employee_id: str, embeddings: list):
+        """Add one or more embeddings for an employee."""
+        for emb in embeddings:
+            vec = self._normalise(np.array(emb, dtype=np.float32)).reshape(1, -1)
+            if FAISS_AVAILABLE and self.index is not None:
+                faiss_id = self.index.ntotal
+                self.index.add(vec)
+                self.meta[str(faiss_id)] = employee_id
+            else:
+                # Brute-force fallback: store as list in meta
+                faiss_id = len(self.meta)
+                self.meta[str(faiss_id)] = {"id": employee_id, "vec": vec.tolist()[0]}
+        self._save()
+
+    def search(self, embedding: np.ndarray, top_k: int = 1):
+        """
+        Returns (employee_id, similarity_score) or (None, 0.0) if no match.
+        """
+        vec = self._normalise(np.array(embedding, dtype=np.float32)).reshape(1, -1)
+
+        if FAISS_AVAILABLE and self.index is not None and self.index.ntotal > 0:
+            distances, indices = self.index.search(vec, top_k)
+            best_idx = int(indices[0][0])
+            best_score = float(distances[0][0])
+            if best_score >= SIMILARITY_THRESHOLD and best_idx != -1:
+                employee_id = self.meta.get(str(best_idx))
+                return employee_id, best_score
+            return None, best_score
+
+        # Brute-force fallback
+        best_score = -1.0
+        best_id = None
+        for key, val in self.meta.items():
+            if isinstance(val, dict):
+                stored_vec = np.array(val["vec"], dtype=np.float32)
+                score = float(np.dot(vec.flatten(), stored_vec))
+                if score > best_score:
+                    best_score = score
+                    best_id = val["id"]
+        if best_score >= SIMILARITY_THRESHOLD:
+            return best_id, best_score
+        return None, best_score
+
+    def remove_employee(self, employee_id: str):
+        """Remove all vectors for an employee (requires index rebuild)."""
+        if not FAISS_AVAILABLE or self.index is None:
+            self.meta = {k: v for k, v in self.meta.items()
+                         if not (isinstance(v, dict) and v.get("id") == employee_id)}
+            self._save()
+            return
+
+        # Collect surviving entries
+        survivors = [(k, v) for k, v in self.meta.items() if v != employee_id]
+        new_index = faiss.IndexFlatIP(EMBEDDING_DIM)
+        new_meta = {}
+
+        # We can't retrieve raw vectors from IndexFlatIP after the fact,
+        # so we rebuild from scratch using stored reconstructed vectors.
+        # (IndexFlatIP supports reconstruct)
+        for old_key, emp_id in self.meta.items():
+            if emp_id == employee_id:
+                continue
+            vec = np.zeros((1, EMBEDDING_DIM), dtype=np.float32)
+            self.index.reconstruct(int(old_key), vec.reshape(-1))
+            new_id = new_index.ntotal
+            new_index.add(vec)
+            new_meta[str(new_id)] = emp_id
+
+        self.index = new_index
+        self.meta = new_meta
+        self._save()
+
+    @property
+    def total_vectors(self):
+        if FAISS_AVAILABLE and self.index is not None:
+            return self.index.ntotal
+        return sum(1 for v in self.meta.values() if isinstance(v, dict))

models/face_engine.py

@@ -0,0 +1,191 @@
+"""
+CONSTABLE – Face detection and recognition engine.
+Uses:
+  • MTCNN  – fast face detection & alignment
+  • InceptionResnetV1 (pretrained='vggface2') – 512-d face embeddings
+"""
+
+import io
+import base64
+import logging
+import numpy as np
+from PIL import Image
+
+logger = logging.getLogger(__name__)
+
+# ─── Lazy imports so the app starts even if GPU is not available ───────────
+try:
+    from facenet_pytorch import MTCNN, InceptionResnetV1
+    import torch
+    FACENET_OK = True
+except ImportError:
+    FACENET_OK = False
+    logger.warning("facenet-pytorch not installed – face recognition disabled.")
+
+try:
+    import cv2
+    CV2_OK = True
+except ImportError:
+    CV2_OK = False
+
+
+DEVICE = "cpu"
+if FACENET_OK:
+    try:
+        import torch
+        if torch.cuda.is_available():
+            DEVICE = "cuda"
+    except Exception:
+        pass
+
+_mtcnn = None
+_resnet = None
+
+
+def _get_models():
+    global _mtcnn, _resnet
+    if _mtcnn is None:
+        _mtcnn = MTCNN(
+            image_size=160,
+            margin=20,
+            min_face_size=40,
+            thresholds=[0.6, 0.7, 0.7],
+            factor=0.709,
+            post_process=True,
+            keep_all=False,
+            device=DEVICE,
+        )
+    if _resnet is None:
+        _resnet = InceptionResnetV1(pretrained="vggface2").eval().to(DEVICE)
+    return _mtcnn, _resnet
+
+
+# ─── Public API ────────────────────────────────────────────────────────────
+
+def decode_image(data_url: str) -> Image.Image:
+    """Convert a base64 data-URL to a PIL Image (RGB)."""
+    if "," in data_url:
+        data_url = data_url.split(",", 1)[1]
+    raw = base64.b64decode(data_url)
+    img = Image.open(io.BytesIO(raw)).convert("RGB")
+    return img
+
+
+def check_face_in_frame(pil_image: Image.Image) -> dict:
+    """
+    Lightweight face check for live feedback (no embedding).
+    Returns dict: face_detected, centered, big_enough.
+    Face is centered if bbox center lies in middle 50% of image.
+    Big enough if face width >= 80px and area >= 3% of image.
+    """
+    out = {"face_detected": False, "centered": False, "big_enough": False}
+    if not FACENET_OK:
+        return out
+    mtcnn, _ = _get_models()
+    try:
+        boxes, _ = mtcnn.detect(pil_image)
+    except Exception as e:
+        logger.debug(f"Face check error: {e}")
+        return out
+    if boxes is None or len(boxes) == 0:
+        return out
+    w, h = pil_image.size
+    b = boxes[0]
+    x1, y1, x2, y2 = float(b[0]), float(b[1]), float(b[2]), float(b[3])
+    face_w = x2 - x1
+    face_h = y2 - y1
+    face_area = face_w * face_h
+    img_area = w * h
+    out["face_detected"] = True
+    # Centered: face center in middle 50% of frame
+    cx = (x1 + x2) / 2
+    cy = (y1 + y2) / 2
+    out["centered"] = (0.25 * w <= cx <= 0.75 * w) and (0.25 * h <= cy <= 0.75 * h)
+    # Big enough: width >= 80 and area >= 3% of image
+    out["big_enough"] = face_w >= 80 and (face_area / max(img_area, 1)) >= 0.03
+    return out
+
+
+def get_face_embedding(pil_image: Image.Image):
+    """
+    Detect the largest face and return its 512-d embedding as a numpy array.
+    Returns (embedding: np.ndarray, face_crop: np.ndarray) or (None, None).
+    """
+    if not FACENET_OK:
+        return None, None
+
+    mtcnn, resnet = _get_models()
+
+    try:
+        # MTCNN returns aligned face tensor (or None)
+        face_tensor, prob = mtcnn(pil_image, return_prob=True)
+    except Exception as e:
+        logger.debug(f"MTCNN error: {e}")
+        return None, None
+
+    if face_tensor is None:
+        return None, None
+
+    # Get the face crop as numpy for anti-spoofing
+    boxes, _ = mtcnn.detect(pil_image)
+    face_crop = None
+    if boxes is not None and len(boxes) > 0:
+        b = boxes[0].astype(int)
+        arr = np.array(pil_image)
+        x1, y1, x2, y2 = max(0, b[0]), max(0, b[1]), b[2], b[3]
+        face_crop = arr[y1:y2, x1:x2]
+
+    import torch
+    with torch.no_grad():
+        embedding = resnet(face_tensor.unsqueeze(0).to(DEVICE))
+
+    return embedding.squeeze().cpu().numpy(), face_crop
+
+
+def get_embeddings_from_frames(data_urls: list):
+    """
+    Process a list of base64 frame data-URLs.
+    Returns list of valid 512-d embeddings (may be empty).
+    """
+    embeddings = []
+    for url in data_urls:
+        try:
+            img = decode_image(url)
+            emb, _ = get_face_embedding(img)
+            if emb is not None:
+                embeddings.append(emb.tolist())
+        except Exception as e:
+            logger.debug(f"Frame processing error: {e}")
+    return embeddings
+
+
+def get_embeddings_and_crops_from_frames(data_urls: list):
+    """
+    Process a list of base64 frame data-URLs.
+    Returns (embeddings: list of 512-d lists, face_crops: list of np.ndarray or None).
+    face_crops[i] is the face crop for frame i (None if no face in that frame).
+    """
+    embeddings = []
+    crops = []
+    for url in data_urls:
+        try:
+            img = decode_image(url)
+            emb, face_crop = get_face_embedding(img)
+            if emb is not None:
+                embeddings.append(emb.tolist())
+                crops.append(face_crop)
+            else:
+                crops.append(None)
+        except Exception as e:
+            logger.debug(f"Frame processing error: {e}")
+            crops.append(None)
+    return embeddings, crops
+
+
+def get_face_crops_from_frames(data_urls: list):
+    """
+    Get face crops only from a list of base64 frame data-URLs (for liveness sequence).
+    Returns list of np.ndarray (face crops); frames with no face are omitted.
+    """
+    _, crops = get_embeddings_and_crops_from_frames(data_urls)
+    return [c for c in crops if c is not None and c.size > 0]

requirements.txt

@@ -0,0 +1,10 @@
+flask>=2.3.0
+torch>=2.0.0
+torchvision>=0.15.0
+facenet-pytorch>=2.5.2
+faiss-cpu>=1.7.4
+numpy>=1.24.0
+Pillow>=10.0.0
+opencv-python-headless>=4.8.0
+scikit-image>=0.21.0
+mediapipe>=0.10.0

static/css/style.css

@@ -0,0 +1,842 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   One Step Greener — Design System
+   Minimal, green-accent UI (Uniqlo-inspired). Waste management / sustainability.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Tokens ──────────────────────────────────────────────────────────────── */
+:root {
+    --color-bg: #f8f9f7;
+    --color-surface: #ffffff;
+    --color-surface-2: #f0f2ef;
+    --color-border: #e8ebe6;
+    --color-primary: #2d6a4f;
+    --color-primary-light: #40916c;
+    --color-primary-dim: rgba(45, 106, 79, 0.12);
+    --color-danger: #c1121f;
+    --color-warn: #b08968;
+    --color-text: #1b1b1b;
+    --color-text-muted: #5c5c5c;
+    --color-text-subtle: #8d8d8d;
+
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-full: 9999px;
+
+    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06);
+    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
+
+    --transition: 0.2s ease;
+
+    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --max-w: 480px;
+}
+
+/* ── Reset ───────────────────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    height: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    min-height: 100%;
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font);
+    font-size: 16px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* ── Shell ───────────────────────────────────────────────────────────────── */
+.app-shell {
+    min-height: 100dvh;
+    max-width: var(--max-w);
+    margin: 0 auto;
+    padding: 24px 20px 48px;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ── Top bar ─────────────────────────────────────────────────────────────── */
+.top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0 16px;
+    font-size: 12px;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted);
+    border-bottom: 1px solid var(--color-border);
+    margin-bottom: 40px;
+}
+
+.top-bar a {
+    line-height: 0;
+    transition: opacity var(--transition);
+}
+
+.top-bar a:hover {
+    opacity: 0.7;
+}
+
+.top-bar-logo-wrap {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    background: transparent;
+}
+
+.top-bar-logo {
+    height: 32px;
+    width: auto;
+    max-width: 160px;
+    object-fit: contain;
+    display: block;
+    background: transparent;
+}
+
+.top-bar-logo-sm {
+    height: 26px;
+    max-width: 120px;
+    background: transparent;
+}
+
+.clock {
+    font-variant-numeric: tabular-nums;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-primary);
+    letter-spacing: 0.05em;
+}
+
+/* ── Typography ──────────────────────────────────────────────────────────── */
+h1 {
+    font-size: clamp(26px, 6vw, 36px);
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    color: var(--color-text);
+}
+
+h2 {
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    color: var(--color-text);
+}
+
+h3 {
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin-top: 8px;
+    color: var(--color-text);
+}
+
+p {
+    color: var(--color-text-muted);
+    font-size: 14px;
+}
+
+/* ── Grid menu (dashboard) ───────────────────────────────────────────────── */
+.grid-menu {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 14px;
+    margin-top: 24px;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    padding: 24px 18px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    text-decoration: none;
+    color: var(--color-text);
+    cursor: pointer;
+    transition: border-color var(--transition), box-shadow var(--transition);
+    user-select: none;
+    box-shadow: var(--shadow-subtle);
+}
+
+.card svg {
+    color: var(--color-primary);
+}
+
+.card span {
+    font-size: 12px;
+    color: var(--color-text-muted);
+}
+
+.card:hover,
+.card:focus-visible {
+    border-color: var(--color-primary);
+    box-shadow: var(--shadow-card);
+    outline: none;
+}
+
+.card:active {
+    opacity: 0.98;
+}
+
+/* ── PIN gate (Register) ──────────────────────────────────────────────────── */
+.pin-gate {
+    margin-top: 24px;
+    max-width: 280px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.pin-prompt {
+    font-size: 14px;
+    color: var(--color-text-muted);
+    margin-bottom: 16px;
+    text-align: center;
+}
+
+.pin-input {
+    display: block;
+    width: 100%;
+    padding: 14px 18px;
+    margin-bottom: 12px;
+    font-size: 18px;
+    letter-spacing: 0.2em;
+    text-align: center;
+}
+
+.pin-submit {
+    margin-top: 8px;
+}
+
+.pin-error {
+    font-size: 13px;
+    color: var(--color-danger);
+    margin-top: 12px;
+    text-align: center;
+}
+
+/* ── Manage / Delete users ────────────────────────────────────────────────── */
+.manage-section {
+    margin-top: 8px;
+}
+
+.manage-intro {
+    font-size: 13px;
+    color: var(--color-text-muted);
+    margin-bottom: 20px;
+}
+
+.manage-list {
+    min-height: 40px;
+}
+
+.manage-loading {
+    font-size: 13px;
+    color: var(--color-text-subtle);
+}
+
+.manage-ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.manage-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 16px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    margin-bottom: 10px;
+}
+
+.manage-item-name {
+    font-size: 14px;
+    color: var(--color-text);
+}
+
+.manage-item-id {
+    font-size: 12px;
+    color: var(--color-text-muted);
+    margin-left: 4px;
+}
+
+.manage-delete-btn {
+    flex-shrink: 0;
+    padding: 8px 14px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    color: var(--color-danger);
+    background: transparent;
+    border: 1px solid var(--color-danger);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s;
+}
+
+.manage-delete-btn:hover {
+    background: rgba(193, 18, 31, 0.1);
+}
+
+.manage-empty {
+    font-size: 13px;
+    color: var(--color-text-muted);
+    margin: 0;
+}
+
+/* ── Buttons ─────────────────────────────────────────────────────────────── */
+.btn-primary,
+.btn-outline {
+    display: block;
+    width: 100%;
+    padding: 14px 20px;
+    border-radius: var(--radius-full);
+    font-family: var(--font);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background var(--transition), border-color var(--transition),
+        opacity var(--transition);
+    border: none;
+}
+
+.btn-primary {
+    background: var(--color-primary);
+    color: #fff;
+}
+
+.btn-primary:hover:not(:disabled) {
+    background: var(--color-primary-light);
+}
+
+.btn-primary:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.btn-outline {
+    background: transparent;
+    border: 1px solid var(--color-border);
+    color: var(--color-text);
+}
+
+.btn-outline:hover {
+    border-color: var(--color-text-subtle);
+    background: var(--color-surface-2);
+}
+
+/* ── Form inputs ─────────────────────────────────────────────────────────── */
+input[type="text"] {
+    display: block;
+    width: 100%;
+    padding: 12px 16px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    color: var(--color-text);
+    font-family: var(--font);
+    font-size: 15px;
+    margin-bottom: 10px;
+    transition: border-color var(--transition);
+    outline: none;
+    -webkit-appearance: none;
+}
+
+input[type="text"]::placeholder {
+    color: var(--color-text-subtle);
+}
+
+input[type="text"]:focus {
+    border-color: var(--color-primary);
+}
+
+/* ── Camera: attendance page (circle view) ───────────────────────────────── */
+.camera-container {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+    max-width: 320px;
+    margin: 28px auto 0;
+    border-radius: 50%;
+    overflow: hidden;
+    background: var(--color-surface-2);
+    border: 2px solid var(--color-border);
+}
+
+.circle-feed {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+    transform: scaleX(-1);
+}
+
+.overlay-svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.overlay-svg path,
+.overlay-svg circle {
+    stroke: var(--color-primary) !important;
+}
+
+.spin-ring {
+    transform-origin: 150px 150px;
+    animation: spin 8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ── Camera: register page (rect view) ──────────────────────────────────── */
+.video-rect-container {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 4/3;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    background: var(--color-surface-2);
+    border: 1px solid var(--color-border);
+    margin-bottom: 12px;
+}
+
+.video-rect-container video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: scaleX(-1);
+}
+
+.rect-overlay {
+    position: absolute;
+    inset: 12%;
+    border: 2px dashed var(--color-primary);
+    border-radius: var(--radius-sm);
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.progress-ring {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    width: 40px;
+    height: 40px;
+    transition: stroke-dashoffset 0.4s ease;
+}
+
+.progress-ring circle[stroke="#00C853"] {
+    stroke: var(--color-primary);
+}
+
+/* ── Status indicator ────────────────────────────────────────────────────── */
+.status-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-text-subtle);
+    margin: 18px auto 6px;
+    transition: background var(--transition);
+}
+
+.status-indicator.active {
+    background: var(--color-primary);
+    animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+
+.status-text {
+    text-align: center;
+    font-size: 13px;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    color: var(--color-text-muted);
+    min-height: 20px;
+    transition: color var(--transition);
+}
+
+.status-hint {
+    text-align: center;
+    font-size: 12px;
+    color: var(--color-text-subtle);
+    margin-top: 4px;
+    margin-bottom: 0;
+}
+
+/* ── Success modal ───────────────────────────────────────────────────────── */
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+    z-index: 100;
+    backdrop-filter: blur(4px);
+}
+
+.modal-overlay.show {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.modal-card {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: 36px 28px;
+    width: 100%;
+    max-width: 320px;
+    text-align: center;
+    box-shadow: var(--shadow-card);
+    transform: translateY(12px);
+    transition: transform 0.25s ease;
+}
+
+.modal-overlay.show .modal-card {
+    transform: translateY(0);
+}
+
+.checkmark-animated {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background: var(--color-primary-dim);
+    border: 2px solid var(--color-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    color: var(--color-primary);
+    margin: 0 auto 16px;
+    animation: pop 0.4s ease forwards;
+}
+
+@keyframes pop {
+    from { transform: scale(0.9); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}
+
+.modal-card h2 {
+    font-size: 18px;
+    margin-bottom: 6px;
+}
+
+.employee-name {
+    font-size: 17px;
+    font-weight: 600;
+    color: var(--color-text);
+    margin: 4px 0;
+}
+
+.timestamp {
+    font-size: 13px;
+    color: var(--color-text-muted);
+    margin-bottom: 20px;
+}
+
+/* ── Register success state ──────────────────────────────────────────────── */
+.success-state {
+    text-align: center;
+    padding: 32px 0;
+    animation: fadeIn 0.35s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.checkmark-large,
+.success-face-icon {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 20px;
+    display: block;
+}
+
+.success-face-icon {
+    object-fit: contain;
+}
+
+.checkmark-large {
+    border-radius: 50%;
+    background: var(--color-primary-dim);
+    border: 2px solid var(--color-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 36px;
+    color: var(--color-primary);
+}
+
+.success-state h2 {
+    margin-bottom: 12px;
+}
+
+.chip {
+    display: inline-block;
+    padding: 6px 14px;
+    background: var(--color-surface-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-muted);
+    margin-bottom: 24px;
+}
+
+/* ── Register form: switchable tab Employee | Manforce ─────────────────────── */
+#registerForm {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.register-tabs {
+    display: flex;
+    gap: 0;
+    margin-bottom: 16px;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.register-tab {
+    flex: 1;
+    padding: 12px 16px;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    color: var(--color-text-muted);
+    background: transparent;
+    border: none;
+    border-bottom: 3px solid transparent;
+    cursor: pointer;
+    transition: color var(--transition), border-color var(--transition);
+}
+
+.register-tab:hover {
+    color: var(--color-text);
+}
+
+.register-tab.active {
+    color: var(--color-primary);
+    border-bottom-color: var(--color-primary);
+}
+
+.register-panel {
+    display: none;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 16px;
+}
+
+.register-panel.active {
+    display: flex;
+}
+
+.register-panel input {
+    margin-bottom: 0;
+}
+
+.register-video-shared {
+    margin-top: 8px;
+}
+
+/* ── Utility ─────────────────────────────────────────────────────────────── */
+a {
+    color: var(--color-primary);
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* ── Scrollbar ───────────────────────────────────────────────────────────── */
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--color-surface-2);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: 3px;
+}
+
+/* ── Responsive ──────────────────────────────────────────────────────────── */
+@media (min-width: 640px) {
+    .app-shell {
+        padding-top: 32px;
+    }
+    .camera-container {
+        max-width: 360px;
+    }
+}
+
+/* ── Toast (spoof / warning) ────────────────────────────────────────────── */
+.toast {
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%) translateY(-120%);
+    top: 20px;
+    z-index: 200;
+    max-width: calc(var(--max-w) - 40px);
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px 18px;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-card);
+    opacity: 0;
+    pointer-events: none;
+    transition: transform 0.3s ease, opacity 0.25s ease;
+}
+
+.toast.show {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.toast-icon {
+    flex-shrink: 0;
+    font-size: 18px;
+    line-height: 1.2;
+}
+
+.toast-body {
+    flex: 1;
+    min-width: 0;
+}
+
+.toast-title {
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 2px;
+}
+
+.toast-message {
+    font-size: 13px;
+    line-height: 1.35;
+    margin: 0;
+    opacity: 0.9;
+}
+
+.toast-danger {
+    background: #fff5f5;
+    border: 1px solid rgba(193, 18, 31, 0.3);
+    color: #5c1010;
+}
+
+.toast-danger .toast-title {
+    color: var(--color-danger);
+}
+
+.toast-danger .toast-icon {
+    color: var(--color-danger);
+}
+
+/* ── Global snackbar (popup / snack bar) ──────────────────────────────────── */
+.snackbar {
+    position: fixed;
+    left: 50%;
+    bottom: 24px;
+    transform: translateX(-50%) translateY(100px);
+    z-index: 300;
+    max-width: calc(var(--max-w) - 32px);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 20px;
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+    pointer-events: none;
+    transition: transform 0.3s ease, opacity 0.25s ease;
+}
+
+.snackbar.show {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.snackbar-icon {
+    flex-shrink: 0;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.snackbar-message {
+    font-size: 14px;
+    line-height: 1.35;
+}
+
+.snackbar-success {
+    background: var(--color-surface);
+    border: 1px solid var(--color-primary);
+    color: var(--color-text);
+}
+
+.snackbar-success .snackbar-icon {
+    color: var(--color-primary);
+}
+
+.snackbar-error {
+    background: #fff5f5;
+    border: 1px solid rgba(193, 18, 31, 0.4);
+    color: #5c1010;
+}
+
+.snackbar-error .snackbar-icon {
+    color: var(--color-danger);
+}
+
+.snackbar-info {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    color: var(--color-text);
+}
+
+.snackbar-info .snackbar-icon {
+    color: var(--color-primary);
+}

static/js/attendance.js

@@ -0,0 +1,171 @@
+const video = document.getElementById('videoFeed');
+const statusDot = document.getElementById('statusDot');
+const statusText = document.getElementById('statusText');
+const modal = document.getElementById('successModal');
+const modalTitle = document.getElementById('modalTitle');
+const modalName = document.getElementById('modalName');
+const modalTime = document.getElementById('modalTime');
+const cameraContainer = document.getElementById('cameraContainer');
+const statusHint = document.getElementById('statusHint');
+
+// Spoof toast
+const spoofToast = document.getElementById('spoofToast');
+const spoofToastMessage = document.getElementById('spoofToastMessage');
+
+// Frame buffer for sequence liveness (motion + blink); need enough frames to catch a blink
+const FRAME_BUFFER_SIZE = 14;
+const CAPTURE_INTERVAL_MS = 280;
+let frameBuffer = [];
+
+let isScanning = true;
+let stream = null;
+let toastDismissTimer = null;
+let lastFaceAlertAt = 0;
+const FACE_ALERT_COOLDOWN_MS = 4000;
+
+// ─── Camera ─────────────────────────────────────────────────────────────────
+
+async function startCamera() {
+    try {
+        stream = await navigator.mediaDevices.getUserMedia({ 
+            video: { facingMode: 'user', width: 640, height: 480 } 
+        });
+        video.srcObject = stream;
+        startCaptureLoop();
+    } catch (err) {
+        console.error("Camera error:", err);
+        statusText.textContent = "Camera access denied or unavailable";
+        statusText.style.color = "red";
+    }
+}
+
+function stopCamera() {
+    if (stream) {
+        stream.getTracks().forEach(track => track.stop());
+    }
+}
+
+function captureFrame() {
+    const canvas = document.createElement('canvas');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(video, 0, 0);
+    return canvas.toDataURL('image/jpeg', 0.8);
+}
+
+// ─── Capture loop ───────────────────────────────────────────────────────────
+
+async function startCaptureLoop() {
+    while (isScanning) {
+        if (video.readyState === video.HAVE_ENOUGH_DATA) {
+            const frame = captureFrame();
+            frameBuffer.push(frame);
+            if (frameBuffer.length > FRAME_BUFFER_SIZE) frameBuffer.shift();
+
+            // Send sequence only when we have enough frames for blink detection (backend needs ~4+ frames)
+const payload = frameBuffer.length >= 6
+                ? { frames: frameBuffer.slice() }
+                : { frame: frame };
+
+            try {
+                const response = await fetch('/api/recognize', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+
+                const result = await response.json();
+                handleResult(result);
+            } catch (e) {
+                console.log("Network error", e);
+            }
+        }
+
+        await new Promise(r => setTimeout(r, CAPTURE_INTERVAL_MS));
+    }
+}
+
+// ─── Result handler ─────────────────────────────────────────────────────────
+
+function handleResult(result) {
+    if (result.status === 'success') {
+        showSuccess(result);
+        var action = (result.punch_type === 'out') ? 'Punched out' : 'Punched in';
+        if (typeof showSnackbar === 'function') {
+            showSnackbar(action + ' at ' + (result.timestamp || ''), 'success');
+        }
+    } else if (result.status === 'cooldown') {
+        statusText.textContent = 'Please wait 1 min';
+        statusText.style.color = "#FFD700";
+        if (typeof showSnackbar === 'function') showSnackbar(result.message || 'Please wait 1 minute before punching again.', 'info');
+    } else if (result.status === 'spoof') {
+        showSpoofToast(result);
+    } else if (result.status === 'unknown') {
+        statusText.textContent = "Face not recognized";
+        statusText.style.color = "#A5A5A5";
+        if (typeof showSnackbar === 'function' && Date.now() - lastFaceAlertAt > FACE_ALERT_COOLDOWN_MS) {
+            lastFaceAlertAt = Date.now();
+            showSnackbar('Face not recognized — ensure your face is clearly visible.', 'info');
+        }
+    } else if (result.status === 'no_face') {
+        statusText.textContent = "Position your face in the frame";
+        statusText.style.color = "#A5A5A5";
+        if (typeof showSnackbar === 'function' && Date.now() - lastFaceAlertAt > FACE_ALERT_COOLDOWN_MS) {
+            lastFaceAlertAt = Date.now();
+            showSnackbar('Adjust position — keep your face clearly visible in the frame.', 'info');
+        }
+    } else if (result.status === 'spoof' && result.reason && result.reason.toLowerCase().includes('blink')) {
+        statusText.textContent = "Please blink to verify";
+        statusText.style.color = "#FFD700";
+    }
+}
+
+// ─── Spoof toast (banner, auto-dismiss) ─────────────────────────────────────
+
+function showSpoofToast(data) {
+    const msg = data.reason || data.message || "Use a live face, not a photo or screen.";
+    spoofToastMessage.textContent = msg;
+    spoofToast.classList.add('show');
+    statusText.textContent = "⚠ Spoofing detected";
+    statusText.style.color = "#FF3B30";
+
+    if (toastDismissTimer) clearTimeout(toastDismissTimer);
+    toastDismissTimer = setTimeout(() => {
+        spoofToast.classList.remove('show');
+        statusText.textContent = "Position your face in the frame";
+        statusText.style.color = "#A5A5A5";
+        toastDismissTimer = null;
+    }, 4500);
+}
+
+// ─── Success modal ──────────────────────────────────────────────────────────
+
+function showSuccess(data) {
+    isScanning = false;
+    statusDot.classList.add('active');
+    if (statusHint) statusHint.style.visibility = 'hidden';
+
+    if (modalTitle) modalTitle.textContent = (data.punch_type === 'out') ? 'Punched out' : 'Punched in';
+    if (modalName) modalName.textContent = data.name;
+    if (modalTime) modalTime.textContent = data.timestamp || '';
+    
+    modal.classList.add('show');
+    
+    // Auto dismiss after 4s
+    setTimeout(dismissModal, 4000);
+}
+
+function dismissModal() {
+    modal.classList.remove('show');
+    statusDot.classList.remove('active');
+    statusText.textContent = "Position your face in the frame";
+    statusText.style.color = "#A5A5A5";
+    if (statusHint) statusHint.style.visibility = "";
+    isScanning = true;
+    startCaptureLoop();
+}
+
+// ─── Init ───────────────────────────────────────────────────────────────────
+startCamera();
+window.addEventListener('beforeunload', stopCamera);

static/js/camera.js

@@ -0,0 +1,12 @@
+const video = document.getElementById('videoFeed');
+
+async function startCamera() {
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia({ 
+            video: { facingMode: 'user', width: 640, height: 480 } 
+        });
+        video.srcObject = stream;
+    } catch (err) {
+        console.error("Camera error:", err);
+    }
+}

static/js/register.js

@@ -0,0 +1,360 @@
+const video = document.getElementById('videoFeed');
+const progressCircle = document.getElementById('progressCircle');
+const statusText = document.getElementById('statusText');
+
+const tabEmployee = document.getElementById('tabEmployee');
+const tabManforce = document.getElementById('tabManforce');
+const panelEmployee = document.getElementById('panelEmployee');
+const panelManforce = document.getElementById('panelManforce');
+
+const manforceAadhaar = document.getElementById('manforceAadhaar');
+const manforceName = document.getElementById('manforceName');
+const manforceMobile = document.getElementById('manforceMobile');
+const btnRegisterManforce = document.getElementById('btnRegisterManforce');
+const statusTextManforce = document.getElementById('statusTextManforce');
+
+const employeeCode = document.getElementById('employeeCode');
+const btnRegisterEmployee = document.getElementById('btnRegisterEmployee');
+const statusTextEmployee = document.getElementById('statusTextEmployee');
+
+const spoofToast = document.getElementById('spoofToast');
+const spoofToastMessage = document.getElementById('spoofToastMessage');
+
+if (!video) console.warn('Register: video element missing');
+
+let activeTab = 'employee';
+let manforceFrames = [];
+let employeeFrames = [];
+let isCapturing = false;
+let captureTarget = null;
+const REQUIRED_FRAMES = 5;
+const CAPTURE_INTERVAL_MS = 650;   // 5 frames over ~3.2s so blink is likely
+const FACE_CHECK_POLL_MS = 500;
+const MAX_RETRIES_PER_SLOT = 2;    // retry each slot up to 2 times if no face
+let toastDismissTimer = null;
+let faceCheckInterval = null;
+let faceReady = false;
+
+// Start camera
+navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user', width: 640, height: 480 } })
+    .then(function(stream) { if (video) video.srcObject = stream; })
+    .catch(function(err) { console.error(err); });
+
+function switchTab(tab) {
+    activeTab = tab;
+    if (tab === 'employee') {
+        if (tabEmployee) { tabEmployee.classList.add('active'); tabEmployee.setAttribute('aria-selected', 'true'); }
+        if (tabManforce) { tabManforce.classList.remove('active'); tabManforce.setAttribute('aria-selected', 'false'); }
+        if (panelEmployee) { panelEmployee.classList.add('active'); panelEmployee.removeAttribute('hidden'); }
+        if (panelManforce) { panelManforce.classList.remove('active'); panelManforce.setAttribute('hidden', ''); }
+    } else {
+        if (tabManforce) { tabManforce.classList.add('active'); tabManforce.setAttribute('aria-selected', 'true'); }
+        if (tabEmployee) { tabEmployee.classList.remove('active'); tabEmployee.setAttribute('aria-selected', 'false'); }
+        if (panelManforce) { panelManforce.classList.add('active'); panelManforce.removeAttribute('hidden'); }
+        if (panelEmployee) { panelEmployee.classList.remove('active'); panelEmployee.setAttribute('hidden', ''); }
+    }
+    updateVisibleButton();
+}
+
+function getFramesFor(type) {
+    return type === 'manforce' ? manforceFrames : employeeFrames;
+}
+
+function setFramesFor(type, frames) {
+    if (type === 'manforce') manforceFrames = frames; else employeeFrames = frames;
+}
+
+function updateVisibleButton() {
+    if (activeTab === 'manforce') updateManforceButton(); else updateEmployeeButton();
+}
+
+function updateManforceButton() {
+    if (!manforceAadhaar || !manforceName || !manforceMobile || !btnRegisterManforce) return;
+    var valid = manforceAadhaar.value.trim().length > 0 && manforceName.value.trim().length > 0 && manforceMobile.value.trim().length > 0;
+    if (isCapturing && captureTarget === 'manforce') {
+        btnRegisterManforce.disabled = true;
+        btnRegisterManforce.textContent = 'CAPTURING...';
+    } else if (manforceFrames.length === REQUIRED_FRAMES) {
+        btnRegisterManforce.disabled = false;
+        btnRegisterManforce.textContent = 'Register';
+        btnRegisterManforce.onclick = function() { submitRegistration('manforce'); };
+    } else if (valid && faceReady) {
+        btnRegisterManforce.disabled = false;
+        btnRegisterManforce.textContent = 'START CAPTURE';
+        btnRegisterManforce.onclick = function() { startCaptureProcess('manforce'); };
+    } else if (valid) {
+        btnRegisterManforce.disabled = true;
+        btnRegisterManforce.textContent = 'START CAPTURE';
+        btnRegisterManforce.onclick = null;
+    } else {
+        btnRegisterManforce.disabled = true;
+        btnRegisterManforce.onclick = null;
+    }
+}
+
+function updateEmployeeButton() {
+    if (!employeeCode || !btnRegisterEmployee) return;
+    var valid = employeeCode.value.trim().length > 0;
+    if (isCapturing && captureTarget === 'employee') {
+        btnRegisterEmployee.disabled = true;
+        btnRegisterEmployee.textContent = 'CAPTURING...';
+    } else if (employeeFrames.length === REQUIRED_FRAMES) {
+        btnRegisterEmployee.disabled = false;
+        btnRegisterEmployee.textContent = 'Register';
+        btnRegisterEmployee.onclick = function() { submitRegistration('employee'); };
+    } else if (valid && faceReady) {
+        btnRegisterEmployee.disabled = false;
+        btnRegisterEmployee.textContent = 'START CAPTURE';
+        btnRegisterEmployee.onclick = function() { startCaptureProcess('employee'); };
+    } else if (valid) {
+        btnRegisterEmployee.disabled = true;
+        btnRegisterEmployee.textContent = 'START CAPTURE';
+        btnRegisterEmployee.onclick = null;
+    } else {
+        btnRegisterEmployee.disabled = true;
+        btnRegisterEmployee.onclick = null;
+    }
+}
+
+if (tabEmployee) tabEmployee.addEventListener('click', function() { switchTab('employee'); });
+if (tabManforce) tabManforce.addEventListener('click', function() { switchTab('manforce'); });
+
+// Swipe on tab bar to switch
+var tabBar = document.querySelector('.register-tabs');
+if (tabBar) {
+    var touchStartX = 0;
+    tabBar.addEventListener('touchstart', function(e) { touchStartX = e.touches[0].clientX; }, { passive: true });
+    tabBar.addEventListener('touchend', function(e) {
+        var dx = (e.changedTouches[0].clientX - touchStartX);
+        if (Math.abs(dx) > 50) {
+            if (dx > 0 && activeTab === 'manforce') switchTab('employee');
+            else if (dx < 0 && activeTab === 'employee') switchTab('manforce');
+        }
+    }, { passive: true });
+}
+
+[manforceAadhaar, manforceName, manforceMobile].forEach(function(input) {
+    if (input) input.addEventListener('input', function() { updateManforceButton(); });
+});
+if (employeeCode) employeeCode.addEventListener('input', function() { updateEmployeeButton(); });
+
+function updateProgress(percent) {
+    if (progressCircle) {
+        progressCircle.style.strokeDashoffset = 113 - (113 * percent);
+    }
+}
+
+function captureFrameAsDataUrl() {
+    if (!video || video.readyState < 2) return null;
+    var canvas = document.createElement('canvas');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext('2d').drawImage(video, 0, 0);
+    return canvas.toDataURL('image/jpeg', 0.8);
+}
+
+function runFaceCheck() {
+    if (isCapturing || !video || video.readyState < 2) return;
+    var frame = captureFrameAsDataUrl();
+    if (!frame) return;
+    fetch('/api/face-check', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ frame: frame })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+        var wasReady = faceReady;
+        faceReady = data.ready === true;
+        if (faceReady && !wasReady) updateVisibleButton();
+        if (!faceReady && wasReady) updateVisibleButton();
+        var statusEl = activeTab === 'manforce' ? statusTextManforce : statusTextEmployee;
+        var globalStatus = statusText;
+        if (getFramesFor(activeTab).length === REQUIRED_FRAMES) return;
+        if (data.ready) {
+            if (statusEl) statusEl.textContent = 'Face detected — click START CAPTURE';
+            if (globalStatus) globalStatus.textContent = 'Face detected — click START CAPTURE';
+        } else if (data.face_detected) {
+            if (statusEl) statusEl.textContent = 'Move closer and center your face';
+            if (globalStatus) globalStatus.textContent = 'Move closer and center your face';
+        } else {
+            if (statusEl) statusEl.textContent = 'Position your face in the frame';
+            if (globalStatus) globalStatus.textContent = 'Position your face in the frame';
+        }
+    })
+    .catch(function() {});
+}
+
+function startFaceCheckPolling() {
+    stopFaceCheckPolling();
+    faceCheckInterval = setInterval(runFaceCheck, FACE_CHECK_POLL_MS);
+    runFaceCheck();
+}
+
+function stopFaceCheckPolling() {
+    if (faceCheckInterval) {
+        clearInterval(faceCheckInterval);
+        faceCheckInterval = null;
+    }
+}
+
+function startCaptureProcess(target) {
+    if (isCapturing) return;
+    captureTarget = target;
+    isCapturing = true;
+    stopFaceCheckPolling();
+    setFramesFor(target, []);
+    updateVisibleButton();
+    var statusEl = target === 'manforce' ? statusTextManforce : statusTextEmployee;
+    if (statusEl) statusEl.textContent = 'Look at the camera and blink naturally...';
+    if (statusText) statusText.textContent = 'Look at the camera and blink naturally during capture.';
+
+    var count = 0;
+    var slotRetries = 0;
+    function trySlot() {
+        if (count >= REQUIRED_FRAMES) {
+            finishCapture(target);
+            return;
+        }
+        var frame = captureFrameAsDataUrl();
+        if (!frame) {
+            setTimeout(trySlot, CAPTURE_INTERVAL_MS);
+            return;
+        }
+        fetch('/api/face-check', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ frame: frame })
+        })
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            if (data.face_detected) {
+                var frames = getFramesFor(target);
+                frames.push(frame);
+                setFramesFor(target, frames);
+                count++;
+                slotRetries = 0;
+                updateProgress(count / REQUIRED_FRAMES);
+                var pct = Math.round((count / REQUIRED_FRAMES) * 100);
+                if (statusEl) statusEl.textContent = 'Scanning... ' + pct + '%';
+                if (statusText) statusText.textContent = 'Scanning... ' + pct + '%';
+                setTimeout(trySlot, CAPTURE_INTERVAL_MS);
+            } else if (slotRetries < MAX_RETRIES_PER_SLOT) {
+                slotRetries++;
+                if (statusEl) statusEl.textContent = 'Face not in frame — hold still...';
+                if (statusText) statusText.textContent = 'Face not in frame — hold still...';
+                setTimeout(trySlot, CAPTURE_INTERVAL_MS);
+            } else {
+                var frames = getFramesFor(target);
+                frames.push(frame);
+                setFramesFor(target, frames);
+                count++;
+                slotRetries = 0;
+                updateProgress(count / REQUIRED_FRAMES);
+                var pct = Math.round((count / REQUIRED_FRAMES) * 100);
+                if (statusEl) statusEl.textContent = 'Scanning... ' + pct + '%';
+                if (statusText) statusText.textContent = 'Scanning... ' + pct + '%';
+                setTimeout(trySlot, CAPTURE_INTERVAL_MS);
+            }
+        })
+        .catch(function() {
+            setTimeout(trySlot, CAPTURE_INTERVAL_MS);
+        });
+    }
+    setTimeout(trySlot, CAPTURE_INTERVAL_MS);
+}
+
+function finishCapture(target) {
+    isCapturing = false;
+    captureTarget = null;
+    startFaceCheckPolling();
+    var statusEl = target === 'manforce' ? statusTextManforce : statusTextEmployee;
+    if (statusEl) {
+        statusEl.textContent = 'Face captured ✓';
+        statusEl.style.color = 'var(--color-primary)';
+    }
+    if (statusText) {
+        statusText.textContent = 'Face captured ✓';
+        statusText.style.color = 'var(--color-primary)';
+    }
+    updateVisibleButton();
+}
+
+async function submitRegistration(userType) {
+    var isManforce = userType === 'manforce';
+    var btn = isManforce ? btnRegisterManforce : btnRegisterEmployee;
+    var frames = getFramesFor(userType);
+    if (!btn || !frames || frames.length === 0) return;
+
+    btn.disabled = true;
+    btn.textContent = 'REGISTERING...';
+
+    var payload;
+    if (isManforce) {
+        if (!manforceAadhaar || !manforceName || !manforceMobile) return;
+        payload = {
+            user_type: 'manforce',
+            aadhaar: manforceAadhaar.value.trim(),
+            name: manforceName.value.trim(),
+            mobile: manforceMobile.value.trim(),
+            frames: frames
+        };
+    } else {
+        if (!employeeCode) return;
+        payload = {
+            user_type: 'employee',
+            employee_id: employeeCode.value.trim(),
+            frames: frames
+        };
+    }
+
+    try {
+        var res = await fetch('/api/register', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+        var data = await res.json();
+
+        if (data.status === 'registered') {
+            document.getElementById('registerForm').style.display = 'none';
+            document.getElementById('successState').style.display = 'block';
+            var label = isManforce ? payload.name + ' — ' + payload.aadhaar : payload.employee_id;
+            document.getElementById('successChip').textContent = label;
+        } else if (data.status === 'spoof') {
+            showSpoofToast(data);
+            btn.disabled = false;
+            btn.textContent = 'Register';
+        } else {
+            var msg = data.message || 'Unknown error';
+            if (msg.indexOf('already registered') !== -1 || msg.indexOf('already registered to') !== -1) {
+                if (typeof showSnackbar === 'function') showSnackbar('Duplicate registration — this face is already registered.', 'error');
+            } else if (msg.indexOf('No face detected') !== -1 || msg.indexOf('no face') !== -1) {
+                if (typeof showSnackbar === 'function') showSnackbar('Clear photo — ensure your face is visible and well lit.', 'info');
+            } else {
+                if (typeof showSnackbar === 'function') showSnackbar(msg, 'error');
+            }
+            btn.disabled = false;
+            btn.textContent = 'Register';
+        }
+    } catch (e) {
+        if (typeof showSnackbar === 'function') showSnackbar('Network error. Please try again.', 'error');
+        btn.disabled = false;
+        btn.textContent = 'Register';
+    }
+}
+
+function showSpoofToast(data) {
+    var msg = data.reason || data.message || 'Use a live face, not a photo or screen.';
+    if (spoofToastMessage) spoofToastMessage.textContent = msg;
+    if (spoofToast) spoofToast.classList.add('show');
+    if (toastDismissTimer) clearTimeout(toastDismissTimer);
+    toastDismissTimer = setTimeout(function() {
+        if (spoofToast) spoofToast.classList.remove('show');
+        toastDismissTimer = null;
+    }, 4500);
+}
+
+// Init: ensure Employee tab/panel active and start live face feedback
+switchTab('employee');
+startFaceCheckPolling();

templates/attendance.html

@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="top-bar">
+    <a href="/dashboard" style="color: var(--color-text); text-decoration: none;">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M19 12H5M12 19l-7-7 7-7" />
+        </svg>
+    </a>
+    <h2>Check in</h2>
+    <a href="/dashboard" class="top-bar-logo-wrap">
+        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="One Step Greener" class="top-bar-logo top-bar-logo-sm" />
+    </a>
+</div>
+
+<div class="camera-container" id="cameraContainer">
+    <video id="videoFeed" class="circle-feed" autoplay playsinline muted></video>
+
+    <svg class="overlay-svg" viewBox="0 0 300 300">
+        <!-- Corner brackets -->
+        <path d="M60 40 L40 40 L40 60" stroke="#00C853" stroke-width="4" fill="none" />
+        <path d="M240 40 L260 40 L260 60" stroke="#00C853" stroke-width="4" fill="none" />
+        <path d="M60 260 L40 260 L40 240" stroke="#00C853" stroke-width="4" fill="none" />
+        <path d="M240 260 L260 260 L260 240" stroke="#00C853" stroke-width="4" fill="none" />
+
+        <!-- Rotating ring -->
+        <circle cx="150" cy="150" r="140" stroke="#00C853" stroke-width="2" stroke-dasharray="20 20" fill="none"
+            class="spin-ring" opacity="0.5" />
+    </svg>
+</div>
+
+<div class="status-indicator" id="statusDot"></div>
+<p class="status-text" id="statusText">Position your face in the frame</p>
+<p class="status-hint" id="statusHint">Look at the camera and blink naturally to verify you're live</p>
+
+<!-- ════ Spoof toast (banner, auto-dismiss) ═══════════════════════════════ -->
+<div id="spoofToast" class="toast toast-danger" role="alert" aria-live="polite">
+    <span class="toast-icon">⚠</span>
+    <div class="toast-body">
+        <strong class="toast-title">Spoofing detected</strong>
+        <p class="toast-message" id="spoofToastMessage">Use a live face, not a photo or screen.</p>
+    </div>
+</div>
+
+<!-- ════ Success Modal ═══════════════════════════════════════════════════ -->
+<div id="successModal" class="modal-overlay">
+    <div class="modal-card">
+        <div class="checkmark-animated">✓</div>
+        <h2 id="modalTitle">Checked in</h2>
+        <p class="employee-name" id="modalName">John Doe</p>
+        <p class="timestamp" id="modalTime">09:42 AM</p>
+        <button class="btn-primary" onclick="dismissModal()">DONE</button>
+    </div>
+</div>
+
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/attendance.js') }}"></script>
+{% endblock %}

templates/base.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>One Step Greener – Attendance</title>
+    <meta name="description" content="One Step Greener – Face recognition attendance for waste management">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="app-shell">
+        {% block content %}{% endblock %}
+    </div>
+
+    <!-- Global snackbar (popup / snack bar) for alerts -->
+    <div id="appSnackbar" class="snackbar" role="alert" aria-live="polite">
+        <span class="snackbar-icon"></span>
+        <span class="snackbar-message"></span>
+    </div>
+
+    <script>
+    window.showSnackbar = function(message, type) {
+        type = type || 'info';
+        var el = document.getElementById('appSnackbar');
+        if (!el) return;
+        el.className = 'snackbar snackbar-' + type + ' show';
+        var icon = el.querySelector('.snackbar-icon');
+        var msg = el.querySelector('.snackbar-message');
+        icon.textContent = type === 'success' ? '✓' : (type === 'error' ? '!' : 'ℹ');
+        if (msg) msg.textContent = message;
+        clearTimeout(window._snackbarTimer);
+        window._snackbarTimer = setTimeout(function() { el.classList.remove('show'); }, 4500);
+    };
+    </script>
+    {% block scripts %}{% endblock %}
+</body>
+</html>

templates/dashboard.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="top-bar">
+    <a href="/dashboard" class="top-bar-logo-wrap">
+        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="One Step Greener" class="top-bar-logo" />
+    </a>
+    <div class="clock" id="clock">00:00:00</div>
+</div>
+
+<h1>Check in</h1>
+<p style="margin-bottom: 24px;">Waste management attendance — choose an action below.</p>
+
+<div class="grid-menu">
+    <a href="/attendance" class="card">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M3 7V5a2 2 0 0 1 2-2h2"></path>
+            <path d="M17 3h2a2 2 0 0 1 2 2v2"></path>
+            <path d="M21 17v2a2 2 0 0 1-2 2h-2"></path>
+            <path d="M7 21H5a2 2 0 0 1-2-2v-2"></path>
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="7" x2="12" y2="7.01"></line>
+            <line x1="12" y1="17" x2="12" y2="17.01"></line>
+            <line x1="17" y1="12" x2="17.01" y2="12"></line>
+            <line x1="7" y1="12" x2="7.01" y2="12"></line>
+        </svg>
+        <h3>Attendance</h3>
+        <span>Scan face to check in</span>
+    </a>
+
+    <a href="/register" class="card">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+            <circle cx="8.5" cy="7" r="4"></circle>
+            <line x1="20" y1="8" x2="20" y2="14"></line>
+            <line x1="23" y1="11" x2="17" y2="11"></line>
+        </svg>
+        <h3>Register</h3>
+        <span>Enroll new team member</span>
+    </a>
+</div>
+
+<script>
+    setInterval(function() {
+        document.getElementById('clock').textContent = new Date().toLocaleTimeString();
+    }, 1000);
+</script>
+{% endblock %}

templates/manage.html

@@ -0,0 +1,64 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="top-bar">
+    <a href="/dashboard" style="color: var(--color-text); text-decoration: none;">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M19 12H5M12 19l-7-7 7-7"/>
+        </svg>
+    </a>
+    <h2>Delete users</h2>
+    <a href="/dashboard" class="top-bar-logo-wrap">
+        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="One Step Greener" class="top-bar-logo top-bar-logo-sm" />
+    </a>
+</div>
+
+<section class="manage-section">
+    <p class="manage-intro">Registered users. To remove a user, delete them from the database.</p>
+    <div id="manageList" class="manage-list">
+        <span class="manage-loading" id="manageLoading">Loading…</span>
+        <ul id="manageUl" class="manage-ul" style="display: none;"></ul>
+        <p id="manageEmpty" class="manage-empty" style="display: none;">No registered users.</p>
+    </div>
+</section>
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+(function() {
+    var loading = document.getElementById('manageLoading');
+    var ul = document.getElementById('manageUl');
+    var empty = document.getElementById('manageEmpty');
+
+    function loadList() {
+        loading.style.display = 'block';
+        ul.style.display = 'none';
+        empty.style.display = 'none';
+        fetch('/api/employees')
+            .then(function(r) { return r.json(); })
+            .then(function(data) {
+                loading.style.display = 'none';
+                if (data.employees && data.employees.length > 0) {
+                    ul.style.display = 'block';
+                    ul.innerHTML = '';
+                    data.employees.forEach(function(emp) {
+                        var li = document.createElement('li');
+                        li.className = 'manage-item';
+                        li.innerHTML = '<span class="manage-item-name">' + (emp.name || emp.id) + ' <span class="manage-item-id">' + (emp.id || '') + '</span></span>';
+                        ul.appendChild(li);
+                    });
+                } else {
+                    empty.style.display = 'block';
+                }
+            })
+            .catch(function() {
+                loading.textContent = 'Could not load list.';
+                loading.style.display = 'block';
+            });
+    }
+
+    loadList();
+})();
+</script>
+{% endblock %}

templates/register.html

@@ -0,0 +1,129 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="top-bar">
+    <a href="/dashboard" style="color: var(--color-text); text-decoration: none;">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M19 12H5M12 19l-7-7 7-7"/>
+        </svg>
+    </a>
+    <h2>Register</h2>
+    <a href="/dashboard" class="top-bar-logo-wrap">
+        <img src="{{ url_for('static', filename='images/logo.png') }}" alt="One Step Greener" class="top-bar-logo top-bar-logo-sm" />
+    </a>
+</div>
+
+<!-- PIN gate: always shown first; hidden after correct PIN -->
+<div id="pinGate" class="pin-gate">
+    <p class="pin-prompt">Enter PIN to access Register.</p>
+    <input type="password" id="pinInput" class="pin-input" placeholder="PIN" maxlength="8" inputmode="numeric" autocomplete="off" />
+    <button type="button" id="pinSubmit" class="btn-primary pin-submit">Continue</button>
+    <p id="pinError" class="pin-error" style="display: none;"></p>
+</div>
+
+<!-- Register form: hidden until PIN verified; switchable tab Employee | Manforce -->
+<div id="registerForm" class="register-form-locked" style="display: none;">
+    <div class="register-tabs" role="tablist">
+        <button type="button" id="tabEmployee" class="register-tab active" role="tab" aria-selected="true" data-tab="employee">Employee</button>
+        <button type="button" id="tabManforce" class="register-tab" role="tab" aria-selected="false" data-tab="manforce">Manforce</button>
+    </div>
+    <div id="panelEmployee" class="register-panel active" role="tabpanel">
+        <input type="text" id="employeeCode" placeholder="Employee code">
+        <p class="status-text" id="statusTextEmployee">Align face within frame</p>
+        <button id="btnRegisterEmployee" class="btn-primary" disabled>Register</button>
+    </div>
+    <div id="panelManforce" class="register-panel" role="tabpanel" hidden>
+        <input type="text" id="manforceAadhaar" placeholder="Aadhaar number">
+        <input type="text" id="manforceName" placeholder="Full name">
+        <input type="text" id="manforceMobile" placeholder="Mobile number">
+        <p class="status-text" id="statusTextManforce">Align face within frame</p>
+        <button id="btnRegisterManforce" class="btn-primary" disabled>Register</button>
+    </div>
+    <div class="video-rect-container register-video-shared">
+        <video id="videoFeed" autoplay playsinline muted></video>
+        <div class="rect-overlay"></div>
+        <svg class="progress-ring" viewBox="0 0 40 40">
+            <circle cx="20" cy="20" r="18" stroke="#333" stroke-width="4" fill="none"/>
+            <circle id="progressCircle" cx="20" cy="20" r="18" stroke="var(--color-primary)" stroke-width="4" fill="none" stroke-dasharray="113" stroke-dashoffset="113" transform="rotate(-90 20 20)"/>
+        </svg>
+    </div>
+    <p class="status-text" id="statusText">Align face within frame</p>
+    <p class="status-hint register-capture-hint">Look at the camera and blink naturally during capture.</p>
+</div>
+
+<!-- Spoof toast (same as attendance) -->
+<div id="spoofToast" class="toast toast-danger" role="alert" aria-live="polite">
+    <span class="toast-icon">⚠</span>
+    <div class="toast-body">
+        <strong class="toast-title">Spoofing detected</strong>
+        <p class="toast-message" id="spoofToastMessage">Use a live face, not a photo or screen.</p>
+    </div>
+</div>
+
+<div id="successState" class="success-state" style="display:none;">
+    <img src="{{ url_for('static', filename='images/face-id-success.png') }}" alt="Face registered" class="success-face-icon" />
+    <h2>Registered</h2>
+    <div class="chip" id="successChip"></div>
+    <button class="btn-outline" onclick="location.reload()">Register Another</button>
+    <br>
+    <a href="/dashboard" style="color: var(--color-text-muted); font-size: 13px; margin-top: 20px; display:inline-block;">Back to check in</a>
+</div>
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+(function() {
+    var pinGate = document.getElementById('pinGate');
+    var registerForm = document.getElementById('registerForm');
+    var pinInput = document.getElementById('pinInput');
+    var pinSubmit = document.getElementById('pinSubmit');
+    var pinError = document.getElementById('pinError');
+
+    if (pinGate && registerForm && pinInput && pinSubmit) {
+        function doVerify() {
+            var pin = (pinInput.value || '').trim();
+            pinError.style.display = 'none';
+            if (!pin) {
+                pinError.textContent = 'Enter PIN';
+                pinError.style.display = 'block';
+                return;
+            }
+            pinSubmit.disabled = true;
+            fetch('/api/verify-pin', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ pin: pin })
+            })
+            .then(function(r) { return r.json(); })
+            .then(function(data) {
+                pinSubmit.disabled = false;
+                if (data.status === 'ok') {
+                    pinGate.style.display = 'none';
+                    registerForm.style.display = 'block';
+                    if (window.loadRegisterScript) window.loadRegisterScript();
+                } else {
+                    pinError.textContent = data.message || 'Incorrect PIN';
+                    pinError.style.display = 'block';
+                }
+            })
+            .catch(function() {
+                pinSubmit.disabled = false;
+                pinError.textContent = 'Request failed';
+                pinError.style.display = 'block';
+            });
+        }
+        pinSubmit.addEventListener('click', doVerify);
+        pinInput.addEventListener('keydown', function(e) { if (e.key === 'Enter') doVerify(); });
+
+        window.loadRegisterScript = function() {
+            if (window.registerScriptLoaded) return;
+            window.registerScriptLoaded = true;
+            var s = document.createElement('script');
+            s.src = "{{ url_for('static', filename='js/register.js') }}";
+            document.body.appendChild(s);
+        };
+    }
+})();
+</script>
+{% endblock %}