Hugging Face's logo

Spaces:
Javare
/
Local_AI_WebGPU
Sleeping

App Files Community
Javare commited on
Commit
d7a3222
·
verified ·
1 Parent(s): e443869

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +68 -9
index.html CHANGED
@@ -1,18 +1,77 @@
1
- <!doctype html>
2
- <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
- <link rel="icon" type="image/png" href="/logo.png" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>LaboFnac Bench AI WebGPU</title>
 
8
  <script type="module" crossorigin src="/assets/index-Btti6dN2.js"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
  <link rel="stylesheet" crossorigin href="/assets/index-CjAcR-nm.css">
11
- </head>
12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  <body>
14
  <div id="root"></div>
15
- <div style="width: 100%; max-width: 800px; margin: 20px auto;">
16
- <canvas id="stressTestChart"></canvas></div>
 
 
 
17
  </body>
18
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
  <head>
4
  <meta charset="UTF-8" />
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Ton application WebGPU</title>
7
+
8
  <script type="module" crossorigin src="/assets/index-Btti6dN2.js"></script>
 
9
  <link rel="stylesheet" crossorigin href="/assets/index-CjAcR-nm.css">
 
10
 
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+
13
+ <script>
14
+ // 1. On "intercepte" la création du Worker pour espionner ses messages
15
+ const OriginalWorker = window.Worker;
16
+ window.Worker = function(...args) {
17
+ const worker = new OriginalWorker(...args);
18
+
19
+ worker.addEventListener('message', function(e) {
20
+ const data = e.data;
21
+
22
+ // Quand la génération commence, on vide le graphique
23
+ if (data && data.status === 'start' && window.tpsChart) {
24
+ window.tpsChart.data.labels = [];
25
+ window.tpsChart.data.datasets[0].data = [];
26
+ window.tpsChart.update();
27
+ }
28
+
29
+ // Pendant la génération, on ajoute les points au graphique
30
+ if (data && data.status === 'update' && data.tps !== undefined && window.tpsChart) {
31
+ window.tpsChart.data.labels.push(data.numTokens);
32
+ window.tpsChart.data.datasets[0].data.push(parseFloat(data.tps.toFixed(2)));
33
+ window.tpsChart.update('none'); // 'none' pour de meilleures performances (pas d'animation)
34
+ }
35
+ });
36
+
37
+ return worker;
38
+ };
39
+
40
+ // 2. On initialise le graphique une fois que la page est chargée
41
+ document.addEventListener("DOMContentLoaded", () => {
42
+ const ctx = document.getElementById('stressTestChart').getContext('2d');
43
+ window.tpsChart = new Chart(ctx, {
44
+ type: 'line',
45
+ data: {
46
+ labels: [],
47
+ datasets: [{
48
+ label: 'Vitesse (Tokens / Sec)',
49
+ data: [],
50
+ borderColor: '#4bc0c0',
51
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
52
+ borderWidth: 2,
53
+ tension: 0.1, // Courbe légère
54
+ pointRadius: 0 // Cache les ronds pour ne pas surcharger
55
+ }]
56
+ },
57
+ options: {
58
+ responsive: true,
59
+ animation: false, // Désactive les animations pour le stress test
60
+ scales: {
61
+ x: { title: { display: true, text: 'Tokens générés' } },
62
+ y: { title: { display: true, text: 'Tokens / Sec' }, beginAtZero: true }
63
+ }
64
+ }
65
+ });
66
+ });
67
+ </script>
68
+ </head>
69
  <body>
70
  <div id="root"></div>
71
+
72
+ <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);">
73
+ <h3 style="text-align: center; font-family: sans-serif; color: #333;">Stress Test WebGPU : Vitesse en temps réel</h3>
74
+ <canvas id="stressTestChart"></canvas>
75
+ </div>
76
  </body>
77
+ </html>