Web add reset (mlc-ai#8)

markusbkk · Apr 14, 2023 · 4edf859 · 4edf859
1 parent 310aea3
commit 4edf859
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 6 deletions.
diff --git a/site/_includes/llm_chat.html b/site/_includes/llm_chat.html
@@ -35,3 +35,7 @@ <h2>Chat</h2>
     <button class="chatui-send-btn" onclick="tvmjsGlobalEnv.asyncOnGenerate()">Send</button>
   </div>
 </div>
+
+<div class="chatui-extra-control">
+  <button class="chatui-reset-btn" onclick="tvmjsGlobalEnv.asyncOnReset()">Reset</button>
+</div>
diff --git a/web/gh-page-config.json b/web/gh-page-config.json
@@ -0,0 +1,13 @@
+{
+    "kvConfig": {
+        "numLayers": 64,
+        "shape": [32, 32, 128],
+        "dtype": "float32"
+    },
+    "wasmUrl": "dist/vicuna-7b/vicuna-7b_webgpu.wasm",
+    "cacheUrl": "https://huggingface.co/mlc-ai/web-lm/resolve/main/vicuna-v0/",
+    "tokenizer": "dist/vicuna-7b/tokenizer.model",
+    "maxGenLength": 512,
+    "meanGenLength": 128,
+    "maxWindowLength": 2048
+}
diff --git a/web/llm_chat.css b/web/llm_chat.css
@@ -97,17 +97,30 @@
    background: #ddd;
  }
 
- .chatui-send-btn {
+ .chatui-reset-btn {
    margin-left: 10px;
-   background: #579ffb;
-   color: #fff;
+   background: #ececec;
    font-weight: bold;
+   border-radius: 8px;
+   width: 200px;
    cursor: pointer;
  }
 
- .chatui-send-btn:hover {
-   background: #577bfb;
- }
+ .chatui-reset-btn:hover {
+  background: #dcdada;
+}
+
+ .chatui-send-btn {
+  margin-left: 10px;
+  background: #579ffb;
+  color: #fff;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.chatui-send-btn:hover {
+  background: #577bfb;
+}
 
  .chatui-chat {
    background-color: #fcfcfe;

diff --git a/web/llm_chat.html b/web/llm_chat.html
@@ -35,3 +35,7 @@ <h2>Chat</h2>
     <button class="chatui-send-btn" onclick="tvmjsGlobalEnv.asyncOnGenerate()">Send</button>
   </div>
 </div>
+
+<div class="chatui-extra-control">
+  <button class="chatui-reset-btn" onclick="tvmjsGlobalEnv.asyncOnReset()">Reset</button>
+</div>
diff --git a/web/llm_chat.js b/web/llm_chat.js
@@ -36,6 +36,10 @@ class Conversation {
     return ret;
   }
 
+  reset() {
+    this.messages = [];
+  }
+
   getStopStr() {
     return this.seps[this.seps.length - 1];
   }
@@ -231,6 +235,11 @@ class LLMChatPipeline {
     return tokens;
   }
 
+  resetChat() {
+    this.conversation.reset();
+    this.#clearKVCache();
+  }
+
   async generate(inputPrompt, callbackUpdateResponse) {
     this.conversation.appendMessage(this.conversation.roles[0], inputPrompt);
     this.conversation.appendMessage(this.conversation.roles[1], "");
@@ -487,6 +496,18 @@ class LLMChatInstance {
     }
   }
 
+  resetChat() {
+    if (this.requestInProgress) return;
+    const clearTags = ["left", "right"];
+    for (const tag of clearTags) {
+      const matches = this.uiChat.getElementsByClassName(`msg ${tag}-msg`);
+      for (const item of matches) {
+        item.remove();
+      }
+    }
+    this.pipeline.resetChat();
+  }
+
   /**
    * Run generate
    */
@@ -561,3 +582,7 @@ localLLMChatIntance = new LLMChatInstance();
 tvmjsGlobalEnv.asyncOnGenerate = async function () {
   await localLLMChatIntance.generate();
 };
+
+tvmjsGlobalEnv.asyncOnReset = async function () {
+  await localLLMChatIntance.resetChat();
+};