| <html lang="fr"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Corrective RAG</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="/static/styles.css?v=20260918f" /> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <aside class="sidebar"> | |
| <div class="brand"> | |
| <span class="brand-mark">CR</span> | |
| <div class="brand-text"> | |
| <div class="brand-name">Corrective RAG</div> | |
| <div class="brand-sub">Assistant documentaire</div> | |
| </div> | |
| </div> | |
| <nav class="nav" aria-label="Navigation"> | |
| <button class="nav-item active" data-view="chat" type="button">Assistant</button> | |
| <button class="nav-item" data-view="metrics" type="button">Métriques</button> | |
| <button class="nav-item" data-view="about" type="button">Architecture</button> | |
| </nav> | |
| <div class="sidebar-foot"> | |
| <div class="top-status"> | |
| <span class="dot" id="status-dot"></span> | |
| <span id="status-text">Connexion…</span> | |
| </div> | |
| <p class="side-note">Répond seulement avec des preuves.</p> | |
| </div> | |
| </aside> | |
| <main class="content"> | |
| <section class="view" id="view-chat"> | |
| <div class="intro compact"> | |
| <h1>Assistant d’analyse</h1> | |
| <p>Recherche corrigée, sources citées, refus si les preuves manquent.</p> | |
| </div> | |
| <div class="workspace"> | |
| <div class="chat-stage"> | |
| <div class="messages" id="messages"> | |
| <div class="message assistant"> | |
| <div class="bubble"> | |
| Bonjour. Posez une question sur les politiques, la FAQ ou | |
| les ventes. Si les documents ne suffisent pas, je le dirai. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="prompt-row"> | |
| <div class="suggestions" aria-label="Exemples"> | |
| <button class="suggestion" type="button" data-q="Quel est le délai de remboursement pour un client professionnel ?">Remboursement B2B</button> | |
| <button class="suggestion" type="button" data-q="Quelle est la politique de retour pour les clients entreprise ?">Retour entreprise</button> | |
| <button class="suggestion" type="button" data-q="Quel client a le meilleur chiffre d'affaires en juin ?">Meilleur CA juin</button> | |
| <button class="suggestion" type="button" data-q="Quel sera le chiffre d'affaires le mois prochain ?">Hors périmètre</button> | |
| </div> | |
| <form class="composer" id="composer"> | |
| <input type="text" id="question-input" placeholder="Votre question…" autocomplete="off" /> | |
| <button type="submit" id="send-btn">Envoyer</button> | |
| </form> | |
| </div> | |
| </div> | |
| <aside class="insight-panel" aria-label="Détail de la réponse"> | |
| <div class="insight-head"> | |
| <h2>Dernière réponse</h2> | |
| <p class="muted">Décision, sources et signaux du pipeline</p> | |
| </div> | |
| <div class="insight-block"> | |
| <div class="insight-label">Décision</div> | |
| <p class="decision" id="decision-badge">En attente</p> | |
| <p class="muted small" id="decision-hint"> | |
| Lancez une question pour voir CORRECT / AMBIGUOUS / INCORRECT. | |
| </p> | |
| </div> | |
| <div class="insight-block"> | |
| <div class="insight-label">Sources</div> | |
| <ul class="plain-list" id="source-list"> | |
| <li class="muted">Aucune encore</li> | |
| </ul> | |
| </div> | |
| <div class="insight-block"> | |
| <div class="insight-label">Pertinence des passages</div> | |
| <div class="grades" id="grades-list"> | |
| <p class="muted small">—</p> | |
| </div> | |
| </div> | |
| <div class="insight-block"> | |
| <div class="insight-label">Étapes du pipeline</div> | |
| <ol class="step-list" id="trace-list"> | |
| <li class="muted">En attente — posez une question</li> | |
| </ol> | |
| </div> | |
| <div class="insight-block"> | |
| <div class="insight-label">Signaux</div> | |
| <ul class="signals"> | |
| <li><span>Soutenue</span><b id="diag-supported">—</b></li> | |
| <li><span>SQL</span><b id="diag-structured">—</b></li> | |
| <li><span>Boucles</span><b id="diag-loops">—</b></li> | |
| <li><span>Latence</span><b id="diag-latency">—</b></li> | |
| </ul> | |
| </div> | |
| </aside> | |
| </div> | |
| </section> | |
| <section class="view hidden" id="view-metrics"> | |
| <div class="intro"> | |
| <h1>Métriques</h1> | |
| <p> | |
| Comparaison RAG classique vs Corrective RAG : retrieval, qualité, | |
| temps et SQL. | |
| </p> | |
| </div> | |
| <div id="metrics-empty" class="empty-panel hidden"> | |
| <p>Pas encore de résultats d’évaluation.</p> | |
| <p class="muted">Lancer <code>python eval/evaluate.py</code></p> | |
| </div> | |
| <div id="metrics-content" class="hidden"> | |
| <p class="meta-line"> | |
| <span id="metrics-n"></span> | |
| <span id="metrics-generated"></span> | |
| </p> | |
| <div class="metrics-layout"> | |
| <div class="metrics-cards"> | |
| <h2 class="section-title">Retrieval</h2> | |
| <div class="score-row" id="retrieval-grid"></div> | |
| <h2 class="section-title">Qualité de réponse</h2> | |
| <div class="score-row" id="quality-grid"></div> | |
| <h2 class="section-title">Temps</h2> | |
| <div class="score-row score-row-tight" id="time-grid"></div> | |
| </div> | |
| <aside class="metrics-overview"> | |
| <h2 class="section-title">Vue d’ensemble</h2> | |
| <div class="result-table-wrap"> | |
| <table class="result-table"> | |
| <thead> | |
| <tr> | |
| <th>Mesure</th> | |
| <th>Classique</th> | |
| <th>Corrective</th> | |
| <th>Écart</th> | |
| </tr> | |
| </thead> | |
| <tbody id="metrics-tbody"></tbody> | |
| </table> | |
| </div> | |
| <p class="footnote" id="metrics-footnote"></p> | |
| </aside> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="view hidden" id="view-about"> | |
| <div class="intro"> | |
| <h1>Architecture</h1> | |
| <p> | |
| Pipeline Corrective RAG : la récupération est contrôlée et corrigée | |
| avant la génération. | |
| </p> | |
| </div> | |
| <div class="arch-layout"> | |
| <div class="arch-flow" aria-label="Schéma Corrective RAG"> | |
| <div class="arch-node"> | |
| <div class="arch-title">Question utilisateur</div> | |
| </div> | |
| <div class="arch-arrow" aria-hidden="true"><span></span></div> | |
| <div class="arch-node"> | |
| <div class="arch-kicker">1</div> | |
| <div class="arch-title">Recherche vectorielle interne</div> | |
| <div class="arch-note">Embeddings · index local</div> | |
| </div> | |
| <div class="arch-arrow" aria-hidden="true"><span></span></div> | |
| <div class="arch-node"> | |
| <div class="arch-kicker">2</div> | |
| <div class="arch-title">Évaluateur de pertinence</div> | |
| <div class="arch-note">LLM structured output</div> | |
| </div> | |
| <div class="arch-arrow" aria-hidden="true"><span></span></div> | |
| <div class="arch-branches"> | |
| <div class="arch-branch correct"> | |
| <div class="arch-branch-label">CORRECT</div> | |
| <p>3A · Filtrer / reranker</p> | |
| <div class="arch-mini-arrow" aria-hidden="true"><span></span></div> | |
| <p>4 · Génération sourcée</p> | |
| </div> | |
| <div class="arch-branch ambiguous"> | |
| <div class="arch-branch-label">AMBIGUOUS</div> | |
| <p>3B · Réécrire la requête</p> | |
| <div class="arch-mini-arrow" aria-hidden="true"><span></span></div> | |
| <p>Recherche complémentaire</p> | |
| <div class="arch-mini-arrow" aria-hidden="true"><span></span></div> | |
| <p>Fusion → génération</p> | |
| </div> | |
| <div class="arch-branch incorrect"> | |
| <div class="arch-branch-label">INCORRECT</div> | |
| <p>3C · Écarter le contexte</p> | |
| <div class="arch-mini-arrow" aria-hidden="true"><span></span></div> | |
| <p>SQL / autre corpus</p> | |
| <div class="arch-mini-arrow" aria-hidden="true"><span></span></div> | |
| <p>Réponse ou refus</p> | |
| </div> | |
| </div> | |
| </div> | |
| <aside class="arch-explain"> | |
| <h2>Ce que fait chaque étape</h2> | |
| <article class="explain-card"> | |
| <h3>1 · Recherche</h3> | |
| <p> | |
| La question est comparée aux documents (PDF, MD, CSV) via | |
| embeddings. On récupère les passages les plus proches — sans | |
| encore décider s’ils sont vraiment utiles. | |
| </p> | |
| </article> | |
| <article class="explain-card"> | |
| <h3>2 · Évaluateur</h3> | |
| <p> | |
| Un LLM note chaque passage (score 0–100) : | |
| relevant, partial ou irrelevant. La décision globale devient | |
| CORRECT, AMBIGUOUS ou INCORRECT. | |
| </p> | |
| </article> | |
| <article class="explain-card explain-correct"> | |
| <h3>CORRECT</h3> | |
| <p> | |
| Au moins un passage solide. On filtre le bruit, on garde | |
| l’utile, puis on génère une réponse avec citations. | |
| </p> | |
| </article> | |
| <article class="explain-card explain-ambiguous"> | |
| <h3>AMBIGUOUS</h3> | |
| <p> | |
| Qualité moyenne. On reformule la question, on relance une | |
| recherche (et SQL si besoin), on fusionne, puis on répond. | |
| </p> | |
| </article> | |
| <article class="explain-card explain-incorrect"> | |
| <h3>INCORRECT</h3> | |
| <p> | |
| Contexte trop faible. On l’écarte, on tente le SQL sécurisé | |
| pour les chiffres, sinon on refuse plutôt que d’inventer. | |
| </p> | |
| </article> | |
| <p class="closing-note"> | |
| Données locales · SQL SQLite sécurisé · pas d’invention hors preuves. | |
| </p> | |
| </aside> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <script src="/static/app.js?v=20260918f"></script> | |
| </body> | |
| </html> | |