Spaces:

Xenobd
/

GEMMA-1b-WEBGPU

Running

App Files Files Community

Xenobd commited on Sep 1

Commit

f3b6176

verified ·

1 Parent(s): 82534fe

Update index.html

Browse files

Files changed (1) hide show

index.html +63 -76

index.html CHANGED Viewed

@@ -2,61 +2,83 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>ONNX WebGPU Streaming Text Generation</title>
 <script type="module">
 import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.min.js';
 async function runPrompt(prompt) {
-    console.log("%cInitializing pipeline...", "color: orange; font-weight: bold;");
     const generator = await pipeline(
         "text-generation",
         "onnx-community/gemma-3-1b-it-ONNX",
-        {
-            dtype: "q4",
-            providers: ["webgpu"]
-        }
     );
-    console.log("%cPipeline ready. Generating text...", "color: green; font-weight: bold;");
     const messages = [
         { role: "system", content: "You are a helpful assistant." },
         { role: "user", content: prompt },
     ];
-    const progressBar = document.getElementById("progress");
-    const progressText = document.getElementById("progressText");
-    let progress = 0;
-    // simulate initial download-like progress
-    const interval = setInterval(() => {
-        if(progress < 95) {
-            progress += Math.random() * 5; // random increment
-            progressBar.style.width = progress + "%";
-            progressText.textContent = Math.floor(progress) + "%";
-        }
-    }, 100);
-    const outputElem = document.getElementById("output");
-    outputElem.textContent = "";
-    // streaming generator
-    for await (const token of generator.stream(messages, { max_new_tokens: 512, do_sample: false })) {
         outputElem.textContent += token.content;
         outputElem.scrollTop = outputElem.scrollHeight;
-        // update progress bar based on token count (optional)
-        const tokenProgress = Math.min(95, outputElem.textContent.length / 5); // adjust divisor for speed
-        if(tokenProgress > progress) {
-            progress = tokenProgress;
-            progressBar.style.width = progress + "%";
-            progressText.textContent = Math.floor(progress) + "%";
-        }
     }
-    clearInterval(interval);
     progressBar.style.width = "100%";
     progressText.textContent = "100%";
     console.log("%cGeneration complete!", "color: blue; font-weight: bold;");
@@ -67,69 +89,34 @@ window.onload = () => {
     form.onsubmit = (e) => {
         e.preventDefault();
         const prompt = document.getElementById("promptInput").value;
-        document.getElementById("output").textContent = "Generating...\n";
-        document.getElementById("progress").style.width = "0%";
-        document.getElementById("progressText").textContent = "0%";
         runPrompt(prompt);
     }
 };
 </script>
 <style>
-body {
-    font-family: 'Segoe UI', sans-serif;
-    background: #1e1e2f;
-    color: #f0f0f0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 2rem;
-}
 h1 { color: #ffcc00; margin-bottom: 1rem; }
 #promptForm { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
-#promptInput {
-    padding: 0.5rem; width: 400px;
-    border-radius: 5px; border: none; font-size: 1rem;
-}
-#generateBtn {
-    padding: 0.5rem 1rem; background: #ffcc00;
-    border: none; border-radius: 5px;
-    font-weight: bold; cursor: pointer; color: #1e1e2f;
-}
 #generateBtn:hover { background: #ffdd33; }
-#progressContainer {
-    width: 400px; height: 20px; background: #333;
-    border-radius: 5px; overflow: hidden; margin-bottom: 1rem; position: relative;
-}
-#progress {
-    width: 0%; height: 100%;
-    background: #ffcc00; transition: width 0.1s;
-}
-#progressText {
-    position: absolute; right: 10px; top: 0; bottom: 0;
-    display: flex; align-items: center; justify-content: flex-end;
-    font-size: 0.8rem; color: #1e1e2f; font-weight: bold;
-}
-pre#output {
-    width: 400px; background: #2e2e44;
-    padding: 1rem; border-radius: 8px;
-    white-space: pre-wrap; word-wrap: break-word;
-    min-height: 150px; overflow-y: auto;
-}
 </style>
 </head>
 <body>
 <h1>ONNX WebGPU Streaming Text Generation</h1>
 <form id="promptForm">
     <input id="promptInput" type="text" placeholder="Type your prompt..." required />
     <button id="generateBtn">Generate</button>
 </form>
 <div id="progressContainer">
     <div id="progress"></div>
     <div id="progressText">0%</div>
 </div>
 <pre id="output">Enter a prompt and hit Generate...</pre>
 </body>
 </html>

 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<title>ONNX WebGPU Download & Streaming Text Generation</title>
 <script type="module">
 import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.min.js';
+// Helper: download a file with progress
+async function downloadWithProgress(url, onProgress) {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error("Network response was not ok");
+    const contentLength = +response.headers.get("Content-Length");
+    if (!contentLength) throw new Error("Content-Length header missing");
+    const reader = response.body.getReader();
+    let received = 0;
+    const chunks = [];
+    while(true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        chunks.push(value);
+        received += value.length;
+        onProgress(received / contentLength);
+    }
+    const blob = new Blob(chunks);
+    return blob;
+}
 async function runPrompt(prompt) {
+    const progressBar = document.getElementById("progress");
+    const progressText = document.getElementById("progressText");
+    const outputElem = document.getElementById("output");
+    // 1️⃣ Download model ONNX file manually
+    const modelUrl = "https://huggingface.co/onnx-community/gemma-3-1b-it-ONNX/resolve/main/gemma-3-1b-it-quant.onnx"; // example file
+    console.log("%cDownloading model...", "color: orange; font-weight: bold;");
+    outputElem.textContent = "Downloading model...\n";
+    progressBar.style.width = "0%";
+    progressText.textContent = "0%";
+    await downloadWithProgress(modelUrl, (ratio) => {
+        const pct = Math.floor(ratio * 100);
+        progressBar.style.width = pct + "%";
+        progressText.textContent = pct + "%";
+    });
+    console.log("%cModel downloaded!", "color: green; font-weight: bold;");
+    outputElem.textContent += "Model downloaded.\n";
+    // 2️⃣ Initialize generator using WebGPU
+    outputElem.textContent += "Initializing pipeline...\n";
     const generator = await pipeline(
         "text-generation",
         "onnx-community/gemma-3-1b-it-ONNX",
+        { dtype: "q4", providers: ["webgpu"] }
     );
+    outputElem.textContent += "Pipeline ready. Generating text...\n";
+    // 3️⃣ Stream output
     const messages = [
         { role: "system", content: "You are a helpful assistant." },
         { role: "user", content: prompt },
     ];
+    let generatedTokens = 0;
+    const maxTokens = 512;
+    for await (const token of generator.stream(messages, { max_new_tokens: maxTokens, do_sample: false })) {
         outputElem.textContent += token.content;
         outputElem.scrollTop = outputElem.scrollHeight;
+        generatedTokens++;
+        const progress = Math.min((generatedTokens / maxTokens) * 100, 100);
+        progressBar.style.width = progress + "%";
+        progressText.textContent = Math.floor(progress) + "%";
     }
     progressBar.style.width = "100%";
     progressText.textContent = "100%";
     console.log("%cGeneration complete!", "color: blue; font-weight: bold;");
     form.onsubmit = (e) => {
         e.preventDefault();
         const prompt = document.getElementById("promptInput").value;
+        document.getElementById("output").textContent = "";
         runPrompt(prompt);
     }
 };
 </script>
 <style>
+body { font-family: 'Segoe UI', sans-serif; background: #1e1e2f; color: #f0f0f0; display: flex; flex-direction: column; align-items: center; padding: 2rem; }
 h1 { color: #ffcc00; margin-bottom: 1rem; }
 #promptForm { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
+#promptInput { padding: 0.5rem; width: 400px; border-radius: 5px; border: none; font-size: 1rem; }
+#generateBtn { padding: 0.5rem 1rem; background: #ffcc00; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; color: #1e1e2f; }
 #generateBtn:hover { background: #ffdd33; }
+#progressContainer { width: 400px; height: 20px; background: #333; border-radius: 5px; overflow: hidden; margin-bottom: 1rem; position: relative; }
+#progress { width: 0%; height: 100%; background: #ffcc00; transition: width 0.05s; }
+#progressText { position: absolute; right: 10px; top: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; font-size: 0.8rem; color: #1e1e2f; font-weight: bold; }
+pre#output { width: 400px; background: #2e2e44; padding: 1rem; border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; min-height: 150px; overflow-y: auto; }
 </style>
 </head>
 <body>
 <h1>ONNX WebGPU Streaming Text Generation</h1>
 <form id="promptForm">
     <input id="promptInput" type="text" placeholder="Type your prompt..." required />
     <button id="generateBtn">Generate</button>
 </form>
 <div id="progressContainer">
     <div id="progress"></div>
     <div id="progressText">0%</div>
 </div>
 <pre id="output">Enter a prompt and hit Generate...</pre>
 </body>
 </html>