Hugging Face's logo

Spaces:
neetnestor
/
WebLLM-Simple-Chatbot
Running

App Files Community
neetnestor commited on
Commit
77ac952
•
1 Parent(s): 74bae1b

Add examples/simple-chat-js

Browse files
Files changed (4) hide show
  1. README.md +1 -1
  2. index.html +24 -8
  3. index.js +142 -0
  4. style.css +114 -14
README.md CHANGED
@@ -8,4 +8,4 @@ pinned: false
8
  license: apache-2.0
9
  ---
10
 
11
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
8
  license: apache-2.0
9
  ---
10
 
11
+ A simple chatbot webapp built with WebLLM. Check https://github.com/mlc-ai/web-llm for details.
index.html CHANGED
@@ -3,17 +3,33 @@
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
  <link rel="stylesheet" href="style.css" />
8
  </head>
9
  <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  </div>
 
 
 
18
  </body>
19
  </html>
 
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width" />
6
+ <title>Simple Chatbot with WebLLM</title>
7
  <link rel="stylesheet" href="style.css" />
8
  </head>
9
  <body>
10
+ <p>
11
+ Step 1: Initialize WebLLM and Download Model
12
+ </p>
13
+ <div class="download-container">
14
+ <select id="model-selection"></select>
15
+ <button id="download">
16
+ Download
17
+ </button>
18
+ </div>
19
+ <p id="download-status" class="hidden"></p>
20
+
21
+ <p>
22
+ Step 2: Chat
23
+ </p>
24
+ <div class="chat-container">
25
+ <div id="chat-box" class="chat-box"></div>
26
+ <div id="chat-stats" class="chat-stats hidden"></div>
27
+ <div class="chat-input-container">
28
+ <input type="text" id="user-input" placeholder="Type a message..." />
29
+ <button id="send" disabled>Send</button>
30
  </div>
31
+ </div>
32
+
33
+ <script src="./index.js" type="module"></script>
34
  </body>
35
  </html>
index.js ADDED
@@ -0,0 +1,142 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as webllm from "https://esm.run/@mlc-ai/web-llm";
2
+
3
+ /*************** WebLLM logic ***************/
4
+ const messages = [
5
+ {
6
+ content: "You are a helpful AI agent helping users.",
7
+ role: "system",
8
+ },
9
+ ];
10
+
11
+ const availableModels = webllm.prebuiltAppConfig.model_list.map(
12
+ (m) => m.model_id,
13
+ );
14
+ let selectedModel = "Llama-3-8B-Instruct-q4f32_1-MLC-1k";
15
+
16
+ // Callback function for initializing progress
17
+ function updateEngineInitProgressCallback(report) {
18
+ console.log("initialize", report.progress);
19
+ document.getElementById("download-status").textContent = report.text;
20
+ }
21
+
22
+ // Create engine instance
23
+ const engine = new webllm.MLCEngine();
24
+ engine.setInitProgressCallback(updateEngineInitProgressCallback);
25
+
26
+ async function initializeWebLLMEngine() {
27
+ document.getElementById("download-status").classList.remove("hidden");
28
+ selectedModel = document.getElementById("model-selection").value;
29
+ const config = {
30
+ temperature: 1.0,
31
+ top_p: 1,
32
+ };
33
+ await engine.reload(selectedModel, config);
34
+ }
35
+
36
+ async function streamingGenerating(messages, onUpdate, onFinish, onError) {
37
+ try {
38
+ let curMessage = "";
39
+ const completion = await engine.chat.completions.create({
40
+ stream: true,
41
+ messages,
42
+ });
43
+ for await (const chunk of completion) {
44
+ const curDelta = chunk.choices[0].delta.content;
45
+ if (curDelta) {
46
+ curMessage += curDelta;
47
+ }
48
+ onUpdate(curMessage);
49
+ }
50
+ const finalMessage = await engine.getMessage();
51
+ onFinish(finalMessage);
52
+ } catch (err) {
53
+ onError(err);
54
+ }
55
+ }
56
+
57
+ /*************** UI logic ***************/
58
+ function onMessageSend() {
59
+ const input = document.getElementById("user-input").value.trim();
60
+ const message = {
61
+ content: input,
62
+ role: "user",
63
+ };
64
+ if (input.length === 0) {
65
+ return;
66
+ }
67
+ document.getElementById("send").disabled = true;
68
+
69
+ messages.push(message);
70
+ appendMessage(message);
71
+
72
+ document.getElementById("user-input").value = "";
73
+ document
74
+ .getElementById("user-input")
75
+ .setAttribute("placeholder", "Generating...");
76
+
77
+ const aiMessage = {
78
+ content: "typing...",
79
+ role: "assistant",
80
+ };
81
+ appendMessage(aiMessage);
82
+
83
+ const onFinishGenerating = (finalMessage) => {
84
+ updateLastMessage(finalMessage);
85
+ document.getElementById("send").disabled = false;
86
+ engine.runtimeStatsText().then(statsText => {
87
+ document.getElementById('chat-stats').classList.remove('hidden');
88
+ document.getElementById('chat-stats').textContent = statsText;
89
+ })
90
+ };
91
+
92
+ streamingGenerating(
93
+ messages,
94
+ updateLastMessage,
95
+ onFinishGenerating,
96
+ console.error,
97
+ );
98
+ }
99
+
100
+ function appendMessage(message) {
101
+ const chatBox = document.getElementById("chat-box");
102
+ const container = document.createElement("div");
103
+ container.classList.add("message-container");
104
+ const newMessage = document.createElement("div");
105
+ newMessage.classList.add("message");
106
+ newMessage.textContent = message.content;
107
+
108
+ if (message.role === "user") {
109
+ container.classList.add("user");
110
+ } else {
111
+ container.classList.add("assistant");
112
+ }
113
+
114
+ container.appendChild(newMessage);
115
+ chatBox.appendChild(container);
116
+ chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the latest message
117
+ }
118
+
119
+ function updateLastMessage(content) {
120
+ const messageDoms = document
121
+ .getElementById("chat-box")
122
+ .querySelectorAll(".message");
123
+ const lastMessageDom = messageDoms[messageDoms.length - 1];
124
+ lastMessageDom.textContent = content;
125
+ }
126
+
127
+ /*************** UI binding ***************/
128
+ availableModels.forEach((modelId) => {
129
+ const option = document.createElement("option");
130
+ option.value = modelId;
131
+ option.textContent = modelId;
132
+ document.getElementById("model-selection").appendChild(option);
133
+ });
134
+ document.getElementById("model-selection").value = selectedModel;
135
+ document.getElementById("download").addEventListener("click", function () {
136
+ initializeWebLLMEngine().then(() => {
137
+ document.getElementById("send").disabled = false;
138
+ });
139
+ });
140
+ document.getElementById("send").addEventListener("click", function () {
141
+ onMessageSend();
142
+ });
style.css CHANGED
@@ -1,28 +1,128 @@
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
  p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
  .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
  .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
  body {
2
+ padding: 2rem;
3
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
  h1 {
7
+ font-size: 16px;
8
+ margin-top: 0;
9
  }
10
 
11
  p {
12
+ color: rgb(107, 114, 128);
13
+ font-size: 15px;
14
+ margin-bottom: 10px;
15
+ margin-top: 5px;
16
  }
17
 
18
  .card {
19
+ max-width: 620px;
20
+ margin: 0 auto;
21
+ padding: 16px;
22
+ border: 1px solid lightgray;
23
+ border-radius: 16px;
24
  }
25
 
26
  .card p:last-child {
27
+ margin-bottom: 0;
28
+ }
29
+
30
+ .download-container {
31
+ display: flex;
32
+ justify-content: space-between;
33
+ margin-bottom: 20px;
34
+ }
35
+
36
+ #download-status {
37
+ border: solid 1px black;
38
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
39
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
40
+ padding: 10px;
41
+ }
42
+
43
+ .chat-container {
44
+ height: 400px;
45
+ width: 100%;
46
+ border: 2px solid black;
47
+ display: flex;
48
+ flex-direction: column;
49
+ }
50
+
51
+ .chat-box {
52
+ overflow-y: scroll;
53
+ background-color: #c3c3c3;
54
+ border: 1px solid #ccc;
55
+ padding: 5px;
56
+ flex: 1 1;
57
+ }
58
+
59
+ .chat-stats {
60
+ background-color: #d3eceb;
61
+ flex: 0 0;
62
+ padding: 10px;
63
+ font-size: 0.75rem;
64
+ }
65
+
66
+ .message-container {
67
+ width: 100%;
68
+ display: flex;
69
+ }
70
+
71
+ .message {
72
+ padding: 10px;
73
+ margin: 10px 0;
74
+ border-radius: 10px;
75
+ width: fit-content;
76
+ }
77
+
78
+ .message-container.user {
79
+ justify-content: end;
80
+ }
81
+
82
+ .message-container.assistant {
83
+ justify-content: start;
84
+ }
85
+
86
+ .message-container.user .message {
87
+ background: #007bff;
88
+ color: #fff;
89
+ }
90
+
91
+ .message-container.assistant .message {
92
+ background: #f1f0f0;
93
+ color: #333;
94
+ }
95
+
96
+ .chat-input-container {
97
+ min-height: 40px;
98
+ flex: 0 0;
99
+ display: flex;
100
+ }
101
+
102
+ #user-input {
103
+ width: 70%;
104
+ padding: 10px;
105
+ border: 1px solid #ccc;
106
+ }
107
+
108
+ button {
109
+ width: 25%;
110
+ padding: 10px;
111
+ border: none;
112
+ background-color: #007bff;
113
+ color: white;
114
+ cursor: pointer;
115
+ }
116
+
117
+ button:disabled {
118
+ background-color: lightgray;
119
+ cursor: not-allowed;
120
+ }
121
+
122
+ button:hover:not(:disabled) {
123
+ background-color: #0056b3;
124
+ }
125
+
126
+ .hidden {
127
+ display: none;
128
  }