Let’s discover how we can create a genuine chat with a virtual assistant based on an AI model similar to ChatGPT, without having to communicate with a server but entirely within the browser!<\/p>\n\n\n\n
Is it really possible to do this at zero cost entirely client-side with JavaScript? Will we actually get to something \"similar to ChatGPT\"? Are we heading towards a future with offline virtual assistants and total privacy control?<\/pre>\n\n\n\nWe’ll answer these questions with this tutorial dedicated to Transformers.js, focusing on creating a chatbot based on a real LLM model from Huggingface.<\/p>\n\n\n\n
Practical Recipe for an AI-based Chatbot Integrated into a Web Page<\/h2>\n\n\n\n
Requirements<\/h3>\n\n\n\n
This recipe, like the previous one, is designed to be clear and accessible!<\/p>\n\n\n\n
For example, we won’t use any bundler but a simple \/public folder to be served with your favorite web server.<\/p>\n\n\n\n
Ingredients<\/h3>\n\n\n\n
For our webapp, we’ll need three main ingredients corresponding to the four project files we’ll work on:<\/p>\n\n\n
.\/public<\/span>\/\n index.html\n worker.js\n app.js\n style.css<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nMinimalist UI for chat:<\/p>\n\n\n\n
Inside our index.html we’ll have:<\/p>\n\n\n\n
\n
#chat-messages<\/code> where user, virtual assistant, and system messages will appear (with different styles)<\/li>\n\n\n\n#chat-input-container<\/code> to send a message from the keyboard and with a button<\/li>\n<\/ul>\n\n\n\nA web worker (loaded as a module): it will contain our AI model and allow us to query it without blocking the main thread’s user interface.<\/p>\n\n\n\n
The application logic of a classic chat: the user can send their messages, and so will the AI model.<\/p>\n\n\n\n
Preparation<\/h3>\n\n\n\n
A Simple Chat<\/h4>\n\n\n\n
For this experiment, we’ll limit ourselves to a container to host the entire chat with a
#chat-header<\/code>,#chat-messages<\/code>, and#chat-input-container<\/code> inside.<\/p>\n\n\n\nLet’s add everything we need to our index.html:<\/p>\n\n\n
<div<\/span> id<\/span>=\"container\"<\/span>><\/span>\n <div<\/span> id<\/span>=\"chat-container\"<\/span>><\/span>\n <div<\/span> id<\/span>=\"chat-header\"<\/span>><\/span>\n <h2<\/span>><\/span>My first LLM<\/h2<\/span>><\/span>\n <\/div<\/span>><\/span>\n <div<\/span> id<\/span>=\"chat-messages\"<\/span> class<\/span>=\"chat-messages\"<\/span>><\/span>\n <!-- messages will appear here --><\/span>\n <\/div<\/span>><\/span>\n <div<\/span> id<\/span>=\"chat-input-container\"<\/span>><\/span>\n <input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"chat-input\"<\/span> placeholder<\/span>=\"Type your message...\"<\/span>><\/span>\n <button<\/span> id<\/span>=\"send-button\"<\/span> disabled<\/span>><\/span>Send<\/button<\/span>><\/span>\n <\/div<\/span>><\/span>\n <\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nSending and Receiving Messages<\/h4>\n\n\n\n
Now let’s add to our app.js the system for sending messages written by the user in their box. We’ll hook into their sending to send the message to our AI\u2026 but first, let’s create a simple system for sending and receiving messages.<\/p>\n\n\n
document<\/span>.addEventListener(\"DOMContentLoaded\"<\/span>, () => {\n const<\/span> sendButton = document<\/span>.getElementById(\"send-button\"<\/span>);\n const<\/span> chatInput = document<\/span>.getElementById(\"chat-input\"<\/span>);\n const<\/span> chatMessages = document<\/span>.getElementById(\"chat-messages\"<\/span>);\n\n const<\/span> disableUI = ()<\/span> =><\/span> {\n sendButton.setAttribute(\"disabled\"<\/span>, true<\/span>);\n sendButton.innerText = \"...\"<\/span>;\n };\n\n const<\/span> enableUI = ()<\/span> =><\/span> {\n sendButton.removeAttribute(\"disabled\"<\/span>);\n sendButton.innerText = \"Send\"<\/span>;\n };\n\n const<\/span> chat = (text<\/span>) =><\/span> {\n setTimeout(()<\/span> =><\/span> {\n addMessage(\"Hello world\"<\/span>, \"assistant\"<\/span>);\n }, 1000<\/span>);\n };\n\n const<\/span> download = (modelURL<\/span>) =><\/span> {\n disableUI();\n setTimeout(()<\/span> =><\/span> {\n addMessage(\n '<small id=\"downloading-message\">Downloading model...<\/small>'<\/span>,\n \"system\"<\/span>\n );\n }, 1000<\/span>);\n\n setTimeout(()<\/span> =><\/span> {\n addMessage(\n `<small>Model ready! More information here <a href=\"https:\/\/huggingface.co\/${modelURL}<\/span>\" target=\"_blank\">${modelURL}<\/span><\/a><\/small>`<\/span>,\n \"system\"<\/span>\n );\n enableUI();\n }, 2000<\/span>);\n };\n\n const<\/span> addMessage = (message, role<\/span>) =><\/span> {\n const<\/span> newMessageElement = document<\/span>.createElement(\"div\"<\/span>);\n newMessageElement.classList.add(\"chat-message\"<\/span>);\n newMessageElement.classList.add(role);\n\n newMessageElement.innerHTML = message;\n chatMessages.appendChild(newMessageElement);\n chatMessages.scrollTop = chatMessages.scrollHeight;\n return<\/span> newMessageElement;\n };\n\n const<\/span> sendMessage = ()<\/span> =><\/span> {\n disableUI();\n\n const<\/span> question = chatInput.value;\n\n addMessage(question, \"user\"<\/span>);\n chat(question);\n chatInput.value = \"\"<\/span>;\n };\n\n sendButton.addEventListener(\"click\"<\/span>, sendMessage);\n\n chatInput.addEventListener(\"keypress\"<\/span>, (event) => {\n if<\/span> (event.key === \"Enter\"<\/span>) {\n sendMessage();\n }\n });\n\n download(\"HF_USER\/HF_MODEL\"<\/span>);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nWith a pinch of CSS, it will take on the appearance and behavior of a classic chat!<\/p>\n\n\n
body<\/span> {\n margin<\/span>: 0<\/span>;\n font-family<\/span>: system-ui;\n}\n\na<\/span>, a<\/span>:visited<\/span>, a<\/span>:focus<\/span> {\n color<\/span>: #ff5c00<\/span>;\n}\n\n#container<\/span> {\n display<\/span>: flex;\n width<\/span>: 100<\/span>lvw;\n height<\/span>: 100<\/span>lvh;\n justify-content<\/span>: center;\n align-items<\/span>: center;\n background-color<\/span>: #333<\/span>;\n}\n\n#chat-container<\/span> {\n display<\/span>: flex;\n width<\/span>: 60vw<\/span>;\n flex-direction<\/span>: column;\n max-width<\/span>: 80%<\/span>;\n max-height<\/span>: 80%<\/span>;\n background-color<\/span>: white;\n padding<\/span>: 1rem<\/span>;\n border<\/span>: 3px<\/span> solid #666<\/span>;\n}\n\n#chat-header<\/span> {\n display<\/span>: flex;\n justify-content<\/span>: space-between;\n}\n\n#chat-header<\/span> button<\/span> {\n color<\/span>: #ff5c00<\/span>;\n background-color<\/span>: transparent;\n border<\/span>: 0<\/span>;\n font-size<\/span>: 3rem<\/span>;\n padding<\/span>: 0<\/span>;\n margin<\/span>: 0<\/span>;\n}\n\n#chat-messages<\/span> {\n height<\/span>: 50vh<\/span>;\n overflow-y<\/span>: auto;\n display<\/span>: flex;\n flex-direction<\/span>: column;\n}\n\n#chat-input-container<\/span> {\n display<\/span>: flex;\n}\n\n#chat-input<\/span> {\n width<\/span>: 100%<\/span>;\n}\n\ninput<\/span>[type=text]<\/span>, button<\/span> {\n font-size<\/span>: 1rem<\/span>;\n border<\/span>: 1px<\/span> solid #ff5c00<\/span>;\n padding<\/span>: 1rem<\/span>;\n margin<\/span>: 1rem<\/span>;\n}\n\nbutton<\/span> { \n background-color<\/span>: #ff5c00<\/span>;\n color<\/span>: white;\n cursor<\/span>: pointer;\n}\n\nbutton<\/span>:disabled<\/span> { \n background-color<\/span>: white;\n cursor<\/span>: wait;\n color<\/span>: #ff5c00<\/span>;\n border<\/span>: 1px<\/span> dashed #ff5c00<\/span>;\n}\n\ninput<\/span>[type=text]<\/span>:disabled<\/span> { \n background-color<\/span>: white;\n cursor<\/span>: wait;\n color<\/span>: #ff5c00<\/span>;\n border<\/span>: