feat(excluded-models): add excluded management view

2026-05-06 08:26:45 -03:00 · 2026-04-16 21:40:59 +08:00
parent ae7bfdb517
commit c53f44e7ef
34 changed files with 962 additions and 17 deletions
--- a/static/js/api/apiConfig.js
+++ b/static/js/api/apiConfig.js
@@ -56,8 +56,10 @@ export function getApiEndpoints(modelType) {
    return {
        // Base CRUD operations
        list: `/api/lm/${modelType}/list`,
+        excluded: `/api/lm/${modelType}/excluded`,
        delete: `/api/lm/${modelType}/delete`,
        exclude: `/api/lm/${modelType}/exclude`,
+        unexclude: `/api/lm/${modelType}/unexclude`,
        rename: `/api/lm/${modelType}/rename`,
        save: `/api/lm/${modelType}/save-metadata`,
        cancelTask: `/api/lm/${modelType}/cancel-task`,
--- a/static/js/api/baseModelApi.js
+++ b/static/js/api/baseModelApi.js
@@ -51,6 +51,7 @@ export class BaseModelApiClient {
    async fetchModelsPage(page = 1, pageSize = null) {
        const pageState = this.getPageState();
        const actualPageSize = pageSize || pageState.pageSize || this.apiConfig.config.defaultPageSize;
+        const isExcludedView = pageState.viewMode === 'excluded';

        try {
            const params = this._buildQueryParams({
@@ -71,7 +72,10 @@ export class BaseModelApiClient {
                };
            }

-            const response = await fetch(`${this.apiConfig.endpoints.list}?${params}`);
+            const endpoint = isExcludedView
+                ? this.apiConfig.endpoints.excluded
+                : this.apiConfig.endpoints.list;
+            const response = await fetch(`${endpoint}?${params}`);
            if (!response.ok) {
                throw new Error(`Failed to fetch ${this.apiConfig.config.displayName}s: ${response.statusText}`);
            }
@@ -84,7 +88,7 @@ export class BaseModelApiClient {
                totalPages: data.total_pages,
                currentPage: page,
                hasMore: page < data.total_pages,
-                folders: data.folders
+                folders: data.folders || []
            };

        } catch (error) {
@@ -212,6 +216,50 @@ export class BaseModelApiClient {
        }
    }

+    async unexcludeModel(filePath) {
+        try {
+            state.loadingManager.showSimpleLoading(`Restoring ${this.apiConfig.config.singularName}...`);
+
+            const response = await fetch(this.apiConfig.endpoints.unexclude, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ file_path: filePath })
+            });
+
+            if (!response.ok) {
+                throw new Error(`Failed to restore ${this.apiConfig.config.singularName}: ${response.statusText}`);
+            }
+
+            const data = await response.json();
+
+            if (data.success) {
+                if (state.virtualScroller) {
+                    state.virtualScroller.removeItemByFilePath(filePath);
+                }
+                showToast(
+                    'toast.api.restoreSuccess',
+                    { type: this.apiConfig.config.displayName },
+                    'success',
+                    `Restored ${this.apiConfig.config.displayName}`
+                );
+                return true;
+            }
+
+            throw new Error(data.error || `Failed to restore ${this.apiConfig.config.singularName}`);
+        } catch (error) {
+            console.error(`Error restoring ${this.apiConfig.config.singularName}:`, error);
+            showToast(
+                'toast.api.restoreFailed',
+                { type: this.apiConfig.config.singularName, message: error.message },
+                'error',
+                `Failed to restore ${this.apiConfig.config.singularName}: ${error.message}`
+            );
+            return false;
+        } finally {
+            state.loadingManager.hide();
+        }
+    }
+
    async renameModelFile(filePath, newFileName) {
        try {
            state.loadingManager.showSimpleLoading(`Renaming ${this.apiConfig.config.singularName} file...`);
@@ -883,20 +931,21 @@ export class BaseModelApiClient {

    _buildQueryParams(baseParams, pageState) {
        const params = new URLSearchParams(baseParams);
+        const isExcludedView = pageState.viewMode === 'excluded';

-        if (pageState.activeFolder !== null) {
+        if (!isExcludedView && pageState.activeFolder !== null) {
            params.append('folder', pageState.activeFolder);
        }

-        if (pageState.showFavoritesOnly) {
+        if (!isExcludedView && pageState.showFavoritesOnly) {
            params.append('favorites_only', 'true');
        }

-        if (pageState.showUpdateAvailableOnly) {
+        if (!isExcludedView && pageState.showUpdateAvailableOnly) {
            params.append('update_available_only', 'true');
        }

-        if (this.apiConfig.config.supportsLetterFilter && pageState.activeLetterFilter) {
+        if (!isExcludedView && this.apiConfig.config.supportsLetterFilter && pageState.activeLetterFilter) {
            params.append('first_letter', pageState.activeLetterFilter);
        }

@@ -918,7 +967,7 @@ export class BaseModelApiClient {

        params.append('recursive', pageState.searchOptions.recursive ? 'true' : 'false');

-        if (pageState.filters) {
+        if (!isExcludedView && pageState.filters) {
            if (pageState.filters.tags && Object.keys(pageState.filters.tags).length > 0) {
                Object.entries(pageState.filters.tags).forEach(([tag, state]) => {
                    if (state === 'include') {
@@ -981,7 +1030,9 @@ export class BaseModelApiClient {
            }
        }

-        this._addModelSpecificParams(params, pageState);
+        if (!isExcludedView) {
+            this._addModelSpecificParams(params, pageState);
+        }

        return params;
    }
--- a/static/js/components/ContextMenu/CheckpointContextMenu.js
+++ b/static/js/components/ContextMenu/CheckpointContextMenu.js
@@ -24,6 +24,7 @@ export class CheckpointContextMenu extends BaseContextMenu {

    showMenu(x, y, card) {
        super.showMenu(x, y, card);
+        this.updateExcludeMenuItem();

        // Update the "Move to other root" label based on current model type
        const moveOtherItem = this.menu.querySelector('[data-action="move-other"]');
@@ -83,6 +84,9 @@ export class CheckpointContextMenu extends BaseContextMenu {
            case 'exclude':
                showExcludeModal(this.currentCard.dataset.filepath);
                break;
+            case 'restore':
+                this.restoreExcludedModel(this.currentCard.dataset.filepath);
+                break;
        }
    }

--- a/static/js/components/ContextMenu/EmbeddingContextMenu.js
+++ b/static/js/components/ContextMenu/EmbeddingContextMenu.js
@@ -18,6 +18,11 @@ export class EmbeddingContextMenu extends BaseContextMenu {
    async saveModelMetadata(filePath, data) {
        return getModelApiClient().saveModelMetadata(filePath, data);
    }
+
+    showMenu(x, y, card) {
+        super.showMenu(x, y, card);
+        this.updateExcludeMenuItem();
+    }
    
    handleMenuAction(action) {
        // First try to handle with common actions
@@ -56,6 +61,9 @@ export class EmbeddingContextMenu extends BaseContextMenu {
            case 'exclude':
                showExcludeModal(this.currentCard.dataset.filepath);
                break;
+            case 'restore':
+                this.restoreExcludedModel(this.currentCard.dataset.filepath);
+                break;
        }
    }
 }
--- a/static/js/components/ContextMenu/GlobalContextMenu.js
+++ b/static/js/components/ContextMenu/GlobalContextMenu.js
@@ -22,6 +22,7 @@ export class GlobalContextMenu extends BaseContextMenu {
        const licenseRefreshItem = this.menu.querySelector('[data-action="fetch-missing-licenses"]');
        const downloadExamplesItem = this.menu.querySelector('[data-action="download-example-images"]');
        const cleanupExamplesItem = this.menu.querySelector('[data-action="cleanup-example-images-folders"]');
+        const excludedModelsItem = this.menu.querySelector('[data-action="manage-excluded-models"]');
        const repairRecipesItem = this.menu.querySelector('[data-action="repair-recipes"]');

        if (isRecipesPage) {
@@ -29,12 +30,14 @@ export class GlobalContextMenu extends BaseContextMenu {
            licenseRefreshItem?.classList.add('hidden');
            downloadExamplesItem?.classList.add('hidden');
            cleanupExamplesItem?.classList.add('hidden');
+            excludedModelsItem?.classList.add('hidden');
            repairRecipesItem?.classList.remove('hidden');
        } else {
            modelUpdateItem?.classList.remove('hidden');
            licenseRefreshItem?.classList.remove('hidden');
            downloadExamplesItem?.classList.remove('hidden');
            cleanupExamplesItem?.classList.remove('hidden');
+            excludedModelsItem?.classList.remove('hidden');
            repairRecipesItem?.classList.add('hidden');
        }

@@ -68,12 +71,21 @@ export class GlobalContextMenu extends BaseContextMenu {
                    console.error('Failed to repair recipes:', error);
                });
                break;
+            case 'manage-excluded-models':
+                this.manageExcludedModels();
+                break;
            default:
                console.warn(`Unhandled global context menu action: ${action}`);
                break;
        }
    }

+    manageExcludedModels() {
+        window.pageControls?.enterExcludedView?.().catch((error) => {
+            console.error('Failed to open excluded models view:', error);
+        });
+    }
+
    async downloadExampleImages(menuItem) {
        const downloadPath = state?.global?.settings?.example_images_path;
        if (!downloadPath) {
--- a/static/js/components/ContextMenu/LoraContextMenu.js
+++ b/static/js/components/ContextMenu/LoraContextMenu.js
@@ -20,6 +20,11 @@ export class LoraContextMenu extends BaseContextMenu {
        return getModelApiClient().saveModelMetadata(filePath, data);
    }

+    showMenu(x, y, card) {
+        super.showMenu(x, y, card);
+        this.updateExcludeMenuItem();
+    }
+
    handleMenuAction(action, menuItem) {
        // First try to handle with common actions
        if (ModelContextMenuMixin.handleCommonMenuActions.call(this, action)) {
@@ -61,6 +66,9 @@ export class LoraContextMenu extends BaseContextMenu {
            case 'exclude':
                showExcludeModal(this.currentCard.dataset.filepath);
                break;
+            case 'restore':
+                this.restoreExcludedModel(this.currentCard.dataset.filepath);
+                break;
        }
    }

--- a/static/js/components/ContextMenu/ModelContextMenuMixin.js
+++ b/static/js/components/ContextMenu/ModelContextMenuMixin.js
@@ -10,6 +10,39 @@ import { extractCivitaiModelUrlParts } from '../../utils/civitaiUtils.js';

 // Mixin with shared functionality for LoraContextMenu and CheckpointContextMenu
 export const ModelContextMenuMixin = {
+    isExcludedView() {
+        return state?.pages?.[state.currentPageType]?.viewMode === 'excluded';
+    },
+
+    updateExcludeMenuItem() {
+        const excludeItem = this.menu?.querySelector('[data-action="exclude"], [data-action="restore"]');
+        if (!excludeItem) {
+            return;
+        }
+
+        const isExcludedView = this.isExcludedView();
+        excludeItem.dataset.action = isExcludedView ? 'restore' : 'exclude';
+        excludeItem.innerHTML = isExcludedView
+            ? `<i class="fas fa-undo"></i> <span>${translate('loras.contextMenu.restoreModel', {}, 'Restore model')}</span>`
+            : `<i class="fas fa-eye-slash"></i> <span>${translate('loras.contextMenu.excludeModel', {}, 'Exclude model')}</span>`;
+    },
+
+    async restoreExcludedModel(filePath) {
+        const restored = await getModelApiClient().unexcludeModel(filePath);
+        if (!restored) {
+            return;
+        }
+
+        if (window.pageControls?.exitExcludedView) {
+            await window.pageControls.exitExcludedView();
+        } else {
+            const resetFn = this.resetAndReload || resetAndReload;
+            if (typeof resetFn === 'function') {
+                await resetFn(true);
+            }
+        }
+    },
+
    // NSFW Selector methods
    initNSFWSelector() {
        if (this._nsfwSelectorInitialized) {
--- a/static/js/components/controls/PageControls.js
+++ b/static/js/components/controls/PageControls.js
@@ -38,8 +38,12 @@ export class PageControls {

        // Initialize favorites filter button state
        this.initFavoritesFilter();
+
+        this.initExcludedViewControls();
+        this.syncExcludedViewState();
        
        console.log(`PageControls initialized for ${pageType} page`);
+        window.pageControls = this;
    }
    
    /**
@@ -56,6 +60,19 @@ export class PageControls {
        
        // Load sort preference
        this.loadSortPreference();
+
+        if (!this.pageState.viewMode) {
+            this.pageState.viewMode = 'active';
+        }
+        if (!this.pageState.excludedViewState) {
+            this.pageState.excludedViewState = {
+                sortBy: 'name:asc',
+                search: '',
+            };
+        }
+        if (!this.pageState.filters?.search) {
+            this.pageState.filters.search = '';
+        }
    }
    
    /**
@@ -116,6 +133,15 @@ export class PageControls {
        // Page-specific event listeners
        this.initPageSpecificListeners();
    }
+
+    initExcludedViewControls() {
+        const backButton = document.getElementById('excludedViewBackBtn');
+        if (backButton) {
+            backButton.addEventListener('click', async () => {
+                await this.exitExcludedView();
+            });
+        }
+    }
    
    /**
     * Initialize dropdown functionality
@@ -334,6 +360,13 @@ export class PageControls {
     * @param {string} sortValue - The sort value to save
     */
    saveSortPreference(sortValue) {
+        if (this.pageState.viewMode === 'excluded') {
+            this.pageState.excludedViewState = {
+                ...(this.pageState.excludedViewState || {}),
+                sortBy: sortValue,
+            };
+            return;
+        }
        setStorageItem(`${this.pageType}_sort`, sortValue);
    }
    
@@ -473,6 +506,8 @@ export class PageControls {
            // Update app state
            this.pageState.showFavoritesOnly = showFavoritesOnly;
        }
+
+        this.updateActionButtonStates();
    }

    /**
@@ -489,12 +524,17 @@ export class PageControls {
        if (updateFilterBtn) {
            updateFilterBtn.classList.toggle('active', showUpdatesOnly);
        }
+
+        this.updateActionButtonStates();
    }

    /**
     * Toggle favorites-only filter and reload models
     */
    async toggleFavoritesOnly() {
+        if (this.pageState.viewMode === 'excluded') {
+            return;
+        }
        const favoriteFilterBtn = document.getElementById('favoriteFilterBtn');
        
        // Toggle the filter state in storage
@@ -521,6 +561,9 @@ export class PageControls {
     * Toggle update-available-only filter and reload models
     */
    async toggleUpdateAvailableOnly() {
+        if (this.pageState.viewMode === 'excluded') {
+            return;
+        }
        const updateFilterBtn = document.getElementById('updateFilterBtn');
        const storageKey = `show_update_available_only_${this.pageType}`;
        const newState = !this.pageState.showUpdateAvailableOnly;
@@ -535,6 +578,234 @@ export class PageControls {

        await this.resetAndReload(true);
    }
+
+    cloneFilters(filters = this.pageState.filters) {
+        return JSON.parse(JSON.stringify(filters || {}));
+    }
+
+    buildExcludedFilters(search = '') {
+        return {
+            baseModel: [],
+            tags: {},
+            license: {},
+            modelTypes: [],
+            search,
+            tagLogic: 'any',
+        };
+    }
+
+    applyFilterState(filters) {
+        this.pageState.filters = filters;
+
+        if (window.filterManager) {
+            window.filterManager.filters = window.filterManager.initializeFilters(filters);
+            window.filterManager.updateActiveFiltersCount();
+            if (typeof window.filterManager.updateSelections === 'function') {
+                window.filterManager.updateSelections();
+            }
+            window.filterManager.closeFilterPanel();
+        }
+    }
+
+    updateActionButtonStates() {
+        const favoriteFilterBtn = document.getElementById('favoriteFilterBtn');
+        if (favoriteFilterBtn) {
+            favoriteFilterBtn.classList.toggle('active', Boolean(this.pageState.showFavoritesOnly));
+        }
+
+        const updateFilterBtn = document.getElementById('updateFilterBtn');
+        if (updateFilterBtn) {
+            updateFilterBtn.classList.toggle('active', Boolean(this.pageState.showUpdateAvailableOnly));
+        }
+    }
+
+    syncExcludedViewState() {
+        const isExcludedView = this.pageState.viewMode === 'excluded';
+        const sortSelect = document.getElementById('sortSelect');
+        const searchInput = document.getElementById('searchInput');
+        const excludedBanner = document.getElementById('excludedViewBanner');
+        const filterButton = document.getElementById('filterButton');
+        const breadcrumbContainer = document.getElementById('breadcrumbContainer');
+        const duplicatesBanner = document.getElementById('duplicatesBanner');
+        const alphabetBarContainer = document.querySelector('.alphabet-bar-container');
+        const hiddenSelectors = [
+            '[data-action="fetch"]',
+            '[data-action="download"]',
+            '[data-action="bulk"]',
+            '[data-action="find-duplicates"]',
+            '#favoriteFilterBtn',
+            '.update-filter-group',
+        ];
+        const customFilterIndicator = document.getElementById('customFilterIndicator');
+
+        document.body.classList.toggle('excluded-view-active', isExcludedView);
+        excludedBanner?.classList.toggle('hidden', !isExcludedView);
+        breadcrumbContainer?.classList.toggle('hidden', isExcludedView);
+        alphabetBarContainer?.classList.toggle('hidden', isExcludedView);
+
+        if (duplicatesBanner && isExcludedView) {
+            duplicatesBanner.style.display = 'none';
+        }
+
+        hiddenSelectors.forEach((selector) => {
+            document.querySelectorAll(selector).forEach((element) => {
+                element.classList.toggle('hidden', isExcludedView);
+            });
+        });
+
+        if (customFilterIndicator && isExcludedView) {
+            customFilterIndicator.classList.add('hidden');
+        }
+
+        if (filterButton) {
+            filterButton.disabled = isExcludedView;
+            filterButton.classList.toggle('hidden', isExcludedView);
+        }
+
+        const activeFiltersCount = document.getElementById('activeFiltersCount');
+        if (activeFiltersCount && isExcludedView) {
+            activeFiltersCount.style.display = 'none';
+        }
+
+        if (sortSelect) {
+            sortSelect.value = this.pageState.sortBy;
+        }
+        if (searchInput) {
+            searchInput.value = this.pageState.filters?.search || '';
+        }
+
+        this.updateActionButtonStates();
+
+        if (this.sidebarManager) {
+            const shouldShowSidebar = !isExcludedView && state?.global?.settings?.show_folder_sidebar !== false;
+            this.sidebarManager.setSidebarEnabled(shouldShowSidebar).catch((error) => {
+                console.error('Failed to update sidebar visibility:', error);
+            });
+        }
+    }
+
+    suspendInteractiveModes() {
+        const snapshot = {
+            bulkMode: Boolean(state.bulkMode),
+            duplicatesMode: Boolean(this.pageState.duplicatesMode),
+        };
+
+        if (snapshot.bulkMode && window.bulkManager?.toggleBulkMode) {
+            window.bulkManager.toggleBulkMode();
+        }
+
+        if (snapshot.duplicatesMode && window.modelDuplicatesManager?.exitDuplicateMode) {
+            window.modelDuplicatesManager.exitDuplicateMode();
+        }
+
+        return snapshot;
+    }
+
+    async restoreInteractiveModes(snapshot = {}) {
+        if (snapshot.bulkMode && !state.bulkMode && window.bulkManager?.toggleBulkMode) {
+            window.bulkManager.toggleBulkMode();
+        }
+
+        if (!snapshot.duplicatesMode || this.pageState.duplicatesMode) {
+            return;
+        }
+
+        const duplicatesManager = window.modelDuplicatesManager;
+        if (!duplicatesManager) {
+            return;
+        }
+
+        if (typeof duplicatesManager.enterDuplicateMode === 'function' &&
+            Array.isArray(duplicatesManager.duplicateGroups) &&
+            duplicatesManager.duplicateGroups.length > 0) {
+            duplicatesManager.enterDuplicateMode();
+            return;
+        }
+
+        if (typeof duplicatesManager.findDuplicates === 'function') {
+            await duplicatesManager.findDuplicates();
+        }
+    }
+
+    syncCustomFilterIndicator() {
+        const indicator = document.getElementById('customFilterIndicator');
+        if (!indicator) {
+            return;
+        }
+
+        if (this.pageState.viewMode === 'excluded') {
+            indicator.classList.add('hidden');
+            return;
+        }
+
+        if (typeof this.checkCustomFilters === 'function') {
+            this.checkCustomFilters();
+        }
+    }
+
+    async enterExcludedView() {
+        if (this.pageState.viewMode === 'excluded') {
+            return;
+        }
+
+        const interactionSnapshot = this.suspendInteractiveModes();
+
+        this.pageState.activeViewSnapshot = {
+            sortBy: this.pageState.sortBy,
+            activeFolder: this.pageState.activeFolder,
+            activeLetterFilter: this.pageState.activeLetterFilter ?? null,
+            showFavoritesOnly: this.pageState.showFavoritesOnly,
+            showUpdateAvailableOnly: this.pageState.showUpdateAvailableOnly,
+            bulkMode: interactionSnapshot.bulkMode,
+            duplicatesMode: interactionSnapshot.duplicatesMode,
+            filters: this.cloneFilters(),
+        };
+
+        const excludedState = this.pageState.excludedViewState || {
+            sortBy: 'name:asc',
+            search: '',
+        };
+
+        this.pageState.viewMode = 'excluded';
+        this.pageState.sortBy = excludedState.sortBy || 'name:asc';
+        this.pageState.currentPage = 1;
+        this.pageState.activeFolder = null;
+        this.pageState.activeLetterFilter = null;
+        this.pageState.showFavoritesOnly = false;
+        this.pageState.showUpdateAvailableOnly = false;
+
+        this.applyFilterState(this.buildExcludedFilters(excludedState.search || ''));
+        this.syncExcludedViewState();
+        await this.resetAndReload(false);
+    }
+
+    async exitExcludedView() {
+        if (this.pageState.viewMode !== 'excluded') {
+            return;
+        }
+
+        this.pageState.excludedViewState = {
+            ...(this.pageState.excludedViewState || {}),
+            sortBy: this.pageState.sortBy,
+            search: this.pageState.filters?.search || '',
+        };
+
+        const snapshot = this.pageState.activeViewSnapshot || {};
+        this.pageState.viewMode = 'active';
+        this.pageState.sortBy = snapshot.sortBy || this.convertLegacySortFormat(getStorageItem(`${this.pageType}_sort`) || 'name:asc');
+        this.pageState.currentPage = 1;
+        this.pageState.activeFolder = snapshot.activeFolder ?? getStorageItem(`${this.pageType}_activeFolder`);
+        this.pageState.activeLetterFilter = snapshot.activeLetterFilter ?? null;
+        this.pageState.showFavoritesOnly = Boolean(snapshot.showFavoritesOnly);
+        this.pageState.showUpdateAvailableOnly = Boolean(snapshot.showUpdateAvailableOnly);
+        this.applyFilterState(snapshot.filters || this.buildExcludedFilters(''));
+        this.pageState.activeViewSnapshot = null;
+
+        this.syncExcludedViewState();
+        await this.resetAndReload(true);
+        this.syncCustomFilterIndicator();
+        await this.restoreInteractiveModes(snapshot);
+    }
    
    /**
     * Find duplicate models
--- a/static/js/components/shared/ModelCard.js
+++ b/static/js/components/shared/ModelCard.js
@@ -433,10 +433,11 @@ export function createModelCard(model, modelType) {
    card.dataset.usage_count = String(model.usage_count);
    card.dataset.notes = model.notes || '';
    card.dataset.base_model = model.base_model || 'Unknown';
-        card.dataset.favorite = model.favorite ? 'true' : 'false';
-        const hasUpdateAvailable = Boolean(model.update_available);
-        card.dataset.update_available = hasUpdateAvailable ? 'true' : 'false';
-        card.dataset.skip_metadata_refresh = model.skip_metadata_refresh ? 'true' : 'false';
+    card.dataset.favorite = model.favorite ? 'true' : 'false';
+    card.dataset.exclude = model.exclude ? 'true' : 'false';
+    const hasUpdateAvailable = Boolean(model.update_available);
+    card.dataset.update_available = hasUpdateAvailable ? 'true' : 'false';
+    card.dataset.skip_metadata_refresh = model.skip_metadata_refresh ? 'true' : 'false';

    // To only show usage_count when sorting by usage. 
    const pageState = getCurrentPageState();
@@ -487,6 +488,9 @@ export function createModelCard(model, modelType) {
    if (model.skip_metadata_refresh) {
        card.classList.add('skip-refresh');
    }
+    if (model.exclude) {
+        card.classList.add('excluded-model');
+    }

    // Apply selection state if in bulk mode and this card is in the selected set (LoRA only)
    if (modelType === MODEL_TYPES.LORA && state.bulkMode && state.selectedLoras.has(model.file_path)) {
@@ -619,6 +623,11 @@ export function createModelCard(model, modelType) {
                            <i class="fas fa-ban"></i>
                        </span>
                    ` : ''}
+                    ${model.exclude ? `
+                        <span class="model-excluded-badge" title="${translate('globalContextMenu.manageExcludedModels.label', {}, 'Excluded Models')}">
+                            <i class="fas fa-eye-slash"></i>
+                        </span>
+                    ` : ''}
                </div>
                <div class="card-actions">
                    ${actionIcons}
--- a/static/js/state/index.js
+++ b/static/js/state/index.js
@@ -90,7 +90,9 @@ export const state = {
                baseModel: [],
                tags: {},
                license: {},
-                modelTypes: []
+                modelTypes: [],
+                search: '',
+                tagLogic: 'any',
            },
            bulkMode: false,
            selectedLoras: new Set(),
@@ -98,6 +100,12 @@ export const state = {
            showFavoritesOnly: false,
            showUpdateAvailableOnly: false,
            duplicatesMode: false,
+            viewMode: 'active',
+            excludedViewState: {
+                sortBy: 'name:asc',
+                search: '',
+            },
+            activeViewSnapshot: null,
        },

        recipes: {
@@ -147,7 +155,9 @@ export const state = {
                baseModel: [],
                tags: {},
                license: {},
-                modelTypes: []
+                modelTypes: [],
+                search: '',
+                tagLogic: 'any',
            },
            modelType: 'checkpoint', // 'checkpoint' or 'diffusion_model'
            bulkMode: false,
@@ -156,6 +166,12 @@ export const state = {
            showFavoritesOnly: false,
            showUpdateAvailableOnly: false,
            duplicatesMode: false,
+            viewMode: 'active',
+            excludedViewState: {
+                sortBy: 'name:asc',
+                search: '',
+            },
+            activeViewSnapshot: null,
        },

        [MODEL_TYPES.EMBEDDING]: {
@@ -178,7 +194,9 @@ export const state = {
                baseModel: [],
                tags: {},
                license: {},
-                modelTypes: []
+                modelTypes: [],
+                search: '',
+                tagLogic: 'any',
            },
            bulkMode: false,
            selectedModels: new Set(),
@@ -186,6 +204,12 @@ export const state = {
            showFavoritesOnly: false,
            showUpdateAvailableOnly: false,
            duplicatesMode: false,
+            viewMode: 'active',
+            excludedViewState: {
+                sortBy: 'name:asc',
+                search: '',
+            },
+            activeViewSnapshot: null,
        }
    },