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 {