mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-04-10 12:52:15 -03:00
fix(backup): add user-state backup UI and storage
This commit is contained in:
Will Miao
@@ -311,6 +311,161 @@ button:disabled,
|
||||
color: var(--lora-error, #ef4444);
|
||||
}
|
||||
|
||||
.backup-status {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .backup-status {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid var(--lora-border);
|
||||
}
|
||||
|
||||
.backup-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.backup-summary-card {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: var(--space-2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .backup-summary-card {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.backup-summary-label {
|
||||
color: var(--text-color);
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.backup-summary-value {
|
||||
color: var(--text-color);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.backup-summary-value.status-enabled {
|
||||
color: var(--lora-success, #10b981);
|
||||
}
|
||||
|
||||
.backup-summary-value.status-disabled {
|
||||
color: var(--lora-error, #ef4444);
|
||||
}
|
||||
|
||||
.backup-status-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.backup-status-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(140px, 180px) 1fr;
|
||||
gap: var(--space-2);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.backup-status-label {
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.backup-status-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.backup-status-primary {
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.backup-status-secondary {
|
||||
color: var(--text-color);
|
||||
opacity: 0.72;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.4;
|
||||
word-break: break-word;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.backup-location-details {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .backup-location-details {
|
||||
border-color: var(--lora-border);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.backup-location-details summary {
|
||||
cursor: pointer;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.backup-location-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 var(--space-3) var(--space-3);
|
||||
}
|
||||
|
||||
.backup-location-panel .text-btn {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.backup-location-path {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
padding: 6px 8px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: var(--text-color);
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .backup-location-path {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.backup-status-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.backup-location-panel {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.backup-location-panel .text-btn {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add styles for delete preview image */
|
||||
.delete-preview {
|
||||
max-width: 150px;
|
||||
|
||||
@@ -361,6 +361,13 @@ export class SettingsManager {
|
||||
});
|
||||
}
|
||||
|
||||
const openBackupLocationButton = document.getElementById('backupOpenLocationBtn');
|
||||
if (openBackupLocationButton) {
|
||||
openBackupLocationButton.addEventListener('click', () => {
|
||||
this.openBackupLocation();
|
||||
});
|
||||
}
|
||||
|
||||
['lora', 'checkpoint', 'embedding'].forEach(modelType => {
|
||||
const customInput = document.getElementById(`${modelType}CustomTemplate`);
|
||||
if (customInput) {
|
||||
@@ -742,6 +749,35 @@ export class SettingsManager {
|
||||
}
|
||||
}
|
||||
|
||||
async openBackupLocation() {
|
||||
try {
|
||||
const response = await fetch('/api/lm/backup/open-location', {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Request failed with status ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.mode === 'clipboard' && data.path) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(data.path);
|
||||
showToast('settings.backup.locationCopied', { path: data.path }, 'success');
|
||||
} catch (clipboardErr) {
|
||||
console.warn('Clipboard API not available:', clipboardErr);
|
||||
showToast('settings.backup.locationClipboardFallback', { path: data.path }, 'info');
|
||||
}
|
||||
} else {
|
||||
showToast('settings.backup.openFolderSuccess', {}, 'success');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to open backup folder:', error);
|
||||
showToast('settings.backup.openFolderFailed', {}, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async loadSettingsToUI() {
|
||||
// Set frontend settings from state
|
||||
const blurMatureContentCheckbox = document.getElementById('blurMatureContent');
|
||||
@@ -878,6 +914,9 @@ export class SettingsManager {
|
||||
// Load metadata archive settings
|
||||
await this.loadMetadataArchiveSettings();
|
||||
|
||||
// Load backup settings
|
||||
await this.loadBackupSettings();
|
||||
|
||||
// Load base model path mappings
|
||||
this.loadBaseModelMappings();
|
||||
|
||||
@@ -1857,6 +1896,10 @@ export class SettingsManager {
|
||||
await this.updateMetadataArchiveStatus();
|
||||
}
|
||||
|
||||
if (settingKey === 'backup_auto_enabled') {
|
||||
await this.updateBackupStatus();
|
||||
}
|
||||
|
||||
showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
|
||||
|
||||
// Apply frontend settings immediately
|
||||
@@ -1945,6 +1988,163 @@ export class SettingsManager {
|
||||
}
|
||||
}
|
||||
|
||||
async loadBackupSettings() {
|
||||
const backupAutoEnabledCheckbox = document.getElementById('backupAutoEnabled');
|
||||
if (backupAutoEnabledCheckbox) {
|
||||
backupAutoEnabledCheckbox.checked = state.global.settings.backup_auto_enabled ?? true;
|
||||
}
|
||||
|
||||
const backupRetentionCountInput = document.getElementById('backupRetentionCount');
|
||||
if (backupRetentionCountInput) {
|
||||
backupRetentionCountInput.value = state.global.settings.backup_retention_count ?? 5;
|
||||
}
|
||||
|
||||
await this.updateBackupStatus();
|
||||
}
|
||||
|
||||
async updateBackupStatus() {
|
||||
try {
|
||||
const response = await fetch('/api/lm/backup/status');
|
||||
const data = await response.json();
|
||||
|
||||
const statusContainer = document.getElementById('backupStatus');
|
||||
if (!statusContainer || !data.success) {
|
||||
return;
|
||||
}
|
||||
|
||||
const status = data.status || {};
|
||||
const latestAutoSnapshot = status.latestAutoSnapshot;
|
||||
const retentionCount = status.retentionCount ?? state.global.settings.backup_retention_count ?? 5;
|
||||
const enabled = status.enabled ?? state.global.settings.backup_auto_enabled ?? true;
|
||||
const backupDir = status.backupDir || '';
|
||||
const backupLocationPath = document.getElementById('backupLocationPath');
|
||||
if (backupLocationPath) {
|
||||
backupLocationPath.textContent = backupDir;
|
||||
backupLocationPath.title = backupDir;
|
||||
}
|
||||
|
||||
const formatTimestamp = (timestamp) => {
|
||||
if (!timestamp) {
|
||||
return translate('common.status.unknown', {}, 'Unknown');
|
||||
}
|
||||
return new Date(timestamp * 1000).toLocaleString();
|
||||
};
|
||||
|
||||
const renderSnapshotDetail = (snapshot) => {
|
||||
if (!snapshot) {
|
||||
return translate('settings.backup.noneAvailable', {}, 'No snapshots yet');
|
||||
}
|
||||
|
||||
const size = typeof snapshot.size === 'number' ? ` (${this.formatFileSize(snapshot.size)})` : '';
|
||||
return `${snapshot.name}${size}`;
|
||||
};
|
||||
|
||||
statusContainer.innerHTML = `
|
||||
<div class="backup-summary-grid">
|
||||
<div class="backup-summary-card">
|
||||
<div class="backup-summary-label">${translate('settings.backup.autoEnabled', {}, 'Automatic snapshots')}</div>
|
||||
<div class="backup-summary-value status-${enabled ? 'enabled' : 'disabled'}">
|
||||
${enabled ? translate('common.status.enabled') : translate('common.status.disabled')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="backup-summary-card">
|
||||
<div class="backup-summary-label">${translate('settings.backup.retention', {}, 'Retention')}</div>
|
||||
<div class="backup-summary-value">${retentionCount}</div>
|
||||
</div>
|
||||
<div class="backup-summary-card">
|
||||
<div class="backup-summary-label">${translate('settings.backup.snapshotCount', {}, 'Saved snapshots')}</div>
|
||||
<div class="backup-summary-value">${status.snapshotCount ?? 0}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="backup-status-list">
|
||||
<div class="backup-status-row">
|
||||
<div class="backup-status-label">${translate('settings.backup.latestAutoSnapshot', {}, 'Latest auto snapshot')}</div>
|
||||
<div class="backup-status-content">
|
||||
<div class="backup-status-primary">${formatTimestamp(latestAutoSnapshot?.mtime)}</div>
|
||||
<div class="backup-status-secondary">${renderSnapshotDetail(latestAutoSnapshot)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} catch (error) {
|
||||
console.error('Error updating backup status:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async exportBackup() {
|
||||
try {
|
||||
const response = await fetch('/api/lm/backup/export', {
|
||||
method: 'POST',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Request failed with status ${response.status}`);
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const contentDisposition = response.headers.get('Content-Disposition') || '';
|
||||
const match = contentDisposition.match(/filename="([^"]+)"/);
|
||||
const filename = match?.[1] || `lora-manager-backup-${Date.now()}.zip`;
|
||||
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
showToast('settings.backup.exportSuccess', {}, 'success');
|
||||
} catch (error) {
|
||||
console.error('Failed to export backup:', error);
|
||||
showToast('settings.backup.exportFailed', { message: error.message }, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
triggerBackupImport() {
|
||||
const input = document.getElementById('backupImportInput');
|
||||
input?.click();
|
||||
}
|
||||
|
||||
async handleBackupImportFile(input) {
|
||||
if (!(input instanceof HTMLInputElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const file = input.files?.[0];
|
||||
input.value = '';
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(translate('settings.backup.importConfirm', {}, 'Import this backup and overwrite local user state?'))) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('archive', file);
|
||||
|
||||
const response = await fetch('/api/lm/backup/import', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok || data.success === false) {
|
||||
throw new Error(data.error || `Request failed with status ${response.status}`);
|
||||
}
|
||||
|
||||
showToast('settings.backup.importSuccess', {}, 'success');
|
||||
await this.updateBackupStatus();
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error('Failed to import backup:', error);
|
||||
showToast('settings.backup.importFailed', { message: error.message }, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async updateMetadataArchiveStatus() {
|
||||
try {
|
||||
const response = await fetch('/api/lm/metadata-archive-status');
|
||||
@@ -2473,8 +2673,11 @@ export class SettingsManager {
|
||||
|
||||
try {
|
||||
// Check if value has changed from existing value
|
||||
const currentValue = state.global.settings[settingKey] || '';
|
||||
if (value === currentValue) {
|
||||
const currentValue = state.global.settings[settingKey];
|
||||
const normalizedCurrentValue = currentValue === undefined || currentValue === null
|
||||
? ''
|
||||
: String(currentValue).trim();
|
||||
if (value === normalizedCurrentValue) {
|
||||
return; // No change, exit early
|
||||
}
|
||||
|
||||
@@ -2515,6 +2718,9 @@ export class SettingsManager {
|
||||
|
||||
if (settingKey === 'recipes_path') {
|
||||
showToast('toast.settings.recipesPathUpdated', {}, 'success');
|
||||
} else if (settingKey === 'backup_retention_count') {
|
||||
await this.updateBackupStatus();
|
||||
showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
|
||||
} else {
|
||||
showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
|
||||
}
|
||||
|
||||
@@ -41,6 +41,8 @@ const DEFAULT_SETTINGS_BASE = Object.freeze({
|
||||
metadata_refresh_skip_paths: [],
|
||||
skip_previously_downloaded_model_versions: false,
|
||||
download_skip_base_models: [],
|
||||
backup_auto_enabled: true,
|
||||
backup_retention_count: 5,
|
||||
});
|
||||
|
||||
export function createDefaultSettings() {
|
||||
|
||||
Reference in New Issue
Block a user