# Prompt #8 — D8 Web UI

**Rôle :**
Tu es _Développeur Web UI_ du projet **Skull Pi**. Tu livres une interface Web (React/Tailwind/WS + FastAPI backend déjà dans orchestrator) pour piloter, configurer et visualiser l’état du crâne. Langue : FR. Cible : Raspberry Pi Zero 2 W (navigateur moderne sur PC/tablette/smartphone).

**Contexte & contraintes :**

- Dossier : `/opt/Skull/apps/webui` (ou sous-orchestrator).
- Servi via orchestrator REST (port 8080).
- Stack : React + Tailwind CSS + WebSocket (logs temps réel).
- Thème : sobre, clair, responsive.
- Sécurité : pas de compte utilisateur (LAN only), mais éviter XSS/CSRF.

---

## Objectif fonctionnel

1. **Dashboard**

   - État services (OK/KO).
   - Flux caméra (snapshot MJPEG ou WebRTC si dispo).
   - Mode actuel + état machine (`orchestrator/state`).
   - Boutons changement mode (Idle, Accueil, Chanson, IA, Full Auto).

2. **Pilotage motion**

   - Sliders pour yeux, cou, mâchoire.
   - Boutons centre, ±1°.
   - Retour visuel des limites.

3. **Calibration**

   - Formulaire min/max/centre par servo.
   - Boutons “Tester mouvement” pas à pas.
   - Sauvegarde JSON.

4. **Accueil**

   - Paramètres sensibilité, cooldown.
   - CRUD phrases accueil (`greet.json`).
   - Test annonce (TTS).

5. **Chanson**

   - Upload MP3.
   - Sélection fichier.
   - Boutons Play/Pause/Stop/Loop.
   - Réglages jaw sync (gain, smoothing, latence).

6. **IA**

   - Config modèle (mini/nano), tokens, temperature.
   - Éditeur prompt système multi-lignes.
   - Logs conversation (historique mini).

7. **Full Auto**

   - Intervalle chanson (slider ms).
   - Flags `accueil_after_song`, `ia_after_accueil`.
   - Bouton “Test once”.

8. **Système**

   - Affichage logs (WebSocket).
   - Capabilities (topics retained).
   - Température CPU, FPS vision, charge.
   - Bouton “sauvegarder config”.

---

## Implémentation attendue

1. **Frontend React**

   - Pages : Dashboard, Motion, Calibration, Accueil, Chanson, IA, Full Auto, Système.
   - Composants UI (shadcn/ui + Tailwind).
   - WebSocket → logs + topics temps réel.
   - Responsive (mobile/desktop).

2. **Backend (orchestrator)**

   - Sert fichiers statiques buildés React.
   - WebSocket `/ws/logs` diffuse logs JSON.
   - API REST déjà existante → utilisée par UI.

3. **Design**

   - Layout grid, cartes avec ombres.
   - Boutons arrondis, cohérence couleurs.
   - Font FR lisible.

---

## Déploiement

- Build React → `dist/` → servi par FastAPI/StaticFiles.
- Commande build : `npm run build`.
- Dossier final : `/opt/Skull/apps/webui/dist`.

---

## Livrables

- Code React (pages, composants).
- `package.json` + scripts build.
- Intégration FastAPI orchestrator.
- `README.md` (installation, npm build).

---

## Critères d’acceptation

- Dashboard affiche état services et mode correct en < 2 s.
- Upload MP3 fonctionne (copie en `/opt/Skull/assets/audio`).
- Sliders motion publient commandes MQTT correctes.
- CRUD phrases accueil persiste dans `greet.json`.
- Prompt système éditable, sauvegardé et repris après restart.
- WebSocket logs affichés en temps réel (latence < 300 ms).
- UI responsive mobile/tablette.

---

## Plan de tests manuels

1. **Dashboard**

   - Charger UI → voir état Idle, services OK.

2. **Pilotage motion**

   - Bouger slider yeux → `eyes/cmd` MQTT publié.

3. **Calibration**

   - Modifier min/max servo → sauvegarde JSON.

4. **Accueil**

   - Ajouter phrase “Coucou visiteur” → redémarrer → persistance OK.

5. **Chanson**

   - Upload MP3 → apparaît dans liste.
   - Play → Skull chante + jaw sync visible.

6. **IA**

   - Éditer prompt système → sauvegarde.
   - Poser question via micro → réponse affichée.

7. **Full Auto**

   - Activer intervalle 5 s → enchaînement automatique test OK.

8. **Système**

   - Consulter logs temps réel.
   - Vérifier température CPU affichée.

---

**À livrer** : MR “D8 Web UI — Interface React complète” avec code, build, intégration orchestrator.