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] 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 '
No example images available
'; // Filter images based on SFW setting @@ -53,7 +81,11 @@ export function renderShowcaseContent(images) { `; @@ -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 `
${shouldBlur ? ` @@ -202,9 +234,11 @@ function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metada ` : ''} ${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 `
${shouldBlur ? ` @@ -231,7 +265,8 @@ function generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metada ` : ''} - Preview { + 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) {
- ${renderShowcaseContent(checkpoint.civitai?.images || [])} + ${renderShowcaseContent(checkpoint.civitai?.images || [], checkpoint.sha256)}
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 '
No example images available
'; // Filter images based on SFW setting @@ -53,7 +81,15 @@ export function renderShowcaseContent(images) { @@ -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 `
${shouldBlur ? ` @@ -195,9 +231,11 @@ function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadata ` : ''} ${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 `
${shouldBlur ? ` @@ -224,7 +262,8 @@ function generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadata ` : ''} - Preview { + 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) {
- ${renderShowcaseContent(lora.civitai?.images)} + ${renderShowcaseContent(lora.civitai?.images, lora.sha256)}
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 = ''; + 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 = ''; + 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 = ''; + document.getElementById('pauseExampleDownloadBtn').onclick = () => this.resumeDownload(); + document.getElementById('resumeExampleDownloadBtn').style.display = 'block'; + } else { + document.getElementById('pauseExampleDownloadBtn').innerHTML = ''; + 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 => + `
${error}
` + ).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 %}
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 @@
+ + +
+

Example Images

+ +
+
+
+ +
+
+ + +
+
+
+ Choose where to save example images downloaded from Civitai +
+
+ +
+
+
+ +
+
+ +
+
+
+ Optimize example images to reduce file size and improve loading speed +
+
+ +
+
+ + +
+
+
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 +
+
+ + +
+
+
+
+
+ Initializing... + 0/0 +
+
+
+
+
+ +
+
Currently downloading:
+
-
+
+ +
+
+ Elapsed: + 00:00:00 +
+
+ Remaining: + --:--:-- +
+
+ + +
+
\ 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',