Update index.html

index.html

@@ -38,10 +38,10 @@
       import snarkdown from "https://cdn.skypack.dev/snarkdown";
       import hljs from "https://cdn.skypack.dev/highlight.js";
       // models base url
-        const MODELS = {
-            phi_1_5_q4k: {
-            base_url:
-          "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
+      const MODELS = {
+        phi_1_5_q4k: {
+          base_url:
+            "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
           model: "model-q4k.gguf",
           tokenizer: "tokenizer.json",
           config: "phi-1_5.json",
@@ -49,9 +49,9 @@
           seq_len: 2048,
           size: "800 MB",
         },
-          phi_1_5_q80: {
-            base_url:
-          "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
+        phi_1_5_q80: {
+          base_url:
+            "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
           model: "model-q80.gguf",
           tokenizer: "tokenizer.json",
           config: "phi-1_5.json",
@@ -59,19 +59,23 @@
           seq_len: 2048,
           size: "1.51 GB",
         },
-          phi_2_0_q4k: {
-            base_url:
-          "https://huggingface.co/radames/phi-2-quantized/resolve/main/",
-          model: ["model-v2-q4k.gguf_aa.part", "model-v2-q4k.gguf_ab.part", "model-v2-q4k.gguf_ac.part"],
+        phi_2_0_q4k: {
+          base_url:
+            "https://huggingface.co/radames/phi-2-quantized/resolve/main/",
+          model: [
+            "model-v2-q4k.gguf_aa.part",
+            "model-v2-q4k.gguf_ab.part",
+            "model-v2-q4k.gguf_ac.part",
+          ],
           tokenizer: "tokenizer.json",
           config: "config.json",
           quantized: true,
           seq_len: 2048,
           size: "1.57GB",
         },
-          puffin_phi_v2_q4k: {
-            base_url:
-          "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
+        puffin_phi_v2_q4k: {
+          base_url:
+            "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
           model: "model-puffin-phi-v2-q4k.gguf",
           tokenizer: "tokenizer-puffin-phi-v2.json",
           config: "puffin-phi-v2.json",
@@ -79,9 +83,9 @@
           seq_len: 2048,
           size: "798 MB",
         },
-          puffin_phi_v2_q80: {
-            base_url:
-          "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
+        puffin_phi_v2_q80: {
+          base_url:
+            "https://huggingface.co/lmz/candle-quantized-phi/resolve/main/",
           model: "model-puffin-phi-v2-q80.gguf",
           tokenizer: "tokenizer-puffin-phi-v2.json",
           config: "puffin-phi-v2.json",
@@ -158,7 +162,10 @@ Very polite review:`,
         const getValue = (id) => document.querySelector(`#${id}`).value;
         const modelID = getValue("model");
         const model = MODELS[modelID];
-        const weightsURL =  model.model instanceof Array ? model.model.map((m) => model.base_url + m) : model.base_url + model.model;
+        const weightsURL =
+          model.model instanceof Array
+            ? model.model.map((m) => model.base_url + m)
+            : model.base_url + model.model;
         const tokenizerURL = model.base_url + model.tokenizer;
         const configURL = model.base_url + model.config;
 
@@ -259,9 +266,9 @@ Very polite review:`,
         const query = new URLSearchParams(window.location.search);
         const modelID = query.get("model");
         if (modelID) {
-            modelSelect.value = modelID;
+          modelSelect.value = modelID;
         } else {
-            modelSelect.value = "phi_1_5_q4k";
+          modelSelect.value = "phi_1_5_q4k";
         }
 
         for (const [i, { title, prompt }] of TEMPLATES.entries()) {
@@ -287,16 +294,18 @@ Very polite review:`,
         prompt.value = template;
         prompt.style.height = "auto";
         prompt.style.height = prompt.scrollHeight + "px";
+        runBtn.disabled = false;
+        clearBtn.classList.remove("invisible");
       });
       modelSelect.addEventListener("change", (e) => {
         const query = new URLSearchParams(window.location.search);
         query.set("model", e.target.value);
         window.history.replaceState(
-        { },
-        "",
-        `${window.location.pathname}?${query}`
+          {},
+          "",
+          `${window.location.pathname}?${query}`
         );
-        window.parent.postMessage({queryString: "?" + query }, "*")
+        window.parent.postMessage({ queryString: "?" + query }, "*");
         const model = MODELS[e.target.value];
         document.querySelector("#max-seq").max = model.seq_len;
         document.querySelector("#max-seq").nextElementSibling.value = 200;
@@ -345,24 +354,49 @@ Very polite review:`,
     <main class="grid grid-cols-1 gap-8 relative">
       <span class="absolute text-5xl -ml-[1em]"> 🕯️ </span>
       <div>
-        <h1 class="text-5xl font-bold">Candle Phi 1.5 / Phi 2.0 </h1>
+        <h1 class="text-5xl font-bold">Candle Phi 1.5 / Phi 2.0</h1>
         <h2 class="text-2xl font-bold">Rust/WASM Demo</h2>
         <p class="max-w-lg">
           The
-          <a href="https://huggingface.co/microsoft/phi-1_5" class="link" target="_blank">Phi-1.5</a> and
-          <a href="https://huggingface.co/microsoft/phi-2" class="link" target="_blank">Phi-2</a> models achieve
-          state-of-the-art performance with only 1.3 billion and 2.7 billion parameters, compared to larger models with up
-          to 13 billion parameters. Here you can try the quantized versions. Additional prompt examples are
-          available in the
-          <a href="https://arxiv.org/pdf/2309.05463.pdf#page=8" class="link" target="_blank">
-            technical report </a>.
+          <a
+            href="https://huggingface.co/microsoft/phi-1_5"
+            class="link"
+            target="_blank"
+            >Phi-1.5</a
+          >
+          and
+          <a
+            href="https://huggingface.co/microsoft/phi-2"
+            class="link"
+            target="_blank"
+            >Phi-2</a
+          >
+          models achieve state-of-the-art performance with only 1.3 billion and
+          2.7 billion parameters, compared to larger models with up to 13
+          billion parameters. Here you can try the quantized versions.
+          Additional prompt examples are available in the
+          <a
+            href="https://arxiv.org/pdf/2309.05463.pdf#page=8"
+            class="link"
+            target="_blank"
+          >
+            technical report </a
+          >.
         </p>
         <p class="max-w-lg">
           You can also try
-          <a href="https://huggingface.co/teknium/Puffin-Phi-v2" class="link" target="_blank">Puffin-Phi V2
+          <a
+            href="https://huggingface.co/teknium/Puffin-Phi-v2"
+            class="link"
+            target="_blank"
+            >Puffin-Phi V2
           </a>
           quantized version, a fine-tuned version of Phi-1.5 on the
-          <a href="https://huggingface.co/datasets/LDJnr/Puffin" class="link" target="_blank">Puffin dataset
+          <a
+            href="https://huggingface.co/datasets/LDJnr/Puffin"
+            class="link"
+            target="_blank"
+            >Puffin dataset
           </a>
         </p>
       </div>
@@ -370,7 +404,7 @@ Very polite review:`,
         <p class="text-xs italic max-w-lg">
           <b>Note:</b>
           When first run, the app will download and cache the model, which could
-          take a few minutes. The models are <b>~800MB</b> or <b>~1.51GB</b> in
+          take a few minutes. The models are <b>~800MB</b> or <b>~1.57GB</b> in
           size.
         </p>
       </div>
@@ -382,8 +416,13 @@ Very polite review:`,
         ></select>
       </div>
       <div>
-        <h3 class="font-medium">Prompt Templates</h3>
-        <form id="prompt-templates" class="grid grid-cols-1 sm:grid-cols-2 gap-1 my-2"></form>
+        <details>
+          <summary class="font-medium cursor-pointer">Prompt Templates</summary>
+          <form
+            id="prompt-templates"
+            class="grid grid-cols-1 sm:grid-cols-2 gap-1 my-2"
+          ></form>
+        </details>
       </div>
       <form
         id="form"
@@ -393,7 +432,7 @@ Very polite review:`,
         <textarea
           type="text"
           id="prompt"
-          class="font-light w-full px-3 py-2 mx-1 resize-none outline-none"
+          class="font-light text-lg w-full px-3 py-2 mx-1 resize-none outline-none"
           oninput="this.style.height = 0;this.style.height = this.scrollHeight + 'px'"
           placeholder="Add your prompt here..."
         >
@@ -524,9 +563,9 @@ Output:</textarea
           <div
             id="output-counter"
             hidden
-            class="ml-auto font-semibold grid-rows-1 text-sm"
+            class="ml-auto font-semibold grid-rows-1"
           ></div>
-          <p hidden id="output-generation" class="grid-rows-2"></p>
+          <p hidden id="output-generation" class="grid-rows-2 text-lg"></p>
           <span id="output-status" class="m-auto font-light"
             >No output yet</span
           >