Files
ComfyUI-Lora-Manager/static/js/components/ContextMenu/GlobalContextMenu.js

606 lines
26 KiB
JavaScript

import { BaseContextMenu } from './BaseContextMenu.js';
import { showToast } from '../../utils/uiHelpers.js';
import { translate } from '../../utils/i18nHelpers.js';
import { state } from '../../state/index.js';
import { getCompleteApiConfig, getCurrentModelType } from '../../api/apiConfig.js';
import { performModelUpdateCheck } from '../../utils/updateCheckHelpers.js';
export class GlobalContextMenu extends BaseContextMenu {
constructor() {
super('globalContextMenu');
this._cleanupInProgress = false;
this._updateCheckInProgress = false;
this._licenseRefreshInProgress = false;
}
showMenu(x, y, origin = null) {
const contextOrigin = origin || { type: 'global' };
// Conditional visibility for recipes page
const isRecipesPage = state.currentPageType === 'recipes';
const modelUpdateItem = this.menu.querySelector('[data-action="check-model-updates"]');
const licenseRefreshItem = this.menu.querySelector('[data-action="fetch-missing-licenses"]');
const downloadExamplesItem = this.menu.querySelector('[data-action="download-example-images"]');
const cleanupExamplesItem = this.menu.querySelector('[data-action="cleanup-example-images-folders"]');
const excludedModelsItem = this.menu.querySelector('[data-action="manage-excluded-models"]');
const repairRecipesItem = this.menu.querySelector('[data-action="repair-recipes"]');
const rematchRecipesItem = this.menu.querySelector('[data-action="rematch-recipes"]');
const groupByModelItem = this.menu.querySelector('[data-action="toggle-group-by-model"]');
const groupByModelCheck = groupByModelItem?.querySelector('.check-indicator');
// Update check indicator for group-by-model
if (groupByModelCheck) {
const isEnabled = !!state.global.settings.group_by_model;
groupByModelCheck.style.display = isEnabled ? 'block' : 'none';
}
if (isRecipesPage) {
modelUpdateItem?.classList.add('hidden');
licenseRefreshItem?.classList.add('hidden');
downloadExamplesItem?.classList.add('hidden');
cleanupExamplesItem?.classList.add('hidden');
excludedModelsItem?.classList.add('hidden');
groupByModelItem?.classList.add('hidden');
repairRecipesItem?.classList.remove('hidden');
rematchRecipesItem?.classList.remove('hidden');
} else {
modelUpdateItem?.classList.remove('hidden');
licenseRefreshItem?.classList.remove('hidden');
downloadExamplesItem?.classList.remove('hidden');
cleanupExamplesItem?.classList.remove('hidden');
excludedModelsItem?.classList.remove('hidden');
groupByModelItem?.classList.remove('hidden');
repairRecipesItem?.classList.add('hidden');
rematchRecipesItem?.classList.add('hidden');
}
this._updateSeparatorVisibility();
super.showMenu(x, y, contextOrigin);
}
_updateSeparatorVisibility() {
const children = Array.from(this.menu.children);
const isVisible = (el) => el.classList.contains('context-menu-item') && !el.classList.contains('hidden');
children.forEach((el, index) => {
if (!el.classList.contains('context-menu-separator')) {
return;
}
const hasVisibleBefore = children.slice(0, index).some(isVisible);
const hasVisibleAfter = children.slice(index + 1).some(isVisible);
el.classList.toggle('hidden', !(hasVisibleBefore && hasVisibleAfter));
});
}
handleMenuAction(action, menuItem) {
switch (action) {
case 'cleanup-example-images-folders':
this.cleanupExampleImagesFolders(menuItem).catch((error) => {
console.error('Failed to trigger example images cleanup:', error);
});
break;
case 'download-example-images':
this.downloadExampleImages(menuItem).catch((error) => {
console.error('Failed to trigger example images download:', error);
});
break;
case 'check-model-updates':
this.checkModelUpdates(menuItem).catch((error) => {
console.error('Failed to check model updates:', error);
});
break;
case 'fetch-missing-licenses':
this.fetchMissingLicenses(menuItem).catch((error) => {
console.error('Failed to refresh missing license metadata:', error);
});
break;
case 'repair-recipes':
this.repairRecipes(menuItem).catch((error) => {
console.error('Failed to repair recipes:', error);
});
break;
case 'rematch-recipes':
this.rematchRecipes(menuItem).catch((error) => {
console.error('Failed to rematch recipes:', error);
});
break;
case 'manage-excluded-models':
this.manageExcludedModels();
break;
case 'toggle-group-by-model':
this.toggleGroupByModel();
break;
default:
console.warn(`Unhandled global context menu action: ${action}`);
break;
}
}
manageExcludedModels() {
window.pageControls?.enterExcludedView?.().catch((error) => {
console.error('Failed to open excluded models view:', error);
});
}
toggleGroupByModel() {
const sm = window.settingsManager;
if (!sm) {
console.error('settingsManager not available on window');
return;
}
const newValue = !state.global.settings.group_by_model;
state.global.settings.group_by_model = newValue;
// Save/restore sort preference when toggling group_by_model
if (window.pageControls?.onGroupByModelToggled) {
window.pageControls.onGroupByModelToggled(newValue);
}
sm.saveSetting('group_by_model', newValue).catch((error) => {
console.error('Failed to save group_by_model setting:', error);
// Revert state on failure
state.global.settings.group_by_model = !newValue;
});
sm.applyFrontendSettings();
sm.reloadContent();
}
async downloadExampleImages(menuItem) {
const downloadPath = state?.global?.settings?.example_images_path;
if (!downloadPath) {
showToast('globalContextMenu.downloadExampleImages.missingPath', {}, 'warning');
return;
}
menuItem?.classList.add('disabled');
try {
const optimize = state.global.settings.optimize_example_images;
const response = await fetch('/api/lm/download-example-images', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
force: true,
optimize,
model_types: ['lora', 'checkpoint', 'embedding']
})
});
const data = await response.json();
if (data.success) {
showToast('toast.exampleImages.downloadStarted', {}, 'success');
const exampleImagesManager = window.exampleImagesManager;
if (exampleImagesManager) {
exampleImagesManager.isDownloading = true;
exampleImagesManager.isPaused = false;
exampleImagesManager.isStopping = false;
exampleImagesManager.hasShownCompletionToast = false;
exampleImagesManager.startTime = new Date();
exampleImagesManager.updateUI(data.status);
exampleImagesManager.showProgressPanel();
exampleImagesManager.startProgressUpdates();
exampleImagesManager.updateDownloadButtonText();
const stopButton = document.getElementById('stopExampleDownloadBtn');
if (stopButton) {
stopButton.disabled = false;
}
}
} else {
showToast('toast.exampleImages.downloadStartFailed', { error: data.error }, 'error');
}
} catch (error) {
console.error('Failed to trigger example images download:', error);
showToast('toast.exampleImages.downloadStartFailed', {}, 'error');
} finally {
menuItem?.classList.remove('disabled');
}
}
async cleanupExampleImagesFolders(menuItem) {
if (this._cleanupInProgress) {
return;
}
this._cleanupInProgress = true;
menuItem?.classList.add('disabled');
try {
const response = await fetch('/api/lm/cleanup-example-image-folders', {
method: 'POST',
});
let payload;
try {
payload = await response.json();
} catch (parseError) {
payload = { error: 'Unexpected response format.' };
}
if (response.ok && (payload.success || payload.partial_success)) {
const movedTotal = payload.moved_total || 0;
if (movedTotal > 0) {
showToast('globalContextMenu.cleanupExampleImages.success', { count: movedTotal }, 'success');
} else {
showToast('globalContextMenu.cleanupExampleImages.none', {}, 'info');
}
if (payload.partial_success) {
showToast(
'globalContextMenu.cleanupExampleImages.partial',
{ failures: payload.move_failures ?? 0 },
'warning',
);
}
} else {
const message = payload?.error || 'Unknown error';
showToast('globalContextMenu.cleanupExampleImages.error', { message }, 'error');
}
} catch (error) {
showToast('globalContextMenu.cleanupExampleImages.error', { message: error.message || 'Unknown error' }, 'error');
} finally {
this._cleanupInProgress = false;
menuItem?.classList.remove('disabled');
}
}
async checkModelUpdates(menuItem) {
if (this._updateCheckInProgress) {
return;
}
this._updateCheckInProgress = true;
menuItem?.classList.add('disabled');
try {
await performModelUpdateCheck({
onComplete: () => {
menuItem?.classList.remove('disabled');
this._updateCheckInProgress = false;
}
});
} catch (error) {
console.error('Failed to check model updates:', error);
} finally {
if (this._updateCheckInProgress) {
this._updateCheckInProgress = false;
menuItem?.classList.remove('disabled');
}
}
}
async fetchMissingLicenses(menuItem) {
if (this._licenseRefreshInProgress) {
return;
}
const modelType = getCurrentModelType();
const apiConfig = getCompleteApiConfig(modelType);
const displayName = apiConfig?.config?.displayName ?? 'Model';
const typePlural = this._buildTypePlural(displayName);
const loadingMessage = translate(
'globalContextMenu.fetchMissingLicenses.loading',
{ type: displayName, typePlural },
`Refreshing license metadata for ${typePlural}...`
);
const endpoint = apiConfig?.endpoints?.fetchMissingLicenses;
if (!endpoint) {
console.warn('Fetch missing license endpoint not configured for model type:', modelType);
showToast(
'globalContextMenu.fetchMissingLicenses.error',
{ message: 'Endpoint unavailable', type: displayName, typePlural },
'warning'
);
return;
}
this._licenseRefreshInProgress = true;
menuItem?.classList?.add('disabled');
state.loadingManager?.showSimpleLoading?.(loadingMessage);
try {
const response = await fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({}),
});
let payload = {};
try {
payload = await response.json();
} catch {
payload = {};
}
if (!response.ok || payload.success !== true) {
const errorMessage = payload?.error || response.statusText || 'Unknown error';
throw new Error(errorMessage);
}
const updated = Array.isArray(payload.updated) ? payload.updated : [];
if (updated.length > 0) {
showToast(
'globalContextMenu.fetchMissingLicenses.success',
{ count: updated.length, type: displayName, typePlural },
'success'
);
} else {
showToast(
'globalContextMenu.fetchMissingLicenses.none',
{ type: displayName, typePlural },
'info'
);
}
} catch (error) {
console.error('Failed to refresh missing license metadata:', error);
showToast(
'globalContextMenu.fetchMissingLicenses.error',
{ message: error?.message ?? 'Unknown error', type: displayName, typePlural },
'error'
);
} finally {
state.loadingManager?.hide?.();
if (typeof state.loadingManager?.restoreProgressBar === 'function') {
state.loadingManager.restoreProgressBar();
}
this._licenseRefreshInProgress = false;
menuItem?.classList?.remove('disabled');
}
}
_buildTypePlural(displayName) {
if (!displayName) {
return 'models';
}
const lower = displayName.toLowerCase();
if (lower.endsWith('s')) {
return displayName;
}
return `${displayName}s`;
}
async repairRecipes(menuItem) {
if (this._repairInProgress) {
return;
}
this._repairInProgress = true;
menuItem?.classList.add('disabled');
const loadingMessage = translate(
'globalContextMenu.repairRecipes.loading',
{},
'Repairing recipe data...'
);
const progressUI = state.loadingManager?.showEnhancedProgress(loadingMessage);
progressUI?.showCancelButton(() => this.cancelRepair());
try {
const response = await fetch('/api/lm/recipes/repair', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
});
const result = await response.json();
if (!response.ok || !result.success) {
throw new Error(result.error || 'Failed to start repair');
}
// Poll for progress (or wait for WebSocket if preferred, but polling is simpler for this implementation)
let isComplete = false;
while (!isComplete && this._repairInProgress) {
const progressResponse = await fetch('/api/lm/recipes/repair-progress');
if (progressResponse.ok) {
const progressResult = await progressResponse.json();
if (progressResult.success && progressResult.progress) {
const p = progressResult.progress;
if (p.status === 'processing') {
const percent = (p.current / p.total) * 100;
progressUI?.updateProgress(percent, p.recipe_name, `${loadingMessage} (${p.current}/${p.total})`);
} else if (p.status === 'completed') {
isComplete = true;
progressUI?.complete(translate(
'globalContextMenu.repairRecipes.success',
{ count: p.repaired },
`Repaired ${p.repaired} recipes.`
));
showToast('globalContextMenu.repairRecipes.success', { count: p.repaired }, 'success');
// Refresh recipes page if active
if (window.recipesPage) {
window.recipesPage.refresh();
}
} else if (p.status === 'error') {
throw new Error(p.error || 'Repair failed');
} else if (p.status === 'cancelled') {
isComplete = true;
progressUI?.complete(translate(
'globalContextMenu.repairRecipes.cancelled',
{ count: p.repaired },
`Repair cancelled. ${p.repaired} recipes were repaired.`
));
showToast('globalContextMenu.repairRecipes.cancelled', { count: p.repaired }, 'info');
}
} else if (progressResponse.status === 404) {
// Progress might have finished quickly and been cleaned up
isComplete = true;
progressUI?.complete();
}
}
if (!isComplete) {
await new Promise(resolve => setTimeout(resolve, 1000));
}
}
} catch (error) {
console.error('Recipe repair failed:', error);
progressUI?.complete(translate('globalContextMenu.repairRecipes.error', { message: error.message }, 'Repair failed: {message}'));
showToast('globalContextMenu.repairRecipes.error', { message: error.message }, 'error');
} finally {
this._repairInProgress = false;
menuItem?.classList.remove('disabled');
}
}
async cancelRepair() {
try {
await fetch('/api/lm/recipes/cancel-repair', {
method: 'POST',
});
} catch (error) {
console.error('Failed to cancel recipe repair:', error);
}
}
async rematchRecipes(menuItem) {
if (this._rematchInProgress) {
return;
}
this._rematchInProgress = true;
menuItem?.classList.add('disabled');
const loadingMessage = translate(
'globalContextMenu.rematchRecipes.loading',
{},
'Rematching recipes to local models...'
);
const progressUI = state.loadingManager?.showEnhancedProgress(loadingMessage);
progressUI?.showCancelButton(() => this.cancelRematch());
try {
const response = await fetch('/api/lm/recipes/rematch', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
});
const result = await response.json();
if (!response.ok || !result.success) {
throw new Error(result.error || 'Failed to start rematch');
}
// Poll for progress (mirrors the repair flow; the backend reports `rematched` counts)
let isComplete = false;
while (!isComplete && this._rematchInProgress) {
const progressResponse = await fetch('/api/lm/recipes/rematch-progress');
if (progressResponse.ok) {
const progressResult = await progressResponse.json();
if (progressResult.success && progressResult.progress) {
const p = progressResult.progress;
if (p.status === 'processing') {
const percent = (p.current / p.total) * 100;
progressUI?.updateProgress(percent, p.recipe_name, `${loadingMessage} (${p.current}/${p.total})`);
} else if (p.status === 'completed') {
isComplete = true;
// Newer backends report unified matched_entries /
// matched_recipes; fall back to legacy `rematched`
// (recipe count) for older ones.
const entries = p.matched_entries ?? p.rematched ?? 0;
const recipes = p.matched_recipes ?? p.rematched ?? 0;
const failures = p.errors || 0;
const unresolved = p.unresolved_entries ?? 0;
if (entries > 0) {
const successKey = failures > 0
? 'globalContextMenu.rematchRecipes.successErrors'
: 'globalContextMenu.rematchRecipes.success';
const successText = failures > 0
? `Matched ${entries} entries across ${recipes} recipes, ${failures} failed.`
: `Matched ${entries} entries across ${recipes} recipes.`;
progressUI?.complete(translate(
successKey,
{ count: recipes, recipes, entries, failures },
successText
));
showToast(successKey, { count: recipes, recipes, entries, failures }, failures > 0 ? 'warning' : 'success');
} else if (failures > 0) {
// Nothing matched and at least one recipe
// errored — "no rematch needed" would be
// actively misleading here.
progressUI?.complete(translate(
'globalContextMenu.rematchRecipes.allFailed',
{ total: p.total, recipes, entries, failures },
`Rematch failed for ${failures} of ${p.total} recipes.`
));
showToast('globalContextMenu.rematchRecipes.allFailed', { total: p.total, recipes, entries, failures }, 'error');
} else if (unresolved > 0) {
// Entries existed but have no local model —
// expected for models deleted from Civitai;
// informational, not an error.
const unresolvedRecipes = p.unresolved_recipes ?? 0;
progressUI?.complete(translate(
'globalContextMenu.rematchRecipes.noMatch',
{ entries: unresolved, recipes: unresolvedRecipes, total: p.total, failures },
`No local match found for ${unresolved} entries in ${unresolvedRecipes} recipes.`
));
showToast('globalContextMenu.rematchRecipes.noMatch', { entries: unresolved, recipes: unresolvedRecipes, total: p.total, failures }, 'info');
} else {
// Everything was skipped (nothing to do).
progressUI?.complete(translate(
'globalContextMenu.rematchRecipes.success',
{ count: recipes, recipes, entries, failures },
`Matched ${entries} entries across ${recipes} recipes.`
));
showToast('globalContextMenu.rematchRecipes.success', { count: recipes, recipes, entries, failures }, 'success');
}
// Refresh recipes page if active
if (window.recipesPage) {
window.recipesPage.refresh();
}
} else if (p.status === 'error') {
throw new Error(p.error || 'Rematch failed');
} else if (p.status === 'cancelled') {
isComplete = true;
const cancelledEntries = p.matched_entries ?? p.rematched ?? 0;
const cancelledRecipes = p.matched_recipes ?? p.rematched ?? 0;
progressUI?.complete(translate(
'globalContextMenu.rematchRecipes.cancelled',
{ count: cancelledRecipes, recipes: cancelledRecipes, entries: cancelledEntries },
`Rematch cancelled. ${cancelledRecipes} recipes updated (${cancelledEntries} entries).`
));
showToast('globalContextMenu.rematchRecipes.cancelled', { count: cancelledRecipes, recipes: cancelledRecipes, entries: cancelledEntries }, 'info');
}
} else if (progressResponse.status === 404) {
// Progress might have finished quickly and been cleaned up
isComplete = true;
progressUI?.complete();
}
}
if (!isComplete) {
await new Promise(resolve => setTimeout(resolve, 1000));
}
}
} catch (error) {
console.error('Recipe rematch failed:', error);
progressUI?.complete(translate('globalContextMenu.rematchRecipes.error', { message: error.message }, 'Rematch failed: {message}'));
showToast('globalContextMenu.rematchRecipes.error', { message: error.message }, 'error');
} finally {
this._rematchInProgress = false;
menuItem?.classList.remove('disabled');
}
}
async cancelRematch() {
try {
await fetch('/api/lm/recipes/cancel-rematch', {
method: 'POST',
});
} catch (error) {
console.error('Failed to cancel recipe rematch:', error);
}
}
}