7g. Visual Intelligence
L'outil generate_rich_visualization (universal_visual_generator.py v5.1)
génère des interfaces visuelles interactives et les injecte dans la conversation via le HUD.
Le moteur est sélectionné automatiquement par le modèle en fonction de l'intention, ou peut
être imposé explicitement via le paramètre moteur.
Architecture — Pattern Data Island
Toutes les interfaces visuelles suivent le Pattern Data Island :
les données (JSON, Markdown, XML, SMILES…) sont encapsulées dans un élément HTML
<script type="application/json"> statique, puis lues et rendues par un
bloc <script> séparé chargeant la bibliothèque graphique via CDN.
Cette séparation garantit que les données utilisateur ne sont jamais interpolées dans
du code JavaScript directement.
Moteurs disponibles — liste complète
Les 16 moteurs suivants sont disponibles via le paramètre moteur :
| Clé moteur | Bibliothèque / Standard | Usage typique | Format d'entrée |
|---|---|---|---|
markmap |
Markmap.js | Mindmaps et hiérarchies | Markdown hiérarchique pur (niveaux #) |
mermaid |
Mermaid v11.14.0 | Flowcharts, séquences, UML, ERD | Syntaxe Mermaid v11 (flowchart TD, sequenceDiagram…) |
sketch |
Mermaid + Rough.js | Schémas façon croquis à main levée | Syntaxe Mermaid (rendu « rough ») |
echarts |
Apache ECharts 5+ | Tableaux de bord, Finance, Heatmaps | JSON ECharts (avec tooltip, legend, series…) |
vega |
Vega-Lite | Statistiques, Science des données | JSON Vega-Lite strict ($schema, data, mark…) |
timeline |
TimelineJS | Chronologies et frises historiques | JSON TimelineJS (events[].start_date, text.headline…) |
bpmn |
BPMN 2.0 | Processus métiers normés | XML BPMN 2.0 valide |
gantt |
Mermaid Gantt | Plannings, gestion de projet | Syntaxe Mermaid Gantt (commence par gantt) |
aframe |
A-Frame | Scènes 3D, architecture, volumes | HTML A-Frame (<a-scene>, <a-box>…) |
svg |
SVG natif | Plans 2D, schémas vectoriels sur mesure | Code XML SVG complet et valide |
cytoscape |
Cytoscape.js | Réseaux, graphes de force, clusters | JSON Cytoscape (elements: {nodes: [], edges: []}) |
wavedrom |
WaveDrom | Électronique, signaux numériques | JSON WaveDrom (signal: []) |
chem |
RDKit / Ketcher | Chimie moléculaire | Chaîne SMILES (ex. CC(=O)OC1=CC=CC=C1C(=O)O) |
science |
Plotly.js | Physique & Mathématiques | JSON Plotly (data: [], layout: {}) |
bio |
3Dmol.js / PDB | Biologie structurelle, protéines 3D | ID PDB (ex. 1A8M) ou fichier PDB complet |
astro |
D3-Celestial | Exploration céleste, carte du ciel | JSON D3-Celestial (projection: 'orthographic'…) |
Sélection automatique du moteur
Si le paramètre moteur n'est pas fourni, le modèle choisit librement le moteur
le plus adapté à l'intention. En cas d'ambiguïté sur le moteur retourné par le modèle, le Pipe
parcourt les 300 premiers caractères de la réponse pour détecter le mot-clé correspondant.
Fallback final : mermaid.
Niveaux cognitifs recommandés
| Niveau | Moteurs conseillés |
|---|---|
MODEL_LITE | Mindmaps simples (markmap), Flowcharts basiques (mermaid) |
MODEL_FLASH | Standard : echarts, bpmn, svg, vega, timeline, gantt |
MODEL_PRO | Complexe : aframe, cytoscape, wavedrom, science, astro |
? Validation JSON stricte automatique
Pour les moteurs à format JSON (echarts, vega, timeline,
cytoscape, wavedrom, science, astro),
l'outil valide le payload via orjson.loads() avant rendu. En cas d'erreur de
syntaxe, une requête de correction est automatiquement envoyée au modèle avant de passer
au rendu.