Hugging Face's logo

Spaces:
mlc-ai
/
webllm-llama-3.2-chat
Running

App Files Community
neetnestor commited on
Commit
2819fb4
•
1 Parent(s): 31b8158

feat: clone with llama 3.2 models

Browse files
Files changed (6) hide show
  1. README.md +2 -2
  2. dist/index.js +0 -0
  3. index.html +8 -8
  4. package.json +1 -1
  5. src/index.js +31 -12
  6. yarn.lock +4 -4
README.md CHANGED
@@ -1,5 +1,5 @@
1
  ---
2
- title: Webllm Qwen 2.5 Chat
3
  emoji: 💬
4
  colorFrom: indigo
5
  colorTo: purple
@@ -8,4 +8,4 @@ pinned: false
8
  license: apache-2.0
9
  ---
10
 
11
- A space to chat with Qwen 2.5 running locally in your browser, powered by [WebLLM](https://github.com/mlc-ai/web-llm/).
 
1
  ---
2
+ title: Webllm Llama 3.2 Chat
3
  emoji: 💬
4
  colorFrom: indigo
5
  colorTo: purple
 
8
  license: apache-2.0
9
  ---
10
 
11
+ A space to chat with Llama 3.2 running locally in your browser, powered by [WebLLM](https://github.com/mlc-ai/web-llm/).
dist/index.js CHANGED
The diff for this file is too large to render. See raw diff
 
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width" />
6
- <title>WebLLM Qwen 2.5 Chat</title>
7
  <link rel="stylesheet" href="styles/katex.min.css" />
8
  <link
9
  rel="stylesheet"
@@ -14,9 +14,9 @@
14
 
15
  <body>
16
  <main>
17
- <h1>WebLLM Qwen 2.5 Chat</h1>
18
  <p>
19
- This space enables AI chat with Qwen 2.5 models directly in your local
20
  browser, empowered by WebLLM.
21
  </p>
22
 
@@ -26,20 +26,20 @@
26
  <!-- Model Size -->
27
  <div class="form-group">
28
  <label for="model_size">Model Size:</label>
29
- <select id="model_size" name="model_size">
30
- <option value="0.5B">0.5B</option>
31
- <option value="1.5B">1.5B</option>
32
  <option value="3B">3B</option>
33
- <option value="7B">7B</option>
34
  </select>
35
  </div>
36
 
37
  <!-- Quantization -->
38
  <div class="form-group">
39
  <label for="quantization">Quantization:</label>
40
- <select id="quantization" name="quantization">
41
  <option value="q4f16_1">q4f16</option>
42
  <option value="q4f32_1">q4f32</option>
 
 
43
  </select>
44
  </div>
45
 
 
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width" />
6
+ <title>WebLLM Llama 3.2 Chat</title>
7
  <link rel="stylesheet" href="styles/katex.min.css" />
8
  <link
9
  rel="stylesheet"
 
14
 
15
  <body>
16
  <main>
17
+ <h1>WebLLM Llama 3.2 Chat</h1>
18
  <p>
19
+ This space enables AI chat with Llama 3.2 models directly in your local
20
  browser, empowered by WebLLM.
21
  </p>
22
 
 
26
  <!-- Model Size -->
27
  <div class="form-group">
28
  <label for="model_size">Model Size:</label>
29
+ <select id="model_size" name="model_size" value="1B">
30
+ <option value="1B">1B</option>
 
31
  <option value="3B">3B</option>
 
32
  </select>
33
  </div>
34
 
35
  <!-- Quantization -->
36
  <div class="form-group">
37
  <label for="quantization">Quantization:</label>
38
+ <select id="quantization" name="quantization" value="q4f16_1">
39
  <option value="q4f16_1">q4f16</option>
40
  <option value="q4f32_1">q4f32</option>
41
+ <option value="q0f32">q0f32</option>
42
+ <option value="q0f16">q0f16</option>
43
  </select>
44
  </div>
45
 
package.json CHANGED
@@ -8,7 +8,7 @@
8
  "dependencies": {
9
  "@babel/core": "^7.13.15",
10
  "@babel/preset-env": "^7.13.15",
11
- "@mlc-ai/web-llm": "^0.2.63",
12
  "katex": "^0.16.11",
13
  "rehype-highlight": "^7.0.0",
14
  "rehype-katex": "^7.0.0",
 
8
  "dependencies": {
9
  "@babel/core": "^7.13.15",
10
  "@babel/preset-env": "^7.13.15",
11
+ "@mlc-ai/web-llm": "^0.2.67",
12
  "katex": "^0.16.11",
13
  "rehype-highlight": "^7.0.0",
14
  "rehype-katex": "^7.0.0",
src/index.js CHANGED
@@ -53,7 +53,7 @@ async function initializeWebLLMEngine() {
53
  const frequency_penalty = parseFloat(document.getElementById("frequency_penalty").value);
54
 
55
  document.getElementById("download-status").classList.remove("hidden");
56
- const selectedModel = `Qwen2.5-${model_size}-Instruct-${quantization}-MLC`;
57
  const config = {
58
  temperature,
59
  top_p,
@@ -175,19 +175,38 @@ async function updateLastMessage(content) {
175
  }
176
 
177
  /*************** UI binding ***************/
178
- document.getElementById("download").addEventListener("click", function () {
179
- document.getElementById("send").disabled = true;
180
- initializeWebLLMEngine().then(() => {
181
- document.getElementById("send").disabled = false;
 
 
182
  });
183
- });
184
- document.getElementById("send").addEventListener("click", function () {
185
- onMessageSend();
186
- });
187
- document.getElementById("user-input").addEventListener("keydown", (event) => {
188
- if (event.key === "Enter") {
189
  onMessageSend();
190
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
191
  });
192
 
193
  window.onload = function () {
 
53
  const frequency_penalty = parseFloat(document.getElementById("frequency_penalty").value);
54
 
55
  document.getElementById("download-status").classList.remove("hidden");
56
+ const selectedModel = `Llama-3.2-${model_size}-Instruct-${quantization}-MLC`;
57
  const config = {
58
  temperature,
59
  top_p,
 
175
  }
176
 
177
  /*************** UI binding ***************/
178
+ document.addEventListener('DOMContentLoaded', function() {
179
+ document.getElementById("download").addEventListener("click", function () {
180
+ document.getElementById("send").disabled = true;
181
+ initializeWebLLMEngine().then(() => {
182
+ document.getElementById("send").disabled = false;
183
+ });
184
  });
185
+ document.getElementById("send").addEventListener("click", function () {
 
 
 
 
 
186
  onMessageSend();
187
+ });
188
+ document.getElementById("user-input").addEventListener("keydown", (event) => {
189
+ if (event.key === "Enter") {
190
+ onMessageSend();
191
+ }
192
+ });
193
+
194
+ document.getElementById('model_size').addEventListener('change', function() {
195
+ const quantizationSelect = document.getElementById('quantization');
196
+ const selectedSize = document.getElementById('model_size').value;
197
+ const q0Options = Array.from(quantizationSelect.options).filter(option =>
198
+ option.value === 'q0f32' || option.value === 'q0f16'
199
+ );
200
+
201
+ if (selectedSize === '3B') {
202
+ q0Options.forEach(option => option.style.display = 'none');
203
+ } else {
204
+ q0Options.forEach(option => option.style.display = '');
205
+ }
206
+ if (quantizationSelect.selectedOptions[0].style.display === 'none') {
207
+ quantizationSelect.value = quantizationSelect.options[0].value;
208
+ }
209
+ });
210
  });
211
 
212
  window.onload = function () {
yarn.lock CHANGED
@@ -984,10 +984,10 @@
984
  "@jridgewell/resolve-uri" "^3.1.0"
985
  "@jridgewell/sourcemap-codec" "^1.4.14"
986
 
987
- "@mlc-ai/web-llm@^0.2.63":
988
- version "0.2.63"
989
- resolved "https://registry.yarnpkg.com/@mlc-ai/web-llm/-/web-llm-0.2.63.tgz#73d2871081fbcf088ce70ec29f08351b9889981e"
990
- integrity sha512-X4xy3cS9Xh/UR//FU07eqcLdeGyMLTwLNF8pbIgJok8IJvzeigLqFXCGktGHf6HLlFRWE7A6+jVCjq1Iw4cGeA==
991
  dependencies:
992
  loglevel "^1.9.1"
993
 
 
984
  "@jridgewell/resolve-uri" "^3.1.0"
985
  "@jridgewell/sourcemap-codec" "^1.4.14"
986
 
987
+ "@mlc-ai/web-llm@^0.2.67":
988
+ version "0.2.67"
989
+ resolved "https://registry.yarnpkg.com/@mlc-ai/web-llm/-/web-llm-0.2.67.tgz#ab6ea18fed10d129f1a9d234606ae909e0966a5e"
990
+ integrity sha512-aS2uMKSvgj2qNc2441W4TQBUOOj5GdYHivq77XwU1V8YggibQDbPu6Fqwwj410RIVLPFXBfEOIJH0Bsf4Q7klQ==
991
  dependencies:
992
  loglevel "^1.9.1"
993