feat: add model exclution functionality frontend

static/js/api/baseModelApi.js

@@ -209,13 +209,7 @@ export function replaceModelPreview(filePath, modelType = 'lora') {
 
 // Delete a model (generic)
 export function deleteModel(filePath, modelType = 'lora') {
-    if (modelType === 'checkpoint') {
-        confirmDelete('Are you sure you want to delete this checkpoint?', () => {
-            performDelete(filePath, modelType);
-        });
-    } else {
-        showDeleteModal(filePath);
-    }
+    showDeleteModal(filePath);
 }
 
 // Reset and reload models
@@ -394,6 +388,48 @@ export async function refreshSingleModelMetadata(filePath, modelType = 'lora') {
     }
 }
 
+// Generic function to exclude a model
+export async function excludeModel(filePath, modelType = 'lora') {
+    try {
+        const endpoint = modelType === 'checkpoint' 
+            ? '/api/checkpoints/exclude' 
+            : '/api/loras/exclude';
+            
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                file_path: filePath
+            })
+        });
+        
+        if (!response.ok) {
+            throw new Error(`Failed to exclude ${modelType}: ${response.statusText}`);
+        }
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            // Remove the card from UI
+            const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+            if (card) {
+                card.remove();
+            }
+            
+            showToast(`${modelType} excluded successfully`, 'success');
+            return true;
+        } else {
+            throw new Error(data.error || `Failed to exclude ${modelType}`);
+        }
+    } catch (error) {
+        console.error(`Error excluding ${modelType}:`, error);
+        showToast(`Failed to exclude ${modelType}: ${error.message}`, 'error');
+        return false;
+    }
+}
+
 // Private methods
 
 // Upload a preview image

static/js/api/checkpointApi.js

@@ -6,7 +6,8 @@ import {
     deleteModel as baseDeleteModel,
     replaceModelPreview,
     fetchCivitaiMetadata,
-    refreshSingleModelMetadata
+    refreshSingleModelMetadata,
+    excludeModel as baseExcludeModel
 } from './baseModelApi.js';
 
 // Load more checkpoints with pagination
@@ -85,4 +86,13 @@ export async function saveModelMetadata(filePath, data) {
     }
     
     return response.json();
+}
+
+/**
+ * Exclude a checkpoint model from being shown in the UI
+ * @param {string} filePath - File path of the checkpoint to exclude
+ * @returns {Promise<boolean>} Promise resolving to success status
+ */
+export function excludeCheckpoint(filePath) {
+    return baseExcludeModel(filePath, 'checkpoint');
 }

static/js/api/loraApi.js

@@ -6,7 +6,8 @@ import {
     deleteModel as baseDeleteModel,
     replaceModelPreview,
     fetchCivitaiMetadata,
-    refreshSingleModelMetadata
+    refreshSingleModelMetadata,
+    excludeModel as baseExcludeModel
 } from './baseModelApi.js';
 
 /**
@@ -34,6 +35,15 @@ export async function saveModelMetadata(filePath, data) {
     return response.json();
 }
 
+/**
+ * Exclude a lora model from being shown in the UI
+ * @param {string} filePath - File path of the model to exclude
+ * @returns {Promise<boolean>} Promise resolving to success status
+ */
+export async function excludeLora(filePath) {
+    return baseExcludeModel(filePath, 'lora');
+}
+
 export async function loadMoreLoras(resetPage = false, updateFolders = false) {
     return loadMoreModels({
         resetPage,

static/js/checkpoints.js

@@ -1,6 +1,6 @@
 import { appCore } from './core.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
-import { confirmDelete, closeDeleteModal } from './utils/modalUtils.js';
+import { confirmDelete, closeDeleteModal, confirmExclude, closeExcludeModal } from './utils/modalUtils.js';
 import { createPageControls } from './components/controls/index.js';
 import { loadMoreCheckpoints } from './api/checkpointApi.js';
 import { CheckpointDownloadManager } from './managers/CheckpointDownloadManager.js';
@@ -23,6 +23,8 @@ class CheckpointsPageManager {
         // Minimal set of functions that need to remain global
         window.confirmDelete = confirmDelete;
         window.closeDeleteModal = closeDeleteModal;
+        window.confirmExclude = confirmExclude;
+        window.closeExcludeModal = closeExcludeModal;
         
         // Add loadCheckpoints function to window for FilterManager compatibility
         window.checkpointManager = {

static/js/components/CheckpointCard.js

@@ -2,7 +2,7 @@ import { showToast, copyToClipboard } from '../utils/uiHelpers.js';
 import { state } from '../state/index.js';
 import { showCheckpointModal } from './checkpointModal/index.js';
 import { NSFW_LEVELS } from '../utils/constants.js';
-import { replaceCheckpointPreview as apiReplaceCheckpointPreview, saveModelMetadata } from '../api/checkpointApi.js';
+import { replaceCheckpointPreview as apiReplaceCheckpointPreview, saveModelMetadata, deleteCheckpoint } from '../api/checkpointApi.js';
 
 export function createCheckpointCard(checkpoint) {
     const card = document.createElement('div');
@@ -322,17 +322,6 @@ function openCivitai(modelName) {
     }
 }
 
-function deleteCheckpoint(filePath) {
-    if (window.deleteCheckpoint) {
-        window.deleteCheckpoint(filePath);
-    } else {
-        // Use the modal delete functionality
-        import('../utils/modalUtils.js').then(({ showDeleteModal }) => {
-            showDeleteModal(filePath, 'checkpoint');
-        });
-    }
-}
-
 function replaceCheckpointPreview(filePath) {
     if (window.replaceCheckpointPreview) {
         window.replaceCheckpointPreview(filePath);

static/js/components/ContextMenu/CheckpointContextMenu.js

@@ -3,6 +3,7 @@ import { refreshSingleCheckpointMetadata, saveModelMetadata } from '../../api/ch
 import { showToast, getNSFWLevelName } from '../../utils/uiHelpers.js';
 import { NSFW_LEVELS } from '../../utils/constants.js';
 import { getStorageItem } from '../../utils/storageHelpers.js';
+import { showExcludeModal } from '../../utils/modalUtils.js';
 
 export class CheckpointContextMenu extends BaseContextMenu {
     constructor() {
@@ -61,6 +62,10 @@ export class CheckpointContextMenu extends BaseContextMenu {
                 // Move to folder (placeholder)
                 showToast('Move to folder feature coming soon', 'info');
                 break;
+            case 'exclude':
+                showExcludeModal(this.currentCard.dataset.filepath, 'checkpoint');
+                break;
+
         }
     }
 

static/js/components/ContextMenu/LoraContextMenu.js

@@ -3,6 +3,7 @@ import { refreshSingleLoraMetadata, saveModelMetadata } from '../../api/loraApi.
 import { showToast, getNSFWLevelName } from '../../utils/uiHelpers.js';
 import { NSFW_LEVELS } from '../../utils/constants.js';
 import { getStorageItem } from '../../utils/storageHelpers.js';
+import { showExcludeModal } from '../../utils/modalUtils.js';
 
 export class LoraContextMenu extends BaseContextMenu {
     constructor() {
@@ -51,6 +52,9 @@ export class LoraContextMenu extends BaseContextMenu {
             case 'set-nsfw':
                 this.showNSFWLevelSelector(null, null, this.currentCard);
                 break;
+            case 'exclude':
+                showExcludeModal(this.currentCard.dataset.filepath);
+                break;
         }
     }
 

static/js/loras.js

@@ -8,7 +8,7 @@ import { DownloadManager } from './managers/DownloadManager.js';
 import { moveManager } from './managers/MoveManager.js';
 import { LoraContextMenu } from './components/ContextMenu/index.js';
 import { createPageControls } from './components/controls/index.js';
-import { confirmDelete, closeDeleteModal } from './utils/modalUtils.js';
+import { confirmDelete, closeDeleteModal, confirmExclude, closeExcludeModal } from './utils/modalUtils.js';
 
 // Initialize the LoRA page
 class LoraPageManager {
@@ -35,6 +35,8 @@ class LoraPageManager {
         window.showLoraModal = showLoraModal;
         window.confirmDelete = confirmDelete;
         window.closeDeleteModal = closeDeleteModal;
+        window.confirmExclude = confirmExclude;
+        window.closeExcludeModal = closeExcludeModal;
         window.downloadManager = this.downloadManager;
         window.moveManager = moveManager;
         window.toggleShowcase = toggleShowcase;

static/js/managers/ModalManager.js

@@ -59,6 +59,19 @@ export class ModalManager {
                 }
             });
         }
+        
+        // Add excludeModal registration
+        const excludeModal = document.getElementById('excludeModal');
+        if (excludeModal) {
+            this.registerModal('excludeModal', {
+                element: excludeModal,
+                onClose: () => {
+                    this.getModal('excludeModal').element.classList.remove('show');
+                    document.body.classList.remove('modal-open');
+                },
+                closeOnOutsideClick: true
+            });
+        }
 
         // Add downloadModal registration
         const downloadModal = document.getElementById('downloadModal');
@@ -208,7 +221,7 @@ export class ModalManager {
         // Store current scroll position before showing modal
         this.scrollPosition = window.scrollY;
 
-        if (id === 'deleteModal') {
+        if (id === 'deleteModal' || id === 'excludeModal') {
             modal.element.classList.add('show');
         } else {
             modal.element.style.display = 'block';

static/js/utils/modalUtils.js

@@ -1,15 +1,18 @@
 import { modalManager } from '../managers/ModalManager.js';
+import { excludeLora } from '../api/loraApi.js';
+import { excludeCheckpoint } from '../api/checkpointApi.js';
 
 let pendingDeletePath = null;
 let pendingModelType = null;
+let pendingExcludePath = null;
+let pendingExcludeModelType = null;
 
 export function showDeleteModal(filePath, modelType = 'lora') {
-    // event.stopPropagation();
     pendingDeletePath = filePath;
     pendingModelType = modelType;
     
     const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-    const modelName = card.dataset.name;
+    const modelName = card ? card.dataset.name : filePath.split('/').pop();
     const modal = modalManager.getModal('deleteModal').element;
     const modelInfo = modal.querySelector('.delete-model-info');
     
@@ -61,4 +64,46 @@ export function closeDeleteModal() {
     modalManager.closeModal('deleteModal');
     pendingDeletePath = null;
     pendingModelType = null;
+}
+
+// Functions for the exclude modal
+export function showExcludeModal(filePath, modelType = 'lora') {
+    pendingExcludePath = filePath;
+    pendingExcludeModelType = modelType;
+    
+    const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+    const modelName = card ? card.dataset.name : filePath.split('/').pop();
+    const modal = modalManager.getModal('excludeModal').element;
+    const modelInfo = modal.querySelector('.exclude-model-info');
+    
+    modelInfo.innerHTML = `
+        <strong>Model:</strong> ${modelName}
+        <br>
+        <strong>File:</strong> ${filePath}
+    `;
+    
+    modalManager.showModal('excludeModal');
+}
+
+export function closeExcludeModal() {
+    modalManager.closeModal('excludeModal');
+    pendingExcludePath = null;
+    pendingExcludeModelType = null;
+}
+
+export async function confirmExclude() {
+    if (!pendingExcludePath) return;
+    
+    try {
+        // Use appropriate exclude function based on model type
+        if (pendingExcludeModelType === 'checkpoint') {
+            await excludeCheckpoint(pendingExcludePath);
+        } else {
+            await excludeLora(pendingExcludePath);
+        }
+        
+        closeExcludeModal();
+    } catch (error) {
+        console.error('Error excluding model:', error);
+    }
 }