add tok/s badge

src/routes/+page.svelte

@@ -11,6 +11,7 @@
     let outputText = '';
     let error = '';
     let completionSpeed: number | null = null;
+    let tokensPerSecond: number | null = null;
     let selectedModel = "SmolLM-360M-Instruct-q4f16_1-MLC";
     let isGenerating = false;
 
@@ -49,13 +50,19 @@
         isGenerating = true;
         const startTime = performance.now();
         try {
-            const reply = await engine.chat.completions.create({
+            const response = await engine.chat.completions.create({
                 messages: [{role:"system",content: "You are a helpful AI agent helping users. Try your best to answer the users request.",},{ role: "user", content: inputText }],
                 max_tokens: 10,
             });
 
-            outputText = reply.choices[0].message.content || "";
-            completionSpeed = Math.round(performance.now() - startTime);
+            outputText = response.choices[0].message.content || "";
+            const endTime = performance.now();
+            const elapsedTimeInSeconds = (endTime - startTime) / 1000;
+            completionSpeed = Math.round(endTime - startTime);
+            
+            const generatedTokens = response.usage?.completion_tokens || 0;
+            tokensPerSecond = Math.round(generatedTokens / elapsedTimeInSeconds);
+            
             error = '';
         } catch (err) {
             error = `Error: ${(err as Error).message}`;
@@ -91,6 +98,9 @@
             {#if completionSpeed !== null}
                 <Badge>{completionSpeed}ms</Badge>
             {/if}
+            {#if tokensPerSecond !== null}
+                <Badge>{tokensPerSecond} tok/s</Badge>
+            {/if}
             <Badge class="bg-green-700">{selectedModel}</Badge>
         </div>
     {/if}