feat: improve base model display with abbreviations in RecipeCard

- Import getBaseModelAbbreviation utility function
- Add fallback handling for missing base model values
- Display abbreviated base model names while keeping full name in tooltip
- Maintain "Unknown" label for recipes without base model specification
- Improve user experience by showing cleaner, more readable model identifiers
This commit is contained in:
Will Miao
2025-11-21 11:36:17 +08:00
parent e24621a0af
commit eda1ce9743

View File

@@ -3,7 +3,7 @@ import { showToast, copyToClipboard, sendLoraToWorkflow } from '../utils/uiHelpe
import { modalManager } from '../managers/ModalManager.js'; import { modalManager } from '../managers/ModalManager.js';
import { getCurrentPageState } from '../state/index.js'; import { getCurrentPageState } from '../state/index.js';
import { state } from '../state/index.js'; import { state } from '../state/index.js';
import { NSFW_LEVELS } from '../utils/constants.js'; import { NSFW_LEVELS, getBaseModelAbbreviation } from '../utils/constants.js';
class RecipeCard { class RecipeCard {
constructor(recipe, clickHandler) { constructor(recipe, clickHandler) {
@@ -24,8 +24,10 @@ class RecipeCard {
card.dataset.created = this.recipe.created_date; card.dataset.created = this.recipe.created_date;
card.dataset.id = this.recipe.id || ''; card.dataset.id = this.recipe.id || '';
// Get base model // Get base model with fallback
const baseModel = this.recipe.base_model || ''; const baseModelLabel = (this.recipe.base_model || '').trim() || 'Unknown';
const baseModelAbbreviation = getBaseModelAbbreviation(baseModelLabel);
const baseModelDisplay = baseModelLabel === 'Unknown' ? 'Unknown' : baseModelAbbreviation;
// Ensure loras array exists // Ensure loras array exists
const loras = this.recipe.loras || []; const loras = this.recipe.loras || [];
@@ -71,7 +73,7 @@ class RecipeCard {
`<button class="toggle-blur-btn" title="Toggle blur"> `<button class="toggle-blur-btn" title="Toggle blur">
<i class="fas fa-eye"></i> <i class="fas fa-eye"></i>
</button>` : ''} </button>` : ''}
${baseModel ? `<span class="base-model-label ${shouldBlur ? 'with-toggle' : ''}" title="${baseModel}">${baseModel}</span>` : ''} <span class="base-model-label ${shouldBlur ? 'with-toggle' : ''}" title="${baseModelLabel}">${baseModelDisplay}</span>
<div class="card-actions"> <div class="card-actions">
<i class="fas fa-share-alt" title="Share Recipe"></i> <i class="fas fa-share-alt" title="Share Recipe"></i>
<i class="fas fa-paper-plane" title="Send Recipe to Workflow (Click: Append, Shift+Click: Replace)"></i> <i class="fas fa-paper-plane" title="Send Recipe to Workflow (Click: Append, Shift+Click: Replace)"></i>
@@ -376,4 +378,4 @@ class RecipeCard {
} }
} }
export { RecipeCard }; export { RecipeCard };