Update index.js

index.js

@@ -1,41 +1,69 @@
 import { pipeline, env } from "@xenova/transformers";
 
-async function main() {
-  const inputEl = document.getElementById("input-text");
-  const btnEl   = document.getElementById("generate-btn");
-  const outEl   = document.getElementById("output-text");
-
-  // (Optional) force ONNX CPU backend
-  env.backends.onnx.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2/dist/";
-  env.useWasmCPU();
-
-  // Load the text2text-generation pipeline with the ONNX weights
-  // hosted at onnx-community/orpheus-3b-0.1-ft-ONNX :contentReference[oaicite:0]{index=0}
-  const generator = await pipeline(
-    "text2text-generation",
-    "onnx-community/orpheus-3b-0.1-ft-ONNX"
-  );
-
-  // Enable button once ready
-  btnEl.disabled = false;
-
-  btnEl.addEventListener("click", async () => {
-    const prompt = inputEl.value.trim();
-    if (!prompt) return;
-
-    btnEl.disabled = true;
-    outEl.textContent = "Generating…";
-
-    try {
-      // Generate up to 256 tokens; adjust max_length as needed :contentReference[oaicite:1]{index=1}
-      const [res] = await generator(prompt, { max_length: 256 });
-      outEl.textContent = res.generated_text;
-    } catch (err) {
-      outEl.textContent = `Error: ${err}`;
-    } finally {
-      btnEl.disabled = false;
-    }
+const MODEL_ID = "onnx-community/orpheus-3b-0.1-ft-ONNX";
+
+const modal       = document.getElementById("modal");
+const modalText   = document.getElementById("modal-text");
+const progressBar = document.getElementById("progress-fill");
+const inputEl     = document.getElementById("input-text");
+const btnEl       = document.getElementById("generate-btn");
+const loadingEl   = document.getElementById("loading-text");
+const outputEl    = document.getElementById("output-text");
+
+let generator = null;
+
+// Set up ONNX WASM paths (optional)
+env.backends.onnx.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2/dist/";
+env.useWasmCPU();
+
+btnEl.addEventListener("click", async () => {
+  const prompt = inputEl.value.trim();
+  if (!prompt) return;
+
+  btnEl.disabled = true;
+  outputEl.textContent = "";
+  loadingEl.textContent = "";
+
+  // Show downloading modal
+  modal.classList.remove("hidden");
+  progressBar.style.width = "0%";
+  modalText.textContent = "Loading model... 0%";
+
+  // Load (or reuse) pipeline with progress callback :contentReference[oaicite:0]{index=0}
+  if (!generator) {
+    generator = await pipeline("text2text-generation", MODEL_ID, {
+      progress_callback: (args) => {
+        if (args.status === "progress") {
+          const pct = Math.floor(args.progress * 100);
+          progressBar.style.width = pct + "%";
+          modalText.textContent = `Loading model... ${pct}%`;
+        }
+      },
+    });
+  }
+
+  // Hide modal
+  modalText.textContent = "Model ready!";
+  await new Promise((r) => setTimeout(r, 300));
+  modal.classList.add("hidden");
+
+  // Stream tokens as they generate :contentReference[oaicite:1]{index=1}
+  loadingEl.classList.remove("hidden");
+  await generator(prompt, {
+    max_length: 256,
+    callback_function: (beams) => {
+      // beams may be an array of { token, text, ... }
+      // append the latest token or text
+      const tok = typeof beams === "string"
+        ? beams
+        : (beams[0]?.text || beams[0]?.token || "");
+      loadingEl.textContent += tok;
+    },
   });
-}
 
-main();
+  // Final output from the pipeline
+  const [res] = await generator(prompt, { max_length: 0 });
+  loadingEl.classList.add("hidden");
+  outputEl.textContent = res.generated_text;
+
+  btnEl.disabled