Upload 31 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+hf-space/static/images/logo.png filter=lfs diff=lfs merge=lfs -text

hf-space/.dockerignore

@@ -0,0 +1,35 @@
+# Dependencies and build
+node_modules
+dist
+__pycache__
+*.pyc
+.pytest_cache
+*.egg-info
+.eggs
+venv
+.venv
+env
+
+# Secrets and local config
+.env
+.env.*
+*.local
+
+# Local database (Space starts with a fresh DB)
+database/*.db
+database/*.faiss
+database/face_meta.json
+
+# Git and editor
+.git
+.gitignore
+.vscode
+.idea
+*.md
+!README.md
+
+# Optional: uncomment to skip tests and dev files
+# test_*.py
+# vite.config.ts
+# tsconfig.json
+# package.json

hf-space/.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz 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

hf-space/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

hf-space/README.md

@@ -0,0 +1,11 @@
+---
+title: AttendanceFaceRecognition
+emoji: 🐠
+colorFrom: green
+colorTo: pink
+sdk: docker
+pinned: false
+short_description: Face recognition attendance for One Step Greener
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

hf-space/app.py

@@ -0,0 +1,258 @@
+"""
+One Step Greener – Face recognition attendance (waste management).
+Flask application entry point.
+"""
+
+import os
+import logging
+from flask import Flask, render_template, request, jsonify
+
+from database.db import init_db, add_employee, get_employee, get_all_employees, mark_attendance, get_today_attendance, delete_employee
+from models.embeddings_store import EmbeddingStore
+from models.face_engine import (
+    decode_image,
+    get_face_embedding,
+    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_page():
+    return render_template("manage.html")
+
+
+@app.route("/attendance")
+def attendance_page():
+    return render_template("attendance.html")
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+# API routes
+# ══════════════════════════════════════════════════════════════════════════════
+
+@app.route("/api/register", methods=["POST"])
+def api_register():
+    """
+    Body JSON:
+      { employee_id, name, frames: [base64DataUrl, ...] }
+    """
+    data = request.get_json(force=True)
+    employee_id = data.get("employee_id", "").strip()
+    name        = data.get("name", "").strip()
+    frames      = data.get("frames", [])
+
+    if not employee_id or not name:
+        return jsonify({"status": "error", "message": "Employee ID and name are required."}), 400
+
+    if not frames:
+        return jsonify({"status": "error", "message": "No frames provided."}), 400
+
+    logger.info(f"Registering {employee_id} ({name}) 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)
+    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,
+        "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 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"] == "already_marked":
+        return jsonify({"status": "already_marked", "name": name})
+
+    logger.info(f"Attendance marked: {employee_id} ({name}) at {result['timestamp']}")
+    return jsonify({
+        "status": "success",
+        "name": name,
+        "employee_id": employee_id,
+        "timestamp": result["timestamp"],
+        "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/employees/<employee_id>", methods=["DELETE"])
+def api_employee_delete(employee_id):
+    """Delete a registered employee (DB + face index)."""
+    if not get_employee(employee_id):
+        return jsonify({"status": "error", "message": "Employee not found"}), 404
+    store.remove_employee(employee_id)
+    if not delete_employee(employee_id):
+        return jsonify({"status": "error", "message": "Delete failed"}), 500
+    logger.info(f"Deleted employee {employee_id}")
+    return jsonify({"status": "ok", "message": "Deleted"})
+
+
+@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)

hf-space/database/db.py

@@ -0,0 +1,147 @@
+"""
+CONSTABLE – SQLite database helpers.
+Tables:
+  employees  – id (TEXT PK), name (TEXT), registered_at (TEXT)
+  attendance – id (INTEGER PK), employee_id (TEXT FK), timestamp (TEXT), date (TEXT)
+"""
+
+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."""
+    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
+        );
+
+        CREATE TABLE IF NOT EXISTS attendance (
+            id          INTEGER PRIMARY KEY AUTOINCREMENT,
+            employee_id TEXT NOT NULL,
+            timestamp   TEXT NOT NULL,
+            date        TEXT NOT NULL,
+            FOREIGN KEY (employee_id) REFERENCES employees(id)
+        );
+    """)
+    conn.commit()
+    conn.close()
+
+
+# ---------------------------------------------------------------------------
+# Employee helpers
+# ---------------------------------------------------------------------------
+
+def add_employee(employee_id: str, name: 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) VALUES (?, ?, ?)",
+            (employee_id, name, datetime.now().isoformat(timespec="seconds")),
+        )
+        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 helpers
+# ---------------------------------------------------------------------------
+
+def mark_attendance(employee_id: str) -> dict:
+    """
+    Log attendance for today.
+    Returns {'status': 'success'|'already_marked', 'timestamp': ...}
+    """
+    today = date.today().isoformat()
+    conn = get_connection()
+    try:
+        existing = conn.execute(
+            "SELECT id FROM attendance WHERE employee_id = ? AND date = ?",
+            (employee_id, today),
+        ).fetchone()
+        if existing:
+            return {"status": "already_marked"}
+
+        ts = datetime.now().strftime("%I:%M %p")
+        conn.execute(
+            "INSERT INTO attendance (employee_id, timestamp, date) VALUES (?, ?, ?)",
+            (employee_id, ts, today),
+        )
+        conn.commit()
+        return {"status": "success", "timestamp": ts}
+    finally:
+        conn.close()
+
+
+def get_today_attendance():
+    today = date.today().isoformat()
+    conn = get_connection()
+    try:
+        rows = conn.execute(
+            """SELECT a.timestamp, e.id, e.name
+               FROM attendance a
+               JOIN employees e ON a.employee_id = e.id
+               WHERE a.date = ?
+               ORDER BY a.id DESC""",
+            (today,),
+        ).fetchall()
+        return [dict(r) for r in rows]
+    finally:
+        conn.close()

hf-space/database/face_meta.json

@@ -0,0 +1 @@
+{"0": "tanmay", "1": "tanmay", "2": "tanmay", "3": "tanmay", "4": "tanmay", "5": "sahil", "6": "sahil", "7": "sahil", "8": "sahil", "9": "sahil", "10": "tt", "11": "tt", "12": "tt", "13": "tt", "14": "tt", "15": "EMP-TEST"}

hf-space/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.52          # 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",
+    }

hf-space/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))

hf-space/models/face_engine.py

@@ -0,0 +1,156 @@
+"""
+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 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]

hf-space/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

hf-space/static/css/style.css

@@ -0,0 +1,776 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   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);
+}
+
+/* ── 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 {
+    width: 72px;
+    height: 72px;
+    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);
+    margin: 0 auto 20px;
+}
+
+.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 layout ────────────────────────────────────────────────── */
+#registerForm {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+/* ── 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);
+}

hf-space/static/js/attendance.js

@@ -0,0 +1,160 @@
+const video = document.getElementById('videoFeed');
+const statusDot = document.getElementById('statusDot');
+const statusText = document.getElementById('statusText');
+const modal = document.getElementById('successModal');
+const modalName = document.getElementById('modalName');
+const modalTime = document.getElementById('modalTime');
+const cameraContainer = document.getElementById('cameraContainer');
+
+// Spoof toast
+const spoofToast = document.getElementById('spoofToast');
+const spoofToastMessage = document.getElementById('spoofToastMessage');
+
+// Frame buffer for sequence liveness (motion + blink)
+const FRAME_BUFFER_SIZE = 5;
+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();
+
+            const payload = frameBuffer.length >= 2
+                ? { 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, 800));
+    }
+}
+
+// ─── Result handler ─────────────────────────────────────────────────────────
+
+function handleResult(result) {
+    if (result.status === 'success') {
+        showSuccess(result);
+        if (typeof showSnackbar === 'function') {
+            showSnackbar('Checked in at ' + (result.timestamp || ''), 'success');
+        }
+    } else if (result.status === 'already_marked') {
+        statusText.textContent = `Already marked: ${result.name}`;
+        statusText.style.color = "#FFD700";
+        if (typeof showSnackbar === 'function') showSnackbar('Already marked today: ' + result.name, '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');
+        }
+    }
+}
+
+// ─── 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');
+    
+    modalName.textContent = data.name;
+    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";
+    isScanning = true;
+    startCaptureLoop();
+}
+
+// ─── Init ───────────────────────────────────────────────────────────────────
+startCamera();
+window.addEventListener('beforeunload', stopCamera);

hf-space/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);
+    }
+}

hf-space/static/js/register.js

@@ -0,0 +1,135 @@
+const video = document.getElementById('videoFeed');
+const empIdInput = document.getElementById('empId');
+const empNameInput = document.getElementById('empName');
+const btnRegister = document.getElementById('btnRegister');
+const statusText = document.getElementById('statusText');
+const progressCircle = document.getElementById('progressCircle');
+const spoofToast = document.getElementById('spoofToast');
+const spoofToastMessage = document.getElementById('spoofToastMessage');
+
+let capturedFrames = [];
+let isCapturing = false;
+const REQUIRED_FRAMES = 5;
+let toastDismissTimer = null;
+
+// Start Camera
+navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user', width: 640, height: 480 } })
+    .then(stream => { video.srcObject = stream; })
+    .catch(err => console.error(err));
+
+// Monitor inputs to enable capture
+[empIdInput, empNameInput].forEach(input => {
+    input.addEventListener('input', checkInputs);
+});
+
+function checkInputs() {
+    const valid = empIdInput.value.trim().length > 0 && empNameInput.value.trim().length > 0;
+    if (valid && !isCapturing && capturedFrames.length === 0) {
+        btnRegister.disabled = false;
+        btnRegister.textContent = "START CAPTURE";
+        btnRegister.onclick = startCaptureProcess;
+    } else if (capturedFrames.length === REQUIRED_FRAMES) {
+        btnRegister.disabled = false;
+        btnRegister.textContent = "Register";
+        btnRegister.onclick = submitRegistration;
+    } else {
+        btnRegister.disabled = true;
+    }
+}
+
+function startCaptureProcess() {
+    isCapturing = true;
+    btnRegister.disabled = true;
+    capturedFrames = [];
+    statusText.textContent = "Keep face steady...";
+    
+    let count = 0;
+    const interval = setInterval(() => {
+        if (count >= REQUIRED_FRAMES) {
+            clearInterval(interval);
+            finishCapture();
+            return;
+        }
+        
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        canvas.getContext('2d').drawImage(video, 0, 0);
+        capturedFrames.push(canvas.toDataURL('image/jpeg', 0.8));
+        
+        count++;
+        updateProgress(count / REQUIRED_FRAMES);
+        statusText.textContent = `Scanning... ${Math.round((count/REQUIRED_FRAMES)*100)}%`;
+        
+    }, 600);
+}
+
+function updateProgress(percent) {
+    const offset = 113 - (113 * percent);
+    progressCircle.style.strokeDashoffset = offset;
+}
+
+function finishCapture() {
+    isCapturing = false;
+    statusText.textContent = "Face captured ✓";
+    statusText.style.color = "var(--color-primary)";
+    checkInputs(); // Re-enable button for submit
+}
+
+async function submitRegistration() {
+    btnRegister.disabled = true;
+    btnRegister.textContent = "REGISTERING...";
+    
+    const payload = {
+        employee_id: empIdInput.value.trim(),
+        name: empNameInput.value.trim(),
+        frames: capturedFrames
+    };
+    
+    try {
+        const res = await fetch('/api/register', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+        
+        const data = await res.json();
+
+        if (data.status === 'registered') {
+            document.getElementById('registerForm').style.display = 'none';
+            document.getElementById('successState').style.display = 'block';
+            document.getElementById('successChip').textContent = `${payload.name} — ${payload.employee_id}`;
+        } else if (data.status === 'spoof') {
+            showSpoofToast(data);
+            btnRegister.disabled = false;
+            btnRegister.textContent = "Register";
+        } else {
+            // Duplicate user or other error → snackbar
+            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');
+            }
+            btnRegister.disabled = false;
+            btnRegister.textContent = "Register";
+        }
+    } catch (e) {
+        if (typeof showSnackbar === 'function') showSnackbar("Network error. Please try again.", 'error');
+        btnRegister.disabled = false;
+        btnRegister.textContent = "Register";
+    }
+}
+
+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');
+    if (toastDismissTimer) clearTimeout(toastDismissTimer);
+    toastDismissTimer = setTimeout(() => {
+        spoofToast.classList.remove('show');
+        toastDismissTimer = null;
+    }, 4500);
+}

hf-space/templates/attendance.html

@@ -0,0 +1,59 @@
+{% 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>
+
+<!-- ════ 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>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 %}

hf-space/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>

hf-space/templates/dashboard.html

@@ -0,0 +1,61 @@
+{% 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>
+
+    <a href="/manage" 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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+            <circle cx="9" cy="7" r="4"></circle>
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+            <line x1="18" y1="9" x2="23" y2="9"></line>
+            <line x1="20.5" y1="6.5" x2="20.5" y2="11.5"></line>
+        </svg>
+        <h3>Delete users</h3>
+        <span>Remove registered users</span>
+    </a>
+</div>
+
+<script>
+    setInterval(function() {
+        document.getElementById('clock').textContent = new Date().toLocaleTimeString();
+    }, 1000);
+</script>
+{% endblock %}

hf-space/templates/manage.html

@@ -0,0 +1,89 @@
+{% 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">Remove registered users. Deleted users can no longer check in until registered again.</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><button type="button" class="manage-delete-btn" data-id="' + (emp.id || '') + '">Delete</button>';
+                        ul.appendChild(li);
+                    });
+                    ul.querySelectorAll('.manage-delete-btn').forEach(function(btn) {
+                        btn.addEventListener('click', function() {
+                            var id = this.getAttribute('data-id');
+                            if (!id) return;
+                            if (!confirm('Delete this user? They will need to register again to check in.')) return;
+                            var row = this.closest('li');
+                            fetch('/api/employees/' + encodeURIComponent(id), { method: 'DELETE' })
+                                .then(function(r) { return r.json(); })
+                                .then(function(data) {
+                                    if (data.status === 'ok') {
+                                        if (typeof showSnackbar === 'function') showSnackbar('User deleted.', 'success');
+                                        row.remove();
+                                        if (ul.children.length === 0) {
+                                            ul.style.display = 'none';
+                                            empty.style.display = 'block';
+                                        }
+                                    } else {
+                                        if (typeof showSnackbar === 'function') showSnackbar(data.message || 'Delete failed', 'error');
+                                    }
+                                })
+                                .catch(function() {
+                                    if (typeof showSnackbar === 'function') showSnackbar('Request failed', 'error');
+                                });
+                        });
+                    });
+                } else {
+                    empty.style.display = 'block';
+                }
+            })
+            .catch(function() {
+                loading.textContent = 'Could not load list.';
+                loading.style.display = 'block';
+            });
+    }
+
+    loadList();
+})();
+</script>
+{% endblock %}

hf-space/templates/register.html

@@ -0,0 +1,120 @@
+{% 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 -->
+<div id="registerForm" class="register-form-locked" style="display: none;">
+    <input type="text" id="empId" placeholder="Employee ID (e.g. EMP-001)">
+    <input type="text" id="empName" placeholder="Full name">
+    
+    <div class="video-rect-container">
+        <video id="videoFeed" autoplay playsinline muted></video>
+        <div class="rect-overlay"></div>
+        
+        <!-- Progress Ring -->
+        <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>
+    
+    <button id="btnRegister" class="btn-primary" disabled onclick="submitRegistration()">Register</button>
+</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;">
+    <div class="checkmark-large">✓</div>
+    <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 %}