Update index.html

index.html

@@ -7,122 +7,36 @@
     
     <script type="module" crossorigin src="/assets/index-Btti6dN2.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CjAcR-nm.css">
-
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
     <style>
-      /* Style du panneau flottant à droite */
       .benchmark-sidebar {
-        position: fixed;
-        top: 0;
-        right: 0;
-        width: 380px;
-        height: 100vh;
-        background: #ffffff;
-        box-shadow: -4px 0 25px rgba(0,0,0,0.15);
-        z-index: 999999; /* S'assure de passer au-dessus de l'IA */
-        font-family: system-ui, -apple-system, sans-serif;
-        display: flex;
-        flex-direction: column;
-        color: #2d3748;
-        border-left: 1px solid #e2e8f0;
-      }
-
-      .benchmark-header {
-        background: #1a202c;
-        color: white;
-        padding: 15px;
-        text-align: center;
-        margin: 0;
-        font-size: 1.2rem;
-      }
-
-      .benchmark-content {
-        padding: 20px;
-        overflow-y: auto;
-        flex: 1;
-      }
-
-      .form-group {
-        margin-bottom: 12px;
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-      }
-
-      .form-group label {
-        font-size: 0.85rem;
-        font-weight: 600;
-        color: #4a5568;
-      }
-
-      .form-group input, .form-group select {
-        padding: 8px 12px;
-        border: 1px solid #cbd5e0;
-        border-radius: 6px;
-        font-size: 0.9rem;
-        background: #f7fafc;
-      }
-
-      .power-selector {
-        display: flex;
-        gap: 10px;
-        margin-top: 4px;
-      }
-
-      .power-btn {
-        flex: 1;
-        padding: 10px;
-        border: 2px solid #e2e8f0;
-        border-radius: 6px;
-        background: #fff;
-        cursor: pointer;
-        font-weight: bold;
-        transition: all 0.2s;
-        font-size: 0.85rem;
-      }
-
-      .power-btn.active {
-        border-color: #3182ce;
-        background: #ebf8ff;
-        color: #2b6cb0;
-      }
-
-      /* Style du tableau des scores */
-      .leaderboard-table {
-        width: 100%;
-        border-collapse: collapse;
-        margin-top: 15px;
-        font-size: 0.85rem;
-      }
-
-      .leaderboard-table th, .leaderboard-table td {
-        padding: 8px;
-        text-align: left;
-        border-bottom: 1px solid #e2e8f0;
-      }
-
-      .leaderboard-table th {
-        background-color: #edf2f7;
-        font-weight: 700;
-      }
-
-      .badge-top {
-        background: #ecc94b;
-        color: #744210;
-        padding: 1px 4px;
-        border-radius: 4px;
-        font-weight: bold;
-      }
-
-      /* Ajustement pour que l'application principale ne soit pas cachée derrière le panneau */
-      body {
-        margin-right: 380px !important;
-      }
+        position: fixed; top: 0; right: 0; width: 420px; height: 100vh;
+        background: #ffffff; box-shadow: -4px 0 25px rgba(0,0,0,0.15);
+        z-index: 999999; font-family: system-ui, -apple-system, sans-serif;
+        display: flex; flex-direction: column; color: #2d3748; border-left: 1px solid #e2e8f0;
+      }
+      .benchmark-header { background: #1a202c; color: white; padding: 15px; text-align: center; margin: 0; font-size: 1.2rem; }
+      .benchmark-content { padding: 15px; overflow-y: auto; flex: 1; }
+      .form-group { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
+      .form-group label { font-size: 0.85rem; font-weight: 600; color: #4a5568; }
+      .form-group input, .form-group select { padding: 8px 12px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 0.9rem; background: #f7fafc; }
+      .power-selector { display: flex; gap: 10px; margin-top: 4px; }
+      .power-btn { flex: 1; padding: 10px; border: 2px solid #e2e8f0; border-radius: 6px; background: #fff; cursor: pointer; font-weight: bold; font-size: 0.85rem; display: flex; justify-content: center; gap: 6px; }
+      .power-btn.active { border-color: #3182ce; background: #ebf8ff; color: #2b6cb0; }
+      
+      .leaderboard-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.78rem; }
+      .leaderboard-table th, .leaderboard-table td { padding: 6px 4px; text-align: left; border-bottom: 1px solid #e2e8f0; }
+      .leaderboard-table th { background-color: #edf2f7; font-weight: 700; color: #4a5568; }
+      .badge-top { background: #ecc94b; color: #744210; padding: 1px 4px; border-radius: 4px; font-weight: bold; }
+      .text-muted { color: #718096; font-size: 0.72rem; }
+      body { margin-right: 420px !important; }
     </style>
 
     <script>
       let selectedPower = '🔌 Secteur';
+      let startTime = 0;
+      let minTpsRecorded = Infinity;
       let maxTpsRecorded = 0;
       let tokenLabels = [];
       let tpsData = [];
@@ -133,7 +47,7 @@
           document.getElementById('btnBatterie').classList.toggle('active', type === '🔋 Batterie');
       }
 
-      // Interception magique du Web Worker pour le graphique et les performances
+      // Interception du Web Worker
       const OriginalWorker = window.Worker;
       window.Worker = function(...args) {
           const worker = new OriginalWorker(...args);
@@ -142,6 +56,8 @@
               const data = e.data;
               
               if (data && data.status === 'start') {
+                  startTime = performance.now();
+                  minTpsRecorded = Infinity;
                   maxTpsRecorded = 0;
                   tokenLabels = [];
                   tpsData = [];
@@ -153,11 +69,17 @@
               }
               
               if (data && data.status === 'update' && data.tps !== undefined) {
-                  if (data.tps > maxTpsRecorded) {
-                      maxTpsRecorded = data.tps;
+                  const currentTps = data.tps;
+                  const currentTokens = data.numTokens;
+
+                  // On commence à enregistrer min/max après 5 tokens pour éviter le lag de départ
+                  if (currentTokens > 5) {
+                      if (currentTps > maxTpsRecorded) maxTpsRecorded = currentTps;
+                      if (currentTps < minTpsRecorded) minTpsRecorded = currentTps;
                   }
-                  tokenLabels.push(data.numTokens);
-                  tpsData.push(parseFloat(data.tps.toFixed(2)));
+
+                  tokenLabels.push(currentTokens);
+                  tpsData.push(parseFloat(currentTps.toFixed(2)));
                   if (window.tpsChart) {
                       window.tpsChart.data.labels = tokenLabels;
                       window.tpsChart.data.datasets[0].data = tpsData;
@@ -165,60 +87,63 @@
                   }
               }
 
-              // Envoi automatique du score à l'API globale en fin de génération
               if (data && data.status === 'complete') {
-                  saveScore(maxTpsRecorded);
+                  const totalTime = (performance.now() - startTime) / 1000;
+                  const totalTokens = data.numTokens || tokenLabels.length;
+                  const finalAvgTps = totalTokens / totalTime;
+                  
+                  if (minTpsRecorded === Infinity) minTpsRecorded = finalAvgTps;
+
+                  // Envoi des statistiques complètes au serveur
+                  saveScore(minTpsRecorded, maxTpsRecorded, finalAvgTps, totalTokens, totalTime);
               }
           });
           
           return worker;
       };
 
-      // Appels API vers le serveur Python (FastAPI)
       async function loadLeaderboard() {
           try {
               const response = await fetch('/api/scores');
               const scores = await response.json();
-              
               const tbody = document.getElementById('leaderboardBody');
               tbody.innerHTML = '';
               
               if(!scores || scores.length === 0) {
-                  tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; color:#888;">Aucun score global.</td></tr>';
+                  tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; color:#888;">Aucun score.</td></tr>';
                   return;
               }
               
               scores.forEach((item, index) => {
                   const row = document.createElement('tr');
                   const isTop3 = index < 3 ? `<span class="badge-top">🥇 ${index + 1}</span>` : index + 1;
+                  
                   row.innerHTML = `
                       <td>${isTop3}</td>
-                      <td><strong>${item.config}</strong><br><small style="color:#718096">${item.browser} • ${item.power}</small></td>
-                      <td style="color: #2b6cb0; font-weight: bold; text-align: right;">${item.score.toFixed(1)} tps</td>
+                      <td><strong>${item.config}</strong><br><span class="text-muted">${item.browser} • ${item.power}</span></td>
+                      <td>Min: ${item.min_tps.toFixed(1)}<br>Max: <strong>${item.max_tps.toFixed(1)}</strong></td>
+                      <td style="color: #2b6cb0; font-weight: bold;">${item.avg_tps.toFixed(1)} tps</td>
+                      <td>${item.total_tokens} tok<br><span class="text-muted">en ${item.duration.toFixed(1)}s</span></td>
                   `;
                   tbody.appendChild(row);
               });
           } catch (error) {
-              console.error("Erreur classement global:", error);
+              console.error("Erreur chargement classement:", error);
           }
       }
 
-      async function saveScore(finalScore) {
-          if (finalScore <= 0) return;
-          
+      async function saveScore(minTps, maxTps, avgTps, totalTokens, duration) {
           const type = document.getElementById('deviceType').value;
           const model = document.getElementById('deviceModel').value || "Inconnu";
           const os = document.getElementById('osType').value;
           const browser = document.getElementById('browserType').value;
           
-          // Structure propre de la configuration de l'appareil
           const configString = `${type} [${os}] (${model})`;
           
           const payload = {
-              config: configString,
-              browser: browser,
-              power: selectedPower,
-              score: finalScore
+              config: configString, browser: browser, power: selectedPower,
+              min_tps: minTps, max_tps: maxTps, avg_tps: avgTps,
+              total_tokens: parseInt(totalTokens), duration: parseFloat(duration)
           };
 
           try {
@@ -235,11 +160,10 @@
 
       document.addEventListener("DOMContentLoaded", () => {
           loadLeaderboard();
-          
           const ctx = document.getElementById('stressTestChart').getContext('2d');
           window.tpsChart = new Chart(ctx, {
               type: 'line',
-              data: { labels: [], datasets: [{ label: 'Tokens/Sec', data: [], borderColor: '#3182ce', tension: 0.1, pointRadius: 0, borderWidth: 2 }] },
+              data: { labels: [], datasets: [{ label: 'tps', data: [], borderColor: '#3182ce', tension: 0.1, pointRadius: 0, borderWidth: 2 }] },
               options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
           });
       });
@@ -256,7 +180,7 @@
         <div class="form-group">
           <label>Type d'appareil</label>
           <select id="deviceType">
-            <option value="💻 UC (Bureau)">💻 UC (Bureau)</option>
+            <option value="🖥️ UC (Bureau)">🖥️ UC (Bureau)</option>
             <option value="💻 Laptop">💻 Laptop</option>
             <option value="🖥️ All in One">🖥️ All in One</option>
             <option value="📱 Tablette">📱 Tablette</option>
@@ -266,7 +190,7 @@
 
         <div class="form-group">
           <label>Modèle (CPU / GPU / Modèle exact)</label>
-          <input type="text" id="deviceModel" placeholder="Ex: RTX 4070 / Apple M3 / Galaxy S24" required>
+          <input type="text" id="deviceModel" placeholder="Ex: RTX 4070 / Apple M3 / Galaxy S26" required>
         </div>
 
         <div class="form-group">
@@ -300,20 +224,21 @@
           </div>
         </div>
 
-        <hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 15px 0;">
+        <hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 10px 0;">
 
-        <label style="font-size: 0.85rem; font-weight: 600; color: #4a5568; display:block; margin-bottom:5px;">Performances graphiques (tps)</label>
-        <div style="height: 140px; position: relative; margin-bottom: 20px;">
+        <div style="height: 110px; position: relative; margin-bottom: 10px;">
           <canvas id="stressTestChart"></canvas>
         </div>
 
-        <h4 style="margin: 15px 0 5px 0; color: #1a202c;">🏆 TOP 10 Global</h4>
+        <h4 style="margin: 10px 0 5px 0; color: #1a202c;">🏆 TOP 10 Global</h4>
         <table class="leaderboard-table">
           <thead>
             <tr>
-              <th>Rang</th>
-              <th>Configuration</th>
-              <th style="text-align: right;">Vitesse</th>
+              <th style="width: 8%">Rg</th>
+              <th style="width: 42%">Configuration</th>
+              <th style="width: 20%">TPS (Min/Max)</th>
+              <th style="width: 15%">Moyenne</th>
+              <th style="width: 15%">Tokens/Tps</th>
             </tr>
           </thead>
           <tbody id="leaderboardBody">