mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-06-17 07:59:24 -03:00
feat(metadata-fetch): add result summary modal with i18n, fix contrast and counting bugs (#38)
This commit is contained in:
Will Miao
196
static/css/components/metadata-refresh-result.css
Normal file
196
static/css/components/metadata-refresh-result.css
Normal file
@@ -0,0 +1,196 @@
|
||||
/* Metadata Refresh Result Modal — component styles only */
|
||||
|
||||
.metadata-refresh-result-modal {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.refresh-summary-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: var(--surface-subtle);
|
||||
border-left: 4px solid transparent;
|
||||
font-size: var(--text-sm);
|
||||
flex: 1;
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
.stat-card > i {
|
||||
font-size: 1.25em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stat-card-label {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
.stat-card-value {
|
||||
font-weight: var(--weight-bold);
|
||||
font-size: var(--text-lg);
|
||||
color: var(--lora-text);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
.stat-card-success {
|
||||
border-left-color: var(--color-success);
|
||||
}
|
||||
|
||||
.stat-card-success > i {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.stat-card-failure {
|
||||
border-left-color: var(--color-error);
|
||||
}
|
||||
|
||||
.stat-card-failure > i {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.stat-card-skipped {
|
||||
border-left-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.stat-card-skipped > i {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.stat-card-total {
|
||||
border-left-color: var(--color-info);
|
||||
}
|
||||
|
||||
.stat-card-total > i {
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.stat-card-time {
|
||||
border-left-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.stat-card-time > i {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.refresh-failures-section {
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.refresh-failures-section h4 {
|
||||
margin: 0 0 var(--space-2) 0;
|
||||
font-size: var(--text-base);
|
||||
color: var(--color-error);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.refresh-failures-section h4 i {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.failure-table-wrapper {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--lora-border);
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
.failure-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.failure-table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--lora-surface);
|
||||
border-bottom: 2px solid var(--lora-border);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
text-align: left;
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text-secondary);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.failure-table td {
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-bottom: 1px solid var(--lora-border);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.failure-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.failure-table tr:hover td {
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
|
||||
.failure-index {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.failure-name {
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.failure-error {
|
||||
color: var(--color-error);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.refresh-success-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
background: var(--surface-subtle);
|
||||
border-left: 4px solid var(--color-success);
|
||||
color: var(--lora-text);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
.refresh-success-message i {
|
||||
font-size: 1.2em;
|
||||
flex-shrink: 0;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .failure-table th {
|
||||
background: var(--lora-surface);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .failure-table td {
|
||||
border-bottom-color: var(--lora-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .failure-table tr:hover td {
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
@@ -40,6 +40,7 @@
|
||||
@import 'components/statistics.css'; /* Add statistics component */
|
||||
@import 'components/sidebar.css'; /* Add sidebar component */
|
||||
@import 'components/media-viewer.css';
|
||||
@import 'components/metadata-refresh-result.css';
|
||||
|
||||
.initialization-notice {
|
||||
display: flex;
|
||||
|
||||
@@ -547,6 +547,14 @@ export class BaseModelApiClient {
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
|
||||
ws = new WebSocket(`${wsProtocol}${window.location.host}${WS_ENDPOINTS.fetchProgress}`);
|
||||
|
||||
// Wait for WebSocket connection to establish
|
||||
await new Promise((resolve, reject) => {
|
||||
ws.onopen = resolve;
|
||||
ws.onerror = reject;
|
||||
});
|
||||
|
||||
// Now that we're connected, set up the message/error handlers
|
||||
// for the actual operation (separate from connection errors)
|
||||
const operationComplete = new Promise((resolve, reject) => {
|
||||
ws.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
@@ -556,25 +564,39 @@ export class BaseModelApiClient {
|
||||
loading.setStatus('Starting metadata fetch...');
|
||||
break;
|
||||
|
||||
case 'processing':
|
||||
const percent = ((data.processed / data.total) * 100).toFixed(1);
|
||||
case 'processing': {
|
||||
const handled = data.handled || data.processed;
|
||||
const percent = ((handled / data.total) * 100).toFixed(1);
|
||||
loading.setProgress(percent);
|
||||
loading.setStatus(
|
||||
`Processing (${data.processed}/${data.total}) ${data.current_name}`
|
||||
);
|
||||
let statusText = `Processing (${handled}/${data.total}) ${data.current_name || ''}`;
|
||||
if (data.failure_count > 0) {
|
||||
statusText += ` | ❌ ${data.failure_count} failed`;
|
||||
}
|
||||
if (data.skipped_count > 0) {
|
||||
statusText += ` | ⏭️ ${data.skipped_count} skipped`;
|
||||
}
|
||||
loading.setStatus(statusText);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'completed':
|
||||
case 'completed': {
|
||||
loading.setProgress(100);
|
||||
loading.setStatus(
|
||||
`Completed: Updated ${data.success} of ${data.processed} ${this.apiConfig.config.displayName}s`
|
||||
);
|
||||
let summaryText = `Completed: Updated ${data.success} of ${data.processed} ${this.apiConfig.config.displayName}s`;
|
||||
if (data.failure_count > 0) {
|
||||
summaryText += ` | ❌ ${data.failure_count} failed`;
|
||||
}
|
||||
if (data.skipped_count > 0) {
|
||||
summaryText += ` | ⏭️ ${data.skipped_count} skipped`;
|
||||
}
|
||||
summaryText += ` (⏱ ${data.elapsed_seconds || '?'}s)`;
|
||||
loading.setStatus(summaryText);
|
||||
resolve(data);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'cancelled':
|
||||
loading.setStatus('Operation cancelled by user');
|
||||
resolve(data); // Consider it complete but marked as cancelled
|
||||
resolve(data);
|
||||
break;
|
||||
|
||||
case 'error':
|
||||
@@ -588,12 +610,6 @@ export class BaseModelApiClient {
|
||||
};
|
||||
});
|
||||
|
||||
// Wait for WebSocket connection to establish
|
||||
await new Promise((resolve, reject) => {
|
||||
ws.onopen = resolve;
|
||||
ws.onerror = reject;
|
||||
});
|
||||
|
||||
const response = await fetch(this.apiConfig.endpoints.fetchAllCivitai, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -608,10 +624,10 @@ export class BaseModelApiClient {
|
||||
const finalData = await operationComplete;
|
||||
|
||||
resetAndReload(false);
|
||||
if (finalData && finalData.status === 'cancelled') {
|
||||
showToast('toast.api.operationCancelledPartial', { success: finalData.success, total: finalData.total }, 'info');
|
||||
} else {
|
||||
showToast('toast.api.metadataUpdateComplete', {}, 'success');
|
||||
|
||||
// Show result summary with failure details
|
||||
if (finalData) {
|
||||
this._showMetadataRefreshResult(finalData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching metadata:', error);
|
||||
@@ -627,6 +643,210 @@ export class BaseModelApiClient {
|
||||
});
|
||||
}
|
||||
|
||||
_showMetadataRefreshResult(data) {
|
||||
const { success, total } = data;
|
||||
|
||||
if (data.status === 'cancelled') {
|
||||
showToast('toast.api.operationCancelledPartial', { success, total }, 'info');
|
||||
return;
|
||||
}
|
||||
|
||||
this._showFailureDetailsModal(data);
|
||||
}
|
||||
|
||||
_showFailureDetailsModal(data) {
|
||||
const { failures = [], success, processed, total, failure_count, skipped_count, elapsed_seconds } = data;
|
||||
|
||||
// Build failure list HTML
|
||||
const failureRows = failures.map((f, i) =>
|
||||
`<tr>
|
||||
<td class="failure-index">${i + 1}</td>
|
||||
<td class="failure-name" title="${this._escapeHtml(f.name)}">${this._escapeHtml(f.name)}</td>
|
||||
<td class="failure-error">${this._escapeHtml(f.error || 'Unknown')}</td>
|
||||
</tr>`
|
||||
).join('');
|
||||
|
||||
const modalHtml = `
|
||||
<div id="metadataRefreshResultModal" class="modal" style="display: block;">
|
||||
<div class="modal-content metadata-refresh-result-modal">
|
||||
<button class="close" data-action="close-modal">×</button>
|
||||
|
||||
<h2><i class="fas fa-sync-alt"></i> ${translate('modals.metadataFetchSummary.title', {}, 'Metadata Fetch Summary')}</h2>
|
||||
|
||||
<div class="refresh-summary-stats">
|
||||
<div class="stat-card stat-card-success">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<div class="stat-card-body">
|
||||
<span class="stat-card-label">${translate('modals.metadataFetchSummary.statSuccess', {}, 'Success')}</span>
|
||||
<span class="stat-card-value">${success}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card stat-card-failure">
|
||||
<i class="fas fa-times-circle"></i>
|
||||
<div class="stat-card-body">
|
||||
<span class="stat-card-label">${translate('modals.metadataFetchSummary.statFailed', {}, 'Failed')}</span>
|
||||
<span class="stat-card-value">${failure_count}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card stat-card-skipped">
|
||||
<i class="fas fa-forward"></i>
|
||||
<div class="stat-card-body">
|
||||
<span class="stat-card-label">${translate('modals.metadataFetchSummary.statSkipped', {}, 'Skipped')}</span>
|
||||
<span class="stat-card-value">${skipped_count}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card stat-card-total">
|
||||
<i class="fas fa-database"></i>
|
||||
<div class="stat-card-body">
|
||||
<span class="stat-card-label">${translate('modals.metadataFetchSummary.statTotal', {}, 'Total Scanned')}</span>
|
||||
<span class="stat-card-value">${total || processed}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card stat-card-time">
|
||||
<i class="fas fa-clock"></i>
|
||||
<div class="stat-card-body">
|
||||
<span class="stat-card-label">${translate('modals.metadataFetchSummary.statDuration', {}, 'Duration')}</span>
|
||||
<span class="stat-card-value">${elapsed_seconds}s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${failure_count > 0 ? `
|
||||
<div class="refresh-failures-section">
|
||||
<h4><i class="fas fa-exclamation-triangle"></i> ${translate('modals.metadataFetchSummary.failedItems', { count: failure_count }, 'Failed Items (' + failure_count + ')')}</h4>
|
||||
<div class="failure-table-wrapper">
|
||||
<table class="failure-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>${translate('modals.metadataFetchSummary.columnModelName', {}, 'Model Name')}</th>
|
||||
<th>${translate('modals.metadataFetchSummary.columnError', {}, 'Error')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${failureRows}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
` : `
|
||||
<div class="refresh-success-message">
|
||||
<i class="fas fa-check-circle"></i> ${translate('modals.metadataFetchSummary.successMessage', { count: success, type: this.apiConfig.config.displayName }, 'All ' + success + ' ' + this.apiConfig.config.displayName + 's updated successfully!')}
|
||||
</div>
|
||||
`}
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="cancel-btn" data-action="close-modal">${translate('modals.metadataFetchSummary.close', {}, 'Close')}</button>
|
||||
${failure_count > 0 ? `
|
||||
<button class="secondary-btn" data-action="copy-report"><i class="fas fa-copy"></i> ${translate('modals.metadataFetchSummary.copyReport', {}, 'Copy Report')}</button>
|
||||
<button class="secondary-btn" data-action="download-csv"><i class="fas fa-download"></i> ${translate('modals.metadataFetchSummary.downloadCsv', {}, 'Download CSV')}</button>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const existing = document.getElementById('metadataRefreshResultModal');
|
||||
if (existing) existing.remove();
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.innerHTML = modalHtml;
|
||||
const modal = container.firstElementChild;
|
||||
document.body.appendChild(modal);
|
||||
|
||||
modal.addEventListener('click', (e) => {
|
||||
const action = e.target.closest('[data-action]')?.dataset.action;
|
||||
if (!action) return;
|
||||
e.preventDefault();
|
||||
|
||||
switch (action) {
|
||||
case 'close-modal':
|
||||
modal.remove();
|
||||
break;
|
||||
case 'copy-report':
|
||||
BaseModelApiClient._copyRefreshReport(e.target.closest('[data-action]'), data);
|
||||
break;
|
||||
case 'download-csv':
|
||||
BaseModelApiClient._downloadRefreshReport(data);
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_escapeHtml(str) {
|
||||
if (!str) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
static _copyRefreshReport(btn, data) {
|
||||
const { failures = [], success, processed, total, failure_count, skipped_count, elapsed_seconds } = data;
|
||||
const lines = [
|
||||
'=== Metadata Refresh Report ===',
|
||||
`Date: ${new Date().toLocaleString()}`,
|
||||
`Duration: ${elapsed_seconds}s`,
|
||||
`Total scanned: ${total || processed}`,
|
||||
`Successfully updated: ${success}`,
|
||||
`Failed: ${failure_count}`,
|
||||
`Skipped: ${skipped_count}`,
|
||||
'',
|
||||
];
|
||||
if (failure_count > 0) {
|
||||
lines.push('--- Failed Items ---');
|
||||
failures.forEach((f, i) => {
|
||||
lines.push(`${i + 1}. ${f.name || 'Unknown'} — ${f.error || 'Unknown error'}`);
|
||||
});
|
||||
lines.push('');
|
||||
}
|
||||
lines.push('====================');
|
||||
|
||||
const text = lines.join('\n');
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showToast('toast.api.copiedToClipboard', {}, 'success');
|
||||
if (btn) {
|
||||
const origHTML = btn.innerHTML;
|
||||
btn.innerHTML = '<i class="fas fa-check"></i> Copied!';
|
||||
setTimeout(() => { btn.innerHTML = origHTML; }, 2000);
|
||||
}
|
||||
}).catch(() => {
|
||||
// Fallback
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
showToast('toast.api.copiedToClipboard', {}, 'success');
|
||||
});
|
||||
}
|
||||
|
||||
static _downloadRefreshReport(data) {
|
||||
const { failures = [], success, processed, total, failure_count, skipped_count, elapsed_seconds } = data;
|
||||
|
||||
// CSV header
|
||||
let csv = 'Model Name,Error\n';
|
||||
failures.forEach(f => {
|
||||
const name = (f.name || 'Unknown').replace(/"/g, '""');
|
||||
const error = (f.error || 'Unknown').replace(/"/g, '""');
|
||||
csv += `"${name}","${error}"\n`;
|
||||
});
|
||||
|
||||
// Add summary as trailing comments
|
||||
csv += `\n# Summary: ${success} success, ${failure_count} failed, ${skipped_count} skipped, ${elapsed_seconds}s\n`;
|
||||
csv += `# Total scanned: ${total || processed}\n`;
|
||||
|
||||
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `metadata-refresh-failures-${Date.now()}.csv`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
showToast('toast.api.downloadStarted', {}, 'success');
|
||||
}
|
||||
|
||||
async refreshBulkModelMetadata(filePaths) {
|
||||
if (!filePaths || filePaths.length === 0) {
|
||||
throw new Error('No file paths provided');
|
||||
|
||||
Reference in New Issue
Block a user