refactor: update model type references from 'lora' to 'loras' and streamline event delegation setup

This commit is contained in:
Will Miao
2025-07-25 22:33:46 +08:00
parent 0d9003dea4
commit 12d1857b13
5 changed files with 47 additions and 152 deletions

View File

@@ -6,7 +6,7 @@ import {
scrollToTop,
loadExampleImages
} from './showcase/ShowcaseView.js';
import { setupTabSwitching, loadModelDescription } from './ModelDescription.js';
import { setupTabSwitching } from './ModelDescription.js';
import {
setupModelNameEditing,
setupBaseModelEditing,
@@ -29,21 +29,21 @@ export function showModelModal(model, modelType) {
const modalTitle = model.model_name;
// Prepare LoRA specific data
const escapedWords = modelType === 'lora' && model.civitai?.trainedWords?.length ?
const escapedWords = (modelType === 'loras' || modelType === 'embeddings') && model.civitai?.trainedWords?.length ?
model.civitai.trainedWords.map(word => word.replace(/'/g, '\\\'')) : [];
// Generate model type specific content
const typeSpecificContent = modelType === 'lora' ? renderLoraSpecificContent(model, escapedWords) : '';
const typeSpecificContent = modelType === 'loras' ? renderLoraSpecificContent(model, escapedWords) : '';
// Generate tabs based on model type
const tabsContent = modelType === 'lora' ?
const tabsContent = modelType === 'loras' ?
`<button class="tab-btn active" data-tab="showcase">Examples</button>
<button class="tab-btn" data-tab="description">Model Description</button>
<button class="tab-btn" data-tab="recipes">Recipes</button>` :
`<button class="tab-btn active" data-tab="showcase">Examples</button>
<button class="tab-btn" data-tab="description">Model Description</button>`;
const tabPanesContent = modelType === 'lora' ?
const tabPanesContent = modelType === 'loras' ?
`<div id="showcase-tab" class="tab-pane active">
<div class="example-images-loading">
<i class="fas fa-spinner fa-spin"></i> Loading example images...
@@ -143,7 +143,7 @@ export function showModelModal(model, modelType) {
<div class="base-wrapper">
<label>Base Model</label>
<div class="base-model-display">
<span class="base-model-content">${model.base_model || (modelType === 'checkpoint' ? 'Unknown' : 'N/A')}</span>
<span class="base-model-content">${model.base_model || 'Unknown'}</span>
<button class="edit-base-model-btn" title="Edit base model">
<i class="fas fa-pencil-alt"></i>
</button>
@@ -206,16 +206,13 @@ export function showModelModal(model, modelType) {
setupEventHandlers(model.file_path);
// LoRA specific setup
if (modelType === 'lora') {
if (modelType === 'loras' || modelType === 'embeddings') {
setupTriggerWordsEditMode();
// Load recipes for this LoRA
loadRecipesForLora(model.model_name, model.sha256);
}
// If we have a model ID but no description, fetch it
if (model.civitai?.modelId && !model.modelDescription) {
loadModelDescription(model.civitai.modelId, model.file_path);
if (modelType == 'loras') {
// Load recipes for this LoRA
loadRecipesForLora(model.model_name, model.sha256);
}
}
// Load example images asynchronously - merge regular and custom images
@@ -297,7 +294,7 @@ function setupEventHandlers(filePath) {
/**
* Set up editable fields (notes and usage tips) in the model modal
* @param {string} filePath - The full file path of the model
* @param {string} modelType - Type of model ('lora' or 'checkpoint')
* @param {string} modelType - Type of model ('loras' or 'checkpoints' or 'embeddings')
*/
function setupEditableFields(filePath, modelType) {
const editableFields = document.querySelectorAll('.editable-field [contenteditable]');
@@ -328,13 +325,13 @@ function setupEditableFields(filePath, modelType) {
return;
}
e.preventDefault();
await saveNotes(filePath, modelType);
await saveNotes(filePath);
}
});
}
// LoRA specific field setup
if (modelType === 'lora') {
if (modelType === 'loras') {
setupLoraSpecificFields(filePath);
}
}
@@ -398,9 +395,8 @@ function setupLoraSpecificFields(filePath) {
/**
* Save model notes
* @param {string} filePath - Path to the model file
* @param {string} modelType - Type of model ('lora' or 'checkpoint')
*/
async function saveNotes(filePath, modelType) {
async function saveNotes(filePath) {
const content = document.querySelector('.notes-content').textContent;
try {
await getModelApiClient().saveModelMetadata(filePath, { notes: content });
@@ -418,35 +414,4 @@ const modelModal = {
scrollToTop
};
export { modelModal };
// Define global functions for use in HTML
window.toggleShowcase = function(element) {
toggleShowcase(element);
};
window.scrollToTopModel = function(button) {
scrollToTop(button);
};
// Legacy global functions for backward compatibility
window.scrollToTopLora = function(button) {
scrollToTop(button);
};
window.scrollToTopCheckpoint = function(button) {
scrollToTop(button);
};
window.saveModelNotes = function(filePath, modelType) {
saveNotes(filePath, modelType);
};
// Legacy functions
window.saveLoraNotes = function(filePath) {
saveNotes(filePath, 'lora');
};
window.saveCheckpointNotes = function(filePath) {
saveNotes(filePath, 'checkpoint');
};
export { modelModal };