Funk-lab/stt/client/stt/hud/README.md
ALI YESILKAYA 2658f92c2f
feat(stt): HUD avancé (phase 4) — design Claude Design câblé au backend (#17)
* feat(stt): HUD avancé — design Claude Design câblé au backend

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

* fix(stt): HUD servi sans cache navigateur (anti ancienne version)

Le HUD est un dashboard live servi en statique : sans en-tête anti-cache, le
navigateur garde l'ancien index.html après mise à jour (« je vois encore la
version bleue »). Ajoute Cache-Control: no-store + Pragma: no-cache via un
handler dédié, et silence le log HTTP par requête.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Qjq5jHiqNepnobJpHYpCa

* chore(stt): bump client 0.1.0 → 0.2.0 (HUD avancé)

La version inchangée faisait que pipx/uv réutilisait l'ancien build en cache
lors d'un réinstall (HUD bleu persistant malgré le nouveau code). Le bump force
une résolution propre vers la nouvelle version (HUD design Claude Design).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Qjq5jHiqNepnobJpHYpCa

* fix(stt): cache-bust de l'URL HUD en kiosk + bump 0.2.1

Ouvre le HUD avec ?v=<timestamp> (URL unique par lancement) pour que le
navigateur ne puisse jamais servir une version cachée de l'ancien HUD.
Complète Cache-Control: no-store côté serveur.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Qjq5jHiqNepnobJpHYpCa

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-06-18 22:03:39 +02:00

2.6 KiB

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.pySimpleHTTPRequestHandler 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 (voir avatars/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).