Hugging Face's logo

Spaces:
Xenobd
/
GEMMA-1b-WEBGPU
Running

App Files Community
Xenobd commited on
Commit
fc9b90e
·
verified ·
1 Parent(s): c187faa

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +82 -99
index.html CHANGED
@@ -1,133 +1,116 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>ONNX WebGPU Text Generation</title>
6
- <script type="module">
7
- import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.min.js';
8
 
9
- async function runPrompt(prompt) {
10
- // log start
11
- console.log("%cInitializing pipeline...", "color: orange; font-weight: bold;");
12
 
13
- const generator = await pipeline(
 
14
  "text-generation",
15
  "onnx-community/gemma-3-1b-it-ONNX",
16
  {
17
- dtype: "q4",
18
- providers: ["webgpu"]
19
  }
20
- );
21
 
22
- console.log("%cPipeline ready. Generating text...", "color: green; font-weight: bold;");
23
 
24
- const messages = [
25
  { role: "system", content: "You are a helpful assistant." },
26
  { role: "user", content: prompt },
27
- ];
28
 
29
- // simple console progress simulation
30
- const progressBar = document.getElementById("progress");
31
- let progress = 0;
32
- const interval = setInterval(() => {
 
33
  progress = Math.min(progress + Math.random() * 10, 95);
34
  progressBar.style.width = progress + "%";
35
- }, 100);
36
-
37
- const output = await generator(messages, { max_new_tokens: 512, do_sample: false });
38
 
39
- clearInterval(interval);
40
- progressBar.style.width = "100%";
41
- console.log("%cGeneration complete!", "color: blue; font-weight: bold;");
42
 
43
- document.getElementById("output").textContent = output[0].generated_text.at(-1).content;
 
 
 
44
  }
45
 
46
- window.onload = () => {
47
- const form = document.getElementById("promptForm");
48
- form.onsubmit = (e) => {
 
 
 
 
 
49
  e.preventDefault();
50
  const prompt = document.getElementById("promptInput").value;
51
- document.getElementById("output").textContent = "Generating...";
 
52
  runPrompt(prompt);
53
- }
54
- };
55
- </script>
56
- <style>
57
- body {
58
- font-family: 'Segoe UI', sans-serif;
59
- background: #1e1e2f;
60
- color: #f0f0f0;
61
- display: flex;
62
- flex-direction: column;
63
- align-items: center;
64
- padding: 2rem;
65
- }
66
- h1 {
67
- color: #ffcc00;
68
- margin-bottom: 1rem;
69
- }
70
- #promptForm {
71
- display: flex;
72
- gap: 0.5rem;
73
- margin-bottom: 1rem;
74
- }
75
- #promptInput {
76
- padding: 0.5rem;
77
- width: 400px;
78
- border-radius: 5px;
79
- border: none;
80
- font-size: 1rem;
81
- }
82
- #generateBtn {
83
- padding: 0.5rem 1rem;
84
- background: #ffcc00;
85
- border: none;
86
- border-radius: 5px;
87
- font-weight: bold;
88
- cursor: pointer;
89
- color: #1e1e2f;
90
- }
91
- #generateBtn:hover {
92
- background: #ffdd33;
93
- }
94
- #progressContainer {
95
- width: 400px;
96
- height: 10px;
97
- background: #333;
98
- border-radius: 5px;
99
- overflow: hidden;
100
- margin-bottom: 1rem;
101
- }
102
- #progress {
103
- width: 0%;
104
- height: 100%;
105
- background: #ffcc00;
106
- transition: width 0.1s;
107
- }
108
- pre#output {
109
- width: 400px;
110
- background: #2e2e44;
111
- padding: 1rem;
112
- border-radius: 8px;
113
- white-space: pre-wrap;
114
- word-wrap: break-word;
115
- min-height: 150px;
116
  }
117
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
  </head>
119
  <body>
120
- <h1>ONNX WebGPU Text Generation</h1>
121
 
122
- <form id="promptForm">
123
  <input id="promptInput" type="text" placeholder="Type your prompt..." required />
124
  <button id="generateBtn">Generate</button>
125
- </form>
126
 
127
- <div id="progressContainer">
128
  <div id="progress"></div>
129
- </div>
130
 
131
- <pre id="output">Enter a prompt and hit Generate...</pre>
132
  </body>
133
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <title>ONNX WebGPU Streaming Text Generation</title>
6
+ <script type="module">
7
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.min.js';
8
 
9
+ async function runPrompt(prompt) {
10
+ console.clear();
11
+ console.log("%cInitializing pipeline...", "color: orange; font-weight: bold;");
12
 
13
+ // Create generator using WebGPU
14
+ const generator = await pipeline(
15
  "text-generation",
16
  "onnx-community/gemma-3-1b-it-ONNX",
17
  {
18
+ dtype: "q4",
19
+ providers: ["webgpu"]
20
  }
21
+ );
22
 
23
+ console.log("%cPipeline ready. Generating text...", "color: green; font-weight: bold;");
24
 
25
+ const messages = [
26
  { role: "system", content: "You are a helpful assistant." },
27
  { role: "user", content: prompt },
28
+ ];
29
 
30
+ const progressBar = document.getElementById("progress");
31
+ let progress = 0;
32
+
33
+ // simulate initial progress
34
+ const interval = setInterval(() => {
35
  progress = Math.min(progress + Math.random() * 10, 95);
36
  progressBar.style.width = progress + "%";
37
+ }, 100);
 
 
38
 
39
+ const outputElem = document.getElementById("output");
40
+ outputElem.textContent = "";
 
41
 
42
+ // streaming generator
43
+ for await (const token of generator.stream(messages, { max_new_tokens: 512, do_sample: false })) {
44
+ outputElem.textContent += token.content;
45
+ outputElem.scrollTop = outputElem.scrollHeight; // auto scroll
46
  }
47
 
48
+ clearInterval(interval);
49
+ progressBar.style.width = "100%";
50
+ console.log("%cGeneration complete!", "color: blue; font-weight: bold;");
51
+ }
52
+
53
+ window.onload = () => {
54
+ const form = document.getElementById("promptForm");
55
+ form.onsubmit = (e) => {
56
  e.preventDefault();
57
  const prompt = document.getElementById("promptInput").value;
58
+ document.getElementById("output").textContent = "Generating...\n";
59
+ document.getElementById("progress").style.width = "0%";
60
  runPrompt(prompt);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  }
62
+ };
63
+ </script>
64
+ <style>
65
+ body {
66
+ font-family: 'Segoe UI', sans-serif;
67
+ background: #1e1e2f;
68
+ color: #f0f0f0;
69
+ display: flex;
70
+ flex-direction: column;
71
+ align-items: center;
72
+ padding: 2rem;
73
+ }
74
+ h1 { color: #ffcc00; margin-bottom: 1rem; }
75
+ #promptForm { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
76
+ #promptInput {
77
+ padding: 0.5rem; width: 400px;
78
+ border-radius: 5px; border: none; font-size: 1rem;
79
+ }
80
+ #generateBtn {
81
+ padding: 0.5rem 1rem; background: #ffcc00;
82
+ border: none; border-radius: 5px;
83
+ font-weight: bold; cursor: pointer; color: #1e1e2f;
84
+ }
85
+ #generateBtn:hover { background: #ffdd33; }
86
+ #progressContainer {
87
+ width: 400px; height: 10px; background: #333;
88
+ border-radius: 5px; overflow: hidden; margin-bottom: 1rem;
89
+ }
90
+ #progress {
91
+ width: 0%; height: 100%;
92
+ background: #ffcc00; transition: width 0.1s;
93
+ }
94
+ pre#output {
95
+ width: 400px; background: #2e2e44;
96
+ padding: 1rem; border-radius: 8px;
97
+ white-space: pre-wrap; word-wrap: break-word;
98
+ min-height: 150px; overflow-y: auto;
99
+ }
100
+ </style>
101
  </head>
102
  <body>
103
+ <h1>ONNX WebGPU Streaming Text Generation</h1>
104
 
105
+ <form id="promptForm">
106
  <input id="promptInput" type="text" placeholder="Type your prompt..." required />
107
  <button id="generateBtn">Generate</button>
108
+ </form>
109
 
110
+ <div id="progressContainer">
111
  <div id="progress"></div>
112
+ </div>
113
 
114
+ <pre id="output">Enter a prompt and hit Generate...</pre>
115
  </body>
116
  </html>