fix(filters): improve base model filtering UX

2026-05-06 08:26:45 -03:00 · 2026-04-17 20:27:48 +08:00
parent 89fd2b43d6
commit 0bcd8e09a9
22 changed files with 479 additions and 48 deletions
--- a/locales/de.json
+++ b/locales/de.json
@@ -225,12 +225,14 @@
            "presetOverwriteConfirm": "Voreinstellung \"{name}\" existiert bereits. Überschreiben?",
            "presetNamePlaceholder": "Voreinstellungsname...",
            "baseModel": "Basis-Modell",
+            "baseModelSearchPlaceholder": "Basismodelle durchsuchen...",
            "modelTags": "Tags (Top 20)",
            "modelTypes": "Modelltypen",
            "license": "Lizenz",
            "noCreditRequired": "Kein Credit erforderlich",
            "allowSellingGeneratedContent": "Verkauf erlaubt",
            "noTags": "Keine Tags",
+            "noBaseModelMatches": "Keine Basismodelle entsprechen der aktuellen Suche.",
            "clearAll": "Alle Filter löschen",
            "any": "Beliebig",
            "all": "Alle",
--- a/locales/en.json
+++ b/locales/en.json
@@ -225,12 +225,14 @@
            "presetOverwriteConfirm": "Preset \"{name}\" already exists. Overwrite?",
            "presetNamePlaceholder": "Preset name...",
            "baseModel": "Base Model",
+            "baseModelSearchPlaceholder": "Search base models...",
            "modelTags": "Tags (Top 20)",
            "modelTypes": "Model Types",
            "license": "License",
            "noCreditRequired": "No Credit Required",
            "allowSellingGeneratedContent": "Allow Selling",
            "noTags": "No tags",
+            "noBaseModelMatches": "No base models match the current search.",
            "clearAll": "Clear All Filters",
            "any": "Any",
            "all": "All",
--- a/locales/es.json
+++ b/locales/es.json
@@ -225,12 +225,14 @@
            "presetOverwriteConfirm": "El preset \"{name}\" ya existe. ¿Sobrescribir?",
            "presetNamePlaceholder": "Nombre del preajuste...",
            "baseModel": "Modelo base",
+            "baseModelSearchPlaceholder": "Buscar modelos base...",
            "modelTags": "Etiquetas (Top 20)",
            "modelTypes": "Tipos de modelos",
            "license": "Licencia",
            "noCreditRequired": "Sin crédito requerido",
            "allowSellingGeneratedContent": "Venta permitida",
            "noTags": "Sin etiquetas",
+            "noBaseModelMatches": "Ningún modelo base coincide con la búsqueda actual.",
            "clearAll": "Limpiar todos los filtros",
            "any": "Cualquiera",
            "all": "Todos",
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -225,12 +225,14 @@
            "presetOverwriteConfirm": "Le préréglage \"{name}\" existe déjà. Remplacer?",
            "presetNamePlaceholder": "Nom du préréglage...",
            "baseModel": "Modèle de base",
+            "baseModelSearchPlaceholder": "Rechercher des modèles de base...",
            "modelTags": "Tags (Top 20)",
            "modelTypes": "Types de modèles",
            "license": "Licence",
            "noCreditRequired": "Crédit non requis",
            "allowSellingGeneratedContent": "Vente autorisée",
            "noTags": "Aucun tag",
+            "noBaseModelMatches": "Aucun modèle de base ne correspond à la recherche actuelle.",
            "clearAll": "Effacer tous les filtres",
            "any": "N'importe quel",
            "all": "Tous",
--- a/locales/he.json
+++ b/locales/he.json
@@ -225,12 +225,14 @@
            "presetOverwriteConfirm": "הפריסט \"{name}\" כבר קיים. לדרוס?",
            "presetNamePlaceholder": "שם קביעה מראש...",
            "baseModel": "מודל בסיס",
+            "baseModelSearchPlaceholder": "חפש מודלי בסיס...",
            "modelTags": "תגיות (20 המובילות)",
            "modelTypes": "סוגי מודלים",
            "license": "רישיון",
            "noCreditRequired": "ללא קרדיט נדרש",
            "allowSellingGeneratedContent": "אפשר מכירה",
            "noTags": "ללא תגיות",
+            "noBaseModelMatches": "אין מודלי בסיס התואמים לחיפוש הנוכחי.",
            "clearAll": "נקה את כל המסננים",
            "any": "כלשהו",
            "all": "כל התגים",
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -225,12 +225,14 @@
            "presetOverwriteConfirm": "プリセット「{name}」は既に存在します。上書きしますか？",
            "presetNamePlaceholder": "プリセット名...",
            "baseModel": "ベースモデル",
+            "baseModelSearchPlaceholder": "ベースモデルを検索...",
            "modelTags": "タグ（上位20）",
            "modelTypes": "モデルタイプ",
            "license": "ライセンス",
            "noCreditRequired": "クレジット不要",
            "allowSellingGeneratedContent": "販売許可",
            "noTags": "タグなし",
+            "noBaseModelMatches": "現在の検索に一致するベースモデルはありません。",
            "clearAll": "すべてのフィルタをクリア",
            "any": "いずれか",
            "all": "すべて",
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -225,12 +225,14 @@
            "presetOverwriteConfirm": "프리셋 \"{name}\"이(가) 이미 존재합니다. 덮어쓰시겠습니까?",
            "presetNamePlaceholder": "프리셋 이름...",
            "baseModel": "베이스 모델",
+            "baseModelSearchPlaceholder": "베이스 모델 검색...",
            "modelTags": "태그 (상위 20개)",
            "modelTypes": "모델 유형",
            "license": "라이선스",
            "noCreditRequired": "크레딧 표기 없음",
            "allowSellingGeneratedContent": "판매 허용",
            "noTags": "태그 없음",
+            "noBaseModelMatches": "현재 검색과 일치하는 베이스 모델이 없습니다.",
            "clearAll": "모든 필터 지우기",
            "any": "아무",
            "all": "모두",
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -225,12 +225,14 @@
            "presetOverwriteConfirm": "Пресет \"{name}\" уже существует. Перезаписать?",
            "presetNamePlaceholder": "Имя пресета...",
            "baseModel": "Базовая модель",
+            "baseModelSearchPlaceholder": "Поиск базовых моделей...",
            "modelTags": "Теги (Топ 20)",
            "modelTypes": "Типы моделей",
            "license": "Лицензия",
            "noCreditRequired": "Без указания авторства",
            "allowSellingGeneratedContent": "Продажа разрешена",
            "noTags": "Без тегов",
+            "noBaseModelMatches": "Нет базовых моделей, соответствующих текущему поиску.",
            "clearAll": "Очистить все фильтры",
            "any": "Любой",
            "all": "Все",
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -225,12 +225,14 @@
            "presetOverwriteConfirm": "预设 \"{name}\" 已存在。是否覆盖？",
            "presetNamePlaceholder": "预设名称...",
            "baseModel": "基础模型",
+            "baseModelSearchPlaceholder": "搜索基础模型...",
            "modelTags": "标签（前20）",
            "modelTypes": "模型类型",
            "license": "许可证",
            "noCreditRequired": "无需署名",
            "allowSellingGeneratedContent": "允许销售",
            "noTags": "无标签",
+            "noBaseModelMatches": "没有基础模型符合当前搜索。",
            "clearAll": "清除所有筛选",
            "any": "任一",
            "all": "全部",
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -225,12 +225,14 @@
            "presetOverwriteConfirm": "預設 \"{name}\" 已存在。是否覆蓋？",
            "presetNamePlaceholder": "預設名稱...",
            "baseModel": "基礎模型",
+            "baseModelSearchPlaceholder": "搜尋基礎模型...",
            "modelTags": "標籤（前 20）",
            "modelTypes": "模型類型",
            "license": "授權",
            "noCreditRequired": "無需署名",
            "allowSellingGeneratedContent": "允許銷售",
            "noTags": "無標籤",
+            "noBaseModelMatches": "沒有基礎模型符合目前的搜尋。",
            "clearAll": "清除所有篩選",
            "any": "任一",
            "all": "全部",
--- a/py/routes/handlers/model_handlers.py
+++ b/py/routes/handlers/model_handlers.py
@@ -910,7 +910,7 @@ class ModelQueryHandler:
    async def get_base_models(self, request: web.Request) -> web.Response:
        try:
            limit = int(request.query.get("limit", "20"))
-            if limit < 1 or limit > 100:
+            if limit < 0 or limit > 100:
                limit = 20
            base_models = await self._service.get_base_models(limit)
            return web.json_response({"success": True, "base_models": base_models})
--- a/py/routes/handlers/recipe_handlers.py
+++ b/py/routes/handlers/recipe_handlers.py
@@ -329,6 +329,7 @@ class RecipeQueryHandler:
            if recipe_scanner is None:
                raise RuntimeError("Recipe scanner unavailable")

+            limit = int(request.query.get("limit", "20"))
            cache = await recipe_scanner.get_cached_data()

            base_model_counts: Dict[str, int] = {}
@@ -344,6 +345,8 @@ class RecipeQueryHandler:
                for model, count in base_model_counts.items()
            ]
            sorted_models.sort(key=lambda entry: entry["count"], reverse=True)
+            if limit > 0:
+                sorted_models = sorted_models[:limit]
            return web.json_response({"success": True, "base_models": sorted_models})
        except Exception as exc:
            self._logger.error("Error retrieving base models: %s", exc, exc_info=True)
--- a/py/services/model_scanner.py
+++ b/py/services/model_scanner.py
@@ -1535,7 +1535,7 @@ class ModelScanner:
        return sorted_tags[:limit]
        
    async def get_base_models(self, limit: int = 20) -> List[Dict[str, any]]:
-        """Get base models sorted by frequency"""
+        """Get base models sorted by count. If limit is 0, return all."""
        cache = await self.get_cached_data()
        
        base_model_counts = {}
@@ -1546,7 +1546,9 @@ class ModelScanner:
        
        sorted_models = [{'name': model, 'count': count} for model, count in base_model_counts.items()]
        sorted_models.sort(key=lambda x: x['count'], reverse=True)
-        
+
+        if limit == 0:
+            return sorted_models
        return sorted_models[:limit]
        
    async def get_model_info_by_name(self, name):
--- a/static/css/components/search-filter.css
+++ b/static/css/components/search-filter.css
@@ -145,7 +145,7 @@
    position: fixed;
    right: 20px;
    top: 50px; /* Position below header */
-    width: 320px;
+    width: 366px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-base);
@@ -197,6 +197,31 @@
    margin-bottom: 16px;
 }

+.filter-search-input {
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 8px;
+    padding: 8px 10px;
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--border-color);
+    background-color: var(--lora-surface);
+    color: var(--text-color);
+    font-size: 13px;
+}
+
+.filter-search-input:focus {
+    outline: none;
+    border-color: var(--lora-accent);
+    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 76, 175, 80), 0.15);
+}
+
+.filter-empty-state {
+    margin-top: 8px;
+    font-size: 13px;
+    color: var(--text-color);
+    opacity: 0.7;
+}
+
 .filter-section h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
@@ -733,4 +758,4 @@
        right: 20px;
        top: 160px; /* Adjusted for mobile layout */
    }
-}
+}
--- a/static/js/managers/BulkManager.js
+++ b/static/js/managers/BulkManager.js
@@ -240,9 +240,7 @@ export class BulkManager {
     */
    handleGlobalKeyboard(e) {
        // Skip if modal is open (handled by event manager conditions)
-        // Skip if search input is focused
-        const searchInput = document.getElementById('searchInput');
-        if (searchInput && document.activeElement === searchInput) {
+        if (this.isEditingTextInputContext(e.target)) {
            return false; // Don't handle, allow default behavior
        }

@@ -266,6 +264,26 @@ export class BulkManager {
        return false; // Continue with other handlers
    }

+    isEditingTextInputContext(target) {
+        const activeElement = document.activeElement;
+        const candidate = target instanceof Element ? target : activeElement;
+        if (!candidate) {
+            return false;
+        }
+
+        const tagName = candidate.tagName?.toLowerCase();
+        if (
+            candidate.isContentEditable
+            || tagName === 'input'
+            || tagName === 'textarea'
+            || tagName === 'select'
+        ) {
+            return true;
+        }
+
+        return Boolean(candidate.closest?.('#filterPanel'));
+    }
+
    toggleBulkMode() {
        state.bulkMode = !state.bulkMode;

--- a/static/js/managers/FilterManager.js
+++ b/static/js/managers/FilterManager.js
@@ -20,6 +20,8 @@ export class FilterManager {
        this.filterPanel = document.getElementById('filterPanel');
        this.filterButton = document.getElementById('filterButton');
        this.activeFiltersCount = document.getElementById('activeFiltersCount');
+        this.baseModelSearchInput = document.getElementById('baseModelSearchInput');
+        this.baseModelOptions = [];
        this.tagsLoaded = false;

        // Initialize preset manager
@@ -49,6 +51,8 @@ export class FilterManager {
    }

    initialize() {
+        this.initializeFilterSearchInputs();
+
        // Create base model filter tags if they exist
        if (document.getElementById('baseModelTags')) {
            this.createBaseModelTags();
@@ -110,6 +114,18 @@ export class FilterManager {
        this.updateTagLogicToggleUI();
    }

+    initializeFilterSearchInputs() {
+        if (this.baseModelSearchInput) {
+            this.baseModelSearchInput.addEventListener('input', () => {
+                this.renderBaseModelTags();
+            });
+        }
+    }
+
+    getNormalizedSearchQuery(input) {
+        return (input?.value || '').trim().toLowerCase();
+    }
+
    updateTagLogicToggleUI() {
        const toggleContainer = document.getElementById('tagLogicToggle');
        if (!toggleContainer) return;
@@ -164,11 +180,6 @@ export class FilterManager {

        tagsContainer.innerHTML = '';

-        if (!tags.length) {
-            tagsContainer.innerHTML = `<div class="no-tags">No ${this.currentPage === 'recipes' ? 'recipe ' : ''}tags available</div>`;
-            return;
-        }
-
        // Collect existing tag names from the API response
        const existingTagNames = new Set(tags.map(t => t.tag));

@@ -186,6 +197,11 @@ export class FilterManager {
            });
        }

+        if (!tags.length) {
+            tagsContainer.innerHTML = `<div class="no-tags">No ${this.currentPage === 'recipes' ? 'recipe ' : ''}tags available</div>`;
+            return;
+        }
+
        tags.forEach(tag => {
            const tagEl = document.createElement('div');
            tagEl.className = 'filter-tag tag-filter';
@@ -212,7 +228,6 @@ export class FilterManager {
                await this.applyFilters(false);
            });

-            this.applyTagElementState(tagEl, (this.filters.tags && this.filters.tags[tagName]) || 'none');
            tagsContainer.appendChild(tagEl);
        });

@@ -235,8 +250,8 @@ export class FilterManager {
            await this.applyFilters(false);
        });

-        this.applyTagElementState(noTagsEl, (this.filters.tags && this.filters.tags[noTagsKey]) || 'none');
        tagsContainer.appendChild(noTagsEl);
+        this.updateTagSelections();
    }

    initializeLicenseFilters() {
@@ -323,44 +338,15 @@ export class FilterManager {
        if (!baseModelTagsContainer) return;

        // Set the API endpoint based on current page
-        const apiEndpoint = `/api/lm/${this.currentPage}/base-models`;
+        const apiEndpoint = `/api/lm/${this.currentPage}/base-models?limit=0`;

        // Fetch base models
        fetch(apiEndpoint)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.base_models) {
-                    baseModelTagsContainer.innerHTML = '';
-
-                    data.base_models.forEach(model => {
-                        const tag = document.createElement('div');
-                        tag.className = `filter-tag base-model-tag`;
-                        tag.dataset.baseModel = model.name;
-                        tag.innerHTML = `${model.name} <span class="tag-count">${model.count}</span>`;
-
-                        // Add click handler to toggle selection and automatically apply
-                        tag.addEventListener('click', async () => {
-                            tag.classList.toggle('active');
-
-                            if (tag.classList.contains('active')) {
-                                if (!this.filters.baseModel.includes(model.name)) {
-                                    this.filters.baseModel.push(model.name);
-                                }
-                            } else {
-                                this.filters.baseModel = this.filters.baseModel.filter(m => m !== model.name);
-                            }
-
-                            this.updateActiveFiltersCount();
-
-                            // Auto-apply filter when tag is clicked
-                            await this.applyFilters(false);
-                        });
-
-                        baseModelTagsContainer.appendChild(tag);
-                    });
-
-                    // Update selections based on stored filters
-                    this.updateTagSelections();
+                    this.baseModelOptions = data.base_models;
+                    this.renderBaseModelTags();
                }
            })
            .catch(error => {
@@ -369,6 +355,57 @@ export class FilterManager {
            });
    }

+    renderBaseModelTags() {
+        const baseModelTagsContainer = document.getElementById('baseModelTags');
+        const emptyState = document.getElementById('baseModelEmptyState');
+        if (!baseModelTagsContainer) return;
+
+        baseModelTagsContainer.innerHTML = '';
+
+        if (!this.baseModelOptions.length) {
+            baseModelTagsContainer.innerHTML = '<div class="no-tags">No base models available</div>';
+            if (emptyState) {
+                emptyState.hidden = true;
+            }
+            return;
+        }
+
+        const query = this.getNormalizedSearchQuery(this.baseModelSearchInput);
+        const filteredModels = query
+            ? this.baseModelOptions.filter(model => model.name.toLowerCase().includes(query))
+            : this.baseModelOptions;
+
+        filteredModels.forEach(model => {
+            const tag = document.createElement('div');
+            tag.className = 'filter-tag base-model-tag';
+            tag.dataset.baseModel = model.name;
+            tag.innerHTML = `${model.name} <span class="tag-count">${model.count}</span>`;
+
+            tag.addEventListener('click', async () => {
+                tag.classList.toggle('active');
+
+                if (tag.classList.contains('active')) {
+                    if (!this.filters.baseModel.includes(model.name)) {
+                        this.filters.baseModel.push(model.name);
+                    }
+                } else {
+                    this.filters.baseModel = this.filters.baseModel.filter(m => m !== model.name);
+                }
+
+                this.updateActiveFiltersCount();
+                await this.applyFilters(false);
+            });
+
+            baseModelTagsContainer.appendChild(tag);
+        });
+
+        if (emptyState) {
+            emptyState.hidden = filteredModels.length > 0;
+        }
+
+        this.updateTagSelections();
+    }
+
    async createModelTypeTags() {
        const modelTypeContainer = document.getElementById('modelTypeTags');
        if (!modelTypeContainer) return;
@@ -453,6 +490,7 @@ export class FilterManager {

                this.filterPanel.classList.remove('hidden');
                this.filterButton.classList.add('active');
+                this.baseModelSearchInput?.focus();

                // Load tags if they haven't been loaded yet
                if (!this.tagsLoaded) {
--- a/static/js/utils/eventManagementInit.js
+++ b/static/js/utils/eventManagementInit.js
@@ -25,6 +25,7 @@ export function initializeEventManagement() {
    setupPageUnloadCleanup();
    
    // Register global event handlers that need coordination
+    registerGlobalEventHandlers();
    registerContextMenuEvents();
    registerGlobalClickHandlers();
    
@@ -148,6 +149,10 @@ function registerGlobalClickHandlers() {
 * Register common application-wide event handlers
 */
 export function registerGlobalEventHandlers() {
+    eventManager.removeHandler('keydown', 'global-escape');
+    eventManager.removeHandler('focusin', 'global-focus');
+    eventManager.removeHandler('click', 'global-analytics');
+
    // Escape key handler for closing modals/panels
    eventManager.addHandler('keydown', 'global-escape', (e) => {
        if (e.key === 'Escape') {
@@ -156,6 +161,14 @@ export function registerGlobalEventHandlers() {
                modalManager.closeCurrentModal();
                return true; // Stop propagation
            }
+
+            if (
+                window.filterManager?.filterPanel
+                && !window.filterManager.filterPanel.classList.contains('hidden')
+            ) {
+                window.filterManager.closeFilterPanel();
+                return true; // Stop propagation
+            }
            
            // Check if node selector is active and close it
            if (eventManager.getState('nodeSelectorActive')) {
--- a/templates/components/header.html
+++ b/templates/components/header.html
@@ -145,9 +145,22 @@

  <div class="filter-section">
    <h4>{{ t('header.filter.baseModel') }}</h4>
+    <input
+      type="text"
+      id="baseModelSearchInput"
+      class="filter-search-input"
+      placeholder="{{ t('header.filter.baseModelSearchPlaceholder') }}"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="none"
+      spellcheck="false"
+    >
    <div class="filter-tags" id="baseModelTags">
      <!-- Tags will be dynamically inserted here -->
    </div>
+    <div id="baseModelEmptyState" class="filter-empty-state" hidden>
+      {{ t('header.filter.noBaseModelMatches') }}
+    </div>
  </div>
  <div class="filter-section">
    <div class="filter-section-header">
@@ -188,4 +201,4 @@
      {{ t('header.filter.clearAll') }}
    </button>
  </div>
-</div>
+</div>
--- a/tests/frontend/components/pageControls.filtering.test.js
+++ b/tests/frontend/components/pageControls.filtering.test.js
@@ -110,7 +110,9 @@ function renderControlsDom(pageKey) {
      <div class="search-option-tag active" data-option="filename"></div>
    </div>
    <div id="filterPanel" class="filter-panel hidden">
+      <input id="baseModelSearchInput" />
      <div id="baseModelTags" class="filter-tags"></div>
+      <div id="baseModelEmptyState" hidden></div>
      <div id="modelTagsFilter" class="filter-tags"></div>
      <button class="clear-filter"></button>
    </div>
@@ -286,6 +288,8 @@ describe('FilterManager tag and base model filters', () => {

    const manager = new FilterManager({ page: pageKey });

+    expect(global.fetch).toHaveBeenCalledWith(`/api/lm/${pageKey}/base-models?limit=0`);
+
    await vi.waitFor(() => {
      const chip = document.querySelector('[data-base-model="SDXL"]');
      expect(chip).not.toBeNull();
@@ -311,6 +315,167 @@ describe('FilterManager tag and base model filters', () => {
    expect(getCurrentPageState().filters.baseModel).toEqual([]);
    expect(baseModelChip.classList.contains('active')).toBe(false);
  });
+
+  it('filters base model chips locally without changing selected state', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        success: true,
+        base_models: [
+          { name: 'SDXL', count: 2 },
+          { name: 'LTXV 2.3', count: 1 },
+        ],
+      }),
+    });
+
+    renderControlsDom('loras');
+    const stateModule = await import('../../../static/js/state/index.js');
+    stateModule.initPageState('loras');
+    const { getCurrentPageState } = stateModule;
+    const { FilterManager } = await import('../../../static/js/managers/FilterManager.js');
+
+    new FilterManager({ page: 'loras' });
+
+    await vi.waitFor(() => {
+      expect(document.querySelector('[data-base-model="LTXV 2.3"]')).not.toBeNull();
+    });
+
+    const searchInput = document.getElementById('baseModelSearchInput');
+    const ltxvChip = document.querySelector('[data-base-model="LTXV 2.3"]');
+    ltxvChip.dispatchEvent(new Event('click', { bubbles: true }));
+    await vi.waitFor(() => expect(loadMoreWithVirtualScrollMock).toHaveBeenCalledTimes(1));
+    expect(getCurrentPageState().filters.baseModel).toEqual(['LTXV 2.3']);
+
+    loadMoreWithVirtualScrollMock.mockClear();
+    searchInput.value = 'sdx';
+    searchInput.dispatchEvent(new Event('input', { bubbles: true }));
+
+    expect(document.querySelector('[data-base-model="SDXL"]')).not.toBeNull();
+    expect(document.querySelector('[data-base-model="LTXV 2.3"]')).toBeNull();
+    expect(document.getElementById('baseModelEmptyState').hidden).toBe(true);
+    expect(getCurrentPageState().filters.baseModel).toEqual(['LTXV 2.3']);
+
+    searchInput.value = 'zzz';
+    searchInput.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(document.getElementById('baseModelEmptyState').hidden).toBe(false);
+
+    searchInput.value = 'ltx';
+    searchInput.dispatchEvent(new Event('input', { bubbles: true }));
+    const restoredChip = document.querySelector('[data-base-model="LTXV 2.3"]');
+    expect(restoredChip).not.toBeNull();
+    expect(restoredChip.classList.contains('active')).toBe(true);
+  });
+
+  it('disables browser autocomplete helpers for the base model search input', async () => {
+    renderControlsDom('loras');
+
+    const searchInput = document.getElementById('baseModelSearchInput');
+
+    searchInput.setAttribute('autocomplete', 'off');
+    searchInput.setAttribute('autocorrect', 'off');
+    searchInput.setAttribute('autocapitalize', 'none');
+    searchInput.setAttribute('spellcheck', 'false');
+
+    expect(searchInput.getAttribute('autocomplete')).toBe('off');
+    expect(searchInput.getAttribute('autocorrect')).toBe('off');
+    expect(searchInput.getAttribute('autocapitalize')).toBe('none');
+    expect(searchInput.getAttribute('spellcheck')).toBe('false');
+  });
+
+  it('focuses the base model search input when opening the filter panel', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        success: true,
+        base_models: [{ name: 'SDXL', count: 2 }],
+      }),
+    });
+
+    renderControlsDom('loras');
+    const stateModule = await import('../../../static/js/state/index.js');
+    stateModule.initPageState('loras');
+    const { FilterManager } = await import('../../../static/js/managers/FilterManager.js');
+
+    const manager = new FilterManager({ page: 'loras' });
+    const searchInput = document.getElementById('baseModelSearchInput');
+
+    expect(document.activeElement).not.toBe(searchInput);
+
+    manager.toggleFilterPanel();
+
+    expect(document.activeElement).toBe(searchInput);
+  });
+
+  it('does not let base model search trigger bulk shortcuts', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        success: true,
+        base_models: [{ name: 'SDXL', count: 2 }],
+      }),
+    });
+
+    renderControlsDom('loras');
+    const stateModule = await import('../../../static/js/state/index.js');
+    stateModule.initPageState('loras');
+    const { BulkManager } = await import('../../../static/js/managers/BulkManager.js');
+    const { FilterManager } = await import('../../../static/js/managers/FilterManager.js');
+
+    const filterManager = new FilterManager({ page: 'loras' });
+    const bulkManager = new BulkManager();
+    const searchInput = document.getElementById('baseModelSearchInput');
+    window.filterManager = filterManager;
+
+    searchInput.focus();
+
+    const bulkEvent = new KeyboardEvent('keydown', {
+      key: 'b',
+      bubbles: true,
+      cancelable: true,
+    });
+    Object.defineProperty(bulkEvent, 'target', { value: searchInput });
+    expect(bulkManager.handleGlobalKeyboard(bulkEvent)).toBe(false);
+
+    const selectAllEvent = new KeyboardEvent('keydown', {
+      key: 'a',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    Object.defineProperty(selectAllEvent, 'target', { value: searchInput });
+    expect(bulkManager.handleGlobalKeyboard(selectAllEvent)).toBe(false);
+  });
+
+  it('closes the filter panel on Escape', async () => {
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        success: true,
+        base_models: [{ name: 'SDXL', count: 2 }],
+      }),
+    });
+
+    renderControlsDom('loras');
+    const stateModule = await import('../../../static/js/state/index.js');
+    stateModule.initPageState('loras');
+    const { FilterManager } = await import('../../../static/js/managers/FilterManager.js');
+    const { eventManager } = await import('../../../static/js/utils/EventManager.js');
+    const { initializeEventManagement } = await import('../../../static/js/utils/eventManagementInit.js');
+
+    eventManager.cleanup();
+    initializeEventManagement();
+
+    const manager = new FilterManager({ page: 'loras' });
+    window.filterManager = manager;
+    manager.toggleFilterPanel();
+    expect(manager.filterPanel.classList.contains('hidden')).toBe(false);
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+
+    expect(manager.filterPanel.classList.contains('hidden')).toBe(true);
+    eventManager.cleanup();
+  });
+
 });

 describe('PageControls favorites, sorting, and duplicates scenarios', () => {
--- a/tests/routes/test_model_query_handler.py
+++ b/tests/routes/test_model_query_handler.py
@@ -0,0 +1,38 @@
+import json
+import logging
+from types import SimpleNamespace
+
+import pytest
+
+from py.routes.handlers.model_handlers import ModelQueryHandler
+
+
+class DummyService:
+    def __init__(self):
+        self.received_limit = None
+
+    async def get_base_models(self, limit):
+        self.received_limit = limit
+        return [{"name": "SDXL", "count": 2}]
+
+
+@pytest.mark.asyncio
+async def test_model_query_handler_accepts_limit_zero_for_base_models():
+    service = DummyService()
+    handler = ModelQueryHandler(service=service, logger=logging.getLogger(__name__))
+
+    response = await handler.get_base_models(SimpleNamespace(query={"limit": "0"}))
+    payload = json.loads(response.text)
+
+    assert payload["success"] is True
+    assert service.received_limit == 0
+
+
+@pytest.mark.asyncio
+async def test_model_query_handler_rejects_negative_limit_for_base_models():
+    service = DummyService()
+    handler = ModelQueryHandler(service=service, logger=logging.getLogger(__name__))
+
+    await handler.get_base_models(SimpleNamespace(query={"limit": "-1"}))
+
+    assert service.received_limit == 20
--- a/tests/routes/test_recipe_query_handler.py
+++ b/tests/routes/test_recipe_query_handler.py
@@ -0,0 +1,44 @@
+import json
+import logging
+from types import SimpleNamespace
+
+import pytest
+
+from py.routes.handlers.recipe_handlers import RecipeQueryHandler
+
+
+async def _noop():
+    return None
+
+
+@pytest.mark.asyncio
+async def test_recipe_query_handler_base_models_limit_zero_returns_all():
+    cache = SimpleNamespace(
+        raw_data=[
+            {"base_model": "SDXL"},
+            {"base_model": "LTXV 2.3"},
+            {"base_model": "SDXL"},
+        ]
+    )
+    scanner = SimpleNamespace(get_cached_data=lambda: None)
+
+    async def get_cached_data():
+        return cache
+
+    scanner.get_cached_data = get_cached_data
+
+    handler = RecipeQueryHandler(
+        ensure_dependencies_ready=_noop,
+        recipe_scanner_getter=lambda: scanner,
+        format_recipe_file_url=lambda value: value,
+        logger=logging.getLogger(__name__),
+    )
+
+    response = await handler.get_base_models(SimpleNamespace(query={"limit": "0"}))
+    payload = json.loads(response.text)
+
+    assert payload["success"] is True
+    assert payload["base_models"] == [
+        {"name": "SDXL", "count": 2},
+        {"name": "LTXV 2.3", "count": 1},
+    ]
--- a/tests/services/test_model_scanner_base_models.py
+++ b/tests/services/test_model_scanner_base_models.py
@@ -0,0 +1,52 @@
+from types import SimpleNamespace
+
+import pytest
+
+from py.services.model_scanner import ModelScanner
+
+
+class DummyScanner:
+    def __init__(self, raw_data):
+        self._cache = SimpleNamespace(raw_data=raw_data)
+
+    async def get_cached_data(self):
+        return self._cache
+
+
+@pytest.mark.asyncio
+async def test_get_base_models_limit_zero_returns_all_sorted():
+    scanner = DummyScanner(
+        [
+            {"base_model": "SDXL"},
+            {"base_model": "LTXV 2.3"},
+            {"base_model": "SDXL"},
+            {"base_model": ""},
+            {},
+        ]
+    )
+
+    result = await ModelScanner.get_base_models(scanner, limit=0)
+
+    assert result == [
+        {"name": "SDXL", "count": 2},
+        {"name": "LTXV 2.3", "count": 1},
+    ]
+
+
+@pytest.mark.asyncio
+async def test_get_base_models_positive_limit_still_truncates():
+    scanner = DummyScanner(
+        [
+            {"base_model": "SDXL"},
+            {"base_model": "LTXV 2.3"},
+            {"base_model": "Flux.1 D"},
+            {"base_model": "SDXL"},
+        ]
+    )
+
+    result = await ModelScanner.get_base_models(scanner, limit=2)
+
+    assert result == [
+        {"name": "SDXL", "count": 2},
+        {"name": "LTXV 2.3", "count": 1},
+    ]