Local_AI_WebGPU

Sleeping

App Files Files Community

Javare commited on Jun 18

Commit

8f5af2b

verified ·

1 Parent(s): 20396d0

Update index.html

Browse files

Files changed (1) hide show

index.html +284 -96

index.html CHANGED Viewed

@@ -3,15 +3,137 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ton application WebGPU</title>
     <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>
     <script>
-      // 1. On "intercepte" la création du Worker pour espionner ses messages
       const OriginalWorker = window.Worker;
       window.Worker = function(...args) {
           const worker = new OriginalWorker(...args);
@@ -19,120 +141,186 @@
           worker.addEventListener('message', function(e) {
               const data = e.data;
-              // Quand la génération commence, on vide le graphique
-              if (data && data.status === 'start' && window.tpsChart) {
-                  window.tpsChart.data.labels = [];
-                  window.tpsChart.data.datasets[0].data = [];
-                  window.tpsChart.update();
               }
-              // Pendant la génération, on ajoute les points au graphique
-              if (data && data.status === 'update' && data.tps !== undefined && window.tpsChart) {
-                  window.tpsChart.data.labels.push(data.numTokens);
-                  window.tpsChart.data.datasets[0].data.push(parseFloat(data.tps.toFixed(2)));
-                  window.tpsChart.update('none'); // 'none' pour de meilleures performances (pas d'animation)
               }
           });
           return worker;
       };
-      // 2. On initialise le graphique une fois que la page est chargée
-      document.addEventListener("DOMContentLoaded", () => {
-          const ctx = document.getElementById('stressTestChart').getContext('2d');
-          window.tpsChart = new Chart(ctx, {
-              type: 'line',
-              data: {
-                  labels: [],
-                  datasets: [{
-                      label: 'Vitesse (Tokens / Sec)',
-                      data: [],
-                      borderColor: '#4bc0c0',
-                      backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                      borderWidth: 2,
-                      tension: 0.1, // Courbe légère
-                      pointRadius: 0  // Cache les ronds pour ne pas surcharger
-                  }]
-              },
-              options: {
-                  responsive: true,
-                  animation: false, // Désactive les animations pour le stress test
-                  scales: {
-                      x: { title: { display: true, text: 'Tokens générés' } },
-                      y: { title: { display: true, text: 'Tokens / Sec' }, beginAtZero: true }
-                  }
               }
-          });
-      });
-      // Système de leaderboard global connecté à l'API globale
-  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="5" style="text-align:center; color:#888;">Aucun score global pour le moment. Soyez le premier !</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></td>
-                  <td>${item.browser}</td>
-                  <td>${item.power}</td>
-                  <td style="color: #2b6cb0; font-weight: bold;">${item.score.toFixed(2)} tps</td>
-              `;
-              tbody.appendChild(row);
-          });
-      } catch (error) {
-          console.error("Erreur lors du chargement du classement global:", error);
-      }
-  }
-  async function saveScore(finalScore) {
-      if (finalScore <= 0) return;
-      const type = document.getElementById('deviceType').value;
-      const brand = document.getElementById('deviceBrand').value;
-      const model = document.getElementById('deviceModel').value || "Modèle inconnu";
-      const browser = document.getElementById('browserType').value;
-      const configString = `${type} - ${brand} (${model})`;
-      const payload = {
-          config: configString,
-          browser: browser,
-          power: selectedPower,
-          score: finalScore
-      };
-      try {
-          // Envoi du score à notre API Python sécurisée
-          await fetch('/api/score', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify(payload)
           });
-          // Rechargement du classement mis à jour pour tout le monde
-          loadLeaderboard();
-      } catch (error) {
-          console.error("Erreur lors de l'envoi du score au serveur:", error);
-      }
-  }
     </script>
   </head>
   <body>
     <div id="root"></div>
-    <div style="width: 100%; max-width: 800px; margin: 40px auto; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
-        <h3 style="text-align: center; font-family: sans-serif; color: #333;">Stress Test WebGPU : Vitesse en temps réel</h3>
-        <canvas id="stressTestChart"></canvas>
     </div>
   </body>
 </html>

   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Local AI WebGPU - Benchmark</title>
     <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;
+      }
+    </style>
     <script>
+      let selectedPower = '🔌 Secteur';
+      let maxTpsRecorded = 0;
+      let tokenLabels = [];
+      let tpsData = [];
+      function setPower(type) {
+          selectedPower = type;
+          document.getElementById('btnSecteur').classList.toggle('active', type === '🔌 Secteur');
+          document.getElementById('btnBatterie').classList.toggle('active', type === '🔋 Batterie');
+      }
+      // Interception magique du Web Worker pour le graphique et les performances
       const OriginalWorker = window.Worker;
       window.Worker = function(...args) {
           const worker = new OriginalWorker(...args);
           worker.addEventListener('message', function(e) {
               const data = e.data;
+              if (data && data.status === 'start') {
+                  maxTpsRecorded = 0;
+                  tokenLabels = [];
+                  tpsData = [];
+                  if (window.tpsChart) {
+                      window.tpsChart.data.labels = [];
+                      window.tpsChart.data.datasets[0].data = [];
+                      window.tpsChart.update();
+                  }
               }
+              if (data && data.status === 'update' && data.tps !== undefined) {
+                  if (data.tps > maxTpsRecorded) {
+                      maxTpsRecorded = data.tps;
+                  }
+                  tokenLabels.push(data.numTokens);
+                  tpsData.push(parseFloat(data.tps.toFixed(2)));
+                  if (window.tpsChart) {
+                      window.tpsChart.data.labels = tokenLabels;
+                      window.tpsChart.data.datasets[0].data = tpsData;
+                      window.tpsChart.update('none');
+                  }
+              }
+              // Envoi automatique du score à l'API globale en fin de génération
+              if (data && data.status === 'complete') {
+                  saveScore(maxTpsRecorded);
               }
           });
           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>';
+                  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>
+                  `;
+                  tbody.appendChild(row);
+              });
+          } catch (error) {
+              console.error("Erreur classement global:", error);
+          }
+      }
+      async function saveScore(finalScore) {
+          if (finalScore <= 0) return;
+          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
+          };
+          try {
+              await fetch('/api/score', {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify(payload)
+              });
+              loadLeaderboard();
+          } catch (error) {
+              console.error("Erreur envoi score:", error);
+          }
+      }
+      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 }] },
+              options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
           });
+      });
     </script>
   </head>
   <body>
     <div id="root"></div>
+    <div class="benchmark-sidebar">
+      <h3 class="benchmark-header">⚡ WebGPU Stress Test</h3>
+      <div class="benchmark-content">
+        <div class="form-group">
+          <label>Type d'appareil</label>
+          <select id="deviceType">
+            <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>
+            <option value="📱 SmartPhone">📱 SmartPhone</option>
+          </select>
+        </div>
+        <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>
+        </div>
+        <div class="form-group">
+          <label>Système d'exploitation (OS)</label>
+          <select id="osType">
+            <option value="Windows">Windows</option>
+            <option value="macOS">macOS</option>
+            <option value="Linux">Linux</option>
+            <option value="Android">Android</option>
+            <option value="iOS">iOS</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Navigateur Internet</label>
+          <select id="browserType">
+            <option value="Chrome">Chrome</option>
+            <option value="Firefox">Firefox</option>
+            <option value="Edge">Edge</option>
+            <option value="Brave">Brave</option>
+            <option value="Safari">Safari</option>
+            <option value="Opera">Opera</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Source d'alimentation</label>
+          <div class="power-selector">
+            <button type="button" class="power-btn active" id="btnSecteur" onclick="setPower('🔌 Secteur')">🔌 Secteur</button>
+            <button type="button" class="power-btn" id="btnBatterie" onclick="setPower('🔋 Batterie')">🔋 Batterie</button>
+          </div>
+        </div>
+        <hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 15px 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;">
+          <canvas id="stressTestChart"></canvas>
+        </div>
+        <h4 style="margin: 15px 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>
+            </tr>
+          </thead>
+          <tbody id="leaderboardBody">
+            </tbody>
+        </table>
+      </div>
     </div>
   </body>
 </html>