3. Écosystème HUD & UI (EchoUI)

L'interface utilisateur d'ECHO, baptisée EchoUI, n'est pas une simple surcouche CSS, mais un moteur d'injection dynamique asynchrone. Elle permet de briser le "bac à sable" visuel d'Open WebUI pour offrir une expérience HUD (Heads-Up Display) digne d'une station de travail de renseignement.

Architecture de Communication

Le système repose sur une symbiose entre le Backend (Python) et le Frontend (JavaScript) :

Backend (echo_utils.EchoUI) : Génère des payloads JavaScript polymorphes encapsulant les données (Images Base64, métadonnées, états).
Canal d'Événements (EchoEvents) : Utilise les ponts emit et call d'Open WebUI pour injecter le code dans le DOM global.
Runtime Frontend (Engine) : Un objet singleton éphémère (ex: window.echoEngine_HUD_ID) prend le relais pour gérer les interactions locales sans solliciter le serveur.

Sécurité du Flux : Aucune URL de fichier temporaire n'est exposée. Les médias transitent exclusivement via des flux data:mime/type;base64, garantissant l'étanchéité des données entre le Vault et l'affichage.

1. Le Monitor ECHO (Visualiseur Intelligent)

Invoqué via EchoUI.monitor_ECHO, ce composant est le pivot de l'analyse visuelle.

🌐 ECHO MONITOR

[90s]

                        ZOOM: 2.5x [ACTIVE]

                        RENDER: GPU_TRANS3D

Moteur de Rendu & Performance

Accélération GPU : Utilisation systématique de translate3d(x,y,0) et will-change pour forcer la création de calques de composition matérielle.
Calcul de Ratio Dynamique : La fonction getBestSize ajuste automatiquement la fenêtre pour respecter les proportions de l'image (Aspect Ratio) tout en évitant les débordements du viewport (max 97%).
Système de Clamp : Empêche physiquement le HUD de sortir de l'écran lors du drag ou du resize.

Outils d'Interrogation

Système LENS (Loupe) : Zoom optique 2.5x synchronisé sur le pointeur. Recalcule les coordonnées réelles (naturalWidth) pour un affichage HD même sur des conteneurs réduits.
Crop-Box Interactif : Permet de définir une zone d'intérêt via une boîte de sélection redimensionnable.
Export Polymorphe : Un Canvas 2D interne permet de capturer soit l'image complète, soit la zone "croppée", pour export vers le presse-papier ou téléchargement local.

Persistance de l'État (LocalStorage)

Le HUD implémente une mémoire de session. Chaque manipulation est enregistrée sous la clé STATE_KEY définie par le backend (souvent liée au file_id) :

{ "w": 800, "x": 120, "y": 45, "m": false, "f": false }
(Largeur, Position X, Position Y, État Minifié, Mode Plein Écran)

2. La Context Gauge (Cortex Monitoring)

Injectée dans la barre de navigation via EchoUI.deploy_context_gauge, cette jauge est l'outil de pilotage du "Context Caching" de Gemini.

CTX

Compréhension des Segments de Jauge

🟪 Cache (Purple) : Représente les tokens déjà "ingérés" et mis en cache par l'infrastructure Google. Les données représentées par ce segment sont gérées par le cache implicite de Gemini côté Google, et coûtent jusqu'à 90% moins cher qu'un contexte entier retraité par le modèle.
🟩 User/Prompt (Green) : La charge active du message actuel. C'est la zone de consommation dynamique.
🟧 Generated (Orange) : Les tokens produits par ECHO. Une croissance rapide ici indique une verbosité élevée.
⬜ Vide : Espace de mémoire de travail restant avant la saturation du contexte (défini par MAX_CONTEXT_SIZE).

Fonctionnalités avancées de la Jauge

Hover Info : Le survol de la jauge affiche un title détaillant le volume exact de tokens pour chaque catégorie (Cache, User/Prompt, Generated) par rapport à la limite maximale (Max). Les informations de Plan IA ou de crédits, initialement prévues, agissent actuellement comme des espaces réservés (placeholders).
Adaptabilité Mobile : Le label "CTX" s'auto-dissimule sur les écrans inférieurs à 640px pour préserver l'espace de la navbar.
Fréquence de Mise à Jour : Rafraîchie à chaque cycle de pensée du pipe_engine.

Analyse d'Audit : Optimisation DOM

Pour éviter les fuites de mémoire et les ralentissements, EchoUI utilise systématiquement oldHud.remove() avant toute nouvelle injection. L'utilisation du flou (backdrop-filter) est optimisée via les calques GPU pour garantir 60 FPS même lors des animations complexes.