Display stats after generation

index.html

@@ -71,6 +71,7 @@
           <form>
             <label class="output"
               ><span><b>Output</b></span>
+              <p class="info hidden" id="stats"></p>
               <div id="output"></div>
             </label>
           </form>

src/index.js

@@ -108,6 +108,7 @@ document.getElementById("generate").onclick = async () => {
   }
   const request = {
     stream: true,
+    stream_options: { include_usage: true },
     messages: [
       {
         role: "user",
@@ -122,13 +123,16 @@ document.getElementById("generate").onclick = async () => {
   };
 
   let curMessage = "";
+  let usage = null;
   const generator = await engine.chatCompletion(request);
   for await (const chunk of generator) {
     const curDelta = chunk.choices[0]?.delta.content;
     if (curDelta) {
       curMessage += curDelta;
     }
-    console.log(curMessage);
+    if (chunk.usage) {
+      usage = chunk.usage;
+    }
     document.getElementById("output").textContent = curMessage;
   }
   const finalMessage = await engine.getMessage();
@@ -140,4 +144,9 @@ document.getElementById("generate").onclick = async () => {
   } else {
     document.getElementById("output").textContent = finalMessage;
   }
+  if (usage) {
+    const stats = usage['extra'];
+    document.getElementById("stats").textContent = `Prefill: ${stats['prefill_tokens_per_s'].toFixed(2)}, Decode: ${stats['decode_tokens_per_s'].toFixed(2)}, Grammar Init: ${stats['grammar_init_ms'].toFixed(2)}, Grammar Overhead Per Token: ${stats['grammar_per_token_ms'].toFixed(2)}`;
+    document.getElementById("stats").classList.remove("hidden");
+  }
 };

style/style.css

@@ -3,16 +3,18 @@
 }
 
 body {
-  padding: 2rem;
   font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   background: white;
+  position: relative;
+  margin: 0;
+  padding: 2rem;
 }
 
 main {
-  width: 100%;
+  width: calc(100% - 4rem);
   display: flex;
   flex-grow: 1;
   flex-direction: column;
@@ -125,6 +127,18 @@ textarea {
   line-height: 1.4;
 }
 
+.info {
+  font-size: .8em;
+  border: 1px solid #91caff;
+  border-radius: 8px;
+  background: #e6f4ff;
+  padding: 8px 12px;
+}
+
+.hidden {
+  display: none !important;
+}
+
 #prompt {
   height: 12rem;
 }
@@ -167,12 +181,17 @@ button:hover {
 }
 
 @media (min-width: 1600px) {
+  body {
+    padding: 4rem;
+  }
+
   main {
     display: flex;
     flex-direction: row;
     justify-content: space-evenly;
     align-items: start;
     max-width: 1600px;
+    margin-top: 4rem;
   }
 
   #right-col {