Per-classroom rosters, self-enroll tab with guided camera recording, and three-tier attendance with teacher-reviewed reinforcement

- Split attendance data per classroom (CSE 1-8), each with its own JSON store
- New standalone Enroll Student tab/page with upload, folder, and guided
audio-narrated camera recording (front/left/right) for self-enrollment
- Mark Attendance now classifies faces into Present/Suspicious/Absent tiers
instead of a flat match list, with an unknown-faces zoom viewer
- Teachers can confirm/reject Suspicious matches; confirming reinforces that
student's gallery with the new embedding and recomputes their prototype
- Fixed enrollment video frame sampling to always sequentially decode
instead of seeking, which was unreliable for live-recorded webm clips

activity_web/backend/app.py

@@ -7,7 +7,7 @@ from pathlib import Path
 from flask import Flask, jsonify, render_template, request, send_file
 from werkzeug.utils import secure_filename
 
-from .attendance_service import get_attendance_service
+from .attendance_service import get_attendance_service, migrate_legacy_flat_store, CLASSROOMS, CLASSROOM_LABELS
 from .pipeline_loader import get_pipeline
 from .engagement_loader import get_engagement_pipeline
 from .cognitive_loader import get_cognitive_pipeline
@@ -32,6 +32,11 @@ app = Flask(
 )
 app.config["MAX_CONTENT_LENGTH"] = 4 * 1024 * 1024 * 1024
 
+try:
+    migrate_legacy_flat_store()
+except Exception:
+    pass
+
 
 def ensure_runtime_dirs() -> None:
     # Create the configured runtime directories
@@ -72,11 +77,32 @@ def attendance_artifact_url(filename: str) -> str:
     return f"/api/attendance/artifacts/{filename}"
 
 
+def _require_classroom(classroom_id: str | None):
+    """Validate a classroom id against the fixed whitelist. Returns None on
+    success, or a (response, status) tuple to return immediately on failure."""
+    if classroom_id not in CLASSROOMS:
+        return jsonify({"ok": False, "error": "Select a valid classroom."}), 400
+    return None
+
+
 @app.get("/")
 def index():
     return render_template("index.html")
 
 
+@app.get("/enroll")
+def enroll_page():
+    return render_template("enroll.html")
+
+
+@app.get("/api/attendance/classrooms")
+def attendance_classrooms():
+    return jsonify({
+        "ok": True,
+        "classrooms": [{"id": c, "label": CLASSROOM_LABELS[c]} for c in CLASSROOMS],
+    })
+
+
 @app.get("/api/health")
 def health():
     return jsonify({"ok": True})
@@ -84,8 +110,11 @@ def health():
 
 @app.get("/api/attendance/roster")
 def attendance_roster():
+    classroom_id = request.args.get("classroom", "")
+    if (error := _require_classroom(classroom_id)) is not None:
+        return error
     try:
-        service = get_attendance_service()
+        service = get_attendance_service(classroom_id)
         return jsonify({"ok": True, "students": service.list_students(), "attendance": service.list_attendance(limit=20)})
     except Exception as exc:
         return jsonify({"ok": False, "error": str(exc)}), 500
@@ -93,7 +122,10 @@ def attendance_roster():
 
 @app.delete("/api/attendance/students/<student_id>")
 def attendance_delete_student(student_id: str):
-    service = get_attendance_service()
+    classroom_id = request.args.get("classroom", "")
+    if (error := _require_classroom(classroom_id)) is not None:
+        return error
+    service = get_attendance_service(classroom_id)
     try:
         result = service.delete_student(student_id)
     except KeyError:
@@ -104,8 +136,35 @@ def attendance_delete_student(student_id: str):
     return jsonify({"ok": True, **result})
 
 
+@app.post("/api/attendance/suspicious/resolve")
+def attendance_resolve_suspicious():
+    data = request.get_json(silent=True) or {}
+    classroom_id = data.get("classroom", "")
+    if (error := _require_classroom(classroom_id)) is not None:
+        return error
+
+    review_id = str(data.get("review_id", "")).strip()
+    confirmed = bool(data.get("confirmed"))
+    if not review_id:
+        return jsonify({"ok": False, "error": "Missing review_id."}), 400
+
+    service = get_attendance_service(classroom_id)
+    try:
+        result = service.resolve_suspicious_review(review_id, confirmed)
+    except KeyError:
+        return jsonify({"ok": False, "error": "That review no longer exists (already resolved?)."}), 404
+    except Exception as exc:
+        return jsonify({"ok": False, "error": str(exc)}), 500
+
+    return jsonify({"ok": True, **result})
+
+
 @app.post("/api/attendance/enroll")
 def attendance_enroll():
+    classroom_id = request.form.get("classroom", "")
+    if (error := _require_classroom(classroom_id)) is not None:
+        return error
+
     uploaded_files = request.files.getlist("media")
     student_name = request.form.get("student_name", "").strip()
 
@@ -114,7 +173,7 @@ def attendance_enroll():
     if not uploaded_files:
         return jsonify({"ok": False, "error": "Upload at least one photo or video."}), 400
 
-    service = get_attendance_service()
+    service = get_attendance_service(classroom_id)
     saved_paths: list[Path] = []
     for uploaded_file in uploaded_files:
         if not uploaded_file or not uploaded_file.filename:
@@ -142,6 +201,10 @@ def attendance_enroll():
 def attendance_enroll_folder():
     """Enroll a student from a local folder of videos/images (no upload needed)."""
     data = request.get_json(silent=True) or {}
+    classroom_id = data.get("classroom", "")
+    if (error := _require_classroom(classroom_id)) is not None:
+        return error
+
     student_name = data.get("student_name", "").strip()
     folder_path  = data.get("folder_path", "").strip()
 
@@ -161,7 +224,7 @@ def attendance_enroll_folder():
     if not media_paths:
         return jsonify({"ok": False, "error": "No video or image files found in that folder."}), 400
 
-    service = get_attendance_service()
+    service = get_attendance_service(classroom_id)
     try:
         result = service.enroll_student(student_name=student_name, media_paths=media_paths)
     except Exception as exc:
@@ -174,6 +237,10 @@ def attendance_enroll_folder():
 
 @app.post("/api/attendance/mark")
 def attendance_mark():
+    classroom_id = request.form.get("classroom", "")
+    if (error := _require_classroom(classroom_id)) is not None:
+        return error
+
     uploaded_file = request.files.get("photo")
     if uploaded_file is None or not uploaded_file.filename:
         return jsonify({"ok": False, "error": "Upload a classroom photo first."}), 400
@@ -181,7 +248,7 @@ def attendance_mark():
     if not allowed_media(uploaded_file.filename):
         return jsonify({"ok": False, "error": "Use an image or video file for attendance marking."}), 400
 
-    service = get_attendance_service()
+    service = get_attendance_service(classroom_id)
     photo_name = secure_filename(uploaded_file.filename)
     photo_path = ATTENDANCE_DIR / "uploads" / f"{uuid.uuid4().hex[:12]}_{photo_name}"
     photo_path.parent.mkdir(parents=True, exist_ok=True)
@@ -199,12 +266,16 @@ def attendance_mark():
 
 @app.post("/api/attendance/demo")
 def attendance_demo():
+    classroom_id = request.form.get("classroom") or request.args.get("classroom", "")
+    if (error := _require_classroom(classroom_id)) is not None:
+        return error
+
     import shutil
     demo_src = Path(__file__).parent / "static" / "demo_classroom.jpg"
     if not demo_src.exists():
         return jsonify({"ok": False, "error": "Demo image not found."}), 404
 
-    service = get_attendance_service()
+    service = get_attendance_service(classroom_id)
     photo_path = ATTENDANCE_DIR / "uploads" / "demo_classroom.jpg"
     photo_path.parent.mkdir(parents=True, exist_ok=True)
     shutil.copy2(demo_src, photo_path)

activity_web/backend/attendance_service.py

@@ -19,12 +19,39 @@ from utils.adaface_backbone import AdaFaceWrapper, DEFAULT_CKPT_PATH as ADAFACE_
 
 UPLOAD_DIR = ATTENDANCE_DIR / "uploads"
 MARKED_DIR = ATTENDANCE_DIR / "marked"
-STORE_PATH = ATTENDANCE_DIR / "attendance_store.json"
 PHOTOS_PER_VIDEO = 32
+
+# Fixed whitelist of valid classrooms — every roster is scoped to one of these.
+# Always validate a classroom id against this list before it touches a file path.
+CLASSROOMS = [f"cse{i}" for i in range(1, 9)]
+CLASSROOM_LABELS = {c: f"CSE {c[3:]}" for c in CLASSROOMS}
+
+
+def _store_path(classroom_id: str) -> Path:
+    if classroom_id not in CLASSROOMS:
+        raise ValueError(f"Unknown classroom: {classroom_id!r}")
+    return ATTENDANCE_DIR / f"attendance_store_{classroom_id}.json"
+
+
+def migrate_legacy_flat_store() -> None:
+    """One-time migration: this app used to have a single flat attendance_store.json
+    shared by everyone. If it still exists and CSE 8's file doesn't, copy it over —
+    the students originally enrolled there all belong to CSE 8."""
+    legacy_path = ATTENDANCE_DIR / "attendance_store.json"
+    cse8_path = _store_path("cse8")
+    if legacy_path.exists() and not cse8_path.exists():
+        cse8_path.parent.mkdir(parents=True, exist_ok=True)
+        cse8_path.write_text(legacy_path.read_text())
 # AdaFace IR-101's own p99 impostor threshold, derived from the human-labeled
 # clean eval set (eval/impostor_scope_eval.py) — NOT glintr100's 0.38, the two
-# backbones' cosine distributions aren't comparable.
+# backbones' cosine distributions aren't comparable. Below this, a face gets no
+# name candidate at all ("Unknown").
 FACE_SIMILARITY_THRESHOLD = 0.28
+# At/above this, a match counts as confidently "Present". Between
+# FACE_SIMILARITY_THRESHOLD and this, it's a real name candidate but not
+# confident enough to auto-confirm — surfaced as "Suspicious" for a teacher
+# to eyeball, rather than silently trusted or silently discarded.
+PRESENT_SIMILARITY_THRESHOLD = 0.30
 EMBEDDING_MODEL_NAME = "adaface_ir101_webface12m"
 ENROLLMENT_MIN_DET_SCORE = 0.50
 # Unchanged from glintr100: eval/build_gallery.py mirrors production enrollment
@@ -127,32 +154,45 @@ class FaceSample:
     score: float
 
 
+@lru_cache(maxsize=1)
+def _get_face_models() -> tuple[FaceAnalysis, AdaFaceWrapper]:
+    """Load the shared, expensive ML models once — every classroom's
+    AttendanceService reuses the same instances, only the roster JSON differs."""
+    face_analysis = FaceAnalysis(
+        name="antelopev2",
+        allowed_modules=["detection"],
+        providers=["CPUExecutionProvider"],
+    )
+    face_analysis.prepare(ctx_id=0, det_size=(1280, 1280), det_thresh=0.5)
+    adaface = AdaFaceWrapper.load(ADAFACE_CKPT_PATH)
+    return face_analysis, adaface
+
+
 class AttendanceService:
-    def __init__(self) -> None:
+    def __init__(self, classroom_id: str) -> None:
+        if classroom_id not in CLASSROOMS:
+            raise ValueError(f"Unknown classroom: {classroom_id!r}")
+        self.classroom_id = classroom_id
+        self.store_path = _store_path(classroom_id)
         ensure_attendance_dirs()
-        self.face_analysis = FaceAnalysis(
-            name="antelopev2",
-            allowed_modules=["detection"],
-            providers=["CPUExecutionProvider"],
-        )
-        self.face_analysis.prepare(ctx_id=0, det_size=(1280, 1280), det_thresh=0.5)
-        self.adaface = AdaFaceWrapper.load(ADAFACE_CKPT_PATH)
+        self.face_analysis, self.adaface = _get_face_models()
         self._migrate_legacy_embeddings_if_needed()
 
     def _read_store(self) -> dict:
-        if not STORE_PATH.exists():
-            return {"students": [], "attendance": []}
+        if not self.store_path.exists():
+            return {"students": [], "attendance": [], "pending_reviews": []}
         try:
-            data = json.loads(STORE_PATH.read_text())
+            data = json.loads(self.store_path.read_text())
         except Exception:
-            return {"students": [], "attendance": []}
+            return {"students": [], "attendance": [], "pending_reviews": []}
         data.setdefault("students", [])
         data.setdefault("attendance", [])
+        data.setdefault("pending_reviews", [])
         return data
 
     def _write_store(self, data: dict) -> None:
-        ATTENDANCE_DIR.mkdir(parents=True, exist_ok=True)
-        STORE_PATH.write_text(json.dumps(data, indent=2))
+        self.store_path.parent.mkdir(parents=True, exist_ok=True)
+        self.store_path.write_text(json.dumps(data, indent=2))
 
     def _load_image(self, media_path: Path) -> np.ndarray | None:
         image = cv2.imread(str(media_path))
@@ -192,9 +232,23 @@ class AttendanceService:
 
     def _sample_frames_for_enrollment(self, media_path: Path) -> list[np.ndarray]:
         """Sample up to MAX_ENROLLMENT_FRAMES frames, spread evenly across the
-        whole clip. Deriving the step from total_frames (rather than a fixed
-        per-second interval) means short clips still yield close to the target
-        frame count instead of being starved by their length."""
+        whole clip, by decoding sequentially and subsampling afterward —
+        never by seeking.
+
+        This used to seek to computed positions (via CAP_PROP_POS_FRAMES),
+        trusting CAP_PROP_FRAME_COUNT to know where those positions were. Both
+        turned out to be unreliable for webm/matroska files recorded live by a
+        browser's MediaRecorder, which streams encoded clusters via
+        ondataavailable and never goes back to write a finalized duration/seek
+        index: the reported frame count can be garbage (even negative), and —
+        the harder-to-catch failure — even when seeking *looks* like it
+        succeeded (returns frames, no error), sparse keyframes in a live
+        VP8/VP9 stream mean it can silently keep landing on the same handful
+        of early frames instead of actually spreading across the clip. A short
+        enrollment clip is cheap to fully decode, so there's no real reason to
+        seek at all here — only mark_attendance's _sample_video_frames (much
+        less frequently hit, and normally handed a still photo anyway) keeps
+        the seek-based path."""
         suffix = media_path.suffix.lower()
         if suffix in {".jpg", ".jpeg", ".png", ".webp", ".bmp"}:
             image = self._load_image(media_path)
@@ -204,18 +258,24 @@ class AttendanceService:
         if not cap.isOpened():
             return []
 
-        total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT) or 0)
-        step = max(1, total_frames // MAX_ENROLLMENT_FRAMES)
-        indices = list(range(0, total_frames, step))[:MAX_ENROLLMENT_FRAMES]
-
-        frames: list[np.ndarray] = []
-        for idx in indices:
-            cap.set(cv2.CAP_PROP_POS_FRAMES, idx)
+        # Flat cap generous enough for any realistic enrollment recording
+        # (~100s at 30fps) regardless of what the container's own metadata
+        # claims about duration/frame count.
+        all_frames: list[np.ndarray] = []
+        read_cap = 3000
+        while len(all_frames) < read_cap:
             ok, frame = cap.read()
-            if ok and frame is not None:
-                frames.append(frame)
+            if not ok or frame is None:
+                break
+            all_frames.append(frame)
         cap.release()
-        return frames
+
+        if not all_frames:
+            return []
+        if len(all_frames) <= MAX_ENROLLMENT_FRAMES:
+            return all_frames
+        pick = np.linspace(0, len(all_frames) - 1, MAX_ENROLLMENT_FRAMES, dtype=int)
+        return [all_frames[i] for i in pick]
 
     def _detect_samples(self, frame: np.ndarray) -> list[FaceSample]:
         faces = self.face_analysis.get(frame)
@@ -522,6 +582,58 @@ class AttendanceService:
 
         return {"match": self._student_public(best_student), "similarity": best_similarity}
 
+    def _add_embedding_to_gallery(self, store: dict, student_id: str, embedding: np.ndarray) -> None:
+        """Append an embedding to a student's stored gallery and recompute
+        their prototype. Shared by mark_attendance's automatic high-confidence
+        growth and by a teacher manually confirming a suspicious match."""
+        for s in store.get("students", []):
+            if s.get("student_id") == student_id:
+                stored = s.get("embeddings", []) or []
+                new_emb = _normalize(embedding).tolist()
+                stored = (stored + [new_emb])[-MAX_STORED_EMBEDDINGS:]
+                s["embeddings"] = stored
+                mat = np.asarray(stored, dtype=np.float32)
+                s["prototype"] = _normalize(mat.mean(axis=0)).tolist()
+                # observations is a lifetime counter (unlike embeddings, which is
+                # capped and can evict old entries) — keep it moving so the
+                # roster UI visibly reflects that this reinforced the gallery.
+                s["observations"] = int(s.get("observations", 0)) + 1
+                s["updated_at"] = _now_iso()
+                break
+
+    def resolve_suspicious_review(self, review_id: str, confirmed: bool) -> dict:
+        """A teacher confirming or rejecting a 'suspicious' match from
+        mark_attendance. Confirming reinforces the model — the embedding that
+        triggered the suspicious match gets added to that student's gallery,
+        the same way a high-confidence classroom match already does — and
+        records the student as present. Rejecting just discards the pending
+        review; nothing is added anywhere, since a wrong name is worse to
+        learn from than a merely uncertain one."""
+        store = self._read_store()
+        pending = store.get("pending_reviews", [])
+
+        review = next((r for r in pending if r.get("review_id") == review_id), None)
+        if review is None:
+            raise KeyError(f"No pending review: {review_id}")
+        store["pending_reviews"] = [r for r in pending if r.get("review_id") != review_id]
+
+        if confirmed:
+            embedding = np.asarray(review["embedding"], dtype=np.float32)
+            self._add_embedding_to_gallery(store, review["student_id"], embedding)
+            store["attendance"].append({
+                "student_name": review["student_name"],
+                "recognized_at": _now_iso(),
+                "source": "classroom_photo_confirmed",
+                "confidence": review["similarity"],
+            })
+
+        self._write_store(store)
+        return {
+            "confirmed": confirmed,
+            "student_name": review["student_name"],
+            "roster": self.list_students(),
+        }
+
     def mark_attendance(self, media_path: Path) -> dict:
         if not media_path.exists():
             raise FileNotFoundError(f"File not found: {media_path}")
@@ -540,7 +652,8 @@ class AttendanceService:
 
         detections = self._detect_samples(frame)
         marked_frame = frame.copy()
-        recognized: list[dict] = []
+        present: list[dict] = []
+        suspicious: list[dict] = []
         unknown_faces = 0
         unknown_faces_detail: list[dict] = []
         store = self._read_store()
@@ -551,7 +664,7 @@ class AttendanceService:
 
         # Per student: keep only the single highest-scoring face
         # so if two faces both exceed the threshold for the same student,
-        # only the best one gets the green box — the other stays Unknown.
+        # only the best one gets boxed — the other stays Unknown.
         best_per_student: dict[str, tuple] = {}
         for det, match in all_matches:
             if match["match"] is not None:
@@ -560,6 +673,7 @@ class AttendanceService:
                     best_per_student[name] = (det, match["similarity"], match)
 
         best_det_ids = {id(det) for det, _, _ in best_per_student.values()}
+        seen_student_ids: set[str] = set()
 
         for det, match in all_matches:
             x1, y1, x2, y2 = det.bbox
@@ -567,34 +681,47 @@ class AttendanceService:
 
             if is_best:
                 student = match["match"]
-                color = (0, 200, 0)
-                label = f"{student['name']} {match['similarity']:.2f}"
-                if student["name"] not in {r["student"]["name"] for r in recognized}:
-                    attendance_log.append({
-                        "student_name": student["name"],
-                        "recognized_at": _now_iso(),
-                        "source": "classroom_photo",
-                        "confidence": round(float(match["similarity"]), 4),
-                    })
-                    recognized.append({
-                        "student": student,
-                        "confidence": round(float(match["similarity"]), 4),
-                        "bbox": [x1, y1, x2, y2],
-                    })
-                    # Incremental gallery growth: high-confidence classroom embeddings
-                    # are added to the student's gallery so future matches improve.
-                    if match["similarity"] >= 0.60:
-                        all_students = store.get("students", [])
-                        for s in all_students:
-                            if s.get("student_id") == student.get("student_id"):
-                                stored = s.get("embeddings", []) or []
-                                new_emb = _normalize(det.embedding).tolist()
-                                stored = (stored + [new_emb])[-MAX_STORED_EMBEDDINGS:]
-                                s["embeddings"] = stored
-                                # Recompute prototype
-                                mat = np.asarray(stored, dtype=np.float32)
-                                s["prototype"] = _normalize(mat.mean(axis=0)).tolist()
-                                break
+                similarity = match["similarity"]
+                is_present = similarity >= PRESENT_SIMILARITY_THRESHOLD
+                color = (0, 200, 0) if is_present else (0, 165, 255)  # green vs. amber (BGR)
+                tag = "" if is_present else " (suspicious)"
+                label = f"{student['name']} {similarity:.2f}{tag}"
+
+                if student["student_id"] not in seen_student_ids:
+                    seen_student_ids.add(student["student_id"])
+                    entry = {"student": student, "confidence": round(float(similarity), 4), "bbox": [x1, y1, x2, y2]}
+                    if is_present:
+                        present.append(entry)
+                        # Only confident matches get written to the attendance record —
+                        # a "suspicious" match is a candidate for a teacher to review,
+                        # not something to silently record as confirmed attendance.
+                        attendance_log.append({
+                            "student_name": student["name"],
+                            "recognized_at": _now_iso(),
+                            "source": "classroom_photo",
+                            "confidence": round(float(similarity), 4),
+                        })
+                        # Incremental gallery growth: high-confidence classroom embeddings
+                        # are added to the student's gallery so future matches improve.
+                        if similarity >= 0.60:
+                            self._add_embedding_to_gallery(store, student["student_id"], det.embedding)
+                    else:
+                        # Hold the embedding behind a review_id rather than acting on
+                        # it now — a teacher confirming/rejecting it is what decides
+                        # whether it reinforces this student's gallery (see
+                        # resolve_suspicious_review). Not returned in the API
+                        # response itself; only the review_id is.
+                        review_id = uuid.uuid4().hex
+                        store.setdefault("pending_reviews", []).append({
+                            "review_id": review_id,
+                            "student_id": student["student_id"],
+                            "student_name": student["name"],
+                            "similarity": round(float(similarity), 4),
+                            "embedding": _normalize(det.embedding).tolist(),
+                            "created_at": _now_iso(),
+                        })
+                        entry["review_id"] = review_id
+                        suspicious.append(entry)
             else:
                 unknown_faces += 1
                 color = (0, 0, 255)
@@ -612,6 +739,13 @@ class AttendanceService:
                 cv2.FONT_HERSHEY_SIMPLEX, 0.55, color, 2, cv2.LINE_AA,
             )
 
+        # Everyone enrolled in this classroom who wasn't matched at all (present
+        # or suspicious) in this photo.
+        absent = [
+            self._student_public(s) for s in store.get("students", [])
+            if s.get("student_id") not in seen_student_ids
+        ]
+
         store["attendance"] = attendance_log
         self._write_store(store)
 
@@ -620,21 +754,22 @@ class AttendanceService:
         cv2.imwrite(str(marked_path), marked_frame)
 
         return {
-            "recognized": recognized,
+            "present": present,
+            "suspicious": suspicious,
+            "absent": absent,
             "unknown_faces": unknown_faces,
             "unknown_faces_detail": unknown_faces_detail,
             "marked_path": str(marked_path),
             "marked_url": f"/api/attendance/artifacts/{marked_name}",
             "roster": self.list_students(),
-            "attendance_log": self.list_attendance(limit=20),
         }
 
 
-@lru_cache(maxsize=1)
-def get_attendance_service() -> AttendanceService:
+@lru_cache(maxsize=None)
+def get_attendance_service(classroom_id: str) -> AttendanceService:
     # Fix nested insightface model folders if present before initializing
     try:
         ensure_insightface_models_flat(["antelopev2"])
     except Exception:
         pass
-    return AttendanceService()
+    return AttendanceService(classroom_id)

activity_web/backend/static/app.js

@@ -9,6 +9,8 @@ function activateTab(tabId) {
     btn.setAttribute("aria-selected", String(active));
   });
   tabPanels.forEach((panel) => panel.classList.toggle("hidden", panel.id !== tabId));
+  // Refresh the roster in case a student was just enrolled from the other tab.
+  if (tabId === "attendance-tab") refreshAttendanceSummary();
 }
 tabButtons.forEach((btn) => btn.addEventListener("click", () => activateTab(btn.dataset.tabTarget)));
 
@@ -130,7 +132,64 @@ function renderClassroomStudents(students) {
   }).join("");
 }
 
-// ── Attendance tab ─────────────────────────────────────────────────────────────
+// ── Attendance tab: classroom picker ─────────────────────────────────────────
+const classroomSelect        = document.getElementById("classroom-select");
+const rosterClassroomLabel   = document.getElementById("roster-classroom-label");
+let currentClassroomId = null;
+
+function updateRosterClassroomLabel() {
+  const label = classroomSelect.options[classroomSelect.selectedIndex]?.textContent || "";
+  rosterClassroomLabel.textContent = label;
+}
+
+async function loadClassrooms() {
+  try {
+    const response = await fetch("/api/attendance/classrooms");
+    const data = await response.json();
+    if (!data.ok || !data.classrooms.length) throw new Error(data.error || "No classrooms available.");
+    classroomSelect.innerHTML = data.classrooms.map((c) => `<option value="${c.id}">${c.label}</option>`).join("");
+    const saved = localStorage.getItem("prism_classroom");
+    currentClassroomId = (saved && data.classrooms.some((c) => c.id === saved)) ? saved : data.classrooms[0].id;
+    classroomSelect.value = currentClassroomId;
+    updateRosterClassroomLabel();
+    await refreshAttendanceSummary();
+  } catch (err) {
+    console.error("Failed to load classrooms:", err);
+  }
+}
+
+classroomSelect.addEventListener("change", async () => {
+  currentClassroomId = classroomSelect.value;
+  localStorage.setItem("prism_classroom", currentClassroomId);
+  updateRosterClassroomLabel();
+  markResult.classList.add("hidden");
+  await refreshAttendanceSummary();
+});
+
+// ── Enroll Student tab: its own independent classroom picker ────────────────
+const enrollClassroomSelect = document.getElementById("enroll-classroom-select");
+let currentEnrollClassroomId = null;
+
+async function loadEnrollClassrooms() {
+  try {
+    const response = await fetch("/api/attendance/classrooms");
+    const data = await response.json();
+    if (!data.ok || !data.classrooms.length) throw new Error(data.error || "No classrooms available.");
+    enrollClassroomSelect.innerHTML = data.classrooms.map((c) => `<option value="${c.id}">${c.label}</option>`).join("");
+    const saved = localStorage.getItem("prism_classroom");
+    currentEnrollClassroomId = (saved && data.classrooms.some((c) => c.id === saved)) ? saved : data.classrooms[0].id;
+    enrollClassroomSelect.value = currentEnrollClassroomId;
+  } catch (err) {
+    console.error("Failed to load classrooms:", err);
+  }
+}
+
+enrollClassroomSelect.addEventListener("change", () => {
+  currentEnrollClassroomId = enrollClassroomSelect.value;
+  localStorage.setItem("prism_classroom", currentEnrollClassroomId);
+});
+
+// ── Enroll Student tab ────────────────────────────────────────────────────────
 const enrollForm        = document.getElementById("enroll-form");
 const studentNameInput  = document.getElementById("student-name-input");
 const enrollMediaInput  = document.getElementById("enroll-media-input");
@@ -144,10 +203,10 @@ const classroomPhotoLabel = document.getElementById("classroom-photo-label");
 const markStatus        = document.getElementById("mark-status");
 const markResult        = document.getElementById("mark-result");
 const markedPhotoPreview= document.getElementById("marked-photo-preview");
-const recognizedList    = document.getElementById("recognized-list");
-const attendanceLogList = document.getElementById("attendance-log-list");
+const presentList       = document.getElementById("present-list");
+const suspiciousList    = document.getElementById("suspicious-list");
+const absentList        = document.getElementById("absent-list");
 const rosterList        = document.getElementById("roster-list");
-const attendanceLogSummary = document.getElementById("attendance-log-summary");
 
 enrollMediaInput.addEventListener("change", () => {
   enrollMediaLabel.textContent = selectedFileText(enrollMediaInput.files, "Choose photos or videos for enrollment");
@@ -158,12 +217,23 @@ classroomPhotoInput.addEventListener("change", () => {
 
 // Enrollment tab toggle
 let enrollTab = "files";
+let enrollCameraRecorder = null;
 function switchEnrollTab(tab) {
+  const previousTab = enrollTab;
   enrollTab = tab;
   document.getElementById("enroll-tab-files").style.display  = tab === "files"  ? "" : "none";
   document.getElementById("enroll-tab-folder").style.display = tab === "folder" ? "" : "none";
+  document.getElementById("enroll-tab-camera").style.display = tab === "camera" ? "" : "none";
   document.getElementById("tab-files").classList.toggle("tab-active",  tab === "files");
   document.getElementById("tab-folder").classList.toggle("tab-active", tab === "folder");
+  document.getElementById("tab-camera").classList.toggle("tab-active", tab === "camera");
+
+  if (tab === "camera" && !enrollCameraRecorder) {
+    enrollCameraRecorder = CameraRecorder.create(document.getElementById("enroll-camera-recorder"));
+  }
+  if (previousTab === "camera" && tab !== "camera" && enrollCameraRecorder) {
+    enrollCameraRecorder.stopStream();
+  }
 }
 
 enrollForm.addEventListener("submit", async (event) => {
@@ -184,13 +254,24 @@ enrollForm.addEventListener("submit", async (event) => {
       response = await fetch("/api/attendance/enroll-folder", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ student_name: studentName, folder_path: folderPath }),
+        body: JSON.stringify({ classroom: currentEnrollClassroomId, student_name: studentName, folder_path: folderPath }),
       });
       data = await response.json();
       if (data.ok) enrollStatus.textContent = `Enrolled ${data.student.name} from ${data.files_used} file(s).`;
+    } else if (enrollTab === "camera") {
+      const blob = enrollCameraRecorder && enrollCameraRecorder.getBlob();
+      if (!blob) { enrollStatus.textContent = "Record a video first."; enrollStatus.classList.add("error"); btn.disabled = false; return; }
+      const payload = new FormData();
+      payload.append("classroom", currentEnrollClassroomId);
+      payload.append("student_name", studentName);
+      payload.append("media", blob, "recording.webm");
+      response = await fetch("/api/attendance/enroll", { method: "POST", body: payload });
+      data = await response.json();
+      if (data.ok) { enrollStatus.textContent = `Enrolled ${data.student.name} successfully.`; enrollCameraRecorder.reset(); }
     } else {
       if (!enrollMediaInput.files.length) { enrollStatus.textContent = "Upload at least one photo or video."; enrollStatus.classList.add("error"); btn.disabled = false; return; }
       const payload = new FormData();
+      payload.append("classroom", currentEnrollClassroomId);
       payload.append("student_name", studentName);
       Array.from(enrollMediaInput.files).forEach((f) => payload.append("media", f));
       response = await fetch("/api/attendance/enroll", { method: "POST", body: payload });
@@ -198,9 +279,8 @@ enrollForm.addEventListener("submit", async (event) => {
       if (data.ok) enrollStatus.textContent = `Enrolled ${data.student.name} successfully.`;
     }
     if (!response.ok || !data.ok) throw new Error(data.error || "Enrollment failed.");
-    renderRoster(data.students || []);
     renderEnrollmentResult(data.student, data.media_samples || []);
-    await refreshAttendanceSummary();
+    if (currentEnrollClassroomId === currentClassroomId) await refreshAttendanceSummary();
   } catch (err) {
     enrollStatus.textContent = err.message;
     enrollStatus.classList.add("error");
@@ -212,6 +292,7 @@ markForm.addEventListener("submit", async (event) => {
   if (!classroomPhotoInput.files.length) { markStatus.textContent = "Upload a classroom photo first."; markStatus.classList.add("error"); return; }
   const btn = markForm.querySelector("button[type='submit']");
   const payload = new FormData();
+  payload.append("classroom", currentClassroomId);
   payload.append("photo", classroomPhotoInput.files[0]);
   markStatus.classList.remove("error");
   markStatus.textContent = "Detecting faces and marking attendance...";
@@ -221,12 +302,10 @@ markForm.addEventListener("submit", async (event) => {
     const data = await response.json();
     if (!response.ok || !data.ok) throw new Error(data.error || "Attendance marking failed.");
     renderMarkedPhoto(data.marked_url);
-    renderRecognizedFaces(data.recognized || [], data.unknown_faces || 0, data.unknown_faces_detail || []);
-    renderAttendanceLog(data.attendance_log || []);
+    renderAttendanceBuckets(data.present || [], data.suspicious || [], data.absent || [], data.unknown_faces || 0, data.unknown_faces_detail || []);
     renderRoster(data.roster || []);
-    markStatus.textContent = `Marked ${data.recognized.length} student${data.recognized.length === 1 ? "" : "s"}.`;
+    markStatus.textContent = `${data.present.length} present, ${data.suspicious.length} suspicious, ${data.absent.length} absent.`;
     markResult.classList.remove("hidden");
-    await refreshAttendanceSummary();
   } catch (err) {
     markStatus.textContent = err.message;
     markStatus.classList.add("error");
@@ -238,8 +317,9 @@ document.getElementById("demo-preview-btn").addEventListener("click", () => {
   markStatus.textContent = "Demo classroom photo — original, no annotations.";
   markedPhotoPreview.src = "/static/demo_classroom.jpg";
   markResult.classList.remove("hidden");
-  recognizedList.innerHTML = "";
-  attendanceLogList.innerHTML = "";
+  presentList.innerHTML = "";
+  suspiciousList.innerHTML = "";
+  absentList.innerHTML = "";
   hideUnknownFacesUI();
 });
 
@@ -255,15 +335,13 @@ document.getElementById("demo-btn").addEventListener("click", async () => {
 
   // Step 2 — run the pipeline
   try {
-    const response = await fetch("/api/attendance/demo", { method: "POST" });
+    const response = await fetch(`/api/attendance/demo?classroom=${encodeURIComponent(currentClassroomId)}`, { method: "POST" });
     const data = await response.json();
     if (!response.ok || !data.ok) throw new Error(data.error || "Demo failed.");
     renderMarkedPhoto(data.marked_url);
-    renderRecognizedFaces(data.recognized || [], data.unknown_faces || 0, data.unknown_faces_detail || []);
-    renderAttendanceLog(data.attendance_log || []);
+    renderAttendanceBuckets(data.present || [], data.suspicious || [], data.absent || [], data.unknown_faces || 0, data.unknown_faces_detail || []);
     renderRoster(data.roster || []);
-    markStatus.textContent = `Demo complete — ${data.recognized.length} student${data.recognized.length === 1 ? "" : "s"} recognized.`;
-    await refreshAttendanceSummary();
+    markStatus.textContent = `Demo complete — ${data.present.length} present, ${data.suspicious.length} suspicious, ${data.absent.length} absent.`;
   } catch (err) {
     markStatus.textContent = err.message;
     markStatus.classList.add("error");
@@ -271,10 +349,11 @@ document.getElementById("demo-btn").addEventListener("click", async () => {
 });
 
 async function refreshAttendanceSummary() {
+  if (!currentClassroomId) return;
   try {
-    const response = await fetch("/api/attendance/roster");
+    const response = await fetch(`/api/attendance/roster?classroom=${encodeURIComponent(currentClassroomId)}`);
     const data = await response.json();
-    if (response.ok && data.ok) { renderRoster(data.students || []); renderAttendanceSummary(data.attendance || []); }
+    if (response.ok && data.ok) renderRoster(data.students || []);
   } catch (e) { console.error(e); }
 }
 
@@ -297,17 +376,29 @@ const unknownFacesGrid   = document.getElementById("unknown-faces-grid");
 let currentUnknownFaces  = [];
 let unknownFacesExpanded = false;
 
-function renderRecognizedFaces(recognized, unknownFaces, unknownFacesDetail) {
-  const names = recognized.map((e) => e.student.name);
-  const summary = names.length
-    ? `<div class="result-summary">${names.length} present: ${names.join(", ")}</div>`
-    : `<div class="result-summary muted">0 present</div>`;
-
-  recognizedList.innerHTML = `<h3>Recognized faces</h3>
-    ${summary}
-    ${recognized.length
-      ? recognized.map((e) => `<div class="result-item"><strong>${e.student.name}</strong><span>Confidence ${formatNumber(e.confidence)}</span></div>`).join("")
-      : '<div class="result-item muted">No enrolled students recognized.</div>'}`;
+function renderAttendanceBuckets(present, suspicious, absent, unknownFaces, unknownFacesDetail) {
+  presentList.innerHTML = `<h3>Present (${present.length})</h3>
+    ${present.length
+      ? present.map((e) => `<div class="result-item present-item"><strong>${e.student.name}</strong><span>Confidence ${formatNumber(e.confidence)}</span></div>`).join("")
+      : '<div class="result-item muted">No students confidently recognized.</div>'}`;
+
+  suspiciousList.innerHTML = `<h3>Suspicious (${suspicious.length})</h3>
+    ${suspicious.length
+      ? suspicious.map((e) => `
+        <div class="result-item suspicious-item" data-review-id="${e.review_id}">
+          <strong>${e.student.name}</strong>
+          <span>Confidence ${formatNumber(e.confidence)} — please verify</span>
+          <div class="suspicious-actions">
+            <button type="button" class="suspicious-btn suspicious-confirm-btn" data-review-id="${e.review_id}">Yes, it's them</button>
+            <button type="button" class="suspicious-btn suspicious-reject-btn" data-review-id="${e.review_id}">Not them</button>
+          </div>
+        </div>`).join("")
+      : '<div class="result-item muted">None.</div>'}`;
+
+  absentList.innerHTML = `<h3>Absent (${absent.length})</h3>
+    ${absent.length
+      ? absent.map((s) => `<div class="result-item absent-item"><strong>${s.name}</strong></div>`).join("")
+      : '<div class="result-item muted">Everyone enrolled was seen.</div>'}`;
 
   currentUnknownFaces = unknownFacesDetail || [];
   unknownFacesExpanded = false;
@@ -322,6 +413,43 @@ function renderRecognizedFaces(recognized, unknownFaces, unknownFacesDetail) {
   }
 }
 
+// Confirming reinforces the model: the embedding that triggered the suspicious
+// match gets added to that student's gallery (same as an automatic high-
+// confidence match would). Rejecting just discards it — nothing is learned
+// from a match the teacher says is wrong.
+suspiciousList.addEventListener("click", async (event) => {
+  const confirmBtn = event.target.closest(".suspicious-confirm-btn");
+  const rejectBtn  = event.target.closest(".suspicious-reject-btn");
+  const btn = confirmBtn || rejectBtn;
+  if (!btn) return;
+
+  const confirmed = !!confirmBtn;
+  const item = btn.closest(".suspicious-item");
+  const reviewId = btn.dataset.reviewId;
+  const name = item.querySelector("strong")?.textContent || "this student";
+  item.querySelectorAll("button").forEach((b) => (b.disabled = true));
+
+  try {
+    const response = await fetch("/api/attendance/suspicious/resolve", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ classroom: currentClassroomId, review_id: reviewId, confirmed }),
+    });
+    const data = await response.json();
+    if (!response.ok || !data.ok) throw new Error(data.error || "Failed to resolve.");
+
+    item.classList.remove("suspicious-item");
+    item.classList.add(confirmed ? "present-item" : "absent-item");
+    item.innerHTML = confirmed
+      ? `<strong>${name}</strong><span>Confirmed — added to their gallery.</span>`
+      : `<strong>${name}</strong><span>Marked as not them.</span>`;
+    if (confirmed) await refreshAttendanceSummary();
+  } catch (err) {
+    alert(err.message);
+    item.querySelectorAll("button").forEach((b) => (b.disabled = false));
+  }
+});
+
 function hideUnknownFacesUI() {
   currentUnknownFaces = [];
   unknownFacesExpanded = false;
@@ -384,16 +512,6 @@ unknownFacesToggle.addEventListener("click", () => {
   }
 });
 
-function renderAttendanceLog(log) {
-  attendanceLogList.innerHTML = `<h3>Attendance log</h3>
-    ${log.map((e) => `<div class="result-item"><strong>${e.student_name}</strong><span>${e.recognized_at} · ${formatNumber(e.confidence)}</span></div>`).join("")}`;
-}
-
-function renderAttendanceSummary(log) {
-  attendanceLogSummary.innerHTML = `<h3>Recent attendance</h3>
-    ${log.map((e) => `<div class="result-item"><strong>${e.student_name}</strong><span>${e.recognized_at} · ${formatNumber(e.confidence)}</span></div>`).join("")}`;
-}
-
 function renderRoster(students) {
   if (!students.length) { rosterList.innerHTML = '<div class="result-item muted">No students enrolled yet.</div>'; return; }
   rosterList.innerHTML = students.map((s) => `
@@ -414,12 +532,10 @@ rosterList.addEventListener("click", async (event) => {
   if (!confirm(`Delete ${name}? This removes the student and their attendance records.`)) return;
   btn.disabled = true; btn.textContent = "Deleting...";
   try {
-    const response = await fetch(`/api/attendance/students/${encodeURIComponent(studentId)}`, { method: "DELETE" });
+    const response = await fetch(`/api/attendance/students/${encodeURIComponent(studentId)}?classroom=${encodeURIComponent(currentClassroomId)}`, { method: "DELETE" });
     const data = await response.json();
     if (!response.ok || !data.ok) throw new Error(data.error || "Delete failed.");
     renderRoster(data.students || []);
-    renderAttendanceSummary(data.attendance || []);
-    await refreshAttendanceSummary();
   } catch (err) { alert(err.message); }
   finally { btn.disabled = false; btn.textContent = "Delete"; }
 });
@@ -437,4 +553,5 @@ document.addEventListener("keydown", (e) => { if (e.key === "Escape") lightbox.c
 function formatWindow(s) { const n = Number(s); return isNaN(n) ? "-" : `${n.toFixed(2)}s`; }
 function formatNumber(v) { if (v == null || isNaN(Number(v))) return "-"; return Number(v).toFixed(4); }
 
-refreshAttendanceSummary();
+loadClassrooms();
+loadEnrollClassrooms();

activity_web/backend/static/camera-recorder.js

@@ -0,0 +1,177 @@
+// Shared camera-recording widget, used by both the teacher dashboard's enroll
+// tab and the student self-enrollment page. Records a short webm clip via
+// MediaRecorder and hands the Blob back to the caller — it never touches a
+// file <input>, the caller just asks for the current Blob on submit.
+//
+// Walks the person through a short guided sequence (look center, turn left,
+// turn right, ...) while recording, and overlays a face-position guide, so
+// the resulting clip has the pose variety the enrollment pipeline wants
+// (recall ANCHOR_CONSISTENCY_THRESHOLD tolerates moderate turns, and the
+// degraded/distance copies it generates work better from a clear, centered,
+// well-lit face). The sequence is just a default — pass `script` to override.
+//
+// Usage:
+//   const recorder = CameraRecorder.create(containerEl);
+//   ...
+//   const blob = recorder.getBlob(); // null if nothing recorded yet
+//   recorder.reset();                // clear after a successful submit
+
+const CameraRecorder = (() => {
+  const DEFAULT_SCRIPT = [
+    { text: "Look straight at the camera", seconds: 10 },
+    { text: "Slowly turn your head to the left", seconds: 8 },
+    { text: "Slowly turn your head to the right", seconds: 8 },
+    { text: "Back to center. Almost done", seconds: 6 },
+  ];
+
+  function speak(text) {
+    if (!("speechSynthesis" in window)) return;
+    try {
+      window.speechSynthesis.cancel(); // don't queue/overlap with a prior step
+      const utter = new SpeechSynthesisUtterance(text);
+      utter.rate = 0.95;
+      window.speechSynthesis.speak(utter);
+    } catch (err) {
+      console.warn("Speech synthesis unavailable:", err);
+    }
+  }
+
+  function create(container, options = {}) {
+    const script = options.script && options.script.length ? options.script : DEFAULT_SCRIPT;
+
+    container.innerHTML = `
+      <div class="camera-recorder">
+        <div class="camera-video-wrap">
+          <video class="camera-preview" autoplay muted playsinline></video>
+          <div class="camera-face-guide" hidden></div>
+          <div class="camera-instruction" hidden></div>
+        </div>
+        <p class="camera-hint">Center your face in the oval, in good light, at arm's length from the camera.</p>
+        <div class="camera-controls">
+          <button type="button" class="camera-btn" data-action="start-camera">Start camera</button>
+          <button type="button" class="camera-btn" data-action="record" disabled>Start recording</button>
+          <button type="button" class="camera-btn" data-action="retake" hidden>Retake</button>
+        </div>
+        <div class="camera-status">Camera off.</div>
+      </div>
+    `;
+
+    const videoEl       = container.querySelector(".camera-preview");
+    const faceGuideEl   = container.querySelector(".camera-face-guide");
+    const instructionEl = container.querySelector(".camera-instruction");
+    const statusEl      = container.querySelector(".camera-status");
+    const startBtn       = container.querySelector('[data-action="start-camera"]');
+    const recordBtn      = container.querySelector('[data-action="record"]');
+    const retakeBtn      = container.querySelector('[data-action="retake"]');
+
+    let stream = null;
+    let mediaRecorder = null;
+    let chunks = [];
+    let recordedBlob = null;
+    let recording = false;
+    let scriptTimer = null;
+
+    async function startCamera() {
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+      } catch (err) {
+        statusEl.textContent = "Couldn't access the camera: " + err.message;
+        return;
+      }
+      videoEl.srcObject = stream;
+      faceGuideEl.hidden = false;
+      startBtn.disabled = true;
+      recordBtn.disabled = false;
+      statusEl.textContent = "Camera on. Center your face in the oval, then start recording.";
+    }
+
+    function runGuidedScript() {
+      let stepIndex = 0;
+      const showStep = () => {
+        if (!recording || stepIndex >= script.length) {
+          instructionEl.hidden = true;
+          if (recording) stopRecording();
+          return;
+        }
+        const step = script[stepIndex];
+        instructionEl.hidden = false;
+        instructionEl.textContent = `${step.text} (${stepIndex + 1}/${script.length})`;
+        speak(step.text);
+        stepIndex++;
+        scriptTimer = setTimeout(showStep, step.seconds * 1000);
+      };
+      showStep();
+    }
+
+    function startRecording() {
+      if (!stream) return;
+      chunks = [];
+      const mimeType = MediaRecorder.isTypeSupported("video/webm;codecs=vp8")
+        ? "video/webm;codecs=vp8"
+        : "video/webm";
+      mediaRecorder = new MediaRecorder(stream, { mimeType });
+      mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) chunks.push(e.data); };
+      mediaRecorder.onstop = () => {
+        recordedBlob = new Blob(chunks, { type: mimeType });
+        videoEl.srcObject = null;
+        videoEl.src = URL.createObjectURL(recordedBlob);
+        videoEl.muted = false;
+        videoEl.controls = true;
+        videoEl.play().catch(() => {});
+        stream.getTracks().forEach((t) => t.stop());
+        stream = null;
+        recording = false;
+        faceGuideEl.hidden = true;
+        instructionEl.hidden = true;
+        recordBtn.hidden = true;
+        retakeBtn.hidden = false;
+        statusEl.textContent = "Recorded. Review it, or retake.";
+      };
+      mediaRecorder.start();
+      recording = true;
+      recordBtn.textContent = "Stop recording";
+      statusEl.textContent = "Recording…";
+      runGuidedScript();
+    }
+
+    function stopRecording() {
+      if (scriptTimer) { clearTimeout(scriptTimer); scriptTimer = null; }
+      if ("speechSynthesis" in window) window.speechSynthesis.cancel();
+      if (mediaRecorder && recording) mediaRecorder.stop();
+    }
+
+    function retake() {
+      if (scriptTimer) { clearTimeout(scriptTimer); scriptTimer = null; }
+      if ("speechSynthesis" in window) window.speechSynthesis.cancel();
+      recordedBlob = null;
+      videoEl.controls = false;
+      videoEl.muted = true;
+      videoEl.removeAttribute("src");
+      videoEl.load();
+      faceGuideEl.hidden = true;
+      instructionEl.hidden = true;
+      recordBtn.hidden = false;
+      recordBtn.textContent = "Start recording";
+      retakeBtn.hidden = true;
+      startBtn.disabled = false;
+      recordBtn.disabled = true;
+      statusEl.textContent = "Camera off.";
+    }
+
+    startBtn.addEventListener("click", startCamera);
+    recordBtn.addEventListener("click", () => (recording ? stopRecording() : startRecording()));
+    retakeBtn.addEventListener("click", retake);
+
+    return {
+      getBlob: () => recordedBlob,
+      reset: retake,
+      stopStream: () => {
+        if (scriptTimer) { clearTimeout(scriptTimer); scriptTimer = null; }
+        if ("speechSynthesis" in window) window.speechSynthesis.cancel();
+        if (stream) stream.getTracks().forEach((t) => t.stop());
+      },
+    };
+  }
+
+  return { create, DEFAULT_SCRIPT };
+})();

activity_web/backend/static/enroll.js

@@ -0,0 +1,95 @@
+// Student self-enrollment page. Posts to the same /api/attendance/enroll
+// endpoint the teacher dashboard uses — just a lighter-weight form around it.
+
+const classroomSelect = document.getElementById("self-enroll-classroom");
+const nameInput       = document.getElementById("self-enroll-name");
+const mediaInput      = document.getElementById("self-enroll-media-input");
+const mediaLabel      = document.getElementById("self-enroll-media-label");
+const form            = document.getElementById("self-enroll-form");
+const statusEl        = document.getElementById("self-enroll-status");
+const resultEl        = document.getElementById("self-enroll-result");
+
+let enrollTab = "files";
+let cameraRecorder = null;
+
+function selectedFileText(files, fallback) {
+  if (!files || !files.length) return fallback;
+  return files.length === 1 ? files[0].name : `${files[0].name} + ${files.length - 1} more`;
+}
+
+mediaInput.addEventListener("change", () => {
+  mediaLabel.textContent = selectedFileText(mediaInput.files, "Choose photos or a short video");
+});
+
+function switchSelfEnrollTab(tab) {
+  const previousTab = enrollTab;
+  enrollTab = tab;
+  document.getElementById("self-enroll-tab-files").style.display  = tab === "files"  ? "" : "none";
+  document.getElementById("self-enroll-tab-camera").style.display = tab === "camera" ? "" : "none";
+  document.getElementById("self-tab-files").classList.toggle("tab-active",  tab === "files");
+  document.getElementById("self-tab-camera").classList.toggle("tab-active", tab === "camera");
+
+  if (tab === "camera" && !cameraRecorder) {
+    cameraRecorder = CameraRecorder.create(document.getElementById("self-enroll-camera-recorder"));
+  }
+  if (previousTab === "camera" && tab !== "camera" && cameraRecorder) {
+    cameraRecorder.stopStream();
+  }
+}
+
+async function loadClassrooms() {
+  try {
+    const response = await fetch("/api/attendance/classrooms");
+    const data = await response.json();
+    if (!data.ok || !data.classrooms.length) throw new Error(data.error || "No classrooms available.");
+    classroomSelect.innerHTML = data.classrooms.map((c) => `<option value="${c.id}">${c.label}</option>`).join("");
+  } catch (err) {
+    statusEl.textContent = "Couldn't load classrooms: " + err.message;
+    statusEl.classList.add("error");
+  }
+}
+
+form.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const name = nameInput.value.trim();
+  if (!name) { statusEl.textContent = "Enter your name."; statusEl.classList.add("error"); return; }
+
+  const btn = form.querySelector("button[type='submit']");
+  statusEl.classList.remove("error");
+  resultEl.classList.add("hidden");
+  btn.disabled = true;
+
+  try {
+    const payload = new FormData();
+    payload.append("classroom", classroomSelect.value);
+    payload.append("student_name", name);
+
+    if (enrollTab === "camera") {
+      const blob = cameraRecorder && cameraRecorder.getBlob();
+      if (!blob) { statusEl.textContent = "Record a video first."; statusEl.classList.add("error"); btn.disabled = false; return; }
+      payload.append("media", blob, "recording.webm");
+    } else {
+      if (!mediaInput.files.length) { statusEl.textContent = "Upload at least one photo or video."; statusEl.classList.add("error"); btn.disabled = false; return; }
+      Array.from(mediaInput.files).forEach((f) => payload.append("media", f));
+    }
+
+    statusEl.textContent = "Extracting your face profile...";
+    const response = await fetch("/api/attendance/enroll", { method: "POST", body: payload });
+    const data = await response.json();
+    if (!response.ok || !data.ok) throw new Error(data.error || "Enrollment failed.");
+
+    statusEl.textContent = `You're enrolled, ${data.student.name}!`;
+    resultEl.classList.remove("hidden");
+    resultEl.innerHTML = `<div class="result-summary">${data.student.name} — ${data.student.observations ?? 0} embeddings captured</div>`;
+    if (cameraRecorder) cameraRecorder.reset();
+    form.reset();
+    mediaLabel.textContent = "Choose photos or a short video";
+  } catch (err) {
+    statusEl.textContent = err.message;
+    statusEl.classList.add("error");
+  } finally {
+    btn.disabled = false;
+  }
+});
+
+loadClassrooms();

activity_web/backend/static/styles.css

@@ -32,6 +32,10 @@ body {
   padding: 40px 0 56px;
 }
 
+.shell-narrow {
+  width: min(640px, calc(100% - 32px));
+}
+
 .hero {
   max-width: 720px;
   margin-bottom: 24px;
@@ -149,7 +153,8 @@ h1 {
   color: var(--text);
 }
 
-.field-label input {
+.field-label input,
+.field-label select {
   width: 100%;
   border: 1px solid rgba(31, 35, 43, 0.16);
   border-radius: 16px;
@@ -159,6 +164,47 @@ h1 {
   color: var(--text);
 }
 
+.classroom-picker {
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+  padding: 14px 18px;
+  border-radius: 18px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.classroom-picker .field-label {
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.classroom-picker select {
+  width: auto;
+  min-width: 160px;
+  padding: 8px 12px;
+}
+
+.classroom-picker-hint {
+  margin: 0;
+  font-size: 0.82rem;
+  color: var(--muted);
+}
+
+.roster-classroom-label {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--accent-strong);
+  background: rgba(11, 94, 215, 0.1);
+  padding: 3px 10px;
+  border-radius: 999px;
+  vertical-align: middle;
+  margin-left: 6px;
+}
+
 .file-drop-compact {
   min-height: 74px;
 }
@@ -204,6 +250,64 @@ h1 {
   font-weight: 800;
 }
 
+.attendance-buckets {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.attendance-bucket {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.result-item.present-item {
+  border-color: rgba(34, 197, 94, 0.3);
+  background: rgba(34, 197, 94, 0.08);
+}
+
+.result-item.suspicious-item {
+  border-color: rgba(245, 158, 11, 0.35);
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.result-item.absent-item {
+  border-color: rgba(120, 120, 120, 0.25);
+  background: rgba(120, 120, 120, 0.06);
+}
+
+.suspicious-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.suspicious-btn {
+  flex: 1;
+  padding: 6px 10px;
+  border-radius: 10px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: none;
+}
+.suspicious-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.suspicious-confirm-btn {
+  border: 1.5px solid rgba(34, 197, 94, 0.5);
+  background: rgba(34, 197, 94, 0.12);
+  color: #15803d;
+}
+.suspicious-confirm-btn:hover { background: rgba(34, 197, 94, 0.2); }
+
+.suspicious-reject-btn {
+  border: 1.5px solid rgba(220, 53, 69, 0.4);
+  background: rgba(220, 53, 69, 0.1);
+  color: #b42318;
+}
+.suspicious-reject-btn:hover { background: rgba(220, 53, 69, 0.18); }
+
 .result-detail,
 .result-item,
 .roster-item {
@@ -266,6 +370,93 @@ h1 {
 .demo-btn:hover { background: rgba(99,102,241,0.07); }
 .demo-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
+.camera-recorder {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.camera-video-wrap {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #111;
+}
+
+.camera-preview {
+  width: 100%;
+  max-height: 320px;
+  display: block;
+  background: #111;
+  object-fit: contain;
+}
+
+.camera-face-guide {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 44%;
+  height: 70%;
+  border: 3px dashed rgba(255, 255, 255, 0.75);
+  border-radius: 50% / 42%;
+  pointer-events: none;
+  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.28);
+}
+
+.camera-instruction {
+  position: absolute;
+  left: 50%;
+  bottom: 14px;
+  transform: translateX(-50%);
+  max-width: 90%;
+  padding: 8px 16px;
+  border-radius: 999px;
+  background: rgba(17, 17, 17, 0.78);
+  color: #fff;
+  font-size: 0.88rem;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.camera-hint {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+.camera-controls {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.camera-btn {
+  flex: 1;
+  min-width: 120px;
+  background: transparent;
+  border: 1.5px solid #6366f1;
+  color: #6366f1;
+  border-radius: 8px;
+  padding: 8px 14px;
+  cursor: pointer;
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+.camera-btn:hover { background: rgba(99,102,241,0.07); }
+.camera-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.camera-status {
+  font-size: 0.82rem;
+  color: var(--muted);
+}
+
 .unknown-faces-toggle {
   width: 100%;
   background: rgba(220, 53, 69, 0.08);
@@ -620,6 +811,10 @@ tbody tr:hover {
     grid-template-columns: 1fr;
   }
 
+  .attendance-buckets {
+    grid-template-columns: 1fr;
+  }
+
   button {
     width: 100%;
   }

activity_web/backend/templates/enroll.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Enroll — PRISM AI</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
+  </head>
+  <body>
+    <main class="shell shell-narrow">
+      <section class="hero">
+        <p class="eyebrow">PRISM AI</p>
+        <h1>Enroll for attendance</h1>
+        <p class="lede">
+          Pick your classroom, enter your name, and provide a short face video —
+          upload a clip or record one right here. This creates the face profile
+          your teacher's attendance photos will be matched against.
+        </p>
+      </section>
+
+      <section class="panel">
+        <article class="attendance-card">
+          <form id="self-enroll-form" class="stack-form">
+            <label class="field-label">
+              Classroom
+              <select id="self-enroll-classroom" required></select>
+            </label>
+
+            <label class="field-label">
+              Your name
+              <input id="self-enroll-name" type="text" placeholder="Jane Doe" required />
+            </label>
+
+            <div style="display:flex;gap:8px;margin-bottom:4px;">
+              <button type="button" id="self-tab-files" class="tab-btn tab-active" onclick="switchSelfEnrollTab('files')">Upload files</button>
+              <button type="button" id="self-tab-camera" class="tab-btn" onclick="switchSelfEnrollTab('camera')">Record video</button>
+            </div>
+
+            <div id="self-enroll-tab-files">
+              <label class="file-drop file-drop-compact">
+                <input id="self-enroll-media-input" type="file" accept="image/*,video/*" multiple />
+                <span id="self-enroll-media-label">Choose photos or a short video</span>
+              </label>
+            </div>
+
+            <div id="self-enroll-tab-camera" style="display:none;">
+              <div id="self-enroll-camera-recorder"></div>
+            </div>
+
+            <button type="submit">Enroll me</button>
+          </form>
+
+          <div id="self-enroll-status" class="status">Ready to enroll.</div>
+          <div id="self-enroll-result" class="attendance-result hidden"></div>
+        </article>
+      </section>
+    </main>
+
+    <script src="{{ url_for('static', filename='camera-recorder.js') }}"></script>
+    <script src="{{ url_for('static', filename='enroll.js') }}"></script>
+  </body>
+</html>

activity_web/backend/templates/index.html

@@ -20,19 +20,84 @@
       <section class="tabs-shell">
         <div class="tabs-bar" role="tablist" aria-label="Workspace tabs">
           <button class="tab-button active" type="button" data-tab-target="attendance-tab" aria-selected="true">Attendance</button>
+          <button class="tab-button" type="button" data-tab-target="enroll-tab" aria-selected="false">Enroll Student</button>
           <button class="tab-button" type="button" data-tab-target="classroom-tab" aria-selected="false">Classroom Monitoring</button>
           <button class="tab-button" type="button" data-tab-target="how-it-works-tab" aria-selected="false">How it Works</button>
         </div>
 
         <section id="attendance-tab" class="panel tab-panel">
+          <div class="classroom-picker">
+            <label class="field-label" for="classroom-select">
+              Classroom
+              <select id="classroom-select"></select>
+            </label>
+          </div>
+
+          <div class="attendance-grid">
+            <article class="attendance-card attendance-card-wide">
+              <div class="attendance-card-header">
+                <h2>Mark attendance</h2>
+                <p>Upload a classroom photo and match all detected faces against the enrolled roster.</p>
+              </div>
+
+              <form id="mark-form" class="stack-form">
+                <label class="file-drop file-drop-compact">
+                  <input id="classroom-photo-input" name="photo" type="file" accept="image/*,video/*" required />
+                  <span id="classroom-photo-label">Choose a classroom photo</span>
+                </label>
+
+                <button type="submit">Mark attendance</button>
+              </form>
+
+              <div class="demo-btn-row">
+                <button id="demo-preview-btn" class="demo-btn">Preview demo image</button>
+                <button id="demo-btn" class="demo-btn">Run demo through pipeline</button>
+              </div>
+
+              <div id="mark-status" class="status">Ready to mark attendance.</div>
+              <div id="mark-result" class="attendance-result hidden">
+                <img id="marked-photo-preview" class="marked-photo-preview" alt="Marked classroom photo" />
+                <div class="attendance-buckets">
+                  <div class="attendance-bucket">
+                    <div id="present-list" class="result-list"></div>
+                  </div>
+                  <div class="attendance-bucket">
+                    <div id="suspicious-list" class="result-list"></div>
+                  </div>
+                  <div class="attendance-bucket">
+                    <div id="absent-list" class="result-list"></div>
+                  </div>
+                </div>
+                <button id="unknown-faces-toggle" type="button" class="unknown-faces-toggle hidden"></button>
+                <div id="unknown-faces-grid" class="unknown-faces-grid hidden"></div>
+              </div>
+            </article>
+
+            <article class="attendance-card attendance-card-wide">
+              <div class="attendance-card-header">
+                <h2>Enrolled students <span id="roster-classroom-label" class="roster-classroom-label"></span></h2>
+                <p>Current roster loaded from the enrolled embeddings; face detection uses InsightFace (SCRFD) and recognition uses the AdaFace IR-101 backbone.</p>
+              </div>
+
+              <div id="roster-list" class="roster-list"></div>
+            </article>
+          </div>
+        </section>
+
+        <section id="enroll-tab" class="panel tab-panel hidden">
           <div class="attendance-grid">
-            <article class="attendance-card">
+            <article class="attendance-card attendance-card-wide">
               <div class="attendance-card-header">
                 <h2>Enroll student</h2>
-                <p>Upload one or more photos or a short video to create the student embedding profile.</p>
+                <p>Pick your classroom, enter a name, and upload a photo/video or record one now to create the face profile.</p>
               </div>
 
               <form id="enroll-form" class="stack-form">
+                <label class="field-label">
+                  Classroom
+                  <select id="enroll-classroom-select" required></select>
+                </label>
+
                 <label class="field-label">
                   Student name
                   <input id="student-name-input" name="student_name" type="text" placeholder="Jane Doe" required />
@@ -41,6 +106,7 @@
                 <div style="display:flex;gap:8px;margin-bottom:4px;">
                   <button type="button" id="tab-files" class="tab-btn tab-active" onclick="switchEnrollTab('files')">Upload files</button>
                   <button type="button" id="tab-folder" class="tab-btn" onclick="switchEnrollTab('folder')">From folder path</button>
+                  <button type="button" id="tab-camera" class="tab-btn" onclick="switchEnrollTab('camera')">Record video</button>
                 </div>
 
                 <div id="enroll-tab-files">
@@ -58,52 +124,16 @@
                   <small style="color:#888;">All .mp4 .mov .avi .mkv .webm .jpg .png files in the folder will be used.</small>
                 </div>
 
+                <div id="enroll-tab-camera" style="display:none;">
+                  <div id="enroll-camera-recorder"></div>
+                </div>
+
                 <button type="submit">Enroll student</button>
               </form>
 
               <div id="enroll-status" class="status">Ready to enroll.</div>
               <div id="enroll-result" class="attendance-result hidden"></div>
             </article>
-
-            <article class="attendance-card">
-              <div class="attendance-card-header">
-                <h2>Mark attendance</h2>
-                <p>Upload a classroom photo and match all detected faces against the enrolled roster.</p>
-              </div>
-
-              <form id="mark-form" class="stack-form">
-                <label class="file-drop file-drop-compact">
-                  <input id="classroom-photo-input" name="photo" type="file" accept="image/*,video/*" required />
-                  <span id="classroom-photo-label">Choose a classroom photo</span>
-                </label>
-
-                <button type="submit">Mark attendance</button>
-              </form>
-
-              <div class="demo-btn-row">
-                <button id="demo-preview-btn" class="demo-btn">Preview demo image</button>
-                <button id="demo-btn" class="demo-btn">Run demo through pipeline</button>
-              </div>
-
-              <div id="mark-status" class="status">Ready to mark attendance.</div>
-              <div id="mark-result" class="attendance-result hidden">
-                <img id="marked-photo-preview" class="marked-photo-preview" alt="Marked classroom photo" />
-                <div id="recognized-list" class="result-list"></div>
-                <button id="unknown-faces-toggle" type="button" class="unknown-faces-toggle hidden"></button>
-                <div id="unknown-faces-grid" class="unknown-faces-grid hidden"></div>
-                <div id="attendance-log-list" class="result-list"></div>
-              </div>
-            </article>
-
-            <article class="attendance-card attendance-card-wide">
-              <div class="attendance-card-header">
-                <h2>Enrolled students</h2>
-                <p>Current roster loaded from the enrolled embeddings; face detection uses InsightFace (SCRFD) and recognition uses the AdaFace IR-101 backbone.</p>
-              </div>
-
-              <div id="roster-list" class="roster-list"></div>
-              <div id="attendance-log-summary" class="result-list"></div>
-            </article>
           </div>
         </section>
 
@@ -141,9 +171,9 @@
                 <li><strong>Detection</strong> — InsightFace (SCRFD, antelopev2 detector) finds every face in the photo at 1280×1280, returning a bounding box and 5-point landmarks per face.</li>
                 <li><strong>Alignment</strong> — each face is aligned to a canonical 112×112 crop using InsightFace's <code>norm_crop</code>, based on the 5-point landmarks.</li>
                 <li><strong>Recognition</strong> — the aligned crop is embedded with <strong>AdaFace IR-101</strong> (WebFace12M), producing a 512-dimensional, L2-normalised face embedding.</li>
-                <li><strong>Matching</strong> — the embedding is compared via cosine similarity against every enrolled student's stored prototype and individual embeddings. The best match above <strong>0.28</strong> similarity is marked present; everything else is labeled Unknown.</li>
+                <li><strong>Matching</strong> — the embedding is compared via cosine similarity against every enrolled student's stored prototype and individual embeddings. The best match is bucketed into one of three tiers: below <strong>0.28</strong> similarity gets no name candidate at all ("Unknown"); <strong>0.28–0.30</strong> is a real candidate but not confident enough to auto-confirm ("Suspicious" — for a teacher to eyeball); at or above <strong>0.30</strong> is confidently "Present". Anyone enrolled in the classroom who wasn't matched at either tier is listed as "Absent".</li>
                 <li><strong>Enrollment</strong> — enrollment videos are sampled at up to 30 frames spread evenly across the clip, with an anchor-consistency check to keep only frames of the same person, plus degraded (shrunk-and-upscaled) copies of each frame so the gallery also matches small, distant classroom faces.</li>
-                <li><strong>Unknown faces</strong> — anyone below the match threshold is boxed in red as "Unknown." The "Show unknown faces" button on the Mark attendance card zooms in on each one so a teacher can review and enroll or manually mark them.</li>
+                <li><strong>Unknown faces</strong> — anyone below 0.28 is boxed in red as "Unknown." The "Show unknown faces" button on the Mark attendance card zooms in on each one so a teacher can review and enroll or manually mark them.</li>
               </ol>
               <p class="how-it-works-note">
                 AdaFace replaced the previous glintr100/antelopev2 recognition backbone after an offline evaluation showed
@@ -185,6 +215,7 @@
       <img id="lightbox-img" class="lightbox-img" alt="Full-screen marked photo" />
     </div>
 
+    <script src="{{ url_for('static', filename='camera-recorder.js') }}"></script>
     <script src="{{ url_for('static', filename='app.js') }}"></script>
   </body>
 </html>