diff --git a/locales/de.json b/locales/de.json index 928ddda3..2acf48ff 100644 --- a/locales/de.json +++ b/locales/de.json @@ -920,7 +920,9 @@ }, "modal": { "metadata": { - "id": "ID" + "id": "ID", + "baseModel": "Basismodell", + "unknown": "Unbekannt" }, "actions": { "openFileLocation": "Dateispeicherort öffnen", diff --git a/locales/en.json b/locales/en.json index ca3d2ffd..fd7f6420 100644 --- a/locales/en.json +++ b/locales/en.json @@ -920,7 +920,9 @@ }, "modal": { "metadata": { - "id": "ID" + "id": "ID", + "baseModel": "Base Model", + "unknown": "Unknown" }, "actions": { "openFileLocation": "Open File Location", diff --git a/locales/es.json b/locales/es.json index b5622b77..21a1490b 100644 --- a/locales/es.json +++ b/locales/es.json @@ -920,7 +920,9 @@ }, "modal": { "metadata": { - "id": "ID" + "id": "ID", + "baseModel": "Modelo base", + "unknown": "Desconocido" }, "actions": { "openFileLocation": "Abrir ubicación del archivo", diff --git a/locales/fr.json b/locales/fr.json index e8b017c5..b9949a74 100644 --- a/locales/fr.json +++ b/locales/fr.json @@ -920,7 +920,9 @@ }, "modal": { "metadata": { - "id": "ID" + "id": "ID", + "baseModel": "Modèle de base", + "unknown": "Inconnu" }, "actions": { "openFileLocation": "Ouvrir l’emplacement du fichier", diff --git a/locales/he.json b/locales/he.json index c94c3dda..a2c21cb3 100644 --- a/locales/he.json +++ b/locales/he.json @@ -920,7 +920,9 @@ }, "modal": { "metadata": { - "id": "ID" + "id": "ID", + "baseModel": "מודל בסיס", + "unknown": "לא ידוע" }, "actions": { "openFileLocation": "פתח מיקום קובץ", diff --git a/locales/ja.json b/locales/ja.json index ac25dee1..3d8e7eb6 100644 --- a/locales/ja.json +++ b/locales/ja.json @@ -920,7 +920,9 @@ }, "modal": { "metadata": { - "id": "ID" + "id": "ID", + "baseModel": "ベースモデル", + "unknown": "不明" }, "actions": { "openFileLocation": "ファイルの場所を開く", diff --git a/locales/ko.json b/locales/ko.json index 6f239b76..4e84455d 100644 --- a/locales/ko.json +++ b/locales/ko.json @@ -920,7 +920,9 @@ }, "modal": { "metadata": { - "id": "ID" + "id": "ID", + "baseModel": "베이스 모델", + "unknown": "알 수 없음" }, "actions": { "openFileLocation": "파일 위치 열기", diff --git a/locales/ru.json b/locales/ru.json index d6f131da..b32c1360 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -920,7 +920,9 @@ }, "modal": { "metadata": { - "id": "ID" + "id": "ID", + "baseModel": "Базовая модель", + "unknown": "Неизвестно" }, "actions": { "openFileLocation": "Открыть расположение файла", diff --git a/locales/zh-CN.json b/locales/zh-CN.json index c0f817ed..b95e4c8f 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -920,7 +920,9 @@ }, "modal": { "metadata": { - "id": "ID" + "id": "ID", + "baseModel": "基础模型", + "unknown": "未知" }, "actions": { "openFileLocation": "打开文件位置", diff --git a/locales/zh-TW.json b/locales/zh-TW.json index 2f32e361..193deb85 100644 --- a/locales/zh-TW.json +++ b/locales/zh-TW.json @@ -920,7 +920,9 @@ }, "modal": { "metadata": { - "id": "ID" + "id": "ID", + "baseModel": "基礎模型", + "unknown": "未知" }, "actions": { "openFileLocation": "開啟檔案位置", diff --git a/static/css/components/recipe-modal.css b/static/css/components/recipe-modal.css index 6f061a69..843256af 100644 --- a/static/css/components/recipe-modal.css +++ b/static/css/components/recipe-modal.css @@ -28,6 +28,38 @@ width: 100%; } +/* Tags row: the base model badge shares one line with the compact tags. */ +.recipe-tags-row { + display: flex; + align-items: center; + gap: var(--space-2); + width: 100%; +} + +.recipe-tags-row #recipeTagsContainer { + flex: 1; + min-width: 0; +} + +/* Header base model badge: reuses the card .base-model-label pill shape but + swaps the on-image overlay styling (text shadow, backdrop blur) for the + accent-tinted chip look used by resource rows in this modal. */ +.recipe-base-model-badge { + flex-shrink: 0; + max-width: 160px; + text-shadow: none; + backdrop-filter: none; + background: oklch(var(--lora-accent) / 0.1); + color: var(--lora-accent); + padding: 2px 8px; +} + +.recipe-base-model-badge.is-unknown { + background: var(--surface-subtle); + color: var(--text-color); + opacity: 0.6; +} + .recipe-modal-header h2 { margin: 0 0 var(--space-1); padding: var(--space-1); diff --git a/static/js/components/RecipeModal.js b/static/js/components/RecipeModal.js index fbb577f5..262b2709 100644 --- a/static/js/components/RecipeModal.js +++ b/static/js/components/RecipeModal.js @@ -494,6 +494,7 @@ class RecipeModal { this.syncGenerationParams(hydratedRecipe.gen_params); this.syncResourcesSection(hydratedRecipe); this.syncHeaderActions(); + this.syncBaseModelBadge(); this.syncMetaFooter(); // Show the modal @@ -520,6 +521,32 @@ class RecipeModal { } } + /** + * Render the recipe-level base model badge in the header tags row. + * Unlike the width-constrained card overlay (which abbreviates), the + * modal has room for the full base model name — matching the model + * modal's info grid and this modal's resource rows. Falls back to a + * dimmed "Unknown" instead of hiding so the header layout does not + * shift when hydration fills the value in. + */ + syncBaseModelBadge() { + const badge = document.getElementById('recipeBaseModelBadge'); + if (!badge) { + return; + } + + const rawLabel = (this.currentRecipe?.base_model || '').trim(); + const unknownLabel = translate('recipes.modal.metadata.unknown', {}, 'Unknown'); + const baseModelLabel = rawLabel || unknownLabel; + const fieldLabel = translate('recipes.modal.metadata.baseModel', {}, 'Base Model'); + + badge.textContent = baseModelLabel; + badge.title = `${fieldLabel}: ${baseModelLabel}`; + badge.setAttribute('aria-label', badge.title); + badge.classList.toggle('is-unknown', !rawLabel); + badge.hidden = false; + } + /** * Render the meta footer: clickable file location (opens the recipe JSON * in the OS file manager) plus the truncated recipe ID with copy button. @@ -661,6 +688,10 @@ class RecipeModal { nextRecipe.has_workflow = fullRecipe.has_workflow; } + if (fullRecipe.base_model !== undefined) { + nextRecipe.base_model = fullRecipe.base_model; + } + if (fullRecipe.checkpoint !== undefined) { nextRecipe.checkpoint = fullRecipe.checkpoint; } else { @@ -718,6 +749,7 @@ class RecipeModal { this.updateSourceUrlDisplay(this.currentRecipe.source_path || ''); } this.syncHeaderActions(); + this.syncBaseModelBadge(); this.syncMetaFooter(); } diff --git a/templates/components/recipe_modal.html b/templates/components/recipe_modal.html index e0985473..d518b7b1 100644 --- a/templates/components/recipe_modal.html +++ b/templates/components/recipe_modal.html @@ -26,8 +26,13 @@ - -
+ +
+ +
+
diff --git a/tests/frontend/components/recipeModal.baseModelBadge.test.js b/tests/frontend/components/recipeModal.baseModelBadge.test.js new file mode 100644 index 00000000..4bc78c6f --- /dev/null +++ b/tests/frontend/components/recipeModal.baseModelBadge.test.js @@ -0,0 +1,234 @@ +import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest'; + +const showToastMock = vi.fn(); +const copyToClipboardMock = vi.fn(); +const translateMock = vi.fn((key, params, fallback) => (typeof fallback === 'string' ? fallback : key)); + +const loadingManagerStub = { + showSimpleLoading: vi.fn(), + hide: vi.fn(), + show: vi.fn(), + restoreProgressBar: vi.fn(), +}; + +const recipeItem = { + id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890', + file_path: '/recipes/a1b2c3d4-e5f6-7890-abcd-ef1234567890.png', + title: 'Demo Recipe', + tags: [], + loras: [], + base_model: 'Illustrious', +}; + +const virtualScrollerStub = { + updateSingleItem: vi.fn(), + getNavigationState: vi.fn(() => ({ + index: 0, + hasPrev: false, + hasNext: false, + loadedItems: 1, + totalItems: 1, + })), + getAdjacentItemByFilePath: vi.fn(async () => null), +}; + +const stateStub = { + global: { settings: {}, loadingManager: loadingManagerStub }, + loadingManager: loadingManagerStub, + virtualScroller: virtualScrollerStub, +}; + +const modalManagerMock = { + showModal: vi.fn(), + closeModal: vi.fn(), +}; + +const fetchRecipeDetailsMock = vi.fn(async () => ({})); +const updateRecipeMetadataMock = vi.fn(() => Promise.resolve({ success: true })); + +vi.mock('../../../static/js/utils/uiHelpers.js', () => ({ + showToast: showToastMock, + copyToClipboard: copyToClipboardMock, + sendLoraToWorkflow: vi.fn(), + sendModelPathToWorkflow: vi.fn(), + openCivitaiByMetadata: vi.fn(), + stripLoraTags: vi.fn((text) => text), + sendPromptToWorkflow: vi.fn(), + sendGenParamsToWorkflow: vi.fn(), +})); + +vi.mock('../../../static/js/utils/i18nHelpers.js', () => ({ + translate: translateMock, +})); + +vi.mock('../../../static/js/state/index.js', () => ({ + state: stateStub, +})); + +vi.mock('../../../static/js/utils/storageHelpers.js', () => ({ + setSessionItem: vi.fn(), + removeSessionItem: vi.fn(), + getStorageItem: vi.fn(() => null), + setStorageItem: vi.fn(), +})); + +vi.mock('../../../static/js/api/recipeApi.js', () => ({ + fetchRecipeDetails: fetchRecipeDetailsMock, + updateRecipeMetadata: updateRecipeMetadataMock, + sendRecipeWorkflow: vi.fn(), +})); + +vi.mock('../../../static/js/api/apiConfig.js', () => ({ + MODEL_TYPES: { + LORA: 'loras', + CHECKPOINT: 'checkpoints', + EMBEDDING: 'embeddings', + }, +})); + +function recipeModalFixture() { + return ` + + `; +} + +async function flushAsyncTasks() { + await Promise.resolve(); + await new Promise((resolve) => setTimeout(resolve, 0)); +} + +const createdModals = []; + +async function createRecipeModal() { + const { RecipeModal } = await import('../../../static/js/components/RecipeModal.js'); + const recipeModal = new RecipeModal(); + createdModals.push(recipeModal); + return recipeModal; +} + +describe('RecipeModal base model badge', () => { + beforeEach(() => { + vi.clearAllMocks(); + document.body.innerHTML = recipeModalFixture(); + global.modalManager = modalManagerMock; + global.fetch = vi.fn(async () => ({ + ok: true, + json: async () => ({}), + })); + }); + + afterEach(() => { + createdModals.forEach(recipeModal => recipeModal.cleanupNavigationShortcuts()); + createdModals.length = 0; + document.body.innerHTML = ''; + delete global.modalManager; + delete global.fetch; + }); + + it('shows the full base model name with a labeled tooltip', async () => { + const recipeModal = await createRecipeModal(); + recipeModal.showRecipeDetails(recipeItem); + + const badge = document.getElementById('recipeBaseModelBadge'); + expect(badge.hidden).toBe(false); + expect(badge.textContent).toBe('Illustrious'); + expect(badge.title).toBe('Base Model: Illustrious'); + expect(badge.getAttribute('aria-label')).toBe('Base Model: Illustrious'); + expect(badge.classList.contains('is-unknown')).toBe(false); + }); + + it('falls back to a dimmed Unknown badge when no base model is set', async () => { + const recipeModal = await createRecipeModal(); + recipeModal.showRecipeDetails({ ...recipeItem, base_model: '' }); + + const badge = document.getElementById('recipeBaseModelBadge'); + expect(badge.hidden).toBe(false); + expect(badge.textContent).toBe('Unknown'); + expect(badge.title).toBe('Base Model: Unknown'); + expect(badge.classList.contains('is-unknown')).toBe(true); + }); + + it('updates the badge once hydration provides the base model', async () => { + fetchRecipeDetailsMock.mockResolvedValueOnce({ + id: recipeItem.id, + file_path: recipeItem.file_path, + base_model: 'Pony', + }); + + const recipeModal = await createRecipeModal(); + recipeModal.showRecipeDetails({ ...recipeItem, base_model: '' }); + await flushAsyncTasks(); + + const badge = document.getElementById('recipeBaseModelBadge'); + expect(badge.textContent).toBe('Pony'); + expect(badge.title).toBe('Base Model: Pony'); + expect(badge.classList.contains('is-unknown')).toBe(false); + }); + + it('keeps the list-provided base model when hydration omits it', async () => { + fetchRecipeDetailsMock.mockResolvedValueOnce({ + id: recipeItem.id, + file_path: recipeItem.file_path, + }); + + const recipeModal = await createRecipeModal(); + recipeModal.showRecipeDetails(recipeItem); + await flushAsyncTasks(); + + const badge = document.getElementById('recipeBaseModelBadge'); + expect(badge.textContent).toBe('Illustrious'); + expect(badge.title).toBe('Base Model: Illustrious'); + }); +});