mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-08-11 16:30:14 -03:00
496 lines
19 KiB
JavaScript
496 lines
19 KiB
JavaScript
// Duplicates Manager Component
|
|
import { showToast } from '../utils/uiHelpers.js';
|
|
import { translate } from '../utils/i18nHelpers.js';
|
|
import { RecipeCard } from './RecipeCard.js';
|
|
import { state, getCurrentPageState } from '../state/index.js';
|
|
import { recreateVirtualScroll } from '../utils/infiniteScroll.js';
|
|
|
|
export class DuplicatesManager {
|
|
constructor(recipeManager) {
|
|
this.recipeManager = recipeManager;
|
|
this.duplicateGroups = [];
|
|
this.inDuplicateMode = false;
|
|
this.selectedForDeletion = new Set();
|
|
this._initPromptMatchToggle();
|
|
this._initHelpTooltip();
|
|
}
|
|
|
|
_getPromptMatchPreference() {
|
|
return localStorage.getItem('recipes_duplicates_include_prompt') === '1';
|
|
}
|
|
|
|
_setPromptMatchPreference(enabled) {
|
|
localStorage.setItem('recipes_duplicates_include_prompt', enabled ? '1' : '0');
|
|
}
|
|
|
|
updateBasisDisplay() {
|
|
const basisEl = document.getElementById('duplicatesBasis');
|
|
const helpTextEl = document.getElementById('duplicatesHelpText');
|
|
const checkbox = document.getElementById('promptMatchInput');
|
|
const includePrompt = this._getPromptMatchPreference();
|
|
if (checkbox) {
|
|
checkbox.checked = includePrompt;
|
|
}
|
|
if (basisEl) {
|
|
basisEl.textContent = translate(
|
|
includePrompt
|
|
? 'recipes.duplicates.basis.loraComboAndPrompt'
|
|
: 'recipes.duplicates.basis.loraCombo'
|
|
);
|
|
}
|
|
if (helpTextEl) {
|
|
helpTextEl.textContent = translate(
|
|
includePrompt
|
|
? 'recipes.duplicates.basis.hintPromptIncluded'
|
|
: 'recipes.duplicates.basis.hintLoraCombo'
|
|
);
|
|
}
|
|
}
|
|
|
|
_initPromptMatchToggle() {
|
|
const checkbox = document.getElementById('promptMatchInput');
|
|
if (!checkbox) return;
|
|
checkbox.addEventListener('change', async (e) => {
|
|
this._setPromptMatchPreference(e.target.checked);
|
|
this.updateBasisDisplay();
|
|
checkbox.disabled = true;
|
|
try {
|
|
await this.findDuplicates();
|
|
} finally {
|
|
checkbox.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
_initHelpTooltip() {
|
|
const helpIcon = document.getElementById('duplicatesHelp');
|
|
const helpTooltip = document.getElementById('duplicatesHelpTooltip');
|
|
if (!helpIcon || !helpTooltip) return;
|
|
|
|
helpIcon.addEventListener('mouseenter', () => {
|
|
const bannerContent = helpIcon.closest('.banner-content');
|
|
if (!bannerContent) return;
|
|
const iconRect = helpIcon.getBoundingClientRect();
|
|
const bannerRect = bannerContent.getBoundingClientRect();
|
|
helpTooltip.style.display = 'block';
|
|
helpTooltip.style.top = `${iconRect.bottom - bannerRect.top + 10}px`;
|
|
helpTooltip.style.left = `${iconRect.left - bannerRect.left - 10}px`;
|
|
const tooltipRect = helpTooltip.getBoundingClientRect();
|
|
if (tooltipRect.right > window.innerWidth - 20) {
|
|
helpTooltip.style.left = `${bannerContent.offsetWidth - tooltipRect.width - 20}px`;
|
|
}
|
|
});
|
|
helpIcon.addEventListener('mouseleave', () => {
|
|
helpTooltip.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
async findDuplicates() {
|
|
try {
|
|
const includePrompt = this._getPromptMatchPreference();
|
|
const endpoint = includePrompt
|
|
? '/api/lm/recipes/find-duplicates?include_prompt=1'
|
|
: '/api/lm/recipes/find-duplicates';
|
|
const response = await fetch(endpoint);
|
|
if (!response.ok) {
|
|
throw new Error('Failed to find duplicates');
|
|
}
|
|
|
|
const data = await response.json();
|
|
if (!data.success) {
|
|
throw new Error(data.error || 'Unknown error finding duplicates');
|
|
}
|
|
|
|
this.duplicateGroups = data.duplicate_groups || [];
|
|
|
|
if (this.duplicateGroups.length === 0) {
|
|
showToast('toast.duplicates.noDuplicatesFound', { type: 'recipes' }, 'info');
|
|
// Keep (or enter) the duplicates view when the user is tuning
|
|
// the matching basis, so the prompt-matching toggle stays
|
|
// reachable; otherwise just toast and stay on the library grid.
|
|
if (!this.inDuplicateMode && !includePrompt) {
|
|
return false;
|
|
}
|
|
this.enterDuplicateMode();
|
|
return true;
|
|
}
|
|
|
|
this.enterDuplicateMode();
|
|
return true;
|
|
} catch (error) {
|
|
console.error('Error finding duplicates:', error);
|
|
showToast('toast.duplicates.findFailed', { message: error.message }, 'error');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
enterDuplicateMode() {
|
|
this.inDuplicateMode = true;
|
|
this.selectedForDeletion.clear();
|
|
|
|
// Update state
|
|
const pageState = getCurrentPageState();
|
|
pageState.duplicatesMode = true;
|
|
|
|
// Show duplicates banner
|
|
const banner = document.getElementById('duplicatesBanner');
|
|
const countSpan = document.getElementById('duplicatesCount');
|
|
|
|
if (banner && countSpan) {
|
|
countSpan.textContent = this.duplicateGroups.length === 0
|
|
? translate('recipes.duplicates.noGroups')
|
|
: translate('recipes.duplicates.found', { count: this.duplicateGroups.length });
|
|
banner.style.display = 'block';
|
|
}
|
|
|
|
// Restore the prompt-matching preference and show the matching basis
|
|
this.updateBasisDisplay();
|
|
|
|
// Disable virtual scrolling if active
|
|
if (state.virtualScroller) {
|
|
state.virtualScroller.disable();
|
|
}
|
|
|
|
// Add duplicate-mode class to the body
|
|
document.body.classList.add('duplicate-mode');
|
|
|
|
// Render duplicate groups
|
|
this.renderDuplicateGroups();
|
|
|
|
// Update selected count
|
|
this.updateSelectedCount();
|
|
}
|
|
|
|
async exitDuplicateMode() {
|
|
this.inDuplicateMode = false;
|
|
this.selectedForDeletion.clear();
|
|
|
|
// Update state
|
|
const pageState = getCurrentPageState();
|
|
pageState.duplicatesMode = false;
|
|
|
|
// Hide duplicates banner
|
|
const banner = document.getElementById('duplicatesBanner');
|
|
if (banner) {
|
|
banner.style.display = 'none';
|
|
}
|
|
|
|
// Remove duplicate-mode class from the body
|
|
document.body.classList.remove('duplicate-mode');
|
|
|
|
// Clear the recipe grid first
|
|
const recipeGrid = document.getElementById('recipeGrid');
|
|
if (recipeGrid) {
|
|
recipeGrid.innerHTML = '';
|
|
}
|
|
|
|
// Re-enable virtual scrolling, or apply a layout switch deferred
|
|
// while duplicates mode was active (enabling the old scroller first
|
|
// would let its pending rAF render repopulate the grid after the
|
|
// new scroller is created, leaving orphaned/overlapping cards).
|
|
if (state.pendingLayoutRecreate) {
|
|
state.pendingLayoutRecreate = false;
|
|
await recreateVirtualScroll('recipes');
|
|
} else if (state.virtualScroller) {
|
|
state.virtualScroller.enable();
|
|
}
|
|
}
|
|
|
|
renderDuplicateGroups() {
|
|
const recipeGrid = document.getElementById('recipeGrid');
|
|
if (!recipeGrid) return;
|
|
|
|
// Clear existing content
|
|
recipeGrid.innerHTML = '';
|
|
|
|
// Empty-state view: keep the banner (and the matching-basis toggle)
|
|
// reachable when no groups match the current basis
|
|
if (this.duplicateGroups.length === 0) {
|
|
const emptyState = document.createElement('div');
|
|
emptyState.className = 'duplicates-empty-state';
|
|
emptyState.textContent = translate('recipes.duplicates.noGroups');
|
|
recipeGrid.appendChild(emptyState);
|
|
return;
|
|
}
|
|
|
|
// Render each duplicate group
|
|
this.duplicateGroups.forEach((group, groupIndex) => {
|
|
const groupKey = group.key;
|
|
const groupDiv = document.createElement('div');
|
|
groupDiv.className = 'duplicate-group';
|
|
groupDiv.dataset.groupKey = groupKey;
|
|
|
|
// Create group header
|
|
const header = document.createElement('div');
|
|
header.className = 'duplicate-group-header';
|
|
header.innerHTML = `
|
|
<span>Duplicate Group #${groupIndex + 1} (${group.recipes.length} recipes)</span>
|
|
<span>
|
|
<button class="btn-select-all" onclick="recipeManager.duplicatesManager.toggleSelectAllInGroup('${groupKey}')">
|
|
Select All
|
|
</button>
|
|
<button class="btn-select-latest" onclick="recipeManager.duplicatesManager.selectLatestInGroup('${groupKey}')">
|
|
Keep Latest
|
|
</button>
|
|
</span>
|
|
`;
|
|
groupDiv.appendChild(header);
|
|
|
|
// Create cards container
|
|
const cardsDiv = document.createElement('div');
|
|
cardsDiv.className = 'card-group-container';
|
|
|
|
// Add scrollable class if there are many recipes in the group
|
|
if (group.recipes.length > 6) {
|
|
cardsDiv.classList.add('scrollable');
|
|
|
|
// Add expand/collapse toggle button
|
|
const toggleBtn = document.createElement('button');
|
|
toggleBtn.className = 'group-toggle-btn';
|
|
toggleBtn.innerHTML = '<i class="fas fa-chevron-down"></i>';
|
|
toggleBtn.title = "Expand/Collapse";
|
|
toggleBtn.onclick = function() {
|
|
cardsDiv.classList.toggle('scrollable');
|
|
this.innerHTML = cardsDiv.classList.contains('scrollable') ?
|
|
'<i class="fas fa-chevron-down"></i>' :
|
|
'<i class="fas fa-chevron-up"></i>';
|
|
};
|
|
groupDiv.appendChild(toggleBtn);
|
|
}
|
|
|
|
// Sort recipes by date (newest first)
|
|
const sortedRecipes = [...group.recipes].sort((a, b) => b.modified - a.modified);
|
|
|
|
// Add all recipe cards in this group
|
|
sortedRecipes.forEach((recipe, index) => {
|
|
// Create recipe card
|
|
const recipeCard = new RecipeCard(recipe, (recipe) => {
|
|
this.recipeManager.showRecipeDetails(recipe);
|
|
});
|
|
const card = recipeCard.element;
|
|
|
|
// Add duplicate class
|
|
card.classList.add('duplicate');
|
|
|
|
// Mark the latest one
|
|
if (index === 0) {
|
|
card.classList.add('latest');
|
|
}
|
|
|
|
// Add selection checkbox
|
|
const checkbox = document.createElement('input');
|
|
checkbox.type = 'checkbox';
|
|
checkbox.className = 'selector-checkbox';
|
|
checkbox.dataset.recipeId = recipe.id;
|
|
checkbox.dataset.groupKey = groupKey;
|
|
|
|
// Check if already selected
|
|
if (this.selectedForDeletion.has(recipe.id)) {
|
|
checkbox.checked = true;
|
|
card.classList.add('duplicate-selected');
|
|
}
|
|
|
|
// Add change event to checkbox
|
|
checkbox.addEventListener('change', (e) => {
|
|
e.stopPropagation();
|
|
this.toggleCardSelection(recipe.id, card, checkbox);
|
|
});
|
|
|
|
// Make the entire card clickable for selection
|
|
card.addEventListener('click', (e) => {
|
|
// Don't toggle if clicking on the checkbox directly or card actions
|
|
if (e.target === checkbox || e.target.closest('.card-actions')) {
|
|
return;
|
|
}
|
|
|
|
// Toggle checkbox state
|
|
checkbox.checked = !checkbox.checked;
|
|
this.toggleCardSelection(recipe.id, card, checkbox);
|
|
});
|
|
|
|
card.appendChild(checkbox);
|
|
cardsDiv.appendChild(card);
|
|
});
|
|
|
|
groupDiv.appendChild(cardsDiv);
|
|
recipeGrid.appendChild(groupDiv);
|
|
});
|
|
}
|
|
|
|
// Helper method to toggle card selection state
|
|
toggleCardSelection(recipeId, card, checkbox) {
|
|
if (checkbox.checked) {
|
|
this.selectedForDeletion.add(recipeId);
|
|
card.classList.add('duplicate-selected');
|
|
} else {
|
|
this.selectedForDeletion.delete(recipeId);
|
|
card.classList.remove('duplicate-selected');
|
|
}
|
|
|
|
this.updateSelectedCount();
|
|
}
|
|
|
|
updateSelectedCount() {
|
|
const selectedCountEl = document.getElementById('duplicatesSelectedCount');
|
|
if (selectedCountEl) {
|
|
selectedCountEl.textContent = this.selectedForDeletion.size;
|
|
}
|
|
|
|
// Update delete button state
|
|
const deleteBtn = document.querySelector('.btn-delete-selected');
|
|
if (deleteBtn) {
|
|
deleteBtn.disabled = this.selectedForDeletion.size === 0;
|
|
deleteBtn.classList.toggle('disabled', this.selectedForDeletion.size === 0);
|
|
}
|
|
}
|
|
|
|
toggleSelectAllInGroup(groupKey) {
|
|
const checkboxes = document.querySelectorAll(`.selector-checkbox[data-group-key="${groupKey}"]`);
|
|
const allSelected = Array.from(checkboxes).every(checkbox => checkbox.checked);
|
|
|
|
// If all are selected, deselect all; otherwise select all
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.checked = !allSelected;
|
|
const recipeId = checkbox.dataset.recipeId;
|
|
const card = checkbox.closest('.model-card');
|
|
|
|
if (!allSelected) {
|
|
this.selectedForDeletion.add(recipeId);
|
|
card.classList.add('duplicate-selected');
|
|
} else {
|
|
this.selectedForDeletion.delete(recipeId);
|
|
card.classList.remove('duplicate-selected');
|
|
}
|
|
});
|
|
|
|
// Update the button text
|
|
const button = document.querySelector(`.duplicate-group[data-group-key="${groupKey}"] .btn-select-all`);
|
|
if (button) {
|
|
button.textContent = !allSelected ? "Deselect All" : "Select All";
|
|
}
|
|
|
|
this.updateSelectedCount();
|
|
}
|
|
|
|
selectAllInGroup(groupKey) {
|
|
const checkboxes = document.querySelectorAll(`.selector-checkbox[data-group-key="${groupKey}"]`);
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.checked = true;
|
|
this.selectedForDeletion.add(checkbox.dataset.recipeId);
|
|
checkbox.closest('.model-card').classList.add('duplicate-selected');
|
|
});
|
|
|
|
// Update the button text
|
|
const button = document.querySelector(`.duplicate-group[data-group-key="${groupKey}"] .btn-select-all`);
|
|
if (button) {
|
|
button.textContent = "Deselect All";
|
|
}
|
|
|
|
this.updateSelectedCount();
|
|
}
|
|
|
|
selectLatestInGroup(groupKey) {
|
|
// Find all checkboxes in this group
|
|
const checkboxes = document.querySelectorAll(`.selector-checkbox[data-group-key="${groupKey}"]`);
|
|
|
|
// Get all the recipes in this group
|
|
const group = this.duplicateGroups.find(g => g.key === groupKey);
|
|
if (!group) return;
|
|
|
|
// Sort recipes by date (newest first)
|
|
const sortedRecipes = [...group.recipes].sort((a, b) => b.modified - a.modified);
|
|
|
|
// Skip the first (latest) one and select the rest for deletion
|
|
for (let i = 1; i < sortedRecipes.length; i++) {
|
|
const recipeId = sortedRecipes[i].id;
|
|
const checkbox = document.querySelector(`.selector-checkbox[data-recipe-id="${recipeId}"]`);
|
|
|
|
if (checkbox) {
|
|
checkbox.checked = true;
|
|
this.selectedForDeletion.add(recipeId);
|
|
checkbox.closest('.model-card').classList.add('duplicate-selected');
|
|
}
|
|
}
|
|
|
|
// Make sure the latest one is not selected
|
|
const latestId = sortedRecipes[0].id;
|
|
const latestCheckbox = document.querySelector(`.selector-checkbox[data-recipe-id="${latestId}"]`);
|
|
|
|
if (latestCheckbox) {
|
|
latestCheckbox.checked = false;
|
|
this.selectedForDeletion.delete(latestId);
|
|
latestCheckbox.closest('.model-card').classList.remove('duplicate-selected');
|
|
}
|
|
|
|
this.updateSelectedCount();
|
|
}
|
|
|
|
selectLatestDuplicates() {
|
|
// For each duplicate group, select all but the latest recipe
|
|
this.duplicateGroups.forEach(group => {
|
|
this.selectLatestInGroup(group.key);
|
|
});
|
|
}
|
|
|
|
async deleteSelectedDuplicates() {
|
|
if (this.selectedForDeletion.size === 0) {
|
|
showToast('toast.duplicates.noItemsSelected', { type: 'recipes' }, 'info');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Show the delete confirmation modal instead of a simple confirm
|
|
const duplicateDeleteCount = document.getElementById('duplicateDeleteCount');
|
|
if (duplicateDeleteCount) {
|
|
duplicateDeleteCount.textContent = this.selectedForDeletion.size;
|
|
}
|
|
|
|
// Use the modal manager to show the confirmation modal
|
|
modalManager.showModal('duplicateDeleteModal');
|
|
} catch (error) {
|
|
console.error('Error preparing delete:', error);
|
|
showToast('toast.duplicates.deleteError', { message: error.message }, 'error');
|
|
}
|
|
}
|
|
|
|
// Add new method to execute deletion after confirmation
|
|
async confirmDeleteDuplicates() {
|
|
try {
|
|
// Close the modal
|
|
modalManager.closeModal('duplicateDeleteModal');
|
|
|
|
// Prepare recipe IDs for deletion
|
|
const recipeIds = Array.from(this.selectedForDeletion);
|
|
|
|
// Call API to bulk delete
|
|
const response = await fetch('/api/lm/recipes/bulk-delete', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ recipe_ids: recipeIds })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to delete selected recipes');
|
|
}
|
|
|
|
const data = await response.json();
|
|
if (!data.success) {
|
|
throw new Error(data.error || 'Unknown error deleting recipes');
|
|
}
|
|
|
|
showToast('toast.duplicates.deleteSuccess', { count: data.total_deleted, type: 'recipes' }, 'success');
|
|
|
|
// Exit duplicate mode if deletions were successful
|
|
if (data.total_deleted > 0) {
|
|
this.exitDuplicateMode();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error deleting recipes:', error);
|
|
showToast('toast.duplicates.deleteFailed', { type: 'recipes', message: error.message }, 'error');
|
|
}
|
|
}
|
|
}
|