08529b825a
Remplace le HUD minimal (cercle CSS) par le design Claude Design : avatar
portrait réactif (anneau + ping d'écoute + spinner de réflexion), transcript
à bulles (tag modèle), indicateur de connexion + reconnexion auto, et un
drawer Réglages.
- HUD (stt/hud/index.html) : HTML/CSS/JS sans dépendance externe, DEMO=false
branché sur le websocket existant (états idle/listening/thinking/speaking,
user/assistant/error). Portraits chargés depuis hud/avatars/ (repli « あ »
si absent — voir avatars/README.md).
- Backend (ui/app.py) : le HUD renvoie {"type":"settings",...} ; le serveur
applique à chaud reset / mode cerveau (modèle LiteLLM) / mot de réveil via
_apply_settings (best-effort, non bloquant).
- engine/cli : tag du modèle courant ajouté aux réponses (events assistant).
- Docs : hud/README + avatars/README + admin/ia/stt.md (phase 4 ✅) + config.
Phase 4 de la roadmap STT. Reste : test sur poste + portraits réels.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Qjq5jHiqNepnobJpHYpCa
|
||
|---|---|---|
| .. | ||
| avatars | ||
| index.html | ||
| README.md | ||
stt/hud — interface HUD web (implémentée)
Front statique HTML/CSS/JS sans dépendance externe (tout inline, SVG natifs),
servi localement par le backend (stt/ui/app.py — SimpleHTTPRequestHandler sur
ui.http_port), ouvert en kiosk si ui.kiosk = true. Se connecte au serveur
websocket du backend (ui.ws_port, défaut 9300) pour recevoir les états et
renvoyer les réglages.
Ce qu'affiche le HUD
- Avatar portrait réactif (disque) — 3 images crossfadées selon l'état
(
idle/listening → -idle,thinking → -think,speaking → -speak), avec anneau fin, « ping » d'écoute et spinner de réflexion. Repli sur l'initiale du personnage si aucune image (voiravatars/README.md). - Label d'état : veille / écoute / réflexion / réponse.
- Transcript : bulles utilisateur / assistant (+ tag du modèle) / erreur.
- Indicateur de connexion websocket (point + libellé), reconnexion auto.
- Drawer Réglages (engrenage) : intensité de l'accent (thème), avatar, voix, mot de réveil, mode cerveau (local/avancé), no-think, reset conversation.
Protocole websocket
Reçus du backend (diffusés à tous les HUD connectés) :
| Événement | Effet |
|---|---|
{"type":"state","state":"idle|listening|thinking|speaking"} |
animation + label |
{"type":"user","text":…} |
bulle utilisateur |
{"type":"assistant","text":…,"mode":…} |
bulle assistant (+ tag modèle) |
{"type":"error","text":…} |
bulle d'erreur |
Envoyés au backend à chaque changement de réglage :
{"type":"settings","data":{"brainMode":"local","wakeword":"…","action":"reset"}}
Le serveur applique action:reset, brainMode (→ modèle LiteLLM) et wakeword
à chaud (_apply_settings dans stt/ui/app.py). Les réglages purement
visuels (intensité d'accent, avatar) sont persistés côté navigateur (localStorage).
Prévisualiser sans backend
Le HUD embarque un mode démo : passer const DEMO = false à true en tête
du <script> rejoue une boucle d'événements simulés — pratique pour itérer le
design sans lancer le serveur. Défaut livré : false (branché sur le backend).
Design & personnalisation
Esthétique douce (blanc + accent rose → rouge), origine Claude Design. Les
variables CSS en tête du <style> pilotent le rendu (--accent-rest,
--accent-active, --avatar, --ring-gap…) ; le slider « intensité » interpole
l'accent au repos. Portraits dans avatars/ (jeux asa / mira /
kai, swappables à chaud depuis les Réglages).