Add sample code

Author: smalinin

README.md

@@ -1,2 +1,35 @@
 # WebLLM-Tools-Sample
 Sample of using tools with WebLLM
+
+```js
+const tools = [
+  {
+    type: "function",
+    function: {
+      name: "fetch_wikipedia_content",
+      description: "Search Wikipedia and fetch the introduction of the most relevant article. "+
+                   "Always use this if the user is asking for something that is likely on wikipedia. "+
+                   "If the user has a typo in their search query, correct it before searching.",
+      parameters: {
+        type: "object",
+        properties: {
+            type: "object",
+            properties: {
+                search_query: {
+                    type: "string",
+                    description: "Search query for finding the Wikipedia article"
+                }
+            },
+        },
+        required: ["search_query"],
+      },
+    },
+  },
+  ];
+```
+
+Sample of using tool calls with Web LLM.
+Now sample supports only Qwen2.5-* LLM models
+
+Main testing was with `Qwen2.5-3B-Instruct-q1416_1-MLC` https://huggingface.co/mlc-ai/Qwen2.5-3B-Instruct-q4f16_1-MLC
+

src/index.css

@@ -0,0 +1,244 @@
+body,
+html {
+  font-family: Arial, sans-serif;
+  padding: 10px 20px;
+}
+
+.textarea {
+  display: block;
+  width: 100%;
+  min-height: 30px;
+  line-height: 20px;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 1px 6px;
+  overflow: auto;
+}
+
+.download-container {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+#download-status {
+  border: solid 1px black;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  padding: 10px;
+}
+
+.chat-container {
+  height: 600px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-box {
+  overflow-y: scroll;
+  background-color: #c3c3c3;
+//  border: 1px solid #ccc;
+  border: 2px solid black;
+  padding: 5px;
+  flex: 1 1;
+}
+
+.chat-stats {
+  background-color: #d3eceb;
+  flex: 0 0;
+  padding: 10px;
+  font-size: 0.75rem;
+}
+
+.message-container {
+  width: 100%;
+  display: flex;
+}
+
+.message {
+  padding: 10px;
+  margin: 10px 0;
+  border-radius: 10px;
+  width: fit-content;
+}
+
+
+.message-container.assistant {
+  justify-content: start;
+}
+
+.message-container.user .message {
+  background: #007bff;
+  color: #fff;
+}
+
+.message-container.assistant .message {
+  background: #f1f0f0;
+  color: #333;
+}
+
+.chat-input-container {
+  min-height: 40px;
+  flex: 0 0;
+  display: flex;
+}
+
+#user-input {
+  padding: 5px;
+  border: 2px solid black;
+  margin-right: 5px;
+}
+
+button {
+  width: 25%;
+  padding: 10px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+}
+
+button:disabled {
+  background-color: lightgray;
+  cursor: not-allowed;
+}
+
+button:hover:not(:disabled) {
+  background-color: #0056b3;
+}
+
+.hidden {
+  display: none;
+}
+
+@scope (.markdown) {
+  /* Code blocks */
+  pre {
+    margin: 0.5rem 0;
+    white-space: break-spaces;
+  }
+
+  code {
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 0.9em;
+  }
+
+  pre,
+  code {
+    background-color: #f2f2f2;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    pre,
+    code {
+      background-color: #333;
+    }
+  }
+
+  pre:has(code) {
+    padding: 1rem 0.5rem;
+  }
+
+  pre > code {
+    padding: 0;
+  }
+
+  /* Headings */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+    line-height: 1.2;
+  }
+
+  h1 {
+    font-size: 2em;
+    margin: 1rem 0;
+  }
+
+  h2 {
+    font-size: 1.5em;
+    margin: 0.83rem 0;
+  }
+
+  h3 {
+    font-size: 1.25em;
+    margin: 0.67rem 0;
+  }
+
+  h4 {
+    font-size: 1em;
+    margin: 0.5rem 0;
+  }
+
+  h5 {
+    font-size: 0.875em;
+    margin: 0.33rem 0;
+  }
+
+  h6 {
+    font-size: 0.75em;
+    margin: 0.25rem 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6:first-child {
+    margin-top: 0;
+  }
+
+  /* Unordered List */
+  ul {
+    list-style-type: disc;
+    margin-left: 1.5rem;
+  }
+
+  /* Ordered List */
+  ol {
+    list-style-type: decimal;
+    margin-left: 1.5rem;
+  }
+
+  /* List Items */
+  li {
+    margin: 0.25rem 0;
+  }
+
+  p:not(:first-child) {
+    margin-top: 0.75rem;
+  }
+
+  p:not(:last-child) {
+    margin-bottom: 0.75rem;
+  }
+
+  ul > li {
+    margin-left: 1rem;
+  }
+
+  /* Table */
+  table,
+  th,
+  td {
+    border: 1px solid lightgray;
+    padding: 0.25rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    table,
+    th,
+    td {
+      border: 1px solid #f2f2f2;
+    }
+  }
+}

src/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Simple Chatbot</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./index.css" />
+  </head>
+
+  <body>
+    <p>Step 1: Initialize WebLLM and Download Model</p>
+    <div class="download-container">
+      <select id="model-selection"></select>
+      <button id="download">Download</button>
+    </div>
+    <p id="download-status" class="hidden"></p>
+
+    <p>Step 2: Chat</p>
+    <div class="chat-container">
+      <div id="chat-box" class="chat-box"></div>
+      <div style="display:flex; width:100%; min-height:40px; margin-top:10px">
+        <span id="user-input" class="textarea" role="textbox" contenteditable placeholder="Type a message..."></span>
+        <button id="send" style="width:100px; height:40px" disabled>Send</button>
+      </div>
+      <div id="chat-stats" class="chat-stats hidden"></div>
+    </div>
+
+    <script src="./index.js" type="module"></script>
+  </body>
+</html>