Implement saving model example images locally. Fixes https://github.com/willmiao/ComfyUI-Lora-Manager/issues/88

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())

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)
+            }, status=500)

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)

py/routes/usage_stats_routes.py

@@ -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)

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
+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']
+}

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")
+        logger.info("Server stopped by user")

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;

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;
+}

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;

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'
         });
     }
-}
+}

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">

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'
         });
     }
-}
+}

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">

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();

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();

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;

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">

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>

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>

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',