feat: enter key to send

index.js

@@ -9,7 +9,7 @@ const messages = [
 ];
 
 const availableModels = webllm.prebuiltAppConfig.model_list.map(
-  (m) => m.model_id,
+  (m) => m.model_id
 );
 let selectedModel = "Llama-3.1-8B-Instruct-q4f32_1-1k";
 
@@ -20,6 +20,7 @@ function updateEngineInitProgressCallback(report) {
 }
 
 // Create engine instance
+let modelLoaded = false;
 const engine = new webllm.MLCEngine();
 engine.setInitProgressCallback(updateEngineInitProgressCallback);
 
@@ -31,6 +32,7 @@ async function initializeWebLLMEngine() {
     top_p: 1,
   };
   await engine.reload(selectedModel, config);
+  modelLoaded = true;
 }
 
 async function streamingGenerating(messages, onUpdate, onFinish, onError) {
@@ -61,6 +63,9 @@ async function streamingGenerating(messages, onUpdate, onFinish, onError) {
 
 /*************** UI logic ***************/
 function onMessageSend() {
+  if (!modelLoaded) {
+    return;
+  }
   const input = document.getElementById("user-input").value.trim();
   const message = {
     content: input,
@@ -95,13 +100,17 @@ function onMessageSend() {
       `decoding: ${usage.extra.decode_tokens_per_s.toFixed(4)} tokens/sec`;
     document.getElementById("chat-stats").classList.remove("hidden");
     document.getElementById("chat-stats").textContent = usageText;
+
+    document
+      .getElementById("user-input")
+      .setAttribute("placeholder", "Type a message...");
   };
 
   streamingGenerating(
     messages,
     updateLastMessage,
     onFinishGenerating,
-    console.error,
+    console.error
   );
 }
 
@@ -148,3 +157,8 @@ document.getElementById("download").addEventListener("click", function () {
 document.getElementById("send").addEventListener("click", function () {
   onMessageSend();
 });
+document.getElementById("user-input").addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    onMessageSend();
+  }
+});