Initial commit

.claude/settings.local.json

@@ -0,0 +1,27 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(pip show *)",
+      "Bash(python -c ' *)",
+      "Bash(ping -c 2 reachy-mini.local)",
+      "Bash(ssh *)",
+      "Bash(lsof -i :8000 -sTCP:LISTEN)",
+      "Read(//Users/oliver/.ssh/**)",
+      "Bash(ssh-keygen -F reachy-mini.local)",
+      "Bash(lsof -i :8042 -sTCP:LISTEN)",
+      "Bash(curl -s http://localhost:8042/status)",
+      "Bash(curl -s -X POST http://localhost:8042/set_name -H \"Content-Type: application/json\" -d '{\"name\":\"test\"}')",
+      "Bash(curl -s http://localhost:8000/)",
+      "Bash(curl -s http://localhost:8000/docs)",
+      "Bash(curl -s http://localhost:8000/status)",
+      "Bash(curl -s http://localhost:8000/openapi.json)",
+      "Bash(python3 -c \"import json,sys; d=json.load\\(sys.stdin\\); [print\\(k\\) for k in d.get\\('paths',{}\\).keys\\(\\)]\")",
+      "Bash(curl -s http://localhost:8000/api/apps/list-available)",
+      "Bash(python3 -c \"import json,sys; d=json.load\\(sys.stdin\\); [print\\(a.get\\('name','?'\\), '-', a.get\\('description',''\\)\\) for a in \\(d if isinstance\\(d,list\\) else d.get\\('apps', []\\)\\)]\")",
+      "Bash(curl -s http://localhost:8000/api/apps/current-app-status)",
+      "Bash(python3 -m json.tool)",
+      "Bash(curl -s -X POST \"http://localhost:8000/api/apps/start-app/recognizer\")",
+      "Bash(curl -sv -X POST \"http://localhost:8000/api/apps/start-app/recognizer\")"
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,3 @@
+__pycache__/
+*.egg-info/
+build/

CLAUDE.md

@@ -0,0 +1,113 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Environment Setup
+
+The virtual environment lives one level up at `../reachy_mini_env`. Always activate it first:
+
+```bash
+source ../reachy_mini_env/bin/activate
+```
+
+Install the package in editable mode (required for entry-point registration):
+
+```bash
+pip install -e .
+```
+
+### System dependency (Raspberry Pi / Reachy Mini wireless)
+
+```bash
+sudo apt-get install espeak-ng        # text-to-speech synthesis
+pip install face-recognition          # compiles dlib from source (~15 min on Pi)
+```
+
+## Running the App
+
+Run directly (connects to a live Reachy Mini robot):
+
+```bash
+python recognizer/main.py
+```
+
+Or via the daemon entry point (used when the robot's daemon manages app lifecycle):
+
+```bash
+reachy-mini-app run recognizer
+```
+
+The control panel web UI is served at `http://0.0.0.0:8042` while the app runs.
+
+## Publishing
+
+```bash
+reachy-mini-app check          # validate the app before publishing
+reachy-mini-app publish        # publish to Hugging Face Spaces
+```
+
+## Architecture
+
+This is a **Reachy Mini robot app** — a Python package that plugs into the `reachy_mini` SDK.
+
+**Entry point**: `recognizer/main.py` — `Recognizer` class inheriting from `ReachyMiniApp` (ABC from `reachy_mini`).
+
+**App lifecycle** (handled by `ReachyMiniApp.wrapped_run()`):
+1. Spawns a FastAPI/uvicorn server on `custom_app_url` (port 8042) in a background thread
+2. Connects to the robot daemon (auto-detects localhost vs. network → LOCAL backend on wireless robot)
+3. Calls `Recognizer.run(reachy_mini, stop_event)` — the main state-machine loop
+4. On stop: sets `stop_event`, shuts down the web server
+
+**State machine** (`recognizer/main.py`):
+
+```
+SLEEPING  →(speech detected × 3)→  WAKING  →  ACTIVE  →  SLEEPING
+                                                  ↓ (unknown face)
+                                               ENROLLING  →  SLEEPING
+```
+
+- **SLEEPING**: polls `media.get_DoA()` at 5 Hz; robot stays in sleep pose. Three consecutive `speech_detected=True` readings (debounced) trigger a wake-up.
+- **WAKING**: calls `wake_up()` (built-in animation + sound), then `look_at_world()` toward the DoA angle.
+- **ACTIVE**: captures camera frames every 0.5 s, runs `face_recognition.face_locations()` + `face_recognition.face_encodings()` (HOG model, 2× downsampled for speed). Gentle head-scan idle animation via `set_target()`. 15 s timeout → back to sleep.
+- **ENROLLING**: robot has detected an unrecognised face; waits for name to be submitted via the web UI (`POST /set_name`). Stores encoding in `face_db.json`, says "Nice to meet you, <name>!", then sleeps.
+
+**Helper modules**:
+- `recognizer/face_db.py` — load/save/query face encodings. Database at `recognizer/face_db.json` (gitignored). `find_match()` tolerance = 0.55.
+- `recognizer/tts.py` — synthesises text via `espeak-ng -s 140 -w <tmp.wav>`, plays via `media.play_sound()`, then sleeps to let playback finish.
+
+**Settings UI** (`recognizer/static/`):
+- `index.html` / `main.js` / `style.css` — polls `GET /status` every second to show current state; reveals a name-entry form when state is `"enrolling"`.
+- REST endpoints defined in `run()` via `self.settings_app` (FastAPI): `GET /status`, `POST /set_name`.
+
+**Root-level `index.html` / `style.css`**: HuggingFace Spaces landing page — separate from the in-app UI in `recognizer/static/`.
+
+**Entry-point registration** in `pyproject.toml`:
+```toml
+[project.entry-points."reachy_mini_apps"]
+recognizer = "recognizer.main:Recognizer"
+```
+
+## Key APIs
+
+```python
+# Direction of Arrival from the ReSpeaker mic array
+# Returns (angle_radians, speech_detected) or None
+# 0 rad = left, π/2 = front/back, π = right
+doa = reachy_mini.media.get_DoA()
+
+# Camera frame (BGR uint8 numpy array)
+frame = reachy_mini.media.get_frame()
+
+# Built-in animations (blocking)
+reachy_mini.wake_up()
+reachy_mini.goto_sleep()
+
+# Smooth head movement (blocking)
+reachy_mini.look_at_world(x, y, z, duration=0.5)  # forward=+x, right=+y
+
+# Immediate head pose (non-blocking, use set_target for idle animation)
+reachy_mini.set_target(head=pose_4x4)
+
+# Audio
+reachy_mini.media.play_sound("/abs/path/to/file.wav")  # async; sleep afterward
+```

README.md

@@ -0,0 +1,12 @@
+---
+title: Recognizer
+emoji: 👋
+colorFrom: red
+colorTo: blue
+sdk: static
+pinned: false
+short_description: Write your description here
+tags:
+ - reachy_mini
+ - reachy_mini_python_app
+---

index.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<title> Recognizer </title>
+	<link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+	<div class="hero">
+		<div class="hero-content">
+			<div class="app-icon">🤖⚡</div>
+			<h1> Recognizer </h1>
+			<p class="tagline">Enter your tagline here</p>
+		</div>
+	</div>
+
+	<div class="container">
+		<div class="main-card">
+			<div class="app-preview">
+				<div class="preview-image">
+					<div class="camera-feed">🛠️</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="footer">
+		<p>
+			🤖 Recognizer •
+			<a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
+			<a href="https://huggingface.co/spaces/pollen-robotics/reachy-mini-landing-page#apps" target="_blank">Browse More
+				Apps</a>
+		</p>
+	</div>
+</body>
+
+</html>

pyproject.toml

@@ -0,0 +1,30 @@
+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+
+
+[project]
+name = "recognizer"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "reachy-mini",
+    "face-recognition",
+    "scipy",
+]
+keywords = ["reachy-mini-app"]
+
+[project.entry-points."reachy_mini_apps"]
+recognizer = "recognizer.main:Recognizer"
+
+[tool.setuptools]
+package-dir = { "" = "." }
+include-package-data = true
+
+[tool.setuptools.packages.find]
+where = ["."]
+
+[tool.setuptools.package-data]
+recognizer = ["**/*"] # Also include all non-.py files

recognizer/face_db.json

@@ -0,0 +1 @@
+{}

recognizer/face_db.py

@@ -0,0 +1,52 @@
+"""Face database: persist face encodings keyed by name."""
+
+import json
+from pathlib import Path
+from typing import Optional
+
+import numpy as np
+
+try:
+    import face_recognition
+except ImportError as exc:
+    raise ImportError(
+        "face-recognition is required: pip install face-recognition"
+    ) from exc
+
+
+DB_PATH = Path(__file__).parent / "face_db.json"
+
+
+def load() -> dict[str, list[list[float]]]:
+    if DB_PATH.exists():
+        return json.loads(DB_PATH.read_text())
+    return {}
+
+
+def save(db: dict[str, list[list[float]]]) -> None:
+    DB_PATH.write_text(json.dumps(db, indent=2))
+
+
+def find_match(
+    encoding: np.ndarray,
+    db: dict[str, list[list[float]]],
+    tolerance: float = 0.55,
+) -> Optional[str]:
+    for name, enc_list in db.items():
+        known = [np.array(e) for e in enc_list]
+        if any(face_recognition.compare_faces(known, encoding, tolerance=tolerance)):
+            return name
+    return None
+
+
+def add_face(
+    name: str,
+    encoding: np.ndarray,
+    db: dict[str, list[list[float]]],
+    max_per_person: int = 5,
+) -> None:
+    if name not in db:
+        db[name] = []
+    if len(db[name]) < max_per_person:
+        db[name].append(encoding.tolist())
+    save(db)

recognizer/main.py

@@ -0,0 +1,223 @@
+"""Recognizer app for Reachy Mini wireless.
+
+State machine:
+  SLEEPING  → polls DoA for noise; robot stays in sleep pose
+  WAKING    → plays wake-up animation, looks toward the sound source
+  ACTIVE    → captures camera frames, runs face recognition (timeout: 15 s)
+  ENROLLING → unknown face detected; waits for name entry via control panel
+"""
+
+import logging
+import math
+import threading
+import time
+from enum import Enum, auto
+from typing import Optional
+
+import numpy as np
+from pydantic import BaseModel
+from reachy_mini import ReachyMini, ReachyMiniApp
+
+from recognizer.face_db import add_face, find_match
+from recognizer.face_db import load as load_face_db
+from recognizer.tts import speak
+
+try:
+    import face_recognition  # noqa: F401 – checked at import time
+except ImportError as exc:
+    raise ImportError(
+        "face-recognition is required: pip install face-recognition"
+    ) from exc
+
+logger = logging.getLogger(__name__)
+
+ACTIVE_TIMEOUT = 15.0     # seconds before returning to sleep with no face
+DOA_DEBOUNCE   = 3        # consecutive speech-detected readings to wake up
+FACE_INTERVAL  = 0.5      # seconds between face-recognition attempts
+SCAN_AMPLITUDE = 0.35     # head scan amplitude (world-y, metres) during ACTIVE
+
+
+class State(Enum):
+    SLEEPING  = auto()
+    WAKING    = auto()
+    ACTIVE    = auto()
+    ENROLLING = auto()
+
+
+class Recognizer(ReachyMiniApp):
+    custom_app_url: str | None = "http://0.0.0.0:8042"
+    request_media_backend: str | None = None
+
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event) -> None:
+        import face_recognition as fr
+
+        # --- Shared mutable state (main loop ↔ FastAPI handlers) ---
+        _lock = threading.Lock()
+        _shared: dict = {
+            "state": "sleeping",
+            "pending_name": None,   # set by /set_name when ENROLLING
+        }
+
+        # --- Settings-app REST endpoints ---
+        class NamePayload(BaseModel):
+            name: str
+
+        @self.settings_app.post("/set_name")
+        def set_name(payload: NamePayload):
+            with _lock:
+                if _shared["state"] == "enrolling":
+                    _shared["pending_name"] = payload.name.strip()
+            return {"ok": True}
+
+        @self.settings_app.get("/status")
+        def get_status():
+            with _lock:
+                return {"state": _shared["state"]}
+
+        # --- Initialise ---
+        face_db = load_face_db()
+        state = State.SLEEPING
+        doa_angle = math.pi / 2   # default: facing front
+        speech_count = 0
+        active_start = 0.0
+        last_face_check = 0.0
+        pending_enc: Optional[np.ndarray] = None
+        scan_t0 = 0.0             # reference time for head-scan idle animation
+
+        reachy_mini.goto_sleep()
+
+        while not stop_event.is_set():
+
+            # ---------- SLEEPING ----------
+            if state == State.SLEEPING:
+                with _lock:
+                    _shared["state"] = "sleeping"
+
+                doa = reachy_mini.media.get_DoA()
+                if doa is not None:
+                    angle, speech = doa
+                    if speech:
+                        speech_count += 1
+                        if speech_count >= DOA_DEBOUNCE:
+                            doa_angle = angle
+                            state = State.WAKING
+                            speech_count = 0
+                    else:
+                        speech_count = max(0, speech_count - 1)
+
+                time.sleep(0.2)
+
+            # ---------- WAKING ----------
+            elif state == State.WAKING:
+                with _lock:
+                    _shared["state"] = "waking"
+
+                reachy_mini.wake_up()
+
+                # Look toward the sound: DoA 0=left π/2=front π=right → world-y
+                y = math.sin(doa_angle - math.pi / 2) * 0.6
+                reachy_mini.look_at_world(1.0, y, 0.0, duration=0.5)
+
+                active_start = time.time()
+                scan_t0 = active_start
+                last_face_check = 0.0
+                pending_enc = None
+                state = State.ACTIVE
+
+            # ---------- ACTIVE ----------
+            elif state == State.ACTIVE:
+                with _lock:
+                    _shared["state"] = "active"
+
+                now = time.time()
+
+                # Gentle head scan so the robot looks alive while waiting
+                elapsed = now - scan_t0
+                y_scan = math.sin(2 * math.pi * 0.15 * elapsed) * SCAN_AMPLITUDE
+                reachy_mini.set_target(
+                    head=_look_direction(1.0, y_scan, 0.0)
+                )
+
+                # Throttled face recognition
+                if now - last_face_check >= FACE_INTERVAL:
+                    last_face_check = now
+                    frame = reachy_mini.media.get_frame()
+                    if frame is not None:
+                        rgb = frame[::2, ::2, ::-1]   # 2× downsample + BGR→RGB
+                        locs = fr.face_locations(rgb, model="hog")
+                        if locs:
+                            # Scale locations back to full-res for accurate encoding
+                            full_locs = [(t*2, r*2, b*2, l*2) for t, r, b, l in locs]
+                            encs = fr.face_encodings(frame[:, :, ::-1], full_locs)
+                            if encs:
+                                enc = encs[0]
+                                name = find_match(enc, face_db)
+                                if name:
+                                    speak(f"Hi {name}!", reachy_mini)
+                                    reachy_mini.goto_sleep()
+                                    state = State.SLEEPING
+                                else:
+                                    speak(
+                                        "I don't know you yet. "
+                                        "Please enter your name on the control panel.",
+                                        reachy_mini,
+                                    )
+                                    pending_enc = enc
+                                    with _lock:
+                                        _shared["pending_name"] = None
+                                    state = State.ENROLLING
+
+                # Timeout: nobody showed up
+                if state == State.ACTIVE and time.time() - active_start > ACTIVE_TIMEOUT:
+                    reachy_mini.goto_sleep()
+                    state = State.SLEEPING
+
+                time.sleep(0.05)
+
+            # ---------- ENROLLING ----------
+            elif state == State.ENROLLING:
+                with _lock:
+                    _shared["state"] = "enrolling"
+                    name = _shared.get("pending_name")
+
+                if name:
+                    with _lock:
+                        _shared["pending_name"] = None
+                    if pending_enc is not None:
+                        add_face(name, pending_enc, face_db)
+                    speak(f"Nice to meet you, {name}!", reachy_mini)
+                    reachy_mini.goto_sleep()
+                    state = State.SLEEPING
+
+                time.sleep(0.2)
+
+        reachy_mini.goto_sleep()
+
+
+def _look_direction(x: float, y: float, z: float) -> np.ndarray:
+    """Return a 4×4 head-pose matrix that points the head toward (x, y, z)."""
+    from scipy.spatial.transform import Rotation as R
+
+    target = np.array([x, y, z], dtype=float)
+    target /= np.linalg.norm(target)
+    forward = np.array([1.0, 0.0, 0.0])
+
+    axis = np.cross(forward, target)
+    axis_norm = np.linalg.norm(axis)
+    if axis_norm < 1e-8:
+        rot_mat = np.eye(3) if np.dot(forward, target) > 0 else R.from_euler("y", 180, degrees=True).as_matrix()
+    else:
+        angle = np.arccos(np.clip(np.dot(forward, target), -1.0, 1.0))
+        rot_mat = R.from_rotvec(angle * axis / axis_norm).as_matrix()
+
+    pose = np.eye(4)
+    pose[:3, :3] = rot_mat
+    return pose
+
+
+if __name__ == "__main__":
+    app = Recognizer()
+    try:
+        app.wrapped_run()
+    except KeyboardInterrupt:
+        app.stop()

recognizer/static/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Recognizer – Control Panel</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+
+<body>
+    <h1>Recognizer – Control Panel</h1>
+
+    <div id="status-box">
+        State: <strong id="state-label">—</strong>
+    </div>
+
+    <div id="enroll-section" style="display:none;">
+        <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">
+            <button id="submit-name-btn">Submit</button>
+        </div>
+        <div id="enroll-status"></div>
+    </div>
+
+    <script src="/static/main.js"></script>
+</body>
+
+</html>

recognizer/static/main.js

@@ -0,0 +1,66 @@
+const STATE_LABELS = {
+    sleeping:  "😴 Sleeping – listening for noise",
+    waking:    "⚡ Waking up…",
+    active:    "👀 Active – looking for faces",
+    enrolling: "🆕 New face detected – waiting for name",
+};
+
+let currentState = "";
+
+async function pollStatus() {
+    try {
+        const resp = await fetch("/status");
+        const data = await resp.json();
+        const newState = data.state;
+
+        if (newState !== currentState) {
+            currentState = newState;
+
+            const label = document.getElementById("state-label");
+            label.textContent = STATE_LABELS[newState] ?? newState;
+
+            const enrollSection = document.getElementById("enroll-section");
+            enrollSection.style.display = newState === "enrolling" ? "block" : "none";
+
+            if (newState === "enrolling") {
+                document.getElementById("name-input").value = "";
+                document.getElementById("enroll-status").textContent = "";
+                document.getElementById("name-input").focus();
+            }
+        }
+    } catch (e) {
+        document.getElementById("state-label").textContent = "⚠ Backend unreachable";
+    }
+}
+
+async function submitName() {
+    const input = document.getElementById("name-input");
+    const name = input.value.trim();
+    if (!name) return;
+
+    try {
+        const resp = await fetch("/set_name", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ name }),
+        });
+        const data = await resp.json();
+        if (data.ok) {
+            document.getElementById("enroll-status").textContent =
+                `✓ Name "${name}" submitted – the robot will greet you shortly.`;
+            input.value = "";
+        }
+    } catch (e) {
+        document.getElementById("enroll-status").textContent = "Error submitting name.";
+    }
+}
+
+document.getElementById("submit-name-btn").addEventListener("click", submitName);
+
+document.getElementById("name-input").addEventListener("keydown", (e) => {
+    if (e.key === "Enter") submitName();
+});
+
+// Poll every second
+setInterval(pollStatus, 1000);
+pollStatus();

recognizer/static/style.css

@@ -0,0 +1,77 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+    font-family: system-ui, sans-serif;
+    background: #f5f5f5;
+    color: #222;
+    padding: 2rem;
+    max-width: 540px;
+    margin: 0 auto;
+}
+
+h1 {
+    font-size: 1.4rem;
+    margin-bottom: 1.5rem;
+    color: #111;
+}
+
+#status-box {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    margin-bottom: 1.5rem;
+    font-size: 1rem;
+}
+
+#state-label {
+    color: #1a73e8;
+}
+
+#enroll-section {
+    background: #fff;
+    border: 1px solid #fbc02d;
+    border-radius: 8px;
+    padding: 1.25rem;
+}
+
+#enroll-section p {
+    margin-bottom: 0.75rem;
+    font-weight: 500;
+}
+
+#enroll-form {
+    display: flex;
+    gap: 0.5rem;
+}
+
+#name-input {
+    flex: 1;
+    padding: 0.55rem 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    font-size: 1rem;
+}
+
+#name-input:focus {
+    outline: none;
+    border-color: #1a73e8;
+}
+
+button {
+    padding: 0.55rem 1.1rem;
+    background: #1a73e8;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+button:hover { background: #1558b0; }
+
+#enroll-status {
+    margin-top: 0.75rem;
+    font-size: 0.9rem;
+    color: #2e7d32;
+}

recognizer/tts.py

@@ -0,0 +1,39 @@
+"""Text-to-speech via espeak-ng → WAV file → Reachy Mini audio device."""
+
+import logging
+import os
+import subprocess
+import tempfile
+import time
+
+logger = logging.getLogger(__name__)
+
+
+def speak(text: str, reachy_mini, words_per_second: float = 2.5) -> None:
+    """Synthesize *text* with espeak-ng and play it through the robot's speakers.
+
+    Blocks until playback should be finished.
+    Requires: sudo apt-get install espeak-ng
+    """
+    with tempfile.NamedTemporaryFile(suffix=".wav", delete=False) as f:
+        wav_path = f.name
+    try:
+        subprocess.run(
+            ["espeak-ng", "-s", "140", "-w", wav_path, "--", text],
+            check=True,
+            timeout=15,
+            capture_output=True,
+        )
+        reachy_mini.media.play_sound(wav_path)
+        # play_sound() returns immediately; wait for GStreamer playback to finish.
+        estimated = len(text.split()) / words_per_second + 0.8
+        time.sleep(max(estimated, 1.0))
+    except FileNotFoundError:
+        logger.warning("espeak-ng not found — install with: sudo apt-get install espeak-ng")
+    except subprocess.CalledProcessError as exc:
+        logger.warning("espeak-ng failed: %s", exc.stderr.decode(errors="replace"))
+    finally:
+        try:
+            os.unlink(wav_path)
+        except OSError:
+            pass

style.css

@@ -0,0 +1,411 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	line-height: 1.6;
+	color: #333;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	min-height: 100vh;
+}
+
+.hero {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	padding: 4rem 2rem;
+	text-align: center;
+}
+
+.hero-content {
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+.app-icon {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	display: inline-block;
+}
+
+.hero h1 {
+	font-size: 3rem;
+	font-weight: 700;
+	margin-bottom: 1rem;
+	background: linear-gradient(45deg, #fff, #f0f9ff);
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
+.tagline {
+	font-size: 1.25rem;
+	opacity: 0.9;
+	max-width: 600px;
+	margin: 0 auto;
+}
+
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 2rem;
+	position: relative;
+	z-index: 2;
+}
+
+.main-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	margin-top: -2rem;
+	overflow: hidden;
+	margin-bottom: 3rem;
+}
+
+.app-preview {
+	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
+	padding: 3rem;
+	color: white;
+	text-align: center;
+	position: relative;
+}
+
+.preview-image {
+	background: #000;
+	border-radius: 15px;
+	padding: 2rem;
+	max-width: 500px;
+	margin: 0 auto;
+	position: relative;
+	overflow: hidden;
+}
+
+.camera-feed {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	opacity: 0.7;
+}
+
+.detection-overlay {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 100%;
+}
+
+.bbox {
+	background: rgba(34, 197, 94, 0.9);
+	color: white;
+	padding: 0.5rem 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	font-weight: 600;
+	margin: 0.5rem;
+	display: inline-block;
+	border: 2px solid #22c55e;
+}
+
+.app-details {
+	padding: 3rem;
+}
+
+.app-details h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 2rem;
+	text-align: center;
+}
+
+.template-info {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 2rem;
+	margin-bottom: 3rem;
+}
+
+.info-box {
+	background: #f0f9ff;
+	border: 2px solid #e0f2fe;
+	border-radius: 12px;
+	padding: 2rem;
+}
+
+.info-box h3 {
+	color: #0c4a6e;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+
+.info-box p {
+	color: #0369a1;
+	line-height: 1.6;
+}
+
+.how-to-use {
+	background: #fefce8;
+	border: 2px solid #fde047;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 3rem;
+}
+
+.how-to-use h3 {
+	color: #a16207;
+	margin-bottom: 1.5rem;
+	font-size: 1.3rem;
+	text-align: center;
+}
+
+.steps {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+
+.step {
+	display: flex;
+	align-items: flex-start;
+	gap: 1rem;
+}
+
+.step-number {
+	background: #eab308;
+	color: white;
+	width: 2rem;
+	height: 2rem;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+	flex-shrink: 0;
+}
+
+.step h4 {
+	color: #a16207;
+	margin-bottom: 0.5rem;
+	font-size: 1.1rem;
+}
+
+.step p {
+	color: #ca8a04;
+}
+
+.download-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	padding: 3rem;
+	text-align: center;
+}
+
+.download-card h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 1rem;
+}
+
+.download-card>p {
+	color: #64748b;
+	font-size: 1.1rem;
+	margin-bottom: 2rem;
+}
+
+.dashboard-config {
+	margin-bottom: 2rem;
+	text-align: left;
+	max-width: 400px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.dashboard-config label {
+	display: block;
+	color: #374151;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+
+.dashboard-config input {
+	width: 100%;
+	padding: 0.75rem 1rem;
+	border: 2px solid #e5e7eb;
+	border-radius: 8px;
+	font-size: 0.95rem;
+	transition: border-color 0.2s;
+}
+
+.dashboard-config input:focus {
+	outline: none;
+	border-color: #667eea;
+}
+
+.install-btn {
+	background: linear-gradient(135deg, #667eea, #764ba2);
+	color: white;
+	border: none;
+	padding: 1.25rem 3rem;
+	border-radius: 16px;
+	font-size: 1.2rem;
+	font-weight: 700;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin-bottom: 2rem;
+	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+.install-btn:hover:not(:disabled) {
+	transform: translateY(-3px);
+	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
+}
+
+.install-btn:disabled {
+	opacity: 0.7;
+	cursor: not-allowed;
+	transform: none;
+}
+
+.manual-option {
+	background: #f8fafc;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 2rem;
+}
+
+.manual-option h3 {
+	color: #1e293b;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+
+.manual-option>p {
+	color: #64748b;
+	margin-bottom: 1rem;
+}
+
+.btn-icon {
+	font-size: 1.1rem;
+}
+
+.install-status {
+	padding: 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	text-align: center;
+	display: none;
+	margin-top: 1rem;
+}
+
+.install-status.success {
+	background: #dcfce7;
+	color: #166534;
+	border: 1px solid #bbf7d0;
+}
+
+.install-status.error {
+	background: #fef2f2;
+	color: #dc2626;
+	border: 1px solid #fecaca;
+}
+
+.install-status.loading {
+	background: #dbeafe;
+	color: #1d4ed8;
+	border: 1px solid #bfdbfe;
+}
+
+.install-status.info {
+	background: #e0f2fe;
+	color: #0369a1;
+	border: 1px solid #7dd3fc;
+}
+
+.manual-install {
+	background: #1f2937;
+	border-radius: 8px;
+	padding: 1rem;
+	margin-bottom: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.manual-install code {
+	color: #10b981;
+	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+	font-size: 0.85rem;
+	flex: 1;
+	overflow-x: auto;
+}
+
+.copy-btn {
+	background: #374151;
+	color: white;
+	border: none;
+	padding: 0.5rem 1rem;
+	border-radius: 6px;
+	font-size: 0.8rem;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.copy-btn:hover {
+	background: #4b5563;
+}
+
+.manual-steps {
+	color: #6b7280;
+	font-size: 0.9rem;
+	line-height: 1.8;
+}
+
+.footer {
+	text-align: center;
+	padding: 2rem;
+	color: white;
+	opacity: 0.8;
+}
+
+.footer a {
+	color: white;
+	text-decoration: none;
+	font-weight: 600;
+}
+
+.footer a:hover {
+	text-decoration: underline;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+	.hero {
+		padding: 2rem 1rem;
+	}
+
+	.hero h1 {
+		font-size: 2rem;
+	}
+
+	.container {
+		padding: 0 1rem;
+	}
+
+	.app-details,
+	.download-card {
+		padding: 2rem;
+	}
+
+	.features-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.download-options {
+		grid-template-columns: 1fr;
+	}
+}