Show face snapshot in UI for greeting and enrolling states

- face_db.py: add get_face_jpeg(frame_bgr) — detects the face, adds 40%
padding, encodes as JPEG and returns bytes (None if no face found).
- main.py: store snapshot in _shared whenever a face is detected (both
known and unknown); clear it when returning to sleep.
New GET /snapshot endpoint returns the JPEG, 204 when none is available.
- index.html: <img id="face-snapshot"> in greeting section,
<img id="enroll-snapshot"> in enroll section.
- main.js: loadSnapshot() helper (cache-busts URL, hides img on error);
called on state transition to greeting / enrolling.
- style.css: circular 160×160 portrait style for both snapshot imgs.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

recognizer/face_db.py

@@ -195,6 +195,24 @@ def find_match(
     return None
 
 
+def get_face_jpeg(frame_bgr: np.ndarray, padding: float = 0.4) -> Optional[bytes]:
+    """Return a JPEG-encoded crop of the largest detected face, or None."""
+    boxes = _detect(frame_bgr)
+    if not boxes:
+        return None
+    x, y, w, h = boxes[0]
+    pad_x = int(w * padding)
+    pad_y = int(h * padding)
+    h_img, w_img = frame_bgr.shape[:2]
+    x1 = max(0, x - pad_x)
+    y1 = max(0, y - pad_y)
+    x2 = min(w_img, x + w + pad_x)
+    y2 = min(h_img, y + h + pad_y)
+    crop = frame_bgr[y1:y2, x1:x2]
+    ok, buf = cv2.imencode(".jpg", crop, [cv2.IMWRITE_JPEG_QUALITY, 85])
+    return bytes(buf) if ok else None
+
+
 def add_face(
     name: str,
     frame_bgr: np.ndarray,

recognizer/main.py

@@ -13,10 +13,11 @@ import threading
 import time
 from enum import Enum, auto
 import numpy as np
+from fastapi.responses import Response
 from pydantic import BaseModel
 from reachy_mini import ReachyMini, ReachyMiniApp
 
-from recognizer.face_db import NoFaceDetected, add_face, find_match, wipe as wipe_face_db
+from recognizer.face_db import NoFaceDetected, add_face, find_match, get_face_jpeg, wipe as wipe_face_db
 from recognizer.face_db import load as load_face_db
 from recognizer.tts import speak
 
@@ -47,6 +48,7 @@ class Recognizer(ReachyMiniApp):
             "state": "sleeping",
             "pending_name": None,     # set by /set_name when ENROLLING
             "recognized_name": None,  # set when a known face is found
+            "snapshot": None,         # JPEG bytes of the current face crop
         }
 
         # --- Settings-app REST endpoints ---
@@ -66,6 +68,14 @@ class Recognizer(ReachyMiniApp):
             face_db.clear()
             return {"ok": True}
 
+        @self.settings_app.get("/snapshot")
+        def snapshot():
+            with _lock:
+                data = _shared["snapshot"]
+            if data is None:
+                return Response(status_code=204)
+            return Response(content=data, media_type="image/jpeg")
+
         @self.settings_app.get("/status")
         def get_status():
             with _lock:
@@ -145,10 +155,12 @@ class Recognizer(ReachyMiniApp):
                     if frame is not None:
                         try:
                             name = find_match(frame, face_db)
+                            jpeg = get_face_jpeg(frame)
                             if name:
                                 greeting_name = name
                                 with _lock:
                                     _shared["recognized_name"] = name
+                                    _shared["snapshot"] = jpeg
                                 state = State.GREETING
                             else:
                                 speak(
@@ -159,6 +171,7 @@ class Recognizer(ReachyMiniApp):
                                 enrollment_frames = [frame]
                                 with _lock:
                                     _shared["pending_name"] = None
+                                    _shared["snapshot"] = jpeg
                                 state = State.ENROLLING
                         except NoFaceDetected:
                             pass  # no face in frame yet, keep scanning
@@ -180,6 +193,7 @@ class Recognizer(ReachyMiniApp):
                 reachy_mini.goto_sleep()
                 with _lock:
                     _shared["recognized_name"] = None
+                    _shared["snapshot"] = None
                 state = State.SLEEPING
 
             # ---------- ENROLLING ----------
@@ -209,6 +223,8 @@ class Recognizer(ReachyMiniApp):
                     enrollment_frames.clear()
                     speak(f"Nice to meet you, {name}!", reachy_mini)
                     reachy_mini.goto_sleep()
+                    with _lock:
+                        _shared["snapshot"] = None
                     state = State.SLEEPING
 
                 time.sleep(0.2)

recognizer/static/index.html

@@ -16,10 +16,12 @@
     </div>
 
     <div id="greeting-section" style="display:none;">
+        <img id="face-snapshot" src="" alt="Detected face">
         <p>Welcome back, <strong id="greeting-name"></strong>! 👋</p>
     </div>
 
     <div id="enroll-section" style="display:none;">
+        <img id="enroll-snapshot" src="" alt="Detected face">
         <p>A new face was detected. Enter the person's name:</p>
         <div id="enroll-form">
             <input type="text" id="name-input" placeholder="Enter name…" autocomplete="off">

recognizer/static/main.js

@@ -8,6 +8,15 @@ const STATE_LABELS = {
 
 let currentState = "";
 
+function loadSnapshot(imgId) {
+    const img = document.getElementById(imgId);
+    // Cache-bust so the browser always fetches the latest frame
+    img.src = "/snapshot?" + Date.now();
+    img.style.display = "none";
+    img.onload  = () => { img.style.display = "block"; };
+    img.onerror = () => { img.style.display = "none"; };
+}
+
 async function pollStatus() {
     try {
         const resp = await fetch("/status");
@@ -20,23 +29,26 @@ async function pollStatus() {
             const label = document.getElementById("state-label");
             label.textContent = STATE_LABELS[newState] ?? newState;
 
-            // Greeting section: show recognised name
+            // Greeting section: show recognised name + face
             const greetingSection = document.getElementById("greeting-section");
             if (newState === "greeting" && data.recognized_name) {
                 document.getElementById("greeting-name").textContent = data.recognized_name;
+                loadSnapshot("face-snapshot");
                 greetingSection.style.display = "block";
             } else {
                 greetingSection.style.display = "none";
             }
 
-            // Enroll section
+            // Enroll section: show unknown face + name input
             const enrollSection = document.getElementById("enroll-section");
-            enrollSection.style.display = newState === "enrolling" ? "block" : "none";
-
             if (newState === "enrolling") {
+                loadSnapshot("enroll-snapshot");
+                enrollSection.style.display = "block";
                 document.getElementById("name-input").value = "";
                 document.getElementById("enroll-status").textContent = "";
                 document.getElementById("name-input").focus();
+            } else {
+                enrollSection.style.display = "none";
             }
         }
     } catch (e) {

recognizer/static/style.css

@@ -28,6 +28,17 @@ h1 {
     color: #1a73e8;
 }
 
+#face-snapshot,
+#enroll-snapshot {
+    display: none;
+    width: 160px;
+    height: 160px;
+    object-fit: cover;
+    border-radius: 50%;
+    border: 3px solid currentColor;
+    margin-bottom: 0.75rem;
+}
+
 #greeting-section {
     background: #e8f5e9;
     border: 1px solid #66bb6a;