Upload 3 files

README.md

@@ -0,0 +1,51 @@
+---
+title: FaceSense Live Phase 1
+emoji: 🧠
+colorFrom: blue
+colorTo: green
+sdk: gradio
+sdk_version: 5.49.1
+app_file: app.py
+pinned: false
+license: mit
+---
+
+# FaceSense Live — Phase 1
+
+This phase validates the live web app loop:
+
+1. Browser webcam input
+2. Server-side frame processing
+3. Live face bounding boxes
+4. A polished Gradio UI for Hugging Face Spaces
+
+Prediction models are intentionally not included yet. After Phase 1 is working, Phase 2 will add expression classification and confidence smoothing.
+
+## Local run
+
+```bash
+python -m venv .venv
+source .venv/bin/activate  # Windows: .venv\Scripts\activate
+pip install -r requirements.txt
+python app.py
+```
+
+## Hugging Face Space deployment
+
+Create a new Hugging Face Space using the Gradio SDK, then upload these files:
+
+- `app.py`
+- `requirements.txt`
+- `README.md`
+
+After the Space builds, open it and click the webcam recording button. On phones, allow camera permission; your browser may offer front/rear camera selection depending on iOS Safari or Android Chrome.
+
+## Test checklist
+
+- The app opens without build errors.
+- The browser asks for webcam permission.
+- The webcam stream starts on desktop.
+- The webcam opens on a phone browser.
+- Front/rear camera selection is available from the browser camera picker when supported.
+- A green/cyan face bounding box appears around a frontal face.
+- The live status card updates with face count and processing time.

app.py

@@ -0,0 +1,268 @@
+import time
+from typing import List, Tuple
+
+import cv2
+import gradio as gr
+import numpy as np
+
+# ------------------------------------------------------------
+# Phase 1: live webcam -> face bounding boxes -> beautiful UI
+# The emotion / age / demographic inference modules will be added later.
+# ------------------------------------------------------------
+
+CASCADE_PATH = cv2.data.haarcascades + "haarcascade_frontalface_default.xml"
+FACE_CASCADE = cv2.CascadeClassifier(CASCADE_PATH)
+
+APP_TITLE = "FaceSense Live"
+APP_SUBTITLE = "Real-time face boxes for desktop and mobile webcam testing"
+
+
+def _draw_corner_box(
+    image: np.ndarray,
+    x: int,
+    y: int,
+    w: int,
+    h: int,
+    color: Tuple[int, int, int] = (52, 235, 186),
+    thickness: int = 3,
+    corner_ratio: float = 0.28,
+) -> None:
+    """Draw a modern corner-style bounding box directly on an RGB image."""
+    corner_w = max(18, int(w * corner_ratio))
+    corner_h = max(18, int(h * corner_ratio))
+
+    # Top-left
+    cv2.line(image, (x, y), (x + corner_w, y), color, thickness, cv2.LINE_AA)
+    cv2.line(image, (x, y), (x, y + corner_h), color, thickness, cv2.LINE_AA)
+
+    # Top-right
+    cv2.line(image, (x + w, y), (x + w - corner_w, y), color, thickness, cv2.LINE_AA)
+    cv2.line(image, (x + w, y), (x + w, y + corner_h), color, thickness, cv2.LINE_AA)
+
+    # Bottom-left
+    cv2.line(image, (x, y + h), (x + corner_w, y + h), color, thickness, cv2.LINE_AA)
+    cv2.line(image, (x, y + h), (x, y + h - corner_h), color, thickness, cv2.LINE_AA)
+
+    # Bottom-right
+    cv2.line(image, (x + w, y + h), (x + w - corner_w, y + h), color, thickness, cv2.LINE_AA)
+    cv2.line(image, (x + w, y + h), (x + w, y + h - corner_h), color, thickness, cv2.LINE_AA)
+
+
+def _draw_label(image: np.ndarray, x: int, y: int, lines: List[str]) -> None:
+    """Draw a translucent label card above a face box."""
+    font = cv2.FONT_HERSHEY_SIMPLEX
+    font_scale = 0.55
+    thickness = 1
+    padding_x = 10
+    padding_y = 8
+    line_height = 21
+
+    widths = [cv2.getTextSize(line, font, font_scale, thickness)[0][0] for line in lines]
+    card_w = max(widths) + padding_x * 2
+    card_h = line_height * len(lines) + padding_y * 2
+
+    y1 = max(8, y - card_h - 10)
+    x1 = max(8, min(x, image.shape[1] - card_w - 8))
+    x2 = min(image.shape[1] - 8, x1 + card_w)
+    y2 = min(image.shape[0] - 8, y1 + card_h)
+
+    overlay = image.copy()
+    cv2.rectangle(overlay, (x1, y1), (x2, y2), (14, 18, 31), -1)
+    cv2.addWeighted(overlay, 0.72, image, 0.28, 0, image)
+    cv2.rectangle(image, (x1, y1), (x2, y2), (52, 235, 186), 1, cv2.LINE_AA)
+
+    for i, line in enumerate(lines):
+        text_y = y1 + padding_y + 16 + i * line_height
+        cv2.putText(image, line, (x1 + padding_x, text_y), font, font_scale, (242, 250, 255), thickness, cv2.LINE_AA)
+
+
+def _detect_faces(frame_rgb: np.ndarray) -> List[Tuple[int, int, int, int]]:
+    """Detect frontal faces with OpenCV's built-in Haar cascade."""
+    gray = cv2.cvtColor(frame_rgb, cv2.COLOR_RGB2GRAY)
+    gray = cv2.equalizeHist(gray)
+
+    faces = FACE_CASCADE.detectMultiScale(
+        gray,
+        scaleFactor=1.08,
+        minNeighbors=5,
+        minSize=(70, 70),
+        flags=cv2.CASCADE_SCALE_IMAGE,
+    )
+
+    # Largest faces first makes the UI feel stable when several faces exist.
+    faces_list = [(int(x), int(y), int(w), int(h)) for x, y, w, h in faces]
+    return sorted(faces_list, key=lambda b: b[2] * b[3], reverse=True)
+
+
+def analyze_frame(frame: np.ndarray):
+    """Process one webcam frame. Gradio calls this repeatedly while streaming."""
+    if frame is None:
+        return None, "### Waiting for camera\nClick **Record from webcam** to start Phase 1."
+
+    start = time.perf_counter()
+    output = frame.copy()
+    faces = _detect_faces(output)
+
+    for idx, (x, y, w, h) in enumerate(faces, start=1):
+        _draw_corner_box(output, x, y, w, h)
+        _draw_label(
+            output,
+            x,
+            y,
+            [
+                f"Face {idx}",
+                "Expression: Phase 2",
+                "Age range: Phase 3",
+            ],
+        )
+
+    elapsed_ms = (time.perf_counter() - start) * 1000
+    fps = 1000 / elapsed_ms if elapsed_ms > 0 else 0
+
+    if faces:
+        status = f"""
+### Live status
+
+<div class='metric-grid'>
+  <div class='metric-card'><span class='metric-number'>{len(faces)}</span><span class='metric-label'>face(s) detected</span></div>
+  <div class='metric-card'><span class='metric-number'>{elapsed_ms:.1f} ms</span><span class='metric-label'>processing time</span></div>
+  <div class='metric-card'><span class='metric-number'>{fps:.1f}</span><span class='metric-label'>estimated FPS</span></div>
+</div>
+
+**Phase 1 result:** webcam streaming and bounding boxes are active.  
+**Next:** add expression model, smoothing, and calibrated confidence labels.
+"""
+    else:
+        status = f"""
+### Live status
+
+<div class='metric-grid'>
+  <div class='metric-card'><span class='metric-number'>0</span><span class='metric-label'>faces detected</span></div>
+  <div class='metric-card'><span class='metric-number'>{elapsed_ms:.1f} ms</span><span class='metric-label'>processing time</span></div>
+</div>
+
+Move closer to the camera, face the lens, and use decent lighting. Phase 1 uses a lightweight detector so we can confirm deployment first.
+"""
+
+    return output, status
+
+
+CUSTOM_CSS = """
+.gradio-container {
+    background:
+        radial-gradient(circle at top left, rgba(72, 219, 251, 0.22), transparent 34%),
+        radial-gradient(circle at bottom right, rgba(163, 255, 181, 0.16), transparent 34%),
+        linear-gradient(135deg, #070b16 0%, #111827 45%, #0b1020 100%) !important;
+    color: #f8fafc !important;
+}
+.hero {
+    text-align: center;
+    padding: 24px 20px 10px 20px;
+}
+.hero h1 {
+    font-size: 3rem;
+    line-height: 1.05;
+    margin-bottom: 8px;
+    letter-spacing: -0.04em;
+}
+.hero p {
+    color: #cbd5e1;
+    font-size: 1.05rem;
+    margin: 0 auto;
+    max-width: 760px;
+}
+.panel {
+    border: 1px solid rgba(148, 163, 184, 0.24) !important;
+    border-radius: 22px !important;
+    background: rgba(15, 23, 42, 0.74) !important;
+    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.38) !important;
+    backdrop-filter: blur(18px) !important;
+    overflow: hidden !important;
+}
+.metric-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 12px;
+    margin: 12px 0 16px;
+}
+.metric-card {
+    padding: 14px;
+    border-radius: 16px;
+    background: rgba(15, 23, 42, 0.78);
+    border: 1px solid rgba(72, 219, 251, 0.28);
+}
+.metric-number {
+    display: block;
+    font-size: 1.4rem;
+    font-weight: 800;
+    color: #7dd3fc;
+}
+.metric-label {
+    display: block;
+    color: #cbd5e1;
+    font-size: 0.82rem;
+    margin-top: 2px;
+}
+.footer-note {
+    text-align: center;
+    color: #94a3b8;
+    font-size: 0.92rem;
+    padding: 12px 0 4px;
+}
+"""
+
+with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Soft(primary_hue="cyan", neutral_hue="slate")) as demo:
+    gr.HTML(
+        f"""
+        <div class='hero'>
+            <h1>{APP_TITLE}</h1>
+            <p>{APP_SUBTITLE}</p>
+        </div>
+        """
+    )
+
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=1, elem_classes=["panel"]):
+            webcam = gr.Image(
+                label="Camera input",
+                sources=["webcam"],
+                type="numpy",
+                streaming=True,
+                height=520,
+                show_download_button=False,
+            )
+        with gr.Column(scale=1, elem_classes=["panel"]):
+            annotated = gr.Image(
+                label="Annotated output",
+                type="numpy",
+                height=520,
+                show_download_button=False,
+            )
+
+    with gr.Row():
+        with gr.Column(elem_classes=["panel"]):
+            status = gr.Markdown(
+                "### Waiting for camera\nClick **Record from webcam** to start Phase 1.",
+                elem_id="status-card",
+            )
+
+    gr.HTML(
+        """
+        <div class='footer-note'>
+            Phase 1 validates live webcam processing and deployment. On mobile, allow camera permission; your browser may offer front/rear camera selection.
+        </div>
+        """
+    )
+
+    # Using change() with a streaming webcam is more stable on Spaces than stream() for this Phase 1 build.
+    # The webcam component still captures repeated frames while recording, and every changed frame is analyzed.
+    webcam.change(
+        analyze_frame,
+        inputs=webcam,
+        outputs=[annotated, status],
+        queue=False,
+        show_progress="hidden",
+    )
+
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -0,0 +1,4 @@
+gradio==5.49.1
+opencv-python-headless>=4.10.0
+numpy>=1.26.0
+audioop-lts>=0.2.1