lemonade-sdk 8.1.0__py3-none-any.whl → 8.1.1__py3-none-any.whl

lemonade/tools/server/static/webapp.html

@@ -24,6 +24,10 @@
             <a href="https://lemonade-server.ai/news/" target="_blank">News</a>
         </div>
     </nav>
+    <div id="error-banner" class="error-banner" style="display:none;">
+        <span id="error-banner-msg"></span>
+        <button class="close-btn" onclick="hideErrorBanner()">&times;</button>
+    </div>
     <main class="main">
         <div class="tab-container"> 
             <div class="tabs"> 
@@ -35,8 +39,15 @@
                     <div class="chat-history" id="chat-history"></div> 
                     <div class="chat-input-row"> 
                         <select id="model-select"></select> 
-                        <input type="text" id="chat-input" placeholder="Type your message..." /> 
+                        <div class="input-with-indicator">
+                            <input type="text" id="chat-input" placeholder="Type your message..." /> 
+                        </div>
+                        <input type="file" id="file-attachment" style="display: none;" multiple accept="image/*">
+                        <button id="attachment-btn" title="Attach files">&#x1F4CE;</button>
                         <button id="send-btn">Send</button> 
+                    </div>
+                    <div class="attachments-preview-container" id="attachments-preview-container">
+                        <div class="attachments-preview-row" id="attachments-preview-row"></div>
                     </div> 
                 </div>
                 <!-- App Suggestions Section -->
@@ -141,7 +152,12 @@
                         </table>
                     </div>
                     <div class="model-mgmt-pane">
-                        <h3>Suggested Models</h3>
+                        <h3>🔥 Hot Models</h3>
+                        <table class="model-table" id="hot-models-table">
+                            <tbody id="hot-models-tbody"></tbody>
+                        </table>
+                        
+                        <h3 style="margin-top: 2em;">Suggested Models</h3>
                         <table class="model-table" id="suggested-models-table">
                             <tbody id="suggested-models-tbody"></tbody>
                         </table>
@@ -214,6 +230,50 @@
         }
     }
 
+    // Display an error message in the banner
+    function showErrorBanner(msg) {
+        const banner = document.getElementById('error-banner');
+        if (!banner) return;
+        const msgEl = document.getElementById('error-banner-msg');
+        const fullMsg = msg + '\nCheck the Lemonade Server logs via the system tray app for more information.';
+        if (msgEl) {
+            msgEl.textContent = fullMsg;
+        } else {
+            banner.textContent = fullMsg;
+        }
+        banner.style.display = 'flex';
+    }
+
+    function hideErrorBanner() {
+        const banner = document.getElementById('error-banner');
+        if (banner) banner.style.display = 'none';
+    }
+
+    // Helper fetch wrappers that surface server error details
+    async function httpRequest(url, options = {}) {
+        const resp = await fetch(url, options);
+        if (!resp.ok) {
+            let detail = resp.statusText || 'Request failed';
+            try {
+                const contentType = resp.headers.get('content-type') || '';
+                if (contentType.includes('application/json')) {
+                    const data = await resp.json();
+                    if (data && data.detail) detail = data.detail;
+                } else {
+                    const text = await resp.text();
+                    if (text) detail = text.trim();
+                }
+            } catch (_) {}
+            throw new Error(detail);
+        }
+        return resp;
+    }
+
+    async function httpJson(url, options = {}) {
+        const resp = await httpRequest(url, options);
+        return await resp.json();
+    }
+
     // Tab switching logic 
     function showTab(tab, updateHash = true) { 
         document.getElementById('tab-chat').classList.remove('active'); 
@@ -312,11 +372,36 @@
         return `http://localhost:${port}`;
     }
 
+    // Check if current model supports vision
+    function isVisionModel(modelId) {
+        const allModels = window.SERVER_MODELS || {};
+        const modelData = allModels[modelId];
+        if (modelData && modelData.labels && Array.isArray(modelData.labels)) {
+            return modelData.labels.some(label => label.toLowerCase() === 'vision');
+        }
+        return false;
+    }
+
+    // Update attachment button state based on current model
+    function updateAttachmentButtonState() {
+        const currentModel = modelSelect.value;
+        const isVision = isVisionModel(currentModel);
+        
+        if (isVision) {
+            attachmentBtn.style.opacity = '1';
+            attachmentBtn.style.cursor = 'pointer';
+            attachmentBtn.title = 'Attach images';
+        } else {
+            attachmentBtn.style.opacity = '0.5';
+            attachmentBtn.style.cursor = 'not-allowed';
+            attachmentBtn.title = 'Image attachments not supported by this model';
+        }
+    }
+
     // Populate model dropdown from /api/v1/models endpoint
     async function loadModels() {
         try {
-            const resp = await fetch(getServerBaseUrl() + '/api/v1/models');
-            const data = await resp.json();
+            const data = await httpJson(getServerBaseUrl() + '/api/v1/models');
             const select = document.getElementById('model-select');
             select.innerHTML = '';
             if (!data.data || !Array.isArray(data.data)) {
@@ -380,14 +465,50 @@
                     console.warn(`Model '${urlModel}' specified in URL not found in available models`);
                 }
             }
+            
+            // Update attachment button state after model is loaded
+            updateAttachmentButtonState();
         } catch (e) {
             const select = document.getElementById('model-select');
             select.innerHTML = `<option>Error loading models: ${e.message}</option>`;
             console.error('Error loading models:', e);
+            showErrorBanner(`Error loading models: ${e.message}`);
         }
     }
     loadModels();
 
+    // Add model change handler to clear attachments if switching to non-vision model
+    document.addEventListener('DOMContentLoaded', function() {
+        const modelSelect = document.getElementById('model-select');
+        if (modelSelect) {
+            modelSelect.addEventListener('change', function() {
+                const currentModel = this.value;
+                updateAttachmentButtonState(); // Update button visual state
+                
+                if (attachedFiles.length > 0 && !isVisionModel(currentModel)) {
+                    if (confirm(`The selected model "${currentModel}" does not support images. Would you like to remove the attached images?`)) {
+                        clearAttachments();
+                    } else {
+                        // Find a vision model to switch back to
+                        const allModels = window.SERVER_MODELS || {};
+                        const visionModels = Array.from(this.options).filter(option => 
+                            isVisionModel(option.value)
+                        );
+                        
+                        if (visionModels.length > 0) {
+                            this.value = visionModels[0].value;
+                            updateAttachmentButtonState(); // Update button state again
+                            alert(`Switched back to "${visionModels[0].value}" which supports images.`);
+                        } else {
+                            alert('No vision models available. Images will be cleared.');
+                            clearAttachments();
+                        }
+                    }
+                }
+            });
+        }
+    });
+
     // Helper function to create model name with labels
     function createModelNameWithLabels(modelId, allModels) {
         // Create container for model name and labels
@@ -403,8 +524,14 @@
         const modelData = allModels[modelId];
         if (modelData && modelData.labels && Array.isArray(modelData.labels)) {
             modelData.labels.forEach(label => {
-                const labelSpan = document.createElement('span');
                 const labelLower = label.toLowerCase();
+                
+                // Skip "hot" labels since they have their own section
+                if (labelLower === 'hot') {
+                    return;
+                }
+                
+                const labelSpan = document.createElement('span');
                 let labelClass = 'other';
                 if (labelLower === 'vision') {
                     labelClass = 'vision';
@@ -426,23 +553,92 @@
         return container;
     }
 
+    // Helper function to render a model table section
+    function renderModelTable(tbody, models, allModels, emptyMessage) {
+        tbody.innerHTML = '';
+        if (models.length === 0) {
+            const tr = document.createElement('tr');
+            const td = document.createElement('td');
+            td.colSpan = 2;
+            td.textContent = emptyMessage;
+            td.style.textAlign = 'center';
+            td.style.fontStyle = 'italic';
+            td.style.color = '#666';
+            td.style.padding = '1em';
+            tr.appendChild(td);
+            tbody.appendChild(tr);
+        } else {
+            models.forEach(mid => {
+                const tr = document.createElement('tr');
+                const tdName = document.createElement('td');
+                
+                tdName.appendChild(createModelNameWithLabels(mid, allModels));
+                tdName.style.paddingRight = '1em';
+                tdName.style.verticalAlign = 'middle';
+                const tdBtn = document.createElement('td');
+                tdBtn.style.width = '1%';
+                tdBtn.style.verticalAlign = 'middle';
+                const btn = document.createElement('button');
+                btn.textContent = '+';
+                btn.title = 'Install model';
+                btn.onclick = async function() {
+                    btn.disabled = true;
+                    btn.textContent = 'Installing...';
+                    btn.classList.add('installing-btn');
+                    try {
+                        await httpRequest(getServerBaseUrl() + '/api/v1/pull', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ model_name: mid })
+                        });
+                        await refreshModelMgmtUI();
+                        await loadModels(); // update chat dropdown too
+                    } catch (e) {
+                        btn.textContent = 'Error';
+                        showErrorBanner(`Failed to install model: ${e.message}`);
+                    }
+                };
+                tdBtn.appendChild(btn);
+                tr.appendChild(tdName);
+                tr.appendChild(tdBtn);
+                tbody.appendChild(tr);
+            });
+        }
+    }
+
     // Model Management Tab Logic
     async function refreshModelMgmtUI() {
         // Get installed models from /api/v1/models
         let installed = [];
         try {
-            const resp = await fetch(getServerBaseUrl() + '/api/v1/models');
-            const data = await resp.json();
+            const data = await httpJson(getServerBaseUrl() + '/api/v1/models');
             if (data.data && Array.isArray(data.data)) {
                 installed = data.data.map(m => m.id || m.name || m);
             }
-        } catch (e) {}
+        } catch (e) {
+            showErrorBanner(`Error loading models: ${e.message}`);
+        }
         // All models from server_models.json (window.SERVER_MODELS)
         const allModels = window.SERVER_MODELS || {};
-        // Filter suggested models not installed
-        const suggested = Object.keys(allModels).filter(
-            k => allModels[k].suggested && !installed.includes(k)
-        );
+        
+        // Separate hot models and regular suggested models not installed
+        const hotModels = [];
+        const regularSuggested = [];
+        
+        Object.keys(allModels).forEach(k => {
+            if (allModels[k].suggested && !installed.includes(k)) {
+                const modelData = allModels[k];
+                const hasHotLabel = modelData.labels && modelData.labels.some(label => 
+                    label.toLowerCase() === 'hot'
+                );
+                
+                if (hasHotLabel) {
+                    hotModels.push(k);
+                } else {
+                    regularSuggested.push(k);
+                }
+            }
+        });
         // Render installed models as a table (two columns, second is invisible)
         const installedTbody = document.getElementById('installed-models-tbody');
         installedTbody.innerHTML = '';
@@ -469,21 +665,17 @@
                 btn.textContent = 'Deleting...';
                 btn.style.backgroundColor = '#888';
                 try {
-                    const response = await fetch(getServerBaseUrl() + '/api/v1/delete', {
+                    await httpRequest(getServerBaseUrl() + '/api/v1/delete', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({ model_name: mid })
                     });
-                    if (!response.ok) {
-                        const errorData = await response.json();
-                        throw new Error(errorData.detail || 'Failed to delete model');
-                    }
                     await refreshModelMgmtUI();
                     await loadModels(); // update chat dropdown too
                 } catch (e) {
                     btn.textContent = 'Error';
                     btn.disabled = false;
-                    alert(`Failed to delete model: ${e.message}`);
+                    showErrorBanner(`Failed to delete model: ${e.message}`);
                 }
             };
             tdBtn.appendChild(btn);
@@ -492,43 +684,13 @@
             tr.appendChild(tdBtn);
             installedTbody.appendChild(tr);
         });
-        // Render suggested models as a table
+        
+        // Render hot models and suggested models using the helper function
+        const hotTbody = document.getElementById('hot-models-tbody');
         const suggestedTbody = document.getElementById('suggested-models-tbody');
-        suggestedTbody.innerHTML = '';
-        suggested.forEach(mid => {
-            const tr = document.createElement('tr');
-            const tdName = document.createElement('td');
-            
-            tdName.appendChild(createModelNameWithLabels(mid, allModels));
-            tdName.style.paddingRight = '1em';
-            tdName.style.verticalAlign = 'middle';
-            const tdBtn = document.createElement('td');
-            tdBtn.style.width = '1%';
-            tdBtn.style.verticalAlign = 'middle';
-            const btn = document.createElement('button');
-            btn.textContent = '+';
-            btn.title = 'Install model';
-            btn.onclick = async function() {
-                btn.disabled = true;
-                btn.textContent = 'Installing...';
-                btn.classList.add('installing-btn');
-                try {
-                    await fetch(getServerBaseUrl() + '/api/v1/pull', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ model_name: mid })
-                    });
-                    await refreshModelMgmtUI();
-                    await loadModels(); // update chat dropdown too
-                } catch (e) {
-                    btn.textContent = 'Error';
-                }
-            };
-            tdBtn.appendChild(btn);
-            tr.appendChild(tdName);
-            tr.appendChild(tdBtn);
-            suggestedTbody.appendChild(tr);
-        });
+        
+        renderModelTable(hotTbody, hotModels, allModels, "Nice, you've already installed all these models!");
+        renderModelTable(suggestedTbody, regularSuggested, allModels, "Nice, you've already installed all these models!");
     }
     // Initial load
     refreshModelMgmtUI();
@@ -539,8 +701,211 @@
     const chatHistory = document.getElementById('chat-history');
     const chatInput = document.getElementById('chat-input');
     const sendBtn = document.getElementById('send-btn');
+    const attachmentBtn = document.getElementById('attachment-btn');
+    const fileAttachment = document.getElementById('file-attachment');
+    const attachmentsPreviewContainer = document.getElementById('attachments-preview-container');
+    const attachmentsPreviewRow = document.getElementById('attachments-preview-row');
     const modelSelect = document.getElementById('model-select');
     let messages = [];
+    let attachedFiles = [];
+
+    attachmentBtn.onclick = () => {
+        const currentModel = modelSelect.value;
+        if (!isVisionModel(currentModel)) {
+            alert(`The selected model "${currentModel}" does not support image inputs. Please select a model with "Vision" capabilities to attach images.`);
+            return;
+        }
+        fileAttachment.click();
+    };
+
+    function clearAttachments() {
+        attachedFiles = [];
+        fileAttachment.value = '';
+        updateInputPlaceholder();
+        updateAttachmentPreviewVisibility();
+        updateAttachmentPreviews();
+    }
+
+    function updateAttachmentPreviewVisibility() {
+        if (attachedFiles.length > 0) {
+            attachmentsPreviewContainer.classList.add('has-attachments');
+        } else {
+            attachmentsPreviewContainer.classList.remove('has-attachments');
+        }
+    }
+
+    function updateAttachmentPreviews() {
+        // Clear existing previews
+        attachmentsPreviewRow.innerHTML = '';
+        
+        if (attachedFiles.length === 0) {
+            return;
+        }
+        
+        attachedFiles.forEach((file, index) => {
+            // Skip non-image files (extra safety check)
+            if (!file.type.startsWith('image/')) {
+                console.warn(`Skipping non-image file in preview: ${file.name} (${file.type})`);
+                return;
+            }
+            
+            const previewDiv = document.createElement('div');
+            previewDiv.className = 'attachment-preview';
+            
+            // Create thumbnail
+            const thumbnail = document.createElement('img');
+            thumbnail.className = 'attachment-thumbnail';
+            thumbnail.alt = file.name;
+            
+            // Create filename display
+            const filename = document.createElement('div');
+            filename.className = 'attachment-filename';
+            filename.textContent = file.name || `pasted-image-${index + 1}`;
+            filename.title = file.name || `pasted-image-${index + 1}`;
+            
+            // Create remove button
+            const removeBtn = document.createElement('button');
+            removeBtn.className = 'attachment-remove-btn';
+            removeBtn.innerHTML = '✕';
+            removeBtn.title = 'Remove this image';
+            removeBtn.onclick = () => removeAttachment(index);
+            
+            // Generate thumbnail for image
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                thumbnail.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+            
+            previewDiv.appendChild(thumbnail);
+            previewDiv.appendChild(filename);
+            previewDiv.appendChild(removeBtn);
+            attachmentsPreviewRow.appendChild(previewDiv);
+        });
+    }
+
+    function removeAttachment(index) {
+        attachedFiles.splice(index, 1);
+        updateInputPlaceholder();
+        updateAttachmentPreviewVisibility();
+        updateAttachmentPreviews();
+    }
+
+    fileAttachment.addEventListener('change', () => {
+        if (fileAttachment.files.length > 0) {
+            // Check if current model supports vision
+            const currentModel = modelSelect.value;
+            if (!isVisionModel(currentModel)) {
+                alert(`The selected model "${currentModel}" does not support image inputs. Please select a model with "Vision" capabilities or choose a different model.`);
+                fileAttachment.value = ''; // Clear the input
+                return;
+            }
+            
+            // Filter only image files
+            const imageFiles = Array.from(fileAttachment.files).filter(file => {
+                if (!file.type.startsWith('image/')) {
+                    console.warn(`Skipping non-image file: ${file.name} (${file.type})`);
+                    return false;
+                }
+                return true;
+            });
+            
+            if (imageFiles.length === 0) {
+                alert('Please select only image files (PNG, JPG, GIF, etc.)');
+                fileAttachment.value = ''; // Clear the input
+                return;
+            }
+            
+            if (imageFiles.length !== fileAttachment.files.length) {
+                alert(`${fileAttachment.files.length - imageFiles.length} non-image file(s) were skipped. Only image files are supported.`);
+            }
+            
+            attachedFiles = imageFiles;
+            updateInputPlaceholder();
+            updateAttachmentPreviewVisibility();
+            updateAttachmentPreviews();
+        }
+    });
+
+    // Handle paste events for images
+    chatInput.addEventListener('paste', async (e) => {
+        e.preventDefault();
+        
+        const clipboardData = e.clipboardData || window.clipboardData;
+        const items = clipboardData.items;
+        let hasImage = false;
+        let pastedText = '';
+        
+        // Check for text content first
+        for (let item of items) {
+            if (item.type === 'text/plain') {
+                pastedText = clipboardData.getData('text/plain');
+            }
+        }
+        
+        // Check for images
+        for (let item of items) {
+            if (item.type.indexOf('image') !== -1) {
+                hasImage = true;
+                const file = item.getAsFile();
+                if (file && file.type.startsWith('image/')) {
+                    // Check if current model supports vision before adding image
+                    const currentModel = modelSelect.value;
+                    if (!isVisionModel(currentModel)) {
+                        alert(`The selected model "${currentModel}" does not support image inputs. Please select a model with "Vision" capabilities to paste images.`);
+                        // Only paste text, skip the image
+                        if (pastedText) {
+                            chatInput.value = pastedText;
+                        }
+                        return;
+                    }
+                    // Add to attachedFiles array only if it's an image and model supports vision
+                    attachedFiles.push(file);
+                } else if (file) {
+                    console.warn(`Skipping non-image pasted file: ${file.name || 'unknown'} (${file.type})`);
+                }
+            }
+        }
+        
+        // Update input box content - only show text, images will be indicated separately
+        if (pastedText) {
+            chatInput.value = pastedText;
+        }
+        
+        // Update placeholder to show attached images
+        updateInputPlaceholder();
+        updateAttachmentPreviewVisibility();
+        updateAttachmentPreviews();
+    });
+
+    // Function to update input placeholder to show attached files
+    function updateInputPlaceholder() {
+        if (attachedFiles.length > 0) {
+            chatInput.placeholder = `Type your message... (${attachedFiles.length} image${attachedFiles.length > 1 ? 's' : ''} attached)`;
+        } else {
+            chatInput.placeholder = 'Type your message...';
+        }
+    }
+
+    // Add keyboard shortcut to clear attachments
+    chatInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && attachedFiles.length > 0) {
+            e.preventDefault();
+            clearAttachments();
+        } else if (e.key === 'Enter') {
+            sendMessage();
+        }
+    });
+
+    // Function to convert file to base64
+    function fileToBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result.split(',')[1]); // Remove data:image/...;base64, prefix
+            reader.onerror = error => reject(error);
+        });
+    }
 
     function appendMessage(role, text, isMarkdown = false) {
         const div = document.createElement('div');
@@ -650,24 +1015,88 @@
 
     async function sendMessage() {
         const text = chatInput.value.trim();
-        if (!text) return;
-        appendMessage('user', text);
-        messages.push({ role: 'user', content: text });
+        if (!text && attachedFiles.length === 0) return;
+        
+        // Check if trying to send images to non-vision model
+        if (attachedFiles.length > 0) {
+            const currentModel = modelSelect.value;
+            if (!isVisionModel(currentModel)) {
+                alert(`Cannot send images to model "${currentModel}" as it does not support vision. Please select a model with "Vision" capabilities or remove the attached images.`);
+                return;
+            }
+        }
+        
+        // Create message content
+        let messageContent = [];
+        
+        // Add text if present
+        if (text) {
+            messageContent.push({
+                type: "text",
+                text: text
+            });
+        }
+        
+        // Add images if present
+        if (attachedFiles.length > 0) {
+            for (const file of attachedFiles) {
+                if (file.type.startsWith('image/')) {
+                    try {
+                        const base64 = await fileToBase64(file);
+                        messageContent.push({
+                            type: "image_url",
+                            image_url: {
+                                url: `data:${file.type};base64,${base64}`
+                            }
+                        });
+                    } catch (error) {
+                        console.error('Error converting image to base64:', error);
+                    }
+                }
+            }
+        }
+        
+        // Display user message (show text and file names)
+        let displayText = text;
+        if (attachedFiles.length > 0) {
+            const fileNames = attachedFiles.map(f => f.name || 'pasted-image').join(', ');
+            displayText = displayText ? `${displayText}\n[Images: ${fileNames}]` : `[Images: ${fileNames}]`;
+        }
+        
+        appendMessage('user', displayText);
+        
+        // Add to messages array
+        const userMessage = {
+            role: 'user',
+            content: messageContent.length === 1 && messageContent[0].type === "text" 
+                ? messageContent[0].text 
+                : messageContent
+        };
+        messages.push(userMessage);
+        
+        // Clear input and attachments
         chatInput.value = '';
+        attachedFiles = [];
+        fileAttachment.value = '';
+        updateInputPlaceholder(); // Reset placeholder
+        updateAttachmentPreviewVisibility(); // Hide preview container
+        updateAttachmentPreviews(); // Clear previews
         sendBtn.disabled = true;
+        
         // Streaming OpenAI completions (placeholder, adapt as needed)
         let llmText = '';
         const llmBubble = appendMessage('llm', '...');
         try {
             // Use the correct endpoint for chat completions
-            const resp = await fetch(getServerBaseUrl() + '/api/v1/chat/completions', {
+            const payload = {
+                model: modelSelect.value,
+                messages: messages,
+                stream: true
+            };
+            const resp = await httpRequest(getServerBaseUrl() + '/api/v1/chat/completions', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    model: modelSelect.value,
-                    messages: messages,
-                    stream: true
-                })
+                body: JSON.stringify(payload)
             });
             if (!resp.body) throw new Error('No stream');
             const reader = resp.body.getReader();
@@ -703,16 +1132,25 @@
                     }
                 }
             }
+            if (!llmText) throw new Error('No response');
             messages.push({ role: 'assistant', content: llmText });
         } catch (e) {
-            llmBubble.textContent = '[Error: ' + e.message + ']';
+            let detail = e.message;
+            try {
+                const errPayload = { ...payload, stream: false };
+                const errResp = await httpJson(getServerBaseUrl() + '/api/v1/chat/completions', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(errPayload)
+                });
+                if (errResp && errResp.detail) detail = errResp.detail;
+            } catch (_) {}
+            llmBubble.textContent = '[Error: ' + detail + ']';
+            showErrorBanner(`Chat error: ${detail}`);
         }
         sendBtn.disabled = false;
     }
     sendBtn.onclick = sendMessage;
-    chatInput.addEventListener('keydown', function(e) {
-        if (e.key === 'Enter') sendMessage();
-    });
 
     // Register & Install Model logic
     const registerForm = document.getElementById('register-model-form');
@@ -738,14 +1176,11 @@
         btn.disabled = true;
         btn.textContent = 'Installing...';
         try {
-          const resp = await fetch(getServerBaseUrl() + '/api/v1/pull', {
+          await httpRequest(getServerBaseUrl() + '/api/v1/pull', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(payload)
           });
-          if (!resp.ok) {
-            const err = await resp.json().catch(() => ({}));
-            throw new Error(err.detail || 'Failed to register model.');          }
           registerStatus.textContent = 'Model installed!';
           registerStatus.style.color = '#27ae60';
           registerStatus.className = 'register-status success';
@@ -756,6 +1191,7 @@
           registerStatus.textContent = e.message + ' See the Lemonade Server log for details.';
           registerStatus.style.color = '#dc3545';
           registerStatus.className = 'register-status error';
+          showErrorBanner(`Model install failed: ${e.message}`);
         }
         btn.disabled = false;
         btn.textContent = 'Install';