mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-24 14:42:11 -03:00
Enhance Checkpoints Manager: Implement API integration for checkpoints, add filtering and sorting options, and improve UI components for better user experience
This commit is contained in:
Will Miao
147
static/js/components/CheckpointCard.js
Normal file
147
static/js/components/CheckpointCard.js
Normal file
@@ -0,0 +1,147 @@
|
||||
import { showToast } from '../utils/uiHelpers.js';
|
||||
import { state } from '../state/index.js';
|
||||
import { CheckpointModal } from './CheckpointModal.js';
|
||||
|
||||
// Create an instance of the modal
|
||||
const checkpointModal = new CheckpointModal();
|
||||
|
||||
export function createCheckpointCard(checkpoint) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'lora-card'; // Reuse the same class for styling
|
||||
card.dataset.sha256 = checkpoint.sha256;
|
||||
card.dataset.filepath = checkpoint.file_path;
|
||||
card.dataset.name = checkpoint.model_name;
|
||||
card.dataset.file_name = checkpoint.file_name;
|
||||
card.dataset.folder = checkpoint.folder;
|
||||
card.dataset.modified = checkpoint.modified;
|
||||
card.dataset.file_size = checkpoint.file_size;
|
||||
card.dataset.from_civitai = checkpoint.from_civitai;
|
||||
card.dataset.base_model = checkpoint.base_model || 'Unknown';
|
||||
|
||||
// Store metadata if available
|
||||
if (checkpoint.civitai) {
|
||||
card.dataset.meta = JSON.stringify(checkpoint.civitai || {});
|
||||
}
|
||||
|
||||
// Store tags if available
|
||||
if (checkpoint.tags && Array.isArray(checkpoint.tags)) {
|
||||
card.dataset.tags = JSON.stringify(checkpoint.tags);
|
||||
}
|
||||
|
||||
// Determine preview URL
|
||||
const previewUrl = checkpoint.preview_url || '/loras_static/images/no-preview.png';
|
||||
const version = state.previewVersions ? state.previewVersions.get(checkpoint.file_path) : null;
|
||||
const versionedPreviewUrl = version ? `${previewUrl}?t=${version}` : previewUrl;
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="card-preview">
|
||||
<img src="${versionedPreviewUrl}" alt="${checkpoint.model_name}">
|
||||
<div class="card-header">
|
||||
<span class="base-model-label" title="${checkpoint.base_model || 'Unknown'}">
|
||||
${checkpoint.base_model || 'Unknown'}
|
||||
</span>
|
||||
<div class="card-actions">
|
||||
<i class="fas fa-globe"
|
||||
title="${checkpoint.from_civitai ? 'View on Civitai' : 'Not available from Civitai'}"
|
||||
${!checkpoint.from_civitai ? 'style="opacity: 0.5; cursor: not-allowed"' : ''}>
|
||||
</i>
|
||||
<i class="fas fa-trash"
|
||||
title="Delete Model">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="model-info">
|
||||
<span class="model-name">${checkpoint.model_name}</span>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<i class="fas fa-image"
|
||||
title="Replace Preview Image">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Main card click event
|
||||
card.addEventListener('click', () => {
|
||||
// Show checkpoint details modal
|
||||
const checkpointMeta = {
|
||||
sha256: card.dataset.sha256,
|
||||
file_path: card.dataset.filepath,
|
||||
model_name: card.dataset.name,
|
||||
file_name: card.dataset.file_name,
|
||||
folder: card.dataset.folder,
|
||||
modified: card.dataset.modified,
|
||||
file_size: parseInt(card.dataset.file_size || '0'),
|
||||
from_civitai: card.dataset.from_civitai === 'true',
|
||||
base_model: card.dataset.base_model,
|
||||
preview_url: versionedPreviewUrl,
|
||||
// Parse civitai metadata from the card's dataset
|
||||
civitai: (() => {
|
||||
try {
|
||||
return JSON.parse(card.dataset.meta || '{}');
|
||||
} catch (e) {
|
||||
console.error('Failed to parse civitai metadata:', e);
|
||||
return {}; // Return empty object on error
|
||||
}
|
||||
})(),
|
||||
tags: (() => {
|
||||
try {
|
||||
return JSON.parse(card.dataset.tags || '[]');
|
||||
} catch (e) {
|
||||
console.error('Failed to parse tags:', e);
|
||||
return []; // Return empty array on error
|
||||
}
|
||||
})()
|
||||
};
|
||||
checkpointModal.showCheckpointDetails(checkpointMeta);
|
||||
});
|
||||
|
||||
// Civitai button click event
|
||||
if (checkpoint.from_civitai) {
|
||||
card.querySelector('.fa-globe')?.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
openCivitai(checkpoint.model_name);
|
||||
});
|
||||
}
|
||||
|
||||
// Delete button click event
|
||||
card.querySelector('.fa-trash')?.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
deleteCheckpoint(checkpoint.file_path);
|
||||
});
|
||||
|
||||
// Replace preview button click event
|
||||
card.querySelector('.fa-image')?.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
replaceCheckpointPreview(checkpoint.file_path);
|
||||
});
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// These functions will be implemented in checkpointApi.js
|
||||
function openCivitai(modelName) {
|
||||
if (window.openCivitai) {
|
||||
window.openCivitai(modelName);
|
||||
} else {
|
||||
console.log('Opening Civitai for:', modelName);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteCheckpoint(filePath) {
|
||||
if (window.deleteCheckpoint) {
|
||||
window.deleteCheckpoint(filePath);
|
||||
} else {
|
||||
console.log('Delete checkpoint:', filePath);
|
||||
}
|
||||
}
|
||||
|
||||
function replaceCheckpointPreview(filePath) {
|
||||
if (window.replaceCheckpointPreview) {
|
||||
window.replaceCheckpointPreview(filePath);
|
||||
} else {
|
||||
console.log('Replace checkpoint preview:', filePath);
|
||||
}
|
||||
}
|
||||
120
static/js/components/CheckpointModal.js
Normal file
120
static/js/components/CheckpointModal.js
Normal file
@@ -0,0 +1,120 @@
|
||||
import { showToast } from '../utils/uiHelpers.js';
|
||||
import { modalManager } from '../managers/ModalManager.js';
|
||||
|
||||
/**
|
||||
* CheckpointModal - Component for displaying checkpoint details
|
||||
* This is a basic implementation that can be expanded in the future
|
||||
*/
|
||||
export class CheckpointModal {
|
||||
constructor() {
|
||||
this.modal = document.getElementById('checkpointModal');
|
||||
this.modalTitle = document.getElementById('checkpointModalTitle');
|
||||
this.modalContent = document.getElementById('checkpointModalContent');
|
||||
this.currentCheckpoint = null;
|
||||
|
||||
// Initialize close events
|
||||
this._initCloseEvents();
|
||||
}
|
||||
|
||||
_initCloseEvents() {
|
||||
if (!this.modal) return;
|
||||
|
||||
// Close button
|
||||
const closeBtn = this.modal.querySelector('.close');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => this.close());
|
||||
}
|
||||
|
||||
// Click outside to close
|
||||
this.modal.addEventListener('click', (e) => {
|
||||
if (e.target === this.modal) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show checkpoint details in the modal
|
||||
* @param {Object} checkpoint - Checkpoint data
|
||||
*/
|
||||
showCheckpointDetails(checkpoint) {
|
||||
if (!this.modal || !this.modalContent) {
|
||||
console.error('Checkpoint modal elements not found');
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentCheckpoint = checkpoint;
|
||||
|
||||
// Set modal title
|
||||
if (this.modalTitle) {
|
||||
this.modalTitle.textContent = checkpoint.model_name || 'Checkpoint Details';
|
||||
}
|
||||
|
||||
// This is a basic implementation that can be expanded with more details
|
||||
// For now, just display some basic information
|
||||
this.modalContent.innerHTML = `
|
||||
<div class="checkpoint-details">
|
||||
<div class="checkpoint-preview">
|
||||
<img src="${checkpoint.preview_url || '/loras_static/images/no-preview.png'}"
|
||||
alt="${checkpoint.model_name}" />
|
||||
</div>
|
||||
<div class="checkpoint-info">
|
||||
<h3>${checkpoint.model_name}</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-row">
|
||||
<span class="info-label">File Name:</span>
|
||||
<span class="info-value">${checkpoint.file_name}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Location:</span>
|
||||
<span class="info-value">${checkpoint.folder}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Base Model:</span>
|
||||
<span class="info-value">${checkpoint.base_model || 'Unknown'}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">File Size:</span>
|
||||
<span class="info-value">${this._formatFileSize(checkpoint.file_size)}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">SHA256:</span>
|
||||
<span class="info-value sha-value">${checkpoint.sha256 || 'Unknown'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placeholder-message">
|
||||
<p>Detailed checkpoint information will be implemented in a future update.</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Show the modal
|
||||
this.modal.style.display = 'block';
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the modal
|
||||
*/
|
||||
close() {
|
||||
if (this.modal) {
|
||||
this.modal.style.display = 'none';
|
||||
this.currentCheckpoint = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format file size for display
|
||||
* @param {number} bytes - File size in bytes
|
||||
* @returns {string} - Formatted file size
|
||||
*/
|
||||
_formatFileSize(bytes) {
|
||||
if (!bytes) return 'Unknown';
|
||||
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
if (i === 0) return `${bytes} ${sizes[i]}`;
|
||||
return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user