From f3544b3471e30eee5c3be2a65ec2d87fc7c522d7 Mon Sep 17 00:00:00 2001 From: Will Miao <13051207myq@gmail.com> Date: Fri, 19 Sep 2025 22:57:05 +0800 Subject: [PATCH] refactor(settings): replace getStorageItem with state.global.settings for default root retrieval --- .../shared/showcase/ShowcaseView.js | 14 ++ static/js/managers/DownloadManager.js | 2 +- static/js/managers/ImportManager.js | 2 +- static/js/managers/MoveManager.js | 3 +- static/js/managers/import/FolderBrowser.js | 221 ------------------ 5 files changed, 17 insertions(+), 225 deletions(-) delete mode 100644 static/js/managers/import/FolderBrowser.js diff --git a/static/js/components/shared/showcase/ShowcaseView.js b/static/js/components/shared/showcase/ShowcaseView.js index 257753fd..2830b166 100644 --- a/static/js/components/shared/showcase/ShowcaseView.js +++ b/static/js/components/shared/showcase/ShowcaseView.js @@ -33,6 +33,20 @@ export async function loadExampleImages(images, modelHash) { const params = `model_hash=${modelHash}`; const response = await fetch(`${endpoint}?${params}`); + if (!response.ok) { + // Try to parse error message from backend + let errorMsg = `HTTP error ${response.status}`; + try { + const errorData = await response.json(); + if (errorData && errorData.error) { + errorMsg = errorData.error; + } + } catch (e) { + // Ignore JSON parse error + } + console.warn("Failed to get example files:", errorMsg); + return; + } const result = await response.json(); if (result.success) { diff --git a/static/js/managers/DownloadManager.js b/static/js/managers/DownloadManager.js index 36137785..c84e7a5f 100644 --- a/static/js/managers/DownloadManager.js +++ b/static/js/managers/DownloadManager.js @@ -308,7 +308,7 @@ export class DownloadManager { // Set default root if available const singularType = this.apiClient.modelType.replace(/s$/, ''); const defaultRootKey = `default_${singularType}_root`; - const defaultRoot = getStorageItem('settings', {})[defaultRootKey]; + const defaultRoot = state.global.settings[defaultRootKey]; console.log(`Default root for ${this.apiClient.modelType}:`, defaultRoot); console.log('Available roots:', rootsData.roots); if (defaultRoot && rootsData.roots.includes(defaultRoot)) { diff --git a/static/js/managers/ImportManager.js b/static/js/managers/ImportManager.js index 95d1549d..3aa4de35 100644 --- a/static/js/managers/ImportManager.js +++ b/static/js/managers/ImportManager.js @@ -228,7 +228,7 @@ export class ImportManager { // Set default root if available const defaultRootKey = 'default_lora_root'; - const defaultRoot = getStorageItem('settings', {})[defaultRootKey]; + const defaultRoot = state.global.settings[defaultRootKey]; if (defaultRoot && rootsData.roots.includes(defaultRoot)) { loraRoot.value = defaultRoot; } diff --git a/static/js/managers/MoveManager.js b/static/js/managers/MoveManager.js index 528b2847..1b23a827 100644 --- a/static/js/managers/MoveManager.js +++ b/static/js/managers/MoveManager.js @@ -2,7 +2,6 @@ import { showToast } from '../utils/uiHelpers.js'; import { state, getCurrentPageState } from '../state/index.js'; import { modalManager } from './ModalManager.js'; import { bulkManager } from './BulkManager.js'; -import { getStorageItem } from '../utils/storageHelpers.js'; import { getModelApiClient } from '../api/modelApiFactory.js'; import { FolderTreeManager } from '../components/FolderTreeManager.js'; import { sidebarManager } from '../components/SidebarManager.js'; @@ -87,7 +86,7 @@ class MoveManager { // Set default root if available const settingsKey = `default_${currentPageType.slice(0, -1)}_root`; - const defaultRoot = getStorageItem('settings', {})[settingsKey]; + const defaultRoot = state.global.settings[settingsKey]; if (defaultRoot && rootsData.roots.includes(defaultRoot)) { modelRootSelect.value = defaultRoot; } diff --git a/static/js/managers/import/FolderBrowser.js b/static/js/managers/import/FolderBrowser.js deleted file mode 100644 index 43cfbada..00000000 --- a/static/js/managers/import/FolderBrowser.js +++ /dev/null @@ -1,221 +0,0 @@ -import { showToast } from '../../utils/uiHelpers.js'; -import { translate } from '../../utils/i18nHelpers.js'; -import { getStorageItem } from '../../utils/storageHelpers.js'; - -export class FolderBrowser { - constructor(importManager) { - this.importManager = importManager; - this.folderClickHandler = null; - this.updateTargetPath = this.updateTargetPath.bind(this); - } - - async proceedToLocation() { - // Show the location step with special handling - this.importManager.stepManager.showStep('locationStep'); - - // Double-check after a short delay to ensure the step is visible - setTimeout(() => { - const locationStep = document.getElementById('locationStep'); - if (locationStep.style.display !== 'block' || - window.getComputedStyle(locationStep).display !== 'block') { - // Force display again - locationStep.style.display = 'block'; - - // If still not visible, try with injected style - if (window.getComputedStyle(locationStep).display !== 'block') { - this.importManager.stepManager.injectedStyles = document.createElement('style'); - this.importManager.stepManager.injectedStyles.innerHTML = ` - #locationStep { - display: block !important; - opacity: 1 !important; - visibility: visible !important; - } - `; - document.head.appendChild(this.importManager.stepManager.injectedStyles); - } - } - }, 100); - - try { - // Display missing LoRAs that will be downloaded - const missingLorasList = document.getElementById('missingLorasList'); - if (missingLorasList && this.importManager.downloadableLoRAs.length > 0) { - // Calculate total size - const totalSize = this.importManager.downloadableLoRAs.reduce((sum, lora) => { - return sum + (lora.size ? parseInt(lora.size) : 0); - }, 0); - - // Update total size display - const totalSizeDisplay = document.getElementById('totalDownloadSize'); - if (totalSizeDisplay) { - totalSizeDisplay.textContent = this.importManager.formatFileSize(totalSize); - } - - // Update header to include count of missing LoRAs - const missingLorasHeader = document.querySelector('.summary-header h3'); - if (missingLorasHeader) { - missingLorasHeader.innerHTML = `Missing LoRAs (${this.importManager.downloadableLoRAs.length}) ${this.importManager.formatFileSize(totalSize)}`; - } - - // Generate missing LoRAs list - missingLorasList.innerHTML = this.importManager.downloadableLoRAs.map(lora => { - const sizeDisplay = lora.size ? - this.importManager.formatFileSize(lora.size) : 'Unknown size'; - const baseModel = lora.baseModel ? - `${lora.baseModel}` : ''; - const isEarlyAccess = lora.isEarlyAccess; - - // Early access badge - let earlyAccessBadge = ''; - if (isEarlyAccess) { - earlyAccessBadge = ` - Early Access - `; - } - - return ` -
-
-
${lora.name}
- ${baseModel} - ${earlyAccessBadge} -
-
${sizeDisplay}
-
- `; - }).join(''); - - // Set up toggle for missing LoRAs list - const toggleBtn = document.getElementById('toggleMissingLorasList'); - if (toggleBtn) { - toggleBtn.addEventListener('click', () => { - missingLorasList.classList.toggle('collapsed'); - const icon = toggleBtn.querySelector('i'); - if (icon) { - icon.classList.toggle('fa-chevron-down'); - icon.classList.toggle('fa-chevron-up'); - } - }); - } - } - - // Fetch LoRA roots - const rootsResponse = await fetch('/api/lm/loras/roots'); - if (!rootsResponse.ok) { - throw new Error(`Failed to fetch LoRA roots: ${rootsResponse.status}`); - } - - const rootsData = await rootsResponse.json(); - const loraRoot = document.getElementById('importLoraRoot'); - if (loraRoot) { - loraRoot.innerHTML = rootsData.roots.map(root => - `` - ).join(''); - - // Set default lora root if available - const defaultRoot = getStorageItem('settings', {}).default_lora_root; - if (defaultRoot && rootsData.roots.includes(defaultRoot)) { - loraRoot.value = defaultRoot; - } - } - - // Fetch folders - const foldersResponse = await fetch('/api/lm/loras/folders'); - if (!foldersResponse.ok) { - throw new Error(`Failed to fetch folders: ${foldersResponse.status}`); - } - - const foldersData = await foldersResponse.json(); - const folderBrowser = document.getElementById('importFolderBrowser'); - if (folderBrowser) { - folderBrowser.innerHTML = foldersData.folders.map(folder => - folder ? `
${folder}
` : '' - ).join(''); - } - - // Initialize folder browser after loading data - this.initializeFolderBrowser(); - } catch (error) { - console.error('Error in API calls:', error); - showToast('toast.recipes.folderBrowserError', { message: error.message }, 'error'); - } - } - - initializeFolderBrowser() { - const folderBrowser = document.getElementById('importFolderBrowser'); - if (!folderBrowser) return; - - // Cleanup existing handler if any - this.cleanup(); - - // Create new handler - this.folderClickHandler = (event) => { - const folderItem = event.target.closest('.folder-item'); - if (!folderItem) return; - - if (folderItem.classList.contains('selected')) { - folderItem.classList.remove('selected'); - this.importManager.selectedFolder = ''; - } else { - folderBrowser.querySelectorAll('.folder-item').forEach(f => - f.classList.remove('selected')); - folderItem.classList.add('selected'); - this.importManager.selectedFolder = folderItem.dataset.folder; - } - - // Update path display after folder selection - this.updateTargetPath(); - }; - - // Add the new handler - folderBrowser.addEventListener('click', this.folderClickHandler); - - // Add event listeners for path updates - const loraRoot = document.getElementById('importLoraRoot'); - const newFolder = document.getElementById('importNewFolder'); - - if (loraRoot) loraRoot.addEventListener('change', this.updateTargetPath); - if (newFolder) newFolder.addEventListener('input', this.updateTargetPath); - - // Update initial path - this.updateTargetPath(); - } - - cleanup() { - if (this.folderClickHandler) { - const folderBrowser = document.getElementById('importFolderBrowser'); - if (folderBrowser) { - folderBrowser.removeEventListener('click', this.folderClickHandler); - this.folderClickHandler = null; - } - } - - // Remove path update listeners - const loraRoot = document.getElementById('importLoraRoot'); - const newFolder = document.getElementById('importNewFolder'); - - if (loraRoot) loraRoot.removeEventListener('change', this.updateTargetPath); - if (newFolder) newFolder.removeEventListener('input', this.updateTargetPath); - } - - updateTargetPath() { - const pathDisplay = document.getElementById('importTargetPathDisplay'); - if (!pathDisplay) return; - - const loraRoot = document.getElementById('importLoraRoot')?.value || ''; - const newFolder = document.getElementById('importNewFolder')?.value?.trim() || ''; - - let fullPath = loraRoot || translate('recipes.controls.import.selectLoraRoot', {}, 'Select a LoRA root directory'); - - if (loraRoot) { - if (this.importManager.selectedFolder) { - fullPath += '/' + this.importManager.selectedFolder; - } - if (newFolder) { - fullPath += '/' + newFolder; - } - } - - pathDisplay.innerHTML = `${fullPath}`; - } -}