lemonade-sdk 8.1.4__py3-none-any.whl → 8.2.2__py3-none-any.whl

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

@@ -3,9 +3,11 @@
 // State variables for model management
 let currentLoadedModel = null;
 let installedModels = new Set(); // Track which models are actually installed
+let activeOperations = new Set(); // Track models currently being downloaded or loaded
 
-// Make installedModels accessible globally for the chat dropdown
+// Make installedModels and activeOperations accessible globally
 window.installedModels = installedModels;
+window.activeOperations = activeOperations;
 let currentCategory = 'hot';
 let currentFilter = null;
 
@@ -42,48 +44,95 @@ async function checkModelHealth() {
     }
 }
 
+// Populate the model dropdown with all installed models
+function populateModelDropdown() {
+	const indicator = document.getElementById('model-status-indicator');
+    const select = document.getElementById('model-select');
+    select.innerHTML = '';
+    
+    // Add the default option
+    const defaultOption = document.createElement('option');
+    defaultOption.value = '';
+    defaultOption.textContent = 'Click to select a model ▼';
+    select.appendChild(defaultOption);
+
+	// Add the hidden 'Server Offline' option
+	const hiddenOption = document.createElement('option');
+	hiddenOption.value = 'server-offline';
+	hiddenOption.textContent = 'Server Offline';
+	hiddenOption.hidden = true;
+	select.appendChild(hiddenOption);
+	
+    // Get all installed models from the global set
+    const sortedModels = Array.from(installedModels).sort();
+    
+    // Add options for each installed model
+    sortedModels.forEach(modelId => {
+        const option = document.createElement('option');
+        option.value = modelId;
+        option.textContent = modelId;
+        select.appendChild(option);
+    });
+}
+
 // Update model status indicator
 async function updateModelStatusIndicator() {
     const indicator = document.getElementById('model-status-indicator');
-    const statusText = document.getElementById('model-status-text');
-    const unloadBtn = document.getElementById('model-unload-btn');
-    
+    const select = document.getElementById('model-select');
+	const buttonIcons = document.querySelectorAll('button');
+      
     // Fetch both health and installed models
     const [health] = await Promise.all([
         checkModelHealth(),
         fetchInstalledModels()
     ]);
-    
-    // Refresh model dropdown in chat after fetching installed models
-    if (window.initializeModelDropdown) {
-        window.initializeModelDropdown();
-    }
-    
+	
+	// Populate the dropdown with the newly fetched installed models
+    populateModelDropdown();
+
     // Refresh model management UI if we're on the models tab
     const modelsTab = document.getElementById('content-models');
     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);
     }
-    
-    // Remove any click handlers
-    indicator.onclick = null;
-    
+	
     if (health && health.model_loaded) {
         // Model is loaded - show model name with online status
+		indicator.classList.remove('online', 'offline', 'loading'); 
         currentLoadedModel = health.model_loaded;
-        updateStatusIndicator(health.model_loaded, 'loaded');
-        unloadBtn.style.display = 'block';
-    } else if (health) {
+        indicator.classList.add('loaded');
+        select.value = currentLoadedModel;
+        select.disabled = false;
+		buttonIcons.forEach(btn => btn.disabled = false);
+    } else if (health !== null) {
         // Server is online but no model loaded
+		indicator.classList.remove('loaded', 'offline', 'loading');
         currentLoadedModel = null;
-        updateStatusIndicator('Server Online', 'online');
-        unloadBtn.style.display = 'none';
+        indicator.classList.add('online');
+        select.value = ''; // Set to the "Click to select a model ▼" option
+        select.disabled = false;
+		buttonIcons.forEach(btn => btn.disabled = false);
     } else {
         // Server is offline
+		indicator.classList.remove('loaded', 'online', 'loading');
         currentLoadedModel = null;
-        updateStatusIndicator('Server Offline', 'offline');
-        unloadBtn.style.display = 'none';
+		// Add the hidden 'Server Offline' option
+		const hiddenOption = document.createElement('option');
+		hiddenOption.value = 'server-offline';
+		hiddenOption.textContent = 'Server Offline';
+		hiddenOption.hidden = true;
+		select.appendChild(hiddenOption);
+        indicator.classList.add('offline');
+        select.value = 'server-offline';
+        select.disabled = true;
+		buttonIcons.forEach(btn => btn.disabled = true);
+		return;
     }
 }
 
@@ -92,9 +141,18 @@ async function unloadModel() {
     if (!currentLoadedModel) return;
     
     try {
+        // Set loading state
+        const indicator = document.getElementById('model-status-indicator');
+        const select = document.getElementById('model-select');
+        indicator.classList.remove('loaded', 'online', 'offline');
+        indicator.classList.add('loading');
+        select.disabled = true;
+        select.value = currentLoadedModel; // Keep the selected model visible during unload
+
         await httpRequest(getServerBaseUrl() + '/api/v1/unload', {
             method: 'POST'
         });
+        
         await updateModelStatusIndicator();
         
         // Refresh model list to show updated button states
@@ -104,11 +162,35 @@ async function unloadModel() {
     } catch (error) {
         console.error('Error unloading model:', error);
         showErrorBanner('Failed to unload model: ' + error.message);
+        await updateModelStatusIndicator(); // Revert state on error
     }
 }
 
 // === Model Browser Management ===
 
+// Update visibility of categories/subcategories based on available models
+function updateCategoryVisibility() {
+    const allModels = window.SERVER_MODELS || {};
+    
+    // Count models for each recipe
+    const recipeCounts = {};
+    const recipes = ['llamacpp', 'oga-hybrid', 'oga-npu', 'oga-cpu', 'flm'];
+    recipes.forEach(recipe => {
+        recipeCounts[recipe] = 0;
+        Object.entries(allModels).forEach(([modelId, modelData]) => {
+            if (modelData.recipe === recipe && (modelData.suggested || installedModels.has(modelId))) {
+                recipeCounts[recipe]++;
+            }
+        });
+        
+        // Show/hide recipe subcategory
+        const subcategory = document.querySelector(`[data-recipe="${recipe}"]`);
+        if (subcategory) {
+            subcategory.style.display = recipeCounts[recipe] > 0 ? 'block' : 'none';
+        }
+    });
+}
+
 // Toggle category in model browser (only for Hot Models now)
 function toggleCategory(categoryName) {
     const header = document.querySelector(`[data-category="${categoryName}"] .category-header`);
@@ -226,7 +308,7 @@ function displayHotModels() {
     modelList.innerHTML = '';
     
     Object.entries(allModels).forEach(([modelId, modelData]) => {
-        if (modelData.labels && modelData.labels.includes('hot')) {
+        if (modelData.labels && modelData.labels.includes('hot') && (modelData.suggested || installedModels.has(modelId))) {
             createModelItem(modelId, modelData, modelList);
         }
     });
@@ -244,8 +326,23 @@ 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) {
+        if (modelData.recipe === recipe && (modelData.suggested || installedModels.has(modelId))) {
             createModelItem(modelId, modelData, modelList);
         }
     });
@@ -269,7 +366,7 @@ function displayModelsByLabel(label) {
             if (modelId.startsWith('user.')) {
                 createModelItem(modelId, modelData, modelList);
             }
-        } else if (modelData.labels && modelData.labels.includes(label)) {
+        } else if (modelData.labels && modelData.labels.includes(label) && (modelData.suggested || installedModels.has(modelId))) {
             createModelItem(modelId, modelData, modelList);
         }
     });
@@ -321,10 +418,22 @@ function createModelItem(modelId, modelData, container) {
             actions.appendChild(unloadBtn);
         } else {
             const loadBtn = document.createElement('button');
+			const modelSelect = document.getElementById('model-select');
             loadBtn.className = 'model-item-btn load';
             loadBtn.textContent = '🚀';
             loadBtn.title = 'Load';
-            loadBtn.onclick = () => loadModel(modelId);
+            loadBtn.onclick = () => {
+                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);
         }
         
@@ -349,7 +458,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');
         }
     });
@@ -359,6 +468,9 @@ async function installModel(modelId) {
         installBtn.textContent = '⏳';
     }
     
+    // Track this download as active
+    activeOperations.add(modelId);
+    
     try {
         const modelData = window.SERVER_MODELS[modelId];
         await httpRequest(getServerBaseUrl() + '/api/v1/pull', {
@@ -367,6 +479,9 @@ async function installModel(modelId) {
             body: JSON.stringify({ model_name: modelId, ...modelData })
         });
         
+        // Download complete - remove from active operations
+        activeOperations.delete(modelId);
+        
         // Refresh installed models and model status
         await fetchInstalledModels();
         await updateModelStatusIndicator();
@@ -384,47 +499,38 @@ async function installModel(modelId) {
         console.error('Error installing model:', error);
         showErrorBanner('Failed to install model: ' + error.message);
         
+        // Remove from active operations on error too
+        activeOperations.delete(modelId);
+        
         // Reset button state on error
         if (installBtn) {
             installBtn.disabled = false;
-            installBtn.textContent = 'Install';
+            installBtn.textContent = '📥';
         }
     }
 }
 
-// Load model
-async function loadModel(modelId) {
-    // 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');
         }
     });
     
-    // 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);
-        }
-    });
-}
-
-// 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 {
@@ -433,7 +539,11 @@ async function deleteModel(modelId) {
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ model_name: modelId })
         });
-        
+        installedModels.delete(modelId);
+        // Remove custom models from SERVER_MODELS to prevent them from reappearing without having to do a manual refresh
+        if (modelId.startsWith('user.')) {
+            delete window.SERVER_MODELS[modelId];
+        }
         // Refresh installed models and model status
         await fetchInstalledModels();
         await updateModelStatusIndicator();
@@ -450,6 +560,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 = '🗑️';
+        }
     }
 }
 
@@ -457,16 +573,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();
@@ -488,6 +613,8 @@ function createModelNameWithLabels(modelId, serverModels) {
                 labelClass = 'reranking';
             } else if (labelLower === 'coding') {
                 labelClass = 'coding';
+            } else if (labelLower === 'tool-calling') {
+                labelClass = 'tool-calling';
             }
             labelSpan.className = `model-label ${labelClass}`;
             labelSpan.textContent = label;
@@ -511,8 +638,8 @@ document.addEventListener('DOMContentLoaded', async function() {
     // Initial fetch of model data - this will populate installedModels
     await updateModelStatusIndicator();
     
-    // Set up periodic refresh of model status
-    setInterval(updateModelStatusIndicator, 5000); // Check every 5 seconds
+    // Update category visibility on initial load
+    updateCategoryVisibility();
     
     // Initialize model browser with hot models
     displayHotModels();
@@ -528,6 +655,46 @@ document.addEventListener('DOMContentLoaded', async function() {
     
     // Set up register model form
     setupRegisterModelForm();
+    setupFolderSelection();
+    
+    // Set up smart periodic refresh to detect external model changes
+    // Poll every 15 seconds (much less aggressive than 1 second)
+    // Only poll when page is visible to save resources
+    let pollInterval = null;
+    
+    function startPolling() {
+        if (!pollInterval) {
+            pollInterval = setInterval(async () => {
+                // Only update if page is visible AND no active operations
+                // Skip polling during downloads/loads to prevent false positives
+                if (document.visibilityState === 'visible' && activeOperations.size === 0) {
+                    await updateModelStatusIndicator();
+                }
+            }, 15000); // Check every 15 seconds
+        }
+    }
+    
+    function stopPolling() {
+        if (pollInterval) {
+            clearInterval(pollInterval);
+            pollInterval = null;
+        }
+    }
+    
+    // Start polling when page is visible, stop when hidden
+    document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'visible') {
+            // Page became visible - update immediately and resume polling
+            updateModelStatusIndicator();
+            startPolling();
+        } else {
+            // Page hidden - stop polling to save resources
+            stopPolling();
+        }
+    });
+    
+    // Start polling initially
+    startPolling();
 });
 
 // Toggle Add Model form
@@ -566,14 +733,22 @@ 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');
+                
+                // Track this download as active
+                activeOperations.add(mid);
+                
                 try {
                     await httpRequest(getServerBaseUrl() + '/api/v1/pull', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({ model_name: mid })
                     });
+                    
+                    // Download complete - remove from active operations
+                    activeOperations.delete(mid);
+                    
                     await refreshModelMgmtUI();
                     // Update chat dropdown too if loadModels function exists
                     if (typeof loadModels === 'function') {
@@ -581,7 +756,11 @@ function renderModelTable(tbody, models, allModels, emptyMessage) {
                     }
                 } catch (e) {
                     btn.textContent = 'Error';
+                    btn.disabled = false;
                     showErrorBanner(`Failed to install model: ${e.message}`);
+                    
+                    // Remove from active operations on error too
+                    activeOperations.delete(mid);
                 }
             };
             tdBtn.appendChild(btn);
@@ -657,7 +836,7 @@ async function refreshModelMgmtUI() {
                     return;
                 }
                 btn.disabled = true;
-                btn.textContent = 'Deleting...';
+                btn.textContent = '⏳';
                 btn.style.backgroundColor = '#888';
                 try {
                     await httpRequest(getServerBaseUrl() + '/api/v1/delete', {
@@ -673,11 +852,11 @@ async function refreshModelMgmtUI() {
                 } catch (e) {
                     btn.textContent = 'Error';
                     btn.disabled = false;
+                    btn.style.backgroundColor = '';
                     showErrorBanner(`Failed to delete model: ${e.message}`);
                 }
             };
             tdBtn.appendChild(btn);
-            
             tr.appendChild(tdName);
             tr.appendChild(tdBtn);
             installedTbody.appendChild(tr);
@@ -699,6 +878,11 @@ async function refreshModelMgmtUI() {
     if (window.initializeModelDropdown) {
         window.initializeModelDropdown();
     }
+    
+    // Update system message when installed models change
+    if (window.displaySystemMessage) {
+        window.displaySystemMessage();
+    }
 }
 
 // Make refreshModelMgmtUI globally accessible
@@ -755,6 +939,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',
@@ -765,6 +953,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;
                     }
                 }
             };
@@ -807,34 +999,91 @@ function setupRegisterModelForm() {
             if (!name.startsWith('user.')) {
                 name = 'user.' + name;
             }
-            
+
+            // Check if model name already exists
+            const allModels = window.SERVER_MODELS || {};
+            if (allModels[name] || installedModels.has(name)) {
+                showErrorBanner('Model name already exists. Please enter a different name.');
+                registerStatus.textContent = 'Model name already exists';
+                registerStatus.style.color = '#b10819ff';
+                registerStatus.className = 'register-status error';
+                return;
+            }
+
             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 };
-            if (checkpoint) payload.checkpoint = checkpoint;
-            if (mmproj) payload.mmproj = mmproj;
-            
             const btn = document.getElementById('register-submit');
             btn.disabled = true;
             btn.textContent = 'Installing...';
             
             try {
-                await httpRequest(getServerBaseUrl() + '/api/v1/pull', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload)
-                });
+                if (isLocalModel && selectedModelFiles) {
+                    if (recipe === 'llamacpp' && !Array.from(selectedModelFiles).some(file => file.name.toLowerCase().endsWith('.gguf'))) {
+                        throw new Error('No .gguf files found in the selected folder for llamacpp');
+                    }
+
+                    const formData = new FormData();
+                    formData.append('model_name', name);
+                    formData.append('checkpoint', checkpoint);
+                    formData.append('recipe', recipe);
+                    formData.append('reasoning', reasoning);
+                    formData.append('vision', vision);
+                    if (mmproj) formData.append('mmproj', mmproj);
+                    Array.from(selectedModelFiles).forEach(file => {
+                        formData.append('model_files', file, file.webkitRelativePath);
+                    });
+
+                    await httpRequest(getServerBaseUrl() + '/api/v1/add-local-model', {
+                        method: 'POST',
+                        body: formData
+                    });
+                }
+                else {
+                    if (!checkpoint) {
+                        throw new Error('Checkpoint is required for remote models');
+                    }
+                    const payload = { model_name: name, recipe, reasoning, vision };
+                    if (checkpoint) payload.checkpoint = checkpoint;
+                    if (mmproj) payload.mmproj = mmproj;
+                    
+                    await httpRequest(getServerBaseUrl() + '/api/v1/pull', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload)
+                    });
+                }
+
                 registerStatus.textContent = 'Model installed!';
-                registerStatus.style.color = '#27ae60';
+                registerStatus.style.color = '#0eaf51ff';
                 registerStatus.className = 'register-status success';
+
+                // Add custom model to SERVER_MODELS so it appears in the UI without having to do a manual refresh
+                if (name.startsWith('user.')) {
+                    const labels = ['custom'];
+                    if (vision) labels.push('vision');
+                    if (reasoning) labels.push('reasoning');
+
+                    window.SERVER_MODELS[name] = {
+                        recipe: recipe,
+                        labels: labels
+                    };
+                    if (checkpoint) window.SERVER_MODELS[name].checkpoint = checkpoint;
+                    if (mmproj) window.SERVER_MODELS[name].mmproj = mmproj;
+                }
+
                 registerForm.reset();
+                isLocalModel = false;
+                selectedModelFiles = null;
+                document.getElementById('folder-input').value = '';
+
                 await refreshModelMgmtUI();
                 // Update chat dropdown too if loadModels function exists
                 if (typeof loadModels === 'function') {
@@ -853,6 +1102,278 @@ function setupRegisterModelForm() {
         };
     }
 }
+let isLocalModel = false;
+let selectedModelFiles = null;
+// Helper function to find mmproj file in selected folder
+function findMmprojFile(files) {
+    for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const fileName = file.name.toLowerCase();
+        const relativePath = file.webkitRelativePath;
+
+        // Check if file contains 'mmproj' and has .gguf extension
+        if (fileName.includes('mmproj') && fileName.endsWith('.gguf')) {
+            // Return just the filename (last part of the path)
+            return relativePath.split('/').pop();
+        }
+    }
+    return null;
+}
+
+// Helper function to find all non-mmproj GGUF files in selected folder
+function findGgufFiles(files) {
+    const ggufFiles = [];
+    for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const fileName = file.name.toLowerCase();
+        const relativePath = file.webkitRelativePath;
+
+        // Check if file has .gguf extension but is NOT an mmproj file
+        if (fileName.endsWith('.gguf') && !fileName.includes('mmproj')) {
+            // Store just the filename (last part of the path)
+            ggufFiles.push(relativePath.split('/').pop());
+        }
+    }
+    return ggufFiles;
+}
+
+// Helper function to check GGUF files and show appropriate banners
+function checkGgufFilesAndShowBanner(files) {
+    const recipeSelect = document.getElementById('register-recipe');
+
+    // Only check if llamacpp is selected
+    if (!recipeSelect || recipeSelect.value !== 'llamacpp') {
+        return;
+    }
+
+    const mmprojFile = findMmprojFile(files);
+    const ggufFiles = findGgufFiles(files);
+
+    // Hide any existing banners first
+    hideErrorBanner();
+
+    if (ggufFiles.length > 1) {
+        // Multiple GGUF files detected
+        const folderPath = files[0].webkitRelativePath.split('/')[0];
+        let bannerMsg = `More than one variant detected. Please clarify them at the end of the checkpoint name like:\n<folder_name>:<variant>\nExample: ${folderPath}:${ggufFiles[0]}`;
+
+        if (mmprojFile) {
+            bannerMsg += `\n\nDon't forget to enter the mmproj file name and check the 'vision' checkbox if it is a vision model.`;
+        }
+
+        showBanner(bannerMsg, 'warning');
+    } else if (mmprojFile) {
+        // MMproj detected
+        showBanner("MMproj detected and populated. Please validate the file name and check the 'vision' checkbox if it is a vision model.", 'success');
+    }
+}
+// Helper function to auto-fill mmproj field if llamacpp is selected
+function autoFillMmproj() {
+    const recipeSelect = document.getElementById('register-recipe');
+    const mmprojInput = document.getElementById('register-mmproj');
+
+    if (recipeSelect && mmprojInput && isLocalModel && selectedModelFiles) {
+        const selectedRecipe = recipeSelect.value;
+
+        if (selectedRecipe === 'llamacpp') {
+            const mmprojFile = findMmprojFile(selectedModelFiles);
+            if (mmprojFile) {
+                mmprojInput.value = mmprojFile;
+            }
+
+            // Check GGUF files and show appropriate banner
+            checkGgufFilesAndShowBanner(selectedModelFiles);
+        } else {
+            // Hide banners if not llamacpp
+            hideErrorBanner();
+        }
+    }
+}
+function setupFolderSelection() {
+    const selectFolderBtn = document.getElementById('select-folder-btn');
+    const folderInput = document.getElementById('folder-input');
+    const checkpointInput = document.getElementById('register-checkpoint');
+    const recipeSelect = document.getElementById('register-recipe');
+
+    if (selectFolderBtn && folderInput && checkpointInput) {
+        selectFolderBtn.addEventListener('click', () => {
+            folderInput.click();
+        });
+
+        folderInput.addEventListener('change', (event) => {
+            const files = event.target.files;
+            if (files.length > 0) {
+                const firstFile = files[0];
+                const folderPath = firstFile.webkitRelativePath.split('/')[0];
+                checkpointInput.value = folderPath;
+                isLocalModel = true;
+                selectedModelFiles = files;
+
+                // Auto-fill mmproj if llamacpp is already selected
+                autoFillMmproj();
+            }
+            else {
+                isLocalModel = false;
+                selectedModelFiles = null;
+                checkpointInput.value = '';
+                hideErrorBanner();
+            }
+        });
+
+        // Add listener to recipe dropdown to auto-fill mmproj when changed to llamacpp
+        if (recipeSelect) {
+            recipeSelect.addEventListener('change', () => {
+                autoFillMmproj();
+            });
+        }
+    }
+}
+// === Migration/Cleanup Functions ===
+
+// Store incompatible models data globally
+let incompatibleModelsData = null;
+
+// Check for incompatible models on page load
+async function checkIncompatibleModels() {
+    try {
+        const response = await httpJson(getServerBaseUrl() + '/api/v1/migration/incompatible-models');
+        incompatibleModelsData = response;
+
+        if (response.count > 0) {
+            showMigrationBanner(response.count, response.total_size);
+        }
+    } catch (error) {
+        console.error('Error checking for incompatible models:', error);
+    }
+}
+
+// Show migration banner
+function showMigrationBanner(count, totalSize) {
+    const banner = document.getElementById('migration-banner');
+    const msg = document.getElementById('migration-banner-msg');
+
+    const sizeGB = (totalSize / (1024 * 1024 * 1024)).toFixed(1);
+    msg.textContent = `Found ${count} incompatible RyzenAI model${count > 1 ? 's' : ''} (${sizeGB} GB). Clean up to free disk space.`;
+    banner.style.display = 'flex';
+}
+
+// Hide migration banner
+function hideMigrationBanner() {
+    const banner = document.getElementById('migration-banner');
+    banner.style.display = 'none';
+}
+
+// Show migration modal with model list
+function showMigrationModal() {
+    if (!incompatibleModelsData || incompatibleModelsData.count === 0) {
+        return;
+    }
+
+    const modal = document.getElementById('migration-modal');
+    const modelList = document.getElementById('migration-model-list');
+    const totalSize = document.getElementById('migration-total-size');
+
+    // Populate model list
+    modelList.innerHTML = '';
+    incompatibleModelsData.models.forEach(model => {
+        const item = document.createElement('div');
+        item.className = 'migration-model-item';
+
+        const nameSpan = document.createElement('span');
+        nameSpan.className = 'migration-model-name';
+        nameSpan.textContent = model.name;
+
+        const sizeSpan = document.createElement('span');
+        sizeSpan.className = 'migration-model-size';
+        sizeSpan.textContent = model.size_formatted;
+
+        item.appendChild(nameSpan);
+        item.appendChild(sizeSpan);
+        modelList.appendChild(item);
+    });
+
+    // Set total size
+    const sizeGB = (incompatibleModelsData.total_size / (1024 * 1024 * 1024)).toFixed(1);
+    totalSize.textContent = `${sizeGB} GB`;
+
+    modal.style.display = 'flex';
+}
+
+// Hide migration modal
+function hideMigrationModal() {
+    const modal = document.getElementById('migration-modal');
+    modal.style.display = 'none';
+}
+
+// Delete incompatible models
+async function deleteIncompatibleModels() {
+    if (!incompatibleModelsData || incompatibleModelsData.count === 0) {
+        return;
+    }
+
+    const modelPaths = incompatibleModelsData.models.map(m => m.path);
+
+    try {
+        // Disable buttons during deletion
+        const deleteBtn = document.querySelector('.delete-btn');
+        const cancelBtn = document.querySelector('.cancel-btn');
+        deleteBtn.disabled = true;
+        cancelBtn.disabled = true;
+        deleteBtn.textContent = 'Deleting...';
+
+        const response = await httpRequest(getServerBaseUrl() + '/api/v1/migration/cleanup', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ model_paths: modelPaths })
+        });
+
+        const result = await response.json();
+
+        // Close modal
+        hideMigrationModal();
+
+        // Hide banner
+        hideMigrationBanner();
+
+        // Show success message
+        showSuccessMessage(`Successfully deleted ${result.success_count} model${result.success_count > 1 ? 's' : ''}, freed ${result.freed_size_formatted}`);
+
+        // Clear cached data
+        incompatibleModelsData = null;
+
+    } catch (error) {
+        console.error('Error deleting incompatible models:', error);
+        showErrorBanner('Failed to delete models: ' + error.message);
+
+        // Re-enable buttons
+        const deleteBtn = document.querySelector('.delete-btn');
+        const cancelBtn = document.querySelector('.cancel-btn');
+        deleteBtn.disabled = false;
+        cancelBtn.disabled = false;
+        deleteBtn.textContent = 'Delete All';
+    }
+}
+
+// Show success message (reuse error banner with green color)
+function showSuccessMessage(message) {
+    const banner = document.getElementById('error-banner');
+    const msg = document.getElementById('error-banner-msg');
+    msg.textContent = message;
+    banner.style.backgroundColor = '#2d7f47';
+    banner.style.display = 'flex';
+
+    // Auto-hide after 5 seconds
+    setTimeout(() => {
+        banner.style.display = 'none';
+        banner.style.backgroundColor = ''; // Reset to default
+    }, 5000);
+}
+
+// Check for incompatible models when page loads
+document.addEventListener('DOMContentLoaded', function() {
+    // Run check after a short delay to let the page load
+    setTimeout(checkIncompatibleModels, 1000);
+});
 
 // Make functions globally available for HTML onclick handlers and other components
 window.toggleCategory = toggleCategory;
@@ -861,5 +1382,8 @@ window.selectLabel = selectLabel;
 window.showAddModelForm = showAddModelForm;
 window.unloadModel = unloadModel;
 window.installModel = installModel;
-window.loadModel = loadModel;
 window.deleteModel = deleteModel;
+window.showMigrationModal = showMigrationModal;
+window.hideMigrationModal = hideMigrationModal;
+window.hideMigrationBanner = hideMigrationBanner;
+window.deleteIncompatibleModels = deleteIncompatibleModels;