refactor: rename 'lora-card' to 'model-card' across styles and scripts for consistency

This commit is contained in:
Will Miao
2025-07-25 23:23:57 +08:00
parent e4ce384023
commit 381bd3938a
21 changed files with 58 additions and 60 deletions

View File

@@ -6,7 +6,7 @@ import { showDeleteModal, showExcludeModal } from '../../utils/modalUtils.js';
export class CheckpointContextMenu extends BaseContextMenu {
constructor() {
super('checkpointContextMenu', '.lora-card');
super('checkpointContextMenu', '.model-card');
this.nsfwSelector = document.getElementById('nsfwLevelSelector');
this.modelType = 'checkpoint';
this.resetAndReload = resetAndReload;

View File

@@ -6,7 +6,7 @@ import { showDeleteModal, showExcludeModal } from '../../utils/modalUtils.js';
export class EmbeddingContextMenu extends BaseContextMenu {
constructor() {
super('embeddingContextMenu', '.embedding-card');
super('embeddingContextMenu', '.model-card');
this.nsfwSelector = document.getElementById('nsfwLevelSelector');
this.modelType = 'embedding';
this.resetAndReload = resetAndReload;

View File

@@ -6,7 +6,7 @@ import { showExcludeModal, showDeleteModal } from '../../utils/modalUtils.js';
export class LoraContextMenu extends BaseContextMenu {
constructor() {
super('loraContextMenu', '.lora-card');
super('loraContextMenu', '.model-card');
this.nsfwSelector = document.getElementById('nsfwLevelSelector');
this.modelType = 'lora';
this.resetAndReload = resetAndReload;

View File

@@ -7,7 +7,7 @@ import { state } from '../../state/index.js';
export class RecipeContextMenu extends BaseContextMenu {
constructor() {
super('recipeContextMenu', '.lora-card');
super('recipeContextMenu', '.model-card');
this.nsfwSelector = document.getElementById('nsfwLevelSelector');
this.modelType = 'recipe';

View File

@@ -243,7 +243,7 @@ export class DuplicatesManager {
checkboxes.forEach(checkbox => {
checkbox.checked = !allSelected;
const recipeId = checkbox.dataset.recipeId;
const card = checkbox.closest('.lora-card');
const card = checkbox.closest('.model-card');
if (!allSelected) {
this.selectedForDeletion.add(recipeId);
@@ -268,7 +268,7 @@ export class DuplicatesManager {
checkboxes.forEach(checkbox => {
checkbox.checked = true;
this.selectedForDeletion.add(checkbox.dataset.recipeId);
checkbox.closest('.lora-card').classList.add('duplicate-selected');
checkbox.closest('.model-card').classList.add('duplicate-selected');
});
// Update the button text
@@ -299,7 +299,7 @@ export class DuplicatesManager {
if (checkbox) {
checkbox.checked = true;
this.selectedForDeletion.add(recipeId);
checkbox.closest('.lora-card').classList.add('duplicate-selected');
checkbox.closest('.model-card').classList.add('duplicate-selected');
}
}
@@ -310,7 +310,7 @@ export class DuplicatesManager {
if (latestCheckbox) {
latestCheckbox.checked = false;
this.selectedForDeletion.delete(latestId);
latestCheckbox.closest('.lora-card').classList.remove('duplicate-selected');
latestCheckbox.closest('.model-card').classList.remove('duplicate-selected');
}
this.updateSelectedCount();

View File

@@ -330,7 +330,7 @@ export class ModelDuplicatesManager {
renderModelCard(model, groupHash) {
// Create basic card structure
const card = document.createElement('div');
card.className = 'lora-card duplicate';
card.className = 'model-card duplicate';
card.dataset.hash = model.sha256;
card.dataset.filePath = model.file_path;
@@ -549,7 +549,7 @@ export class ModelDuplicatesManager {
checkboxes.forEach(checkbox => {
checkbox.checked = !allSelected;
const filePath = checkbox.dataset.filePath;
const card = checkbox.closest('.lora-card');
const card = checkbox.closest('.model-card');
if (!allSelected) {
this.selectedForDeletion.add(filePath);

View File

@@ -17,7 +17,7 @@ class RecipeCard {
createCardElement() {
const card = document.createElement('div');
card.className = 'lora-card';
card.className = 'model-card';
card.dataset.filepath = this.recipe.file_path;
card.dataset.title = this.recipe.title;
card.dataset.nsfwLevel = this.recipe.preview_nsfw_level || 0;

View File

@@ -242,7 +242,7 @@ export class PageControls {
* @param {string} folderPath - Folder path to filter by
*/
filterByFolder(folderPath) {
const cardSelector = this.pageType === 'loras' ? '.lora-card' : '.checkpoint-card';
const cardSelector = this.pageType === 'loras' ? '.model-card' : '.checkpoint-card';
document.querySelectorAll(cardSelector).forEach(card => {
card.style.display = card.dataset.folder === folderPath ? '' : 'none';
});
@@ -374,7 +374,7 @@ export class PageControls {
openCivitai(modelName) {
// Get card selector based on page type
const cardSelector = this.pageType === 'loras'
? `.lora-card[data-name="${modelName}"]`
? `.model-card[data-name="${modelName}"]`
: `.checkpoint-card[data-name="${modelName}"]`;
const card = document.querySelector(cardSelector);

View File

@@ -28,10 +28,8 @@ export function setupModelCardEventDelegation(modelType) {
// Event delegation handler for all model card events
function handleModelCardEvent_internal(event, modelType) {
// Find the closest card element
const card = event.target.closest('.lora-card');
const card = event.target.closest('.model-card');
if (!card) return;
const apiClient = getModelApiClient();
// Handle specific elements within the card
if (event.target.closest('.toggle-blur-btn')) {
@@ -80,7 +78,7 @@ function handleModelCardEvent_internal(event, modelType) {
if (event.target.closest('.fa-image')) {
event.stopPropagation();
apiClient.replaceModelPreview(card.dataset.filepath);
getModelApiClient().replaceModelPreview(card.dataset.filepath);
return;
}
@@ -137,7 +135,7 @@ async function toggleFavorite(card) {
const newFavoriteState = !isFavorite;
try {
await apiClient.saveModelMetadata(card.dataset.filepath, {
await getModelApiClient().saveModelMetadata(card.dataset.filepath, {
favorite: newFavoriteState
});
@@ -364,7 +362,7 @@ function showExampleAccessModal(card, modelType) {
export function createModelCard(model, modelType) {
const card = document.createElement('div');
card.className = 'lora-card'; // Reuse the same class for styling
card.className = 'model-card'; // Reuse the same class for styling
card.dataset.sha256 = model.sha256;
card.dataset.filepath = model.file_path;
card.dataset.name = model.model_name;
@@ -518,7 +516,7 @@ export function updateCardsForBulkMode(isBulkMode) {
document.body.classList.toggle('bulk-mode', isBulkMode);
// Get all lora cards - this can now be from the DOM or through the virtual scroller
const loraCards = document.querySelectorAll('.lora-card');
const loraCards = document.querySelectorAll('.model-card');
loraCards.forEach(card => {
// Get all action containers for this card

View File

@@ -380,7 +380,7 @@ function setupLoraSpecificFields(filePath) {
if (!key || !value) return;
const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
const loraCard = document.querySelector(`.model-card[data-filepath="${filePath}"]`);
const currentPresets = parsePresets(loraCard?.dataset.usage_tips);
currentPresets[key] = parseFloat(value);

View File

@@ -52,7 +52,7 @@ window.removePreset = async function(key) {
.querySelector('.file-path').textContent +
document.querySelector('#modelModal .modal-content')
.querySelector('#file-name').textContent + '.safetensors';
const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
const loraCard = document.querySelector(`.model-card[data-filepath="${filePath}"]`);
const currentPresets = parsePresets(loraCard.dataset.usage_tips);
delete currentPresets[key];

View File

@@ -96,7 +96,7 @@ function renderRecipes(tabElement, recipes, loraName, loraHash) {
// Create card element matching the structure in recipes.html
const card = document.createElement('div');
card.className = 'lora-card';
card.className = 'model-card';
card.dataset.filePath = recipe.file_path || '';
card.dataset.title = recipe.title || '';
card.dataset.created = recipe.created_date || '';