From cb876cf77ed8746de2191cbf3f59910740ca2a86 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Tue, 29 Apr 2025 16:18:25 +0800
Subject: [PATCH 1/8] Implement saving model example images locally. Fixes
 https://github.com/willmiao/ComfyUI-Lora-Manager/issues/88

---
 py/lora_manager.py                            |  13 +-
 py/routes/api_routes.py                       |  18 +-
 py/routes/misc_routes.py                      | 548 ++++++++++++++++++
 py/routes/usage_stats_routes.py               |  69 ---
 py/utils/constants.py                         |  24 +-
 standalone.py                                 |  17 +-
 static/css/components/modal.css               |  51 ++
 static/css/components/progress-panel.css      | 167 ++++++
 static/css/style.css                          |   1 +
 .../checkpointModal/ShowcaseView.js           | 123 +++-
 static/js/components/checkpointModal/index.js |   2 +-
 .../js/components/loraModal/ShowcaseView.js   | 129 ++++-
 static/js/components/loraModal/index.js       |   2 +-
 static/js/core.js                             |   2 +
 static/js/managers/ExampleImagesManager.js    | 449 ++++++++++++++
 static/js/managers/SettingsManager.js         |   2 +
 templates/base.html                           |   1 +
 templates/components/modals.html              |  51 ++
 templates/components/progress_panel.html      |  48 ++
 web/comfyui/usage_stats.js                    |   2 +-
 20 files changed, 1581 insertions(+), 138 deletions(-)
 create mode 100644 py/routes/misc_routes.py
 delete mode 100644 py/routes/usage_stats_routes.py
 create mode 100644 static/css/components/progress-panel.css
 create mode 100644 static/js/managers/ExampleImagesManager.js
 create mode 100644 templates/components/progress_panel.html

diff --git a/py/lora_manager.py b/py/lora_manager.py
index 2c85e23a..585be382 100644
--- a/py/lora_manager.py
+++ b/py/lora_manager.py
@@ -6,10 +6,12 @@ from .routes.api_routes import ApiRoutes
 from .routes.recipe_routes import RecipeRoutes
 from .routes.checkpoints_routes import CheckpointsRoutes
 from .routes.update_routes import UpdateRoutes
-from .routes.usage_stats_routes import UsageStatsRoutes
+from .routes.misc_routes import MiscRoutes
 from .services.service_registry import ServiceRegistry
+from .services.settings_manager import settings
 import logging
 import sys
+import os
 
 logger = logging.getLogger(__name__)
 
@@ -29,6 +31,13 @@ class LoraManager:
 
         added_targets = set()  # Track already added target paths
         
+        # Add static route for example images if the path exists in settings
+        example_images_path = settings.get('example_images_path')
+        logger.info(f"Example images path: {example_images_path}")
+        if example_images_path and os.path.exists(example_images_path):
+            app.router.add_static('/example_images_static', example_images_path)
+            logger.info(f"Added static route for example images: /example_images_static -> {example_images_path}")
+        
         # Add static routes for each lora root
         for idx, root in enumerate(config.loras_roots, start=1):
             preview_path = f'/loras_static/root{idx}/preview'
@@ -102,7 +111,7 @@ class LoraManager:
         ApiRoutes.setup_routes(app)
         RecipeRoutes.setup_routes(app)
         UpdateRoutes.setup_routes(app)  
-        UsageStatsRoutes.setup_routes(app)  # Register usage stats routes
+        MiscRoutes.setup_routes(app)  # Register miscellaneous routes
         
         # Schedule service initialization 
         app.on_startup.append(lambda app: cls._initialize_services())
diff --git a/py/routes/api_routes.py b/py/routes/api_routes.py
index b235459f..7aa715d5 100644
--- a/py/routes/api_routes.py
+++ b/py/routes/api_routes.py
@@ -55,7 +55,6 @@ class ApiRoutes:
         app.router.add_get('/api/civitai/model/version/{modelVersionId}', routes.get_civitai_model_by_version)
         app.router.add_get('/api/civitai/model/hash/{hash}', routes.get_civitai_model_by_hash)
         app.router.add_post('/api/download-lora', routes.download_lora)
-        app.router.add_post('/api/settings', routes.update_settings)
         app.router.add_post('/api/move_model', routes.move_model)
         app.router.add_get('/api/lora-model-description', routes.get_lora_model_description)  # Add new route
         app.router.add_post('/api/loras/save-metadata', routes.save_metadata)
@@ -515,21 +514,6 @@ class ApiRoutes:
                 logger.error(f"Error downloading LoRA: {error_message}")
                 return web.Response(status=500, text=error_message)
 
-    async def update_settings(self, request: web.Request) -> web.Response:
-        """Update application settings"""
-        try:
-            data = await request.json()
-            
-            # Validate and update settings
-            if 'civitai_api_key' in data:
-                settings.set('civitai_api_key', data['civitai_api_key'])
-            if 'show_only_sfw' in data:
-                settings.set('show_only_sfw', data['show_only_sfw'])
-            
-            return web.json_response({'success': True})
-        except Exception as e:
-            logger.error(f"Error updating settings: {e}", exc_info=True)
-            return web.Response(status=500, text=str(e))
 
     async def move_model(self, request: web.Request) -> web.Response:
         """Handle model move request"""
@@ -1060,4 +1044,4 @@ class ApiRoutes:
             return web.json_response({
                 "success": False,
                 "error": str(e)
-            }, status=500)
\ No newline at end of file
+            }, status=500)
diff --git a/py/routes/misc_routes.py b/py/routes/misc_routes.py
new file mode 100644
index 00000000..bc561529
--- /dev/null
+++ b/py/routes/misc_routes.py
@@ -0,0 +1,548 @@
+import logging
+import os
+import asyncio
+import json
+import time
+import tkinter as tk
+from tkinter import filedialog
+import aiohttp
+from aiohttp import web
+from ..services.settings_manager import settings
+from ..utils.usage_stats import UsageStats
+from ..services.service_registry import ServiceRegistry
+from ..utils.exif_utils import ExifUtils
+from ..utils.constants import EXAMPLE_IMAGE_WIDTH, SUPPORTED_MEDIA_EXTENSIONS
+
+logger = logging.getLogger(__name__)
+
+# Download status tracking
+download_task = None
+is_downloading = False
+download_progress = {
+    'total': 0,
+    'completed': 0,
+    'current_model': '',
+    'status': 'idle',  # idle, running, paused, completed, error
+    'errors': [],
+    'last_error': None,
+    'start_time': None,
+    'end_time': None,
+    'processed_models': set()  # Track models that have been processed
+}
+
+class MiscRoutes:
+    """Miscellaneous routes for various utility functions"""
+    
+    @staticmethod
+    def setup_routes(app):
+        """Register miscellaneous routes"""
+        app.router.add_post('/api/settings', MiscRoutes.update_settings)
+
+        # Usage stats routes
+        app.router.add_post('/api/update-usage-stats', MiscRoutes.update_usage_stats)
+        app.router.add_get('/api/get-usage-stats', MiscRoutes.get_usage_stats)
+        
+        # Example images download routes
+        app.router.add_post('/api/download-example-images', MiscRoutes.download_example_images)
+        app.router.add_get('/api/example-images-status', MiscRoutes.get_example_images_status)
+        app.router.add_post('/api/pause-example-images', MiscRoutes.pause_example_images)
+        app.router.add_post('/api/resume-example-images', MiscRoutes.resume_example_images)
+        
+        # Folder browser route
+        app.router.add_post('/api/browse-folder', MiscRoutes.browse_folder)
+
+    @staticmethod
+    async def update_settings(request):
+        """Update application settings"""
+        try:
+            data = await request.json()
+            
+            # Validate and update settings
+            for key, value in data.items():
+                # Special handling for example_images_path - verify path exists
+                if key == 'example_images_path' and value:
+                    if not os.path.exists(value):
+                        return web.json_response({
+                            'success': False,
+                            'error': f"Path does not exist: {value}"
+                        })
+                    
+                    # Add static route for example images path if it changed
+                    old_path = settings.get('example_images_path')
+                    if old_path != value:
+                        # We need to add the new static route
+                        # Note: we can't remove old routes in aiohttp, but we can create a new one
+                        app = request.app
+                        try:
+                            app.router.add_static('/example_images_static', value)
+                            logger.info(f"Added static route for example images: /example_images_static -> {value}")
+                        except Exception as e:
+                            logger.warning(f"Could not add static route for example images: {str(e)}")
+                
+                # Save to settings
+                settings.set(key, value)
+            
+            return web.json_response({'success': True})
+        except Exception as e:
+            logger.error(f"Error updating settings: {e}", exc_info=True)
+            return web.Response(status=500, text=str(e))
+    
+    @staticmethod
+    async def update_usage_stats(request):
+        """
+        Update usage statistics based on a prompt_id
+        
+        Expects a JSON body with:
+        {
+            "prompt_id": "string"
+        }
+        """
+        try:
+            # Parse the request body
+            data = await request.json()
+            prompt_id = data.get('prompt_id')
+            
+            if not prompt_id:
+                return web.json_response({
+                    'success': False,
+                    'error': 'Missing prompt_id'
+                }, status=400)
+            
+            # Call the UsageStats to process this prompt_id synchronously
+            usage_stats = UsageStats()
+            await usage_stats.process_execution(prompt_id)
+            
+            return web.json_response({
+                'success': True
+            })
+            
+        except Exception as e:
+            logger.error(f"Failed to update usage stats: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)
+    
+    @staticmethod
+    async def get_usage_stats(request):
+        """Get current usage statistics"""
+        try:
+            usage_stats = UsageStats()
+            stats = await usage_stats.get_stats()
+            
+            return web.json_response({
+                'success': True,
+                'data': stats
+            })
+            
+        except Exception as e:
+            logger.error(f"Failed to get usage stats: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)
+    
+    @staticmethod
+    async def download_example_images(request):
+        """
+        Download example images for models from Civitai
+        
+        Expects a JSON body with:
+        {
+            "output_dir": "path/to/output",  # Base directory to save example images
+            "optimize": true,                # Whether to optimize images (default: true)
+            "model_types": ["lora", "checkpoint"], # Model types to process (default: both)
+            "delay": 1.0                     # Delay between downloads to avoid rate limiting (default: 1.0)
+        }
+        """
+        global download_task, is_downloading, download_progress
+        
+        if is_downloading:
+            # Create a copy for JSON serialization
+            response_progress = download_progress.copy()
+            response_progress['processed_models'] = list(download_progress['processed_models'])
+            
+            return web.json_response({
+                'success': False,
+                'error': 'Download already in progress',
+                'status': response_progress
+            }, status=400)
+        
+        try:
+            # Parse the request body
+            data = await request.json()
+            output_dir = data.get('output_dir')
+            optimize = data.get('optimize', True)
+            model_types = data.get('model_types', ['lora', 'checkpoint'])
+            delay = float(data.get('delay', 1.0))
+            
+            if not output_dir:
+                return web.json_response({
+                    'success': False,
+                    'error': 'Missing output_dir parameter'
+                }, status=400)
+            
+            # Create the output directory
+            os.makedirs(output_dir, exist_ok=True)
+            
+            # Initialize progress tracking
+            download_progress['total'] = 0
+            download_progress['completed'] = 0
+            download_progress['current_model'] = ''
+            download_progress['status'] = 'running'
+            download_progress['errors'] = []
+            download_progress['last_error'] = None
+            download_progress['start_time'] = time.time()
+            download_progress['end_time'] = None
+            
+            # Get the processed models list from a file if it exists
+            progress_file = os.path.join(output_dir, '.download_progress.json')
+            if os.path.exists(progress_file):
+                try:
+                    with open(progress_file, 'r', encoding='utf-8') as f:
+                        saved_progress = json.load(f)
+                        download_progress['processed_models'] = set(saved_progress.get('processed_models', []))
+                        logger.info(f"Loaded previous progress, {len(download_progress['processed_models'])} models already processed")
+                except Exception as e:
+                    logger.error(f"Failed to load progress file: {e}")
+                    download_progress['processed_models'] = set()
+            else:
+                download_progress['processed_models'] = set()
+            
+            # Start the download task
+            is_downloading = True
+            download_task = asyncio.create_task(
+                MiscRoutes._download_all_example_images(
+                    output_dir, 
+                    optimize, 
+                    model_types,
+                    delay
+                )
+            )
+            
+            # Create a copy for JSON serialization
+            response_progress = download_progress.copy()
+            response_progress['processed_models'] = list(download_progress['processed_models'])
+            
+            return web.json_response({
+                'success': True,
+                'message': 'Download started',
+                'status': response_progress
+            })
+            
+        except Exception as e:
+            logger.error(f"Failed to start example images download: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)
+
+    @staticmethod
+    async def get_example_images_status(request):
+        """Get the current status of example images download"""
+        global download_progress
+        
+        # Create a copy of the progress dict with the set converted to a list for JSON serialization
+        response_progress = download_progress.copy()
+        response_progress['processed_models'] = list(download_progress['processed_models'])
+        
+        return web.json_response({
+            'success': True,
+            'is_downloading': is_downloading,
+            'status': response_progress
+        })
+
+    @staticmethod
+    async def pause_example_images(request):
+        """Pause the example images download"""
+        global download_progress
+        
+        if not is_downloading:
+            return web.json_response({
+                'success': False,
+                'error': 'No download in progress'
+            }, status=400)
+        
+        download_progress['status'] = 'paused'
+        
+        return web.json_response({
+            'success': True,
+            'message': 'Download paused'
+        })
+
+    @staticmethod
+    async def resume_example_images(request):
+        """Resume the example images download"""
+        global download_progress
+        
+        if not is_downloading:
+            return web.json_response({
+                'success': False,
+                'error': 'No download in progress'
+            }, status=400)
+        
+        if download_progress['status'] == 'paused':
+            download_progress['status'] = 'running'
+            
+            return web.json_response({
+                'success': True,
+                'message': 'Download resumed'
+            })
+        else:
+            return web.json_response({
+                'success': False,
+                'error': f"Download is in '{download_progress['status']}' state, cannot resume"
+            }, status=400)
+
+    @staticmethod
+    async def _download_all_example_images(output_dir, optimize, model_types, delay):
+        """Download example images for all models
+        
+        Args:
+            output_dir: Base directory to save example images
+            optimize: Whether to optimize images
+            model_types: List of model types to process
+            delay: Delay between downloads to avoid rate limiting
+        """
+        global is_downloading, download_progress
+        
+        # Get CivitAI client with proxy support
+        civitai_client = await ServiceRegistry.get_civitai_client()
+        session = await civitai_client.session
+        
+        try:
+            # Get the scanners
+            scanners = []
+            if 'lora' in model_types:
+                lora_scanner = await ServiceRegistry.get_lora_scanner()
+                scanners.append(('lora', lora_scanner))
+            
+            if 'checkpoint' in model_types:
+                checkpoint_scanner = await ServiceRegistry.get_checkpoint_scanner()
+                scanners.append(('checkpoint', checkpoint_scanner))
+            
+            # Get all models from all scanners
+            all_models = []
+            for scanner_type, scanner in scanners:
+                cache = await scanner.get_cached_data()
+                if cache and cache.raw_data:
+                    for model in cache.raw_data:
+                        # Only process models with images and a valid sha256
+                        if model.get('civitai') and model.get('civitai', {}).get('images') and model.get('sha256'):
+                            all_models.append((scanner_type, model))
+            
+            # Update total count
+            download_progress['total'] = len(all_models)
+            logger.info(f"Found {download_progress['total']} models with example images")
+            
+            # Process each model
+            for scanner_type, model in all_models:
+                # Check if download is paused
+                while download_progress['status'] == 'paused':
+                    await asyncio.sleep(1)
+                
+                # Check if download should continue
+                if download_progress['status'] != 'running':
+                    logger.info(f"Download stopped: {download_progress['status']}")
+                    break
+                
+                try:
+                    # Update current model info
+                    model_hash = model.get('sha256', '').lower()
+                    model_name = model.get('model_name', 'Unknown')
+                    download_progress['current_model'] = f"{model_name} ({model_hash[:8]})"
+                    
+                    # Skip if already processed
+                    if model_hash in download_progress['processed_models']:
+                        logger.debug(f"Skipping already processed model: {model_name}")
+                        download_progress['completed'] += 1
+                        continue
+                    
+                    # Create model directory
+                    model_dir = os.path.join(output_dir, model_hash)
+                    os.makedirs(model_dir, exist_ok=True)
+                    
+                    # Process images for this model
+                    images = model.get('civitai', {}).get('images', [])
+                    
+                    if not images:
+                        logger.debug(f"No images found for model: {model_name}")
+                        download_progress['processed_models'].add(model_hash)
+                        download_progress['completed'] += 1
+                        continue
+                    
+                    # Download example images
+                    for i, image in enumerate(images, 1):
+                        image_url = image.get('url')
+                        if not image_url:
+                            continue
+                        
+                        # Get image filename from URL
+                        image_filename = os.path.basename(image_url.split('?')[0])
+                        image_ext = os.path.splitext(image_filename)[1].lower()
+                        
+                        # Handle both images and videos
+                        is_image = image_ext in SUPPORTED_MEDIA_EXTENSIONS['images']
+                        is_video = image_ext in SUPPORTED_MEDIA_EXTENSIONS['videos']
+                        
+                        if not (is_image or is_video):
+                            logger.debug(f"Skipping unsupported file type: {image_filename}")
+                            continue
+                        
+                        save_filename = f"image_{i}{image_ext}"
+                        
+                        # Check if already downloaded
+                        save_path = os.path.join(model_dir, save_filename)
+                        if os.path.exists(save_path):
+                            logger.debug(f"File already exists: {save_path}")
+                            continue
+                        
+                        # Download the file
+                        try:
+                            logger.debug(f"Downloading {save_filename} for {model_name}")
+                            
+                            # Direct download using session from CivitAI client
+                            async with session.get(image_url, timeout=60) as response:
+                                if response.status == 200:
+                                    if is_image and optimize:
+                                        # For images, optimize if requested
+                                        image_data = await response.read()
+                                        optimized_data, ext = ExifUtils.optimize_image(
+                                            image_data, 
+                                            target_width=EXAMPLE_IMAGE_WIDTH, 
+                                            format='webp', 
+                                            quality=85, 
+                                            preserve_metadata=False
+                                        )
+                                        
+                                        # Update save filename if format changed
+                                        if ext == '.webp':
+                                            save_filename = os.path.splitext(save_filename)[0] + '.webp'
+                                            save_path = os.path.join(model_dir, save_filename)
+                                        
+                                        # Save the optimized image
+                                        with open(save_path, 'wb') as f:
+                                            f.write(optimized_data)
+                                    else:
+                                        # For videos or unoptimized images, save directly
+                                        with open(save_path, 'wb') as f:
+                                            async for chunk in response.content.iter_chunked(8192):
+                                                if chunk:
+                                                    f.write(chunk)
+                                else:
+                                    logger.warning(f"Failed to download file: {image_url}, status code: {response.status}")
+                            
+                            # Add a delay between downloads
+                            await asyncio.sleep(delay)
+                        except Exception as e:
+                            error_msg = f"Error downloading file {image_url}: {str(e)}"
+                            logger.error(error_msg)
+                            download_progress['errors'].append(error_msg)
+                            download_progress['last_error'] = error_msg
+                            # Continue with next file
+                    
+                    # Mark model as processed
+                    download_progress['processed_models'].add(model_hash)
+                    
+                    # Save progress to file periodically
+                    if download_progress['completed'] % 10 == 0 or download_progress['completed'] == download_progress['total'] - 1:
+                        progress_file = os.path.join(output_dir, '.download_progress.json')
+                        with open(progress_file, 'w', encoding='utf-8') as f:
+                            json.dump({
+                                'processed_models': list(download_progress['processed_models']),
+                                'completed': download_progress['completed'],
+                                'total': download_progress['total'],
+                                'last_update': time.time()
+                            }, f, indent=2)
+                
+                except Exception as e:
+                    error_msg = f"Error processing model {model.get('model_name')}: {str(e)}"
+                    logger.error(error_msg, exc_info=True)
+                    download_progress['errors'].append(error_msg)
+                    download_progress['last_error'] = error_msg
+                
+                # Update progress
+                download_progress['completed'] += 1
+            
+            # Mark as completed
+            download_progress['status'] = 'completed'
+            download_progress['end_time'] = time.time()
+            logger.info(f"Example images download completed: {download_progress['completed']}/{download_progress['total']} models processed")
+        
+        except Exception as e:
+            error_msg = f"Error during example images download: {str(e)}"
+            logger.error(error_msg, exc_info=True)
+            download_progress['errors'].append(error_msg)
+            download_progress['last_error'] = error_msg
+            download_progress['status'] = 'error'
+            download_progress['end_time'] = time.time()
+        
+        finally:
+            # Save final progress to file
+            try:
+                progress_file = os.path.join(output_dir, '.download_progress.json')
+                with open(progress_file, 'w', encoding='utf-8') as f:
+                    json.dump({
+                        'processed_models': list(download_progress['processed_models']),
+                        'completed': download_progress['completed'],
+                        'total': download_progress['total'],
+                        'last_update': time.time(),
+                        'status': download_progress['status']
+                    }, f, indent=2)
+            except Exception as e:
+                logger.error(f"Failed to save progress file: {e}")
+            
+            # Set download status to not downloading
+            is_downloading = False
+
+    @staticmethod
+    async def browse_folder(request):
+        """Open a folder browser dialog and return the selected path
+        
+        Expects a JSON body with:
+        {
+            "initial_dir": "string" // Optional initial directory
+        }
+        """
+        try:
+            # Parse the request body
+            data = await request.json()
+            initial_dir = data.get('initial_dir', '')
+            
+            # If initial_dir doesn't exist, use a default path
+            if initial_dir and not os.path.isdir(initial_dir):
+                initial_dir = ''
+            
+            # Create a hidden root window for the dialog
+            root = tk.Tk()
+            root.withdraw()  # Hide the root window
+            
+            # Show the folder selection dialog
+            folder_path = filedialog.askdirectory(
+                initialdir=initial_dir,
+                title="Select folder for example images"
+            )
+            
+            # Destroy the root window
+            root.destroy()
+            
+            if folder_path:
+                # Convert to proper path format for the OS
+                folder_path = os.path.normpath(folder_path)
+                
+                return web.json_response({
+                    'success': True,
+                    'folder': folder_path
+                })
+            else:
+                return web.json_response({
+                    'success': False,
+                    'error': 'No folder selected'
+                })
+            
+        except Exception as e:
+            logger.error(f"Failed to browse folder: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)
diff --git a/py/routes/usage_stats_routes.py b/py/routes/usage_stats_routes.py
deleted file mode 100644
index 8a90e6c5..00000000
--- a/py/routes/usage_stats_routes.py
+++ /dev/null
@@ -1,69 +0,0 @@
-import logging
-from aiohttp import web
-from ..utils.usage_stats import UsageStats
-
-logger = logging.getLogger(__name__)
-
-class UsageStatsRoutes:
-    """Routes for handling usage statistics updates"""
-    
-    @staticmethod
-    def setup_routes(app):
-        """Register usage stats routes"""
-        app.router.add_post('/loras/api/update-usage-stats', UsageStatsRoutes.update_usage_stats)
-        app.router.add_get('/loras/api/get-usage-stats', UsageStatsRoutes.get_usage_stats)
-    
-    @staticmethod
-    async def update_usage_stats(request):
-        """
-        Update usage statistics based on a prompt_id
-        
-        Expects a JSON body with:
-        {
-            "prompt_id": "string"
-        }
-        """
-        try:
-            # Parse the request body
-            data = await request.json()
-            prompt_id = data.get('prompt_id')
-            
-            if not prompt_id:
-                return web.json_response({
-                    'success': False,
-                    'error': 'Missing prompt_id'
-                }, status=400)
-            
-            # Call the UsageStats to process this prompt_id synchronously
-            usage_stats = UsageStats()
-            await usage_stats.process_execution(prompt_id)
-            
-            return web.json_response({
-                'success': True
-            })
-            
-        except Exception as e:
-            logger.error(f"Failed to update usage stats: {e}", exc_info=True)
-            return web.json_response({
-                'success': False,
-                'error': str(e)
-            }, status=500)
-    
-    @staticmethod
-    async def get_usage_stats(request):
-        """Get current usage statistics"""
-        try:
-            usage_stats = UsageStats()
-            stats = await usage_stats.get_stats()
-            
-            return web.json_response({
-                'success': True,
-                'data': stats
-            })
-            
-        except Exception as e:
-            logger.error(f"Failed to get usage stats: {e}", exc_info=True)
-            return web.json_response({
-                'success': False,
-                'error': str(e)
-            }, status=500)
diff --git a/py/utils/constants.py b/py/utils/constants.py
index 0521c5d9..4d51e580 100644
--- a/py/utils/constants.py
+++ b/py/utils/constants.py
@@ -8,18 +8,16 @@ NSFW_LEVELS = {
 }
 
 # preview extensions
-PREVIEW_EXTENSIONS = [
-    '.webp',
-    '.preview.webp',
-    '.preview.png', 
-    '.preview.jpeg', 
-    '.preview.jpg', 
-    '.preview.mp4',
-    '.png', 
-    '.jpeg', 
-    '.jpg', 
-    '.mp4'
-]
+PREVIEW_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.webp', '.bmp', '.gif']
 
 # Card preview image width
-CARD_PREVIEW_WIDTH = 480
\ No newline at end of file
+CARD_PREVIEW_WIDTH = 480
+
+# Width for optimized example images
+EXAMPLE_IMAGE_WIDTH = 832
+
+# Supported media extensions for example downloads
+SUPPORTED_MEDIA_EXTENSIONS = {
+    'images': ['.jpg', '.jpeg', '.png', '.webp', '.gif'],
+    'videos': ['.mp4', '.webm']
+}
\ No newline at end of file
diff --git a/standalone.py b/standalone.py
index 61d8cf7f..fe741c19 100644
--- a/standalone.py
+++ b/standalone.py
@@ -127,6 +127,17 @@ class StandaloneServer:
         """Set up basic routes"""
         # Add a simple status endpoint
         self.app.router.add_get('/', self.handle_status)
+        
+        # Add static route for example images if the path exists in settings
+        settings_path = os.path.join(os.path.dirname(__file__), 'settings.json')
+        if os.path.exists(settings_path):
+            with open(settings_path, 'r', encoding='utf-8') as f:
+                settings = json.load(f)
+            example_images_path = settings.get('example_images_path')
+            logger.info(f"Example images path: {example_images_path}")
+            if example_images_path and os.path.exists(example_images_path):
+                self.app.router.add_static('/example_images_static', example_images_path)
+                logger.info(f"Added static route for example images: /example_images_static -> {example_images_path}")
     
     async def handle_status(self, request):
         """Handle status request by redirecting to loras page"""
@@ -283,7 +294,7 @@ class StandaloneLoraManager(LoraManager):
         from py.routes.recipe_routes import RecipeRoutes
         from py.routes.checkpoints_routes import CheckpointsRoutes
         from py.routes.update_routes import UpdateRoutes
-        from py.routes.usage_stats_routes import UsageStatsRoutes
+        from py.routes.misc_routes import MiscRoutes
         
         lora_routes = LoraRoutes()
         checkpoints_routes = CheckpointsRoutes()
@@ -294,7 +305,7 @@ class StandaloneLoraManager(LoraManager):
         ApiRoutes.setup_routes(app)
         RecipeRoutes.setup_routes(app)
         UpdateRoutes.setup_routes(app)
-        UsageStatsRoutes.setup_routes(app)
+        MiscRoutes.setup_routes(app)
         
         # Schedule service initialization
         app.on_startup.append(lambda app: cls._initialize_services())
@@ -344,4 +355,4 @@ if __name__ == "__main__":
         # Run the main function
         asyncio.run(main())
     except KeyboardInterrupt:
-        logger.info("Server stopped by user")
\ No newline at end of file
+        logger.info("Server stopped by user")
diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index 318480e0..36ce62bb 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -496,6 +496,57 @@ input:checked + .toggle-slider:before {
     filter: blur(8px);
 }
 
+/* Example Images Settings Styles */
+.download-buttons {
+    justify-content: flex-start;
+    gap: var(--space-2);
+}
+
+.download-buttons .primary-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background-color: var(--lora-accent);
+    color: var(--lora-text);
+    border: none;
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-size: 0.95em;
+}
+
+.download-buttons .primary-btn:hover {
+    background-color: oklch(var(--lora-accent) / 0.9);
+}
+
+.path-browser-control {
+    display: flex;
+    gap: 8px;
+}
+
+.path-browser-control input[type="text"] {
+    flex: 1;
+}
+
+.browse-btn {
+    white-space: nowrap;
+    padding: 6px 12px;
+    background-color: var(--button-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.browse-btn:hover {
+    background-color: var(--button-hover-bg);
+}
+
+.primary-btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
 /* Add styles for delete preview image */
 .delete-preview {
     max-width: 150px;
diff --git a/static/css/components/progress-panel.css b/static/css/components/progress-panel.css
new file mode 100644
index 00000000..11d085c7
--- /dev/null
+++ b/static/css/components/progress-panel.css
@@ -0,0 +1,167 @@
+/* Progress Panel Styles */
+.progress-panel {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 350px;
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-sm);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: calc(var(--z-modal) - 1);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    opacity: 0;
+    transform: translateY(20px);
+}
+
+.progress-panel.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.progress-panel.collapsed .progress-panel-content {
+    display: none;
+}
+
+.progress-panel.collapsed .progress-panel-header {
+    border-bottom: none;
+}
+
+.progress-panel-header {
+    padding: var(--space-2);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--lora-border);
+}
+
+.progress-panel-title {
+    font-weight: 500;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.progress-panel-actions {
+    display: flex;
+    gap: 6px;
+}
+
+.icon-button {
+    background: none;
+    border: none;
+    color: var(--text-color);
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.6;
+    transition: all 0.2s;
+}
+
+.icon-button:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .icon-button:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.progress-panel-content {
+    padding: var(--space-2);
+}
+
+.download-progress-info {
+    margin-bottom: var(--space-2);
+}
+
+.progress-status {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    font-size: 0.9em;
+    color: var(--text-color);
+}
+
+.progress-container {
+    width: 100%;
+    background-color: var(--lora-border);
+    border-radius: 4px;
+    overflow: hidden;
+    height: var(--space-1);
+}
+
+.progress-bar {
+    width: 0%;
+    height: 100%;
+    background-color: var(--lora-accent);
+    transition: width 0.5s ease;
+}
+
+.current-model-info {
+    background: var(--bg-color);
+    border-radius: var(--border-radius-xs);
+    padding: 8px;
+    margin-bottom: var(--space-2);
+    font-size: 0.95em;
+}
+
+.current-label {
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.7;
+    margin-bottom: 4px;
+}
+
+.current-model-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--text-color);
+}
+
+.download-stats {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--space-2);
+}
+
+.stat-item {
+    font-size: 0.9em;
+    color: var(--text-color);
+}
+
+.stat-label {
+    opacity: 0.7;
+    margin-right: 4px;
+}
+
+.download-errors {
+    background: oklch(var(--lora-warning) / 0.1);
+    border: 1px solid var(--lora-warning);
+    border-radius: var(--border-radius-xs);
+    padding: var(--space-1);
+    max-height: 100px;
+    overflow-y: auto;
+    font-size: 0.85em;
+}
+
+.error-header {
+    color: var(--lora-warning);
+    font-weight: 500;
+    margin-bottom: 4px;
+}
+
+.error-list {
+    color: var(--text-color);
+    opacity: 0.85;
+}
+
+.hidden {
+    display: none !important;
+}
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 21effde0..4e2446c2 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -20,6 +20,7 @@
 @import 'components/shared.css';
 @import 'components/filter-indicator.css';
 @import 'components/initialization.css';
+@import 'components/progress-panel.css';
 
 .initialization-notice {
     display: flex;
diff --git a/static/js/components/checkpointModal/ShowcaseView.js b/static/js/components/checkpointModal/ShowcaseView.js
index 0ee80079..753c58c5 100644
--- a/static/js/components/checkpointModal/ShowcaseView.js
+++ b/static/js/components/checkpointModal/ShowcaseView.js
@@ -6,12 +6,40 @@ import { showToast, copyToClipboard } from '../../utils/uiHelpers.js';
 import { state } from '../../state/index.js';
 import { NSFW_LEVELS } from '../../utils/constants.js';
 
+/**
+ * Get the local URL for an example image if available
+ * @param {Object} img - Image object
+ * @param {number} index - Image index
+ * @param {string} modelHash - Model hash
+ * @returns {string|null} - Local URL or null if not available
+ */
+function getLocalExampleImageUrl(img, index, modelHash) {
+    if (!modelHash) return null;
+    
+    // Get remote extension
+    const remoteExt = (img.url || '').split('?')[0].split('.').pop().toLowerCase();
+    
+    // If it's a video (mp4), use that extension
+    if (remoteExt === 'mp4') {
+        return `/example_images_static/${modelHash}/image_${index + 1}.mp4`;
+    }
+    
+    // For images, check if optimization is enabled (defaults to true) 
+    const optimizeImages = state.settings.optimizeExampleImages !== false;
+    
+    // Use .webp for images if optimization enabled, otherwise use original extension
+    const extension = optimizeImages ? 'webp' : remoteExt;
+    
+    return `/example_images_static/${modelHash}/image_${index + 1}.${extension}`;
+}
+
 /**
  * Render showcase content
  * @param {Array} images - Array of images/videos to show
+ * @param {string} modelHash - Model hash for identifying local files
  * @returns {string} HTML content
  */
-export function renderShowcaseContent(images) {
+export function renderShowcaseContent(images, modelHash) {
     if (!images?.length) return '<div class="no-examples">No example images available</div>';
     
     // Filter images based on SFW setting
@@ -53,7 +81,11 @@ export function renderShowcaseContent(images) {
         <div class="carousel collapsed">
             ${hiddenNotification}
             <div class="carousel-container">
-                ${filteredImages.map(img => generateMediaWrapper(img)).join('')}
+                ${filteredImages.map((img, index) => {
+                    // Try to get local URL for the example image
+                    const localUrl = getLocalExampleImageUrl(img, index, modelHash);
+                    return generateMediaWrapper(img, localUrl);
+                }).join('')}
             </div>
         </div>
     `;
@@ -64,7 +96,7 @@ export function renderShowcaseContent(images) {
  * @param {Object} media - Media object with image or video data
  * @returns {string} HTML content
  */
-function generateMediaWrapper(media) {
+function generateMediaWrapper(media, localUrl = null) {
     // Calculate appropriate aspect ratio:
     // 1. Keep original aspect ratio
     // 2. Limit maximum height to 60% of viewport height
@@ -117,10 +149,10 @@ function generateMediaWrapper(media) {
     
     // Check if this is a video or image
     if (media.type === 'video') {
-        return generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel);
+        return generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl);
     }
     
-    return generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel);
+    return generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl);
 }
 
 /**
@@ -193,7 +225,7 @@ function generateMetadataPanel(hasParams, hasPrompts, prompt, negativePrompt, si
 /**
  * Generate video wrapper HTML
  */
-function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel) {
+function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl = null) {
     return `
         <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%">
             ${shouldBlur ? `
@@ -202,9 +234,11 @@ function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metada
                 </button>
             ` : ''}
             <video controls autoplay muted loop crossorigin="anonymous" 
-                referrerpolicy="no-referrer" data-src="${media.url}"
+                referrerpolicy="no-referrer" 
+                data-local-src="${localUrl || ''}"
+                data-remote-src="${media.url}"
                 class="lazy ${shouldBlur ? 'blurred' : ''}">
-                <source data-src="${media.url}" type="video/mp4">
+                <source data-local-src="${localUrl || ''}" data-remote-src="${media.url}" type="video/mp4">
                 Your browser does not support video playback
             </video>
             ${shouldBlur ? `
@@ -223,7 +257,7 @@ function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metada
 /**
  * Generate image wrapper HTML
  */
-function generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel) {
+function generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl = null) {
     return `
         <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%">
             ${shouldBlur ? `
@@ -231,7 +265,8 @@ function generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metada
                     <i class="fas fa-eye"></i>
                 </button>
             ` : ''}
-            <img data-src="${media.url}" 
+            <img data-local-src="${localUrl || ''}" 
+                data-remote-src="${media.url}"
                 alt="Preview" 
                 crossorigin="anonymous" 
                 referrerpolicy="no-referrer"
@@ -382,15 +417,73 @@ function initLazyLoading(container) {
     const lazyElements = container.querySelectorAll('.lazy');
     
     const lazyLoad = (element) => {
+        const localSrc = element.dataset.localSrc;
+        const remoteSrc = element.dataset.remoteSrc;
+        
+        // Check if element is an image or video
         if (element.tagName.toLowerCase() === 'video') {
-            element.src = element.dataset.src;
-            element.querySelector('source').src = element.dataset.src;
-            element.load();
+            // Try local first, then remote
+            tryLocalOrFallbackToRemote(element, localSrc, remoteSrc);
         } else {
-            element.src = element.dataset.src;
+            // For images, we'll use an Image object to test if local file exists
+            tryLocalImageOrFallbackToRemote(element, localSrc, remoteSrc);
         }
+        
         element.classList.remove('lazy');
     };
+    
+    // Try to load local image first, fall back to remote if local fails
+    const tryLocalImageOrFallbackToRemote = (imgElement, localSrc, remoteSrc) => {
+        // Only try local if we have a local path
+        if (localSrc) {
+            const testImg = new Image();
+            testImg.onload = () => {
+                // Local image loaded successfully
+                imgElement.src = localSrc;
+            };
+            testImg.onerror = () => {
+                // Local image failed, use remote
+                imgElement.src = remoteSrc;
+            };
+            // Start loading test image
+            testImg.src = localSrc;
+        } else {
+            // No local path, use remote directly
+            imgElement.src = remoteSrc;
+        }
+    };
+    
+    // Try to load local video first, fall back to remote if local fails
+    const tryLocalOrFallbackToRemote = (videoElement, localSrc, remoteSrc) => {
+        // Only try local if we have a local path
+        if (localSrc) {
+            // Try to fetch local file headers to see if it exists
+            fetch(localSrc, { method: 'HEAD' })
+                .then(response => {
+                    if (response.ok) {
+                        // Local video exists, use it
+                        videoElement.src = localSrc;
+                        videoElement.querySelector('source').src = localSrc;
+                    } else {
+                        // Local video doesn't exist, use remote
+                        videoElement.src = remoteSrc;
+                        videoElement.querySelector('source').src = remoteSrc;
+                    }
+                    videoElement.load();
+                })
+                .catch(() => {
+                    // Error fetching, use remote
+                    videoElement.src = remoteSrc;
+                    videoElement.querySelector('source').src = remoteSrc;
+                    videoElement.load();
+                });
+        } else {
+            // No local path, use remote directly
+            videoElement.src = remoteSrc;
+            videoElement.querySelector('source').src = remoteSrc;
+            videoElement.load();
+        }
+    };
 
     const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
@@ -485,4 +578,4 @@ export function scrollToTop(button) {
             behavior: 'smooth'
         });
     }
-}
\ No newline at end of file
+}
diff --git a/static/js/components/checkpointModal/index.js b/static/js/components/checkpointModal/index.js
index 9212d57b..1066b49e 100644
--- a/static/js/components/checkpointModal/index.js
+++ b/static/js/components/checkpointModal/index.js
@@ -96,7 +96,7 @@ export function showCheckpointModal(checkpoint) {
                     
                     <div class="tab-content">
                         <div id="showcase-tab" class="tab-pane active">
-                            ${renderShowcaseContent(checkpoint.civitai?.images || [])}
+                            ${renderShowcaseContent(checkpoint.civitai?.images || [], checkpoint.sha256)}
                         </div>
                         
                         <div id="description-tab" class="tab-pane">
diff --git a/static/js/components/loraModal/ShowcaseView.js b/static/js/components/loraModal/ShowcaseView.js
index 9bd7ee3d..66024aee 100644
--- a/static/js/components/loraModal/ShowcaseView.js
+++ b/static/js/components/loraModal/ShowcaseView.js
@@ -6,12 +6,40 @@ import { showToast, copyToClipboard } from '../../utils/uiHelpers.js';
 import { state } from '../../state/index.js';
 import { NSFW_LEVELS } from '../../utils/constants.js';
 
+/**
+ * Get the local URL for an example image if available
+ * @param {Object} img - Image object
+ * @param {number} index - Image index
+ * @param {string} modelHash - Model hash
+ * @returns {string|null} - Local URL or null if not available
+ */
+function getLocalExampleImageUrl(img, index, modelHash) {
+    if (!modelHash) return null;
+    
+    // Get remote extension
+    const remoteExt = (img.url || '').split('?')[0].split('.').pop().toLowerCase();
+    
+    // If it's a video (mp4), use that extension
+    if (remoteExt === 'mp4') {
+        return `/example_images_static/${modelHash}/image_${index + 1}.mp4`;
+    }
+    
+    // For images, check if optimization is enabled (defaults to true) 
+    const optimizeImages = state.settings.optimizeExampleImages !== false;
+    
+    // Use .webp for images if optimization enabled, otherwise use original extension
+    const extension = optimizeImages ? 'webp' : remoteExt;
+    
+    return `/example_images_static/${modelHash}/image_${index + 1}.${extension}`;
+}
+
 /**
  * 渲染展示内容
  * @param {Array} images - 要展示的图片/视频数组
+ * @param {string} modelHash - Model hash for identifying local files
  * @returns {string} HTML内容
  */
-export function renderShowcaseContent(images) {
+export function renderShowcaseContent(images, modelHash) {
     if (!images?.length) return '<div class="no-examples">No example images available</div>';
     
     // Filter images based on SFW setting
@@ -53,7 +81,15 @@ export function renderShowcaseContent(images) {
         <div class="carousel collapsed">
             ${hiddenNotification}
             <div class="carousel-container">
-                ${filteredImages.map(img => {
+                ${filteredImages.map((img, index) => {
+                    // Try to get local URL for the example image
+                    const localUrl = getLocalExampleImageUrl(img, index, modelHash);
+                    
+                    // Create data attributes for both remote and local URLs
+                    const remoteUrl = img.url;
+                    const dataRemoteSrc = remoteUrl;
+                    const dataLocalSrc = localUrl;
+                    
                     // 计算适当的展示高度：
                     // 1. 保持原始宽高比
                     // 2. 限制最大高度为视窗高度的60%
@@ -111,9 +147,9 @@ export function renderShowcaseContent(images) {
                         `;
                         
                         if (img.type === 'video') {
-                            return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+                            return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, dataLocalSrc, dataRemoteSrc);
                         }
-                        return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+                        return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, dataLocalSrc, dataRemoteSrc);
                     }
                     
                     // Create a data attribute with the prompt for copying instead of trying to handle it in the onclick
@@ -174,9 +210,9 @@ export function renderShowcaseContent(images) {
                     `;
                     
                     if (img.type === 'video') {
-                        return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+                        return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, dataLocalSrc, dataRemoteSrc);
                     }
-                    return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+                    return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, dataLocalSrc, dataRemoteSrc);
                 }).join('')}
             </div>
         </div>
@@ -186,7 +222,7 @@ export function renderShowcaseContent(images) {
 /**
  * 生成视频包装HTML
  */
-function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel) {
+function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl) {
     return `
         <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%">
             ${shouldBlur ? `
@@ -195,9 +231,11 @@ function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadata
                 </button>
             ` : ''}
             <video controls autoplay muted loop crossorigin="anonymous" 
-                referrerpolicy="no-referrer" data-src="${img.url}"
+                referrerpolicy="no-referrer" 
+                data-local-src="${localUrl || ''}"
+                data-remote-src="${remoteUrl}"
                 class="lazy ${shouldBlur ? 'blurred' : ''}">
-                <source data-src="${img.url}" type="video/mp4">
+                <source data-local-src="${localUrl || ''}" data-remote-src="${remoteUrl}" type="video/mp4">
                 Your browser does not support video playback
             </video>
             ${shouldBlur ? `
@@ -216,7 +254,7 @@ function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadata
 /**
  * 生成图片包装HTML
  */
-function generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel) {
+function generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl) {
     return `
         <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%">
             ${shouldBlur ? `
@@ -224,7 +262,8 @@ function generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadata
                     <i class="fas fa-eye"></i>
                 </button>
             ` : ''}
-            <img data-src="${img.url}" 
+            <img data-local-src="${localUrl || ''}" 
+                data-remote-src="${remoteUrl}"
                 alt="Preview" 
                 crossorigin="anonymous" 
                 referrerpolicy="no-referrer"
@@ -392,15 +431,73 @@ function initLazyLoading(container) {
     const lazyElements = container.querySelectorAll('.lazy');
     
     const lazyLoad = (element) => {
+        const localSrc = element.dataset.localSrc;
+        const remoteSrc = element.dataset.remoteSrc;
+        
+        // Check if element is an image or video
         if (element.tagName.toLowerCase() === 'video') {
-            element.src = element.dataset.src;
-            element.querySelector('source').src = element.dataset.src;
-            element.load();
+            // Try local first, then remote
+            tryLocalOrFallbackToRemote(element, localSrc, remoteSrc);
         } else {
-            element.src = element.dataset.src;
+            // For images, we'll use an Image object to test if local file exists
+            tryLocalImageOrFallbackToRemote(element, localSrc, remoteSrc);
         }
+        
         element.classList.remove('lazy');
     };
+    
+    // Try to load local image first, fall back to remote if local fails
+    const tryLocalImageOrFallbackToRemote = (imgElement, localSrc, remoteSrc) => {
+        // Only try local if we have a local path
+        if (localSrc) {
+            const testImg = new Image();
+            testImg.onload = () => {
+                // Local image loaded successfully
+                imgElement.src = localSrc;
+            };
+            testImg.onerror = () => {
+                // Local image failed, use remote
+                imgElement.src = remoteSrc;
+            };
+            // Start loading test image
+            testImg.src = localSrc;
+        } else {
+            // No local path, use remote directly
+            imgElement.src = remoteSrc;
+        }
+    };
+    
+    // Try to load local video first, fall back to remote if local fails
+    const tryLocalOrFallbackToRemote = (videoElement, localSrc, remoteSrc) => {
+        // Only try local if we have a local path
+        if (localSrc) {
+            // Try to fetch local file headers to see if it exists
+            fetch(localSrc, { method: 'HEAD' })
+                .then(response => {
+                    if (response.ok) {
+                        // Local video exists, use it
+                        videoElement.src = localSrc;
+                        videoElement.querySelector('source').src = localSrc;
+                    } else {
+                        // Local video doesn't exist, use remote
+                        videoElement.src = remoteSrc;
+                        videoElement.querySelector('source').src = remoteSrc;
+                    }
+                    videoElement.load();
+                })
+                .catch(() => {
+                    // Error fetching, use remote
+                    videoElement.src = remoteSrc;
+                    videoElement.querySelector('source').src = remoteSrc;
+                    videoElement.load();
+                });
+        } else {
+            // No local path, use remote directly
+            videoElement.src = remoteSrc;
+            videoElement.querySelector('source').src = remoteSrc;
+            videoElement.load();
+        }
+    };
 
     const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
@@ -497,4 +594,4 @@ export function scrollToTop(button) {
             behavior: 'smooth'
         });
     }
-}
\ No newline at end of file
+}
diff --git a/static/js/components/loraModal/index.js b/static/js/components/loraModal/index.js
index db9b41e5..458edd27 100644
--- a/static/js/components/loraModal/index.js
+++ b/static/js/components/loraModal/index.js
@@ -122,7 +122,7 @@ export function showLoraModal(lora) {
                     
                     <div class="tab-content">
                         <div id="showcase-tab" class="tab-pane active">
-                            ${renderShowcaseContent(lora.civitai?.images)}
+                            ${renderShowcaseContent(lora.civitai?.images, lora.sha256)}
                         </div>
                         
                         <div id="description-tab" class="tab-pane">
diff --git a/static/js/core.js b/static/js/core.js
index b1edac3c..2fdf4e35 100644
--- a/static/js/core.js
+++ b/static/js/core.js
@@ -5,6 +5,7 @@ import { modalManager } from './managers/ModalManager.js';
 import { updateService } from './managers/UpdateService.js';
 import { HeaderManager } from './components/Header.js';
 import { settingsManager } from './managers/SettingsManager.js';
+import { exampleImagesManager } from './managers/ExampleImagesManager.js';
 import { showToast, initTheme, initBackToTop, lazyLoadImages } from './utils/uiHelpers.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { migrateStorageItems } from './utils/storageHelpers.js';
@@ -27,6 +28,7 @@ export class AppCore {
         updateService.initialize();
         window.modalManager = modalManager;
         window.settingsManager = settingsManager;
+        window.exampleImagesManager = exampleImagesManager;
         
         // Initialize UI components
         window.headerManager = new HeaderManager();
diff --git a/static/js/managers/ExampleImagesManager.js b/static/js/managers/ExampleImagesManager.js
new file mode 100644
index 00000000..1ac36a66
--- /dev/null
+++ b/static/js/managers/ExampleImagesManager.js
@@ -0,0 +1,449 @@
+import { showToast } from '../utils/uiHelpers.js';
+import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js';
+
+// ExampleImagesManager.js
+class ExampleImagesManager {
+    constructor() {
+        this.isDownloading = false;
+        this.isPaused = false;
+        this.progressUpdateInterval = null;
+        this.startTime = null;
+        this.progressPanel = document.getElementById('exampleImagesProgress');
+        
+        // Wait for DOM before initializing event listeners
+        document.addEventListener('DOMContentLoaded', () => this.initEventListeners());
+        
+        // Initialize download path field
+        this.initializePathOptions();
+        
+        // Check download status on page load
+        this.checkDownloadStatus();
+    }
+    
+    // Initialize event listeners for buttons
+    initEventListeners() {
+        const startBtn = document.getElementById('startExampleDownloadBtn');
+        if (startBtn) {
+            startBtn.onclick = () => this.startDownload();
+        }
+        
+        const resumeBtn = document.getElementById('resumeExampleDownloadBtn');
+        if (resumeBtn) {
+            resumeBtn.onclick = () => this.resumeDownload();
+        }
+    }
+    
+    async initializePathOptions() {
+        try {
+            // Get custom path input element
+            const pathInput = document.getElementById('exampleImagesPath');
+
+            // Set path from storage if available
+            const savedPath = getStorageItem('example_images_path', '');
+            if (savedPath) {
+                pathInput.value = savedPath;
+                // Enable download button if path is set
+                this.updateDownloadButtonState(true);
+            } else {
+                // Disable download button if no path is set
+                this.updateDownloadButtonState(false);
+            }
+            
+            // Add event listener to the browse button
+            const browseButton = document.getElementById('browseExampleImagesPath');
+            if (browseButton) {
+                browseButton.addEventListener('click', () => this.browseFolderDialog());
+            }
+            
+            // Add event listener to validate path input
+            pathInput.addEventListener('input', async () => {
+                const hasPath = pathInput.value.trim() !== '';
+                this.updateDownloadButtonState(hasPath);
+                
+                // Save path to storage when changed
+                if (hasPath) {
+                    setStorageItem('example_images_path', pathInput.value);
+                    
+                    // Update path in backend settings
+                    try {
+                        const response = await fetch('/api/settings', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                                example_images_path: pathInput.value
+                            })
+                        });
+                        
+                        if (!response.ok) {
+                            throw new Error(`HTTP error! Status: ${response.status}`);
+                        }
+                        
+                        const data = await response.json();
+                        if (!data.success) {
+                            console.error('Failed to update example images path in backend:', data.error);
+                        } else {
+                            showToast('Example images path updated successfully', 'success');
+                        }
+                    } catch (error) {
+                        console.error('Failed to update example images path:', error);
+                    }
+                }
+            });
+        } catch (error) {
+            console.error('Failed to initialize path options:', error);
+        }
+    }
+    
+    // Method to update download button state
+    updateDownloadButtonState(enabled) {
+        const startBtn = document.getElementById('startExampleDownloadBtn');
+        if (startBtn) {
+            if (enabled) {
+                startBtn.classList.remove('disabled');
+                startBtn.disabled = false;
+            } else {
+                startBtn.classList.add('disabled');
+                startBtn.disabled = true;
+            }
+        }
+    }
+    
+    // Method to open folder browser dialog
+    async browseFolderDialog() {
+        try {
+            const response = await fetch('/api/browse-folder', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    initial_dir: getStorageItem('example_images_path', '')
+                })
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            
+            const data = await response.json();
+            
+            if (data.success && data.folder) {
+                const pathInput = document.getElementById('exampleImagesPath');
+                pathInput.value = data.folder;
+                setStorageItem('example_images_path', data.folder);
+                this.updateDownloadButtonState(true);
+                showToast('Example images path updated successfully', 'success');
+            }
+        } catch (error) {
+            console.error('Failed to browse folder:', error);
+            showToast('Failed to browse folder. Please ensure the server supports this feature.', 'error');
+        }
+    }
+    
+    async checkDownloadStatus() {
+        try {
+            const response = await fetch('/api/example-images-status');
+            const data = await response.json();
+            
+            if (data.success) {
+                this.isDownloading = data.is_downloading;
+                this.isPaused = data.status.status === 'paused';
+                
+                if (this.isDownloading) {
+                    this.updateUI(data.status);
+                    this.showProgressPanel();
+                    
+                    // Start the progress update interval if downloading
+                    if (!this.progressUpdateInterval) {
+                        this.startProgressUpdates();
+                    }
+                }
+            }
+        } catch (error) {
+            console.error('Failed to check download status:', error);
+        }
+    }
+    
+    async startDownload() {
+        if (this.isDownloading) {
+            showToast('Download already in progress', 'warning');
+            return;
+        }
+        
+        try {
+            const outputDir = document.getElementById('exampleImagesPath').value || '';
+            
+            if (!outputDir) {
+                showToast('Please select a download location first', 'warning');
+                return;
+            }
+            
+            const optimize = document.getElementById('optimizeExampleImages').checked;
+            
+            const response = await fetch('/api/download-example-images', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    output_dir: outputDir,
+                    optimize: optimize,
+                    model_types: ['lora', 'checkpoint']
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                this.isDownloading = true;
+                this.isPaused = false;
+                this.startTime = new Date();
+                this.updateUI(data.status);
+                this.showProgressPanel();
+                this.startProgressUpdates();
+                showToast('Example images download started', 'success');
+                
+                // Hide the start button, show resume button
+                document.getElementById('startExampleDownloadBtn').style.display = 'none';
+                
+                // Close settings modal
+                modalManager.closeModal('settingsModal');
+            } else {
+                showToast(data.error || 'Failed to start download', 'error');
+            }
+        } catch (error) {
+            console.error('Failed to start download:', error);
+            showToast('Failed to start download', 'error');
+        }
+    }
+    
+    async pauseDownload() {
+        if (!this.isDownloading || this.isPaused) {
+            return;
+        }
+        
+        try {
+            const response = await fetch('/api/pause-example-images', {
+                method: 'POST'
+            });
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                this.isPaused = true;
+                document.getElementById('downloadStatusText').textContent = 'Paused';
+                document.getElementById('pauseExampleDownloadBtn').innerHTML = '<i class="fas fa-play"></i>';
+                document.getElementById('pauseExampleDownloadBtn').onclick = () => this.resumeDownload();
+                showToast('Download paused', 'info');
+                
+                // Show resume button in settings too
+                document.getElementById('resumeExampleDownloadBtn').style.display = 'block';
+            } else {
+                showToast(data.error || 'Failed to pause download', 'error');
+            }
+        } catch (error) {
+            console.error('Failed to pause download:', error);
+            showToast('Failed to pause download', 'error');
+        }
+    }
+    
+    async resumeDownload() {
+        if (!this.isDownloading || !this.isPaused) {
+            return;
+        }
+        
+        try {
+            const response = await fetch('/api/resume-example-images', {
+                method: 'POST'
+            });
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                this.isPaused = false;
+                document.getElementById('downloadStatusText').textContent = 'Downloading';
+                document.getElementById('pauseExampleDownloadBtn').innerHTML = '<i class="fas fa-pause"></i>';
+                document.getElementById('pauseExampleDownloadBtn').onclick = () => this.pauseDownload();
+                showToast('Download resumed', 'success');
+                
+                // Hide resume button in settings
+                document.getElementById('resumeExampleDownloadBtn').style.display = 'none';
+            } else {
+                showToast(data.error || 'Failed to resume download', 'error');
+            }
+        } catch (error) {
+            console.error('Failed to resume download:', error);
+            showToast('Failed to resume download', 'error');
+        }
+    }
+    
+    startProgressUpdates() {
+        // Clear any existing interval
+        if (this.progressUpdateInterval) {
+            clearInterval(this.progressUpdateInterval);
+        }
+        
+        // Set new interval to update progress every 2 seconds
+        this.progressUpdateInterval = setInterval(async () => {
+            await this.updateProgress();
+        }, 2000);
+    }
+    
+    async updateProgress() {
+        try {
+            const response = await fetch('/api/example-images-status');
+            const data = await response.json();
+            
+            if (data.success) {
+                this.isDownloading = data.is_downloading;
+                
+                if (this.isDownloading) {
+                    this.updateUI(data.status);
+                } else {
+                    // Download completed or failed
+                    clearInterval(this.progressUpdateInterval);
+                    this.progressUpdateInterval = null;
+                    
+                    if (data.status.status === 'completed') {
+                        showToast('Example images download completed', 'success');
+                        // Hide the panel after a delay
+                        setTimeout(() => this.hideProgressPanel(), 5000);
+                    } else if (data.status.status === 'error') {
+                        showToast('Example images download failed', 'error');
+                    }
+                    
+                    // Reset UI
+                    document.getElementById('startExampleDownloadBtn').style.display = 'block';
+                    document.getElementById('resumeExampleDownloadBtn').style.display = 'none';
+                }
+            }
+        } catch (error) {
+            console.error('Failed to update progress:', error);
+        }
+    }
+    
+    updateUI(status) {
+        // Update status text
+        const statusText = document.getElementById('downloadStatusText');
+        statusText.textContent = this.getStatusText(status.status);
+        
+        // Update progress counts and bar
+        const progressCounts = document.getElementById('downloadProgressCounts');
+        progressCounts.textContent = `${status.completed}/${status.total}`;
+        
+        const progressBar = document.getElementById('downloadProgressBar');
+        const progressPercent = status.total > 0 ? (status.completed / status.total) * 100 : 0;
+        progressBar.style.width = `${progressPercent}%`;
+        
+        // Update current model
+        const currentModel = document.getElementById('currentModelName');
+        currentModel.textContent = status.current_model || '-';
+        
+        // Update time stats
+        this.updateTimeStats(status);
+        
+        // Update errors
+        this.updateErrors(status);
+        
+        // Update pause/resume button
+        if (status.status === 'paused') {
+            document.getElementById('pauseExampleDownloadBtn').innerHTML = '<i class="fas fa-play"></i>';
+            document.getElementById('pauseExampleDownloadBtn').onclick = () => this.resumeDownload();
+            document.getElementById('resumeExampleDownloadBtn').style.display = 'block';
+        } else {
+            document.getElementById('pauseExampleDownloadBtn').innerHTML = '<i class="fas fa-pause"></i>';
+            document.getElementById('pauseExampleDownloadBtn').onclick = () => this.pauseDownload();
+            document.getElementById('resumeExampleDownloadBtn').style.display = 'none';
+        }
+    }
+    
+    updateTimeStats(status) {
+        const elapsedTime = document.getElementById('elapsedTime');
+        const remainingTime = document.getElementById('remainingTime');
+        
+        // Calculate elapsed time
+        let elapsed;
+        if (status.start_time) {
+            const now = new Date();
+            const startTime = new Date(status.start_time * 1000);
+            elapsed = Math.floor((now - startTime) / 1000);
+        } else {
+            elapsed = 0;
+        }
+        
+        elapsedTime.textContent = this.formatTime(elapsed);
+        
+        // Calculate remaining time
+        if (status.total > 0 && status.completed > 0 && status.status === 'running') {
+            const rate = status.completed / elapsed; // models per second
+            const remaining = Math.floor((status.total - status.completed) / rate);
+            remainingTime.textContent = this.formatTime(remaining);
+        } else {
+            remainingTime.textContent = '--:--:--';
+        }
+    }
+    
+    updateErrors(status) {
+        const errorContainer = document.getElementById('downloadErrorContainer');
+        const errorList = document.getElementById('downloadErrors');
+        
+        if (status.errors && status.errors.length > 0) {
+            // Show only the last 3 errors
+            const recentErrors = status.errors.slice(-3);
+            errorList.innerHTML = recentErrors.map(error => 
+                `<div class="error-item">${error}</div>`
+            ).join('');
+            
+            errorContainer.classList.remove('hidden');
+        } else {
+            errorContainer.classList.add('hidden');
+        }
+    }
+    
+    formatTime(seconds) {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = seconds % 60;
+        
+        return [
+            hours.toString().padStart(2, '0'),
+            minutes.toString().padStart(2, '0'),
+            secs.toString().padStart(2, '0')
+        ].join(':');
+    }
+    
+    getStatusText(status) {
+        switch (status) {
+            case 'running': return 'Downloading';
+            case 'paused': return 'Paused';
+            case 'completed': return 'Completed';
+            case 'error': return 'Error';
+            default: return 'Initializing';
+        }
+    }
+    
+    showProgressPanel() {
+        this.progressPanel.classList.add('visible');
+    }
+    
+    hideProgressPanel() {
+        this.progressPanel.classList.remove('visible');
+    }
+    
+    toggleProgressPanel() {
+        this.progressPanel.classList.toggle('collapsed');
+        
+        // Update icon
+        const icon = document.querySelector('#collapseProgressBtn i');
+        if (this.progressPanel.classList.contains('collapsed')) {
+            icon.className = 'fas fa-chevron-up';
+        } else {
+            icon.className = 'fas fa-chevron-down';
+        }
+    }
+}
+
+// Create singleton instance
+export const exampleImagesManager = new ExampleImagesManager();
diff --git a/static/js/managers/SettingsManager.js b/static/js/managers/SettingsManager.js
index eff5655a..8bfdf9c8 100644
--- a/static/js/managers/SettingsManager.js
+++ b/static/js/managers/SettingsManager.js
@@ -147,6 +147,8 @@ export class SettingsManager {
             state.global.settings.show_only_sfw = value;
         } else if (settingKey === 'autoplay_on_hover') {
             state.global.settings.autoplayOnHover = value;
+        } else if (settingKey === 'optimize_example_images') {
+            state.global.settings.optimizeExampleImages = value;
         } else {
             // For any other settings that might be added in the future
             state.global.settings[settingKey] = value;
diff --git a/templates/base.html b/templates/base.html
index 201c16b0..3ed78e79 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -73,6 +73,7 @@
         {% include 'components/modals.html' %}
         {% include 'components/loading.html' %}
         {% include 'components/context_menu.html' %}
+        {% include 'components/progress_panel.html' %}
         {% block additional_components %}{% endblock %}
 
         <div class="container">
diff --git a/templates/components/modals.html b/templates/components/modals.html
index aec1246a..3d17faa8 100644
--- a/templates/components/modals.html
+++ b/templates/components/modals.html
@@ -125,6 +125,57 @@
                     </div>
                 </div>
             </div>
+            
+            <!-- Add Example Images Settings Section -->
+            <div class="settings-section">
+                <h3>Example Images</h3>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="exampleImagesPath">Download Location</label>
+                        </div>
+                        <div class="setting-control path-browser-control">
+                            <input type="text" id="exampleImagesPath" placeholder="Select a folder for example images" />
+                            <button id="browseExampleImagesPath" class="browse-btn">
+                                <i class="fas fa-folder-open"></i> Browse
+                            </button>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Choose where to save example images downloaded from Civitai
+                    </div>
+                </div>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="optimizeExampleImages">Optimize Downloaded Images</label>
+                        </div>
+                        <div class="setting-control">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="optimizeExampleImages" checked 
+                                       onchange="settingsManager.saveToggleSetting('optimizeExampleImages', 'optimize_example_images')">
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Optimize example images to reduce file size and improve loading speed
+                    </div>
+                </div>
+                
+                <div class="setting-item">
+                    <div class="setting-row download-buttons">
+                        <button id="startExampleDownloadBtn" class="primary-btn disabled">
+                            <i class="fas fa-download"></i> Download Example Images
+                        </button>
+                        <button id="resumeExampleDownloadBtn" class="primary-btn" style="display: none;">
+                            <i class="fas fa-play"></i> Resume Download
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/templates/components/progress_panel.html b/templates/components/progress_panel.html
new file mode 100644
index 00000000..7fd23739
--- /dev/null
+++ b/templates/components/progress_panel.html
@@ -0,0 +1,48 @@
+<!-- Example Images Download Progress Panel -->
+<div id="exampleImagesProgress" class="progress-panel">
+    <div class="progress-panel-header">
+        <div class="progress-panel-title">
+            <i class="fas fa-images"></i> Example Images Download
+        </div>
+        <div class="progress-panel-actions">
+            <button id="pauseExampleDownloadBtn" class="icon-button" onclick="exampleImagesManager.pauseDownload()">
+                <i class="fas fa-pause"></i>
+            </button>
+            <button id="collapseProgressBtn" class="icon-button" onclick="exampleImagesManager.toggleProgressPanel()">
+                <i class="fas fa-chevron-down"></i>
+            </button>
+        </div>
+    </div>
+    <div class="progress-panel-content">
+        <div class="download-progress-info">
+            <div class="progress-status">
+                <span id="downloadStatusText">Initializing...</span>
+                <span id="downloadProgressCounts">0/0</span>
+            </div>
+            <div class="progress-container">
+                <div id="downloadProgressBar" class="progress-bar" style="width: 0%;"></div>
+            </div>
+        </div>
+        
+        <div class="current-model-info">
+            <div class="current-label">Currently downloading:</div>
+            <div id="currentModelName" class="current-model-name">-</div>
+        </div>
+        
+        <div class="download-stats">
+            <div class="stat-item">
+                <span class="stat-label">Elapsed:</span>
+                <span id="elapsedTime" class="stat-value">00:00:00</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-label">Remaining:</span>
+                <span id="remainingTime" class="stat-value">--:--:--</span>
+            </div>
+        </div>
+        
+        <div id="downloadErrorContainer" class="download-errors hidden">
+            <div class="error-header">Recent Errors:</div>
+            <div id="downloadErrors" class="error-list"></div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/web/comfyui/usage_stats.js b/web/comfyui/usage_stats.js
index aa77aef7..20676d71 100644
--- a/web/comfyui/usage_stats.js
+++ b/web/comfyui/usage_stats.js
@@ -18,7 +18,7 @@ app.registerExtension({
     async updateUsageStats(promptId) {
         try {
             // Call backend endpoint with the prompt_id
-            const response = await fetch(`/loras/api/update-usage-stats`, {
+            const response = await fetch(`/api/update-usage-stats`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',

From 26d9a9caa6febecf891dddfbae79bd16354ddfca Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 30 Apr 2025 13:20:44 +0800
Subject: [PATCH 2/8] refactor: streamline example images download
 functionality and UI updates

---
 py/routes/misc_routes.py                   |  68 +------
 static/css/components/download-modal.css   |   8 -
 static/css/components/modal.css            |  84 ++++++--
 static/css/components/progress-panel.css   |   5 +-
 static/js/managers/ExampleImagesManager.js | 216 ++++++++++++---------
 templates/components/modals.html           |  21 +-
 templates/components/progress_panel.html   |  31 ++-
 7 files changed, 235 insertions(+), 198 deletions(-)

diff --git a/py/routes/misc_routes.py b/py/routes/misc_routes.py
index bc561529..588df51b 100644
--- a/py/routes/misc_routes.py
+++ b/py/routes/misc_routes.py
@@ -48,9 +48,6 @@ class MiscRoutes:
         app.router.add_post('/api/pause-example-images', MiscRoutes.pause_example_images)
         app.router.add_post('/api/resume-example-images', MiscRoutes.resume_example_images)
         
-        # Folder browser route
-        app.router.add_post('/api/browse-folder', MiscRoutes.browse_folder)
-
     @staticmethod
     async def update_settings(request):
         """Update application settings"""
@@ -67,17 +64,10 @@ class MiscRoutes:
                             'error': f"Path does not exist: {value}"
                         })
                     
-                    # Add static route for example images path if it changed
+                    # Path changed - server restart required for new path to take effect
                     old_path = settings.get('example_images_path')
                     if old_path != value:
-                        # We need to add the new static route
-                        # Note: we can't remove old routes in aiohttp, but we can create a new one
-                        app = request.app
-                        try:
-                            app.router.add_static('/example_images_static', value)
-                            logger.info(f"Added static route for example images: /example_images_static -> {value}")
-                        except Exception as e:
-                            logger.warning(f"Could not add static route for example images: {str(e)}")
+                        logger.info(f"Example images path changed to {value} - server restart required")
                 
                 # Save to settings
                 settings.set(key, value)
@@ -174,7 +164,7 @@ class MiscRoutes:
             output_dir = data.get('output_dir')
             optimize = data.get('optimize', True)
             model_types = data.get('model_types', ['lora', 'checkpoint'])
-            delay = float(data.get('delay', 1.0))
+            delay = float(data.get('delay', 0.2))
             
             if not output_dir:
                 return web.json_response({
@@ -494,55 +484,3 @@ class MiscRoutes:
             
             # Set download status to not downloading
             is_downloading = False
-
-    @staticmethod
-    async def browse_folder(request):
-        """Open a folder browser dialog and return the selected path
-        
-        Expects a JSON body with:
-        {
-            "initial_dir": "string" // Optional initial directory
-        }
-        """
-        try:
-            # Parse the request body
-            data = await request.json()
-            initial_dir = data.get('initial_dir', '')
-            
-            # If initial_dir doesn't exist, use a default path
-            if initial_dir and not os.path.isdir(initial_dir):
-                initial_dir = ''
-            
-            # Create a hidden root window for the dialog
-            root = tk.Tk()
-            root.withdraw()  # Hide the root window
-            
-            # Show the folder selection dialog
-            folder_path = filedialog.askdirectory(
-                initialdir=initial_dir,
-                title="Select folder for example images"
-            )
-            
-            # Destroy the root window
-            root.destroy()
-            
-            if folder_path:
-                # Convert to proper path format for the OS
-                folder_path = os.path.normpath(folder_path)
-                
-                return web.json_response({
-                    'success': True,
-                    'folder': folder_path
-                })
-            else:
-                return web.json_response({
-                    'success': False,
-                    'error': 'No folder selected'
-                })
-            
-        except Exception as e:
-            logger.error(f"Failed to browse folder: {e}", exc_info=True)
-            return web.json_response({
-                'success': False,
-                'error': str(e)
-            }, status=500)
diff --git a/static/css/components/download-modal.css b/static/css/components/download-modal.css
index e220a104..80f5b1c3 100644
--- a/static/css/components/download-modal.css
+++ b/static/css/components/download-modal.css
@@ -190,14 +190,6 @@
     border-color: var(--lora-border);
 }
 
-/* Add disabled button styles */
-.primary-btn.disabled {
-    background-color: var(--border-color);
-    color: var(--text-color);
-    opacity: 0.7;
-    cursor: not-allowed;
-}
-
 /* Enhance the local badge to make it more noticeable */
 .version-item.exists-locally {
     background: oklch(var(--lora-accent) / 0.05);
diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index 36ce62bb..e51ba923 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -502,7 +502,7 @@ input:checked + .toggle-slider:before {
     gap: var(--space-2);
 }
 
-.download-buttons .primary-btn {
+.primary-btn {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -516,30 +516,80 @@ input:checked + .toggle-slider:before {
     font-size: 0.95em;
 }
 
-.download-buttons .primary-btn:hover {
-    background-color: oklch(var(--lora-accent) / 0.9);
+.primary-btn:hover {
+    background-color: oklch(from var(--lora-accent) l c h / 85%);
+    color: var(--lora-text);
 }
 
-.path-browser-control {
+/* Secondary button styles */
+.secondary-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.95em;
+}
+
+.secondary-btn:hover {
+    background-color: var(--border-color);
+    color: var(--text-color);
+}
+
+/* Disabled button styles */
+.primary-btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--lora-accent);
+    color: var(--lora-text);
+    pointer-events: none;
+}
+
+.secondary-btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* Dark theme specific button adjustments */
+[data-theme="dark"] .primary-btn:hover {
+    background-color: oklch(from var(--lora-accent) l c h / 75%);
+}
+
+[data-theme="dark"] .secondary-btn {
+    background-color: var(--lora-surface);
+}
+
+[data-theme="dark"] .secondary-btn:hover {
+    background-color: oklch(35% 0.02 256 / 0.98);
+}
+
+.primary-btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.path-control {
     display: flex;
     gap: 8px;
+    align-items: center;
+    width: 100%;
 }
 
-.path-browser-control input[type="text"] {
+.path-control input[type="text"] {
     flex: 1;
-}
-
-.browse-btn {
-    white-space: nowrap;
-    padding: 6px 12px;
-    background-color: var(--button-bg);
+    padding: 6px 10px;
+    border-radius: var(--border-radius-xs);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.browse-btn:hover {
-    background-color: var(--button-hover-bg);
+    background-color: var(--lora-surface);
+    color: var(--text-color);
+    font-size: 0.95em;
+    height: 32px;
 }
 
 .primary-btn.disabled {
diff --git a/static/css/components/progress-panel.css b/static/css/components/progress-panel.css
index 11d085c7..2b24ff34 100644
--- a/static/css/components/progress-panel.css
+++ b/static/css/components/progress-panel.css
@@ -88,7 +88,8 @@
     color: var(--text-color);
 }
 
-.progress-container {
+/* Use specific selectors to avoid conflicts with loading.css */
+.progress-panel .progress-container {
     width: 100%;
     background-color: var(--lora-border);
     border-radius: 4px;
@@ -96,7 +97,7 @@
     height: var(--space-1);
 }
 
-.progress-bar {
+.progress-panel .progress-bar {
     width: 0%;
     height: 100%;
     background-color: var(--lora-accent);
diff --git a/static/js/managers/ExampleImagesManager.js b/static/js/managers/ExampleImagesManager.js
index 1ac36a66..19ca8795 100644
--- a/static/js/managers/ExampleImagesManager.js
+++ b/static/js/managers/ExampleImagesManager.js
@@ -8,10 +8,14 @@ class ExampleImagesManager {
         this.isPaused = false;
         this.progressUpdateInterval = null;
         this.startTime = null;
-        this.progressPanel = document.getElementById('exampleImagesProgress');
+        this.progressPanel = null;
         
         // Wait for DOM before initializing event listeners
-        document.addEventListener('DOMContentLoaded', () => this.initEventListeners());
+        document.addEventListener('DOMContentLoaded', () => {
+            this.initEventListeners();
+            // Initialize progress panel reference
+            this.progressPanel = document.getElementById('exampleImagesProgress');
+        });
         
         // Initialize download path field
         this.initializePathOptions();
@@ -22,14 +26,9 @@ class ExampleImagesManager {
     
     // Initialize event listeners for buttons
     initEventListeners() {
-        const startBtn = document.getElementById('startExampleDownloadBtn');
-        if (startBtn) {
-            startBtn.onclick = () => this.startDownload();
-        }
-        
-        const resumeBtn = document.getElementById('resumeExampleDownloadBtn');
-        if (resumeBtn) {
-            resumeBtn.onclick = () => this.resumeDownload();
+        const downloadBtn = document.getElementById('exampleImagesDownloadBtn');
+        if (downloadBtn) {
+            downloadBtn.onclick = () => this.handleDownloadButton();
         }
     }
     
@@ -49,12 +48,6 @@ class ExampleImagesManager {
                 this.updateDownloadButtonState(false);
             }
             
-            // Add event listener to the browse button
-            const browseButton = document.getElementById('browseExampleImagesPath');
-            if (browseButton) {
-                browseButton.addEventListener('click', () => this.browseFolderDialog());
-            }
-            
             // Add event listener to validate path input
             pathInput.addEventListener('input', async () => {
                 const hasPath = pathInput.value.trim() !== '';
@@ -98,47 +91,29 @@ class ExampleImagesManager {
     
     // Method to update download button state
     updateDownloadButtonState(enabled) {
-        const startBtn = document.getElementById('startExampleDownloadBtn');
-        if (startBtn) {
+        const downloadBtn = document.getElementById('exampleImagesDownloadBtn');
+        if (downloadBtn) {
             if (enabled) {
-                startBtn.classList.remove('disabled');
-                startBtn.disabled = false;
+                downloadBtn.classList.remove('disabled');
+                downloadBtn.disabled = false;
             } else {
-                startBtn.classList.add('disabled');
-                startBtn.disabled = true;
+                downloadBtn.classList.add('disabled');
+                downloadBtn.disabled = true;
             }
         }
     }
     
-    // Method to open folder browser dialog
-    async browseFolderDialog() {
-        try {
-            const response = await fetch('/api/browse-folder', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    initial_dir: getStorageItem('example_images_path', '')
-                })
-            });
-            
-            if (!response.ok) {
-                throw new Error(`HTTP error! Status: ${response.status}`);
-            }
-            
-            const data = await response.json();
-            
-            if (data.success && data.folder) {
-                const pathInput = document.getElementById('exampleImagesPath');
-                pathInput.value = data.folder;
-                setStorageItem('example_images_path', data.folder);
-                this.updateDownloadButtonState(true);
-                showToast('Example images path updated successfully', 'success');
-            }
-        } catch (error) {
-            console.error('Failed to browse folder:', error);
-            showToast('Failed to browse folder. Please ensure the server supports this feature.', 'error');
+    // Method to handle download button click based on current state
+    async handleDownloadButton() {
+        if (this.isDownloading && this.isPaused) {
+            // If download is paused, resume it
+            this.resumeDownload();
+        } else if (!this.isDownloading) {
+            // If no download in progress, start a new one
+            this.startDownload();
+        } else {
+            // If download is in progress, show info toast
+            showToast('Download already in progress', 'info');
         }
     }
     
@@ -151,13 +126,27 @@ class ExampleImagesManager {
                 this.isDownloading = data.is_downloading;
                 this.isPaused = data.status.status === 'paused';
                 
+                // Update download button text based on status
+                this.updateDownloadButtonText();
+                
                 if (this.isDownloading) {
-                    this.updateUI(data.status);
-                    this.showProgressPanel();
+                    // Ensure progress panel exists before updating UI
+                    if (!this.progressPanel) {
+                        this.progressPanel = document.getElementById('exampleImagesProgress');
+                    }
                     
-                    // Start the progress update interval if downloading
-                    if (!this.progressUpdateInterval) {
-                        this.startProgressUpdates();
+                    if (this.progressPanel) {
+                        this.updateUI(data.status);
+                        this.showProgressPanel();
+                        
+                        // Start the progress update interval if downloading
+                        if (!this.progressUpdateInterval) {
+                            this.startProgressUpdates();
+                        }
+                    } else {
+                        console.warn('Progress panel not found, will retry on next update');
+                        // Set a shorter timeout to try again
+                        setTimeout(() => this.checkDownloadStatus(), 500);
                     }
                 }
             }
@@ -166,6 +155,18 @@ class ExampleImagesManager {
         }
     }
     
+    // Update download button text based on current state
+    updateDownloadButtonText() {
+        const btnTextElement = document.getElementById('exampleDownloadBtnText');
+        if (btnTextElement) {
+            if (this.isDownloading && this.isPaused) {
+                btnTextElement.textContent = "Resume";
+            } else if (!this.isDownloading) {
+                btnTextElement.textContent = "Download";
+            }
+        }
+    }
+    
     async startDownload() {
         if (this.isDownloading) {
             showToast('Download already in progress', 'warning');
@@ -176,7 +177,7 @@ class ExampleImagesManager {
             const outputDir = document.getElementById('exampleImagesPath').value || '';
             
             if (!outputDir) {
-                showToast('Please select a download location first', 'warning');
+                showToast('Please enter a download location first', 'warning');
                 return;
             }
             
@@ -203,11 +204,9 @@ class ExampleImagesManager {
                 this.updateUI(data.status);
                 this.showProgressPanel();
                 this.startProgressUpdates();
+                this.updateDownloadButtonText();
                 showToast('Example images download started', 'success');
                 
-                // Hide the start button, show resume button
-                document.getElementById('startExampleDownloadBtn').style.display = 'none';
-                
                 // Close settings modal
                 modalManager.closeModal('settingsModal');
             } else {
@@ -236,10 +235,8 @@ class ExampleImagesManager {
                 document.getElementById('downloadStatusText').textContent = 'Paused';
                 document.getElementById('pauseExampleDownloadBtn').innerHTML = '<i class="fas fa-play"></i>';
                 document.getElementById('pauseExampleDownloadBtn').onclick = () => this.resumeDownload();
+                this.updateDownloadButtonText();
                 showToast('Download paused', 'info');
-                
-                // Show resume button in settings too
-                document.getElementById('resumeExampleDownloadBtn').style.display = 'block';
             } else {
                 showToast(data.error || 'Failed to pause download', 'error');
             }
@@ -266,10 +263,8 @@ class ExampleImagesManager {
                 document.getElementById('downloadStatusText').textContent = 'Downloading';
                 document.getElementById('pauseExampleDownloadBtn').innerHTML = '<i class="fas fa-pause"></i>';
                 document.getElementById('pauseExampleDownloadBtn').onclick = () => this.pauseDownload();
+                this.updateDownloadButtonText();
                 showToast('Download resumed', 'success');
-                
-                // Hide resume button in settings
-                document.getElementById('resumeExampleDownloadBtn').style.display = 'none';
             } else {
                 showToast(data.error || 'Failed to resume download', 'error');
             }
@@ -298,6 +293,10 @@ class ExampleImagesManager {
             
             if (data.success) {
                 this.isDownloading = data.is_downloading;
+                this.isPaused = data.status.status === 'paused';
+                
+                // Update download button text
+                this.updateDownloadButtonText();
                 
                 if (this.isDownloading) {
                     this.updateUI(data.status);
@@ -313,10 +312,6 @@ class ExampleImagesManager {
                     } else if (data.status.status === 'error') {
                         showToast('Example images download failed', 'error');
                     }
-                    
-                    // Reset UI
-                    document.getElementById('startExampleDownloadBtn').style.display = 'block';
-                    document.getElementById('resumeExampleDownloadBtn').style.display = 'none';
                 }
             }
         } catch (error) {
@@ -325,21 +320,38 @@ class ExampleImagesManager {
     }
     
     updateUI(status) {
+        // Ensure progress panel exists
+        if (!this.progressPanel) {
+            this.progressPanel = document.getElementById('exampleImagesProgress');
+            if (!this.progressPanel) {
+                console.error('Progress panel element not found in DOM');
+                return;
+            }
+        }
+        
         // Update status text
         const statusText = document.getElementById('downloadStatusText');
-        statusText.textContent = this.getStatusText(status.status);
+        if (statusText) {
+            statusText.textContent = this.getStatusText(status.status);
+        }
         
         // Update progress counts and bar
         const progressCounts = document.getElementById('downloadProgressCounts');
-        progressCounts.textContent = `${status.completed}/${status.total}`;
+        if (progressCounts) {
+            progressCounts.textContent = `${status.completed}/${status.total}`;
+        }
         
         const progressBar = document.getElementById('downloadProgressBar');
-        const progressPercent = status.total > 0 ? (status.completed / status.total) * 100 : 0;
-        progressBar.style.width = `${progressPercent}%`;
+        if (progressBar) {
+            const progressPercent = status.total > 0 ? (status.completed / status.total) * 100 : 0;
+            progressBar.style.width = `${progressPercent}%`;
+        }
         
         // Update current model
         const currentModel = document.getElementById('currentModelName');
-        currentModel.textContent = status.current_model || '-';
+        if (currentModel) {
+            currentModel.textContent = status.current_model || '-';
+        }
         
         // Update time stats
         this.updateTimeStats(status);
@@ -348,14 +360,21 @@ class ExampleImagesManager {
         this.updateErrors(status);
         
         // Update pause/resume button
-        if (status.status === 'paused') {
-            document.getElementById('pauseExampleDownloadBtn').innerHTML = '<i class="fas fa-play"></i>';
-            document.getElementById('pauseExampleDownloadBtn').onclick = () => this.resumeDownload();
-            document.getElementById('resumeExampleDownloadBtn').style.display = 'block';
-        } else {
-            document.getElementById('pauseExampleDownloadBtn').innerHTML = '<i class="fas fa-pause"></i>';
-            document.getElementById('pauseExampleDownloadBtn').onclick = () => this.pauseDownload();
-            document.getElementById('resumeExampleDownloadBtn').style.display = 'none';
+        const pauseBtn = document.getElementById('pauseExampleDownloadBtn');
+        const resumeBtn = document.getElementById('resumeExampleDownloadBtn');
+        
+        if (pauseBtn) {
+            if (status.status === 'paused') {
+                pauseBtn.innerHTML = '<i class="fas fa-play"></i>';
+                pauseBtn.onclick = () => this.resumeDownload();
+            } else {
+                pauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
+                pauseBtn.onclick = () => this.pauseDownload();
+            }
+        }
+        
+        if (resumeBtn) {
+            resumeBtn.style.display = status.status === 'paused' ? 'block' : 'none';
         }
     }
     
@@ -363,6 +382,8 @@ class ExampleImagesManager {
         const elapsedTime = document.getElementById('elapsedTime');
         const remainingTime = document.getElementById('remainingTime');
         
+        if (!elapsedTime || !remainingTime) return;
+        
         // Calculate elapsed time
         let elapsed;
         if (status.start_time) {
@@ -389,6 +410,8 @@ class ExampleImagesManager {
         const errorContainer = document.getElementById('downloadErrorContainer');
         const errorList = document.getElementById('downloadErrors');
         
+        if (!errorContainer || !errorList) return;
+        
         if (status.errors && status.errors.length > 0) {
             // Show only the last 3 errors
             const recentErrors = status.errors.slice(-3);
@@ -425,22 +448,41 @@ class ExampleImagesManager {
     }
     
     showProgressPanel() {
+        // Ensure progress panel exists
+        if (!this.progressPanel) {
+            this.progressPanel = document.getElementById('exampleImagesProgress');
+            if (!this.progressPanel) {
+                console.error('Progress panel element not found in DOM');
+                return;
+            }
+        }
         this.progressPanel.classList.add('visible');
     }
     
     hideProgressPanel() {
+        if (!this.progressPanel) {
+            this.progressPanel = document.getElementById('exampleImagesProgress');
+            if (!this.progressPanel) return;
+        }
         this.progressPanel.classList.remove('visible');
     }
     
     toggleProgressPanel() {
+        if (!this.progressPanel) {
+            this.progressPanel = document.getElementById('exampleImagesProgress');
+            if (!this.progressPanel) return;
+        }
+        
         this.progressPanel.classList.toggle('collapsed');
         
         // Update icon
         const icon = document.querySelector('#collapseProgressBtn i');
-        if (this.progressPanel.classList.contains('collapsed')) {
-            icon.className = 'fas fa-chevron-up';
-        } else {
-            icon.className = 'fas fa-chevron-down';
+        if (icon) {
+            if (this.progressPanel.classList.contains('collapsed')) {
+                icon.className = 'fas fa-chevron-up';
+            } else {
+                icon.className = 'fas fa-chevron-down';
+            }
         }
     }
 }
diff --git a/templates/components/modals.html b/templates/components/modals.html
index 3d17faa8..e3f1946e 100644
--- a/templates/components/modals.html
+++ b/templates/components/modals.html
@@ -135,15 +135,15 @@
                         <div class="setting-info">
                             <label for="exampleImagesPath">Download Location</label>
                         </div>
-                        <div class="setting-control path-browser-control">
-                            <input type="text" id="exampleImagesPath" placeholder="Select a folder for example images" />
-                            <button id="browseExampleImagesPath" class="browse-btn">
-                                <i class="fas fa-folder-open"></i> Browse
+                        <div class="setting-control path-control">
+                            <input type="text" id="exampleImagesPath" placeholder="Enter folder path for example images" />
+                            <button id="exampleImagesDownloadBtn" class="primary-btn">
+                                <i class="fas fa-download"></i> <span id="exampleDownloadBtnText">Download</span>
                             </button>
                         </div>
                     </div>
                     <div class="input-help">
-                        Choose where to save example images downloaded from Civitai
+                        Enter the folder path where example images from Civitai will be saved
                     </div>
                 </div>
                 
@@ -164,17 +164,6 @@
                         Optimize example images to reduce file size and improve loading speed
                     </div>
                 </div>
-                
-                <div class="setting-item">
-                    <div class="setting-row download-buttons">
-                        <button id="startExampleDownloadBtn" class="primary-btn disabled">
-                            <i class="fas fa-download"></i> Download Example Images
-                        </button>
-                        <button id="resumeExampleDownloadBtn" class="primary-btn" style="display: none;">
-                            <i class="fas fa-play"></i> Resume Download
-                        </button>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
diff --git a/templates/components/progress_panel.html b/templates/components/progress_panel.html
index 7fd23739..78553814 100644
--- a/templates/components/progress_panel.html
+++ b/templates/components/progress_panel.html
@@ -5,10 +5,10 @@
             <i class="fas fa-images"></i> Example Images Download
         </div>
         <div class="progress-panel-actions">
-            <button id="pauseExampleDownloadBtn" class="icon-button" onclick="exampleImagesManager.pauseDownload()">
+            <button id="pauseExampleDownloadBtn" class="icon-button">
                 <i class="fas fa-pause"></i>
             </button>
-            <button id="collapseProgressBtn" class="icon-button" onclick="exampleImagesManager.toggleProgressPanel()">
+            <button id="collapseProgressBtn" class="icon-button">
                 <i class="fas fa-chevron-down"></i>
             </button>
         </div>
@@ -45,4 +45,29 @@
             <div id="downloadErrors" class="error-list"></div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<script>
+    // Initialize button onclick handlers when DOM is fully loaded
+    document.addEventListener('DOMContentLoaded', function() {
+        const pauseBtn = document.getElementById('pauseExampleDownloadBtn');
+        const collapseBtn = document.getElementById('collapseProgressBtn');
+        
+        // Make window.exampleImagesManager globally available
+        if (window.exampleImagesManager === undefined && typeof exampleImagesManager !== 'undefined') {
+            window.exampleImagesManager = exampleImagesManager;
+        }
+        
+        if (pauseBtn && window.exampleImagesManager) {
+            pauseBtn.onclick = () => window.exampleImagesManager.pauseDownload();
+        }
+        
+        if (collapseBtn && window.exampleImagesManager) {
+            collapseBtn.onclick = () => {
+                if (window.exampleImagesManager.toggleProgressPanel) {
+                    window.exampleImagesManager.toggleProgressPanel();
+                }
+            };
+        }
+    });
+</script>
\ No newline at end of file

From f36febf10a64dc9bca52859ec5baa788e5ddbf6c Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 30 Apr 2025 13:35:12 +0800
Subject: [PATCH 3/8] fix: create independent session for downloading example
 images to prevent interference

---
 py/routes/misc_routes.py | 46 ++++++++++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/py/routes/misc_routes.py b/py/routes/misc_routes.py
index 588df51b..ca974a9e 100644
--- a/py/routes/misc_routes.py
+++ b/py/routes/misc_routes.py
@@ -296,9 +296,22 @@ class MiscRoutes:
         """
         global is_downloading, download_progress
         
-        # Get CivitAI client with proxy support
-        civitai_client = await ServiceRegistry.get_civitai_client()
-        session = await civitai_client.session
+        # Create an independent session for downloading example images
+        # This avoids interference with the CivitAI client's session
+        connector = aiohttp.TCPConnector(
+            ssl=True,
+            limit=3,
+            force_close=False,
+            enable_cleanup_closed=True
+        )
+        timeout = aiohttp.ClientTimeout(total=None, connect=60, sock_read=60)
+        
+        # Create a dedicated session just for this download task
+        independent_session = aiohttp.ClientSession(
+            connector=connector,
+            trust_env=True,
+            timeout=timeout
+        )
         
         try:
             # Get the scanners
@@ -336,6 +349,8 @@ class MiscRoutes:
                     logger.info(f"Download stopped: {download_progress['status']}")
                     break
                 
+                model_success = True  # Track if all images for this model download successfully
+                
                 try:
                     # Update current model info
                     model_hash = model.get('sha256', '').lower()
@@ -391,8 +406,8 @@ class MiscRoutes:
                         try:
                             logger.debug(f"Downloading {save_filename} for {model_name}")
                             
-                            # Direct download using session from CivitAI client
-                            async with session.get(image_url, timeout=60) as response:
+                            # Direct download using the independent session
+                            async with independent_session.get(image_url, timeout=60) as response:
                                 if response.status == 200:
                                     if is_image and optimize:
                                         # For images, optimize if requested
@@ -420,7 +435,11 @@ class MiscRoutes:
                                                 if chunk:
                                                     f.write(chunk)
                                 else:
-                                    logger.warning(f"Failed to download file: {image_url}, status code: {response.status}")
+                                    error_msg = f"Failed to download file: {image_url}, status code: {response.status}"
+                                    logger.warning(error_msg)
+                                    download_progress['errors'].append(error_msg)
+                                    download_progress['last_error'] = error_msg
+                                    model_success = False  # Mark model as failed
                             
                             # Add a delay between downloads
                             await asyncio.sleep(delay)
@@ -429,10 +448,13 @@ class MiscRoutes:
                             logger.error(error_msg)
                             download_progress['errors'].append(error_msg)
                             download_progress['last_error'] = error_msg
-                            # Continue with next file
+                            model_success = False  # Mark model as failed
                     
-                    # Mark model as processed
-                    download_progress['processed_models'].add(model_hash)
+                    # Only mark model as processed if all images downloaded successfully
+                    if model_success:
+                        download_progress['processed_models'].add(model_hash)
+                    else:
+                        logger.warning(f"Model {model_name} had download errors, will not mark as completed")
                     
                     # Save progress to file periodically
                     if download_progress['completed'] % 10 == 0 or download_progress['completed'] == download_progress['total'] - 1:
@@ -468,6 +490,12 @@ class MiscRoutes:
             download_progress['end_time'] = time.time()
         
         finally:
+            # Close the independent session
+            try:
+                await independent_session.close()
+            except Exception as e:
+                logger.error(f"Error closing download session: {e}")
+                
             # Save final progress to file
             try:
                 progress_file = os.path.join(output_dir, '.download_progress.json')

From cb5e64d26bbe2add67bbcc3aa714fda79210f06e Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 30 Apr 2025 13:56:29 +0800
Subject: [PATCH 4/8] feat: enhance example images downloading by adding local
 file processing before remote download

---
 py/routes/misc_routes.py | 190 ++++++++++++++++++++++++++++-----------
 1 file changed, 136 insertions(+), 54 deletions(-)

diff --git a/py/routes/misc_routes.py b/py/routes/misc_routes.py
index ca974a9e..376ac380 100644
--- a/py/routes/misc_routes.py
+++ b/py/routes/misc_routes.py
@@ -355,6 +355,8 @@ class MiscRoutes:
                     # Update current model info
                     model_hash = model.get('sha256', '').lower()
                     model_name = model.get('model_name', 'Unknown')
+                    model_file_path = model.get('file_path', '')
+                    model_file_name = model.get('file_name', '')
                     download_progress['current_model'] = f"{model_name} ({model_hash[:8]})"
                     
                     # Skip if already processed
@@ -376,42 +378,50 @@ class MiscRoutes:
                         download_progress['completed'] += 1
                         continue
                     
-                    # Download example images
-                    for i, image in enumerate(images, 1):
-                        image_url = image.get('url')
-                        if not image_url:
-                            continue
-                        
-                        # Get image filename from URL
-                        image_filename = os.path.basename(image_url.split('?')[0])
-                        image_ext = os.path.splitext(image_filename)[1].lower()
-                        
-                        # Handle both images and videos
-                        is_image = image_ext in SUPPORTED_MEDIA_EXTENSIONS['images']
-                        is_video = image_ext in SUPPORTED_MEDIA_EXTENSIONS['videos']
-                        
-                        if not (is_image or is_video):
-                            logger.debug(f"Skipping unsupported file type: {image_filename}")
-                            continue
-                        
-                        save_filename = f"image_{i}{image_ext}"
-                        
-                        # Check if already downloaded
-                        save_path = os.path.join(model_dir, save_filename)
-                        if os.path.exists(save_path):
-                            logger.debug(f"File already exists: {save_path}")
-                            continue
-                        
-                        # Download the file
+                    # First check if we have local example images for this model
+                    local_images_processed = False
+                    if model_file_path:
                         try:
-                            logger.debug(f"Downloading {save_filename} for {model_name}")
+                            model_dir_path = os.path.dirname(model_file_path)
+                            local_images = []
                             
-                            # Direct download using the independent session
-                            async with independent_session.get(image_url, timeout=60) as response:
-                                if response.status == 200:
+                            # Look for files with pattern: filename.example.*.ext
+                            if model_file_name:
+                                example_prefix = f"{model_file_name}.example."
+                                
+                                if os.path.exists(model_dir_path):
+                                    for file in os.listdir(model_dir_path):
+                                        file_lower = file.lower()
+                                        if file_lower.startswith(example_prefix.lower()):
+                                            file_ext = os.path.splitext(file_lower)[1]
+                                            is_supported = (file_ext in SUPPORTED_MEDIA_EXTENSIONS['images'] or 
+                                                           file_ext in SUPPORTED_MEDIA_EXTENSIONS['videos'])
+                                            
+                                            if is_supported:
+                                                local_images.append(os.path.join(model_dir_path, file))
+                            
+                            # Process local images if found
+                            if local_images:
+                                logger.info(f"Found {len(local_images)} local example images for {model_name}")
+                                
+                                for i, local_image_path in enumerate(local_images, 1):
+                                    local_ext = os.path.splitext(local_image_path)[1].lower()
+                                    save_filename = f"image_{i}{local_ext}"
+                                    save_path = os.path.join(model_dir, save_filename)
+                                    
+                                    # Skip if already exists in output directory
+                                    if os.path.exists(save_path):
+                                        logger.debug(f"File already exists in output: {save_path}")
+                                        continue
+                                    
+                                    # Handle image processing based on file type and optimize setting
+                                    is_image = local_ext in SUPPORTED_MEDIA_EXTENSIONS['images']
+                                    
                                     if is_image and optimize:
-                                        # For images, optimize if requested
-                                        image_data = await response.read()
+                                        # Optimize the image
+                                        with open(local_image_path, 'rb') as img_file:
+                                            image_data = img_file.read()
+                                        
                                         optimized_data, ext = ExifUtils.optimize_image(
                                             image_data, 
                                             target_width=EXAMPLE_IMAGE_WIDTH, 
@@ -429,32 +439,104 @@ class MiscRoutes:
                                         with open(save_path, 'wb') as f:
                                             f.write(optimized_data)
                                     else:
-                                        # For videos or unoptimized images, save directly
-                                        with open(save_path, 'wb') as f:
-                                            async for chunk in response.content.iter_chunked(8192):
-                                                if chunk:
-                                                    f.write(chunk)
-                                else:
-                                    error_msg = f"Failed to download file: {image_url}, status code: {response.status}"
-                                    logger.warning(error_msg)
-                                    download_progress['errors'].append(error_msg)
-                                    download_progress['last_error'] = error_msg
-                                    model_success = False  # Mark model as failed
-                            
-                            # Add a delay between downloads
-                            await asyncio.sleep(delay)
+                                        # For videos or unoptimized images, copy directly
+                                        with open(local_image_path, 'rb') as src_file:
+                                            with open(save_path, 'wb') as dst_file:
+                                                dst_file.write(src_file.read())
+                                
+                                # Mark as successfully processed if all local images were processed
+                                download_progress['processed_models'].add(model_hash)
+                                local_images_processed = True
+                                logger.info(f"Successfully processed local examples for {model_name}")
+                        
                         except Exception as e:
-                            error_msg = f"Error downloading file {image_url}: {str(e)}"
+                            error_msg = f"Error processing local examples for {model_name}: {str(e)}"
                             logger.error(error_msg)
                             download_progress['errors'].append(error_msg)
                             download_progress['last_error'] = error_msg
-                            model_success = False  # Mark model as failed
+                            # Continue to remote download if local processing fails
                     
-                    # Only mark model as processed if all images downloaded successfully
-                    if model_success:
-                        download_progress['processed_models'].add(model_hash)
-                    else:
-                        logger.warning(f"Model {model_name} had download errors, will not mark as completed")
+                    # If we didn't process local images, download from remote
+                    if not local_images_processed:
+                        # Download example images
+                        for i, image in enumerate(images, 1):
+                            image_url = image.get('url')
+                            if not image_url:
+                                continue
+                            
+                            # Get image filename from URL
+                            image_filename = os.path.basename(image_url.split('?')[0])
+                            image_ext = os.path.splitext(image_filename)[1].lower()
+                            
+                            # Handle both images and videos
+                            is_image = image_ext in SUPPORTED_MEDIA_EXTENSIONS['images']
+                            is_video = image_ext in SUPPORTED_MEDIA_EXTENSIONS['videos']
+                            
+                            if not (is_image or is_video):
+                                logger.debug(f"Skipping unsupported file type: {image_filename}")
+                                continue
+                            
+                            save_filename = f"image_{i}{image_ext}"
+                            
+                            # Check if already downloaded
+                            save_path = os.path.join(model_dir, save_filename)
+                            if os.path.exists(save_path):
+                                logger.debug(f"File already exists: {save_path}")
+                                continue
+                            
+                            # Download the file
+                            try:
+                                logger.debug(f"Downloading {save_filename} for {model_name}")
+                                
+                                # Direct download using the independent session
+                                async with independent_session.get(image_url, timeout=60) as response:
+                                    if response.status == 200:
+                                        if is_image and optimize:
+                                            # For images, optimize if requested
+                                            image_data = await response.read()
+                                            optimized_data, ext = ExifUtils.optimize_image(
+                                                image_data, 
+                                                target_width=EXAMPLE_IMAGE_WIDTH, 
+                                                format='webp', 
+                                                quality=85, 
+                                                preserve_metadata=False
+                                            )
+                                            
+                                            # Update save filename if format changed
+                                            if ext == '.webp':
+                                                save_filename = os.path.splitext(save_filename)[0] + '.webp'
+                                                save_path = os.path.join(model_dir, save_filename)
+                                            
+                                            # Save the optimized image
+                                            with open(save_path, 'wb') as f:
+                                                f.write(optimized_data)
+                                        else:
+                                            # For videos or unoptimized images, save directly
+                                            with open(save_path, 'wb') as f:
+                                                async for chunk in response.content.iter_chunked(8192):
+                                                    if chunk:
+                                                        f.write(chunk)
+                                    else:
+                                        error_msg = f"Failed to download file: {image_url}, status code: {response.status}"
+                                        logger.warning(error_msg)
+                                        download_progress['errors'].append(error_msg)
+                                        download_progress['last_error'] = error_msg
+                                        model_success = False  # Mark model as failed
+                                
+                                # Add a delay between downloads for remote files only
+                                await asyncio.sleep(delay)
+                            except Exception as e:
+                                error_msg = f"Error downloading file {image_url}: {str(e)}"
+                                logger.error(error_msg)
+                                download_progress['errors'].append(error_msg)
+                                download_progress['last_error'] = error_msg
+                                model_success = False  # Mark model as failed
+                        
+                        # Only mark model as processed if all images downloaded successfully
+                        if model_success:
+                            download_progress['processed_models'].add(model_hash)
+                        else:
+                            logger.warning(f"Model {model_name} had download errors, will not mark as completed")
                     
                     # Save progress to file periodically
                     if download_progress['completed'] % 10 == 0 or download_progress['completed'] == download_progress['total'] - 1:

From b32756932bde97fe9f982b5ad25bfd6cc98884cb Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 30 Apr 2025 14:17:39 +0800
Subject: [PATCH 5/8] feat: initialize example images manager on app startup
 and streamline event listener setup

---
 static/js/core.js                          |  3 ++
 static/js/managers/ExampleImagesManager.js | 32 +++++++++++++++-------
 templates/components/progress_panel.html   | 27 +-----------------
 3 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/static/js/core.js b/static/js/core.js
index 2fdf4e35..337674d9 100644
--- a/static/js/core.js
+++ b/static/js/core.js
@@ -35,6 +35,9 @@ export class AppCore {
         initTheme();
         initBackToTop();
         
+        // Initialize the example images manager
+        exampleImagesManager.initialize();
+        
         // Mark as initialized
         this.initialized = true;
         
diff --git a/static/js/managers/ExampleImagesManager.js b/static/js/managers/ExampleImagesManager.js
index 19ca8795..59b21ae1 100644
--- a/static/js/managers/ExampleImagesManager.js
+++ b/static/js/managers/ExampleImagesManager.js
@@ -10,20 +10,32 @@ class ExampleImagesManager {
         this.startTime = null;
         this.progressPanel = null;
         
-        // Wait for DOM before initializing event listeners
-        document.addEventListener('DOMContentLoaded', () => {
-            this.initEventListeners();
-            // Initialize progress panel reference
-            this.progressPanel = document.getElementById('exampleImagesProgress');
-        });
-        
-        // Initialize download path field
+        // Initialize download path field and check download status
         this.initializePathOptions();
-        
-        // Check download status on page load
         this.checkDownloadStatus();
     }
     
+    // Initialize the manager
+    initialize() {
+        // Initialize event listeners
+        this.initEventListeners();
+        
+        // Initialize progress panel reference
+        this.progressPanel = document.getElementById('exampleImagesProgress');
+        
+        // Initialize progress panel button handlers
+        const pauseBtn = document.getElementById('pauseExampleDownloadBtn');
+        const collapseBtn = document.getElementById('collapseProgressBtn');
+        
+        if (pauseBtn) {
+            pauseBtn.onclick = () => this.pauseDownload();
+        }
+        
+        if (collapseBtn) {
+            collapseBtn.onclick = () => this.toggleProgressPanel();
+        }
+    }
+    
     // Initialize event listeners for buttons
     initEventListeners() {
         const downloadBtn = document.getElementById('exampleImagesDownloadBtn');
diff --git a/templates/components/progress_panel.html b/templates/components/progress_panel.html
index 78553814..74b57e21 100644
--- a/templates/components/progress_panel.html
+++ b/templates/components/progress_panel.html
@@ -45,29 +45,4 @@
             <div id="downloadErrors" class="error-list"></div>
         </div>
     </div>
-</div>
-
-<script>
-    // Initialize button onclick handlers when DOM is fully loaded
-    document.addEventListener('DOMContentLoaded', function() {
-        const pauseBtn = document.getElementById('pauseExampleDownloadBtn');
-        const collapseBtn = document.getElementById('collapseProgressBtn');
-        
-        // Make window.exampleImagesManager globally available
-        if (window.exampleImagesManager === undefined && typeof exampleImagesManager !== 'undefined') {
-            window.exampleImagesManager = exampleImagesManager;
-        }
-        
-        if (pauseBtn && window.exampleImagesManager) {
-            pauseBtn.onclick = () => window.exampleImagesManager.pauseDownload();
-        }
-        
-        if (collapseBtn && window.exampleImagesManager) {
-            collapseBtn.onclick = () => {
-                if (window.exampleImagesManager.toggleProgressPanel) {
-                    window.exampleImagesManager.toggleProgressPanel();
-                }
-            };
-        }
-    });
-</script>
\ No newline at end of file
+</div>
\ No newline at end of file

From 61f723a1f571152ca0d6035aeead82f9137b4cc4 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 30 Apr 2025 14:46:43 +0800
Subject: [PATCH 6/8] feat: add back-to-top button and update its positioning

---
 static/css/layout.css        | 4 ++--
 static/js/utils/uiHelpers.js | 9 +++------
 templates/base.html          | 5 +++++
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/static/css/layout.css b/static/css/layout.css
index 72d8120f..69a5375e 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -260,8 +260,8 @@
 /* Back to Top Button */
 .back-to-top {
     position: fixed;
-    bottom: 20px;
-    right: 20px;
+    bottom: 85px;
+    right: 30px;
     width: 36px;
     height: 36px;
     border-radius: 50%;
diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js
index 90812225..a9da3b64 100644
--- a/static/js/utils/uiHelpers.js
+++ b/static/js/utils/uiHelpers.js
@@ -311,15 +311,12 @@ export function initFolderTagsVisibility() {
 }
 
 export function initBackToTop() {
-    const button = document.createElement('button');
-    button.className = 'back-to-top';
-    button.innerHTML = '<i class="fas fa-chevron-up"></i>';
-    button.title = 'Back to top';
-    document.body.appendChild(button);
+    const button = document.getElementById('backToTopBtn');
+    if (!button) return;
 
     // Get the scrollable container
     const scrollContainer = document.querySelector('.page-content');
-
+    
     // Show/hide button based on scroll position
     const toggleBackToTop = () => {
         const scrollThreshold = window.innerHeight * 0.3;
diff --git a/templates/base.html b/templates/base.html
index 3ed78e79..257ce245 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -76,6 +76,11 @@
         {% include 'components/progress_panel.html' %}
         {% block additional_components %}{% endblock %}
 
+        <!-- Add back-to-top button here -->
+        <button id="backToTopBtn" class="back-to-top" title="Back to top">
+            <i class="fas fa-chevron-up"></i>
+        </button>
+
         <div class="container">
             {% if is_initializing %}
                 <!-- Show initialization component when initializing -->

From e1efff19f017ef9b5ca1bd7d8fd9b3991397a10b Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 30 Apr 2025 15:18:18 +0800
Subject: [PATCH 7/8] feat: add mini progress circle to progress panel when
 collapsed

---
 static/css/components/progress-panel.css   |  47 +++++++
 static/js/managers/ExampleImagesManager.js | 135 ++++++++++++++++++---
 templates/components/progress_panel.html   |   5 +
 3 files changed, 169 insertions(+), 18 deletions(-)

diff --git a/static/css/components/progress-panel.css b/static/css/components/progress-panel.css
index 2b24ff34..16a529a1 100644
--- a/static/css/components/progress-panel.css
+++ b/static/css/components/progress-panel.css
@@ -25,6 +25,7 @@
 
 .progress-panel.collapsed .progress-panel-header {
     border-bottom: none;
+    padding-bottom: calc(var(--space-2) + 12px);
 }
 
 .progress-panel-header {
@@ -61,6 +62,7 @@
     justify-content: center;
     opacity: 0.6;
     transition: all 0.2s;
+    position: relative;
 }
 
 .icon-button:hover {
@@ -165,4 +167,49 @@
 
 .hidden {
     display: none !important;
+}
+
+/* Mini progress indicator on pause button when panel collapsed */
+.mini-progress-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    pointer-events: none;
+    opacity: 0; /* Hide by default */
+    transition: opacity 0.2s ease;
+}
+
+/* Show mini progress when panel is collapsed */
+.progress-panel.collapsed .mini-progress-container {
+    opacity: 1;
+}
+
+.mini-progress-circle {
+    stroke: var(--lora-accent);
+    fill: none;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    transform: rotate(-90deg);
+    transform-origin: center;
+    transition: stroke-dashoffset 0.3s ease;
+}
+
+.mini-progress-background {
+    stroke: var(--lora-border);
+    fill: none;
+    stroke-width: 2;
+}
+
+.progress-percent {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 0.65em;
+    color: var(--text-color);
+    opacity: 0.8;
+    white-space: nowrap;
 }
\ No newline at end of file
diff --git a/static/js/managers/ExampleImagesManager.js b/static/js/managers/ExampleImagesManager.js
index 59b21ae1..3f5ed909 100644
--- a/static/js/managers/ExampleImagesManager.js
+++ b/static/js/managers/ExampleImagesManager.js
@@ -9,6 +9,8 @@ class ExampleImagesManager {
         this.progressUpdateInterval = null;
         this.startTime = null;
         this.progressPanel = null;
+        this.isProgressPanelCollapsed = false;
+        this.pauseButton = null; // Store reference to the pause button
         
         // Initialize download path field and check download status
         this.initializePathOptions();
@@ -23,12 +25,22 @@ class ExampleImagesManager {
         // Initialize progress panel reference
         this.progressPanel = document.getElementById('exampleImagesProgress');
         
+        // Load collapse state from storage
+        this.isProgressPanelCollapsed = getStorageItem('progress_panel_collapsed', false);
+        if (this.progressPanel && this.isProgressPanelCollapsed) {
+            this.progressPanel.classList.add('collapsed');
+            const icon = document.querySelector('#collapseProgressBtn i');
+            if (icon) {
+                icon.className = 'fas fa-chevron-up';
+            }
+        }
+        
         // Initialize progress panel button handlers
-        const pauseBtn = document.getElementById('pauseExampleDownloadBtn');
+        this.pauseButton = document.getElementById('pauseExampleDownloadBtn');
         const collapseBtn = document.getElementById('collapseProgressBtn');
         
-        if (pauseBtn) {
-            pauseBtn.onclick = () => this.pauseDownload();
+        if (this.pauseButton) {
+            this.pauseButton.onclick = () => this.pauseDownload();
         }
         
         if (collapseBtn) {
@@ -245,8 +257,16 @@ class ExampleImagesManager {
             if (data.success) {
                 this.isPaused = true;
                 document.getElementById('downloadStatusText').textContent = 'Paused';
-                document.getElementById('pauseExampleDownloadBtn').innerHTML = '<i class="fas fa-play"></i>';
-                document.getElementById('pauseExampleDownloadBtn').onclick = () => this.resumeDownload();
+                
+                // Only update the icon element, not the entire innerHTML
+                if (this.pauseButton) {
+                    const iconElement = this.pauseButton.querySelector('i');
+                    if (iconElement) {
+                        iconElement.className = 'fas fa-play';
+                    }
+                    this.pauseButton.onclick = () => this.resumeDownload();
+                }
+                
                 this.updateDownloadButtonText();
                 showToast('Download paused', 'info');
             } else {
@@ -273,8 +293,16 @@ class ExampleImagesManager {
             if (data.success) {
                 this.isPaused = false;
                 document.getElementById('downloadStatusText').textContent = 'Downloading';
-                document.getElementById('pauseExampleDownloadBtn').innerHTML = '<i class="fas fa-pause"></i>';
-                document.getElementById('pauseExampleDownloadBtn').onclick = () => this.pauseDownload();
+                
+                // Only update the icon element, not the entire innerHTML
+                if (this.pauseButton) {
+                    const iconElement = this.pauseButton.querySelector('i');
+                    if (iconElement) {
+                        iconElement.className = 'fas fa-pause';
+                    }
+                    this.pauseButton.onclick = () => this.pauseDownload();
+                }
+                
                 this.updateDownloadButtonText();
                 showToast('Download resumed', 'success');
             } else {
@@ -357,6 +385,9 @@ class ExampleImagesManager {
         if (progressBar) {
             const progressPercent = status.total > 0 ? (status.completed / status.total) * 100 : 0;
             progressBar.style.width = `${progressPercent}%`;
+            
+            // Update mini progress circle
+            this.updateMiniProgress(progressPercent);
         }
         
         // Update current model
@@ -372,21 +403,76 @@ class ExampleImagesManager {
         this.updateErrors(status);
         
         // Update pause/resume button
-        const pauseBtn = document.getElementById('pauseExampleDownloadBtn');
-        const resumeBtn = document.getElementById('resumeExampleDownloadBtn');
+        if (!this.pauseButton) {
+            this.pauseButton = document.getElementById('pauseExampleDownloadBtn');
+        }
         
-        if (pauseBtn) {
-            if (status.status === 'paused') {
-                pauseBtn.innerHTML = '<i class="fas fa-play"></i>';
-                pauseBtn.onclick = () => this.resumeDownload();
+        if (this.pauseButton) {
+            // Check if the button already has the SVG elements
+            let hasProgressElements = !!this.pauseButton.querySelector('.mini-progress-circle');
+            
+            if (!hasProgressElements) {
+                // If elements don't exist, add them
+                this.pauseButton.innerHTML = `
+                    <i class="${status.status === 'paused' ? 'fas fa-play' : 'fas fa-pause'}"></i>
+                    <svg class="mini-progress-container" width="24" height="24" viewBox="0 0 24 24">
+                        <circle class="mini-progress-background" cx="12" cy="12" r="10"></circle>
+                        <circle class="mini-progress-circle" cx="12" cy="12" r="10" stroke-dasharray="62.8" stroke-dashoffset="62.8"></circle>
+                    </svg>
+                    <span class="progress-percent"></span>
+                `;
             } else {
-                pauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
-                pauseBtn.onclick = () => this.pauseDownload();
+                // If elements exist, just update the icon
+                const iconElement = this.pauseButton.querySelector('i');
+                if (iconElement) {
+                    iconElement.className = status.status === 'paused' ? 'fas fa-play' : 'fas fa-pause';
+                }
+            }
+            
+            // Update click handler
+            this.pauseButton.onclick = status.status === 'paused' 
+                ? () => this.resumeDownload() 
+                : () => this.pauseDownload();
+            
+            // Update progress immediately
+            const progressBar = document.getElementById('downloadProgressBar');
+            if (progressBar) {
+                const progressPercent = status.total > 0 ? (status.completed / status.total) * 100 : 0;
+                this.updateMiniProgress(progressPercent);
+            }
+        }
+    }
+    
+    // Update the mini progress circle in the pause button
+    updateMiniProgress(percent) {
+        // Ensure we have the pause button reference
+        if (!this.pauseButton) {
+            this.pauseButton = document.getElementById('pauseExampleDownloadBtn');
+            if (!this.pauseButton) {
+                console.error('Pause button not found');
+                return;
             }
         }
         
-        if (resumeBtn) {
-            resumeBtn.style.display = status.status === 'paused' ? 'block' : 'none';
+        // Query elements within the context of the pause button
+        const miniProgressCircle = this.pauseButton.querySelector('.mini-progress-circle');
+        const percentText = this.pauseButton.querySelector('.progress-percent');
+        
+        if (miniProgressCircle && percentText) {
+            // Circle circumference = 2πr = 2 * π * 10 = 62.8
+            const circumference = 62.8;
+            const offset = circumference - (percent / 100) * circumference;
+            
+            miniProgressCircle.style.strokeDashoffset = offset;
+            percentText.textContent = `${Math.round(percent)}%`;
+            
+            // Only show percent text when panel is collapsed
+            percentText.style.display = this.isProgressPanelCollapsed ? 'block' : 'none';
+        } else {
+            console.warn('Mini progress elements not found within pause button', 
+                         this.pauseButton,
+                         'mini-progress-circle:', !!miniProgressCircle, 
+                         'progress-percent:', !!percentText);
         }
     }
     
@@ -485,17 +571,30 @@ class ExampleImagesManager {
             if (!this.progressPanel) return;
         }
         
+        this.isProgressPanelCollapsed = !this.isProgressPanelCollapsed;
         this.progressPanel.classList.toggle('collapsed');
         
+        // Save collapsed state to storage
+        setStorageItem('progress_panel_collapsed', this.isProgressPanelCollapsed);
+        
         // Update icon
         const icon = document.querySelector('#collapseProgressBtn i');
         if (icon) {
-            if (this.progressPanel.classList.contains('collapsed')) {
+            if (this.isProgressPanelCollapsed) {
                 icon.className = 'fas fa-chevron-up';
             } else {
                 icon.className = 'fas fa-chevron-down';
             }
         }
+        
+        // Force update mini progress if panel is collapsed
+        if (this.isProgressPanelCollapsed) {
+            const progressBar = document.getElementById('downloadProgressBar');
+            if (progressBar) {
+                const progressPercent = parseFloat(progressBar.style.width) || 0;
+                this.updateMiniProgress(progressPercent);
+            }
+        }
     }
 }
 
diff --git a/templates/components/progress_panel.html b/templates/components/progress_panel.html
index 74b57e21..eaee35f9 100644
--- a/templates/components/progress_panel.html
+++ b/templates/components/progress_panel.html
@@ -7,6 +7,11 @@
         <div class="progress-panel-actions">
             <button id="pauseExampleDownloadBtn" class="icon-button">
                 <i class="fas fa-pause"></i>
+                <svg class="mini-progress-container" width="24" height="24" viewBox="0 0 24 24">
+                    <circle class="mini-progress-background" cx="12" cy="12" r="10"></circle>
+                    <circle class="mini-progress-circle" cx="12" cy="12" r="10" stroke-dasharray="62.8" stroke-dashoffset="62.8"></circle>
+                </svg>
+                <span class="progress-percent"></span>
             </button>
             <button id="collapseProgressBtn" class="icon-button">
                 <i class="fas fa-chevron-down"></i>

From d9c4ae92cd6a12819621eeecd6c1fafdd42c87ee Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 30 Apr 2025 16:04:41 +0800
Subject: [PATCH 8/8] Add GPL-3.0 license

---
 LICENSE | 687 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 670 insertions(+), 17 deletions(-)

diff --git a/LICENSE b/LICENSE
index c6fabd98..a5785ea7 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,21 +1,674 @@
-MIT License
+GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
 
-Copyright (c) 2023 Will Miao
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+                            Preamble
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE. 
\ No newline at end of file
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    ComfyUI Lora Manager - A ComfyUI custom node for managing models
+    Copyright (C) 2025  Will Miao
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    ComfyUI Lora Manager  Copyright (C) 2025  Will Miao
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.
\ No newline at end of file