webllm-llama-3.2-chat

Running

App Files Files Community

neetnestor commited on Sep 26, 2024

Commit

2819fb4

1 Parent(s): 31b8158

feat: clone with llama 3.2 models

Browse files

Files changed (6) hide show

README.md +2 -2
dist/index.js +0 -0
index.html +8 -8
package.json +1 -1
src/index.js +31 -12
yarn.lock +4 -4

README.md CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-title: Webllm Qwen 2.5 Chat
 emoji: 💬
 colorFrom: indigo
 colorTo: purple
@@ -8,4 +8,4 @@ pinned: false
 license: apache-2.0
 ---
-A space to chat with Qwen 2.5 running locally in your browser, powered by [WebLLM](https://github.com/mlc-ai/web-llm/).

 ---
+title: Webllm Llama 3.2 Chat
 emoji: 💬
 colorFrom: indigo
 colorTo: purple
 license: apache-2.0
 ---
+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 Viewed

The diff for this file is too large to render. See raw diff

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
-    <title>WebLLM Qwen 2.5 Chat</title>
     <link rel="stylesheet" href="styles/katex.min.css" />
     <link
       rel="stylesheet"
@@ -14,9 +14,9 @@
   <body>
     <main>
-      <h1>WebLLM Qwen 2.5 Chat</h1>
       <p>
-        This space enables AI chat with Qwen 2.5 models directly in your local
         browser, empowered by WebLLM.
       </p>
@@ -26,20 +26,20 @@
           <!-- Model Size -->
           <div class="form-group">
             <label for="model_size">Model Size:</label>
-            <select id="model_size" name="model_size">
-              <option value="0.5B">0.5B</option>
-              <option value="1.5B">1.5B</option>
               <option value="3B">3B</option>
-              <option value="7B">7B</option>
             </select>
           </div>
           <!-- Quantization -->
           <div class="form-group">
             <label for="quantization">Quantization:</label>
-            <select id="quantization" name="quantization">
               <option value="q4f16_1">q4f16</option>
               <option value="q4f32_1">q4f32</option>
             </select>
           </div>

   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
+    <title>WebLLM Llama 3.2 Chat</title>
     <link rel="stylesheet" href="styles/katex.min.css" />
     <link
       rel="stylesheet"
   <body>
     <main>
+      <h1>WebLLM Llama 3.2 Chat</h1>
       <p>
+        This space enables AI chat with Llama 3.2 models directly in your local
         browser, empowered by WebLLM.
       </p>
           <!-- Model Size -->
           <div class="form-group">
             <label for="model_size">Model Size:</label>
+            <select id="model_size" name="model_size" value="1B">
+              <option value="1B">1B</option>
               <option value="3B">3B</option>
             </select>
           </div>
           <!-- Quantization -->
           <div class="form-group">
             <label for="quantization">Quantization:</label>
+            <select id="quantization" name="quantization" value="q4f16_1">
               <option value="q4f16_1">q4f16</option>
               <option value="q4f32_1">q4f32</option>
+              <option value="q0f32">q0f32</option>
+              <option value="q0f16">q0f16</option>
             </select>
           </div>

package.json CHANGED Viewed

@@ -8,7 +8,7 @@
   "dependencies": {
     "@babel/core": "^7.13.15",
     "@babel/preset-env": "^7.13.15",
-    "@mlc-ai/web-llm": "^0.2.63",
     "katex": "^0.16.11",
     "rehype-highlight": "^7.0.0",
     "rehype-katex": "^7.0.0",

   "dependencies": {
     "@babel/core": "^7.13.15",
     "@babel/preset-env": "^7.13.15",
+    "@mlc-ai/web-llm": "^0.2.67",
     "katex": "^0.16.11",
     "rehype-highlight": "^7.0.0",
     "rehype-katex": "^7.0.0",

src/index.js CHANGED Viewed

@@ -53,7 +53,7 @@ async function initializeWebLLMEngine() {
   const frequency_penalty = parseFloat(document.getElementById("frequency_penalty").value);
   document.getElementById("download-status").classList.remove("hidden");
-  const selectedModel = `Qwen2.5-${model_size}-Instruct-${quantization}-MLC`;
   const config = {
     temperature,
     top_p,
@@ -175,19 +175,38 @@ async function updateLastMessage(content) {
 }
 /*************** UI binding ***************/
-document.getElementById("download").addEventListener("click", function () {
-  document.getElementById("send").disabled = true;
-  initializeWebLLMEngine().then(() => {
-    document.getElementById("send").disabled = false;
   });
-});
-document.getElementById("send").addEventListener("click", function () {
-  onMessageSend();
-});
-document.getElementById("user-input").addEventListener("keydown", (event) => {
-  if (event.key === "Enter") {
     onMessageSend();
-  }
 });
 window.onload = function () {

   const frequency_penalty = parseFloat(document.getElementById("frequency_penalty").value);
   document.getElementById("download-status").classList.remove("hidden");
+  const selectedModel = `Llama-3.2-${model_size}-Instruct-${quantization}-MLC`;
   const config = {
     temperature,
     top_p,
 }
 /*************** UI binding ***************/
+document.addEventListener('DOMContentLoaded', function() {
+  document.getElementById("download").addEventListener("click", function () {
+    document.getElementById("send").disabled = true;
+    initializeWebLLMEngine().then(() => {
+      document.getElementById("send").disabled = false;
+    });
   });
+  document.getElementById("send").addEventListener("click", function () {
     onMessageSend();
+  });
+  document.getElementById("user-input").addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      onMessageSend();
+    }
+  });
+  document.getElementById('model_size').addEventListener('change', function() {
+    const quantizationSelect = document.getElementById('quantization');
+    const selectedSize = document.getElementById('model_size').value;
+    const q0Options = Array.from(quantizationSelect.options).filter(option =>
+      option.value === 'q0f32' || option.value === 'q0f16'
+    );
+    if (selectedSize === '3B') {
+      q0Options.forEach(option => option.style.display = 'none');
+    } else {
+      q0Options.forEach(option => option.style.display = '');
+    }
+    if (quantizationSelect.selectedOptions[0].style.display === 'none') {
+      quantizationSelect.value = quantizationSelect.options[0].value;
+    }
+  });
 });
 window.onload = function () {

yarn.lock CHANGED Viewed

@@ -984,10 +984,10 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
-"@mlc-ai/web-llm@^0.2.63":
-  version "0.2.63"
-  resolved "https://registry.yarnpkg.com/@mlc-ai/web-llm/-/web-llm-0.2.63.tgz#73d2871081fbcf088ce70ec29f08351b9889981e"
-  integrity sha512-X4xy3cS9Xh/UR//FU07eqcLdeGyMLTwLNF8pbIgJok8IJvzeigLqFXCGktGHf6HLlFRWE7A6+jVCjq1Iw4cGeA==
   dependencies:
     loglevel "^1.9.1"

     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
+"@mlc-ai/web-llm@^0.2.67":
+  version "0.2.67"
+  resolved "https://registry.yarnpkg.com/@mlc-ai/web-llm/-/web-llm-0.2.67.tgz#ab6ea18fed10d129f1a9d234606ae909e0966a5e"
+  integrity sha512-aS2uMKSvgj2qNc2441W4TQBUOOj5GdYHivq77XwU1V8YggibQDbPu6Fqwwj410RIVLPFXBfEOIJH0Bsf4Q7klQ==
   dependencies:
     loglevel "^1.9.1"