├── LICENSE
├── README.md
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Yorkie
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ⚠️ This is an **unofficial** project and is **not affiliated with or endorsed by LM Studio**.
  2 | 
  3 | # LM Studio Chat WebUI(unofficial)
  4 | 
  5 | This is a simple, browser-based chat interface for interacting with your LM Studio server. It allows you to connect to your locally hosted LM Studio model and chat with it from any device with a web browser, including mobile phones.
  6 | 
  7 | ## Features
  8 | 
  9 | - Dark mode interface
 10 | - Connect to any LM Studio server
 11 | - Chat with your LM Studio model
 12 | - LaTeX Math Rendering and Markdown Rendering
 13 | - Mobile-friendly design
 14 | - Super Cool new Purple theme **NEW**
 15 | - Chats **NEW**
 16 | - Vision Model Support **NEW**
 17 | - Choose your model **NEW**
 18 | - Delete Chats **NEW**
 19 | 
 20 | 
 21 | ## Screenshots 📸
 22 | ![image](https://github.com/user-attachments/assets/7944a30a-6e52-467b-bf27-309f8db0bfde)
 23 | ![image](https://github.com/user-attachments/assets/cecc2e50-1583-4ce6-a092-10adcb2359f3)
 24 | ![image](https://github.com/user-attachments/assets/717bb8c6-ff62-4574-95e4-146909302180)
 25 | ![image](https://github.com/user-attachments/assets/22275a46-f332-4ab9-b727-678a98aef7af)
 26 | ![image](https://github.com/user-attachments/assets/d7cba468-166b-4d74-a98a-37ca72093b83)
 27 | 
 28 | 
 29 | 
 30 | 
 31 | ## Setup Instructions
 32 | 
 33 | ### For Desktop Users
 34 | 
 35 | 1. Download the `lmstudiowebui.html` file from this repository.
 36 | 2. Save it to a location on your computer that you can easily access.
 37 | 
 38 | ### For Mobile Users
 39 | This works out of the box on Android devices. For iOS you need to open the file in Microsoft Edge or another browser. Safari/Chrome do not work. 
 40 | There are several ways to get the `lmstudiowebui.html` file on your mobile device:
 41 | 
 42 | 1. **Direct Download**: 
 43 |    - Open this repository on your mobile device's web browser.
 44 |    - Find the `lmstudiowebui.html` file and download it directly to your device.
 45 | 
 46 | 2. **Email to Yourself**:
 47 |    - Download the `lmstudiowebui.html` file on your computer.
 48 |    - Email it to yourself as an attachment.
 49 |    - Open the email on your mobile device and download the attachment.
 50 | 
 51 | 3. **Cloud Storage**:
 52 |    - Upload the `lmstudiowebui.html` file to a cloud storage service like Google Drive, Dropbox, or iCloud.
 53 |    - Access the file from your mobile device using the respective cloud storage app.
 54 | 
 55 | 4. **File Transfer Apps**:
 56 |    - Use apps like AirDrop (for iOS devices) or nearby sharing (for Android devices) to transfer the file from your computer to your mobile device.
 57 | 
 58 | ## Usage Instructions
 59 | 
 60 | 1. **Start LM Studio Server**:
 61 |    - Open LM Studio on your computer.
 62 |    - Go to the "Server" tab (In 0.3.x -> Developer -> Local Server).
 63 |    - Ensure that CORS is enabled and Serve on Local Network is enabled.
 64 |    - Click "Start Server" and note down the server address.
 65 | 
 66 | 2. **Open the Chat Interface**:
 67 |    - On desktop: Double-click the `lmstudiowebui.html` file to open it in your default web browser.
 68 |    - On mobile: Use a file manager app to locate the downloaded `lmstudiowebui.html` file and open it with your web browser.
 69 | 
 70 | 3. **Connect to LM Studio Server**:
 71 |    - In the chat interface, enter the LM Studio server address in the input field at the top. 
 72 |    - Click the "Connect" button.
 73 | 
 74 | 4. **Start Chatting**:
 75 |    - Once connected, you can start typing messages in the input field at the bottom of the screen.
 76 |    - Press Enter or tap Send to send your message.
 77 |    - The model's responses will appear in the chat window.
 78 | 
 79 | ## Troubleshooting
 80 | 
 81 | - **Can't connect to server**: 
 82 |   - Ensure LM Studio Server is running on your computer.
 83 |   - Check that you're using the correct server address.
 84 |   - If accessing from another device, make sure both devices are on the same network.
 85 | 
 86 | - **Slow responses**: 
 87 |   - LM Studio processing speed depends on your computer's capabilities. Larger models may take longer to respond.
 88 | 
 89 | - **Interface not loading**: 
 90 |   - Try opening the `lmstudiowebui.html` file with a different web browser.
 91 | 
 92 | ## Security Note
 93 | 
 94 | This interface is designed for local use only. Do not expose your LM Studio server to the public internet without proper security measures in place.
 95 | 
 96 | ## Feedback and Contributions
 97 | 
 98 | If you encounter any issues or have suggestions for improvements, please open an issue in this repository. Contributions via pull requests are welcome!
 99 | 
100 | ## Star History
101 | 
102 | [![Star History Chart](https://api.star-history.com/svg?repos=YorkieDev/LMStudioWebUI&type=Date)](https://star-history.com/#YorkieDev/LMStudioWebUI&Date)
103 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8" />
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6 |   <title>LM Studio Chat</title>
  7 |   <!-- Google Font -->
  8 |   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
  9 |   <!-- Font Awesome Icons -->
 10 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 11 |   <!-- Highlight.js CSS for code blocks -->
 12 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css" />
 13 |   <style>
 14 |     :root {
 15 |       /* Purple themed color scheme */
 16 |       --background-color: #1e0a3c;
 17 |       --text-color: #ffffff;
 18 |       --input-background: #2c0f4b;
 19 |       --user-message-color: #6c2d8c;
 20 |       --assistant-message-color: #442a6f;
 21 |       --button-color: #8e44ad;
 22 |       --accent-color: #bb86fc;
 23 |       --border-radius: 8px;
 24 |       --transition-speed: 0.3s;
 25 |       --shadow: 0 2px 8px rgba(0,0,0,0.3);
 26 |     }
 27 |     * { box-sizing: border-box; }
 28 |     body, html {
 29 |       font-family: 'Inter', sans-serif;
 30 |       margin: 0;
 31 |       padding: 0;
 32 |       height: 100%;
 33 |       background-color: var(--background-color);
 34 |       color: var(--text-color);
 35 |     }
 36 |     #app { display: flex; flex-direction: column; height: 100%; }
 37 |     /* Header: Server URL & Model Selection */
 38 |     #server-url-container {
 39 |       padding: 0.75rem;
 40 |       background-color: var(--input-background);
 41 |       display: flex;
 42 |       flex-wrap: wrap;
 43 |       justify-content: space-between;
 44 |       align-items: center;
 45 |       box-shadow: var(--shadow);
 46 |     }
 47 |     #server-url {
 48 |       flex-grow: 1;
 49 |       padding: 0.5rem 0.75rem;
 50 |       margin-right: 0.5rem;
 51 |       margin-bottom: 0.5rem;
 52 |       border: none;
 53 |       border-radius: var(--border-radius);
 54 |       background-color: var(--background-color);
 55 |       color: var(--text-color);
 56 |       font-size: 0.95rem;
 57 |     }
 58 |     /* Model selection dropdown */
 59 |     #model-select {
 60 |       padding: 0.5rem;
 61 |       font-size: 0.95rem;
 62 |       margin-right: 0.5rem;
 63 |       border: none;
 64 |       border-radius: var(--border-radius);
 65 |       background-color: var(--background-color);
 66 |       color: var(--text-color);
 67 |     }
 68 |     #connect-button {
 69 |       padding: 0.55rem 1rem;
 70 |       background-color: var(--button-color);
 71 |       color: var(--text-color);
 72 |       border: none;
 73 |       border-radius: var(--border-radius);
 74 |       cursor: pointer;
 75 |       font-size: 0.95rem;
 76 |       transition: background-color var(--transition-speed);
 77 |     }
 78 |     #connect-button:hover { background-color: var(--accent-color); }
 79 |     #connection-status {
 80 |       width: 100%;
 81 |       text-align: center;
 82 |       padding: 0.5rem;
 83 |       font-size: 0.85rem;
 84 |       background-color: var(--input-background);
 85 |       color: #ddd;
 86 |     }
 87 |     /* Main content: sidebar + chat area */
 88 |     #main-content {
 89 |       display: flex;
 90 |       flex-grow: 1;
 91 |       overflow: hidden;
 92 |     }
 93 |     /* Chat sidebar */
 94 |     #chat-sidebar {
 95 |       width: 250px;
 96 |       background-color: var(--input-background);
 97 |       border-right: 1px solid #333;
 98 |       overflow: hidden;
 99 |       transition: width var(--transition-speed) ease;
100 |       position: relative;
101 |       flex-shrink: 0;
102 |     }
103 |     #chat-sidebar.collapsed { width: 40px; }
104 |     /* Toggle sidebar button (right offset) */
105 |     #toggle-sidebar {
106 |       position: absolute;
107 |       top: 10px;
108 |       right: 10px;
109 |       background-color: var(--button-color);
110 |       border: none;
111 |       border-radius: 50%;
112 |       width: 30px;
113 |       height: 30px;
114 |       color: var(--text-color);
115 |       cursor: pointer;
116 |       transition: background-color var(--transition-speed);
117 |       z-index: 10;
118 |     }
119 |     #toggle-sidebar:hover { background-color: var(--accent-color); }
120 |     /* Sidebar content */
121 |     .sidebar-content {
122 |       padding: 1rem;
123 |       transition: opacity var(--transition-speed) ease;
124 |     }
125 |     #chat-sidebar.collapsed .sidebar-content {
126 |       opacity: 0;
127 |       pointer-events: none;
128 |     }
129 |     #chat-sidebar-header {
130 |       display: flex;
131 |       justify-content: space-between;
132 |       align-items: center;
133 |       margin-bottom: 1rem;
134 |       font-size: 1.1rem;
135 |       font-weight: 600;
136 |     }
137 |     #new-chat-button {
138 |       width: 100%;
139 |       padding: 0.5rem;
140 |       border: none;
141 |       border-radius: var(--border-radius);
142 |       background-color: var(--button-color);
143 |       color: var(--text-color);
144 |       cursor: pointer;
145 |       margin-bottom: 1rem;
146 |       transition: background-color var(--transition-speed);
147 |       font-size: 0.9rem;
148 |     }
149 |     #new-chat-button:hover { background-color: var(--accent-color); }
150 |     #chat-list { list-style: none; padding: 0; margin: 0; }
151 |     /* Chat titles */
152 |     #chat-list li {
153 |       padding: 0.75rem;
154 |       border-radius: var(--border-radius);
155 |       margin-bottom: 0.5rem;
156 |       background-color: var(--background-color);
157 |       cursor: pointer;
158 |       transition: background-color var(--transition-speed);
159 |       white-space: nowrap;
160 |       overflow: hidden;
161 |       text-overflow: ellipsis;
162 |       font-size: 0.9rem;
163 |       position: relative;
164 |     }
165 |     #chat-list li:hover { background-color: var(--input-background); }
166 |     #chat-list li.active { background-color: var(--button-color); font-weight: 600; }
167 |     /* Custom context menu for deleting chats */
168 |     #context-menu {
169 |       display: none;
170 |       position: absolute;
171 |       background-color: var(--button-color);
172 |       color: var(--text-color);
173 |       padding: 0.5rem;
174 |       border-radius: 4px;
175 |       z-index: 1000;
176 |       cursor: pointer;
177 |       font-size: 0.9rem;
178 |     }
179 |     /* Chat section */
180 |     #chat-section {
181 |       flex-grow: 1;
182 |       display: flex;
183 |       flex-direction: column;
184 |       overflow: hidden;
185 |       background: linear-gradient(135deg, #2c0f4b, #1e0a3c);
186 |       padding: 1rem;
187 |       border-radius: 10px;
188 |       margin: 1rem;
189 |     }
190 |     #chat-container {
191 |       flex-grow: 1;
192 |       overflow-y: auto;
193 |       padding: 1rem;
194 |       display: flex;
195 |       flex-direction: column;
196 |       gap: 0.75rem;
197 |       background: rgba(255,255,255,0.05);
198 |       border-radius: 8px;
199 |     }
200 |     /* Message card styling */
201 |     .message {
202 |       max-width: 85%;
203 |       padding: 0.75rem 1rem;
204 |       border-radius: var(--border-radius);
205 |       word-wrap: break-word;
206 |       font-size: 0.95rem;
207 |       line-height: 1.5;
208 |       background-color: var(--assistant-message-color);
209 |       box-shadow: var(--shadow);
210 |       animation: fadeIn 0.3s ease;
211 |     }
212 |     .user-message { align-self: flex-end; background-color: var(--user-message-color); }
213 |     .assistant-message { align-self: flex-start; background-color: var(--assistant-message-color); }
214 |     .message-header {
215 |       font-weight: 600;
216 |       margin-bottom: 0.35rem;
217 |       font-size: 0.85rem;
218 |     }
219 |     .message-model {
220 |       font-size: 0.75rem;
221 |       color: #ccc;
222 |       margin-bottom: 0.35rem;
223 |     }
224 |     .message-content { margin-bottom: 0.5rem; }
225 |     .message-metrics { font-size: 0.75rem; color: #ccc; text-align: right; }
226 |     /* Enhanced Markdown styling */
227 |     .message-content h1,
228 |     .message-content h2,
229 |     .message-content h3,
230 |     .message-content h4,
231 |     .message-content h5,
232 |     .message-content h6 {
233 |       margin: 0.5rem 0;
234 |       font-weight: 600;
235 |     }
236 |     .message-content p { margin: 0.5rem 0; line-height: 1.6; }
237 |     .message-content code {
238 |       background-color: rgba(27,31,35,0.15);
239 |       padding: 0.2em 0.4em;
240 |       border-radius: 4px;
241 |       font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
242 |     }
243 |     .message-content pre {
244 |       background-color: #282c34;
245 |       color: #abb2bf;
246 |       padding: 0.8rem;
247 |       overflow-x: auto;
248 |       border-radius: 6px;
249 |       margin: 0.5rem 0;
250 |     }
251 |     .message-content blockquote {
252 |       border-left: 4px solid var(--button-color);
253 |       margin: 1rem 0;
254 |       padding: 0.5rem 1rem;
255 |       color: #ccc;
256 |       background: rgba(142,68,173,0.1);
257 |     }
258 |     /* Input container */
259 |     #input-container {
260 |       padding: 0.75rem;
261 |       background-color: rgba(44,15,75,0.8);
262 |       border-top: 1px solid #333;
263 |       display: flex;
264 |       align-items: center;
265 |       gap: 0.5rem;
266 |       box-shadow: var(--shadow);
267 |       border-radius: 10px;
268 |     }
269 |     /* Image upload button */
270 |     #upload-button {
271 |       background-color: var(--button-color);
272 |       color: var(--text-color);
273 |       border: none;
274 |       border-radius: 50%;
275 |       width: 2.75rem;
276 |       height: 2.75rem;
277 |       cursor: pointer;
278 |       display: flex;
279 |       justify-content: center;
280 |       align-items: center;
281 |       transition: background-color var(--transition-speed);
282 |     }
283 |     #upload-button:hover { background-color: var(--accent-color); }
284 |     /* Image preview */
285 |     #image-preview { display: none; max-width: 50px; }
286 |     #user-input {
287 |       flex-grow: 1;
288 |       padding: 0.6rem 0.75rem;
289 |       border: none;
290 |       border-radius: var(--border-radius);
291 |       background-color: var(--background-color);
292 |       color: var(--text-color);
293 |       font-size: 0.95rem;
294 |     }
295 |     #user-input::placeholder { color: #bbb; }
296 |     #send-button {
297 |       background-color: var(--button-color);
298 |       color: var(--text-color);
299 |       border: none;
300 |       border-radius: 50%;
301 |       width: 2.75rem;
302 |       height: 2.75rem;
303 |       cursor: pointer;
304 |       display: flex;
305 |       justify-content: center;
306 |       align-items: center;
307 |       transition: background-color var(--transition-speed);
308 |     }
309 |     #send-button:hover { background-color: var(--accent-color); }
310 |     @media (max-width: 480px) {
311 |       .message { max-width: 90%; }
312 |       #server-url-container { flex-direction: column; align-items: stretch; }
313 |       #server-url, #connect-button, #model-select { width: 100%; margin-right: 0; margin-bottom: 0.5rem; }
314 |       #chat-sidebar { display: none; }
315 |     }
316 |     @keyframes fadeIn {
317 |       from { opacity: 0; transform: translateY(10px); }
318 |       to { opacity: 1; transform: translateY(0); }
319 |     }
320 |     /* Copy code button styles */
321 |     .copy-btn {
322 |       position: absolute;
323 |       top: 5px;
324 |       right: 5px;
325 |       background-color: var(--accent-color);
326 |       color: var(--text-color);
327 |       border: none;
328 |       border-radius: 4px;
329 |       cursor: pointer;
330 |       font-size: 0.75rem;
331 |       padding: 2px 6px;
332 |       opacity: 0.8;
333 |       transition: opacity 0.2s;
334 |     }
335 |     .copy-btn:hover { opacity: 1; }
336 |   </style>
337 |   <!-- Markdown rendering library -->
338 |   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
339 |   <script>
340 |     marked.setOptions({
341 |       gfm: true,
342 |       breaks: true,
343 |       smartypants: true,
344 |       headerIds: false,
345 |       highlight: function(code, lang) {
346 |         if (lang && hljs.getLanguage(lang)) {
347 |           return hljs.highlight(code, { language: lang }).value;
348 |         }
349 |         return code;
350 |       }
351 |     });
352 |   </script>
353 |   <!-- Highlight.js -->
354 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
355 |   <!-- MathJax configuration for LaTeX support -->
356 |   <script>
357 |     window.MathJax = {
358 |       tex: {
359 |         inlineMath: [['$', '$'], ['\\(', '\\)']],
360 |         displayMath: [['$$', '$$'], ['\\[', '\\]']],
361 |         processEscapes: true,
362 |         packages: {'[+]': ['noerrors', 'noundefined']}
363 |       },
364 |       options: {
365 |         skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
366 |         ignoreHtmlClass: 'tex2jax_ignore',
367 |         processHtmlClass: 'tex2jax_process'
368 |       },
369 |       svg: { fontCache: 'global' }
370 |     };
371 |   </script>
372 |   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
373 | </head>
374 | <body>
375 |   <div id="app">
376 |     <div id="server-url-container">
377 |       <input type="text" id="server-url" placeholder="Enter LM Studio server address" />
378 |       <select id="model-select" disabled>
379 |         <option value="">Select a model</option>
380 |       </select>
381 |       <button id="connect-button"><i class="fas fa-plug"></i> Connect</button>
382 |     </div>
383 |     <div id="connection-status">Disconnected</div>
384 |     <div id="main-content">
385 |       <!-- Chat Sidebar -->
386 |       <div id="chat-sidebar">
387 |         <button id="toggle-sidebar"><i class="fas fa-bars"></i></button>
388 |         <div class="sidebar-content">
389 |           <div id="chat-sidebar-header"><span>Chats</span></div>
390 |           <button id="new-chat-button"><i class="fas fa-plus"></i> New Chat</button>
391 |           <ul id="chat-list"></ul>
392 |         </div>
393 |       </div>
394 |       <!-- Chat Section -->
395 |       <div id="chat-section">
396 |         <div id="chat-container"></div>
397 |         <div id="input-container">
398 |           <button id="upload-button"><i class="fas fa-image"></i></button>
399 |           <input type="file" id="image-upload" accept="image/*" style="display:none;" />
400 |           <div id="image-preview"></div>
401 |           <input type="text" id="user-input" placeholder="Type a message..." disabled />
402 |           <button id="send-button"><i class="fas fa-paper-plane"></i></button>
403 |         </div>
404 |       </div>
405 |     </div>
406 |   </div>
407 |   <!-- Custom context menu for deleting chats -->
408 |   <div id="context-menu">Delete Chat</div>
409 |   
410 |   <script>
411 |     // Global variables
412 |     const chatContainer = document.getElementById('chat-container');
413 |     const userInput = document.getElementById('user-input');
414 |     const serverUrlInput = document.getElementById('server-url');
415 |     const connectButton = document.getElementById('connect-button');
416 |     const connectionStatus = document.getElementById('connection-status');
417 |     const sendButton = document.getElementById('send-button');
418 |     const newChatButton = document.getElementById('new-chat-button');
419 |     const toggleSidebarButton = document.getElementById('toggle-sidebar');
420 |     const chatSidebar = document.getElementById('chat-sidebar');
421 |     const chatList = document.getElementById('chat-list');
422 |     const contextMenu = document.getElementById('context-menu');
423 |     const modelSelect = document.getElementById('model-select');
424 |     const uploadButton = document.getElementById('upload-button');
425 |     const imageUpload = document.getElementById('image-upload');
426 |     const imagePreview = document.getElementById('image-preview');
427 |     
428 |     let isConnected = false;
429 |     let currentModel = '';
430 |     let pendingImage = null;
431 |     
432 |     // Chat management: each chat has an id, name, and messages array.
433 |     let chats = [];
434 |     let currentChat = null;
435 |     
436 |     // Helper: Attach copy code buttons to code blocks
437 |     function attachCopyButtons(container) {
438 |       container.querySelectorAll('pre').forEach(pre => {
439 |         if (!pre.querySelector('.copy-btn')) {
440 |           pre.style.position = 'relative';
441 |           const button = document.createElement('button');
442 |           button.className = 'copy-btn';
443 |           button.innerHTML = '<i class="fas fa-copy"></i> Copy';
444 |           button.addEventListener('click', () => {
445 |             const codeText = pre.querySelector('code').innerText;
446 |             navigator.clipboard.writeText(codeText)
447 |               .then(() => {
448 |                 button.innerText = "Copied!";
449 |                 setTimeout(() => {
450 |                   button.innerHTML = '<i class="fas fa-copy"></i> Copy';
451 |                 }, 2000);
452 |               })
453 |               .catch(err => {
454 |                 console.error('Failed to copy code: ', err);
455 |               });
456 |           });
457 |           pre.appendChild(button);
458 |         }
459 |       });
460 |     }
461 |     
462 |     // Adds a message to the DOM and (optionally) stores it.
463 |     // If store is false, the message is only displayed and not added to currentChat.messages.
464 |     function addMessage(content, isUser, metrics = null, store = true) {
465 |       const messageDiv = document.createElement('div');
466 |       messageDiv.classList.add('message', isUser ? 'user-message' : 'assistant-message');
467 |     
468 |       const headerDiv = document.createElement('div');
469 |       headerDiv.classList.add('message-header');
470 |       headerDiv.textContent = isUser ? 'You' : 'Assistant';
471 |       messageDiv.appendChild(headerDiv);
472 |     
473 |       if (!isUser && currentModel) {
474 |         const modelDiv = document.createElement('div');
475 |         modelDiv.classList.add('message-model');
476 |         modelDiv.textContent = currentModel;
477 |         messageDiv.appendChild(modelDiv);
478 |       }
479 |     
480 |       const contentDiv = document.createElement('div');
481 |       contentDiv.classList.add('message-content');
482 |       contentDiv.innerHTML = marked.parse(content);
483 |       messageDiv.appendChild(contentDiv);
484 |     
485 |       if (metrics) {
486 |         const metricsDiv = document.createElement('div');
487 |         metricsDiv.classList.add('message-metrics');
488 |         metricsDiv.textContent = metrics;
489 |         messageDiv.appendChild(metricsDiv);
490 |       }
491 |     
492 |       chatContainer.appendChild(messageDiv);
493 |       chatContainer.scrollTop = chatContainer.scrollHeight;
494 |     
495 |       messageDiv.querySelectorAll('pre code').forEach(block => {
496 |         hljs.highlightElement(block);
497 |       });
498 |     
499 |       if (typeof MathJax !== 'undefined') {
500 |         MathJax.typesetPromise([messageDiv]).catch(err => console.error('MathJax typeset failed:', err));
501 |       }
502 |       
503 |       attachCopyButtons(messageDiv);
504 |       
505 |       if (store && currentChat) {
506 |         currentChat.messages.push({ content, isUser, metrics, isImage: false });
507 |       }
508 |     }
509 |     
510 |     // Adds an image message.
511 |     function addImageMessage(dataURL, promptText) {
512 |       // Display image message in the UI
513 |       addMessage(`<img src="${dataURL}" style="max-width:100%; border-radius: var(--border-radius);" />`, true);
514 |       // Mark the last message in the history as an image message
515 |       const lastMsg = currentChat.messages[currentChat.messages.length - 1];
516 |       lastMsg.isImage = true;
517 |       lastMsg.imageData = dataURL;
518 |       lastMsg.text = promptText;
519 |     }
520 |     
521 |     // Creates a new chat.
522 |     function createNewChat() {
523 |       const chatId = Date.now();
524 |       const newChat = { id: chatId, name: `Conversation ${chats.length + 1}`, messages: [] };
525 |       chats.push(newChat);
526 |       currentChat = newChat;
527 |       updateChatList();
528 |       chatContainer.innerHTML = '';
529 |     }
530 |     
531 |     // Renders the chat list in the sidebar.
532 |     function updateChatList() {
533 |       chatList.innerHTML = '';
534 |       chats.forEach(chat => {
535 |         const li = document.createElement('li');
536 |         li.textContent = chat.name;
537 |         li.dataset.chatId = chat.id;
538 |         if (currentChat && chat.id === currentChat.id) li.classList.add('active');
539 |         li.addEventListener('click', () => {
540 |           if (currentChat && chat.id === currentChat.id) return;
541 |           currentChat = chat;
542 |           loadChat(chat);
543 |           updateChatList();
544 |         });
545 |         li.addEventListener('contextmenu', (e) => {
546 |           e.preventDefault();
547 |           showContextMenu(e.pageX, e.pageY, chat.id);
548 |         });
549 |         chatList.appendChild(li);
550 |       });
551 |     }
552 |     
553 |     // Loads a chat's messages into the chat container.
554 |     function loadChat(chat) {
555 |       chatContainer.innerHTML = '';
556 |       chat.messages.forEach(message => {
557 |         // When loading, we display messages without storing them again.
558 |         addMessage(message.content, message.isUser, message.metrics, false);
559 |       });
560 |     }
561 |     
562 |     // Custom context menu for deleting chats.
563 |     function showContextMenu(x, y, chatId) {
564 |       contextMenu.style.left = x + "px";
565 |       contextMenu.style.top = y + "px";
566 |       contextMenu.style.display = "block";
567 |       contextMenu.onclick = () => {
568 |         deleteChat(chatId);
569 |         hideContextMenu();
570 |       };
571 |     }
572 |     function hideContextMenu() { contextMenu.style.display = "none"; }
573 |     document.addEventListener('click', () => { if (contextMenu.style.display === "block") hideContextMenu(); });
574 |     function deleteChat(chatId) {
575 |       chats = chats.filter(c => c.id != chatId);
576 |       if (currentChat && currentChat.id == chatId) {
577 |         currentChat = chats.length > 0 ? chats[0] : null;
578 |         if (!currentChat) createNewChat();
579 |         else loadChat(currentChat);
580 |       }
581 |       updateChatList();
582 |     }
583 |     
584 |     // Ejects the currently loaded model.
585 |     async function ejectCurrentModel(oldModel) {
586 |       const serverUrl = serverUrlInput.value.trim();
587 |       try {
588 |         await fetch(`${serverUrl}/v1/model/eject`, {
589 |           method: 'POST',
590 |           headers: { 'Content-Type': 'application/json' },
591 |           body: JSON.stringify({ model: oldModel })
592 |         });
593 |         console.log(`Model ${oldModel} ejected.`);
594 |       } catch (error) {
595 |         console.error("Error ejecting model:", error);
596 |       }
597 |     }
598 |     
599 |     // Build conversation history without merging messages.
600 |     // The history starts with the system prompt, then includes each stored message in order.
601 |     function buildConversationHistory() {
602 |       const systemPrompt = currentChat.messages.some(msg => msg.isImage)
603 |         ? "You are an AI assistant that analyzes images."
604 |         : "You are an intelligent assistant. You always provide well-reasoned answers that are both correct and helpful.";
605 |       const history = [{ role: 'system', content: systemPrompt }];
606 |       currentChat.messages.forEach(msg => {
607 |         if (msg.isImage) {
608 |           history.push({
609 |             role: msg.isUser ? 'user' : 'assistant',
610 |             content: [
611 |               { type: "text", text: msg.text || "What's in this image?" },
612 |               { type: "image_url", image_url: { url: msg.imageData } }
613 |             ]
614 |           });
615 |         } else {
616 |           history.push({ role: msg.isUser ? 'user' : 'assistant', content: msg.content });
617 |         }
618 |       });
619 |       return history;
620 |     }
621 |     
622 |     // Model selection change: eject old model if needed.
623 |     modelSelect.addEventListener('change', async (e) => {
624 |       const newModel = e.target.value;
625 |       if (currentModel && currentModel !== newModel) {
626 |         modelSelect.disabled = true;
627 |         await ejectCurrentModel(currentModel);
628 |       }
629 |       currentModel = newModel;
630 |       modelSelect.disabled = false;
631 |     });
632 |     
633 |     // Connect to server and populate model dropdown.
634 |     async function connectToServer() {
635 |       const serverUrl = serverUrlInput.value.trim();
636 |       if (!serverUrl) {
637 |         updateConnectionStatus('Please enter a valid server address', false);
638 |         return;
639 |       }
640 |       try {
641 |         updateConnectionStatus('Connecting...', false);
642 |         const response = await fetch(`${serverUrl}/v1/models`, {
643 |           method: 'GET',
644 |           headers: { 'Content-Type': 'application/json' }
645 |         });
646 |         if (!response.ok) throw new Error('Server response was not ok');
647 |         const data = await response.json();
648 |         if (data && data.data && data.data.length > 0) {
649 |           modelSelect.innerHTML = "";
650 |           data.data.forEach(model => {
651 |             const option = document.createElement('option');
652 |             option.value = model.id;
653 |             option.textContent = model.id;
654 |             modelSelect.appendChild(option);
655 |           });
656 |           modelSelect.disabled = false;
657 |           currentModel = modelSelect.value;
658 |           isConnected = true;
659 |           updateConnectionStatus('Connected', true);
660 |           userInput.disabled = false;
661 |           sendButton.disabled = false;
662 |           if (!currentChat) createNewChat();
663 |           // Display connection message without storing it in the chat history
664 |           addMessage('Connected to LM Studio server. You can start chatting now!', false, null, false);
665 |         } else {
666 |           throw new Error('No models available');
667 |         }
668 |       } catch (error) {
669 |         console.error('Error:', error);
670 |         updateConnectionStatus('Failed to connect', false);
671 |         addMessage('Error: Unable to connect to the LM Studio server. Please check the address and try again.', false);
672 |       }
673 |     }
674 |     
675 |     function updateConnectionStatus(message, connected) {
676 |       connectionStatus.textContent = message;
677 |       connectionStatus.style.color = connected ? 'var(--accent-color)' : '#f44336';
678 |       connectButton.textContent = connected ? 'Disconnect' : 'Connect';
679 |       serverUrlInput.disabled = connected;
680 |       userInput.disabled = !connected;
681 |       sendButton.disabled = !connected;
682 |     }
683 |     
684 |     // Send message: if a pending image exists, include it.
685 |     async function sendMessage() {
686 |       let message = userInput.value.trim();
687 |       if (!message && !pendingImage) return;
688 |     
689 |       if (pendingImage) {
690 |         let promptText = message || "What's in this image?";
691 |         addImageMessage(pendingImage, promptText);
692 |         pendingImage = null;
693 |         imagePreview.style.display = "none";
694 |         userInput.value = "";
695 |       } else {
696 |         addMessage(message, true);
697 |       }
698 |     
699 |       const conversationHistory = buildConversationHistory();
700 |     
701 |       // Create a temporary assistant message element for streaming response
702 |       const assistantMessageElement = document.createElement('div');
703 |       assistantMessageElement.classList.add('message', 'assistant-message');
704 |     
705 |       const headerDiv = document.createElement('div');
706 |       headerDiv.classList.add('message-header');
707 |       headerDiv.textContent = 'Assistant';
708 |       assistantMessageElement.appendChild(headerDiv);
709 |     
710 |       if (currentModel) {
711 |         const modelDiv = document.createElement('div');
712 |         modelDiv.classList.add('message-model');
713 |         modelDiv.textContent = currentModel;
714 |         assistantMessageElement.appendChild(modelDiv);
715 |       }
716 |     
717 |       const assistantContentDiv = document.createElement('div');
718 |       assistantContentDiv.classList.add('message-content');
719 |       assistantMessageElement.appendChild(assistantContentDiv);
720 |     
721 |       chatContainer.appendChild(assistantMessageElement);
722 |       chatContainer.scrollTop = chatContainer.scrollHeight;
723 |     
724 |       userInput.value = '';
725 |       userInput.disabled = true;
726 |       sendButton.disabled = true;
727 |     
728 |       const serverUrl = serverUrlInput.value.trim();
729 |       const startTime = performance.now();
730 |       let accumulatedText = '';
731 |     
732 |       try {
733 |         const response = await fetch(`${serverUrl}/v1/chat/completions`, {
734 |           method: 'POST',
735 |           headers: { 'Content-Type': 'application/json' },
736 |           body: JSON.stringify({
737 |             model: currentModel,
738 |             messages: conversationHistory,
739 |             temperature: 0.7,
740 |             max_tokens: -1,
741 |             stream: true
742 |           })
743 |         });
744 |         if (!response.ok) throw new Error('Server response was not ok');
745 |     
746 |         const reader = response.body.getReader();
747 |         const decoder = new TextDecoder();
748 |         let done = false;
749 |         while (!done) {
750 |           const { value, done: doneReading } = await reader.read();
751 |           done = doneReading;
752 |           if (value) {
753 |             const chunk = decoder.decode(value, { stream: true });
754 |             const lines = chunk.split('\n').filter(line => line.trim() !== '');
755 |             for (const line of lines) {
756 |               if (line.startsWith("data:")) {
757 |                 const dataStr = line.slice(5).trim();
758 |                 if (dataStr === "[DONE]") { done = true; break; }
759 |                 try {
760 |                   const parsed = JSON.parse(dataStr);
761 |                   const delta = parsed.choices[0].delta;
762 |                   if (delta && delta.content) {
763 |                     accumulatedText += delta.content;
764 |                     assistantContentDiv.innerHTML = marked.parse(accumulatedText);
765 |                     assistantMessageElement.querySelectorAll('pre code').forEach(block => {
766 |                       hljs.highlightElement(block);
767 |                     });
768 |                     attachCopyButtons(assistantMessageElement);
769 |                     if (typeof MathJax !== 'undefined') {
770 |                       MathJax.typesetPromise([assistantMessageElement]).catch(err => console.error(err));
771 |                     }
772 |                   }
773 |                 } catch (err) {
774 |                   console.error("Error parsing stream chunk", err);
775 |                 }
776 |               } else if (line.startsWith("event:")) {
777 |                 const eventType = line.slice(6).trim();
778 |                 if (eventType === "error") {
779 |                   console.error("Received error event from server:", line);
780 |                   addMessage("Error: Received error event from server", false);
781 |                   done = true;
782 |                   break;
783 |                 }
784 |               }
785 |             }
786 |           }
787 |         }
788 |         const endTime = performance.now();
789 |         const timeElapsed = ((endTime - startTime) / 1000).toFixed(2);
790 |         if (currentChat) {
791 |           // Store the assistant message into the chat history
792 |           currentChat.messages.push({ content: accumulatedText, isUser: false, isImage: false });
793 |           if (currentChat.name.startsWith('Conversation')) {
794 |             const snippet = accumulatedText.split(' ').slice(0, 7).join(' ');
795 |             currentChat.name = snippet ? `Conversation: ${snippet}...` : currentChat.name;
796 |             updateChatList();
797 |           }
798 |         }
799 |       } catch (error) {
800 |         console.error('Error:', error);
801 |         addMessage('Error: Unable to get a response from the server. Please try again.', false);
802 |         isConnected = false;
803 |         updateConnectionStatus('Disconnected', false);
804 |       } finally {
805 |         userInput.disabled = false;
806 |         sendButton.disabled = false;
807 |         userInput.focus();
808 |       }
809 |     }
810 |     
811 |     // Image upload: store image and show preview.
812 |     uploadButton.addEventListener('click', () => { imageUpload.click(); });
813 |     imageUpload.addEventListener('change', () => {
814 |       const file = imageUpload.files[0];
815 |       if (!file) return;
816 |       const reader = new FileReader();
817 |       reader.onload = (e) => {
818 |         pendingImage = e.target.result;
819 |         imagePreview.innerHTML = `<img src="${pendingImage}" style="max-width:100%; border-radius: var(--border-radius);" />`;
820 |         imagePreview.style.display = "block";
821 |       };
822 |       reader.readAsDataURL(file);
823 |       imageUpload.value = "";
824 |     });
825 |     
826 |     connectButton.addEventListener('click', () => {
827 |       if (isConnected) {
828 |         isConnected = false;
829 |         updateConnectionStatus('Disconnected', false);
830 |         userInput.disabled = true;
831 |         sendButton.disabled = true;
832 |         addMessage('Disconnected from LM Studio server.', false);
833 |         currentModel = '';
834 |         modelSelect.disabled = true;
835 |       } else {
836 |         connectToServer();
837 |       }
838 |     });
839 |     
840 |     userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); });
841 |     sendButton.addEventListener('click', sendMessage);
842 |     newChatButton.addEventListener('click', () => { createNewChat(); });
843 |     toggleSidebarButton.addEventListener('click', () => { chatSidebar.classList.toggle('collapsed'); });
844 |     
845 |     serverUrlInput.focus();
846 |   </script>
847 | </body>
848 | </html>
849 | 


--------------------------------------------------------------------------------