checkpoint

lora_manager.py

@@ -41,6 +41,7 @@ class LoraManager:
         
         # Add cleanup
         app.on_shutdown.append(cls._cleanup)
+        app.on_shutdown.append(ApiRoutes.cleanup)
     
     @classmethod
     async def _schedule_cache_init(cls, scanner: LoraScanner):

routes/api_routes.py

@@ -16,6 +16,7 @@ class ApiRoutes:
 
     def __init__(self):
         self.scanner = LoraScanner()
+        self.civitai_client = CivitaiClient()
 
     @classmethod
     def setup_routes(cls, app: web.Application):
@@ -27,6 +28,9 @@ class ApiRoutes:
         app.router.add_get('/api/loras', routes.get_loras)
         app.router.add_post('/api/fetch-all-civitai', routes.fetch_all_civitai)
         app.router.add_get('/ws/fetch-progress', ws_manager.handle_connection)
+        app.router.add_get('/api/lora-roots', routes.get_lora_roots)
+        app.router.add_get('/api/civitai/versions/{model_id}', routes.get_civitai_versions)
+        app.router.add_post('/api/download-lora', routes.download_lora)
 
     async def delete_model(self, request: web.Request) -> web.Response:
         """Handle model deletion request"""
@@ -52,7 +56,6 @@ class ApiRoutes:
 
     async def fetch_civitai(self, request: web.Request) -> web.Response:
         """Handle CivitAI metadata fetch request"""
-        client = CivitaiClient()
         try:
             data = await request.json()
             metadata_path = os.path.splitext(data['file_path'])[0] + '.metadata.json'
@@ -63,19 +66,17 @@ class ApiRoutes:
                 return web.json_response({"success": True, "notice": "Not from CivitAI"})
 
             # Fetch and update metadata
-            civitai_metadata = await client.get_model_by_hash(data["sha256"])
+            civitai_metadata = await self.civitai_client.get_model_by_hash(data["sha256"])
             if not civitai_metadata:
                 return await self._handle_not_found_on_civitai(metadata_path, local_metadata)
 
-            await self._update_model_metadata(metadata_path, local_metadata, civitai_metadata, client)
+            await self._update_model_metadata(metadata_path, local_metadata, civitai_metadata, self.civitai_client)
             
             return web.json_response({"success": True})
 
         except Exception as e:
             logger.error(f"Error fetching from CivitAI: {e}", exc_info=True)
             return web.json_response({"success": False, "error": str(e)}, status=500)
-        finally:
-            await client.close()
 
     async def replace_preview(self, request: web.Request) -> web.Response:
         """Handle preview image replacement request"""
@@ -444,3 +445,64 @@ class ApiRoutes:
             return False
         finally:
             await client.close()
+
+    async def get_lora_roots(self, request: web.Request) -> web.Response:
+        """Get all configured LoRA root directories"""
+        return web.json_response({
+            'roots': config.loras_roots
+        })
+
+    async def get_civitai_versions(self, request: web.Request) -> web.Response:
+        """Get available versions for a Civitai model"""
+        try:
+            model_id = request.match_info['model_id']
+            versions = await self.civitai_client.get_model_versions(model_id)
+            if not versions:
+                return web.Response(status=404, text="Model not found")
+            return web.json_response(versions)
+        except Exception as e:
+            logger.error(f"Error fetching model versions: {e}")
+            return web.Response(status=500, text=str(e))
+
+    async def download_lora(self, request: web.Request) -> web.Response:
+        """Handle LoRA download request"""
+        try:
+            data = await request.json()
+            download_url = data.get('download_url')
+            version_info = data.get('version_info')
+            lora_root = data.get('lora_root')
+            new_folder = data.get('new_folder', '').strip()
+
+            if not download_url or not version_info or not lora_root:
+                return web.Response(status=400, text="Missing required parameters")
+
+            if not os.path.isdir(lora_root):
+                return web.Response(status=400, text="Invalid LoRA root directory")
+
+            # 构建保存路径
+            save_dir = os.path.join(lora_root, new_folder) if new_folder else lora_root
+            os.makedirs(save_dir, exist_ok=True)
+
+            # 使用提供的下载 URL 和版本信息
+            result = await self.civitai_client.download_model_with_info(
+                download_url=download_url,
+                version_info=version_info,
+                save_dir=save_dir
+            )
+
+            if result.get('success'):
+                # 更新缓存
+                await self.scanner.rescan_directory(save_dir)
+                return web.json_response(result)
+            else:
+                return web.Response(status=500, text=result.get('error', 'Download failed'))
+
+        except Exception as e:
+            logger.error(f"Error downloading LoRA: {e}")
+            return web.Response(status=500, text=str(e))
+
+    @classmethod
+    async def cleanup(cls):
+        """Add cleanup method for application shutdown"""
+        if hasattr(cls, '_instance'):
+            await cls._instance.civitai_client.close()

services/civitai_client.py

@@ -1,26 +1,41 @@
 import aiohttp
 import os
 import json
+import logging
 from typing import Optional, Dict
 
+logger = logging.getLogger(__name__)
+
 class CivitaiClient:
     def __init__(self):
         self.base_url = "https://civitai.com/api/v1"
-        self.session = aiohttp.ClientSession()
+        self.headers = {
-        
+            'User-Agent': 'ComfyUI-LoRA-Manager/1.0'
+        }
+        self._session = None
+    
+    @property
+    async def session(self) -> aiohttp.ClientSession:
+        """Lazy initialize the session"""
+        if self._session is None:
+            self._session = aiohttp.ClientSession()
+        return self._session
+
     async def get_model_by_hash(self, model_hash: str) -> Optional[Dict]:
         try:
-            async with self.session.get(f"{self.base_url}/model-versions/by-hash/{model_hash}") as response:
+            session = await self.session
+            async with session.get(f"{self.base_url}/model-versions/by-hash/{model_hash}") as response:
                 if response.status == 200:
                     return await response.json()
                 return None
         except Exception as e:
-            print(f"API Error: {str(e)}")
+            logger.error(f"API Error: {str(e)}")
             return None
 
     async def download_preview_image(self, image_url: str, save_path: str):
         try:
-            async with self.session.get(image_url) as response:
+            session = await self.session
+            async with session.get(image_url) as response:
                 if response.status == 200:
                     content = await response.read()
                     with open(save_path, 'wb') as f:
@@ -31,5 +46,135 @@ class CivitaiClient:
             print(f"Download Error: {str(e)}")
             return False
             
+    async def get_model_versions(self, model_id: str) -> Optional[Dict]:
+        """Fetch all versions of a model"""
+        try:
+            session = await self.session
+            url = f"{self.base_url}/models/{model_id}"
+            async with session.get(url, headers=self.headers) as response:
+                if response.status == 200:
+                    data = await response.json()
+                    return data.get('modelVersions', [])
+                return None
+        except Exception as e:
+            logger.error(f"Error fetching model versions: {e}")
+            return None
+
+    async def download_model_version(self, version_id: str, save_dir: str) -> Dict:
+        """Download a specific model version"""
+        try:
+            session = await self.session
+            # First get version info
+            url = f"{self.base_url}/model-versions/{version_id}"
+            async with session.get(url, headers=self.headers) as response:
+                if response.status != 200:
+                    return {'success': False, 'error': 'Version not found'}
+                
+                version_data = await response.json()
+                download_url = version_data.get('downloadUrl')
+                if not download_url:
+                    return {'success': False, 'error': 'No download URL found'}
+
+            # Download the file
+            file_name = version_data.get('files', [{}])[0].get('name', f'lora_{version_id}.safetensors')
+            save_path = os.path.join(save_dir, file_name)
+            
+            async with session.get(download_url, headers=self.headers) as response:
+                if response.status != 200:
+                    return {'success': False, 'error': 'Download failed'}
+                
+                with open(save_path, 'wb') as f:
+                    while True:
+                        chunk = await response.content.read(8192)
+                        if not chunk:
+                            break
+                        f.write(chunk)
+
+            # Create metadata file
+            metadata_path = os.path.splitext(save_path)[0] + '.metadata.json'
+            metadata = {
+                'model_name': version_data.get('model', {}).get('name', file_name),
+                'civitai': version_data,
+                'preview_url': None,
+                'from_civitai': True
+            }
+
+            # Download preview image if available
+            images = version_data.get('images', [])
+            if images:
+                preview_ext = '.mp4' if images[0].get('type') == 'video' else '.png'
+                preview_path = os.path.splitext(save_path)[0] + '.preview' + preview_ext
+                await self.download_preview_image(images[0]['url'], preview_path)
+                metadata['preview_url'] = preview_path
+
+            # Save metadata
+            with open(metadata_path, 'w', encoding='utf-8') as f:
+                json.dump(metadata, f, indent=2, ensure_ascii=False)
+
+            return {
+                'success': True,
+                'file_path': save_path,
+                'metadata': metadata
+            }
+
+        except Exception as e:
+            logger.error(f"Error downloading model version: {e}")
+            return {'success': False, 'error': str(e)}
+
+    async def download_model_with_info(self, download_url: str, version_info: dict, save_dir: str) -> Dict:
+        """Download model using provided version info and URL"""
+        try:
+            session = await self.session
+            
+            # Use provided filename or generate one
+            file_name = version_info.get('files', [{}])[0].get('name', f'lora_{version_info["id"]}.safetensors')
+            save_path = os.path.join(save_dir, file_name)
+            
+            # Download the file
+            async with session.get(download_url, headers=self.headers) as response:
+                if response.status != 200:
+                    return {'success': False, 'error': 'Download failed'}
+                
+                with open(save_path, 'wb') as f:
+                    while True:
+                        chunk = await response.content.read(8192)
+                        if not chunk:
+                            break
+                        f.write(chunk)
+
+            # Create metadata file
+            metadata_path = os.path.splitext(save_path)[0] + '.metadata.json'
+            metadata = {
+                'model_name': version_info.get('model', {}).get('name', file_name),
+                'civitai': version_info,
+                'preview_url': None,
+                'from_civitai': True
+            }
+
+            # Download preview image if available
+            images = version_info.get('images', [])
+            if images:
+                preview_ext = '.mp4' if images[0].get('type') == 'video' else '.png'
+                preview_path = os.path.splitext(save_path)[0] + '.preview' + preview_ext
+                await self.download_preview_image(images[0]['url'], preview_path)
+                metadata['preview_url'] = preview_path
+
+            # Save metadata
+            with open(metadata_path, 'w', encoding='utf-8') as f:
+                json.dump(metadata, f, indent=2, ensure_ascii=False)
+
+            return {
+                'success': True,
+                'file_path': save_path,
+                'metadata': metadata
+            }
+
+        except Exception as e:
+            logger.error(f"Error downloading model version: {e}")
+            return {'success': False, 'error': str(e)}
+
     async def close(self):
-        await self.session.close()
+        """Close the session if it exists"""
+        if self._session is not None:
+            await self._session.close()
+            self._session = None

static/css/style.css

@@ -1063,7 +1063,7 @@ body.modal-open {
     border-radius: 50%;
     background: var(--card-bg);
     border: 1px solid var(--border-color);
-    color: var(--text-color);
+    color: var (--text-color);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1092,4 +1092,66 @@ body.modal-open {
     .back-to-top {
         bottom: 60px; /* Give some extra space from bottom on mobile */
     }
+}
+
+/* Download Modal Styles */
+.download-step {
+    margin: var(--space-2) 0;
+}
+
+.input-group {
+    margin-bottom: var(--space-2);
+}
+
+.input-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-color);
+}
+
+.input-group input,
+.input-group select {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    background: var(--bg-color);
+    color: var(--text-color);
+}
+
+.error-message {
+    color: var(--lora-error);
+    font-size: 0.9em;
+    margin-top: 4px;
+}
+
+.version-list {
+    max-height: 300px;
+    overflow-y: auto;
+    margin: var(--space-2) 0;
+}
+
+.version-item {
+    padding: var(--space-2);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-sm);
+    margin-bottom: 8px;
+    cursor: pointer;
+}
+
+.version-item:hover {
+    background: var(--lora-surface);
+}
+
+.version-item.selected {
+    border-color: var(--lora-accent);
+    background: oklch(var(--lora-accent) / 0.1);
+}
+
+.folder-browser {
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    padding: var(--space-1);
+    max-height: 200px;
+    overflow-y: auto;
 }

static/js/main.js

@@ -20,6 +20,7 @@ import {
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { showDeleteModal, confirmDelete, closeDeleteModal } from './utils/modalUtils.js';
 import { SearchManager } from './utils/search.js';
+import { DownloadManager } from './managers/DownloadManager.js';
 
 // Export all functions that need global access
 window.loadMoreLoras = loadMoreLoras;
@@ -43,6 +44,7 @@ window.toggleFolderTags = toggleFolderTags;
 document.addEventListener('DOMContentLoaded', () => {
     state.loadingManager = new LoadingManager();
     modalManager.initialize();  // Initialize modalManager after DOM is loaded
+    window.downloadManager = new DownloadManager();  // Move this after modalManager initialization
     initializeInfiniteScroll();
     initializeEventListeners();
     lazyLoadImages();
@@ -67,4 +69,4 @@ function initializeEventListeners() {
     document.querySelectorAll('.folder-tags .tag').forEach(tag => {
         tag.addEventListener('click', toggleFolder);
     });
-} 
+}

static/js/managers/DownloadManager.js

@@ -0,0 +1,185 @@
+import { modalManager } from './ModalManager.js';
+import { showToast } from '../utils/uiHelpers.js';
+
+export class DownloadManager {
+    constructor() {
+        this.currentVersion = null;
+        this.versions = [];
+        this.modelInfo = null;
+        this.modelVersionId = null; // Add new property for initial version ID
+        
+        // Add initialization check
+        this.initialized = false;
+    }
+
+    showDownloadModal() {
+        console.log('Showing download modal...'); // Add debug log
+        if (!this.initialized) {
+            // Check if modal exists
+            const modal = document.getElementById('downloadModal');
+            if (!modal) {
+                console.error('Download modal element not found');
+                return;
+            }
+            this.initialized = true;
+        }
+        
+        modalManager.showModal('downloadModal');
+        this.resetSteps();
+    }
+
+    resetSteps() {
+        document.querySelectorAll('.download-step').forEach(step => step.style.display = 'none');
+        document.getElementById('urlStep').style.display = 'block';
+        document.getElementById('loraUrl').value = '';
+        document.getElementById('urlError').textContent = '';
+        this.currentVersion = null;
+        this.versions = [];
+        this.modelInfo = null;
+        this.modelVersionId = null;
+    }
+
+    async validateAndFetchVersions() {
+        const url = document.getElementById('loraUrl').value.trim();
+        const errorElement = document.getElementById('urlError');
+        
+        try {
+            const modelId = this.extractModelId(url);
+            if (!modelId) {
+                throw new Error('Invalid Civitai URL format');
+            }
+
+            const response = await fetch(`/api/civitai/versions/${modelId}`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch model versions');
+            }
+            
+            this.versions = await response.json();
+            if (!this.versions.length) {
+                throw new Error('No versions available for this model');
+            }
+            
+            // If we have a version ID from URL, pre-select it
+            if (this.modelVersionId) {
+                this.currentVersion = this.versions.find(v => v.id.toString() === this.modelVersionId);
+            }
+            
+            this.showVersionStep();
+        } catch (error) {
+            errorElement.textContent = error.message;
+        }
+    }
+
+    extractModelId(url) {
+        const modelMatch = url.match(/civitai\.com\/models\/(\d+)/);
+        const versionMatch = url.match(/modelVersionId=(\d+)/);
+        
+        if (modelMatch) {
+            this.modelVersionId = versionMatch ? versionMatch[1] : null;
+            return modelMatch[1];
+        }
+        return null;
+    }
+
+    showVersionStep() {
+        document.getElementById('urlStep').style.display = 'none';
+        document.getElementById('versionStep').style.display = 'block';
+        
+        const versionList = document.getElementById('versionList');
+        versionList.innerHTML = this.versions.map(version => `
+            <div class="version-item ${this.currentVersion?.id === version.id ? 'selected' : ''}"
+                 onclick="downloadManager.selectVersion('${version.id}')">
+                <h3>${version.name}</h3>
+                <div class="version-info">
+                    ${version.baseModel ? `<div class="base-model">${version.baseModel}</div>` : ''}
+                    <div class="version-date">${new Date(version.createdAt).toLocaleDateString()}</div>
+                </div>
+            </div>
+        `).join('');
+    }
+
+    selectVersion(versionId) {
+        this.currentVersion = this.versions.find(v => v.id.toString() === versionId.toString());
+        if (!this.currentVersion) return;
+
+        document.querySelectorAll('.version-item').forEach(item => {
+            item.classList.toggle('selected', item.querySelector('h3').textContent === this.currentVersion.name);
+        });
+    }
+
+    async proceedToLocation() {
+        if (!this.currentVersion) {
+            showToast('Please select a version', 'error');
+            return;
+        }
+
+        document.getElementById('versionStep').style.display = 'none';
+        document.getElementById('locationStep').style.display = 'block';
+        
+        try {
+            const response = await fetch('/api/lora-roots');
+            if (!response.ok) {
+                throw new Error('Failed to fetch LoRA roots');
+            }
+            
+            const data = await response.json();
+            const loraRoot = document.getElementById('loraRoot');
+            loraRoot.innerHTML = data.roots.map(root => 
+                `<option value="${root}">${root}</option>`
+            ).join('');
+        } catch (error) {
+            showToast(error.message, 'error');
+        }
+    }
+
+    backToUrl() {
+        document.getElementById('versionStep').style.display = 'none';
+        document.getElementById('urlStep').style.display = 'block';
+    }
+
+    backToVersions() {
+        document.getElementById('locationStep').style.display = 'none';
+        document.getElementById('versionStep').style.display = 'block';
+    }
+
+    async startDownload() {
+        const loraRoot = document.getElementById('loraRoot').value;
+        const newFolder = document.getElementById('newFolder').value.trim();
+        
+        if (!loraRoot) {
+            showToast('Please select a LoRA root directory', 'error');
+            return;
+        }
+
+        try {
+            const downloadUrl = this.currentVersion.downloadUrl;
+            if (!downloadUrl) {
+                throw new Error('No download URL available');
+            }
+
+            const response = await fetch('/api/download-lora', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    download_url: downloadUrl,
+                    version_info: this.currentVersion,
+                    lora_root: loraRoot,
+                    new_folder: newFolder
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(await response.text());
+            }
+
+            const result = await response.json();
+            showToast('Download completed successfully', 'success');
+            modalManager.closeModal('downloadModal');
+            
+            // Refresh the grid to show new model
+            window.refreshLoras();
+        } catch (error) {
+            showToast(error.message, 'error');
+        }
+    }
+}

static/js/managers/ModalManager.js

@@ -25,6 +25,15 @@ export class ModalManager {
             }
         });
 
+        // Add downloadModal registration
+        this.registerModal('downloadModal', {
+            element: document.getElementById('downloadModal'),
+            onClose: () => {
+                this.getModal('downloadModal').element.style.display = 'none';
+                document.body.classList.remove('modal-open');
+            }
+        });
+
         document.addEventListener('keydown', this.boundHandleEscape);
         this.initialized = true;
     }
@@ -56,10 +65,12 @@ export class ModalManager {
             modal.element.innerHTML = content;
         }
 
-        if (id === 'loraModal') {
+        // Update to handle different modal types
-            modal.element.style.display = 'block';
+        if (id === 'deleteModal') {
-        } else if (id === 'deleteModal') {
             modal.element.classList.add('show');
+        } else {
+            // For loraModal and downloadModal
+            modal.element.style.display = 'block';
         }
 
         modal.isOpen = true;
@@ -88,4 +99,4 @@ export class ModalManager {
 }
 
 // Create and export a singleton instance
-export const modalManager = new ModalManager(); 
+export const modalManager = new ModalManager();

static/js/script.js

@@ -1,892 +0,0 @@
-// Debounce function
-function debounce(func, wait) {
-    let timeout;
-    return function(...args) {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => func.apply(this, args), wait);
-    };
-}
-
-// Sorting functionality
-// function sortCards(sortBy) { ... }
-
-// Loading management
-class LoadingManager {
-    constructor() {
-        this.overlay = document.getElementById('loading-overlay');
-        this.progressBar = this.overlay.querySelector('.progress-bar');
-        this.statusText = this.overlay.querySelector('.loading-status');
-    }
-
-    show(message = 'Loading...', progress = 0) {
-        this.overlay.style.display = 'flex';
-        this.setProgress(progress);
-        this.setStatus(message);
-    }
-
-    hide() {
-        this.overlay.style.display = 'none';
-        this.reset();
-    }
-
-    setProgress(percent) {
-        this.progressBar.style.width = `${percent}%`;
-        this.progressBar.setAttribute('aria-valuenow', percent);
-    }
-
-    setStatus(message) {
-        this.statusText.textContent = message;
-    }
-
-    reset() {
-        this.setProgress(0);
-        this.setStatus('');
-    }
-
-    async showWithProgress(callback, options = {}) {
-        const { initialMessage = 'Processing...', completionMessage = 'Complete' } = options;
-        
-        try {
-            this.show(initialMessage);
-            await callback(this);
-            this.setProgress(100);
-            this.setStatus(completionMessage);
-            await new Promise(resolve => setTimeout(resolve, 500));
-        } finally {
-            this.hide();
-        }
-    }
-
-    showSimpleLoading(message = 'Loading...') {
-        this.overlay.style.display = 'flex';
-        this.progressBar.style.display = 'none';
-        this.setStatus(message);
-    }
-
-    restoreProgressBar() {
-        this.progressBar.style.display = 'block';
-    }
-}
-
-const loadingManager = new LoadingManager();
-
-// Media preview handling
-function createVideoPreview(url) {
-    const video = document.createElement('video');
-    video.controls = video.autoplay = video.muted = video.loop = true;
-    video.src = url;
-    return video;
-}
-
-function createImagePreview(url) {
-    const img = document.createElement('img');
-    img.src = url;
-    return img;
-}
-
-function updatePreviewInCard(filePath, file, previewUrl) {
-    const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-    const previewContainer = card?.querySelector('.card-preview');
-    const oldPreview = previewContainer?.querySelector('img, video');
-    
-    if (oldPreview) {
-        const newPreviewUrl = `${previewUrl}?t=${Date.now()}`;
-        const newPreview = file.type.startsWith('video/') 
-            ? createVideoPreview(newPreviewUrl)
-            : createImagePreview(newPreviewUrl);
-        oldPreview.replaceWith(newPreview);
-    }
-}
-
-// Modal management
-class ModalManager {
-    constructor() {
-        this.modals = new Map();
-        this.boundHandleEscape = this.handleEscape.bind(this);
-        
-        // 注册所有模态窗口
-        this.registerModal('loraModal', {
-            element: document.getElementById('loraModal'),
-            onClose: () => {
-                this.getModal('loraModal').element.style.display = 'none';
-                document.body.classList.remove('modal-open');
-            }
-        });
-        
-        this.registerModal('deleteModal', {
-            element: document.getElementById('deleteModal'),
-            onClose: () => {
-                this.getModal('deleteModal').element.classList.remove('show');
-                document.body.classList.remove('modal-open');
-                pendingDeletePath = null;
-            }
-        });
-
-        // 添加全局事件监听
-        document.addEventListener('keydown', this.boundHandleEscape);
-    }
-
-    registerModal(id, config) {
-        this.modals.set(id, {
-            element: config.element,
-            onClose: config.onClose,
-            isOpen: false
-        });
-
-        // 为每个模态窗口添加点击外部关闭事件
-        config.element.addEventListener('click', (e) => {
-            if (e.target === config.element) {
-                this.closeModal(id);
-            }
-        });
-    }
-
-    getModal(id) {
-        return this.modals.get(id);
-    }
-
-    showModal(id, content = null) {
-        const modal = this.getModal(id);
-        if (!modal) return;
-
-        if (content) {
-            modal.element.innerHTML = content;
-        }
-
-        if (id === 'loraModal') {
-            modal.element.style.display = 'block';
-        } else if (id === 'deleteModal') {
-            modal.element.classList.add('show');
-        }
-
-        modal.isOpen = true;
-        document.body.classList.add('modal-open');
-    }
-
-    closeModal(id) {
-        const modal = this.getModal(id);
-        if (!modal) return;
-
-        modal.onClose();
-        modal.isOpen = false;
-    }
-
-    handleEscape(e) {
-        if (e.key === 'Escape') {
-            // 关闭最后打开的模态窗口
-            for (const [id, modal] of this.modals) {
-                if (modal.isOpen) {
-                    this.closeModal(id);
-                    break;
-                }
-            }
-        }
-    }
-}
-
-const modalManager = new ModalManager();
-
-// State management
-let state = {
-    currentPage: 1,
-    isLoading: false,
-    hasMore: true,
-    sortBy: 'name',
-    activeFolder: null,
-    loadingManager: null,
-    observer: null  // 添加 observer 到状态管理中
-};
-
-// Initialize loading manager
-document.addEventListener('DOMContentLoaded', () => {
-    state.loadingManager = new LoadingManager();
-    initializeInfiniteScroll();
-    initializeEventListeners();
-});
-
-// Initialize infinite scroll
-function initializeInfiniteScroll() {
-    // 如果已存在 observer，先断开连接
-    if (state.observer) {
-        state.observer.disconnect();
-    }
-
-    // Create intersection observer for infinite scroll
-    state.observer = new IntersectionObserver(
-        (entries) => {
-            const target = entries[0];
-            if (target.isIntersecting && !state.isLoading && state.hasMore) {
-                loadMoreLoras();
-            }
-        },
-        { threshold: 0.1 }
-    );
-
-    // Add sentinel element for infinite scroll
-    const existingSentinel = document.getElementById('scroll-sentinel');
-    if (existingSentinel) {
-        state.observer.observe(existingSentinel);
-    } else {
-        const sentinel = document.createElement('div');
-        sentinel.id = 'scroll-sentinel';
-        sentinel.style.height = '10px';
-        document.getElementById('loraGrid').appendChild(sentinel);
-        state.observer.observe(sentinel);
-    }
-}
-
-// Initialize event listeners
-function initializeEventListeners() {
-    // Sort select handler
-    const sortSelect = document.getElementById('sortSelect');
-    if (sortSelect) {
-        sortSelect.value = state.sortBy;
-        sortSelect.addEventListener('change', async (e) => {
-            state.sortBy = e.target.value;
-            await resetAndReload();  // 直接重新从后端加载已排序的数据
-        });
-    }
-
-    // Folder filter handler
-    document.querySelectorAll('.folder-tags .tag').forEach(tag => {
-        tag.addEventListener('click', toggleFolder);
-    });
-}
-
-// Load more loras
-async function loadMoreLoras() {
-    if (state.isLoading || !state.hasMore) return;
-    
-    state.isLoading = true;
-    try {
-        // 构建请求参数
-        const params = new URLSearchParams({
-            page: state.currentPage,
-            page_size: 20,
-            sort_by: state.sortBy
-        });
-        
-        // 只在有选中文件夹时添加 folder 参数
-        if (state.activeFolder !== null) {
-            params.append('folder', state.activeFolder);
-        }
-
-        console.log('Loading loras with params:', params.toString()); // 调试日志
-
-        const response = await fetch(`/api/loras?${params}`);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch loras: ${response.statusText}`);
-        }
-        
-        const data = await response.json();
-        console.log('Received data:', data); // 调试日志
-        
-        if (data.items.length === 0 && state.currentPage === 1) {
-            // 如果是第一页且没有数据，显示提示
-            const grid = document.getElementById('loraGrid');
-            grid.innerHTML = '<div class="no-results">No loras found in this folder</div>';
-            state.hasMore = false;
-        } else if (data.items.length > 0) {
-            state.hasMore = state.currentPage < data.total_pages;
-            state.currentPage++;
-            appendLoraCards(data.items);
-            
-            // 确保 sentinel 元素被观察
-            const sentinel = document.getElementById('scroll-sentinel');
-            if (sentinel && state.observer) {
-                state.observer.observe(sentinel);
-            }
-        } else {
-            state.hasMore = false;
-        }
-        
-    } catch (error) {
-        console.error('Error loading loras:', error);
-        showToast('Failed to load loras: ' + error.message, 'error');
-    } finally {
-        state.isLoading = false;
-    }
-}
-
-// Reset and reload
-async function resetAndReload() {
-    console.log('Resetting with state:', { ...state }); // 调试日志
-    
-    state.currentPage = 1;
-    state.hasMore = true;
-    state.isLoading = false;
-    
-    const grid = document.getElementById('loraGrid');
-    grid.innerHTML = ''; // 清空网格
-    
-    // 添加 sentinel
-    const sentinel = document.createElement('div');
-    sentinel.id = 'scroll-sentinel';
-    grid.appendChild(sentinel);
-    
-    // 重新初始化无限滚动
-    initializeInfiniteScroll();
-    
-    await loadMoreLoras();
-}
-
-// Append lora cards
-function appendLoraCards(loras) {
-    const grid = document.getElementById('loraGrid');
-    const sentinel = document.getElementById('scroll-sentinel');
-    
-    loras.forEach(lora => {
-        const card = createLoraCard(lora);
-        grid.insertBefore(card, sentinel);
-    });
-}
-
-// Create lora card
-function createLoraCard(lora) {
-    const card = document.createElement('div');
-    card.className = 'lora-card';
-    card.dataset.sha256 = lora.sha256;
-    card.dataset.filepath = lora.file_path;
-    card.dataset.name = lora.model_name;
-    card.dataset.file_name = lora.file_name;
-    card.dataset.folder = lora.folder;
-    card.dataset.modified = lora.modified;
-    card.dataset.from_civitai = lora.from_civitai;
-    card.dataset.meta = JSON.stringify(lora.civitai || {});
-
-    card.innerHTML = `
-        <div class="card-preview">
-            ${lora.preview_url.endsWith('.mp4') ? 
-                `<video controls autoplay muted loop>
-                    <source src="${lora.preview_url}" type="video/mp4">
-                </video>` :
-                `<img src="${lora.preview_url || '/loras_static/images/no-preview.png'}" alt="${lora.model_name}">`
-            }
-            <div class="card-header">
-                <span class="base-model-label" title="${lora.base_model}">
-                    ${lora.base_model}
-                </span>
-                <div class="card-actions">
-                    <i class="fas fa-globe" 
-                       title="${lora.from_civitai ? 'View on Civitai' : 'Not available from Civitai'}"
-                       ${lora.from_civitai ? 
-                           `onclick="event.stopPropagation(); openCivitai('${lora.model_name}')"` : 
-                           'style="opacity: 0.5; cursor: not-allowed"'}>
-                    </i>
-                    <i class="fas fa-copy" 
-                       title="Copy Model Name"
-                       onclick="event.stopPropagation(); navigator.clipboard.writeText('${lora.file_name}')">
-                    </i>
-                    <i class="fas fa-trash" 
-                       title="Delete Model"
-                       onclick="event.stopPropagation(); deleteModel('${lora.file_path}')">
-                    </i>
-                </div>
-            </div>
-            <div class="card-footer">
-                <div class="model-info">
-                    <span class="model-name">${lora.model_name}</span>
-                </div>
-                <div class="card-actions">
-                    <i class="fas fa-image" 
-                       title="Replace Preview Image"
-                       onclick="event.stopPropagation(); replacePreview('${lora.file_path}')">
-                    </i>
-                </div>
-            </div>
-        </div>
-    `;
-
-    // Add click handler for showing modal
-    card.addEventListener('click', () => {
-        const meta = JSON.parse(card.dataset.meta || '{}');
-        if (Object.keys(meta).length) {
-            showLoraModal(meta);
-        } else {
-            showToast(
-                card.dataset.from_civitai === 'true' ?
-                'Click "Fetch" to retrieve metadata' :
-                'No CivitAI information available',
-                'info'
-            );
-        }
-    });
-
-    return card;
-}
-
-// Refresh loras
-async function refreshLoras() {
-    try {
-        state.loadingManager.showSimpleLoading('Refreshing loras...');
-        await resetAndReload();
-        showToast('Refresh complete', 'success');
-    } catch (error) {
-        console.error('Refresh failed:', error);
-        showToast('Failed to refresh loras', 'error');
-    } finally {
-        state.loadingManager.hide();
-        state.loadingManager.restoreProgressBar();
-    }
-}
-
-// UI interaction functions
-function showLoraModal(lora) {
-    const escapedWords = lora.trainedWords?.length ? 
-        lora.trainedWords.map(word => word.replace(/'/g, '\\\'')) : [];
-
-    // Organize trigger words by categories
-    const categories = {};
-    escapedWords.forEach(word => {
-        const category = word.includes(':') ? word.split(':')[0] : 'General';
-        if (!categories[category]) {
-            categories[category] = [];
-        }
-        categories[category].push(word);
-    });
-        
-    const imageMarkup = lora.images.map(img => {
-        if (img.type === 'video') {
-            return `<video controls autoplay muted loop crossorigin="anonymous" referrerpolicy="no-referrer">
-                     <source src="${img.url}" type="video/mp4">
-                     Your browser does not support the video tag.
-                   </video>`;
-        } else {
-            return `<img src="${img.url}" alt="Preview" 
-                        crossorigin="anonymous" 
-                        referrerpolicy="no-referrer" 
-                        loading="lazy">`;
-        }
-    }).join('');
- 
-    const triggerWordsMarkup = escapedWords.length ? `
-        <div class="trigger-words-container">
-            <div class="trigger-words-title">Trigger Words</div>
-            <div class="trigger-words-tags">
-                ${escapedWords.map(word => `
-                    <div class="trigger-word-tag" onclick="copyTriggerWord('${word}')">
-                        <span class="trigger-word-content">${word}</span>
-                        <span class="trigger-word-copy">
-                            <svg width="14" height="14" viewBox="0 0 24 24">
-                                <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
-                            </svg>
-                        </span>
-                    </div>
-                `).join('')}
-            </div>
-        </div>
-    ` : '<div class="trigger-words-container">No trigger words</div>';
-    
-    const content = `
-        <div class="modal-content">
-            <h2>${lora.model.name}</h2>
-            <div class="carousel">
-                ${imageMarkup}
-            </div>
-            <div class="description">About this version: ${lora.description || 'N/A'}</div>
-            ${triggerWordsMarkup}
-            <div class="model-link">
-                <a href="https://civitai.com/models/${lora.modelId}?modelVersionId=${lora.id}" 
-                   target="_blank">more details on CivitAI</a>
-            </div>
-            <button class="close" onclick="modalManager.closeModal('loraModal')">&times;</button>
-        </div>
-    `;
-    
-    modalManager.showModal('loraModal', content);
-
-    // Add category switching event listeners
-    document.querySelectorAll('.trigger-category').forEach(category => {
-        category.addEventListener('click', function() {
-            const categoryName = this.dataset.category;
-            document.querySelectorAll('.trigger-category').forEach(c => c.classList.remove('active'));
-            this.classList.add('active');
-            
-            const wordsList = document.querySelector('.trigger-words-list');
-            wordsList.innerHTML = categories[categoryName].map(word => `
-                <div class="trigger-word-tag" onclick="copyTriggerWord('${word}')">
-                    <span class="trigger-word-content">${word}</span>
-                    <span class="trigger-word-copy">
-                        <svg width="14" height="14" viewBox="0 0 24 24">
-                            <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
-                        </svg>
-                    </span>
-                </div>
-            `).join('');
-        });
-    });
-}
-
-function filterByFolder(folderPath) {
-    document.querySelectorAll('.lora-card').forEach(card => {
-        card.style.display = card.dataset.folder === folderPath ? '' : 'none';
-    });
-}
-
-// Initialization
-document.addEventListener('DOMContentLoaded', () => {
-    const searchHandler = debounce(term => {
-        document.querySelectorAll('.lora-card').forEach(card => {
-            card.style.display = [card.dataset.name, card.dataset.folder]
-                .some(text => text.toLowerCase().includes(term)) 
-                ? 'block' 
-                : 'none';
-        });
-    }, 250);
-
-    document.getElementById('searchInput')?.addEventListener('input', e => {
-        searchHandler(e.target.value.toLowerCase());
-    });
-
-    document.getElementById('sortSelect')?.addEventListener('change', e => {
-        // 移除这个函数
-        // sortCards(e.target.value);
-    });
-
-    lazyLoadImages();
-    restoreFolderFilter();
-    initializeLoraCards();
-    initTheme();
-});
-
-function initializeLoraCards() {
-    document.querySelectorAll('.lora-card').forEach(card => {
-        card.addEventListener('click', () => {
-            const meta = JSON.parse(card.dataset.meta || '{}');
-            if (Object.keys(meta).length) {
-                showLoraModal(meta);
-            } else {
-                showToast(card.dataset.from_civitai === 'True'
-                    ? 'Click "Fetch" to retrieve metadata'
-                    : 'No CivitAI information available', 'info');
-            }
-        });
-
-        card.querySelector('.fa-copy')?.addEventListener('click', e => {
-            e.stopPropagation();
-            navigator.clipboard.writeText(card.dataset.file_name)
-                .then(() => showToast('Model name copied', 'success'))
-                .catch(() => showToast('Copy failed', 'error'));
-        });
-    });
-}
-
-// Helper functions
-function showToast(message, type = 'info') {
-    const toast = document.createElement('div');
-    toast.className = `toast toast-${type}`;
-    toast.textContent = message;
-    document.body.append(toast);
-
-    requestAnimationFrame(() => {
-        toast.classList.add('show');
-        setTimeout(() => toast.remove(), 2300);
-    });
-}
-
-function lazyLoadImages() {
-    const observer = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting && entry.target.dataset.src) {
-                entry.target.src = entry.target.dataset.src;
-                observer.unobserve(entry.target);
-            }
-        });
-    });
-
-    document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
-}
-
-function restoreFolderFilter() {
-    const activeFolder = localStorage.getItem('activeFolder');
-    const folderTag = activeFolder && document.querySelector(`.tag[data-folder="${activeFolder}"]`);
-    if (folderTag) {
-        folderTag.classList.add('active');
-        filterByFolder(activeFolder);
-    }
-}
-
-function initTheme() {
-    document.body.dataset.theme = localStorage.getItem('theme') || 'dark';
-}
-
-// Theme toggle
-function toggleTheme() {
-    const theme = document.body.dataset.theme === 'light' ? 'dark' : 'light';
-    document.body.dataset.theme = theme;
-    localStorage.setItem('theme', theme);
-}
-
-let pendingDeletePath = null;
-
-function toggleFolder(tag) {
-    // 确保 tag 是 DOM 元素
-    const tagElement = (tag instanceof HTMLElement) ? tag : this;
-    const folder = tagElement.dataset.folder;
-    const wasActive = tagElement.classList.contains('active');
-    
-    // 清除所有标签的激活状态
-    document.querySelectorAll('.folder-tags .tag').forEach(t => {
-        t.classList.remove('active');
-    });
-    
-    if (!wasActive) {
-        // 激活当前标签
-        tagElement.classList.add('active');
-        state.activeFolder = folder;
-    } else {
-        // 取消激活
-        state.activeFolder = null;
-    }
-    
-    // 重置并重新加载数据
-    resetAndReload();
-}
-
-async function confirmDelete() {
-    if (!pendingDeletePath) return;
-    
-    const modal = document.getElementById('deleteModal');
-    const card = document.querySelector(`.lora-card[data-filepath="${pendingDeletePath}"]`);
-    
-    try {
-        const response = await fetch('/api/delete_model', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ 
-                file_path: pendingDeletePath
-            })
-        });
-
-        if (response.ok) {
-            if (card) {
-                card.remove();
-            }
-            closeDeleteModal();
-        } else {
-            const error = await response.text();
-            alert(`Failed to delete model: ${error}`);
-        }
-    } catch (error) {
-        alert(`Error deleting model: ${error}`);
-    }
-}
-
-// Replace the existing deleteModel function with this one
-async function deleteModel(filePath) {
-    showDeleteModal(filePath);
-}
-
-function showDeleteModal(filePath) {
-    event.stopPropagation();
-    pendingDeletePath = filePath;
-    
-    const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-    const modelName = card.dataset.name;
-    const modal = modalManager.getModal('deleteModal').element;
-    const modelInfo = modal.querySelector('.delete-model-info');
-    
-    modelInfo.innerHTML = `
-        <strong>Model:</strong> ${modelName}
-        <br>
-        <strong>File:</strong> ${filePath}
-    `;
-    
-    modalManager.showModal('deleteModal');
-}
-
-function copyTriggerWord(word) {
-    navigator.clipboard.writeText(word).then(() => {
-        const toast = document.createElement('div');
-        toast.className = 'toast toast-copy';
-        toast.textContent = 'Copied!';
-        document.body.appendChild(toast);
-        
-        requestAnimationFrame(() => {
-            toast.classList.add('show');
-            setTimeout(() => {
-                toast.classList.remove('show');
-                setTimeout(() => toast.remove(), 300);
-            }, 1000);
-        });
-    });
-}
-
-function closeDeleteModal() {
-    modalManager.closeModal('deleteModal');
-}
-
-function openCivitai(modelName) {
-    // 从卡片的data-meta属性中获取civitai ID
-    const loraCard = document.querySelector(`.lora-card[data-name="${modelName}"]`);
-    if (!loraCard) return;
-    
-    const metaData = JSON.parse(loraCard.dataset.meta);
-    const civitaiId = metaData.modelId;  // 使用modelId作为civitai模型ID
-    const versionId = metaData.id;       // 使用id作为版本ID
-    
-    // 构建URL
-    if (civitaiId) {
-        let url = `https://civitai.com/models/${civitaiId}`;
-        if (versionId) {
-            url += `?modelVersionId=${versionId}`;
-        }
-        window.open(url, '_blank');
-    } else {
-        // 如果没有ID，尝试使用名称搜索
-        window.open(`https://civitai.com/models?query=${encodeURIComponent(modelName)}`, '_blank');
-    }
-}
-
-async function replacePreview(filePath) {
-    // Get loading elements first
-    const loadingOverlay = document.getElementById('loading-overlay');
-    const loadingStatus = document.querySelector('.loading-status');
-    
-    // Create a file input element
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = 'image/*,video/mp4';  // Accept images and MP4 videos
-    
-    // Handle file selection
-    input.onchange = async function() {
-        if (!input.files || !input.files[0]) return;
-        
-        const file = input.files[0];
-        const formData = new FormData();
-        formData.append('preview_file', file);
-        formData.append('model_path', filePath);
-        
-        try {
-            // Show loading overlay
-            loadingOverlay.style.display = 'flex';
-            loadingStatus.textContent = 'Uploading preview...';
-            
-            const response = await fetch('/api/replace_preview', {
-                method: 'POST',
-                body: formData
-            });
-            
-            if (!response.ok) {
-                throw new Error('Upload failed');
-            }
-
-            const data = await response.json();
-            const newPreviewPath = `${data.preview_url}?t=${new Date().getTime()}`;
-            
-            // Update the preview image in the card
-            const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-            const previewContainer = card.querySelector('.card-preview');
-            const oldPreview = previewContainer.querySelector('img, video');
-            
-            // Create new preview element based on file type
-            if (file.type.startsWith('video/')) {
-                const video = document.createElement('video');
-                video.controls = true;
-                video.autoplay = true;
-                video.muted = true;
-                video.loop = true;
-                video.src = newPreviewPath;
-                oldPreview.replaceWith(video);
-            } else {
-                const img = document.createElement('img');
-                img.src = newPreviewPath;
-                oldPreview.replaceWith(img);
-            }
-            
-        } catch (error) {
-            console.error('Error uploading preview:', error);
-            alert('Failed to upload preview image');
-        } finally {
-            loadingOverlay.style.display = 'none';
-        }
-    };
-    
-    // Trigger file selection
-    input.click();
-}
-
-// Fetch CivitAI metadata for all loras
-async function fetchCivitai() {
-    let ws = null;
-    
-    await state.loadingManager.showWithProgress(async (loading) => {
-        try {
-            // 建立 WebSocket 连接
-            ws = new WebSocket(`ws://${window.location.host}/ws/fetch-progress`);
-            
-            // 等待操作完成的 Promise
-            const operationComplete = new Promise((resolve, reject) => {
-                ws.onmessage = (event) => {
-                    const data = JSON.parse(event.data);
-                    
-                    switch(data.status) {
-                        case 'started':
-                            loading.setStatus('Starting metadata fetch...');
-                            break;
-                            
-                        case 'processing':
-                            const percent = ((data.processed / data.total) * 100).toFixed(1);
-                            loading.setProgress(percent);
-                            loading.setStatus(
-                                `Processing (${data.processed}/${data.total}) ${data.current_name}`
-                            );
-                            break;
-                            
-                        case 'completed':
-                            loading.setProgress(100);
-                            loading.setStatus(
-                                `Completed: Updated ${data.success} of ${data.processed} loras`
-                            );
-                            resolve();  // 完成操作
-                            break;
-                            
-                        case 'error':
-                            reject(new Error(data.error));
-                            break;
-                    }
-                };
-                
-                ws.onerror = (error) => {
-                    reject(new Error('WebSocket error: ' + error.message));
-                };
-            });
-            
-            // 等待 WebSocket 连接建立
-            await new Promise((resolve, reject) => {
-                ws.onopen = resolve;
-                ws.onerror = reject;
-            });
-            
-            // 发起获取请求
-            const response = await fetch('/api/fetch-all-civitai', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' }
-            });
-            
-            if (!response.ok) {
-                throw new Error('Failed to fetch metadata');
-            }
-            
-            // 等待操作完成
-            await operationComplete;
-            
-            // 重置并重新加载当前视图
-            await resetAndReload();
-            
-        } catch (error) {
-            console.error('Error fetching metadata:', error);
-            showToast('Failed to fetch metadata: ' + error.message, 'error');
-        } finally {
-            // 关闭 WebSocket 连接
-            if (ws) {
-                ws.close();
-            }
-        }
-    }, {
-        initialMessage: 'Connecting...',
-        completionMessage: 'Metadata update complete'
-    });
-}

templates/components/controls.html

@@ -23,6 +23,11 @@
         <div class="control-group">
             <button onclick="fetchCivitai()" class="secondary" title="Fetch from Civitai"><i class="fas fa-download"></i> Fetch</button>
         </div>
+        <div class="control-group">
+            <button onclick="downloadManager.showDownloadModal()" title="Download from URL">
+                <i class="fas fa-cloud-download-alt"></i> Download
+            </button>
+        </div>
         <div class="search-container">
             <input type="text" id="searchInput" placeholder="Search models..." />
             <button class="search-mode-toggle" id="searchModeToggle" title="Toggle recursive search in folders">

templates/components/modals.html

@@ -12,4 +12,59 @@
             <button class="delete-btn" onclick="confirmDelete()">Delete</button>
         </div>
     </div>
-</div> 
+</div>
+
+<!-- Download from URL Modal -->
+<div id="downloadModal" class="modal">
+    <div class="modal-content">
+        <button class="close" onclick="modalManager.closeModal('downloadModal')">&times;</button>
+        <h2>Download LoRA from URL</h2>
+        
+        <!-- Step 1: URL Input -->
+        <div class="download-step" id="urlStep">
+            <div class="input-group">
+                <label for="loraUrl">Civitai URL:</label>
+                <input type="text" id="loraUrl" placeholder="https://civitai.com/models/..." />
+                <div class="error-message" id="urlError"></div>
+            </div>
+            <div class="modal-actions">
+                <button class="primary-btn" onclick="downloadManager.validateAndFetchVersions()">Next</button>
+            </div>
+        </div>
+
+        <!-- Step 2: Version Selection -->
+        <div class="download-step" id="versionStep" style="display: none;">
+            <div class="version-list" id="versionList">
+                <!-- Versions will be inserted here -->
+            </div>
+            <div class="modal-actions">
+                <button class="secondary-btn" onclick="downloadManager.backToUrl()">Back</button>
+                <button class="primary-btn" onclick="downloadManager.proceedToLocation()">Next</button>
+            </div>
+        </div>
+
+        <!-- Step 3: Location Selection -->
+        <div class="download-step" id="locationStep" style="display: none;">
+            <div class="location-selection">
+                <div class="input-group">
+                    <label>Select LoRA Root:</label>
+                    <select id="loraRoot"></select>
+                </div>
+                <div class="input-group">
+                    <label>Target Folder:</label>
+                    <div class="folder-browser" id="folderBrowser">
+                        <!-- Folder structure will be inserted here -->
+                    </div>
+                </div>
+                <div class="input-group">
+                    <label for="newFolder">New Folder (optional):</label>
+                    <input type="text" id="newFolder" placeholder="Enter folder name" />
+                </div>
+            </div>
+            <div class="modal-actions">
+                <button class="secondary-btn" onclick="downloadManager.backToVersions()">Back</button>
+                <button class="primary-btn" onclick="downloadManager.startDownload()">Download</button>
+            </div>
+        </div>
+    </div>
+</div>