Product UI redesign (light) + disable API key for public demo

static/index.html

@@ -3,245 +3,201 @@
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>Corrective RAG · Data Assistant</title>
+<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=Figtree:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+<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" />
 </head>
 <body>
-<div class="app-shell">
+<div class="page">
 
-  <aside class="sidebar">
+  <header class="topbar">
     <div class="brand">
-      <div class="brand-mark" aria-hidden="true">CR</div>
-      <div class="brand-text">
-        <div class="brand-title">Corrective RAG</div>
-        <div class="brand-subtitle">Data Assistant</div>
-      </div>
+      <span class="brand-mark">CR</span>
+      <span class="brand-name">Corrective RAG</span>
     </div>
-
-    <nav class="nav" aria-label="Navigation principale">
-      <button class="nav-item active" data-view="chat" type="button">
-        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5.5h16v11H8.2L4 20.2V5.5z"/></svg>
-        Assistant
-      </button>
-      <button class="nav-item" data-view="metrics" type="button">
-        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19V11M12 19V5M19 19v-6"/></svg>
-        Évaluation
-      </button>
-      <button class="nav-item" data-view="about" type="button">
-        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 16v-4M12 8.2h.01"/></svg>
-        Architecture
-      </button>
+    <nav class="tabs" aria-label="Sections">
+      <button class="tab active" data-view="chat" type="button">Assistant</button>
+      <button class="tab" data-view="metrics" type="button">Résultats</button>
+      <button class="tab" data-view="about" type="button">Comment ça marche</button>
     </nav>
-
-    <div class="sidebar-footer">
-      <div class="status-row">
-        <span class="dot" id="status-dot"></span>
-        <span id="status-text">Connexion…</span>
-      </div>
-      <div class="model-chip" id="model-chip">deepseek-ai/DeepSeek-V4.1-Flash</div>
+    <div class="top-status">
+      <span class="dot" id="status-dot"></span>
+      <span id="status-text">Connexion…</span>
     </div>
-  </aside>
+  </header>
 
-  <main class="main">
+  <main class="content">
 
     <section class="view" id="view-chat">
-      <header class="view-header">
-        <p class="eyebrow">Pipeline contrôlé</p>
-        <h1>Assistant d'analyse documentaire</h1>
+      <div class="intro">
+        <h1>Posez une question.<br />Réponse seulement si les preuves tiennent.</h1>
         <p>
-          Évaluation de pertinence, filtrage, réécriture, SQL sécurisé
-          et vérification avant réponse. Si les preuves manquent, le système
-          refuse plutôt que d'inventer.
+          Politiques, FAQ, ventes. Le pipeline corrige la recherche avant
+          de répondre — ou refuse proprement.
         </p>
-      </header>
+      </div>
 
-      <div class="chat-layout">
-        <div class="chat-panel">
-          <div class="messages" id="messages">
-            <div class="message assistant">
-              <div class="bubble">
-                Bonjour. Posez une question sur les politiques (remboursement,
-                livraison), la FAQ interne, ou les rapports de ventes.
-                Je n'invente jamais de réponse quand les documents disponibles
-                ne suffisent pas.
-              </div>
+      <div class="chat-stage">
+        <div class="messages" id="messages">
+          <div class="message assistant">
+            <div class="bubble">
+              Bonjour. Essayez une question sur le remboursement, la
+              livraison, ou les ventes. Si les documents ne suffisent pas,
+              je le dirai clairement.
             </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="Ex. : Quel est le délai de remboursement pour un client professionnel ?"
+              placeholder="Votre question…"
               autocomplete="off"
             />
-            <button type="submit" id="send-btn" aria-label="Envoyer">
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M14 6l6 6-6 6"/></svg>
-            </button>
+            <button type="submit" id="send-btn">Envoyer</button>
           </form>
         </div>
+      </div>
 
-        <aside class="context-panel" aria-label="Contexte du pipeline">
-          <div class="context-block decision-block">
-            <div class="context-label">Décision retrieval</div>
-            <div class="decision-badge" id="decision-badge">En attente</div>
-            <p class="decision-hint" id="decision-hint">
-              Lancez une question pour voir le routage CORRECT / AMBIGUOUS /
-              INCORRECT.
-            </p>
+      <details class="trace-drawer" id="trace-drawer">
+        <summary>Détail de la dernière réponse</summary>
+        <div class="trace-grid">
+          <div>
+            <h3>Décision</h3>
+            <p class="decision" id="decision-badge">—</p>
+            <p class="muted" id="decision-hint">Aucune question encore.</p>
           </div>
-
-          <div class="context-block">
-            <div class="context-label">Sources citées</div>
-            <ul class="source-list" id="source-list">
-              <li class="empty">Aucune requête pour l'instant.</li>
+          <div>
+            <h3>Sources</h3>
+            <ul class="plain-list" id="source-list">
+              <li class="muted">—</li>
             </ul>
           </div>
-
-          <div class="context-block">
-            <div class="context-label">Grades de pertinence</div>
-            <div class="grades" id="grades-list">
-              <p class="empty">—</p>
-            </div>
-          </div>
-
-          <div class="context-block">
-            <div class="context-label">Trace du pipeline</div>
-            <ol class="trace-list" id="trace-list">
-              <li class="empty">—</li>
+          <div>
+            <h3>Étapes</h3>
+            <ol class="plain-list numbered" id="trace-list">
+              <li class="muted">—</li>
             </ol>
           </div>
-
-          <div class="context-block">
-            <div class="context-label">Diagnostic</div>
-            <div class="kv" id="diagnostic">
-              <div><span>Réponse soutenue</span><b id="diag-supported">—</b></div>
-              <div><span>SQL utilisé</span><b id="diag-structured">—</b></div>
-              <div><span>Boucles de correction</span><b id="diag-loops">—</b></div>
-              <div><span>Latence</span><b id="diag-latency">—</b></div>
-            </div>
+          <div>
+            <h3>Signaux</h3>
+            <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>
-
-      <div class="suggestions" aria-label="Exemples">
-        <button class="suggestion-chip" type="button" data-q="Quel est le délai de remboursement pour un client professionnel ?">Délai remboursement B2B</button>
-        <button class="suggestion-chip" type="button" data-q="Quelle est la politique de retour pour les clients entreprise ?">Politique retour entreprise</button>
-        <button class="suggestion-chip" type="button" data-q="Quel client a le meilleur chiffre d'affaires en juin ?">Meilleur CA en juin</button>
-        <button class="suggestion-chip" type="button" data-q="Quel sera le chiffre d'affaires le mois prochain ?">Question hors périmètre</button>
-      </div>
+        </div>
+        <div class="grades" id="grades-list"></div>
+      </details>
     </section>
 
     <section class="view hidden" id="view-metrics">
-      <header class="view-header">
-        <p class="eyebrow">Benchmark annoté</p>
-        <h1>Métriques d'évaluation</h1>
+      <div class="intro">
+        <h1>Corrective RAG vs RAG classique</h1>
         <p>
-          Comparaison RAG classique vs Corrective RAG sur le jeu annoté
-          (<code>eval/eval_questions.json</code>, calculée par
-          <code>eval/evaluate.py</code>.
+          Mesures sur un jeu de questions annotées. Pas une promesse marketing :
+          des scores calculés localement.
         </p>
-      </header>
+      </div>
 
-      <div id="metrics-empty" class="empty-state hidden">
-        <p>Aucune évaluation exécutée pour l'instant.</p>
-        <code>python eval/evaluate.py</code>
+      <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">
-        <div class="metrics-meta">
-          <span id="metrics-n">n = —</span>
-          <span id="metrics-generated">—</span>
-        </div>
-
-        <div class="headline-grid" id="headline-grid"></div>
-
-        <div class="metrics-section">
-          <div class="section-head">
-            <h2>Tableau comparatif</h2>
-            <p>Valeurs en pourcentage. Δ = Corrective RAG − RAG classique.</p>
-          </div>
-          <div class="table-wrap">
-            <table class="metrics-table" id="metrics-table">
-              <thead>
-                <tr>
-                  <th>Métrique</th>
-                  <th>Définition</th>
-                  <th>RAG classique</th>
-                  <th>Corrective RAG</th>
-                  <th>Δ</th>
-                </tr>
-              </thead>
-              <tbody id="metrics-tbody"></tbody>
-            </table>
-          </div>
-        </div>
-
-        <div class="metrics-section">
-          <div class="section-head">
-            <h2>Profil de performance</h2>
-            <p>Barres côte à côte pour lire rapidement les écarts.</p>
-          </div>
-          <div class="compare-legend">
-            <span><i class="swatch classic"></i> RAG classique</span>
-            <span><i class="swatch crag"></i> Corrective RAG</span>
-          </div>
-          <div class="compare-rows" id="compare-rows"></div>
+        <p class="meta-line">
+          <span id="metrics-n"></span>
+          <span id="metrics-generated"></span>
+        </p>
+        <div class="score-row" id="headline-grid"></div>
+        <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="metrics-footnote" id="metrics-footnote"></p>
+        <div class="bar-block" id="compare-rows"></div>
+        <p class="footnote" id="metrics-footnote"></p>
       </div>
     </section>
 
     <section class="view hidden" id="view-about">
-      <header class="view-header">
-        <p class="eyebrow">Conception CRAG</p>
-        <h1>Architecture du pipeline</h1>
+      <div class="intro">
+        <h1>Comment la réponse est construite</h1>
         <p>
-          La récupération est une étape à contrôler et corriger, pas une
-          vérité automatique.
+          Quatre étapes. Si la recherche est faible, le système corrige
+          avant d’écrire.
         </p>
-      </header>
+      </div>
 
-      <div class="pipeline-diagram">
-        <div class="pipe-step">1 · Recherche vectorielle interne</div>
-        <div class="pipe-arrow" aria-hidden="true"></div>
-        <div class="pipe-step">2 · Évaluateur de pertinence (LLM structuré)</div>
-        <div class="pipe-arrow" aria-hidden="true"></div>
-        <div class="pipe-branches">
-          <div class="pipe-branch correct">
-            <div class="pipe-branch-title">CORRECT</div>
-            <p>Filtrage des chunks parasites → génération sourcée</p>
+      <ol class="flow">
+        <li>
+          <span class="flow-num">01</span>
+          <div>
+            <h2>Recherche</h2>
+            <p>Documents internes (PDF, MD, CSV) via embeddings.</p>
           </div>
-          <div class="pipe-branch ambiguous">
-            <div class="pipe-branch-title">AMBIGUOUS</div>
-            <p>Réécriture → SQL sécurisé / re-recherche → fusion</p>
+        </li>
+        <li>
+          <span class="flow-num">02</span>
+          <div>
+            <h2>Jugement</h2>
+            <p>
+              Chaque passage est noté. Trois issues possibles :
+              assez bon, ambigu, ou trop faible.
+            </p>
           </div>
-          <div class="pipe-branch incorrect">
-            <div class="pipe-branch-title">INCORRECT</div>
-            <p>Contexte écarté → SQL sécurisé → réponse ou refus</p>
+        </li>
+        <li>
+          <span class="flow-num">03</span>
+          <div>
+            <h2>Correction</h2>
+            <p>
+              Filtrage, reformulation, ou requête SQL en lecture seule
+              sur les ventes — selon le jugement.
+            </p>
           </div>
-        </div>
-        <div class="pipe-arrow" aria-hidden="true"></div>
-        <div class="pipe-step">3 · Génération sourcée</div>
-        <div class="pipe-arrow" aria-hidden="true"></div>
-        <div class="pipe-step">4 · Vérification (faithfulness) — boucle si non soutenue</div>
-      </div>
+        </li>
+        <li>
+          <span class="flow-num">04</span>
+          <div>
+            <h2>Réponse contrôlée</h2>
+            <p>
+              Génération sourcée, puis vérification. Si ce n’est pas
+              soutenu : nouvelle passe, ou refus.
+            </p>
+          </div>
+        </li>
+      </ol>
 
-      <div class="stack-note">
-        <strong>Données &amp; SQL :</strong> documents en
-        <code>.md</code> / <code>.pdf</code> / <code>.csv</code>, chiffres via
-        SQLite (<code>data/database/company.db</code>) avec validateur SELECT
-        only — module <code>app/sql/</code>. Embeddings via fastembed (ONNX).
-      </div>
+      <p class="closing-note">
+        Données locales · SQL SQLite sécurisé · pas d’invention hors preuves.
+      </p>
     </section>
 
   </main>
 </div>
-
 <script src="/static/app.js"></script>
 </body>
 </html>