Hugging Face's logo

Spaces:
Xenobd
/
GEMMA-1b-WEBGPU
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +101 -7
index.html CHANGED
@@ -6,34 +6,128 @@
6
  <script type="module">
7
  import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/transformers.min.js';
8
 
9
- async function run() {
10
- // create generator with WebGPU backend
 
 
11
  const generator = await pipeline(
12
  "text-generation",
13
  "onnx-community/gemma-3-1b-it-ONNX",
14
  {
15
  dtype: "q4",
16
- // specify WebGPU backend for ORT
17
  providers: ["webgpu"]
18
  }
19
  );
20
 
 
 
21
  const messages = [
22
  { role: "system", content: "You are a helpful assistant." },
23
- { role: "user", content: "Write me a poem about Machine Learning." },
24
  ];
25
 
 
 
 
 
 
 
 
 
26
  const output = await generator(messages, { max_new_tokens: 512, do_sample: false });
27
 
28
- // show output in page
 
 
 
29
  document.getElementById("output").textContent = output[0].generated_text.at(-1).content;
30
  }
31
 
32
- run();
 
 
 
 
 
 
 
 
33
  </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  </head>
35
  <body>
36
  <h1>ONNX WebGPU Text Generation</h1>
37
- <pre id="output">Generating...</pre>
 
 
 
 
 
 
 
 
 
 
38
  </body>
39
  </html>
 
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>