alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): enhance model card header with sub-type display and gradient overlay

Browse Source 
- Add gradient overlay to card header for better icon readability
- Update base model label to display sub-type abbreviation alongside base model
- Add separator between sub-type and base model for visual clarity
- Improve label styling with flex layout, adjusted padding, and enhanced backdrop filter
- Add helper functions for sub-type abbreviation retrieval and display names
This commit is contained in:
Will Miao
2026-01-30 09:46:31 +08:00
parent 84c62f2954
commit 233427600a
3 changed files with 71 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
static/js/components/shared/ModelCard.js
View File

@@ -4,7 +4,7 @@ import { showModelModal } from './ModelModal.js';
import { toggleShowcase } from './showcase/ShowcaseView.js';
import { bulkManager } from '../../managers/BulkManager.js';
import { modalManager } from '../../managers/ModalManager.js';
import { NSFW_LEVELS, getBaseModelAbbreviation } from '../../utils/constants.js';
import { NSFW_LEVELS, getBaseModelAbbreviation, getSubTypeAbbreviation, MODEL_SUBTYPE_DISPLAY_NAMES } from '../../utils/constants.js';
import { MODEL_TYPES } from '../../api/apiConfig.js';
import { getModelApiClient } from '../../api/modelApiFactory.js';
import { showDeleteModal } from '../../utils/modalUtils.js';
@@ -580,6 +580,11 @@ export function createModelCard(model, modelType) {
const baseModelLabel = model.base_model || 'Unknown';
const baseModelAbbreviation = getBaseModelAbbreviation(baseModelLabel);
// Sub-type display (e.g., LoRA, LyCO, DoRA, CKPT, DM, EMB)
const subType = model.sub_type || '';
const subTypeAbbreviation = getSubTypeAbbreviation(subType);
const fullSubTypeName = MODEL_SUBTYPE_DISPLAY_NAMES[subType?.toLowerCase()] || subType || '';
card.innerHTML = `
<div class="card-preview ${shouldBlur ? 'blurred' : ''}">
${isVideo ?
@@ -592,8 +597,11 @@ export function createModelCard(model, modelType) {
<i class="fas fa-eye"></i>
</button>` : ''}
<div class="card-header-info">
<span class="base-model-label ${shouldBlur ? 'with-toggle' : ''}" title="${baseModelLabel}">
${baseModelAbbreviation}
<span class="base-model-label ${shouldBlur ? 'with-toggle' : ''}"
title="${fullSubTypeName ? fullSubTypeName + ' | ' : ''}${baseModelLabel}">
${subTypeAbbreviation ? `<span class="model-sub-type">${subTypeAbbreviation}</span>` : ''}
${subTypeAbbreviation ? `<span class="model-separator"></span>` : ''}
<span class="model-base-type">${baseModelAbbreviation}</span>
</span>
${hasUpdateAvailable ? `
<span class="model-update-badge" title="${updateBadgeTooltip}">

18
static/js/utils/constants.js
View File

@@ -73,6 +73,24 @@ export const MODEL_SUBTYPE_DISPLAY_NAMES = {
// Backward compatibility alias
export const MODEL_TYPE_DISPLAY_NAMES = MODEL_SUBTYPE_DISPLAY_NAMES;
// Abbreviated sub-type names for compact display (e.g., in model card labels)
export const MODEL_SUBTYPE_ABBREVIATIONS = {
lora: "LoRA",
locon: "LyCO",
dora: "DoRA",
checkpoint: "CKPT",
diffusion_model: "DM",
embedding: "EMB",
};
export function getSubTypeAbbreviation(subType) {
if (!subType || typeof subType !== 'string') {
return '';
}
const normalized = subType.toLowerCase();
return MODEL_SUBTYPE_ABBREVIATIONS[normalized] || subType.toUpperCase().slice(0, 4);
}
export const BASE_MODEL_ABBREVIATIONS = {
// Stable Diffusion 1.x models
[BASE_MODELS.SD_1_4]: 'SD1',