webllm-llama-3.2-chat

Running

App Files Files Community

neetnestor commited on Aug 23

Commit

bba96cd

•

1 Parent(s): 484e5a2

feat: update design for Phi-3.5 specifically

Browse files

Files changed (7) hide show

dist/index.js +0 -0
index.html +106 -16
package-lock.json +0 -0
package.json +1 -1
src/index.js +17 -15
styles/style.css +31 -19
yarn.lock +0 -0

dist/index.js CHANGED Viewed

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

index.html CHANGED Viewed

@@ -3,31 +3,121 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
-    <title>WebLLM Simple Chat Space</title>
     <link rel="stylesheet" href="styles/katex.min.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
     <link rel="stylesheet" href="styles/style.css" />
   </head>
   <body>
     <main>
-      <h1>WebLLM Simple Chat Space</h1>
       <p>
-        This is a minimal demo app showcasing how WebLLM enables AI chat
-        directly in your local browser. You might also enjoy exploring
-        <a
-          href="https://chat.webllm.ai/"
-          rel="nofollow noopener noreferrer"
-          target="_blank"
-          style="display: inline;"
-          >WebLLM Chat</a
-        >!
       </p>
-      <h2>Step 1: Initialize WebLLM and Download Model</h2>
-      <div class="download-container">
-        <select id="model-selection"></select>
         <button id="download">Download</button>
       </div>
       <p id="download-status" class="hidden"></p>

   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
+    <title>WebLLM Phi 3.5 Chat</title>
     <link rel="stylesheet" href="styles/katex.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
+    />
     <link rel="stylesheet" href="styles/style.css" />
   </head>
   <body>
     <main>
+      <h1>WebLLM Phi 3.5 Chat</h1>
       <p>
+        This space enables AI chat with Phi 3.5 models directly in your local
+        browser, empowered by WebLLM.
       </p>
+      <h2>Step 1: Configure And Download Model</h2>
+      <div class="card vertical">
+        <form class="configure-form">
+          <!-- Quantization -->
+          <div class="form-group">
+            <label for="quantization">Quantization:</label>
+            <select id="quantization" name="quantization">
+              <option value="q4f16">q4f16</option>
+              <option value="q4f32">q4f32</option>
+            </select>
+          </div>
+          <!-- Context Window -->
+          <div class="form-group">
+            <label for="context">Context Window:</label>
+            <select id="context" name="context">
+              <option value="1k">1024</option>
+              <option value="">4096</option>
+            </select>
+          </div>
+          <!-- Temperature -->
+          <div class="form-group">
+            <label for="temperature"
+              >Temperature:
+              <span id="temperature-value" class="range-value">1.00</span></label
+            >
+            <input
+              type="range"
+              id="temperature"
+              name="temperature"
+              min="0.0"
+              max="1.0"
+              step="0.01"
+              value="1.0"
+              oninput="document.getElementById('temperature-value').textContent = Number(this.value).toFixed(2)"
+            />
+          </div>
+          <!-- Top-p -->
+          <div class="form-group">
+            <label for="top_p"
+              >Top-p:
+              <span id="top_p-value" class="range-value">0.90</span></label
+            >
+            <input
+              type="range"
+              id="top_p"
+              name="top_p"
+              min="0.0"
+              max="1.0"
+              step="0.01"
+              value="0.0"
+              oninput="document.getElementById('top_p-value').textContent = Number(this.value).toFixed(2)"
+            />
+          </div>
+          <!-- Presence Penalty -->
+          <div class="form-group">
+            <label for="presence_penalty"
+              >Presence Penalty:
+              <span id="presence_penalty-value" class="range-value"
+                >0.00</span
+              ></label
+            >
+            <input
+              type="range"
+              id="presence_penalty"
+              name="presence_penalty"
+              min="0.0"
+              max="1.0"
+              step="0.01"
+              value="0.0"
+              oninput="document.getElementById('presence_penalty-value').textContent = Number(this.value).toFixed(2)"
+            />
+          </div>
+          <!-- Frequency Penalty -->
+          <div class="form-group">
+            <label for="frequency_penalty"
+              >Frequency Penalty:
+              <span id="frequency_penalty-value" class="range-value"
+                >0.00</span
+              ></label
+            >
+            <input
+              type="range"
+              id="frequency_penalty"
+              name="frequency_penalty"
+              min="0.0"
+              max="1.0"
+              step="0.01"
+              value="0.0"
+              oninput="document.getElementById('frequency_penalty-value').textContent = Number(this.value).toFixed(2)"
+            />
+          </div>
+        </form>
         <button id="download">Download</button>
       </div>
       <p id="download-status" class="hidden"></p>

package-lock.json ADDED Viewed

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

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.56",
     "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.62",
     "katex": "^0.16.11",
     "rehype-highlight": "^7.0.0",
     "rehype-katex": "^7.0.0",

src/index.js CHANGED Viewed

@@ -31,11 +31,6 @@ const messages = [
   },
 ];
-const availableModels = webllm.prebuiltAppConfig.model_list.map(
-  (m) => m.model_id
-);
-let selectedModel = "Llama-3.1-8B-Instruct-q4f32_1-MLC-1k";
 // Callback function for initializing progress
 function updateEngineInitProgressCallback(report) {
   console.log("initialize", report.progress);
@@ -48,12 +43,26 @@ const engine = new webllm.MLCEngine();
 engine.setInitProgressCallback(updateEngineInitProgressCallback);
 async function initializeWebLLMEngine() {
   document.getElementById("download-status").classList.remove("hidden");
-  selectedModel = document.getElementById("model-selection").value;
   const config = {
-    temperature: 1.0,
-    top_p: 1,
   };
   await engine.reload(selectedModel, config);
   modelLoaded = true;
 }
@@ -166,13 +175,6 @@ async function updateLastMessage(content) {
 }
 /*************** UI binding ***************/
-availableModels.forEach((modelId) => {
-  const option = document.createElement("option");
-  option.value = modelId;
-  option.textContent = modelId;
-  document.getElementById("model-selection").appendChild(option);
-});
-document.getElementById("model-selection").value = selectedModel;
 document.getElementById("download").addEventListener("click", function () {
   initializeWebLLMEngine().then(() => {
     document.getElementById("send").disabled = false;

   },
 ];
 // Callback function for initializing progress
 function updateEngineInitProgressCallback(report) {
   console.log("initialize", report.progress);
 engine.setInitProgressCallback(updateEngineInitProgressCallback);
 async function initializeWebLLMEngine() {
+  const quantization = document.getElementById("quantization").value;
+  const context_window = document.getElementById("context").value;
+  const temperature = document.getElementById("temperature").value;
+  const top_p = document.getElementById("top_p").value;
+  const presence_penalty = document.getElementById("presence_penalty").value;
+  const frequency_penalty = document.getElementById("frequency_penalty").value;
   document.getElementById("download-status").classList.remove("hidden");
+  let selectedModel = `Phi-3.5-mini-instruct-${quantization}_1-MLC`;
+  if (context_window) {
+    selectedModel += "-" + context_window;
+  }
   const config = {
+    temperature,
+    top_p,
+    frequency_penalty,
+    presence_penalty,
   };
+  console.log(`Loading Model: ${selectedModel}`);
+  console.log(`Config: ${Object.toString(config)}`);
   await engine.reload(selectedModel, config);
   modelLoaded = true;
 }
 }
 /*************** UI binding ***************/
 document.getElementById("download").addEventListener("click", function () {
   initializeWebLLMEngine().then(() => {
     document.getElementById("send").disabled = false;

styles/style.css CHANGED Viewed

@@ -12,29 +12,18 @@ h1 {
 }
 h2 {
-  font-size: 1rem;
 }
 main {
   padding: 2rem;
-  max-width: 48rem;
-  height: max(calc(100dvh - 4rem), 800px);
   margin-left: auto;
   margin-right: auto;
   display: flex;
   flex-direction: column;
 }
-.download-container {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-.download-container select {
-  padding: .5rem;
-}
 #download-status {
   border: solid 1px black;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
@@ -43,7 +32,7 @@ main {
 }
 .chat-container {
-  height: 400px;
   width: 100%;
   border: 2px solid black;
   display: flex;
@@ -177,18 +166,41 @@ button:hover:not(:disabled) {
   color: rgb(0, 0, 0);
 }
 .message pre code.hljs {
   background: #ffffff;
   border-radius: 10px;
 }
 @media only screen and (max-width: 600px) {
   .card {
     flex-direction: column;
   }
-  .download-container {
-    flex-direction: column;
-    gap: 1rem;
-  }
 }

 }
 h2 {
+  font-size: 1.2rem;
 }
 main {
   padding: 2rem;
+  max-width: 70rem;
   margin-left: auto;
   margin-right: auto;
   display: flex;
   flex-direction: column;
 }
 #download-status {
   border: solid 1px black;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 }
 .chat-container {
+  height: calc(100dvh - 100px);
   width: 100%;
   border: 2px solid black;
   display: flex;
   color: rgb(0, 0, 0);
 }
+.card.vertical {
+  flex-direction: column;
+}
 .message pre code.hljs {
   background: #ffffff;
   border-radius: 10px;
 }
+.configure-form {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.configure-form .form-group {
+  margin-bottom: 15px;
+}
+.configure-form label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+.configure-form input[type="range"] {
+  width: 100%;
+}
+.configure-form select, .configure-form input[type="range"], .configure-form input[type="number"] {
+  padding: 5px;
+  font-size: 1rem;
+  width: 100%;
+  box-sizing: border-box;
+}
 @media only screen and (max-width: 600px) {
   .card {
     flex-direction: column;
   }
 }

yarn.lock CHANGED Viewed

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