lemonade-sdk 8.1.10__py3-none-any.whl → 8.1.12__py3-none-any.whl

lemonade/tools/server/static/js/chat.js

@@ -2,6 +2,7 @@
 let messages = [];
 let attachedFiles = [];
 let systemMessageElement = null;
+let abortController = null;
 
 // Default model configuration
 const DEFAULT_MODEL = 'Qwen2.5-0.5B-Instruct-CPU';
@@ -14,13 +15,18 @@ const THINKING_FRAMES = THINKING_USE_LEMON
     : ['Thinking.','Thinking..','Thinking...'];
 
 // Get DOM elements
-let chatHistory, chatInput, sendBtn, attachmentBtn, fileAttachment, attachmentsPreviewContainer, attachmentsPreviewRow, modelSelect;
+let chatHistory, chatInput, attachmentBtn, fileAttachment, attachmentsPreviewContainer, attachmentsPreviewRow, modelSelect, toggleBtn;
+// Track if a stream is currently active (separate from abortController existing briefly before validation)
+let isStreaming = false;
+// When the user scrolls up in the chat history, disable automatic scrolling until they scroll back to the bottom.
+let autoscrollEnabled = true;
+const AUTOSCROLL_TOLERANCE_PX = 10;
 
 // Initialize chat functionality when DOM is loaded
 document.addEventListener('DOMContentLoaded', function() {
     chatHistory = document.getElementById('chat-history');
     chatInput = document.getElementById('chat-input');
-    sendBtn = document.getElementById('send-btn');
+    toggleBtn = document.getElementById('toggle-btn');
     attachmentBtn = document.getElementById('attachment-btn');
     fileAttachment = document.getElementById('file-attachment');
     attachmentsPreviewContainer = document.getElementById('attachments-preview-container');
@@ -30,6 +36,26 @@ document.addEventListener('DOMContentLoaded', function() {
     // Set up event listeners
     setupChatEventListeners();
 
+    // Pause autoscroll when user scrolls up in the chat history. If they scroll back to bottom, resume.
+    if (chatHistory) {
+        chatHistory.addEventListener('scroll', function () {
+            try {
+                const atBottom = chatHistory.scrollTop + chatHistory.clientHeight >= chatHistory.scrollHeight - AUTOSCROLL_TOLERANCE_PX;
+                if (atBottom) {
+                    if (!autoscrollEnabled) {
+                        autoscrollEnabled = true;
+                        chatHistory.classList.remove('autoscroll-paused');
+                    }
+                } else {
+                    if (autoscrollEnabled) {
+                        autoscrollEnabled = false;
+                        chatHistory.classList.add('autoscroll-paused');
+                    }
+                }
+            } catch (_) {}
+        });
+    }
+
     // Initialize model dropdown (will be populated when models.js calls updateModelStatusIndicator)
     initializeModelDropdown();
 
@@ -42,42 +68,34 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 function setupChatEventListeners() {
-    // Send button click
-    sendBtn.onclick = sendMessage;
-
-    // Attachment button click
-    attachmentBtn.onclick = () => {
-        if (!currentLoadedModel) {
-            alert('Please load a model first before attaching images.');
-            return;
-        }
-        if (!isVisionModel(currentLoadedModel)) {
-            alert(`The current model "${currentLoadedModel}" does not support image inputs. Please load a model with "Vision" capabilities to attach images.`);
-            return;
+    // Toggle button click – send or stop streaming
+    toggleBtn.onclick = function () {
+        if (abortController) {
+            abortCurrentRequest();
+        } else {
+            sendMessage();
         }
-        fileAttachment.click();
     };
 
-    // File input change
-    fileAttachment.addEventListener('change', handleFileSelection);
-
-    // Chat input events
-    chatInput.addEventListener('keydown', handleChatInputKeydown);
-    chatInput.addEventListener('paste', handleChatInputPaste);
+    // Send on Enter, clear attachments on Escape
+    if (chatInput) {
+        chatInput.addEventListener('keydown', handleChatInputKeydown);
+        chatInput.addEventListener('paste', handleChatInputPaste);
+    }
 
-    // Model select change
-    modelSelect.addEventListener('change', handleModelSelectChange);
+    // Open file picker and handle image selection
+    if (attachmentBtn && fileAttachment) {
+        attachmentBtn.addEventListener('click', function () {
+            // Let the selection handler validate vision capability, etc.
+            fileAttachment.click();
+        });
+        fileAttachment.addEventListener('change', handleFileSelection);
+    }
 
-    // Send button click
-    sendBtn.addEventListener('click', function() {
-        // Check if we have a loaded model
-        if (currentLoadedModel && modelSelect.value !== '' && !modelSelect.disabled) {
-            sendMessage();
-        } else if (!currentLoadedModel) {
-            // Auto-load default model and send
-            autoLoadDefaultModelAndSend();
-        }
-    });
+    // React to model selection changes
+    if (modelSelect) {
+        modelSelect.addEventListener('change', handleModelSelectChange);
+    }
 }
 
 // Initialize model dropdown with available models
@@ -168,12 +186,15 @@ function updateAttachmentButtonState() {
     updateModelSelectValue();
 
     // Update send button state based on model loading
-    if (modelSelect.disabled) {
-        sendBtn.disabled = true;
-        sendBtn.textContent = 'Loading...';
-    } else {
-        sendBtn.disabled = false;
-        sendBtn.textContent = 'Send';
+    if (toggleBtn) {
+        const loading = !!(modelSelect && modelSelect.disabled);
+        if (isStreaming) {
+            toggleBtn.disabled = false;
+            toggleBtn.textContent = 'Stop';
+        } else {
+            toggleBtn.disabled = loading;
+            toggleBtn.textContent = 'Send';
+        }
     }
     
     if (!currentLoadedModel) {
@@ -224,9 +245,14 @@ async function autoLoadDefaultModelAndSend() {
     // Use the standardized load function
     const success = await loadModelStandardized(DEFAULT_MODEL, {
         // Custom UI updates for auto-loading
-        onLoadingStart: () => { sendBtn.textContent = 'Loading model...'; },
-        // Reset send button text
-        onLoadingEnd: () => { sendBtn.textContent = 'Send'; },
+        onLoadingStart: () => {
+            if (toggleBtn) {
+                toggleBtn.disabled = true;
+                toggleBtn.textContent = 'Send';
+            }
+        },
+        // Reset send button state
+        onLoadingEnd: () => { updateAttachmentButtonState(); },
         // Send the message after successful load
         onSuccess: () => { sendMessage(messageToSend); },
         onError: (error) => {
@@ -306,8 +332,6 @@ function handleChatInputKeydown(e) {
 
 // Handle paste events for images
 async function handleChatInputPaste(e) {
-    e.preventDefault();
-
     const clipboardData = e.clipboardData || window.clipboardData;
     const items = clipboardData.items;
     let hasImage = false;
@@ -330,7 +354,7 @@ async function handleChatInputPaste(e) {
                 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.`);
-                    if (pastedText) chatInput.value = pastedText;
+                    // Don't prevent default if we're not handling the paste
                     return;
                 }
                 // Add to attachedFiles array only if it's an image and model supports vision
@@ -341,13 +365,39 @@ async function handleChatInputPaste(e) {
         }
     }
 
-    // Update input box content - only show text, images will be indicated separately
-    if (pastedText) chatInput.value = pastedText;
+    // If we have images, prevent default and handle specially
+    if (hasImage && attachedFiles.length > 0) {
+        e.preventDefault();
+        
+        // If there's also text, insert it at cursor position
+        if (pastedText) {
+            insertTextAtCursor(chatInput, pastedText);
+        }
 
-    // Update placeholder to show attached images
-    updateInputPlaceholder();
-    updateAttachmentPreviewVisibility();
-    updateAttachmentPreviews();
+        // Update placeholder to show attached images
+        updateInputPlaceholder();
+        updateAttachmentPreviewVisibility();
+        updateAttachmentPreviews();
+    }
+    // If no images, let the browser handle the paste normally (preserves cursor position and undo)
+}
+
+// Helper function to insert text at cursor position
+function insertTextAtCursor(textElement, text) {
+    const start = textElement.selectionStart;
+    const end = textElement.selectionEnd;
+    const currentValue = textElement.value;
+    
+    // Insert the text at the cursor position
+    const newValue = currentValue.substring(0, start) + text + currentValue.substring(end);
+    textElement.value = newValue;
+    
+    // Move cursor to end of inserted text
+    const newCursorPos = start + text.length;
+    textElement.setSelectionRange(newCursorPos, newCursorPos);
+    
+    // Focus the element to ensure cursor is visible
+    textElement.focus();
 }
 
 function clearAttachments() {
@@ -544,6 +594,18 @@ function updateMessageContent(bubbleElement, text, isMarkdown = false) {
     bubbleElement.dataset.thinkExpanded = expanded ? 'true' : 'false';
 }
 
+// Scroll helper that respects user's scroll interaction. If autoscroll is disabled
+// because the user scrolled up, this will not force the view to the bottom.
+function scrollChatToBottom(force = false) {
+    if (!chatHistory) return;
+    if (force || autoscrollEnabled) {
+        // Small timeout to allow DOM insertion/layout to finish in streaming cases
+        setTimeout(() => {
+            try { chatHistory.scrollTop = chatHistory.scrollHeight; } catch (_) {}
+        }, 0);
+    }
+}
+
 function appendMessage(role, text, isMarkdown = false) {
     const div = document.createElement('div');
     div.className = 'chat-message ' + role;
@@ -561,7 +623,7 @@ function appendMessage(role, text, isMarkdown = false) {
 
     div.appendChild(bubble);
     chatHistory.appendChild(div);
-    chatHistory.scrollTop = chatHistory.scrollHeight;
+    scrollChatToBottom();
     return bubble;
 }
 
@@ -604,34 +666,30 @@ function displaySystemMessage() {
 
         div.appendChild(bubble);
         chatHistory.appendChild(div);
-        chatHistory.scrollTop = chatHistory.scrollHeight;
+        scrollChatToBottom();
 
         systemMessageElement = div;
     }
 }
 
-function toggleThinkTokens(header) {
-    const container = header.parentElement;
-    const content = container.querySelector('.think-tokens-content');
-    const chevron = header.querySelector('.think-tokens-chevron');
-    const bubble = header.closest('.chat-bubble');
+function abortCurrentRequest() {
+    if (abortController) {
+        // Abort the in-flight fetch stream immediately
+        abortController.abort();
 
-    const nowCollapsed = !container.classList.contains('collapsed'); // current (before toggle) expanded?
-    if (nowCollapsed) {
-        // Collapse
-        content.style.display = 'none';
-        chevron.textContent = '▶';
-        container.classList.add('collapsed');
-        if (bubble) bubble.dataset.thinkExpanded = 'false';
-    } else {
-        // Expand
-        content.style.display = 'block';
-        chevron.textContent = '▼';
-        container.classList.remove('collapsed');
-        if (bubble) bubble.dataset.thinkExpanded = 'true';
+        // Also signal the server to halt generation promptly (helps slow CPU backends)
+        try {
+            // Fire-and-forget; no await to avoid blocking UI
+            fetch(getServerBaseUrl() + '/api/v1/halt', { method: 'GET', keepalive: true }).catch(() => {});
+        } catch (_) {}
+        abortController = null;
+        isStreaming = false;
+        updateAttachmentButtonState();
+        console.log('Streaming request aborted by user.');
     }
 }
 
+
 // ---------- Reasoning Parsing (Harmony + <think>) ----------
 
 function parseReasoningBlocks(raw) {
@@ -779,7 +837,22 @@ function stopThinkingAnimation(container, finalLabel = 'Thought Process') {
 
 async function sendMessage(existingTextIfAny) {
     const text = (existingTextIfAny !== undefined ? existingTextIfAny : chatInput.value.trim());
-    if (!text && attachedFiles.length === 0) return;
+
+    // Prepare abort controller for this request
+    abortController = new AbortController();
+    // UI state: set button to Stop
+    if (toggleBtn) {
+        toggleBtn.disabled = false;
+        toggleBtn.textContent = 'Stop';
+    }
+    if (!text && attachedFiles.length === 0) {
+        // Nothing to send; revert button state and clear abort handle
+        abortController = null;
+        updateAttachmentButtonState();
+        return;
+    }
+
+    isStreaming = true;
 
     // Remove system message when user starts chatting
     if (systemMessageElement) {
@@ -878,7 +951,7 @@ async function sendMessage(existingTextIfAny) {
     updateInputPlaceholder(); // Reset placeholder
     updateAttachmentPreviewVisibility(); // Hide preview container
     updateAttachmentPreviews(); // Clear previews
-    sendBtn.disabled = true;
+    // Keep the Send/Stop button enabled during streaming so user can abort.
 
     // Streaming OpenAI completions (placeholder, adapt as needed)
     let llmText = '';
@@ -898,7 +971,8 @@ async function sendMessage(existingTextIfAny) {
         const resp = await httpRequest(getServerBaseUrl() + '/api/v1/chat/completions', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload)
+            body: JSON.stringify(payload),
+            signal: abortController ? abortController.signal : undefined
         });
         if (!resp.body) throw new Error('No stream');
         const reader = resp.body.getReader();
@@ -998,7 +1072,7 @@ async function sendMessage(existingTextIfAny) {
                         llmText += '<think>' + parts.slice(1).join('<think>');
                         receivedAnyReasoning = true;
                         updateMessageContent(llmBubble, llmText, true);
-                        chatHistory.scrollTop = chatHistory.scrollHeight;
+                        scrollChatToBottom();
                         continue;
                     }
 
@@ -1006,7 +1080,7 @@ async function sendMessage(existingTextIfAny) {
                 }
 
                 updateMessageContent(llmBubble, llmText, true);
-                chatHistory.scrollTop = chatHistory.scrollHeight;
+                scrollChatToBottom();
             }
         }
 
@@ -1019,7 +1093,11 @@ async function sendMessage(existingTextIfAny) {
         messages.push({ role: 'assistant', ...assistantMsg });
 
     } catch (e) {
-        let detail = e.message;
+        // If the request was aborted by the user, just clean up UI without error banner
+        if (e.name === 'AbortError') {
+            console.log('Chat request aborted by user.');
+        } else {
+            let detail = e.message;
         try {
             const errPayload = { model: currentLoadedModel, messages: messages, stream: false };
             const errResp = await httpJson(getServerBaseUrl() + '/api/v1/chat/completions', {
@@ -1029,10 +1107,15 @@ async function sendMessage(existingTextIfAny) {
             });
             if (errResp && errResp.detail) detail = errResp.detail;
         } catch (_) {}
-        llmBubble.textContent = '[Error: ' + detail + ']';
-        showErrorBanner(`Chat error: ${detail}`);
+        if (e && e.name !== 'AbortError') {
+            llmBubble.textContent = '[Error: ' + detail + ']';
+            showErrorBanner(`Chat error: ${detail}`);
+        }
+    }
     }
-    sendBtn.disabled = false;
-    // Force a final render to trigger stop animation if needed
+    // Reset UI state after streaming finishes
+    abortController = null;
+    isStreaming = false;
+    updateAttachmentButtonState();
     updateMessageContent(llmBubble, llmText, true);
-}
+}

lemonade/tools/server/static/js/models.js

@@ -93,6 +93,11 @@ async function updateModelStatusIndicator() {
     if (modelsTab && modelsTab.classList.contains('active')) {
         // Use the display-only version to avoid re-fetching data we just fetched
         refreshModelMgmtUIDisplay();
+        
+        // Also refresh the model browser to show updated button states
+        if (currentCategory === 'hot') displayHotModels();
+        else if (currentCategory === 'recipes') displayModelsByRecipe(currentFilter);
+        else if (currentCategory === 'labels') displayModelsByLabel(currentFilter);
     }
 	
     if (health && health.model_loaded) {
@@ -296,6 +301,21 @@ function displayModelsByRecipe(recipe) {
     
     modelList.innerHTML = '';
     
+    // Add FastFlowLM notice if this is the FLM recipe
+    if (recipe === 'flm') {
+        const notice = document.createElement('div');
+        notice.className = 'flm-notice';
+        notice.innerHTML = `
+            <div class="flm-notice-content">
+                <div class="flm-notice-icon">⚠️</div>
+                <div class="flm-notice-text">
+                    <strong><a href="https://github.com/FastFlowLM/FastFlowLM">FastFlowLM (FLM)</a> support in Lemonade is in Early Access.</strong> FLM is free for non-commercial use, however note that commercial licensing terms apply. Installing an FLM model will automatically launch the FLM installer, which will require you to accept the FLM license terms to continue. Contact <a href="mailto:lemonade@amd.com">lemonade@amd.com</a> for inquiries.
+                </div>
+            </div>
+        `;
+        modelList.appendChild(notice);
+    }
+    
     Object.entries(allModels).forEach(([modelId, modelData]) => {
         if (modelData.recipe === recipe) {
             createModelItem(modelId, modelData, modelList);
@@ -378,9 +398,17 @@ function createModelItem(modelId, modelData, container) {
             loadBtn.textContent = '🚀';
             loadBtn.title = 'Load';
             loadBtn.onclick = () => {
-				modelSelect.value = modelId;
-				modelSelect.dispatchEvent(new Event('change', { bubbles: true }));
-				};
+                loadModelStandardized(modelId, {
+                    loadButton: loadBtn,
+                    onSuccess: (loadedModelId) => {
+                        console.log(`Model ${loadedModelId} loaded successfully`);
+                    },
+                    onError: (error, failedModelId) => {
+                        console.error(`Failed to load model ${failedModelId}:`, error);
+                        showErrorBanner('Failed to load model: ' + error.message);
+                    }
+                });
+            };
             actions.appendChild(loadBtn);
         }
         
@@ -405,7 +433,7 @@ async function installModel(modelId) {
     
     modelItems.forEach(item => {
         const nameElement = item.querySelector('.model-item-name .model-labels-container span');
-        if (nameElement && nameElement.textContent === modelId) {
+        if (nameElement && nameElement.getAttribute('data-model-id') === modelId) {
             installBtn = item.querySelector('.model-item-btn.install');
         }
     });
@@ -443,60 +471,32 @@ async function installModel(modelId) {
         // Reset button state on error
         if (installBtn) {
             installBtn.disabled = false;
-            installBtn.textContent = 'Install';
+            installBtn.textContent = '📥';
         }
     }
 }
 
-// Load model
-async function loadModel(modelId) {
-    const indicator = document.getElementById('model-status-indicator');
-    const select = document.getElementById('model-select');
-    
-    // Set loading state for indicator
-	modelSelect.value = 'loading-model';
-    indicator.classList.remove('loaded', 'online', 'offline');
-    indicator.classList.add('loading');
-    select.disabled = true;
 
-    // Find the load button and show loading state
+// Delete model
+async function deleteModel(modelId) {
+    if (!confirm(`Are you sure you want to delete the model "${modelId}"?`)) {
+        return;
+    }
+    
+    // Find the delete button and show loading state
     const modelItems = document.querySelectorAll('.model-item');
-    let loadBtn = null;
+    let deleteBtn = null;
     
     modelItems.forEach(item => {
         const nameElement = item.querySelector('.model-item-name .model-labels-container span');
-        if (nameElement && nameElement.textContent === modelId) {
-            loadBtn = item.querySelector('.model-item-btn.load');
+        if (nameElement && nameElement.getAttribute('data-model-id') === modelId) {
+            deleteBtn = item.querySelector('.model-item-btn.delete');
         }
     });
-
-    if (loadBtn) {
-        loadBtn.disabled = true;
-        loadBtn.textContent = '⏳';
-        loadBtn.classList.add('loading');
-    }
-    
-    // Use the standardized load function
-    const success = await loadModelStandardized(modelId, {
-        loadButton: loadBtn,
-        onSuccess: (loadedModelId) => {
-            console.log(`Model ${loadedModelId} loaded successfully`);
-            // Refresh model list after successful load
-            if (currentCategory === 'hot') displayHotModels();
-            else if (currentCategory === 'recipes') displayModelsByRecipe(currentFilter);
-            else if (currentCategory === 'labels') displayModelsByLabel(currentFilter);
-        },
-        onError: (error, failedModelId) => {
-            console.error(`Failed to load model ${failedModelId}:`, error);
-            showErrorBanner('Failed to load model: ' + error.message);
-        }
-    });
-}
-
-// Delete model
-async function deleteModel(modelId) {
-    if (!confirm(`Are you sure you want to delete the model "${modelId}"?`)) {
-        return;
+    
+    if (deleteBtn) {
+        deleteBtn.disabled = true;
+        deleteBtn.textContent = '⏳';
     }
     
     try {
@@ -522,6 +522,12 @@ async function deleteModel(modelId) {
     } catch (error) {
         console.error('Error deleting model:', error);
         showErrorBanner('Failed to delete model: ' + error.message);
+        
+        // Reset button state on error
+        if (deleteBtn) {
+            deleteBtn.disabled = false;
+            deleteBtn.textContent = '🗑️';
+        }
     }
 }
 
@@ -529,16 +535,25 @@ async function deleteModel(modelId) {
 
 // Create model name with labels
 function createModelNameWithLabels(modelId, serverModels) {
+    const modelData = serverModels[modelId];
     const container = document.createElement('div');
     container.className = 'model-labels-container';
     
     // Model name
     const nameSpan = document.createElement('span');
-    nameSpan.textContent = modelId;
+
+    // Store the original modelId as a data attribute for button finding
+    nameSpan.setAttribute('data-model-id', modelId);
+    
+    // Append size if available
+    let displayName = modelId;
+    if (modelData && typeof modelData.size === 'number') {
+        displayName += ` (${modelData.size} GB)`;
+    }
+    nameSpan.textContent = displayName;
     container.appendChild(nameSpan);
     
     // Labels
-    const modelData = serverModels[modelId];
     if (modelData && modelData.labels && Array.isArray(modelData.labels)) {
         modelData.labels.forEach(label => {
             const labelLower = label.toLowerCase();
@@ -587,7 +602,15 @@ document.addEventListener('DOMContentLoaded', async function() {
         modelSelect.addEventListener('change', async function() {
             const modelId = this.value;
             if (modelId) {
-                await loadModel(modelId);
+                await loadModelStandardized(modelId, {
+                    onSuccess: (loadedModelId) => {
+                        console.log(`Model ${loadedModelId} loaded successfully`);
+                    },
+                    onError: (error, failedModelId) => {
+                        console.error(`Failed to load model ${failedModelId}:`, error);
+                        showErrorBanner('Failed to load model: ' + error.message);
+                    }
+                });
             }
         });
     }
@@ -650,7 +673,7 @@ function renderModelTable(tbody, models, allModels, emptyMessage) {
             btn.title = 'Install model';
             btn.onclick = async function() {
                 btn.disabled = true;
-                btn.textContent = 'Installing...';
+                btn.textContent = '⏳';
                 btn.classList.add('installing-btn');
                 try {
                     await httpRequest(getServerBaseUrl() + '/api/v1/pull', {
@@ -665,6 +688,7 @@ function renderModelTable(tbody, models, allModels, emptyMessage) {
                     }
                 } catch (e) {
                     btn.textContent = 'Error';
+                    btn.disabled = false;
                     showErrorBanner(`Failed to install model: ${e.message}`);
                 }
             };
@@ -741,7 +765,7 @@ async function refreshModelMgmtUI() {
                     return;
                 }
                 btn.disabled = true;
-                btn.textContent = 'Deleting...';
+                btn.textContent = '⏳';
                 btn.style.backgroundColor = '#888';
                 try {
                     await httpRequest(getServerBaseUrl() + '/api/v1/delete', {
@@ -757,6 +781,7 @@ async function refreshModelMgmtUI() {
                 } catch (e) {
                     btn.textContent = 'Error';
                     btn.disabled = false;
+                    btn.style.backgroundColor = '';
                     showErrorBanner(`Failed to delete model: ${e.message}`);
                 }
             };
@@ -843,6 +868,10 @@ function refreshModelMgmtUIDisplay() {
             btn.title = 'Remove this model';
             btn.onclick = async function() {
                 if (confirm(`Are you sure you want to remove the model "${mid}"?`)) {
+                    btn.disabled = true;
+                    btn.textContent = '⏳';
+                    const originalBgColor = btn.style.backgroundColor;
+                    btn.style.backgroundColor = '#888';
                     try {
                         await httpRequest(getServerBaseUrl() + '/api/v1/delete', {
                             method: 'POST',
@@ -853,6 +882,10 @@ function refreshModelMgmtUIDisplay() {
                     } catch (error) {
                         console.error('Error removing model:', error);
                         showErrorBanner('Failed to remove model: ' + error.message);
+                        // Reset button state on error
+                        btn.disabled = false;
+                        btn.textContent = '−';
+                        btn.style.backgroundColor = originalBgColor;
                     }
                 }
             };
@@ -899,13 +932,14 @@ function setupRegisterModelForm() {
             const checkpoint = document.getElementById('register-checkpoint').value.trim();
             const recipe = document.getElementById('register-recipe').value;
             const reasoning = document.getElementById('register-reasoning').checked;
+            const vision = document.getElementById('register-vision').checked;
             const mmproj = document.getElementById('register-mmproj').value.trim();
             
             if (!name || !recipe) { 
                 return; 
             }
             
-            const payload = { model_name: name, recipe, reasoning };
+            const payload = { model_name: name, recipe, reasoning, vision };
             if (checkpoint) payload.checkpoint = checkpoint;
             if (mmproj) payload.mmproj = mmproj;
             
@@ -949,5 +983,4 @@ window.selectLabel = selectLabel;
 window.showAddModelForm = showAddModelForm;
 window.unloadModel = unloadModel;
 window.installModel = installModel;
-window.loadModel = loadModel;
 window.deleteModel = deleteModel;