Update assets/index-Btti6dN2.js

assets/index-Btti6dN2.js

@@ -83,7 +83,91 @@ ${this.parser.parse(s)}</blockquote>
 `+f+"</"+p+`>
 `}listitem(s){var a;let o="";if(s.task){const f=this.checkbox({checked:!!s.checked});s.loose?((a=s.tokens[0])==null?void 0:a.type)==="paragraph"?(s.tokens[0].text=f+" "+s.tokens[0].text,s.tokens[0].tokens&&s.tokens[0].tokens.length>0&&s.tokens[0].tokens[0].type==="text"&&(s.tokens[0].tokens[0].text=f+" "+Zt(s.tokens[0].tokens[0].text),s.tokens[0].tokens[0].escaped=!0)):s.tokens.unshift({type:"text",raw:f+" ",text:f+" ",escaped:!0}):o+=f+" "}return o+=this.parser.parse(s.tokens,!!s.loose),`<li>${o}</li>
 `}checkbox({checked:s}){return"<input "+(s?'checked="" ':"")+'disabled="" type="checkbox">'}paragraph({tokens:s}){return`<p>${this.parser.parseInline(s)}</p>
-`}table(s){let o="",a="";for(let p=0;p<s.header.length;p++)a+=this.tablecell(s.header[p]);o+=this.tablerow({text:a});let f="";for(let p=0;p<s.rows.length;p++){const y=s.rows[p];a="";for(let k=0;k<y.length;k++)a+=this.tablecell(y[k]);f+=this.tablerow({text:a})}return f&&(f=`<tbody>${f}</tbody>`),`<table>
+`}table(s){let o="",a="";for(let p=0;p<s.header.length;p++)a+=this.tablecell(s.header[p]);o+=this.tablerow({text:a});let f="";for(let p=0;p<s.rows.length;p++){const y=s.rows[p];a="";for(let k=0;k<y.length;k++)a+=this.tablecell(y[k]);f+=this.tablerow({text:a})}return f&&(f=`<tbody>${f}</tbody>`),
+// Tableaux pour stocker les données du graphique
+let tokenLabels = []; // Exemple : [1, 2, 3, 4, 5...] (Index du token)
+let tpsData = [];     // Exemple : [45, 62, 68, 69...] (Vitesse à ce moment-là)
+
+myWorker.onmessage = function(e) {
+    const { status, tps, numTokens, output } = e.data;
+
+    if (status === 'start') {
+        // Réinitialiser les données au début d'une nouvelle génération
+        tokenLabels = [];
+        tpsData = [];
+        // Optionnel : Réinitialiser le graphique ici
+    }
+
+    if (status === 'update' && tps) {
+        // On ajoute le numéro du token actuel et la vitesse reçue
+        tokenLabels.push(numTokens);
+        tpsData.push(parseFloat(tps.toFixed(2))); // Arrondi à 2 décimales
+        
+        // Mettre à jour le graphique (voir Étape 2)
+        updateStressTestChart(tokenLabels, tpsData);
+    }
+
+    if (status === 'complete') {
+        console.log("Génération terminée !");
+    }
+};
+        const ctx = document.getElementById('stressTestChart').getContext('2d');
+let stressChart;
+
+// Fonction pour initialiser ou rafraîchir le graphique
+function updateStressTestChart(labels, data) {
+    if (stressChart) {
+        // Si le graphique existe déjà, on met simplement à jour ses données
+        stressChart.data.labels = labels;
+        stressChart.data.datasets[0].data = data;
+        stressChart.update('none'); // 'none' pour désactiver l'animation de transition et gagner en performance pendant le stream
+    } else {
+        // Création initiale du graphique
+        stressChart = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Vitesse de génération (Tokens/Sec)',
+                    data: data,
+                    borderColor: 'rgb(75, 192, 192)',
+                    backgroundColor: 'rgba(75, 192, 192, 0.1)',
+                    borderWidth: 2,
+                    tension: 0.2, // Légère courbe pour le rendu visuel
+                    pointRadius: 0 // Cache les points individuels pour optimiser les performances si beaucoup de tokens
+                }]
+            },
+            options: {
+                responsive: true,
+                scales: {
+                    x: {
+                        title: {
+                            display: true,
+                            text: 'Nombre de Tokens Générés'
+                        }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        title: {
+                            display: true,
+                            text: 'Tokens / Seconde'
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        position: 'top',
+                    },
+                    title: {
+                        display: true,
+                        text: 'Performances WebGPU en Temps Réel'
+                    }
+                }
+            }
+        });
+    }
+}
+  `<table>
 <thead>
 `+o+`</thead>
 `+f+`</table>