mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-22 05:32:12 -03:00
f82908221c
- Added i18n support with automatic language detection based on browser settings. - Implemented translations for English (en) and Simplified Chinese (zh-CN). - Created utility functions for text replacement in HTML templates and JavaScript. - Developed a comprehensive translation key structure for various application components. - Added formatting functions for numbers, dates, and file sizes according to locale. - Included RTL language support and dynamic updates for DOM elements. - Created tests to verify the functionality of the i18n system.
619 lines
22 KiB
JavaScript
619 lines
22 KiB
JavaScript
import { state, getCurrentPageState } from '../state/index.js';
|
|
import { showToast, copyToClipboard, sendLoraToWorkflow } from '../utils/uiHelpers.js';
|
|
import { updateCardsForBulkMode } from '../components/shared/ModelCard.js';
|
|
import { modalManager } from './ModalManager.js';
|
|
import { moveManager } from './MoveManager.js';
|
|
import { getModelApiClient } from '../api/modelApiFactory.js';
|
|
import { MODEL_TYPES, MODEL_CONFIG } from '../api/apiConfig.js';
|
|
import { updateBulkSelectionCount } from '../utils/i18nHelpers.js';
|
|
|
|
export class BulkManager {
|
|
constructor() {
|
|
this.bulkBtn = document.getElementById('bulkOperationsBtn');
|
|
this.bulkPanel = document.getElementById('bulkOperationsPanel');
|
|
this.isStripVisible = false;
|
|
|
|
this.stripMaxThumbnails = 50;
|
|
|
|
// Model type specific action configurations
|
|
this.actionConfig = {
|
|
[MODEL_TYPES.LORA]: {
|
|
sendToWorkflow: true,
|
|
copyAll: true,
|
|
refreshAll: true,
|
|
moveAll: true,
|
|
deleteAll: true
|
|
},
|
|
[MODEL_TYPES.EMBEDDING]: {
|
|
sendToWorkflow: false,
|
|
copyAll: false,
|
|
refreshAll: true,
|
|
moveAll: true,
|
|
deleteAll: true
|
|
},
|
|
[MODEL_TYPES.CHECKPOINT]: {
|
|
sendToWorkflow: false,
|
|
copyAll: false,
|
|
refreshAll: true,
|
|
moveAll: false,
|
|
deleteAll: true
|
|
}
|
|
};
|
|
}
|
|
|
|
initialize() {
|
|
this.setupEventListeners();
|
|
this.setupGlobalKeyboardListeners();
|
|
}
|
|
|
|
setupEventListeners() {
|
|
// Bulk operations button listeners
|
|
const sendToWorkflowBtn = this.bulkPanel?.querySelector('[data-action="send-to-workflow"]');
|
|
const copyAllBtn = this.bulkPanel?.querySelector('[data-action="copy-all"]');
|
|
const refreshAllBtn = this.bulkPanel?.querySelector('[data-action="refresh-all"]');
|
|
const moveAllBtn = this.bulkPanel?.querySelector('[data-action="move-all"]');
|
|
const deleteAllBtn = this.bulkPanel?.querySelector('[data-action="delete-all"]');
|
|
const clearBtn = this.bulkPanel?.querySelector('[data-action="clear"]');
|
|
|
|
if (sendToWorkflowBtn) {
|
|
sendToWorkflowBtn.addEventListener('click', () => this.sendAllModelsToWorkflow());
|
|
}
|
|
if (copyAllBtn) {
|
|
copyAllBtn.addEventListener('click', () => this.copyAllModelsSyntax());
|
|
}
|
|
if (refreshAllBtn) {
|
|
refreshAllBtn.addEventListener('click', () => this.refreshAllMetadata());
|
|
}
|
|
if (moveAllBtn) {
|
|
moveAllBtn.addEventListener('click', () => {
|
|
moveManager.showMoveModal('bulk');
|
|
});
|
|
}
|
|
if (deleteAllBtn) {
|
|
deleteAllBtn.addEventListener('click', () => this.showBulkDeleteModal());
|
|
}
|
|
if (clearBtn) {
|
|
clearBtn.addEventListener('click', () => this.clearSelection());
|
|
}
|
|
|
|
// Selected count click listener
|
|
const selectedCount = document.getElementById('selectedCount');
|
|
if (selectedCount) {
|
|
selectedCount.addEventListener('click', () => this.toggleThumbnailStrip());
|
|
}
|
|
}
|
|
|
|
setupGlobalKeyboardListeners() {
|
|
document.addEventListener('keydown', (e) => {
|
|
if (modalManager.isAnyModalOpen()) {
|
|
return;
|
|
}
|
|
|
|
const searchInput = document.getElementById('searchInput');
|
|
if (searchInput && document.activeElement === searchInput) {
|
|
return;
|
|
}
|
|
|
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a') {
|
|
e.preventDefault();
|
|
if (!state.bulkMode) {
|
|
this.toggleBulkMode();
|
|
setTimeout(() => this.selectAllVisibleModels(), 50);
|
|
} else {
|
|
this.selectAllVisibleModels();
|
|
}
|
|
} else if (e.key === 'Escape' && state.bulkMode) {
|
|
this.toggleBulkMode();
|
|
} else if (e.key.toLowerCase() === 'b') {
|
|
this.toggleBulkMode();
|
|
}
|
|
});
|
|
}
|
|
|
|
toggleBulkMode() {
|
|
state.bulkMode = !state.bulkMode;
|
|
|
|
this.bulkBtn.classList.toggle('active', state.bulkMode);
|
|
|
|
if (state.bulkMode) {
|
|
this.bulkPanel.classList.remove('hidden');
|
|
this.updateActionButtonsVisibility();
|
|
setTimeout(() => {
|
|
this.bulkPanel.classList.add('visible');
|
|
}, 10);
|
|
} else {
|
|
this.bulkPanel.classList.remove('visible');
|
|
setTimeout(() => {
|
|
this.bulkPanel.classList.add('hidden');
|
|
}, 400);
|
|
this.hideThumbnailStrip();
|
|
}
|
|
|
|
updateCardsForBulkMode(state.bulkMode);
|
|
|
|
if (!state.bulkMode) {
|
|
this.clearSelection();
|
|
|
|
// TODO:
|
|
document.querySelectorAll('.model-card').forEach(card => {
|
|
const actions = card.querySelectorAll('.card-actions, .card-button');
|
|
actions.forEach(action => action.style.display = 'flex');
|
|
});
|
|
}
|
|
}
|
|
|
|
updateActionButtonsVisibility() {
|
|
const currentModelType = state.currentPageType;
|
|
const config = this.actionConfig[currentModelType];
|
|
|
|
if (!config) return;
|
|
|
|
// Update button visibility based on model type
|
|
const sendToWorkflowBtn = this.bulkPanel?.querySelector('[data-action="send-to-workflow"]');
|
|
const copyAllBtn = this.bulkPanel?.querySelector('[data-action="copy-all"]');
|
|
const refreshAllBtn = this.bulkPanel?.querySelector('[data-action="refresh-all"]');
|
|
const moveAllBtn = this.bulkPanel?.querySelector('[data-action="move-all"]');
|
|
const deleteAllBtn = this.bulkPanel?.querySelector('[data-action="delete-all"]');
|
|
|
|
if (sendToWorkflowBtn) {
|
|
sendToWorkflowBtn.style.display = config.sendToWorkflow ? 'block' : 'none';
|
|
}
|
|
if (copyAllBtn) {
|
|
copyAllBtn.style.display = config.copyAll ? 'block' : 'none';
|
|
}
|
|
if (refreshAllBtn) {
|
|
refreshAllBtn.style.display = config.refreshAll ? 'block' : 'none';
|
|
}
|
|
if (moveAllBtn) {
|
|
moveAllBtn.style.display = config.moveAll ? 'block' : 'none';
|
|
}
|
|
if (deleteAllBtn) {
|
|
deleteAllBtn.style.display = config.deleteAll ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
clearSelection() {
|
|
document.querySelectorAll('.model-card.selected').forEach(card => {
|
|
card.classList.remove('selected');
|
|
});
|
|
state.selectedModels.clear();
|
|
this.updateSelectedCount();
|
|
this.hideThumbnailStrip();
|
|
}
|
|
|
|
updateSelectedCount() {
|
|
const countElement = document.getElementById('selectedCount');
|
|
|
|
if (countElement) {
|
|
// Use i18n helper to update the count text
|
|
updateBulkSelectionCount(state.selectedModels.size);
|
|
|
|
const existingCaret = countElement.querySelector('.dropdown-caret');
|
|
if (existingCaret) {
|
|
existingCaret.className = `fas fa-caret-${this.isStripVisible ? 'down' : 'up'} dropdown-caret`;
|
|
existingCaret.style.visibility = state.selectedModels.size > 0 ? 'visible' : 'hidden';
|
|
} else {
|
|
const caretIcon = document.createElement('i');
|
|
caretIcon.className = `fas fa-caret-${this.isStripVisible ? 'down' : 'up'} dropdown-caret`;
|
|
caretIcon.style.visibility = state.selectedModels.size > 0 ? 'visible' : 'hidden';
|
|
countElement.appendChild(caretIcon);
|
|
}
|
|
}
|
|
}
|
|
|
|
toggleCardSelection(card) {
|
|
const filepath = card.dataset.filepath;
|
|
|
|
if (card.classList.contains('selected')) {
|
|
card.classList.remove('selected');
|
|
state.selectedModels.delete(filepath);
|
|
} else {
|
|
card.classList.add('selected');
|
|
state.selectedModels.add(filepath);
|
|
|
|
// Cache the metadata for this model
|
|
const metadataCache = this.getMetadataCache();
|
|
metadataCache.set(filepath, {
|
|
fileName: card.dataset.file_name,
|
|
usageTips: card.dataset.usage_tips,
|
|
previewUrl: this.getCardPreviewUrl(card),
|
|
isVideo: this.isCardPreviewVideo(card),
|
|
modelName: card.dataset.name
|
|
});
|
|
}
|
|
|
|
this.updateSelectedCount();
|
|
|
|
if (this.isStripVisible) {
|
|
this.updateThumbnailStrip();
|
|
}
|
|
}
|
|
|
|
getMetadataCache() {
|
|
const currentType = state.currentPageType;
|
|
const pageState = getCurrentPageState();
|
|
|
|
// Initialize metadata cache if it doesn't exist
|
|
if (currentType === MODEL_TYPES.LORA) {
|
|
if (!state.loraMetadataCache) {
|
|
state.loraMetadataCache = new Map();
|
|
}
|
|
return state.loraMetadataCache;
|
|
} else {
|
|
if (!pageState.metadataCache) {
|
|
pageState.metadataCache = new Map();
|
|
}
|
|
return pageState.metadataCache;
|
|
}
|
|
}
|
|
|
|
getCardPreviewUrl(card) {
|
|
const img = card.querySelector('img');
|
|
const video = card.querySelector('video source');
|
|
return img ? img.src : (video ? video.src : '/loras_static/images/no-preview.png');
|
|
}
|
|
|
|
isCardPreviewVideo(card) {
|
|
return card.querySelector('video') !== null;
|
|
}
|
|
|
|
applySelectionState() {
|
|
if (!state.bulkMode) return;
|
|
|
|
document.querySelectorAll('.model-card').forEach(card => {
|
|
const filepath = card.dataset.filepath;
|
|
if (state.selectedModels.has(filepath)) {
|
|
card.classList.add('selected');
|
|
|
|
const metadataCache = this.getMetadataCache();
|
|
metadataCache.set(filepath, {
|
|
fileName: card.dataset.file_name,
|
|
usageTips: card.dataset.usage_tips,
|
|
previewUrl: this.getCardPreviewUrl(card),
|
|
isVideo: this.isCardPreviewVideo(card),
|
|
modelName: card.dataset.name
|
|
});
|
|
} else {
|
|
card.classList.remove('selected');
|
|
}
|
|
});
|
|
|
|
this.updateSelectedCount();
|
|
}
|
|
|
|
async copyAllModelsSyntax() {
|
|
if (state.currentPageType !== MODEL_TYPES.LORA) {
|
|
showToast('Copy syntax is only available for LoRAs', 'warning');
|
|
return;
|
|
}
|
|
|
|
if (state.selectedModels.size === 0) {
|
|
showToast('No LoRAs selected', 'warning');
|
|
return;
|
|
}
|
|
|
|
const loraSyntaxes = [];
|
|
const missingLoras = [];
|
|
const metadataCache = this.getMetadataCache();
|
|
|
|
for (const filepath of state.selectedModels) {
|
|
const metadata = metadataCache.get(filepath);
|
|
|
|
if (metadata) {
|
|
const usageTips = JSON.parse(metadata.usageTips || '{}');
|
|
const strength = usageTips.strength || 1;
|
|
loraSyntaxes.push(`<lora:${metadata.fileName}:${strength}>`);
|
|
} else {
|
|
missingLoras.push(filepath);
|
|
}
|
|
}
|
|
|
|
if (missingLoras.length > 0) {
|
|
console.warn('Missing metadata for some selected loras:', missingLoras);
|
|
showToast(`Missing data for ${missingLoras.length} LoRAs`, 'warning');
|
|
}
|
|
|
|
if (loraSyntaxes.length === 0) {
|
|
showToast('No valid LoRAs to copy', 'error');
|
|
return;
|
|
}
|
|
|
|
await copyToClipboard(loraSyntaxes.join(', '), `Copied ${loraSyntaxes.length} LoRA syntaxes to clipboard`);
|
|
}
|
|
|
|
async sendAllModelsToWorkflow() {
|
|
if (state.currentPageType !== MODEL_TYPES.LORA) {
|
|
showToast('Send to workflow is only available for LoRAs', 'warning');
|
|
return;
|
|
}
|
|
|
|
if (state.selectedModels.size === 0) {
|
|
showToast('No LoRAs selected', 'warning');
|
|
return;
|
|
}
|
|
|
|
const loraSyntaxes = [];
|
|
const missingLoras = [];
|
|
const metadataCache = this.getMetadataCache();
|
|
|
|
for (const filepath of state.selectedModels) {
|
|
const metadata = metadataCache.get(filepath);
|
|
|
|
if (metadata) {
|
|
const usageTips = JSON.parse(metadata.usageTips || '{}');
|
|
const strength = usageTips.strength || 1;
|
|
loraSyntaxes.push(`<lora:${metadata.fileName}:${strength}>`);
|
|
} else {
|
|
missingLoras.push(filepath);
|
|
}
|
|
}
|
|
|
|
if (missingLoras.length > 0) {
|
|
console.warn('Missing metadata for some selected loras:', missingLoras);
|
|
showToast(`Missing data for ${missingLoras.length} LoRAs`, 'warning');
|
|
}
|
|
|
|
if (loraSyntaxes.length === 0) {
|
|
showToast('No valid LoRAs to send', 'error');
|
|
return;
|
|
}
|
|
|
|
await sendLoraToWorkflow(loraSyntaxes.join(', '), false, 'lora');
|
|
}
|
|
|
|
showBulkDeleteModal() {
|
|
if (state.selectedModels.size === 0) {
|
|
showToast('No models selected', 'warning');
|
|
return;
|
|
}
|
|
|
|
const countElement = document.getElementById('bulkDeleteCount');
|
|
if (countElement) {
|
|
countElement.textContent = state.selectedModels.size;
|
|
}
|
|
|
|
modalManager.showModal('bulkDeleteModal');
|
|
}
|
|
|
|
async confirmBulkDelete() {
|
|
if (state.selectedModels.size === 0) {
|
|
showToast('No models selected', 'warning');
|
|
modalManager.closeModal('bulkDeleteModal');
|
|
return;
|
|
}
|
|
|
|
modalManager.closeModal('bulkDeleteModal');
|
|
|
|
try {
|
|
const apiClient = getModelApiClient();
|
|
const filePaths = Array.from(state.selectedModels);
|
|
|
|
const result = await apiClient.bulkDeleteModels(filePaths);
|
|
|
|
if (result.success) {
|
|
const currentConfig = MODEL_CONFIG[state.currentPageType];
|
|
showToast(`Successfully deleted ${result.deleted_count} ${currentConfig.displayName.toLowerCase()}(s)`, 'success');
|
|
|
|
filePaths.forEach(path => {
|
|
state.virtualScroller.removeItemByFilePath(path);
|
|
});
|
|
this.clearSelection();
|
|
|
|
if (window.modelDuplicatesManager) {
|
|
window.modelDuplicatesManager.updateDuplicatesBadgeAfterRefresh();
|
|
}
|
|
} else {
|
|
showToast(`Error: ${result.error || 'Failed to delete models'}`, 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error during bulk delete:', error);
|
|
showToast('Failed to delete models', 'error');
|
|
}
|
|
}
|
|
|
|
toggleThumbnailStrip() {
|
|
if (state.selectedModels.size === 0) return;
|
|
|
|
const existing = document.querySelector('.selected-thumbnails-strip');
|
|
if (existing) {
|
|
this.hideThumbnailStrip();
|
|
} else {
|
|
this.showThumbnailStrip();
|
|
}
|
|
}
|
|
|
|
showThumbnailStrip() {
|
|
const strip = document.createElement('div');
|
|
strip.className = 'selected-thumbnails-strip';
|
|
|
|
const thumbnailContainer = document.createElement('div');
|
|
thumbnailContainer.className = 'thumbnails-container';
|
|
strip.appendChild(thumbnailContainer);
|
|
|
|
this.bulkPanel.parentNode.insertBefore(strip, this.bulkPanel);
|
|
|
|
this.updateThumbnailStrip();
|
|
|
|
this.isStripVisible = true;
|
|
this.updateSelectedCount();
|
|
|
|
setTimeout(() => strip.classList.add('visible'), 10);
|
|
}
|
|
|
|
hideThumbnailStrip() {
|
|
const strip = document.querySelector('.selected-thumbnails-strip');
|
|
if (strip && this.isStripVisible) {
|
|
strip.classList.remove('visible');
|
|
|
|
this.isStripVisible = false;
|
|
|
|
const countElement = document.getElementById('selectedCount');
|
|
if (countElement) {
|
|
const caret = countElement.querySelector('.dropdown-caret');
|
|
if (caret) {
|
|
caret.className = 'fas fa-caret-up dropdown-caret';
|
|
}
|
|
}
|
|
|
|
setTimeout(() => {
|
|
if (strip.parentNode) {
|
|
strip.parentNode.removeChild(strip);
|
|
}
|
|
}, 300);
|
|
}
|
|
}
|
|
|
|
updateThumbnailStrip() {
|
|
const container = document.querySelector('.thumbnails-container');
|
|
if (!container) return;
|
|
|
|
container.innerHTML = '';
|
|
|
|
const selectedModels = Array.from(state.selectedModels);
|
|
|
|
if (selectedModels.length > this.stripMaxThumbnails) {
|
|
const counter = document.createElement('div');
|
|
counter.className = 'strip-counter';
|
|
counter.textContent = `Showing ${this.stripMaxThumbnails} of ${selectedModels.length} selected`;
|
|
container.appendChild(counter);
|
|
}
|
|
|
|
const thumbnailsToShow = selectedModels.slice(0, this.stripMaxThumbnails);
|
|
const metadataCache = this.getMetadataCache();
|
|
|
|
thumbnailsToShow.forEach(filepath => {
|
|
const metadata = metadataCache.get(filepath);
|
|
if (!metadata) return;
|
|
|
|
const thumbnail = document.createElement('div');
|
|
thumbnail.className = 'selected-thumbnail';
|
|
thumbnail.dataset.filepath = filepath;
|
|
|
|
if (metadata.isVideo) {
|
|
thumbnail.innerHTML = `
|
|
<video autoplay loop muted playsinline>
|
|
<source src="${metadata.previewUrl}" type="video/mp4">
|
|
</video>
|
|
<span class="thumbnail-name" title="${metadata.modelName}">${metadata.modelName}</span>
|
|
<button class="thumbnail-remove"><i class="fas fa-times"></i></button>
|
|
`;
|
|
} else {
|
|
thumbnail.innerHTML = `
|
|
<img src="${metadata.previewUrl}" alt="${metadata.modelName}">
|
|
<span class="thumbnail-name" title="${metadata.modelName}">${metadata.modelName}</span>
|
|
<button class="thumbnail-remove"><i class="fas fa-times"></i></button>
|
|
`;
|
|
}
|
|
|
|
thumbnail.addEventListener('click', (e) => {
|
|
if (!e.target.closest('.thumbnail-remove')) {
|
|
this.deselectItem(filepath);
|
|
}
|
|
});
|
|
|
|
thumbnail.querySelector('.thumbnail-remove').addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
this.deselectItem(filepath);
|
|
});
|
|
|
|
container.appendChild(thumbnail);
|
|
});
|
|
}
|
|
|
|
deselectItem(filepath) {
|
|
const card = document.querySelector(`.model-card[data-filepath="${filepath}"]`);
|
|
if (card) {
|
|
card.classList.remove('selected');
|
|
}
|
|
|
|
state.selectedModels.delete(filepath);
|
|
|
|
this.updateSelectedCount();
|
|
this.updateThumbnailStrip();
|
|
|
|
if (state.selectedModels.size === 0) {
|
|
this.hideThumbnailStrip();
|
|
}
|
|
}
|
|
|
|
selectAllVisibleModels() {
|
|
if (!state.virtualScroller || !state.virtualScroller.items) {
|
|
showToast('Unable to select all items', 'error');
|
|
return;
|
|
}
|
|
|
|
const oldCount = state.selectedModels.size;
|
|
const metadataCache = this.getMetadataCache();
|
|
|
|
state.virtualScroller.items.forEach(item => {
|
|
if (item && item.file_path) {
|
|
state.selectedModels.add(item.file_path);
|
|
|
|
if (!metadataCache.has(item.file_path)) {
|
|
metadataCache.set(item.file_path, {
|
|
fileName: item.file_name,
|
|
usageTips: item.usage_tips || '{}',
|
|
previewUrl: item.preview_url || '/loras_static/images/no-preview.png',
|
|
isVideo: item.is_video || false,
|
|
modelName: item.name || item.file_name
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
this.applySelectionState();
|
|
|
|
const newlySelected = state.selectedModels.size - oldCount;
|
|
const currentConfig = MODEL_CONFIG[state.currentPageType];
|
|
showToast(`Selected ${newlySelected} additional ${currentConfig.displayName.toLowerCase()}(s)`, 'success');
|
|
|
|
if (this.isStripVisible) {
|
|
this.updateThumbnailStrip();
|
|
}
|
|
}
|
|
|
|
async refreshAllMetadata() {
|
|
if (state.selectedModels.size === 0) {
|
|
showToast('No models selected', 'warning');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const apiClient = getModelApiClient();
|
|
const filePaths = Array.from(state.selectedModels);
|
|
|
|
const result = await apiClient.refreshBulkModelMetadata(filePaths);
|
|
|
|
if (result.success) {
|
|
const metadataCache = this.getMetadataCache();
|
|
for (const filepath of state.selectedModels) {
|
|
const metadata = metadataCache.get(filepath);
|
|
if (metadata) {
|
|
const card = document.querySelector(`.model-card[data-filepath="${filepath}"]`);
|
|
if (card) {
|
|
metadataCache.set(filepath, {
|
|
...metadata,
|
|
fileName: card.dataset.file_name,
|
|
usageTips: card.dataset.usage_tips,
|
|
previewUrl: this.getCardPreviewUrl(card),
|
|
isVideo: this.isCardPreviewVideo(card),
|
|
modelName: card.dataset.name
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.isStripVisible) {
|
|
this.updateThumbnailStrip();
|
|
}
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error during bulk metadata refresh:', error);
|
|
showToast('Failed to refresh metadata', 'error');
|
|
}
|
|
}
|
|
}
|
|
|
|
export const bulkManager = new BulkManager();
|