feat: update release notes and version to 0.8.18 with new features and improvements

Don't crash completely if a symlink resolve fails

README.md

@@ -22,6 +22,14 @@ Watch this quick tutorial to learn how to use the new one-click LoRA integration
 
 ## Release Notes
 
+### v0.8.18
+* **Custom Example Images** - Added ability to import your own example images for LoRAs and checkpoints with automatic metadata extraction from embedded information
+* **Enhanced Example Management** - New action buttons to set specific examples as previews or delete custom examples
+* **Improved Duplicate Detection** - Enhanced "Find Duplicates" with hash verification feature to eliminate false positives when identifying duplicate models
+* **Tag Management** - Added tag editing functionality allowing users to customize and manage model tags
+* **Advanced Selection Controls** - Implemented Ctrl+A shortcut for quickly selecting all filtered LoRAs, automatically entering bulk mode when needed
+* **Note**: Cache file functionality temporarily disabled pending rework
+
 ### v0.8.17
 * **Duplicate Model Detection** - Added "Find Duplicates" functionality for LoRAs and checkpoints using model file hash detection, enabling convenient viewing and batch deletion of duplicate models
 * **Enhanced URL Recipe Imports** - Optimized import recipe via URL functionality using CivitAI API calls instead of web scraping, now supporting all rated images (including NSFW) for recipe imports

py/lora_manager.py

@@ -1,5 +1,10 @@
 import asyncio
+import sys
+import os
+import logging
+from pathlib import Path
 from server import PromptServer # type: ignore
+
 from .config import config
 from .routes.lora_routes import LoraRoutes
 from .routes.api_routes import ApiRoutes
@@ -10,9 +15,7 @@ from .routes.misc_routes import MiscRoutes
 from .routes.example_images_routes import ExampleImagesRoutes
 from .services.service_registry import ServiceRegistry
 from .services.settings_manager import settings
-import logging
-import sys
-import os
+from .utils.example_images_migration import ExampleImagesMigration
 
 logger = logging.getLogger(__name__)
 
@@ -94,10 +97,14 @@ class LoraManager:
                     route_path = f'/loras_static/link_{link_idx["lora"]}/preview'
                     link_idx["lora"] += 1
                 
-                app.router.add_static(route_path, target_path)
-                logger.info(f"Added static route for link target {route_path} -> {target_path}")
-                config.add_route_mapping(target_path, route_path)
-                added_targets.add(target_path)
+                try:
+                    app.router.add_static(route_path, Path(target_path).resolve(strict=False))
+                    logger.info(f"Added static route for link target {route_path} -> {target_path}")
+                    config.add_route_mapping(target_path, route_path)
+                    added_targets.add(target_path)
+                except Exception as e:
+                    logger.warning(f"Failed to add static route on initialization for {target_path}: {e}")
+                    continue
         
         # Add static route for plugin assets
         app.router.add_static('/loras_static', config.static_path)
@@ -130,26 +137,13 @@ class LoraManager:
             logging.getLogger('aiohttp.access').setLevel(logging.WARNING)
             
             # Initialize CivitaiClient first to ensure it's ready for other services
-            civitai_client = await ServiceRegistry.get_civitai_client()
-            
-            # Get file monitors through ServiceRegistry
-            lora_monitor = await ServiceRegistry.get_lora_monitor()
-            checkpoint_monitor = await ServiceRegistry.get_checkpoint_monitor()
-            
-            # Start monitors
-            lora_monitor.start()
-            logger.debug("Lora monitor started")
-            
-            # Make sure checkpoint monitor has paths before starting
-            await checkpoint_monitor.initialize_paths()
-            checkpoint_monitor.start()
-            logger.debug("Checkpoint monitor started")
+            await ServiceRegistry.get_civitai_client()
 
             # Register DownloadManager with ServiceRegistry
-            download_manager = await ServiceRegistry.get_download_manager()
+            await ServiceRegistry.get_download_manager()
             
             # Initialize WebSocket manager
-            ws_manager = await ServiceRegistry.get_websocket_manager()
+            await ServiceRegistry.get_websocket_manager()
             
             # Initialize scanners in background
             lora_scanner = await ServiceRegistry.get_lora_scanner()
@@ -168,6 +162,8 @@ class LoraManager:
             asyncio.create_task(lora_scanner.initialize_in_background(), name='lora_cache_init')
             asyncio.create_task(checkpoint_scanner.initialize_in_background(), name='checkpoint_cache_init')
             asyncio.create_task(recipe_scanner.initialize_in_background(), name='recipe_cache_init')
+
+            await ExampleImagesMigration.check_and_run_migrations()
             
             logger.info("LoRA Manager: All services initialized and background tasks scheduled")
                 
@@ -179,17 +175,6 @@ class LoraManager:
         """Cleanup resources using ServiceRegistry"""
         try:
             logger.info("LoRA Manager: Cleaning up services")
-            
-            # Get monitors from ServiceRegistry
-            lora_monitor = await ServiceRegistry.get_service("lora_monitor")
-            if lora_monitor:
-                lora_monitor.stop()
-                logger.info("Stopped LoRA monitor")
-                
-            checkpoint_monitor = await ServiceRegistry.get_service("checkpoint_monitor")
-            if checkpoint_monitor:
-                checkpoint_monitor.stop()
-                logger.info("Stopped checkpoint monitor")
                 
             # Close CivitaiClient gracefully
             civitai_client = await ServiceRegistry.get_service("civitai_client")

py/metadata_collector/metadata_processor.py

@@ -209,6 +209,44 @@ class MetadataProcessor:
                 
         return None
     
+    @staticmethod
+    def match_conditioning_to_prompts(metadata, sampler_id):
+        """
+        Match conditioning objects from a sampler to prompts in metadata
+        
+        Parameters:
+        - metadata: The workflow metadata
+        - sampler_id: ID of the sampler node to match
+        
+        Returns:
+        - Dictionary with 'prompt' and 'negative_prompt' if found
+        """
+        result = {
+            "prompt": "",
+            "negative_prompt": ""
+        }
+        
+        # Check if we have stored conditioning objects for this sampler
+        if sampler_id in metadata.get(PROMPTS, {}) and (
+            "pos_conditioning" in metadata[PROMPTS][sampler_id] or 
+            "neg_conditioning" in metadata[PROMPTS][sampler_id]):
+            
+            pos_conditioning = metadata[PROMPTS][sampler_id].get("pos_conditioning")
+            neg_conditioning = metadata[PROMPTS][sampler_id].get("neg_conditioning")
+            
+            # Try to match conditioning objects with those stored by CLIPTextEncodeExtractor
+            for prompt_node_id, prompt_data in metadata[PROMPTS].items():
+                if "conditioning" not in prompt_data:
+                    continue
+                    
+                if pos_conditioning is not None and id(prompt_data["conditioning"]) == id(pos_conditioning):
+                    result["prompt"] = prompt_data.get("text", "")
+                
+                if neg_conditioning is not None and id(prompt_data["conditioning"]) == id(neg_conditioning):
+                    result["negative_prompt"] = prompt_data.get("text", "")
+            
+        return result
+    
     @staticmethod
     def extract_generation_params(metadata, id=None):
         """
@@ -261,7 +299,6 @@ class MetadataProcessor:
             params["sampler"] = sampling_params.get("sampler_name")
             params["scheduler"] = sampling_params.get("scheduler")
             
-            # Trace connections from the primary sampler
             if prompt and primary_sampler_id:
                 # Check if this is a SamplerCustomAdvanced node
                 is_custom_advanced = False
@@ -309,29 +346,36 @@ class MetadataProcessor:
                                 params["prompt"] = metadata[PROMPTS][positive_node_id].get("text", "")
                 
                 else:
-                    # Original tracing for standard samplers
-                    # Trace positive prompt - look specifically for CLIPTextEncode
-                    positive_node_id = MetadataProcessor.trace_node_input(prompt, primary_sampler_id, "positive", max_depth=10)
-                    if positive_node_id and positive_node_id in metadata.get(PROMPTS, {}):
-                        params["prompt"] = metadata[PROMPTS][positive_node_id].get("text", "")
-                    else:
-                        # If CLIPTextEncode is not found, try to find CLIPTextEncodeFlux
-                        positive_flux_node_id = MetadataProcessor.trace_node_input(prompt, primary_sampler_id, "positive", "CLIPTextEncodeFlux", max_depth=10)
-                        if positive_flux_node_id and positive_flux_node_id in metadata.get(PROMPTS, {}):
-                            params["prompt"] = metadata[PROMPTS][positive_flux_node_id].get("text", "")
-                    
-                    # Trace negative prompt - look specifically for CLIPTextEncode
-                    negative_node_id = MetadataProcessor.trace_node_input(prompt, primary_sampler_id, "negative", max_depth=10)
-                    if negative_node_id and negative_node_id in metadata.get(PROMPTS, {}):
-                        params["negative_prompt"] = metadata[PROMPTS][negative_node_id].get("text", "")
+                    # For standard samplers, match conditioning objects to prompts
+                    prompt_results = MetadataProcessor.match_conditioning_to_prompts(metadata, primary_sampler_id)
+                    params["prompt"] = prompt_results["prompt"]
+                    params["negative_prompt"] = prompt_results["negative_prompt"]
+
+                    # If prompts were still not found, fall back to tracing connections
+                    if not params["prompt"]:
+                        # Original tracing for standard samplers
+                        # Trace positive prompt - look specifically for CLIPTextEncode
+                        positive_node_id = MetadataProcessor.trace_node_input(prompt, primary_sampler_id, "positive", max_depth=10)
+                        if positive_node_id and positive_node_id in metadata.get(PROMPTS, {}):
+                            params["prompt"] = metadata[PROMPTS][positive_node_id].get("text", "")
+                        else:
+                            # If CLIPTextEncode is not found, try to find CLIPTextEncodeFlux
+                            positive_flux_node_id = MetadataProcessor.trace_node_input(prompt, primary_sampler_id, "positive", "CLIPTextEncodeFlux", max_depth=10)
+                            if positive_flux_node_id and positive_flux_node_id in metadata.get(PROMPTS, {}):
+                                params["prompt"] = metadata[PROMPTS][positive_flux_node_id].get("text", "")
+                        
+                        # Trace negative prompt - look specifically for CLIPTextEncode
+                        negative_node_id = MetadataProcessor.trace_node_input(prompt, primary_sampler_id, "negative", max_depth=10)
+                        if negative_node_id and negative_node_id in metadata.get(PROMPTS, {}):
+                            params["negative_prompt"] = metadata[PROMPTS][negative_node_id].get("text", "")
                 
-                # Size extraction is same for all sampler types
-                # Check if the sampler itself has size information (from latent_image)
-                if primary_sampler_id in metadata.get(SIZE, {}):
-                    width = metadata[SIZE][primary_sampler_id].get("width")
-                    height = metadata[SIZE][primary_sampler_id].get("height")
-                    if width and height:
-                        params["size"] = f"{width}x{height}"
+            # Size extraction is same for all sampler types
+            # Check if the sampler itself has size information (from latent_image)
+            if primary_sampler_id in metadata.get(SIZE, {}):
+                width = metadata[SIZE][primary_sampler_id].get("width")
+                height = metadata[SIZE][primary_sampler_id].get("height")
+                if width and height:
+                    params["size"] = f"{width}x{height}"
         
         # Extract LoRAs using the standardized format
         lora_parts = []

py/metadata_collector/node_extractors.py

@@ -47,6 +47,13 @@ class CLIPTextEncodeExtractor(NodeMetadataExtractor):
             "text": text,
             "node_id": node_id
         }
+
+    @staticmethod
+    def update(node_id, outputs, metadata):
+        if outputs and isinstance(outputs, list) and len(outputs) > 0:
+            if isinstance(outputs[0], tuple) and len(outputs[0]) > 0:
+                conditioning = outputs[0][0]
+                metadata[PROMPTS][node_id]["conditioning"] = conditioning
         
 class SamplerExtractor(NodeMetadataExtractor):
     @staticmethod
@@ -64,6 +71,18 @@ class SamplerExtractor(NodeMetadataExtractor):
             "node_id": node_id,
             IS_SAMPLER: True  # Add sampler flag
         }
+
+        # Store the conditioning objects directly in metadata for later matching
+        pos_conditioning = inputs.get("positive", None)
+        neg_conditioning = inputs.get("negative", None)
+
+        # Save conditioning objects in metadata for later matching
+        if pos_conditioning is not None or neg_conditioning is not None:
+            if node_id not in metadata[PROMPTS]:
+                metadata[PROMPTS][node_id] = {"node_id": node_id}
+            
+            metadata[PROMPTS][node_id]["pos_conditioning"] = pos_conditioning
+            metadata[PROMPTS][node_id]["neg_conditioning"] = neg_conditioning
         
         # Extract latent image dimensions if available
         if "latent_image" in inputs and inputs["latent_image"] is not None:
@@ -103,6 +122,18 @@ class KSamplerAdvancedExtractor(NodeMetadataExtractor):
             IS_SAMPLER: True  # Add sampler flag
         }
         
+        # Store the conditioning objects directly in metadata for later matching
+        pos_conditioning = inputs.get("positive", None)
+        neg_conditioning = inputs.get("negative", None)
+
+        # Save conditioning objects in metadata for later matching
+        if pos_conditioning is not None or neg_conditioning is not None:
+            if node_id not in metadata[PROMPTS]:
+                metadata[PROMPTS][node_id] = {"node_id": node_id}
+            
+            metadata[PROMPTS][node_id]["pos_conditioning"] = pos_conditioning
+            metadata[PROMPTS][node_id]["neg_conditioning"] = neg_conditioning
+        
         # Extract latent image dimensions if available
         if "latent_image" in inputs and inputs["latent_image"] is not None:
             latent = inputs["latent_image"]
@@ -376,6 +407,13 @@ class CLIPTextEncodeFluxExtractor(NodeMetadataExtractor):
                 
             metadata[SAMPLING][node_id]["parameters"]["guidance"] = guidance_value
 
+    @staticmethod
+    def update(node_id, outputs, metadata):
+        if outputs and isinstance(outputs, list) and len(outputs) > 0:
+            if isinstance(outputs[0], tuple) and len(outputs[0]) > 0:
+                conditioning = outputs[0][0]
+                metadata[PROMPTS][node_id]["conditioning"] = conditioning
+
 class CFGGuiderExtractor(NodeMetadataExtractor):
     @staticmethod
     def extract(node_id, inputs, outputs, metadata):
@@ -404,6 +442,7 @@ NODE_EXTRACTORS = {
     "BasicScheduler": BasicSchedulerExtractor,  # Add BasicScheduler
     # Loaders
     "CheckpointLoaderSimple": CheckpointLoaderExtractor,
+    "comfyLoader": CheckpointLoaderExtractor,  # eeasy comfyLoader
     "UNETLoader": UNETLoaderExtractor,          # Updated to use dedicated extractor
     "UnetLoaderGGUF": UNETLoaderExtractor,  # Updated to use dedicated extractor
     "LoraLoader": LoraLoaderExtractor,

py/nodes/debug_metadata.py

@@ -1,4 +1,5 @@
 import logging
+from server import PromptServer   # type: ignore
 from ..metadata_collector.metadata_processor import MetadataProcessor
 
 logger = logging.getLogger(__name__)
@@ -7,6 +8,7 @@ class DebugMetadata:
     NAME = "Debug Metadata (LoraManager)"
     CATEGORY = "Lora Manager/utils"
     DESCRIPTION = "Debug node to verify metadata_processor functionality"
+    OUTPUT_NODE = True
     
     @classmethod
     def INPUT_TYPES(cls):
@@ -19,8 +21,7 @@ class DebugMetadata:
             },
         }
 
-    RETURN_TYPES = ("STRING",)
-    RETURN_NAMES = ("metadata_json",)
+    RETURN_TYPES = ()
     FUNCTION = "process_metadata"
 
     def process_metadata(self, images, id):
@@ -32,7 +33,13 @@ class DebugMetadata:
             # Use the MetadataProcessor to convert it to JSON string
             metadata_json = MetadataProcessor.to_json(metadata, id)
             
-            return (metadata_json,)
+            # Send metadata to frontend for display
+            PromptServer.instance.send_sync("metadata_update", {
+                "id": id,
+                "metadata": metadata_json
+            })
+            
         except Exception as e:
             logger.error(f"Error processing metadata: {e}")
-            return ("{}",)  # Return empty JSON object in case of error
+        
+        return ()

py/recipes/base.py

@@ -7,7 +7,7 @@ import re
 from typing import Dict, List, Any, Optional, Tuple
 from abc import ABC, abstractmethod
 from ..config import config
-from .constants import VALID_LORA_TYPES
+from ..utils.constants import VALID_LORA_TYPES
 
 logger = logging.getLogger(__name__)
 

py/recipes/constants.py

@@ -1,5 +1,8 @@
 """Constants used across recipe parsers."""
 
+# Import VALID_LORA_TYPES from utils.constants
+from ..utils.constants import VALID_LORA_TYPES
+
 # Constants for generation parameters
 GEN_PARAM_KEYS = [
     'prompt',
@@ -11,6 +14,3 @@ GEN_PARAM_KEYS = [
     'size',
     'clip_skip',
 ]
-
-# Valid Lora types
-VALID_LORA_TYPES = ['lora', 'locon']

py/routes/api_routes.py

@@ -10,11 +10,11 @@ from ..nodes.utils import get_lora_info
 
 from ..config import config
 from ..services.websocket_manager import ws_manager
-from ..services.settings_manager import settings
 import asyncio
 from .update_routes import UpdateRoutes
-from ..utils.constants import PREVIEW_EXTENSIONS, CARD_PREVIEW_WIDTH
+from ..utils.constants import PREVIEW_EXTENSIONS, CARD_PREVIEW_WIDTH, VALID_LORA_TYPES
 from ..utils.exif_utils import ExifUtils
+from ..utils.metadata_manager import MetadataManager
 from ..services.service_registry import ServiceRegistry
 
 logger = logging.getLogger(__name__)
@@ -88,6 +88,9 @@ class ApiRoutes:
         # Add new endpoint for bulk deleting loras
         app.router.add_post('/api/loras/bulk-delete', routes.bulk_delete_loras)
 
+        # Add new endpoint for verifying duplicates
+        app.router.add_post('/api/loras/verify-duplicates', routes.verify_duplicates)
+
     async def delete_model(self, request: web.Request) -> web.Response:
         """Handle model deletion request"""
         if self.scanner is None:
@@ -104,7 +107,21 @@ class ApiRoutes:
         """Handle CivitAI metadata fetch request"""
         if self.scanner is None:
             self.scanner = await ServiceRegistry.get_lora_scanner()
-        return await ModelRouteUtils.handle_fetch_civitai(request, self.scanner)
+        
+        response = await ModelRouteUtils.handle_fetch_civitai(request, self.scanner)
+        
+        # If successful, format the metadata before returning
+        if response.status == 200:
+            data = json.loads(response.body.decode('utf-8'))
+            if data.get("success") and data.get("metadata"):
+                formatted_metadata = self._format_lora_response(data["metadata"])
+                return web.json_response({
+                    "success": True,
+                    "metadata": formatted_metadata
+                })
+        
+        # Otherwise, return the original response
+        return response
 
     async def replace_preview(self, request: web.Request) -> web.Response:
         """Handle preview image replacement request"""
@@ -229,66 +246,6 @@ class ApiRoutes:
             "civitai": ModelRouteUtils.filter_civitai_data(lora.get("civitai", {}))
         }
 
-    # Private helper methods
-    async def _read_preview_file(self, reader) -> tuple[bytes, str]:
-        """Read preview file and content type from multipart request"""
-        field = await reader.next()
-        if field.name != 'preview_file':
-            raise ValueError("Expected 'preview_file' field")
-        content_type = field.headers.get('Content-Type', 'image/png')
-        return await field.read(), content_type
-
-    async def _read_model_path(self, reader) -> str:
-        """Read model path from multipart request"""
-        field = await reader.next()
-        if field.name != 'model_path':
-            raise ValueError("Expected 'model_path' field")
-        return (await field.read()).decode()
-
-    async def _save_preview_file(self, model_path: str, preview_data: bytes, content_type: str) -> str:
-        """Save preview file and return its path"""
-        base_name = os.path.splitext(os.path.basename(model_path))[0]
-        folder = os.path.dirname(model_path)
-        
-        # Determine if content is video or image
-        if content_type.startswith('video/'):
-            # For videos, keep original format and use .mp4 extension
-            extension = '.mp4'
-            optimized_data = preview_data
-        else:
-            # For images, optimize and convert to WebP
-            optimized_data, _ = ExifUtils.optimize_image(
-                image_data=preview_data,
-                target_width=CARD_PREVIEW_WIDTH,
-                format='webp',
-                quality=85,
-                preserve_metadata=False
-            )
-            extension = '.webp'  # Use .webp without .preview part
-        
-        preview_path = os.path.join(folder, base_name + extension).replace(os.sep, '/')
-        
-        with open(preview_path, 'wb') as f:
-            f.write(optimized_data)
-            
-        return preview_path
-
-    async def _update_preview_metadata(self, model_path: str, preview_path: str):
-        """Update preview path in metadata"""
-        metadata_path = os.path.splitext(model_path)[0] + '.metadata.json'
-        if os.path.exists(metadata_path):
-            try:
-                with open(metadata_path, 'r', encoding='utf-8') as f:
-                    metadata = json.load(f)
-                
-                # Update preview_url directly in the metadata dict
-                metadata['preview_url'] = preview_path
-                
-                with open(metadata_path, 'w', encoding='utf-8') as f:
-                    json.dump(metadata, f, indent=2, ensure_ascii=False)
-            except Exception as e:
-                logger.error(f"Error updating metadata: {e}")
-
     async def fetch_all_civitai(self, request: web.Request) -> web.Response:
         """Fetch CivitAI metadata for all loras in the background"""
         try:
@@ -401,8 +358,8 @@ class ApiRoutes:
             versions = response.get('modelVersions', [])
             model_type = response.get('type', '')
             
-            # Check model type - should be LORA or LoCon
-            if model_type.lower() not in ['lora', 'locon']:
+            # Check model type - should be LORA, LoCon, or DORA
+            if model_type.lower() not in VALID_LORA_TYPES:
                 return web.json_response({
                     'error': f"Model type mismatch. Expected LORA or LoCon, got {model_type}"
                 }, status=400)
@@ -624,8 +581,7 @@ class ApiRoutes:
                     metadata[key] = value
 
             # Save updated metadata
-            with open(metadata_path, 'w', encoding='utf-8') as f:
-                json.dump(metadata, f, indent=2, ensure_ascii=False)
+            await MetadataManager.save_metadata(file_path, metadata)
 
             # Update cache
             await self.scanner.update_single_model_cache(file_path, file_path, metadata)
@@ -838,9 +794,7 @@ class ApiRoutes:
                             metadata['tags'] = tags
                             metadata['creator'] = creator
                             
-                            with open(metadata_path, 'w', encoding='utf-8') as f:
-                                json.dump(metadata, f, indent=2, ensure_ascii=False)
-                                logger.info(f"Saved model metadata to file for {file_path}")
+                            await MetadataManager.save_metadata(file_path, metadata)
                         except Exception as e:
                             logger.error(f"Error saving model metadata: {e}")
             
@@ -956,6 +910,7 @@ class ApiRoutes:
             patterns = [
                 f"{old_file_name}.safetensors",  # Required
                 f"{old_file_name}.metadata.json",
+                f"{old_file_name}.metadata.json.bak",
             ]
             
             # Add all preview file extensions
@@ -982,17 +937,6 @@ class ApiRoutes:
             renamed_files = []
             new_metadata_path = None
             
-            # Notify file monitor to ignore these events
-            main_file_path = os.path.join(target_dir, f"{old_file_name}.safetensors")
-            if os.path.exists(main_file_path):
-                # Get lora monitor through ServiceRegistry instead of download_manager
-                lora_monitor = await ServiceRegistry.get_lora_monitor()
-                if lora_monitor:
-                    # Add old and new paths to ignore list
-                    file_size = os.path.getsize(main_file_path)
-                    lora_monitor.handler.add_ignore_path(main_file_path, file_size)
-                    lora_monitor.handler.add_ignore_path(new_file_path, file_size)
-            
             for old_path, pattern in existing_files:
                 # Get the file extension like .safetensors or .metadata.json
                 ext = ModelRouteUtils.get_multipart_ext(pattern)
@@ -1022,8 +966,7 @@ class ApiRoutes:
                     metadata['preview_url'] = new_preview
                 
                 # Save updated metadata
-                with open(new_metadata_path, 'w', encoding='utf-8') as f:
-                    json.dump(metadata, f, indent=2, ensure_ascii=False)
+                await MetadataManager.save_metadata(new_file_path, metadata)
             
             # Update the scanner cache
             if metadata:
@@ -1209,7 +1152,7 @@ class ApiRoutes:
                     if primary_model:
                         group["models"].insert(0, self._format_lora_response(primary_model))
                 
-                if group["models"]:  # Only include if we found models
+                if len(group["models"]) > 1:  # Only include if we found multiple models
                     result.append(group)
                 
             return web.json_response({
@@ -1292,3 +1235,9 @@ class ApiRoutes:
         if self.scanner is None:
             self.scanner = await ServiceRegistry.get_lora_scanner()
         return await ModelRouteUtils.handle_relink_civitai(request, self.scanner)
+
+    async def verify_duplicates(self, request: web.Request) -> web.Response:
+        """Handle verification of duplicate lora hashes"""
+        if self.scanner is None:
+            self.scanner = await ServiceRegistry.get_lora_scanner()
+        return await ModelRouteUtils.handle_verify_duplicates(request, self.scanner)

py/routes/checkpoints_routes.py

@@ -7,6 +7,7 @@ import asyncio
 
 from ..utils.routes_common import ModelRouteUtils
 from ..utils.constants import NSFW_LEVELS
+from ..utils.metadata_manager import MetadataManager
 from ..services.websocket_manager import ws_manager
 from ..services.service_registry import ServiceRegistry
 from ..config import config
@@ -66,6 +67,9 @@ class CheckpointsRoutes:
         # Add new endpoint for bulk deleting checkpoints
         app.router.add_post('/api/checkpoints/bulk-delete', self.bulk_delete_checkpoints)
 
+        # Add new endpoint for verifying duplicates
+        app.router.add_post('/api/checkpoints/verify-duplicates', self.verify_duplicates)
+
     async def get_checkpoints(self, request):
         """Get paginated checkpoint data"""
         try:
@@ -518,7 +522,20 @@ class CheckpointsRoutes:
     
     async def fetch_civitai(self, request: web.Request) -> web.Response:
         """Handle CivitAI metadata fetch request for checkpoints"""
-        return await ModelRouteUtils.handle_fetch_civitai(request, self.scanner)
+        response = await ModelRouteUtils.handle_fetch_civitai(request, self.scanner)
+        
+        # If successful, format the metadata before returning
+        if response.status == 200:
+            data = json.loads(response.body.decode('utf-8'))
+            if data.get("success") and data.get("metadata"):
+                formatted_metadata = self._format_checkpoint_response(data["metadata"])
+                return web.json_response({
+                    "success": True,
+                    "metadata": formatted_metadata
+                })
+        
+        # Otherwise, return the original response
+        return response
     
     async def replace_preview(self, request: web.Request) -> web.Response:
         """Handle preview image replacement for checkpoints"""
@@ -634,8 +651,7 @@ class CheckpointsRoutes:
             metadata.update(metadata_updates)
 
             # Save updated metadata
-            with open(metadata_path, 'w', encoding='utf-8') as f:
-                json.dump(metadata, f, indent=2, ensure_ascii=False)
+            await MetadataManager.save_metadata(file_path, metadata)
 
             # Update cache
             await self.scanner.update_single_model_cache(file_path, file_path, metadata)
@@ -735,7 +751,7 @@ class CheckpointsRoutes:
                     if primary_model:
                         group["models"].insert(0, self._format_checkpoint_response(primary_model))
                 
-                if group["models"]:
+                if len(group["models"]) > 1:  # Only include if we found multiple models
                     result.append(group)
                 
             return web.json_response({
@@ -816,3 +832,7 @@ class CheckpointsRoutes:
     async def relink_civitai(self, request: web.Request) -> web.Response:
         """Handle CivitAI metadata re-linking request by model version ID for checkpoints"""
         return await ModelRouteUtils.handle_relink_civitai(request, self.scanner)
+
+    async def verify_duplicates(self, request: web.Request) -> web.Response:
+        """Handle verification of duplicate checkpoint hashes"""
+        return await ModelRouteUtils.handle_verify_duplicates(request, self.scanner)

py/routes/lora_routes.py

@@ -70,8 +70,7 @@ class LoraRoutes:
             # It's initializing if the cache object doesn't exist yet,
             # OR if the scanner explicitly says it's initializing (background task running).
             is_initializing = (
-                self.scanner._cache is None or
-                (hasattr(self.scanner, '_is_initializing') and self.scanner._is_initializing)
+                self.scanner._cache is None or self.scanner.is_initializing()
             )
 
             if is_initializing:

py/routes/update_routes.py

@@ -2,6 +2,8 @@ import os
 import aiohttp
 import logging
 import toml
+import subprocess
+from datetime import datetime
 from aiohttp import web
 from typing import Dict, Any, List
 
@@ -13,7 +15,8 @@ class UpdateRoutes:
     @staticmethod
     def setup_routes(app):
         """Register update check routes"""
-        app.router.add_get('/loras/api/check-updates', UpdateRoutes.check_updates)
+        app.router.add_get('/api/check-updates', UpdateRoutes.check_updates)
+        app.router.add_get('/api/version-info', UpdateRoutes.get_version_info)
     
     @staticmethod
     async def check_updates(request):
@@ -24,6 +27,9 @@ class UpdateRoutes:
         try:
             # Read local version from pyproject.toml
             local_version = UpdateRoutes._get_local_version()
+            
+            # Get git info (commit hash, branch)
+            git_info = UpdateRoutes._get_git_info()
 
             # Fetch remote version from GitHub
             remote_version, changelog = await UpdateRoutes._get_remote_version()
@@ -39,7 +45,8 @@ class UpdateRoutes:
                 'current_version': local_version,
                 'latest_version': remote_version,
                 'update_available': update_available,
-                'changelog': changelog
+                'changelog': changelog,
+                'git_info': git_info
             })
             
         except Exception as e:
@@ -49,6 +56,34 @@ class UpdateRoutes:
                 'error': str(e)
             })
     
+    @staticmethod
+    async def get_version_info(request):
+        """
+        Returns the current version in the format 'version-short_hash'
+        """
+        try:
+            # Read local version from pyproject.toml
+            local_version = UpdateRoutes._get_local_version().replace('v', '')
+            
+            # Get git info (commit hash, branch)
+            git_info = UpdateRoutes._get_git_info()
+            short_hash = git_info['short_hash']
+            
+            # Format: version-short_hash
+            version_string = f"{local_version}-{short_hash}"
+            
+            return web.json_response({
+                'success': True,
+                'version': version_string
+            })
+            
+        except Exception as e:
+            logger.error(f"Failed to get version info: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            })
+    
     @staticmethod
     def _get_local_version() -> str:
         """Get local plugin version from pyproject.toml"""
@@ -72,6 +107,72 @@ class UpdateRoutes:
             logger.error(f"Failed to get local version: {e}", exc_info=True)
             return "v0.0.0"
     
+    @staticmethod
+    def _get_git_info() -> Dict[str, str]:
+        """Get Git repository information"""
+        current_dir = os.path.dirname(os.path.abspath(__file__))
+        plugin_root = os.path.dirname(os.path.dirname(current_dir))
+        
+        git_info = {
+            'commit_hash': 'unknown',
+            'short_hash': 'unknown',
+            'branch': 'unknown',
+            'commit_date': 'unknown'
+        }
+        
+        try:
+            # Check if we're in a git repository
+            if not os.path.exists(os.path.join(plugin_root, '.git')):
+                return git_info
+                
+            # Get current commit hash
+            result = subprocess.run(
+                ['git', 'rev-parse', 'HEAD'],
+                cwd=plugin_root,
+                stdout=subprocess.PIPE,
+                stderr=subprocess.PIPE,
+                text=True,
+                check=False
+            )
+            if result.returncode == 0:
+                git_info['commit_hash'] = result.stdout.strip()
+                git_info['short_hash'] = git_info['commit_hash'][:7]
+            
+            # Get current branch name
+            result = subprocess.run(
+                ['git', 'rev-parse', '--abbrev-ref', 'HEAD'],
+                cwd=plugin_root,
+                stdout=subprocess.PIPE,
+                stderr=subprocess.PIPE,
+                text=True,
+                check=False
+            )
+            if result.returncode == 0:
+                git_info['branch'] = result.stdout.strip()
+            
+            # Get commit date
+            result = subprocess.run(
+                ['git', 'show', '-s', '--format=%ci', 'HEAD'],
+                cwd=plugin_root,
+                stdout=subprocess.PIPE,
+                stderr=subprocess.PIPE,
+                text=True,
+                check=False
+            )
+            if result.returncode == 0:
+                commit_date = result.stdout.strip()
+                # Format the date nicely if possible
+                try:
+                    date_obj = datetime.strptime(commit_date, '%Y-%m-%d %H:%M:%S %z')
+                    git_info['commit_date'] = date_obj.strftime('%Y-%m-%d')
+                except:
+                    git_info['commit_date'] = commit_date
+                    
+        except Exception as e:
+            logger.warning(f"Error getting git info: {e}")
+            
+        return git_info
+    
     @staticmethod
     async def _get_remote_version() -> tuple[str, List[str]]:
         """

py/services/civitai_client.py

@@ -224,6 +224,69 @@ class CivitaiClient:
         except Exception as e:
             logger.error(f"Error fetching model versions: {e}")
             return None
+            
+    async def get_model_version(self, model_id: str, version_id: str = "") -> Optional[Dict]:
+        """Get specific model version with additional metadata
+        
+        Args:
+            model_id: The Civitai model ID
+            version_id: Optional specific version ID to retrieve
+            
+        Returns:
+            Optional[Dict]: The model version data with additional fields or None if not found
+        """
+        try:
+            session = await self._ensure_fresh_session()
+            async with session.get(f"{self.base_url}/models/{model_id}") as response:
+                if response.status != 200:
+                    return None
+                    
+                data = await response.json()
+                model_versions = data.get('modelVersions', [])
+                
+                # Find matching version
+                matched_version = None
+                
+                if version_id:
+                    # If version_id provided, find exact match
+                    for version in model_versions:
+                        if str(version.get('id')) == str(version_id):
+                            matched_version = version
+                            break
+                else:
+                    # If no version_id then use the first version
+                    matched_version = model_versions[0] if model_versions else None
+                
+                # If no match found, return None
+                if not matched_version:
+                    return None
+                    
+                # Build result with modified fields
+                result = matched_version.copy()  # Copy to avoid modifying original
+                
+                # Replace index with modelId
+                if 'index' in result:
+                    del result['index']
+                result['modelId'] = model_id
+                
+                # Add model field with metadata from top level
+                result['model'] = {
+                    "name": data.get("name"),
+                    "type": data.get("type"),
+                    "nsfw": data.get("nsfw", False),
+                    "poi": data.get("poi", False),
+                    "description": data.get("description"),
+                    "tags": data.get("tags", [])
+                }
+                
+                # Add creator field from top level
+                result['creator'] = data.get("creator")
+                
+                return result
+                
+        except Exception as e:
+            logger.error(f"Error fetching model version: {e}")
+            return None
 
     async def get_model_version_info(self, version_id: str) -> Tuple[Optional[Dict], Optional[str]]:
         """Fetch model version metadata from Civitai

py/services/download_manager.py

@@ -6,6 +6,7 @@ from typing import Dict
 from ..utils.models import LoraMetadata, CheckpointMetadata
 from ..utils.constants import CARD_PREVIEW_WIDTH
 from ..utils.exif_utils import ExifUtils
+from ..utils.metadata_manager import MetadataManager
 from .service_registry import ServiceRegistry
 
 # Download to temporary file first
@@ -38,14 +39,6 @@ class DownloadManager:
         if self._civitai_client is None:
             self._civitai_client = await ServiceRegistry.get_civitai_client()
         return self._civitai_client
-
-    async def _get_lora_monitor(self):
-        """Get the lora file monitor from registry"""
-        return await ServiceRegistry.get_lora_monitor()
-        
-    async def _get_checkpoint_monitor(self):
-        """Get the checkpoint file monitor from registry"""
-        return await ServiceRegistry.get_checkpoint_monitor()
     
     async def _get_lora_scanner(self):
         """Get the lora scanner from registry"""
@@ -136,9 +129,6 @@ class DownloadManager:
             file_name = file_info['name']
             save_path = os.path.join(save_dir, file_name)
 
-            # 4. Notify file monitor - use normalized path and file size
-            # file monitor is despreted, so we don't need to use it
-
             # 5. Prepare metadata based on model type
             if model_type == "checkpoint":
                 metadata = CheckpointMetadata.from_civitai_info(version_info, file_info, save_path)
@@ -209,8 +199,6 @@ class DownloadManager:
                     if await civitai_client.download_preview_image(images[0]['url'], preview_path):
                         metadata.preview_url = preview_path.replace(os.sep, '/')
                         metadata.preview_nsfw_level = images[0].get('nsfwLevel', 0)
-                        with open(metadata_path, 'w', encoding='utf-8') as f:
-                            json.dump(metadata.to_dict(), f, indent=2, ensure_ascii=False)
                 else:
                     # For images, use WebP format for better performance
                     with tempfile.NamedTemporaryFile(suffix='.png', delete=False) as temp_file:
@@ -237,8 +225,6 @@ class DownloadManager:
                         # Update metadata
                         metadata.preview_url = preview_path.replace(os.sep, '/')
                         metadata.preview_nsfw_level = images[0].get('nsfwLevel', 0)
-                        with open(metadata_path, 'w', encoding='utf-8') as f:
-                            json.dump(metadata.to_dict(), f, indent=2, ensure_ascii=False)
                         
                         # Remove temporary file
                         try:
@@ -269,8 +255,7 @@ class DownloadManager:
             metadata.update_file_info(save_path)
 
             # 5. Final metadata update
-            with open(metadata_path, 'w', encoding='utf-8') as f:
-                json.dump(metadata.to_dict(), f, indent=2, ensure_ascii=False)
+            await MetadataManager.save_metadata(save_path, metadata)
 
             # 6. Update cache based on model type
             if model_type == "checkpoint":

py/services/file_monitor.py

@@ -1,542 +0,0 @@
-import os
-import logging
-import asyncio
-import time
-from watchdog.observers import Observer
-from watchdog.events import FileSystemEventHandler
-from typing import List, Dict, Set, Optional
-from threading import Lock
-
-from ..config import config
-from .service_registry import ServiceRegistry
-
-logger = logging.getLogger(__name__)
-
-# Configuration constant to control file monitoring functionality
-ENABLE_FILE_MONITORING = False
-
-class BaseFileHandler(FileSystemEventHandler):
-    """Base handler for file system events"""
-    
-    def __init__(self, loop: asyncio.AbstractEventLoop):
-        self.loop = loop  # Store event loop reference
-        self.pending_changes = set()  # Pending changes
-        self.lock = Lock()  # Thread-safe lock
-        self.update_task = None  # Async update task
-        self._ignore_paths = set()  # Paths to ignore
-        self._min_ignore_timeout = 5  # Minimum timeout in seconds
-        self._download_speed = 1024 * 1024  # Assume 1MB/s as base speed
-        
-        # Track modified files with timestamps for debouncing
-        self.modified_files: Dict[str, float] = {}
-        self.debounce_timer = None
-        self.debounce_delay = 3.0  # Seconds to wait after last modification
-        
-        # Track files already scheduled for processing
-        self.scheduled_files: Set[str] = set()
-        
-        # File extensions to monitor - should be overridden by subclasses
-        self.file_extensions = set()
-
-    def _should_ignore(self, path: str) -> bool:
-        """Check if path should be ignored"""
-        real_path = os.path.realpath(path)  # Resolve any symbolic links
-        return real_path.replace(os.sep, '/') in self._ignore_paths
-
-    def add_ignore_path(self, path: str, file_size: int = 0):
-        """Add path to ignore list with dynamic timeout based on file size"""
-        real_path = os.path.realpath(path)  # Resolve any symbolic links
-        self._ignore_paths.add(real_path.replace(os.sep, '/'))
-        
-        # Short timeout (e.g. 5 seconds) is sufficient to ignore the CREATE event
-        timeout = 5
-        
-        self.loop.call_later(
-            timeout,
-            self._ignore_paths.discard,
-            real_path.replace(os.sep, '/')
-        )
-        
-    def on_created(self, event):
-        if event.is_directory:
-            return
-            
-        # Handle appropriate files based on extensions
-        file_ext = os.path.splitext(event.src_path)[1].lower()
-        if file_ext in self.file_extensions:
-            if self._should_ignore(event.src_path):
-                return
-            
-            # Process this file directly and ignore subsequent modifications
-            normalized_path = os.path.realpath(event.src_path).replace(os.sep, '/')
-            if normalized_path not in self.scheduled_files:
-                logger.info(f"File created: {event.src_path}")
-                self.scheduled_files.add(normalized_path)
-                self._schedule_update('add', event.src_path)
-                
-                # Ignore modifications for a short period after creation
-                self.loop.call_later(
-                    self.debounce_delay * 2,
-                    self.scheduled_files.discard,
-                    normalized_path
-                )
-            
-    def on_modified(self, event):
-        if event.is_directory:
-            return
-            
-        # Only process files with supported extensions
-        file_ext = os.path.splitext(event.src_path)[1].lower()
-        if file_ext in self.file_extensions:
-            if self._should_ignore(event.src_path):
-                return
-                
-            normalized_path = os.path.realpath(event.src_path).replace(os.sep, '/')
-            
-            # Skip if this file is already scheduled for processing
-            if normalized_path in self.scheduled_files:
-                return
-                
-            # Update the timestamp for this file
-            self.modified_files[normalized_path] = time.time()
-            
-            # Cancel any existing timer
-            if self.debounce_timer:
-                self.debounce_timer.cancel()
-                
-            # Set a new timer to process modified files after debounce period
-            self.debounce_timer = self.loop.call_later(
-                self.debounce_delay, 
-                self.loop.call_soon_threadsafe,
-                self._process_modified_files
-            )
-
-    def _process_modified_files(self):
-        """Process files that have been modified after debounce period"""
-        current_time = time.time()
-        files_to_process = []
-        
-        # Find files that haven't been modified for debounce_delay seconds
-        for file_path, last_modified in list(self.modified_files.items()):
-            if current_time - last_modified >= self.debounce_delay:
-                # Only process if not already scheduled
-                if file_path not in self.scheduled_files:
-                    files_to_process.append(file_path)
-                    self.scheduled_files.add(file_path)
-                    
-                    # Auto-remove from scheduled list after reasonable time
-                    self.loop.call_later(
-                        self.debounce_delay * 2,
-                        self.scheduled_files.discard,
-                        file_path
-                    )
-                
-                del self.modified_files[file_path]
-        
-        # Process stable files
-        for file_path in files_to_process:
-            logger.info(f"Processing modified file: {file_path}")
-            self._schedule_update('add', file_path)
-
-    def on_deleted(self, event):
-        if event.is_directory:
-            return
-            
-        file_ext = os.path.splitext(event.src_path)[1].lower()
-        if file_ext not in self.file_extensions:
-            return
-            
-        if self._should_ignore(event.src_path):
-            return
-        
-        # Remove from scheduled files if present
-        normalized_path = os.path.realpath(event.src_path).replace(os.sep, '/')
-        self.scheduled_files.discard(normalized_path)
-        
-        logger.info(f"File deleted: {event.src_path}")
-        self._schedule_update('remove', event.src_path)
-        
-    def on_moved(self, event):
-        """Handle file move/rename events"""
-        
-        src_ext = os.path.splitext(event.src_path)[1].lower()
-        dest_ext = os.path.splitext(event.dest_path)[1].lower()
-        
-        # If destination has supported extension, treat as new file
-        if dest_ext in self.file_extensions:
-            if self._should_ignore(event.dest_path):
-                return
-                
-            normalized_path = os.path.realpath(event.dest_path).replace(os.sep, '/')
-            
-            # Only process if not already scheduled
-            if normalized_path not in self.scheduled_files:
-                logger.info(f"File renamed/moved to: {event.dest_path}")
-                self.scheduled_files.add(normalized_path)
-                self._schedule_update('add', event.dest_path)
-                
-                # Auto-remove from scheduled list after reasonable time
-                self.loop.call_later(
-                    self.debounce_delay * 2, 
-                    self.scheduled_files.discard,
-                    normalized_path
-                )
-            
-        # If source was a supported file, treat it as deleted
-        if src_ext in self.file_extensions:
-            if self._should_ignore(event.src_path):
-                return
-                
-            normalized_path = os.path.realpath(event.src_path).replace(os.sep, '/')
-            self.scheduled_files.discard(normalized_path)
-            
-            logger.info(f"File moved/renamed from: {event.src_path}")
-            self._schedule_update('remove', event.src_path)
-
-    def _schedule_update(self, action: str, file_path: str):
-        """Schedule a cache update"""
-        with self.lock:
-            # Use config method to map path
-            mapped_path = config.map_path_to_link(file_path)
-            normalized_path = mapped_path.replace(os.sep, '/')
-            self.pending_changes.add((action, normalized_path))
-            
-            self.loop.call_soon_threadsafe(self._create_update_task)
-
-    def _create_update_task(self):
-        """Create update task in the event loop"""
-        if self.update_task is None or self.update_task.done():
-            self.update_task = asyncio.create_task(self._process_changes())
-    
-    async def _process_changes(self, delay: float = 2.0):
-        """Process pending changes with debouncing - should be implemented by subclasses"""
-        raise NotImplementedError("Subclasses must implement _process_changes")
-
-
-class LoraFileHandler(BaseFileHandler):
-    """Handler for LoRA file system events"""
-    
-    def __init__(self, loop: asyncio.AbstractEventLoop):
-        super().__init__(loop)
-        # Set supported file extensions for LoRAs
-        self.file_extensions = {'.safetensors'}
-    
-    async def _process_changes(self, delay: float = 2.0):
-        """Process pending changes with debouncing"""
-        await asyncio.sleep(delay)
-        
-        try:
-            with self.lock:
-                changes = self.pending_changes.copy()
-                self.pending_changes.clear()
-            
-            if not changes:
-                return
-            
-            logger.info(f"Processing {len(changes)} LoRA file changes")
-
-            # Get scanner through ServiceRegistry
-            scanner = await ServiceRegistry.get_lora_scanner()
-            cache = await scanner.get_cached_data()
-            needs_resort = False
-            new_folders = set()
-            
-            for action, file_path in changes:
-                try:
-                    if action == 'add':
-                        # Check if file already exists in cache
-                        existing = next((item for item in cache.raw_data if item['file_path'] == file_path), None)
-                        if existing:
-                            logger.info(f"File {file_path} already in cache, skipping")
-                            continue
-                            
-                        # Scan new file
-                        model_data = await scanner.scan_single_model(file_path)
-                        if model_data:
-                            # Update tags count
-                            for tag in model_data.get('tags', []):
-                                scanner._tags_count[tag] = scanner._tags_count.get(tag, 0) + 1
-                            
-                            cache.raw_data.append(model_data)
-                            new_folders.add(model_data['folder'])
-                            # Update hash index
-                            if 'sha256' in model_data:
-                                scanner._hash_index.add_entry(
-                                    model_data['sha256'], 
-                                    model_data['file_path']
-                                )
-                            needs_resort = True
-                            
-                    elif action == 'remove':
-                        # Find the model to remove so we can update tags count
-                        model_to_remove = next((item for item in cache.raw_data if item['file_path'] == file_path), None)
-                        if model_to_remove:
-                            # Update tags count by reducing counts
-                            for tag in model_to_remove.get('tags', []):
-                                if tag in scanner._tags_count:
-                                    scanner._tags_count[tag] = max(0, scanner._tags_count[tag] - 1)
-                                    if scanner._tags_count[tag] == 0:
-                                        del scanner._tags_count[tag]
-                        
-                        # Remove from cache and hash index
-                        logger.info(f"Removing {file_path} from cache")
-                        scanner._hash_index.remove_by_path(file_path)
-                        cache.raw_data = [
-                            item for item in cache.raw_data 
-                            if item['file_path'] != file_path
-                        ]
-                        needs_resort = True
-                        
-                except Exception as e:
-                    logger.error(f"Error processing {action} for {file_path}: {e}")
-            
-            if needs_resort:
-                await cache.resort()
-                
-                # Update folder list
-                all_folders = set(cache.folders) | new_folders
-                cache.folders = sorted(list(all_folders), key=lambda x: x.lower())
-                
-        except Exception as e:
-            logger.error(f"Error in process_changes for LoRA: {e}")
-
-
-class CheckpointFileHandler(BaseFileHandler):
-    """Handler for checkpoint file system events"""
-    
-    def __init__(self, loop: asyncio.AbstractEventLoop):
-        super().__init__(loop)
-        # Set supported file extensions for checkpoints
-        self.file_extensions = {'.safetensors', '.ckpt', '.pt', '.pth', '.sft', '.gguf'}
-    
-    async def _process_changes(self, delay: float = 2.0):
-        """Process pending changes with debouncing for checkpoint files"""
-        await asyncio.sleep(delay)
-        
-        try:
-            with self.lock:
-                changes = self.pending_changes.copy()
-                self.pending_changes.clear()
-            
-            if not changes:
-                return
-            
-            logger.info(f"Processing {len(changes)} checkpoint file changes")
-
-            # Get scanner through ServiceRegistry
-            scanner = await ServiceRegistry.get_checkpoint_scanner()
-            cache = await scanner.get_cached_data()
-            needs_resort = False
-            new_folders = set()
-            
-            for action, file_path in changes:
-                try:
-                    if action == 'add':
-                        # Check if file already exists in cache
-                        existing = next((item for item in cache.raw_data if item['file_path'] == file_path), None)
-                        if existing:
-                            logger.info(f"File {file_path} already in cache, skipping")
-                            continue
-                            
-                        # Scan new file
-                        model_data = await scanner.scan_single_model(file_path)
-                        if model_data:
-                            # Update tags count if applicable
-                            for tag in model_data.get('tags', []):
-                                scanner._tags_count[tag] = scanner._tags_count.get(tag, 0) + 1
-                            
-                            cache.raw_data.append(model_data)
-                            new_folders.add(model_data['folder'])
-                            # Update hash index
-                            if 'sha256' in model_data:
-                                scanner._hash_index.add_entry(
-                                    model_data['sha256'], 
-                                    model_data['file_path']
-                                )
-                            needs_resort = True
-                            
-                    elif action == 'remove':
-                        # Find the model to remove so we can update tags count
-                        model_to_remove = next((item for item in cache.raw_data if item['file_path'] == file_path), None)
-                        if model_to_remove:
-                            # Update tags count by reducing counts
-                            for tag in model_to_remove.get('tags', []):
-                                if tag in scanner._tags_count:
-                                    scanner._tags_count[tag] = max(0, scanner._tags_count[tag] - 1)
-                                    if scanner._tags_count[tag] == 0:
-                                        del scanner._tags_count[tag]
-                        
-                        # Remove from cache and hash index
-                        logger.info(f"Removing {file_path} from checkpoint cache")
-                        scanner._hash_index.remove_by_path(file_path)
-                        cache.raw_data = [
-                            item for item in cache.raw_data 
-                            if item['file_path'] != file_path
-                        ]
-                        needs_resort = True
-                        
-                except Exception as e:
-                    logger.error(f"Error processing checkpoint {action} for {file_path}: {e}")
-            
-            if needs_resort:
-                await cache.resort()
-                
-                # Update folder list
-                all_folders = set(cache.folders) | new_folders
-                cache.folders = sorted(list(all_folders), key=lambda x: x.lower())
-                
-        except Exception as e:
-            logger.error(f"Error in process_changes for checkpoint: {e}")
-
-
-class BaseFileMonitor:
-    """Base class for file monitoring"""
-    
-    def __init__(self, monitor_paths: List[str]):
-        self.observer = Observer()
-        self.loop = asyncio.get_event_loop()
-        self.monitor_paths = set()
-        
-        # Process monitor paths
-        for path in monitor_paths:
-            self.monitor_paths.add(os.path.realpath(path).replace(os.sep, '/'))
-
-        # Add mapped paths from config
-        for target_path in config._path_mappings.keys():
-            self.monitor_paths.add(target_path)
-    
-    def start(self):
-        """Start file monitoring"""
-        if not ENABLE_FILE_MONITORING:
-            logger.debug("File monitoring is disabled via ENABLE_FILE_MONITORING setting")
-            return
-            
-        for path in self.monitor_paths:
-            try:
-                self.observer.schedule(self.handler, path, recursive=True)
-                logger.info(f"Started monitoring: {path}")
-            except Exception as e:
-                logger.error(f"Error monitoring {path}: {e}")
-                
-        self.observer.start()
-    
-    def stop(self):
-        """Stop file monitoring"""
-        if not ENABLE_FILE_MONITORING:
-            return
-            
-        self.observer.stop()
-        self.observer.join()
-    
-    def rescan_links(self):
-        """Rescan links when new ones are added"""
-        if not ENABLE_FILE_MONITORING:
-            return
-            
-        # Find new paths not yet being monitored
-        new_paths = set()
-        for path in config._path_mappings.keys():
-            real_path = os.path.realpath(path).replace(os.sep, '/')
-            if real_path not in self.monitor_paths:
-                new_paths.add(real_path)
-                self.monitor_paths.add(real_path)
-        
-        # Add new paths to monitoring
-        for path in new_paths:
-            try:
-                self.observer.schedule(self.handler, path, recursive=True)
-                logger.info(f"Added new monitoring path: {path}")
-            except Exception as e:
-                logger.error(f"Error adding new monitor for {path}: {e}")
-
-
-class LoraFileMonitor(BaseFileMonitor):
-    """Monitor for LoRA file changes"""
-    
-    _instance = None
-    _lock = asyncio.Lock()
-    
-    def __new__(cls, monitor_paths=None):
-        if cls._instance is None:
-            cls._instance = super().__new__(cls)
-        return cls._instance
-    
-    def __init__(self, monitor_paths=None):
-        if not hasattr(self, '_initialized'):
-            if monitor_paths is None:
-                from ..config import config
-                monitor_paths = config.loras_roots
-                
-            super().__init__(monitor_paths)
-            self.handler = LoraFileHandler(self.loop)
-            self._initialized = True
-    
-    @classmethod
-    async def get_instance(cls):
-        """Get singleton instance with async support"""
-        async with cls._lock:
-            if cls._instance is None:
-                from ..config import config
-                cls._instance = cls(config.loras_roots)
-            return cls._instance
-
-
-class CheckpointFileMonitor(BaseFileMonitor):
-    """Monitor for checkpoint file changes"""
-    
-    _instance = None
-    _lock = asyncio.Lock()
-    
-    def __new__(cls, monitor_paths=None):
-        if cls._instance is None:
-            cls._instance = super().__new__(cls)
-        return cls._instance
-    
-    def __init__(self, monitor_paths=None):
-        if not hasattr(self, '_initialized'):
-            if monitor_paths is None:
-                # Get checkpoint roots from scanner
-                monitor_paths = []
-                # We'll initialize monitor paths later when scanner is available
-                
-            super().__init__(monitor_paths or [])
-            self.handler = CheckpointFileHandler(self.loop)
-            self._initialized = True
-    
-    @classmethod
-    async def get_instance(cls):
-        """Get singleton instance with async support"""
-        async with cls._lock:
-            if cls._instance is None:
-                cls._instance = cls([])
-                
-                # Now get checkpoint roots from scanner
-                from .checkpoint_scanner import CheckpointScanner
-                scanner = await CheckpointScanner.get_instance()
-                monitor_paths = scanner.get_model_roots()
-                
-                # Update monitor paths - but don't actually monitor them
-                for path in monitor_paths:
-                    real_path = os.path.realpath(path).replace(os.sep, '/')
-                    cls._instance.monitor_paths.add(real_path)
-                
-            return cls._instance
-    
-    def start(self):
-        """Override start to check global enable flag"""
-        if not ENABLE_FILE_MONITORING:
-            logger.debug("Checkpoint file monitoring is disabled via ENABLE_FILE_MONITORING setting")
-            return
-            
-        logger.debug("Checkpoint file monitoring is temporarily disabled")
-        # Skip the actual monitoring setup
-        pass
-    
-    async def initialize_paths(self):
-        """Initialize monitor paths from scanner - currently disabled"""
-        if not ENABLE_FILE_MONITORING:
-            logger.debug("Checkpoint path initialization skipped (monitoring disabled)")
-            return
-            
-        logger.debug("Checkpoint file path initialization skipped (monitoring disabled)")
-        pass

py/services/lora_scanner.py

@@ -374,32 +374,6 @@ class LoraScanner(ModelScanner):
                 
         return letters
 
-    async def _update_metadata_paths(self, metadata_path: str, lora_path: str) -> Dict:
-        """Update file paths in metadata file"""
-        try:
-            with open(metadata_path, 'r', encoding='utf-8') as f:
-                metadata = json.load(f)
-            
-            # Update file_path
-            metadata['file_path'] = lora_path.replace(os.sep, '/')
-            
-            # Update preview_url if exists
-            if 'preview_url' in metadata:
-                preview_dir = os.path.dirname(lora_path)
-                preview_name = os.path.splitext(os.path.basename(metadata['preview_url']))[0]
-                preview_ext = os.path.splitext(metadata['preview_url'])[1]
-                new_preview_path = os.path.join(preview_dir, f"{preview_name}{preview_ext}")
-                metadata['preview_url'] = new_preview_path.replace(os.sep, '/')
-            
-            # Save updated metadata
-            with open(metadata_path, 'w', encoding='utf-8') as f:
-                json.dump(metadata, f, indent=2, ensure_ascii=False)
-
-            return metadata
-                
-        except Exception as e:
-            logger.error(f"Error updating metadata paths: {e}", exc_info=True)
-
     # Lora-specific hash index functionality
     def has_lora_hash(self, sha256: str) -> bool:
         """Check if a LoRA with given hash exists"""

py/services/model_cache.py

@@ -32,12 +32,13 @@ class ModelCache:
             all_folders = set(l['folder'] for l in self.raw_data)
             self.folders = sorted(list(all_folders), key=lambda x: x.lower())
 
-    async def update_preview_url(self, file_path: str, preview_url: str) -> bool:
+    async def update_preview_url(self, file_path: str, preview_url: str, preview_nsfw_level: int) -> bool:
         """Update preview_url for a specific model in all cached data
         
         Args:
             file_path: The file path of the model to update
             preview_url: The new preview URL
+            preview_nsfw_level: The NSFW level of the preview
             
         Returns:
             bool: True if the update was successful, False if the model wasn't found
@@ -47,19 +48,9 @@ class ModelCache:
             for item in self.raw_data:
                 if item['file_path'] == file_path:
                     item['preview_url'] = preview_url
+                    item['preview_nsfw_level'] = preview_nsfw_level
                     break
             else:
                 return False  # Model not found
-                
-            # Update in sorted lists (references to the same dict objects)
-            for item in self.sorted_by_name:
-                if item['file_path'] == file_path:
-                    item['preview_url'] = preview_url
-                    break
-                    
-            for item in self.sorted_by_date:
-                if item['file_path'] == file_path:
-                    item['preview_url'] = preview_url
-                    break
                     
             return True

py/services/model_hash_index.py

@@ -63,16 +63,16 @@ class ModelHashIndex:
         """Extract filename without extension from path"""
         return os.path.splitext(os.path.basename(file_path))[0]
     
-    def remove_by_path(self, file_path: str) -> None:
+    def remove_by_path(self, file_path: str, hash_val: str = None) -> None:
         """Remove entry by file path"""
         filename = self._get_filename_from_path(file_path)
-        hash_val = None
         
         # Find the hash for this file path
-        for h, p in self._hash_to_path.items():
-            if p == file_path:
-                hash_val = h
-                break
+        if hash_val is None:
+            for h, p in self._hash_to_path.items():
+                if p == file_path:
+                    hash_val = h
+                    break
         
         # If we didn't find a hash, nothing to do
         if not hash_val:
@@ -219,7 +219,7 @@ class ModelHashIndex:
         return set(self._filename_to_hash.keys())
     
     def get_duplicate_hashes(self) -> Dict[str, List[str]]:
-        """Get dictionary of duplicate hashes and their paths"""
+        """Get dictionary of duplicate hashes and their paths"""    
         return self._duplicate_hashes
     
     def get_duplicate_filenames(self) -> Dict[str, List[str]]:

py/services/model_scanner.py

@@ -9,7 +9,8 @@ import msgpack  # Add MessagePack import for efficient serialization
 
 from ..utils.models import BaseModelMetadata
 from ..config import config
-from ..utils.file_utils import load_metadata, get_file_info, find_preview_file, save_metadata
+from ..utils.file_utils import find_preview_file
+from ..utils.metadata_manager import MetadataManager
 from .model_cache import ModelCache
 from .model_hash_index import ModelHashIndex
 from ..utils.constants import PREVIEW_EXTENSIONS
@@ -48,10 +49,25 @@ class ModelScanner:
         self._is_initializing = False  # Flag to track initialization state
         self._excluded_models = []  # List to track excluded models
         self._dirs_last_modified = {}  # Track directory modification times
+        self._use_cache_files = False  # Flag to control cache file usage, default to disabled
+        
+        # Clear cache files if disabled
+        if not self._use_cache_files:
+            self._clear_cache_files()
         
         # Register this service
         asyncio.create_task(self._register_service())
-        
+    
+    def _clear_cache_files(self):
+        """Clear existing cache files if they exist"""
+        try:
+            cache_path = self._get_cache_file_path()
+            if cache_path and os.path.exists(cache_path):
+                os.remove(cache_path)
+                logger.info(f"Cleared {self.model_type} cache file: {cache_path}")
+        except Exception as e:
+            logger.error(f"Error clearing {self.model_type} cache file: {e}")
+    
     async def _register_service(self):
         """Register this instance with the ServiceRegistry"""
         service_name = f"{self.model_type}_scanner"
@@ -93,6 +109,10 @@ class ModelScanner:
 
     async def _save_cache_to_disk(self) -> bool:
         """Save cache data to disk using MessagePack"""
+        if not self._use_cache_files:
+            logger.debug(f"Cache files disabled for {self.model_type}, skipping save")
+            return False
+            
         if self._cache is None or not self._cache.raw_data:
             logger.debug(f"No {self.model_type} cache data to save")
             return False
@@ -172,24 +192,15 @@ class ModelScanner:
         if cache_data.get("model_type") != self.model_type:
             logger.info(f"Cache invalid - model type mismatch. Got: {cache_data.get('model_type')}, Expected: {self.model_type}")
             return False
-            
-        # Check if directories have changed
-        # stored_dirs = cache_data.get("dirs_last_modified", {})
-        # current_dirs = self._get_dirs_last_modified()
-        
-        # If directory structure has changed, cache is invalid
-        # if set(stored_dirs.keys()) != set(current_dirs.keys()):
-        #     logger.info(f"Cache invalid - directory structure changed. Stored: {set(stored_dirs.keys())}, Current: {set(current_dirs.keys())}")
-        #     return False
-            
-        # Remove the modification time check to make cache validation less strict
-        # This allows the cache to be valid even when files have changed
-        # Users can explicitly refresh the cache when needed
                 
         return True
         
     async def _load_cache_from_disk(self) -> bool:
         """Load cache data from disk using MessagePack"""
+        if not self._use_cache_files:
+            logger.info(f"Cache files disabled for {self.model_type}, skipping load")
+            return False
+            
         start_time = time.time()
         cache_path = self._get_cache_file_path()
         if not cache_path or not os.path.exists(cache_path):
@@ -659,26 +670,33 @@ class ModelScanner:
                     batch = new_files[i:i+batch_size]
                     for path in batch:
                         try:
-                            model_data = await self.scan_single_model(path)
-                            if model_data:
-                                # Add to cache
-                                self._cache.raw_data.append(model_data)
-                                
-                                # Update hash index if available
-                                if 'sha256' in model_data and 'file_path' in model_data:
-                                    self._hash_index.add_entry(model_data['sha256'].lower(), model_data['file_path'])
-                                
-                                # Update tags count
-                                if 'tags' in model_data and model_data['tags']:
-                                    for tag in model_data['tags']:
-                                        self._tags_count[tag] = self._tags_count.get(tag, 0) + 1
-                                        
-                                total_added += 1
+                            # Find the appropriate root path for this file
+                            root_path = None
+                            for potential_root in self.get_model_roots():
+                                if path.startswith(potential_root):
+                                    root_path = potential_root
+                                    break
+                            
+                            if root_path:
+                                model_data = await self._process_model_file(path, root_path)
+                                if model_data:
+                                    # Add to cache
+                                    self._cache.raw_data.append(model_data)
+                                    
+                                    # Update hash index if available
+                                    if 'sha256' in model_data and 'file_path' in model_data:
+                                        self._hash_index.add_entry(model_data['sha256'].lower(), model_data['file_path'])
+                                    
+                                    # Update tags count
+                                    if 'tags' in model_data and model_data['tags']:
+                                        for tag in model_data['tags']:
+                                            self._tags_count[tag] = self._tags_count.get(tag, 0) + 1
+                                            
+                                    total_added += 1
+                            else:
+                                logger.error(f"Could not determine root path for {path}")
                         except Exception as e:
                             logger.error(f"Error adding {path} to cache: {e}")
-                    
-                    # Yield control after each batch
-                    await asyncio.sleep(0)
             
             # Find missing files (in cache but not in filesystem)
             missing_files = cached_paths - found_paths
@@ -731,36 +749,17 @@ class ModelScanner:
         """Scan all model directories and return metadata"""
         raise NotImplementedError("Subclasses must implement scan_all_models")
     
+    def is_initializing(self) -> bool:
+        """Check if the scanner is currently initializing"""
+        return self._is_initializing
+    
     def get_model_roots(self) -> List[str]:
         """Get model root directories"""
         raise NotImplementedError("Subclasses must implement get_model_roots")
-
-    async def scan_single_model(self, file_path: str) -> Optional[Dict]:
-        """Scan a single model file and return its metadata"""
-        try:
-            if not os.path.exists(os.path.realpath(file_path)):
-                return None
-                
-            # Get basic file info
-            metadata = await self._get_file_info(file_path)
-            if not metadata:
-                return None
-                
-            folder = self._calculate_folder(file_path)
-                    
-            # Ensure folder field exists
-            metadata_dict = metadata.to_dict()
-            metadata_dict['folder'] = folder or ''
-            
-            return metadata_dict
-            
-        except Exception as e:
-            logger.error(f"Error scanning {file_path}: {e}")
-            return None
     
-    async def _get_file_info(self, file_path: str) -> Optional[BaseModelMetadata]:
+    async def _create_default_metadata(self, file_path: str) -> Optional[BaseModelMetadata]:
         """Get model file info and metadata (extensible for different model types)"""
-        return await get_file_info(file_path, self.model_class)
+        return await MetadataManager.create_default_metadata(file_path, self.model_class)
     
     def _calculate_folder(self, file_path: str) -> str:
         """Calculate the folder path for a model file"""
@@ -773,7 +772,7 @@ class ModelScanner:
     # Common methods shared between scanners
     async def _process_model_file(self, file_path: str, root_path: str) -> Dict:
         """Process a single model file and return its metadata"""
-        metadata = await load_metadata(file_path, self.model_class)
+        metadata = await MetadataManager.load_metadata(file_path, self.model_class)
         
         if metadata is None:
             civitai_info_path = f"{os.path.splitext(file_path)[0]}.civitai.info"
@@ -789,7 +788,7 @@ class ModelScanner:
                     
                         metadata = self.model_class.from_civitai_info(version_info, file_info, file_path)
                         metadata.preview_url = find_preview_file(file_name, os.path.dirname(file_path))
-                        await save_metadata(file_path, metadata)
+                        await MetadataManager.save_metadata(file_path, metadata)
                         logger.debug(f"Created metadata from .civitai.info for {file_path}")
                 except Exception as e:
                     logger.error(f"Error creating metadata from .civitai.info for {file_path}: {e}")
@@ -816,13 +815,13 @@ class ModelScanner:
                                 metadata.modelDescription = version_info['model']['description']
                         
                         # Save the updated metadata
-                        await save_metadata(file_path, metadata)
+                        await MetadataManager.save_metadata(file_path, metadata)
                         logger.debug(f"Updated metadata with civitai info for {file_path}")
                     except Exception as e:
                         logger.error(f"Error restoring civitai data from .civitai.info for {file_path}: {e}")
             
         if metadata is None:
-            metadata = await self._get_file_info(file_path)
+            metadata = await self._create_default_metadata(file_path)
         
         model_data = metadata.to_dict()
         
@@ -872,9 +871,7 @@ class ModelScanner:
                     logger.warning(f"Model {model_id} appears to be deleted from Civitai (404 response)")
                     model_data['civitai_deleted'] = True
                     
-                    metadata_path = os.path.splitext(file_path)[0] + '.metadata.json'
-                    with open(metadata_path, 'w', encoding='utf-8') as f:
-                        json.dump(model_data, f, indent=2, ensure_ascii=False)
+                    await MetadataManager.save_metadata(file_path, model_data)
                 
                 elif model_metadata:
                     logger.debug(f"Updating metadata for {file_path} with model ID {model_id}")
@@ -887,9 +884,7 @@ class ModelScanner:
 
                     model_data['civitai']['creator'] = model_metadata['creator']
                     
-                    metadata_path = os.path.splitext(file_path)[0] + '.metadata.json'
-                    with open(metadata_path, 'w', encoding='utf-8') as f:
-                        json.dump(model_data, f, indent=2, ensure_ascii=False)
+                    await MetadataManager.save_metadata(file_path, model_data)
         except Exception as e:
             logger.error(f"Failed to update metadata from Civitai for {file_path}: {e}")
 
@@ -995,26 +990,6 @@ class ModelScanner:
             real_source = os.path.realpath(source_path)
             real_target = os.path.realpath(target_file)
             
-            file_size = os.path.getsize(real_source)
-            
-            # Get the appropriate file monitor through ServiceRegistry
-            if self.model_type == "lora":
-                monitor = await ServiceRegistry.get_lora_monitor()
-            elif self.model_type == "checkpoint":
-                monitor = await ServiceRegistry.get_checkpoint_monitor()
-            else:
-                monitor = None
-                
-            if monitor:
-                monitor.handler.add_ignore_path(
-                    real_source,
-                    file_size
-                )
-                monitor.handler.add_ignore_path(
-                    real_target,
-                    file_size
-                )
-            
             shutil.move(real_source, real_target)
             
             # Move all associated files with the same base name
@@ -1068,15 +1043,14 @@ class ModelScanner:
             
             metadata['file_path'] = model_path.replace(os.sep, '/')
             
-            if 'preview_url' in metadata:
+            if 'preview_url' in metadata and metadata['preview_url']:
                 preview_dir = os.path.dirname(model_path)
                 preview_name = os.path.splitext(os.path.basename(metadata['preview_url']))[0]
                 preview_ext = os.path.splitext(metadata['preview_url'])[1]
                 new_preview_path = os.path.join(preview_dir, f"{preview_name}{preview_ext}")
                 metadata['preview_url'] = new_preview_path.replace(os.sep, '/')
             
-            with open(metadata_path, 'w', encoding='utf-8') as f:
-                json.dump(metadata, f, indent=2, ensure_ascii=False)
+            await MetadataManager.save_metadata(metadata_path, metadata)
 
             return metadata
                 
@@ -1210,12 +1184,13 @@ class ModelScanner:
         """Get list of excluded model file paths"""
         return self._excluded_models.copy()
 
-    async def update_preview_in_cache(self, file_path: str, preview_url: str) -> bool:
+    async def update_preview_in_cache(self, file_path: str, preview_url: str, preview_nsfw_level: int) -> bool:
         """Update preview URL in cache for a specific lora
         
         Args:
             file_path: The file path of the lora to update
             preview_url: The new preview URL
+            preview_nsfw_level: The NSFW level of the preview
             
         Returns:
             bool: True if the update was successful, False if cache doesn't exist or lora wasn't found
@@ -1223,7 +1198,7 @@ class ModelScanner:
         if self._cache is None:
             return False
 
-        updated = await self._cache.update_preview_url(file_path, preview_url)
+        updated = await self._cache.update_preview_url(file_path, preview_url, preview_nsfw_level)
         if updated:
             # Save updated cache to disk
             await self._save_cache_to_disk()
@@ -1246,9 +1221,6 @@ class ModelScanner:
                     'results': []
                 }
             
-            # Get the file monitor
-            file_monitor = getattr(self, 'file_monitor', None)
-            
             # Keep track of success and failures
             results = []
             total_deleted = 0
@@ -1269,8 +1241,7 @@ class ModelScanner:
                     from ..utils.routes_common import ModelRouteUtils
                     deleted_files = await ModelRouteUtils.delete_model_files(
                         target_dir, 
-                        file_name,
-                        file_monitor
+                        file_name
                     )
                     
                     if deleted_files:
@@ -1352,7 +1323,7 @@ class ModelScanner:
                     hash_val = model.get('sha256', '').lower()
                     
                     # Remove from hash index
-                    self._hash_index.remove_by_path(file_path)
+                    self._hash_index.remove_by_path(file_path, hash_val)
                     
                     # Check and clean up duplicates
                     self._cleanup_duplicates_after_removal(hash_val, file_name)

py/services/service_registry.py

@@ -58,26 +58,6 @@ class ServiceRegistry:
             scanner = await CheckpointScanner.get_instance()
             await cls.register_service("checkpoint_scanner", scanner)
         return scanner
-    
-    @classmethod
-    async def get_lora_monitor(cls):
-        """Get the LoraFileMonitor instance"""
-        from .file_monitor import LoraFileMonitor
-        monitor = await cls.get_service("lora_monitor")
-        if monitor is None:
-            monitor = await LoraFileMonitor.get_instance()
-            await cls.register_service("lora_monitor", monitor)
-        return monitor
-    
-    @classmethod
-    async def get_checkpoint_monitor(cls):
-        """Get the CheckpointFileMonitor instance"""
-        from .file_monitor import CheckpointFileMonitor
-        monitor = await cls.get_service("checkpoint_monitor")
-        if monitor is None:
-            monitor = await CheckpointFileMonitor.get_instance()
-            await cls.register_service("checkpoint_monitor", monitor)
-        return monitor
 
     @classmethod
     async def get_civitai_client(cls):
@@ -95,7 +75,6 @@ class ServiceRegistry:
         from .download_manager import DownloadManager
         manager = await cls.get_service("download_manager")
         if manager is None:
-            # We'll let DownloadManager.get_instance handle file_monitor parameter
             manager = await DownloadManager.get_instance()
             await cls.register_service("download_manager", manager)
         return manager

py/utils/constants.py

@@ -18,7 +18,9 @@ PREVIEW_EXTENSIONS = [
     '.png',
     '.jpeg',
     '.jpg',
-    '.mp4'
+    '.mp4',
+    '.gif',
+    '.webm'
 ]
 
 # Card preview image width
@@ -31,4 +33,7 @@ EXAMPLE_IMAGE_WIDTH = 832
 SUPPORTED_MEDIA_EXTENSIONS = {
     'images': ['.jpg', '.jpeg', '.png', '.webp', '.gif'],
     'videos': ['.mp4', '.webm']
-}
+}
+
+# Valid Lora types
+VALID_LORA_TYPES = ['lora', 'locon', 'dora']

py/utils/example_images_download_manager.py

@@ -0,0 +1,399 @@
+import logging
+import os
+import asyncio
+import json
+import time
+import aiohttp
+from aiohttp import web
+from ..services.service_registry import ServiceRegistry
+from .example_images_processor import ExampleImagesProcessor
+from .example_images_metadata import MetadataUpdater
+
+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
+    'refreshed_models': set()  # Track models that had metadata refreshed
+}
+
+class DownloadManager:
+    """Manages downloading example images for models"""
+    
+    @staticmethod
+    async def start_download(request):
+        """
+        Start downloading example images for models
+        
+        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'])
+            response_progress['refreshed_models'] = list(download_progress['refreshed_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', 0.2)) # Default to 0.2 seconds
+            
+            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(
+                DownloadManager._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'])
+            response_progress['refreshed_models'] = list(download_progress['refreshed_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_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'])
+        response_progress['refreshed_models'] = list(download_progress['refreshed_models'])
+        
+        return web.json_response({
+            'success': True,
+            'is_downloading': is_downloading,
+            'status': response_progress
+        })
+
+    @staticmethod
+    async def pause_download(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_download(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"""
+        global is_downloading, download_progress
+        
+        # Create independent download session
+        connector = aiohttp.TCPConnector(
+            ssl=True,
+            limit=3,
+            force_close=False,
+            enable_cleanup_closed=True
+        )
+        timeout = aiohttp.ClientTimeout(total=None, connect=60, sock_read=60)
+        independent_session = aiohttp.ClientSession(
+            connector=connector,
+            trust_env=True,
+            timeout=timeout
+        )
+        
+        try:
+            # Get 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
+            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:
+                        if model.get('sha256'):
+                            all_models.append((scanner_type, model, scanner))
+            
+            # Update total count
+            download_progress['total'] = len(all_models)
+            logger.info(f"Found {download_progress['total']} models to process")
+            
+            # Process each model
+            for i, (scanner_type, model, scanner) in enumerate(all_models):
+                # Main logic for processing model is here, but actual operations are delegated to other classes
+                was_remote_download = await DownloadManager._process_model(
+                    scanner_type, model, scanner, 
+                    output_dir, optimize, independent_session
+                )
+                
+                # Update progress
+                download_progress['completed'] += 1
+                
+                # Only add delay after remote download of models, and not after processing the last model
+                if was_remote_download and i < len(all_models) - 1 and download_progress['status'] == 'running':
+                    await asyncio.sleep(delay)
+            
+            # 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:
+            # Close the independent session
+            try:
+                await independent_session.close()
+            except Exception as e:
+                logger.error(f"Error closing download session: {e}")
+                
+            # Save final progress to file
+            try:
+                DownloadManager._save_progress(output_dir)
+            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 _process_model(scanner_type, model, scanner, output_dir, optimize, independent_session):
+        """Process a single model download"""
+        global download_progress
+        
+        # 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']}")
+            return False  # Return False to indicate no remote download happened
+        
+        model_hash = model.get('sha256', '').lower()
+        model_name = model.get('model_name', 'Unknown')
+        model_file_path = model.get('file_path', '')
+        model_file_name = model.get('file_name', '')
+        
+        try:
+            # Update current model info
+            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}")
+                return False
+            
+            # Create model directory
+            model_dir = os.path.join(output_dir, model_hash)
+            os.makedirs(model_dir, exist_ok=True)
+            
+            # First check for local example images - local processing doesn't need delay
+            local_images_processed = await ExampleImagesProcessor.process_local_examples(
+                model_file_path, model_file_name, model_name, model_dir, optimize
+            )
+            
+            # If we processed local images, update metadata
+            if local_images_processed:
+                await MetadataUpdater.update_metadata_from_local_examples(
+                    model_hash, model, scanner_type, scanner, model_dir
+                )
+                download_progress['processed_models'].add(model_hash)
+                return False  # Return False to indicate no remote download happened
+            
+            # If no local images, try to download from remote
+            elif model.get('civitai') and model.get('civitai', {}).get('images'):
+                images = model.get('civitai', {}).get('images', [])
+                
+                success, is_stale = await ExampleImagesProcessor.download_model_images(
+                    model_hash, model_name, images, model_dir, optimize, independent_session
+                )
+                
+                # If metadata is stale, try to refresh it
+                if is_stale and model_hash not in download_progress['refreshed_models']:
+                    await MetadataUpdater.refresh_model_metadata(
+                        model_hash, model_name, scanner_type, scanner
+                    )
+                    
+                    # Get the updated model data
+                    updated_model = await MetadataUpdater.get_updated_model(
+                        model_hash, scanner
+                    )
+                    
+                    if updated_model and updated_model.get('civitai', {}).get('images'):
+                        # Retry download with updated metadata
+                        updated_images = updated_model.get('civitai', {}).get('images', [])
+                        success, _ = await ExampleImagesProcessor.download_model_images(
+                            model_hash, model_name, updated_images, model_dir, optimize, independent_session
+                        )
+                
+                # Only mark as processed if all images were downloaded successfully
+                if success:
+                    download_progress['processed_models'].add(model_hash)
+                    
+                return True  # Return True to indicate a remote download happened
+            
+            # Save progress periodically
+            if download_progress['completed'] % 10 == 0 or download_progress['completed'] == download_progress['total'] - 1:
+                DownloadManager._save_progress(output_dir)
+                
+            return False  # Default return if no conditions met
+                
+        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
+            return False  # Return False on exception
+    
+    @staticmethod
+    def _save_progress(output_dir):
+        """Save download progress to file"""
+        global download_progress
+        try:
+            progress_file = os.path.join(output_dir, '.download_progress.json')
+            
+            # Read existing progress file if it exists
+            existing_data = {}
+            if os.path.exists(progress_file):
+                try:
+                    with open(progress_file, 'r', encoding='utf-8') as f:
+                        existing_data = json.load(f)
+                except Exception as e:
+                    logger.warning(f"Failed to read existing progress file: {e}")
+            
+            # Create new progress data
+            progress_data = {
+                'processed_models': list(download_progress['processed_models']),
+                'refreshed_models': list(download_progress['refreshed_models']),
+                'completed': download_progress['completed'],
+                'total': download_progress['total'],
+                'last_update': time.time()
+            }
+            
+            # Preserve existing fields (especially naming_version)
+            for key, value in existing_data.items():
+                if key not in progress_data:
+                    progress_data[key] = value
+            
+            # Write updated progress data
+            with open(progress_file, 'w', encoding='utf-8') as f:
+                json.dump(progress_data, f, indent=2)
+        except Exception as e:
+            logger.error(f"Failed to save progress file: {e}")

py/utils/example_images_file_manager.py

@@ -0,0 +1,201 @@
+import logging
+import os
+import re
+import sys
+import subprocess
+from aiohttp import web
+from ..services.settings_manager import settings
+from ..utils.constants import SUPPORTED_MEDIA_EXTENSIONS
+
+logger = logging.getLogger(__name__)
+
+class ExampleImagesFileManager:
+    """Manages access and operations for example image files"""
+    
+    @staticmethod
+    async def open_folder(request):
+        """
+        Open the example images folder for a specific model
+        
+        Expects a JSON request body with:
+        {
+            "model_hash": "sha256_hash"  # SHA256 hash of the model
+        }
+        """
+        try:
+            # Parse request body
+            data = await request.json()
+            model_hash = data.get('model_hash')
+            
+            if not model_hash:
+                return web.json_response({
+                    'success': False,
+                    'error': 'Missing model_hash parameter'
+                }, status=400)
+            
+            # Get example images path from settings
+            example_images_path = settings.get('example_images_path')
+            if not example_images_path:
+                return web.json_response({
+                    'success': False,
+                    'error': 'No example images path configured. Please set it in the settings panel first.'
+                }, status=400)
+            
+            # Construct folder path for this model
+            model_folder = os.path.join(example_images_path, model_hash)
+            
+            # Check if folder exists
+            if not os.path.exists(model_folder):
+                return web.json_response({
+                    'success': False,
+                    'error': 'No example images found for this model. Download example images first.'
+                }, status=404)
+            
+            # Open folder in file explorer
+            if os.name == 'nt':  # Windows
+                os.startfile(model_folder)
+            elif os.name == 'posix':  # macOS and Linux
+                if sys.platform == 'darwin':  # macOS
+                    subprocess.Popen(['open', model_folder])
+                else:  # Linux
+                    subprocess.Popen(['xdg-open', model_folder])
+            
+            return web.json_response({
+                'success': True,
+                'message': f'Opened example images folder for model {model_hash}'
+            })
+            
+        except Exception as e:
+            logger.error(f"Failed to open example images folder: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)
+
+    @staticmethod
+    async def get_files(request):
+        """
+        Get the list of example image files for a specific model
+        
+        Expects:
+        - model_hash in query parameters
+        
+        Returns:
+        - List of image files and their paths
+        """
+        try:
+            # Get model_hash from query parameters
+            model_hash = request.query.get('model_hash')
+            
+            if not model_hash:
+                return web.json_response({
+                    'success': False,
+                    'error': 'Missing model_hash parameter'
+                }, status=400)
+            
+            # Get example images path from settings
+            example_images_path = settings.get('example_images_path')
+            if not example_images_path:
+                return web.json_response({
+                    'success': False,
+                    'error': 'No example images path configured'
+                }, status=400)
+            
+            # Construct folder path for this model
+            model_folder = os.path.join(example_images_path, model_hash)
+            
+            # Check if folder exists
+            if not os.path.exists(model_folder):
+                return web.json_response({
+                    'success': False, 
+                    'error': 'No example images found for this model',
+                    'files': []
+                }, status=404)
+            
+            # Get list of files in the folder
+            files = []
+            for file in os.listdir(model_folder):
+                file_path = os.path.join(model_folder, file)
+                if os.path.isfile(file_path):
+                    # Check if file is a supported media file
+                    file_ext = os.path.splitext(file)[1].lower()
+                    if (file_ext in SUPPORTED_MEDIA_EXTENSIONS['images'] or 
+                        file_ext in SUPPORTED_MEDIA_EXTENSIONS['videos']):
+                        files.append({
+                            'name': file,
+                            'path': f'/example_images_static/{model_hash}/{file}',
+                            'extension': file_ext,
+                            'is_video': file_ext in SUPPORTED_MEDIA_EXTENSIONS['videos']
+                        })
+            
+            return web.json_response({
+                'success': True,
+                'files': files
+            })
+            
+        except Exception as e:
+            logger.error(f"Failed to get example image files: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)
+    
+    @staticmethod
+    async def has_images(request):
+        """
+        Check if the example images folder for a model exists and is not empty
+        
+        Expects:
+        - model_hash in query parameters
+        
+        Returns:
+        - Boolean indicating whether the folder exists and contains images/videos
+        """
+        try:
+            # Get model_hash from query parameters
+            model_hash = request.query.get('model_hash')
+            
+            if not model_hash:
+                return web.json_response({
+                    'success': False,
+                    'error': 'Missing model_hash parameter'
+                }, status=400)
+            
+            # Get example images path from settings
+            example_images_path = settings.get('example_images_path')
+            if not example_images_path:
+                return web.json_response({
+                    'has_images': False
+                })
+            
+            # Construct folder path for this model
+            model_folder = os.path.join(example_images_path, model_hash)
+            
+            # Check if folder exists
+            if not os.path.exists(model_folder) or not os.path.isdir(model_folder):
+                return web.json_response({
+                    'has_images': False
+                })
+            
+            # Check if folder contains any supported media files
+            for file in os.listdir(model_folder):
+                file_path = os.path.join(model_folder, file)
+                if os.path.isfile(file_path):
+                    file_ext = os.path.splitext(file)[1].lower()
+                    if (file_ext in SUPPORTED_MEDIA_EXTENSIONS['images'] or 
+                        file_ext in SUPPORTED_MEDIA_EXTENSIONS['videos']):
+                        return web.json_response({
+                            'has_images': True
+                        })
+            
+            # If reached here, folder exists but has no supported media files
+            return web.json_response({
+                'has_images': False
+            })
+            
+        except Exception as e:
+            logger.error(f"Failed to check example images folder: {e}", exc_info=True)
+            return web.json_response({
+                'has_images': False,
+                'error': str(e)
+            })

py/utils/example_images_metadata.py

@@ -0,0 +1,390 @@
+import logging
+import os
+import re
+from ..utils.metadata_manager import MetadataManager
+from ..utils.routes_common import ModelRouteUtils
+from ..utils.constants import SUPPORTED_MEDIA_EXTENSIONS
+from ..utils.exif_utils import ExifUtils
+from ..recipes.constants import GEN_PARAM_KEYS
+
+logger = logging.getLogger(__name__)
+
+class MetadataUpdater:
+    """Handles updating model metadata related to example images"""
+    
+    @staticmethod
+    async def refresh_model_metadata(model_hash, model_name, scanner_type, scanner):
+        """Refresh model metadata from CivitAI
+        
+        Args:
+            model_hash: SHA256 hash of the model
+            model_name: Model name (for logging)
+            scanner_type: Scanner type ('lora' or 'checkpoint')
+            scanner: Scanner instance for this model type
+            
+        Returns:
+            bool: True if metadata was successfully refreshed, False otherwise
+        """
+        from ..utils.example_images_download_manager import download_progress
+        
+        try:
+            # Find the model in the scanner cache
+            cache = await scanner.get_cached_data()
+            model_data = None
+            
+            for item in cache.raw_data:
+                if item.get('sha256') == model_hash:
+                    model_data = item
+                    break
+            
+            if not model_data:
+                logger.warning(f"Model {model_name} with hash {model_hash} not found in cache")
+                return False
+            
+            file_path = model_data.get('file_path')
+            if not file_path:
+                logger.warning(f"Model {model_name} has no file path")
+                return False
+            
+            # Track that we're refreshing this model
+            download_progress['refreshed_models'].add(model_hash)
+            
+            # Use ModelRouteUtils to refresh metadata
+            async def update_cache_func(old_path, new_path, metadata):
+                return await scanner.update_single_model_cache(old_path, new_path, metadata)
+            
+            success = await ModelRouteUtils.fetch_and_update_model(
+                model_hash, 
+                file_path, 
+                model_data,
+                update_cache_func
+            )
+            
+            if success:
+                logger.info(f"Successfully refreshed metadata for {model_name}")
+                return True
+            else:
+                logger.warning(f"Failed to refresh metadata for {model_name}")
+                return False
+                
+        except Exception as e:
+            error_msg = f"Error refreshing metadata for {model_name}: {str(e)}"
+            logger.error(error_msg, exc_info=True)
+            download_progress['errors'].append(error_msg)
+            download_progress['last_error'] = error_msg
+            return False
+    
+    @staticmethod
+    async def get_updated_model(model_hash, scanner):
+        """Get updated model data
+        
+        Args:
+            model_hash: SHA256 hash of the model
+            scanner: Scanner instance
+            
+        Returns:
+            dict: Updated model data or None if not found
+        """
+        cache = await scanner.get_cached_data()
+        for item in cache.raw_data:
+            if item.get('sha256') == model_hash:
+                return item
+        return None
+    
+    @staticmethod
+    async def update_metadata_from_local_examples(model_hash, model, scanner_type, scanner, model_dir):
+        """Update model metadata with local example image information
+        
+        Args:
+            model_hash: SHA256 hash of the model
+            model: Model data dictionary
+            scanner_type: Scanner type ('lora' or 'checkpoint')
+            scanner: Scanner instance for this model type
+            model_dir: Model images directory
+            
+        Returns:
+            bool: True if metadata was successfully updated, False otherwise
+        """
+        try:
+            # Collect local image paths
+            local_images_paths = []
+            if os.path.exists(model_dir):
+                for file in os.listdir(model_dir):
+                    file_path = os.path.join(model_dir, file)
+                    if os.path.isfile(file_path):
+                        file_ext = os.path.splitext(file)[1].lower()
+                        is_supported = (file_ext in SUPPORTED_MEDIA_EXTENSIONS['images'] or
+                                       file_ext in SUPPORTED_MEDIA_EXTENSIONS['videos'])
+                        if is_supported:
+                            local_images_paths.append(file_path)
+            
+            # Check if metadata update is needed (no civitai field or empty images)
+            needs_update = not model.get('civitai') or not model.get('civitai', {}).get('images')
+            
+            if needs_update and local_images_paths:
+                logger.debug(f"Found {len(local_images_paths)} local example images for {model.get('model_name')}, updating metadata")
+                
+                # Create or get civitai field
+                if not model.get('civitai'):
+                    model['civitai'] = {}
+                
+                # Create images array
+                images = []
+                
+                # Generate metadata for each local image/video
+                for path in local_images_paths:
+                    # Determine if video or image
+                    file_ext = os.path.splitext(path)[1].lower()
+                    is_video = file_ext in SUPPORTED_MEDIA_EXTENSIONS['videos']
+                    
+                    # Create image metadata entry
+                    image_entry = {
+                        "url": "",  # Empty URL as required
+                        "nsfwLevel": 0,
+                        "width": 720,  # Default dimensions
+                        "height": 1280,
+                        "type": "video" if is_video else "image",
+                        "meta": None,
+                        "hasMeta": False,
+                        "hasPositivePrompt": False
+                    }
+                    
+                    # If it's an image, try to get actual dimensions (optional enhancement)
+                    try:
+                        from PIL import Image
+                        if not is_video and os.path.exists(path):
+                            with Image.open(path) as img:
+                                image_entry["width"], image_entry["height"] = img.size
+                    except:
+                        # If PIL fails or is unavailable, use default dimensions
+                        pass
+                        
+                    images.append(image_entry)
+                
+                # Update the model's civitai.images field
+                model['civitai']['images'] = images
+                
+                # Save metadata to .metadata.json file
+                file_path = model.get('file_path')
+                try:
+                    # Create a copy of model data without 'folder' field
+                    model_copy = model.copy()
+                    model_copy.pop('folder', None)
+                    
+                    # Write metadata to file
+                    await MetadataManager.save_metadata(file_path, model_copy)
+                    logger.info(f"Saved metadata for {model.get('model_name')}")
+                except Exception as e:
+                    logger.error(f"Failed to save metadata for {model.get('model_name')}: {str(e)}")
+                
+                # Save updated metadata to scanner cache
+                success = await scanner.update_single_model_cache(file_path, file_path, model)
+                if success:
+                    logger.info(f"Successfully updated metadata for {model.get('model_name')} with {len(images)} local examples")
+                    return True
+                else:
+                    logger.warning(f"Failed to update metadata for {model.get('model_name')}")
+            
+            return False
+        except Exception as e:
+            logger.error(f"Error updating metadata from local examples: {str(e)}", exc_info=True)
+            return False
+    
+    @staticmethod
+    async def update_metadata_after_import(model_hash, model_data, scanner, newly_imported_paths):
+        """Update model metadata after importing example images
+        
+        Args:
+            model_hash: SHA256 hash of the model
+            model_data: Model data dictionary
+            scanner: Scanner instance (lora or checkpoint)
+            newly_imported_paths: List of paths to newly imported files
+            
+        Returns:
+            tuple: (regular_images, custom_images) - Both image arrays
+        """
+        try:
+            # Ensure civitai field exists in model_data
+            if not model_data.get('civitai'):
+                model_data['civitai'] = {}
+            
+            # Ensure customImages array exists
+            if not model_data['civitai'].get('customImages'):
+                model_data['civitai']['customImages'] = []
+            
+            # Get current customImages array
+            custom_images = model_data['civitai']['customImages']
+            
+            # Add new image entry for each imported file
+            for path_tuple in newly_imported_paths:
+                path, short_id = path_tuple
+
+                # Determine if video or image
+                file_ext = os.path.splitext(path)[1].lower()
+                is_video = file_ext in SUPPORTED_MEDIA_EXTENSIONS['videos']
+                
+                # Create image metadata entry
+                image_entry = {
+                    "url": "",  # Empty URL as requested
+                    "id": short_id,
+                    "nsfwLevel": 0,
+                    "width": 720,  # Default dimensions
+                    "height": 1280,
+                    "type": "video" if is_video else "image",
+                    "meta": None,
+                    "hasMeta": False,
+                    "hasPositivePrompt": False
+                }
+                
+                # Extract and parse metadata if this is an image
+                if not is_video:
+                    try:
+                        # Extract metadata from image
+                        extracted_metadata = ExifUtils.extract_image_metadata(path)
+                        
+                        if extracted_metadata:
+                            # Parse the extracted metadata to get generation parameters
+                            parsed_meta = MetadataUpdater._parse_image_metadata(extracted_metadata)
+                            
+                            if parsed_meta:
+                                image_entry["meta"] = parsed_meta
+                                image_entry["hasMeta"] = True
+                                image_entry["hasPositivePrompt"] = bool(parsed_meta.get("prompt", ""))
+                                logger.debug(f"Extracted metadata from {os.path.basename(path)}")
+                    except Exception as e:
+                        logger.warning(f"Failed to extract metadata from {os.path.basename(path)}: {e}")
+                
+                # If it's an image, try to get actual dimensions
+                try:
+                    from PIL import Image
+                    if not is_video and os.path.exists(path):
+                        with Image.open(path) as img:
+                            image_entry["width"], image_entry["height"] = img.size
+                except:
+                    # If PIL fails or is unavailable, use default dimensions
+                    pass
+                    
+                # Append to existing customImages array
+                custom_images.append(image_entry)
+            
+            # Save metadata to .metadata.json file
+            file_path = model_data.get('file_path')
+            if file_path:
+                try:
+                    # Create a copy of model data without 'folder' field
+                    model_copy = model_data.copy()
+                    model_copy.pop('folder', None)
+                    
+                    # Write metadata to file
+                    await MetadataManager.save_metadata(file_path, model_copy)
+                    logger.info(f"Saved metadata for {model_data.get('model_name')}")
+                except Exception as e:
+                    logger.error(f"Failed to save metadata: {str(e)}")
+            
+            # Save updated metadata to scanner cache
+            if file_path:
+                await scanner.update_single_model_cache(file_path, file_path, model_data)
+            
+            # Get regular images array (might be None)
+            regular_images = model_data['civitai'].get('images', [])
+            
+            # Return both image arrays
+            return regular_images, custom_images
+                
+        except Exception as e:
+            logger.error(f"Failed to update metadata after import: {e}", exc_info=True)
+            return [], []
+    
+    @staticmethod
+    def _parse_image_metadata(user_comment):
+        """Parse metadata from image to extract generation parameters
+        
+        Args:
+            user_comment: Metadata string extracted from image
+            
+        Returns:
+            dict: Parsed metadata with generation parameters
+        """
+        if not user_comment:
+            return None
+            
+        try:
+            # Initialize metadata dictionary
+            metadata = {}
+            
+            # Split on Negative prompt if it exists
+            if "Negative prompt:" in user_comment:
+                parts = user_comment.split('Negative prompt:', 1)
+                prompt = parts[0].strip()
+                negative_and_params = parts[1] if len(parts) > 1 else ""
+            else:
+                # No negative prompt section
+                param_start = re.search(r'Steps: \d+', user_comment)
+                if param_start:
+                    prompt = user_comment[:param_start.start()].strip()
+                    negative_and_params = user_comment[param_start.start():]
+                else:
+                    prompt = user_comment.strip()
+                    negative_and_params = ""
+            
+            # Add prompt if it's in GEN_PARAM_KEYS
+            if 'prompt' in GEN_PARAM_KEYS:
+                metadata['prompt'] = prompt
+            
+            # Extract negative prompt and parameters
+            if negative_and_params:
+                # If we split on "Negative prompt:", check for params section
+                if "Negative prompt:" in user_comment:
+                    param_start = re.search(r'Steps: ', negative_and_params)
+                    if param_start:
+                        neg_prompt = negative_and_params[:param_start.start()].strip()
+                        if 'negative_prompt' in GEN_PARAM_KEYS:
+                            metadata['negative_prompt'] = neg_prompt
+                        params_section = negative_and_params[param_start.start():]
+                    else:
+                        if 'negative_prompt' in GEN_PARAM_KEYS:
+                            metadata['negative_prompt'] = negative_and_params.strip()
+                        params_section = ""
+                else:
+                    # No negative prompt, entire section is params
+                    params_section = negative_and_params
+                
+                # Extract generation parameters
+                if params_section:
+                    # Extract basic parameters
+                    param_pattern = r'([A-Za-z\s]+): ([^,]+)'
+                    params = re.findall(param_pattern, params_section)
+                    
+                    for key, value in params:
+                        clean_key = key.strip().lower().replace(' ', '_')
+                        
+                        # Skip if not in recognized gen param keys
+                        if clean_key not in GEN_PARAM_KEYS:
+                            continue
+                            
+                        # Convert numeric values
+                        if clean_key in ['steps', 'seed']:
+                            try:
+                                metadata[clean_key] = int(value.strip())
+                            except ValueError:
+                                metadata[clean_key] = value.strip()
+                        elif clean_key in ['cfg_scale']:
+                            try:
+                                metadata[clean_key] = float(value.strip())
+                            except ValueError:
+                                metadata[clean_key] = value.strip()
+                        else:
+                            metadata[clean_key] = value.strip()
+                    
+                    # Extract size if available and add if a recognized key
+                    size_match = re.search(r'Size: (\d+)x(\d+)', params_section)
+                    if size_match and 'size' in GEN_PARAM_KEYS:
+                        width, height = size_match.groups()
+                        metadata['size'] = f"{width}x{height}"
+            
+            # Return metadata if we have any entries
+            return metadata if metadata else None
+            
+        except Exception as e:
+            logger.error(f"Error parsing image metadata: {e}", exc_info=True)
+            return None

py/utils/example_images_migration.py

@@ -0,0 +1,318 @@
+import asyncio
+import logging
+import os
+import re
+import json
+from ..services.settings_manager import settings
+from ..services.service_registry import ServiceRegistry
+from ..utils.metadata_manager import MetadataManager
+from ..utils.example_images_processor import ExampleImagesProcessor
+from ..utils.constants import SUPPORTED_MEDIA_EXTENSIONS
+
+logger = logging.getLogger(__name__)
+
+CURRENT_NAMING_VERSION = 2  # Increment this when naming conventions change
+
+class ExampleImagesMigration:
+    """Handles migrations for example images naming conventions"""
+    
+    @staticmethod
+    async def check_and_run_migrations():
+        """Check if migrations are needed and run them in background"""
+        example_images_path = settings.get('example_images_path')
+        if not example_images_path or not os.path.exists(example_images_path):
+            logger.debug("No example images path configured or path doesn't exist, skipping migrations")
+            return
+        
+        # Check current version from progress file
+        current_version = 0
+        progress_file = os.path.join(example_images_path, '.download_progress.json')
+        if os.path.exists(progress_file):
+            try:
+                with open(progress_file, 'r', encoding='utf-8') as f:
+                    progress_data = json.load(f)
+                    current_version = progress_data.get('naming_version', 0)
+            except Exception as e:
+                logger.error(f"Failed to load progress file for migration check: {e}")
+        
+        # If current version is less than target version, start migration
+        if current_version < CURRENT_NAMING_VERSION:
+            logger.info(f"Starting example images naming migration from v{current_version} to v{CURRENT_NAMING_VERSION}")
+            # Start migration in background task
+            asyncio.create_task(
+                ExampleImagesMigration.run_migrations(example_images_path, current_version, CURRENT_NAMING_VERSION)
+            )
+    
+    @staticmethod
+    async def run_migrations(example_images_path, from_version, to_version):
+        """Run necessary migrations based on version difference"""
+        try:
+            # Get all model folders
+            model_folders = []
+            for item in os.listdir(example_images_path):
+                item_path = os.path.join(example_images_path, item)
+                if os.path.isdir(item_path) and len(item) == 64:  # SHA256 hash is 64 chars
+                    model_folders.append(item_path)
+            
+            logger.info(f"Found {len(model_folders)} model folders to check for migration")
+            
+            # Apply migrations sequentially
+            if from_version < 1 and to_version >= 1:
+                await ExampleImagesMigration._migrate_to_v1(model_folders)
+            
+            if from_version < 2 and to_version >= 2:
+                await ExampleImagesMigration._migrate_to_v2(model_folders)
+            
+            # Update version in progress file
+            progress_file = os.path.join(example_images_path, '.download_progress.json')
+            try:
+                progress_data = {}
+                if os.path.exists(progress_file):
+                    with open(progress_file, 'r', encoding='utf-8') as f:
+                        progress_data = json.load(f)
+                
+                progress_data['naming_version'] = to_version
+                
+                with open(progress_file, 'w', encoding='utf-8') as f:
+                    json.dump(progress_data, f, indent=2)
+                    
+                logger.info(f"Example images naming migration to v{to_version} completed")
+                
+            except Exception as e:
+                logger.error(f"Failed to update version in progress file: {e}")
+                
+        except Exception as e:
+            logger.error(f"Error during migration: {e}", exc_info=True)
+    
+    @staticmethod
+    async def _migrate_to_v1(model_folders):
+        """Migrate from 1-based to 0-based indexing"""
+        count = 0
+        for folder in model_folders:
+            has_one_based = False
+            has_zero_based = False
+            files_to_rename = []
+            
+            # Check naming pattern in this folder
+            for file in os.listdir(folder):
+                if re.match(r'image_1\.\w+$', file):
+                    has_one_based = True
+                if re.match(r'image_0\.\w+$', file):
+                    has_zero_based = True
+            
+            # Only migrate folders with 1-based indexing and no 0-based
+            if has_one_based and not has_zero_based:
+                # Create rename mapping
+                for file in os.listdir(folder):
+                    match = re.match(r'image_(\d+)\.(\w+)$', file)
+                    if match:
+                        index = int(match.group(1))
+                        ext = match.group(2)
+                        if index > 0:  # Only rename if index is positive
+                            files_to_rename.append((
+                                file,
+                                f"image_{index-1}.{ext}"
+                            ))
+                
+                # Use temporary names to avoid conflicts
+                for old_name, new_name in files_to_rename:
+                    old_path = os.path.join(folder, old_name)
+                    temp_path = os.path.join(folder, f"temp_{old_name}")
+                    try:
+                        os.rename(old_path, temp_path)
+                    except Exception as e:
+                        logger.error(f"Failed to rename {old_path} to {temp_path}: {e}")
+                
+                # Rename from temporary names to final names
+                for old_name, new_name in files_to_rename:
+                    temp_path = os.path.join(folder, f"temp_{old_name}")
+                    new_path = os.path.join(folder, new_name)
+                    try:
+                        os.rename(temp_path, new_path)
+                        logger.debug(f"Renamed {old_name} to {new_name} in {folder}")
+                    except Exception as e:
+                        logger.error(f"Failed to rename {temp_path} to {new_path}: {e}")
+                
+                count += 1
+                
+                # Give other tasks a chance to run
+                if count % 10 == 0:
+                    await asyncio.sleep(0)
+        
+        logger.info(f"Migrated {count} folders from 1-based to 0-based indexing")
+    
+    @staticmethod
+    async def _migrate_to_v2(model_folders):
+        """
+        Migrate to v2 naming scheme:
+        - Move custom examples from images array to customImages array
+        - Rename files from image_<index>.<ext> to custom_<short_id>.<ext>
+        - Add id field to each custom image entry
+        """
+        count = 0
+        updated_models = 0
+        migration_errors = 0
+        
+        # Get scanner instances
+        lora_scanner = await ServiceRegistry.get_lora_scanner()
+        checkpoint_scanner = await ServiceRegistry.get_checkpoint_scanner()
+        
+        # Wait until scanners are initialized
+        scanners = [lora_scanner, checkpoint_scanner]
+        for scanner in scanners:
+            if scanner.is_initializing():
+                logger.info("Waiting for scanners to complete initialization before starting migration...")
+                initialized = False
+                retry_count = 0
+                while not initialized and retry_count < 120:  # Wait up to 120 seconds
+                    await asyncio.sleep(1)
+                    initialized = not scanner.is_initializing()
+                    retry_count += 1
+                
+                if not initialized:
+                    logger.warning("Scanner initialization timeout - proceeding with migration anyway")
+        
+        logger.info(f"Starting migration to v2 naming scheme for {len(model_folders)} model folders")
+        
+        for folder in model_folders:
+            try:
+                # Extract model hash from folder name
+                model_hash = os.path.basename(folder)
+                if not model_hash or len(model_hash) != 64:
+                    continue
+                
+                # Find the model in scanner cache
+                model_data = None
+                scanner = None
+                
+                for scan_obj in scanners:
+                  if scan_obj.has_hash(model_hash):
+                    cache = await scan_obj.get_cached_data()
+                    for item in cache.raw_data:
+                      if item.get('sha256') == model_hash:
+                        model_data = item
+                        scanner = scan_obj
+                        break
+                  if model_data:
+                    break
+                
+                if not model_data or not scanner:
+                    logger.debug(f"Model with hash {model_hash} not found in cache, skipping migration")
+                    continue
+                
+                # Clone model data to avoid modifying the cache directly
+                model_metadata = model_data.copy()
+                
+                # Check if model has civitai metadata
+                if not model_metadata.get('civitai'):
+                    continue
+                
+                # Get images array
+                images = model_metadata.get('civitai', {}).get('images', [])
+                if not images:
+                    continue
+                
+                # Initialize customImages array if it doesn't exist
+                if not model_metadata['civitai'].get('customImages'):
+                    model_metadata['civitai']['customImages'] = []
+                
+                # Find custom examples (entries with empty url)
+                custom_indices = []
+                for i, image in enumerate(images):
+                    if image.get('url') == "":
+                        custom_indices.append(i)
+                
+                if not custom_indices:
+                    continue
+                    
+                logger.debug(f"Found {len(custom_indices)} custom examples in {model_hash}")
+                
+                # Process each custom example
+                for index in custom_indices:
+                    try:
+                        image_entry = images[index]
+                        
+                        # Determine media type based on the entry type
+                        media_type = 'videos' if image_entry.get('type') == 'video' else 'images'
+                        extensions_to_try = SUPPORTED_MEDIA_EXTENSIONS[media_type]
+                        
+                        # Find the image file by trying possible extensions
+                        old_path = None
+                        old_filename = None
+                        found = False
+                        
+                        for ext in extensions_to_try:
+                            test_path = os.path.join(folder, f"image_{index}{ext}")
+                            if os.path.exists(test_path):
+                                old_path = test_path
+                                old_filename = f"image_{index}{ext}"
+                                found = True
+                                break
+                                
+                        if not found:
+                            logger.warning(f"Could not find file for index {index} in {model_hash}, skipping")
+                            continue
+                        
+                        # Generate short ID for the custom example
+                        short_id = ExampleImagesProcessor.generate_short_id()
+                        
+                        # Get file extension
+                        file_ext = os.path.splitext(old_path)[1]
+                        
+                        # Create new filename
+                        new_filename = f"custom_{short_id}{file_ext}"
+                        new_path = os.path.join(folder, new_filename)
+                        
+                        # Rename the file
+                        try:
+                            os.rename(old_path, new_path)
+                            logger.debug(f"Renamed {old_filename} to {new_filename} in {folder}")
+                        except Exception as e:
+                            logger.error(f"Failed to rename {old_path} to {new_path}: {e}")
+                            continue
+                        
+                        # Create a copy of the image entry with the id field
+                        custom_entry = image_entry.copy()
+                        custom_entry['id'] = short_id
+                        
+                        # Add to customImages array
+                        model_metadata['civitai']['customImages'].append(custom_entry)
+                        
+                        count += 1
+                        
+                    except Exception as e:
+                        logger.error(f"Error migrating custom example at index {index} for {model_hash}: {e}")
+                
+                # Remove custom examples from the original images array
+                model_metadata['civitai']['images'] = [
+                    img for i, img in enumerate(images) if i not in custom_indices
+                ]
+                
+                # Save the updated metadata
+                file_path = model_data.get('file_path')
+                if file_path:
+                    try:
+                        # Create a copy of model data without 'folder' field
+                        model_copy = model_metadata.copy()
+                        model_copy.pop('folder', None)
+                        
+                        # Save metadata to file
+                        await MetadataManager.save_metadata(file_path, model_copy)
+                        
+                        # Update scanner cache
+                        await scanner.update_single_model_cache(file_path, file_path, model_metadata)
+                        
+                        updated_models += 1
+                    except Exception as e:
+                        logger.error(f"Failed to save metadata for {model_hash}: {e}")
+                        migration_errors += 1
+                
+                # Give other tasks a chance to run
+                if count % 10 == 0:
+                    await asyncio.sleep(0)
+                    
+            except Exception as e:
+                logger.error(f"Error migrating folder {folder}: {e}")
+                migration_errors += 1
+        
+        logger.info(f"Migration to v2 complete: migrated {count} custom examples across {updated_models} models with {migration_errors} errors")

py/utils/example_images_processor.py

@@ -0,0 +1,494 @@
+import logging
+import os
+import re
+import tempfile
+import random
+import string
+from aiohttp import web
+from ..utils.constants import SUPPORTED_MEDIA_EXTENSIONS
+from ..services.service_registry import ServiceRegistry
+from ..services.settings_manager import settings
+from .example_images_metadata import MetadataUpdater
+from ..utils.metadata_manager import MetadataManager
+
+logger = logging.getLogger(__name__)
+
+class ExampleImagesProcessor:
+    """Processes and manipulates example images"""
+
+    @staticmethod
+    def generate_short_id(length=8):
+        """Generate a short random alphanumeric identifier"""
+        chars = string.ascii_lowercase + string.digits
+        return ''.join(random.choice(chars) for _ in range(length))
+    
+    @staticmethod
+    def get_civitai_optimized_url(image_url):
+        """Convert Civitai image URL to its optimized WebP version"""
+        base_pattern = r'(https://image\.civitai\.com/[^/]+/[^/]+)'
+        match = re.match(base_pattern, image_url)
+        
+        if match:
+            base_url = match.group(1)
+            return f"{base_url}/optimized=true/image.webp"
+        
+        return image_url
+    
+    @staticmethod
+    async def download_model_images(model_hash, model_name, model_images, model_dir, optimize, independent_session):
+        """Download images for a single model
+        
+        Returns:
+            tuple: (success, is_stale_metadata) - whether download was successful, whether metadata is stale
+        """
+        model_success = True
+        
+        for i, image in enumerate(model_images):
+            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 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
+            
+            # Use 0-based indexing instead of 1-based indexing
+            save_filename = f"image_{i}{image_ext}"
+            
+            # If optimizing images and this is a Civitai image, use their pre-optimized WebP version
+            if is_image and optimize and 'civitai.com' in image_url:
+                image_url = ExampleImagesProcessor.get_civitai_optimized_url(image_url)
+                save_filename = f"image_{i}.webp"
+            
+            # 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}")
+                
+                # Download directly using the independent session
+                async with independent_session.get(image_url, timeout=60) as response:
+                    if response.status == 200:
+                        with open(save_path, 'wb') as f:
+                            async for chunk in response.content.iter_chunked(8192):
+                                if chunk:
+                                    f.write(chunk)
+                    elif response.status == 404:
+                        error_msg = f"Failed to download file: {image_url}, status code: 404 - Model metadata might be stale"
+                        logger.warning(error_msg)
+                        model_success = False  # Mark the model as failed due to 404 error
+                        # Return early to trigger metadata refresh attempt
+                        return False, True  # (success, is_metadata_stale)
+                    else:
+                        error_msg = f"Failed to download file: {image_url}, status code: {response.status}"
+                        logger.warning(error_msg)
+                        model_success = False  # Mark the model as failed
+            except Exception as e:
+                error_msg = f"Error downloading file {image_url}: {str(e)}"
+                logger.error(error_msg)
+                model_success = False  # Mark the model as failed
+        
+        return model_success, False  # (success, is_metadata_stale)
+    
+    @staticmethod
+    async def process_local_examples(model_file_path, model_file_name, model_name, model_dir, optimize):
+        """Process local example images
+        
+        Returns:
+            bool: True if local images were processed successfully, False otherwise
+        """
+        try:
+            if not model_file_path or not os.path.exists(os.path.dirname(model_file_path)):
+                return False
+                
+            model_dir_path = os.path.dirname(model_file_path)
+            local_images = []
+            
+            # Look for files with pattern: filename.example.*.ext
+            if model_file_name:
+                example_prefix = f"{model_file_name}.example."
+                
+                if os.path.exists(model_dir_path):
+                    for file in os.listdir(model_dir_path):
+                        file_lower = file.lower()
+                        if file_lower.startswith(example_prefix.lower()):
+                            file_ext = os.path.splitext(file_lower)[1]
+                            is_supported = (file_ext in SUPPORTED_MEDIA_EXTENSIONS['images'] or 
+                                           file_ext in SUPPORTED_MEDIA_EXTENSIONS['videos'])
+                            
+                            if is_supported:
+                                local_images.append(os.path.join(model_dir_path, file))
+            
+            # Process local images if found
+            if local_images:
+                logger.info(f"Found {len(local_images)} local example images for {model_name}")
+                
+                for local_image_path in local_images:
+                    # Extract index from filename
+                    file_name = os.path.basename(local_image_path)
+                    example_prefix = f"{model_file_name}.example."
+                    
+                    try:
+                        # Extract the part between '.example.' and the file extension
+                        index_part = file_name[len(example_prefix):].split('.')[0]
+                        # Try to parse it as an integer
+                        index = int(index_part)
+                        local_ext = os.path.splitext(local_image_path)[1].lower()
+                        save_filename = f"image_{index}{local_ext}"
+                    except (ValueError, IndexError):
+                        # If we can't parse the index, fall back to sequential numbering
+                        logger.warning(f"Could not extract index from {file_name}, using sequential numbering")
+                        local_ext = os.path.splitext(local_image_path)[1].lower()
+                        save_filename = f"image_{len(local_images)}{local_ext}"
+                    
+                    save_path = os.path.join(model_dir, save_filename)
+                    
+                    # Skip if already exists in output directory
+                    if os.path.exists(save_path):
+                        logger.debug(f"File already exists in output: {save_path}")
+                        continue
+                    
+                    # Copy the file
+                    with open(local_image_path, 'rb') as src_file:
+                        with open(save_path, 'wb') as dst_file:
+                            dst_file.write(src_file.read())
+                
+                return True
+            return False
+        except Exception as e:
+            logger.error(f"Error processing local examples for {model_name}: {str(e)}")
+            return False
+            
+    @staticmethod
+    async def import_images(request):
+        """
+        Import local example images
+        
+        Accepts:
+        - multipart/form-data form with model_hash and files fields
+        or
+        - JSON request with model_hash and file_paths
+        
+        Returns:
+        - Success status and list of imported files
+        """
+        try:
+            model_hash = None
+            files_to_import = []
+            temp_files_to_cleanup = []
+            
+            # Check if it's a multipart form-data request (direct file upload)
+            if request.content_type and 'multipart/form-data' in request.content_type:
+                reader = await request.multipart()
+                
+                # First get model_hash
+                field = await reader.next()
+                if field.name == 'model_hash':
+                    model_hash = await field.text()
+                
+                # Then process all files
+                while True:
+                    field = await reader.next()
+                    if field is None:
+                        break
+                        
+                    if field.name == 'files':
+                        # Create a temporary file with appropriate suffix for type detection
+                        file_name = field.filename
+                        file_ext = os.path.splitext(file_name)[1].lower()
+                        
+                        with tempfile.NamedTemporaryFile(suffix=file_ext, delete=False) as tmp_file:
+                            temp_path = tmp_file.name
+                            temp_files_to_cleanup.append(temp_path)  # Track for cleanup
+                            
+                            # Write chunks to the temporary file
+                            while True:
+                                chunk = await field.read_chunk()
+                                if not chunk:
+                                    break
+                                tmp_file.write(chunk)
+                        
+                        # Add to the list of files to process
+                        files_to_import.append(temp_path)
+            else:
+                # Parse JSON request (legacy method using file paths)
+                data = await request.json()
+                model_hash = data.get('model_hash')
+                files_to_import = data.get('file_paths', [])
+            
+            if not model_hash:
+                return web.json_response({
+                    'success': False,
+                    'error': 'Missing model_hash parameter'
+                }, status=400)
+            
+            if not files_to_import:
+                return web.json_response({
+                    'success': False,
+                    'error': 'No files provided to import'
+                }, status=400)
+            
+            # Get example images path
+            example_images_path = settings.get('example_images_path')
+            if not example_images_path:
+                return web.json_response({
+                    'success': False,
+                    'error': 'No example images path configured'
+                }, status=400)
+            
+            # Find the model and get current metadata
+            lora_scanner = await ServiceRegistry.get_lora_scanner()
+            checkpoint_scanner = await ServiceRegistry.get_checkpoint_scanner()
+            
+            model_data = None
+            scanner = None
+            
+            # Check both scanners to find the model
+            for scan_obj in [lora_scanner, checkpoint_scanner]:
+                cache = await scan_obj.get_cached_data()
+                for item in cache.raw_data:
+                    if item.get('sha256') == model_hash:
+                        model_data = item
+                        scanner = scan_obj
+                        break
+                if model_data:
+                    break
+            
+            if not model_data:
+                return web.json_response({
+                    'success': False,
+                    'error': f"Model with hash {model_hash} not found in cache"
+                }, status=404)
+            
+            # Create model folder
+            model_folder = os.path.join(example_images_path, model_hash)
+            os.makedirs(model_folder, exist_ok=True)
+            
+            imported_files = []
+            errors = []
+            newly_imported_paths = []
+            
+            # Process each file path
+            for file_path in files_to_import:
+                try:
+                    # Ensure the file exists
+                    if not os.path.isfile(file_path):
+                        errors.append(f"File not found: {file_path}")
+                        continue
+                    
+                    # Check if file type is supported
+                    file_ext = os.path.splitext(file_path)[1].lower()
+                    if not (file_ext in SUPPORTED_MEDIA_EXTENSIONS['images'] or 
+                            file_ext in SUPPORTED_MEDIA_EXTENSIONS['videos']):
+                        errors.append(f"Unsupported file type: {file_path}")
+                        continue
+                    
+                    # Generate new filename using short ID instead of UUID
+                    short_id = ExampleImagesProcessor.generate_short_id()
+                    new_filename = f"custom_{short_id}{file_ext}"
+                    
+                    dest_path = os.path.join(model_folder, new_filename)
+                    
+                    # Copy the file
+                    import shutil
+                    shutil.copy2(file_path, dest_path)
+                    # Store both the dest_path and the short_id
+                    newly_imported_paths.append((dest_path, short_id))
+                    
+                    # Add to imported files list
+                    imported_files.append({
+                        'name': new_filename,
+                        'path': f'/example_images_static/{model_hash}/{new_filename}',
+                        'extension': file_ext,
+                        'is_video': file_ext in SUPPORTED_MEDIA_EXTENSIONS['videos']
+                    })
+                except Exception as e:
+                    errors.append(f"Error importing {file_path}: {str(e)}")
+            
+            # Update metadata with new example images
+            regular_images, custom_images = await MetadataUpdater.update_metadata_after_import(
+                model_hash, 
+                model_data,
+                scanner,
+                newly_imported_paths
+            )
+            
+            return web.json_response({
+                'success': len(imported_files) > 0,
+                'message': f'Successfully imported {len(imported_files)} files' + 
+                        (f' with {len(errors)} errors' if errors else ''),
+                'files': imported_files,
+                'errors': errors,
+                'regular_images': regular_images,
+                'custom_images': custom_images,
+                "model_file_path": model_data.get('file_path', ''),
+            })
+                
+        except Exception as e:
+            logger.error(f"Failed to import example images: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)
+        finally:
+            # Clean up temporary files
+            for temp_file in temp_files_to_cleanup:
+                try:
+                    os.remove(temp_file)
+                except Exception as e:
+                    logger.error(f"Failed to remove temporary file {temp_file}: {e}")
+
+    @staticmethod
+    async def delete_custom_image(request):
+        """
+        Delete a custom example image for a model
+        
+        Accepts:
+        - JSON request with model_hash and short_id
+        
+        Returns:
+        - Success status and updated image lists
+        """
+        try:
+            # Parse request data
+            data = await request.json()
+            model_hash = data.get('model_hash')
+            short_id = data.get('short_id')
+            
+            if not model_hash or not short_id:
+                return web.json_response({
+                    'success': False,
+                    'error': 'Missing required parameters: model_hash and short_id'
+                }, status=400)
+            
+            # Get example images path
+            example_images_path = settings.get('example_images_path')
+            if not example_images_path:
+                return web.json_response({
+                    'success': False,
+                    'error': 'No example images path configured'
+                }, status=400)
+            
+            # Find the model and get current metadata
+            lora_scanner = await ServiceRegistry.get_lora_scanner()
+            checkpoint_scanner = await ServiceRegistry.get_checkpoint_scanner()
+            
+            model_data = None
+            scanner = None
+            
+            # Check both scanners to find the model
+            for scan_obj in [lora_scanner, checkpoint_scanner]:
+                if scan_obj.has_hash(model_hash):
+                    cache = await scan_obj.get_cached_data()
+                    for item in cache.raw_data:
+                        if item.get('sha256') == model_hash:
+                            model_data = item
+                            scanner = scan_obj
+                            break
+                if model_data:
+                    break
+            
+            if not model_data:
+                return web.json_response({
+                    'success': False,
+                    'error': f"Model with hash {model_hash} not found in cache"
+                }, status=404)
+            
+            # Check if model has custom images
+            if not model_data.get('civitai', {}).get('customImages'):
+                return web.json_response({
+                    'success': False,
+                    'error': f"Model has no custom images"
+                }, status=404)
+            
+            # Find the custom image with matching short_id
+            custom_images = model_data['civitai']['customImages']
+            matching_image = None
+            new_custom_images = []
+            
+            for image in custom_images:
+                if image.get('id') == short_id:
+                    matching_image = image
+                else:
+                    new_custom_images.append(image)
+            
+            if not matching_image:
+                return web.json_response({
+                    'success': False,
+                    'error': f"Custom image with id {short_id} not found"
+                }, status=404)
+            
+            # Find and delete the actual file
+            model_folder = os.path.join(example_images_path, model_hash)
+            file_deleted = False
+            
+            if os.path.exists(model_folder):
+                for filename in os.listdir(model_folder):
+                    if f"custom_{short_id}" in filename:
+                        file_path = os.path.join(model_folder, filename)
+                        try:
+                            os.remove(file_path)
+                            file_deleted = True
+                            logger.info(f"Deleted custom example file: {file_path}")
+                            break
+                        except Exception as e:
+                            return web.json_response({
+                                'success': False,
+                                'error': f"Failed to delete file: {str(e)}"
+                            }, status=500)
+            
+            if not file_deleted:
+                logger.warning(f"File for custom example with id {short_id} not found, but metadata will still be updated")
+            
+            # Update metadata
+            model_data['civitai']['customImages'] = new_custom_images
+            
+            # Save updated metadata to file
+            file_path = model_data.get('file_path')
+            if file_path:
+                try:
+                    # Create a copy of model data without 'folder' field
+                    model_copy = model_data.copy()
+                    model_copy.pop('folder', None)
+                    
+                    # Write metadata to file
+                    await MetadataManager.save_metadata(file_path, model_copy)
+                    logger.debug(f"Saved updated metadata for {model_data.get('model_name')}")
+                except Exception as e:
+                    logger.error(f"Failed to save metadata: {str(e)}")
+                    return web.json_response({
+                        'success': False,
+                        'error': f"Failed to save metadata: {str(e)}"
+                    }, status=500)
+            
+                # Update cache
+                await scanner.update_single_model_cache(file_path, file_path, model_data)
+            
+            # Get regular images array (might be None)
+            regular_images = model_data['civitai'].get('images', [])
+            
+            return web.json_response({
+                'success': True,
+                'regular_images': regular_images,
+                'custom_images': new_custom_images,
+                'model_file_path': model_data.get('file_path', '')
+            })
+                
+        except Exception as e:
+            logger.error(f"Failed to delete custom example image: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)

py/utils/exif_utils.py

@@ -31,7 +31,7 @@ class ExifUtils:
                 # Method 2: Check EXIF UserComment field
                 if img.format not in ['JPEG', 'TIFF', 'WEBP']:
                     # For non-JPEG/TIFF/WEBP images, try to get EXIF through PIL
-                    exif = img._getexif()
+                    exif = img.getexif()
                     if exif and piexif.ExifIFD.UserComment in exif:
                         user_comment = exif[piexif.ExifIFD.UserComment]
                         if isinstance(user_comment, bytes):

py/utils/file_utils.py

@@ -1,13 +1,7 @@
 import logging
 import os
 import hashlib
-import json
-import time
-from typing import Dict, Optional, Type
 
-from .model_utils import determine_base_model
-from .lora_metadata import extract_lora_metadata, extract_checkpoint_metadata
-from .models import BaseModelMetadata, LoraMetadata, CheckpointMetadata
 from .constants import PREVIEW_EXTENSIONS, CARD_PREVIEW_WIDTH
 from .exif_utils import ExifUtils
 
@@ -24,7 +18,12 @@ async def calculate_sha256(file_path: str) -> str:
 def find_preview_file(base_name: str, dir_path: str) -> str:
     """Find preview file for given base name in directory"""
     
-    for ext in PREVIEW_EXTENSIONS:
+    temp_extensions = PREVIEW_EXTENSIONS.copy()
+    # Add example extension for compatibility
+    # https://github.com/willmiao/ComfyUI-Lora-Manager/issues/225
+    # The preview image will be optimized to lora-name.webp, so it won't affect other logic
+    temp_extensions.append(".example.0.jpeg")
+    for ext in temp_extensions:
         full_pattern = os.path.join(dir_path, f"{base_name}{ext}")
         if os.path.exists(full_pattern):
             # Check if this is an image and not already webp
@@ -42,7 +41,7 @@ def find_preview_file(base_name: str, dir_path: str) -> str:
                         target_width=CARD_PREVIEW_WIDTH,
                         format='webp',
                         quality=85,
-                        preserve_metadata=False  # Changed from True to False
+                        preserve_metadata=False
                     )
                     
                     # Save the optimized webp file
@@ -63,199 +62,4 @@ def find_preview_file(base_name: str, dir_path: str) -> str:
 
 def normalize_path(path: str) -> str:
     """Normalize file path to use forward slashes"""
-    return path.replace(os.sep, "/") if path else path
-
-async def get_file_info(file_path: str, model_class: Type[BaseModelMetadata] = LoraMetadata) -> Optional[BaseModelMetadata]:
-    """Get basic file information as a model metadata object"""
-    # First check if file actually exists and resolve symlinks
-    try:
-        real_path = os.path.realpath(file_path)
-        if not os.path.exists(real_path):
-            return None
-    except Exception as e:
-        logger.error(f"Error checking file existence for {file_path}: {e}")
-        return None
-        
-    base_name = os.path.splitext(os.path.basename(file_path))[0]
-    dir_path = os.path.dirname(file_path)
-    
-    preview_url = find_preview_file(base_name, dir_path)
-    
-    # Check if a .json file exists with SHA256 hash to avoid recalculation
-    json_path = f"{os.path.splitext(file_path)[0]}.json"
-    sha256 = None
-    if os.path.exists(json_path):
-        try:
-            with open(json_path, 'r', encoding='utf-8') as f:
-                json_data = json.load(f)
-                if 'sha256' in json_data:
-                    sha256 = json_data['sha256'].lower()
-                    logger.debug(f"Using SHA256 from .json file for {file_path}")
-        except Exception as e:
-            logger.error(f"Error reading .json file for {file_path}: {e}")
-    
-    # If SHA256 is still not found, check for a .sha256 file
-    if sha256 is None:
-        sha256_file = f"{os.path.splitext(file_path)[0]}.sha256"
-        if os.path.exists(sha256_file):
-            try:
-                with open(sha256_file, 'r', encoding='utf-8') as f:
-                    sha256 = f.read().strip().lower()
-                    logger.debug(f"Using SHA256 from .sha256 file for {file_path}")
-            except Exception as e:
-                logger.error(f"Error reading .sha256 file for {file_path}: {e}")
-
-    try:
-        # If we didn't get SHA256 from the .json file, calculate it
-        if not sha256:
-            start_time = time.time()
-            sha256 = await calculate_sha256(real_path)
-            logger.debug(f"Calculated SHA256 for {file_path} in {time.time() - start_time:.2f} seconds")
-        
-        # Create default metadata based on model class
-        if model_class == CheckpointMetadata:
-            metadata = CheckpointMetadata(
-                file_name=base_name,
-                model_name=base_name,
-                file_path=normalize_path(file_path),
-                size=os.path.getsize(real_path),
-                modified=os.path.getmtime(real_path),
-                sha256=sha256,
-                base_model="Unknown",  # Will be updated later
-                preview_url=normalize_path(preview_url),
-                tags=[],
-                modelDescription="",
-                model_type="checkpoint"
-            )
-            
-            # Extract checkpoint-specific metadata
-            # model_info = await extract_checkpoint_metadata(real_path)
-            # metadata.base_model = model_info['base_model']
-            # if 'model_type' in model_info:
-            #     metadata.model_type = model_info['model_type']
-            
-        else:  # Default to LoraMetadata
-            metadata = LoraMetadata(
-                file_name=base_name,
-                model_name=base_name,
-                file_path=normalize_path(file_path),
-                size=os.path.getsize(real_path),
-                modified=os.path.getmtime(real_path),
-                sha256=sha256,
-                base_model="Unknown",  # Will be updated later
-                usage_tips="{}",
-                preview_url=normalize_path(preview_url),
-                tags=[],
-                modelDescription=""
-            )
-            
-            # Extract lora-specific metadata
-            model_info = await extract_lora_metadata(real_path)
-            metadata.base_model = model_info['base_model']
-
-        # Save metadata to file
-        await save_metadata(file_path, metadata)
-        
-        return metadata
-    except Exception as e:
-        logger.error(f"Error getting file info for {file_path}: {e}")
-        return None
-
-async def save_metadata(file_path: str, metadata: BaseModelMetadata) -> None:
-    """Save metadata to .metadata.json file"""
-    metadata_path = f"{os.path.splitext(file_path)[0]}.metadata.json"
-    try:
-        metadata_dict = metadata.to_dict()
-        metadata_dict['file_path'] = normalize_path(metadata_dict['file_path'])
-        metadata_dict['preview_url'] = normalize_path(metadata_dict['preview_url'])
-        
-        with open(metadata_path, 'w', encoding='utf-8') as f:
-            json.dump(metadata_dict, f, indent=2, ensure_ascii=False)
-    except Exception as e:
-        print(f"Error saving metadata to {metadata_path}: {str(e)}")
-
-async def load_metadata(file_path: str, model_class: Type[BaseModelMetadata] = LoraMetadata) -> Optional[BaseModelMetadata]:
-    """Load metadata from .metadata.json file"""
-    metadata_path = f"{os.path.splitext(file_path)[0]}.metadata.json"
-    try:
-        if os.path.exists(metadata_path):
-            with open(metadata_path, 'r', encoding='utf-8') as f:
-                data = json.load(f)
-                
-                needs_update = False
-
-                # Check and normalize base model name
-                normalized_base_model = determine_base_model(data['base_model'])
-                if data['base_model'] != normalized_base_model:
-                    data['base_model'] = normalized_base_model
-                    needs_update = True
-                
-                # Compare paths without extensions
-                stored_path_base = os.path.splitext(data['file_path'])[0]
-                current_path_base = os.path.splitext(normalize_path(file_path))[0]
-                if stored_path_base != current_path_base:
-                    data['file_path'] = normalize_path(file_path)
-                    needs_update = True
-                
-                # TODO: optimize preview image to webp format if not already done
-                preview_url = data.get('preview_url', '')
-                if not preview_url or not os.path.exists(preview_url):
-                    base_name = os.path.splitext(os.path.basename(file_path))[0]
-                    dir_path = os.path.dirname(file_path)
-                    new_preview_url = normalize_path(find_preview_file(base_name, dir_path))
-                    if new_preview_url != preview_url:
-                        data['preview_url'] = new_preview_url
-                        needs_update = True
-                else:
-                    # Compare preview paths without extensions
-                    stored_preview_base = os.path.splitext(preview_url)[0]
-                    current_preview_base = os.path.splitext(normalize_path(preview_url))[0]
-                    if stored_preview_base != current_preview_base:
-                        data['preview_url'] = normalize_path(preview_url)
-                        needs_update = True
-
-                # Ensure all fields are present
-                if 'tags' not in data:
-                    data['tags'] = []
-                    needs_update = True
-                    
-                if 'modelDescription' not in data:
-                    data['modelDescription'] = ""
-                    needs_update = True
-                    
-                # For checkpoint metadata
-                if model_class == CheckpointMetadata and 'model_type' not in data:
-                    data['model_type'] = "checkpoint"
-                    needs_update = True
-                
-                # For lora metadata
-                if model_class == LoraMetadata and 'usage_tips' not in data:
-                    data['usage_tips'] = "{}"
-                    needs_update = True
-                
-                # Update preview_nsfw_level if needed
-                civitai_data = data.get('civitai', {})
-                civitai_images = civitai_data.get('images', []) if civitai_data else []
-                if (data.get('preview_url') and 
-                    data.get('preview_nsfw_level', 0) == 0 and 
-                    civitai_images and 
-                    civitai_images[0].get('nsfwLevel', 0) != 0):
-                    data['preview_nsfw_level'] = civitai_images[0]['nsfwLevel']
-                    # TODO: write to metadata file
-                    # needs_update = True
-
-                if needs_update:
-                    with open(metadata_path, 'w', encoding='utf-8') as f:
-                        json.dump(data, f, indent=2, ensure_ascii=False)
-                
-                return model_class.from_dict(data)
-                
-    except Exception as e:
-        print(f"Error loading metadata from {metadata_path}: {str(e)}")
-    return None
-
-async def update_civitai_metadata(file_path: str, civitai_data: Dict) -> None:
-    """Update metadata file with Civitai data"""
-    metadata = await load_metadata(file_path)
-    metadata['civitai'] = civitai_data
-    await save_metadata(file_path, metadata)
+    return path.replace(os.sep, "/") if path else path

py/utils/metadata_manager.py

@@ -0,0 +1,275 @@
+import os
+import json
+import shutil
+import logging
+from typing import Dict, Optional, Type, Union
+
+from .models import BaseModelMetadata, LoraMetadata
+from .file_utils import normalize_path, find_preview_file, calculate_sha256
+from .lora_metadata import extract_lora_metadata, extract_checkpoint_metadata
+
+logger = logging.getLogger(__name__)
+
+class MetadataManager:
+    """
+    Centralized manager for all metadata operations.
+    
+    This class is responsible for:
+    1. Loading metadata safely with fallback mechanisms
+    2. Saving metadata with atomic operations and backups
+    3. Creating default metadata for models
+    4. Handling unknown fields gracefully
+    """
+    
+    @staticmethod
+    async def load_metadata(file_path: str, model_class: Type[BaseModelMetadata] = LoraMetadata) -> Optional[BaseModelMetadata]:
+        """
+        Load metadata with robust error handling and data preservation.
+        
+        Args:
+            file_path: Path to the model file
+            model_class: Class to instantiate (LoraMetadata, CheckpointMetadata, etc.)
+            
+        Returns:
+            BaseModelMetadata instance or None if file doesn't exist
+        """
+        metadata_path = f"{os.path.splitext(file_path)[0]}.metadata.json"
+        backup_path = f"{metadata_path}.bak"
+        
+        # Try loading the main metadata file
+        if os.path.exists(metadata_path):
+            try:
+                with open(metadata_path, 'r', encoding='utf-8') as f:
+                    data = json.load(f)
+                
+                # Create model instance
+                metadata = model_class.from_dict(data)
+                    
+                # Normalize paths
+                await MetadataManager._normalize_metadata_paths(metadata, file_path)
+                
+                return metadata
+                
+            except json.JSONDecodeError:
+                # JSON parsing error - try to restore from backup
+                logger.warning(f"Invalid JSON in metadata file: {metadata_path}")
+                return await MetadataManager._restore_from_backup(backup_path, file_path, model_class)
+                
+            except Exception as e:
+                # Other errors might be due to unknown fields or schema changes
+                logger.error(f"Error loading metadata from {metadata_path}: {str(e)}")
+                return await MetadataManager._restore_from_backup(backup_path, file_path, model_class)
+        
+        return None
+    
+    @staticmethod
+    async def _restore_from_backup(backup_path: str, file_path: str, model_class: Type[BaseModelMetadata]) -> Optional[BaseModelMetadata]:
+        """
+        Try to restore metadata from backup file
+        
+        Args:
+            backup_path: Path to backup file
+            file_path: Path to the original model file
+            model_class: Class to instantiate
+            
+        Returns:
+            BaseModelMetadata instance or None if restoration fails
+        """
+        if os.path.exists(backup_path):
+            try:
+                logger.info(f"Attempting to restore metadata from backup: {backup_path}")
+                with open(backup_path, 'r', encoding='utf-8') as f:
+                    data = json.load(f)
+                
+                # Process data similarly to normal loading
+                metadata = model_class.from_dict(data)
+                await MetadataManager._normalize_metadata_paths(metadata, file_path)
+                return metadata
+            except Exception as e:
+                logger.error(f"Failed to restore from backup: {str(e)}")
+        
+        return None
+    
+    @staticmethod
+    async def save_metadata(path: str, metadata: Union[BaseModelMetadata, Dict], create_backup: bool = True) -> bool:
+        """
+        Save metadata with atomic write operations and backup creation.
+        
+        Args:
+          path: Path to the model file or directly to the metadata file
+          metadata: Metadata to save (either BaseModelMetadata object or dict)
+          create_backup: Whether to create a backup of existing file
+          
+        Returns:
+          bool: Success or failure
+        """
+        # Determine if the input is a metadata path or a model file path
+        if path.endswith('.metadata.json'):
+            metadata_path = path
+        else:
+            # Use existing logic for model file paths
+            file_path = path
+            metadata_path = f"{os.path.splitext(file_path)[0]}.metadata.json"
+        temp_path = f"{metadata_path}.tmp"
+        backup_path = f"{metadata_path}.bak"
+        
+        try:
+            # Create backup if requested and file exists
+            if create_backup and os.path.exists(metadata_path):
+                try:
+                    shutil.copy2(metadata_path, backup_path)
+                except Exception as e:
+                    logger.warning(f"Failed to create metadata backup: {str(e)}")
+            
+            # Convert to dict if needed
+            if isinstance(metadata, BaseModelMetadata):
+                metadata_dict = metadata.to_dict()
+                # Preserve unknown fields if present
+                if hasattr(metadata, '_unknown_fields'):
+                    metadata_dict.update(metadata._unknown_fields)
+            else:
+                metadata_dict = metadata.copy()
+            
+            # Normalize paths
+            if 'file_path' in metadata_dict:
+                metadata_dict['file_path'] = normalize_path(metadata_dict['file_path'])
+            if 'preview_url' in metadata_dict:
+                metadata_dict['preview_url'] = normalize_path(metadata_dict['preview_url'])
+            
+            # Write to temporary file first
+            with open(temp_path, 'w', encoding='utf-8') as f:
+                json.dump(metadata_dict, f, indent=2, ensure_ascii=False)
+            
+            # Atomic rename operation
+            os.replace(temp_path, metadata_path)
+            return True
+            
+        except Exception as e:
+            logger.error(f"Error saving metadata to {metadata_path}: {str(e)}")
+            # Clean up temporary file if it exists
+            if os.path.exists(temp_path):
+                try:
+                    os.remove(temp_path)
+                except:
+                    pass
+            return False
+    
+    @staticmethod
+    async def create_default_metadata(file_path: str, model_class: Type[BaseModelMetadata] = LoraMetadata) -> Optional[BaseModelMetadata]:
+        """
+        Create basic metadata structure for a model file.
+        This replaces the old get_file_info function with a more appropriately named method.
+        
+        Args:
+            file_path: Path to the model file
+            model_class: Class to instantiate
+            
+        Returns:
+            BaseModelMetadata instance or None if file doesn't exist
+        """
+        # First check if file actually exists and resolve symlinks
+        try:
+            real_path = os.path.realpath(file_path)
+            if not os.path.exists(real_path):
+                return None
+        except Exception as e:
+            logger.error(f"Error checking file existence for {file_path}: {e}")
+            return None
+            
+        try:
+            base_name = os.path.splitext(os.path.basename(file_path))[0]
+            dir_path = os.path.dirname(file_path)
+            
+            # Find preview image
+            preview_url = find_preview_file(base_name, dir_path)
+            
+            # Calculate file hash
+            sha256 = await calculate_sha256(real_path)
+            
+            # Create instance based on model type
+            if model_class.__name__ == "CheckpointMetadata":
+                metadata = model_class(
+                    file_name=base_name,
+                    model_name=base_name,
+                    file_path=normalize_path(file_path),
+                    size=os.path.getsize(real_path),
+                    modified=os.path.getmtime(real_path),
+                    sha256=sha256,
+                    base_model="Unknown",
+                    preview_url=normalize_path(preview_url),
+                    tags=[],
+                    modelDescription="",
+                    model_type="checkpoint",
+                    from_civitai=True
+                )
+            else:  # Default to LoraMetadata
+                metadata = model_class(
+                    file_name=base_name,
+                    model_name=base_name,
+                    file_path=normalize_path(file_path),
+                    size=os.path.getsize(real_path),
+                    modified=os.path.getmtime(real_path),
+                    sha256=sha256,
+                    base_model="Unknown",
+                    preview_url=normalize_path(preview_url),
+                    tags=[],
+                    modelDescription="",
+                    from_civitai=True,
+                    usage_tips="{}"
+                )
+            
+            # Try to extract model-specific metadata
+            await MetadataManager._enrich_metadata(metadata, real_path)
+            
+            # Save the created metadata
+            await MetadataManager.save_metadata(file_path, metadata, create_backup=False)
+            
+            return metadata
+            
+        except Exception as e:
+            logger.error(f"Error creating default metadata for {file_path}: {e}")
+            return None
+    
+    @staticmethod
+    async def _enrich_metadata(metadata: BaseModelMetadata, file_path: str) -> None:
+        """
+        Enrich metadata with model-specific information
+        
+        Args:
+            metadata: Metadata to enrich
+            file_path: Path to the model file
+        """
+        try:
+            if metadata.__class__.__name__ == "LoraMetadata":
+                model_info = await extract_lora_metadata(file_path)
+                metadata.base_model = model_info['base_model']
+            
+            # elif metadata.__class__.__name__ == "CheckpointMetadata":
+            #     model_info = await extract_checkpoint_metadata(file_path)
+            #     metadata.base_model = model_info['base_model']
+            #     if 'model_type' in model_info:
+            #         metadata.model_type = model_info['model_type']
+        except Exception as e:
+            logger.error(f"Error enriching metadata: {str(e)}")
+    
+    @staticmethod
+    async def _normalize_metadata_paths(metadata: BaseModelMetadata, file_path: str) -> None:
+        """
+        Normalize paths in metadata object
+        
+        Args:
+            metadata: Metadata object to update
+            file_path: Current file path for the model
+        """
+        # Check if file path is different from what's in metadata
+        if normalize_path(file_path) != metadata.file_path:
+            metadata.file_path = normalize_path(file_path)
+        
+        # Check if preview exists at the current location
+        preview_url = metadata.preview_url
+        if preview_url and not os.path.exists(preview_url):
+            base_name = os.path.splitext(os.path.basename(file_path))[0]
+            dir_path = os.path.dirname(file_path)
+            new_preview_url = find_preview_file(base_name, dir_path)
+            if new_preview_url:
+                metadata.preview_url = normalize_path(new_preview_url)

py/utils/models.py

@@ -1,5 +1,5 @@
-from dataclasses import dataclass, asdict
-from typing import Dict, Optional, List
+from dataclasses import dataclass, asdict, field
+from typing import Dict, Optional, List, Any
 from datetime import datetime
 import os
 from .model_utils import determine_base_model
@@ -24,6 +24,7 @@ class BaseModelMetadata:
     civitai_deleted: bool = False  # Whether deleted from Civitai
     favorite: bool = False      # Whether the model is a favorite
     exclude: bool = False       # Whether to exclude this model from the cache
+    _unknown_fields: Dict[str, Any] = field(default_factory=dict, repr=False, compare=False)  # Store unknown fields
 
     def __post_init__(self):
         # Initialize empty lists to avoid mutable default parameter issue
@@ -34,11 +35,43 @@ class BaseModelMetadata:
     def from_dict(cls, data: Dict) -> 'BaseModelMetadata':
         """Create instance from dictionary"""
         data_copy = data.copy()
-        return cls(**data_copy)
+        
+        # Use cached fields if available, otherwise compute them
+        if not hasattr(cls, '_known_fields_cache'):
+            known_fields = set()
+            for c in cls.mro():
+                if hasattr(c, '__annotations__'):
+                    known_fields.update(c.__annotations__.keys())
+            cls._known_fields_cache = known_fields
+        
+        known_fields = cls._known_fields_cache
+        
+        # Extract fields that match our class attributes
+        fields_to_use = {k: v for k, v in data_copy.items() if k in known_fields}
+        
+        # Store unknown fields separately
+        unknown_fields = {k: v for k, v in data_copy.items() if k not in known_fields and not k.startswith('_')}
+        
+        # Create instance with known fields
+        instance = cls(**fields_to_use)
+        
+        # Add unknown fields as a separate attribute
+        instance._unknown_fields = unknown_fields
+        
+        return instance
 
     def to_dict(self) -> Dict:
         """Convert to dictionary for JSON serialization"""
-        return asdict(self)
+        result = asdict(self)
+        
+        # Remove private fields
+        result = {k: v for k, v in result.items() if not k.startswith('_')}
+        
+        # Add back unknown fields if they exist
+        if hasattr(self, '_unknown_fields'):
+            result.update(self._unknown_fields)
+            
+        return result
 
     @property
     def modified_datetime(self) -> datetime:

py/utils/routes_common.py

@@ -9,6 +9,7 @@ from .constants import PREVIEW_EXTENSIONS, CARD_PREVIEW_WIDTH
 from ..config import config
 from ..services.civitai_client import CivitaiClient
 from ..utils.exif_utils import ExifUtils
+from ..utils.metadata_manager import MetadataManager
 from ..services.download_manager import DownloadManager
 
 logger = logging.getLogger(__name__)
@@ -32,14 +33,29 @@ class ModelRouteUtils:
     async def handle_not_found_on_civitai(metadata_path: str, local_metadata: Dict) -> None:
         """Handle case when model is not found on CivitAI"""
         local_metadata['from_civitai'] = False
-        with open(metadata_path, 'w', encoding='utf-8') as f:
-            json.dump(local_metadata, f, indent=2, ensure_ascii=False)
+        await MetadataManager.save_metadata(metadata_path, local_metadata)
 
     @staticmethod
     async def update_model_metadata(metadata_path: str, local_metadata: Dict, 
                                   civitai_metadata: Dict, client: CivitaiClient) -> None:
         """Update local metadata with CivitAI data"""
-        local_metadata['civitai'] = civitai_metadata
+        # Save existing trainedWords and customImages if they exist
+        existing_civitai = local_metadata.get('civitai') or {}  # Use empty dict if None
+
+        # Create a new civitai metadata by updating existing with new
+        merged_civitai = existing_civitai.copy()
+        merged_civitai.update(civitai_metadata)
+
+        # Special handling for trainedWords - ensure we don't lose any existing trained words
+        if 'trainedWords' in existing_civitai:
+            existing_trained_words = existing_civitai.get('trainedWords', [])
+            new_trained_words = civitai_metadata.get('trainedWords', [])
+            # Use a set to combine words without duplicates, then convert back to list
+            merged_trained_words = list(set(existing_trained_words + new_trained_words))
+            merged_civitai['trainedWords'] = merged_trained_words
+
+        # Update local metadata with merged civitai data
+        local_metadata['civitai'] = merged_civitai
         local_metadata['from_civitai'] = True
         
         # Update model name if available
@@ -47,13 +63,30 @@ class ModelRouteUtils:
             if civitai_metadata.get('model', {}).get('name'):
                 local_metadata['model_name'] = civitai_metadata['model']['name']
         
-            # Fetch additional model metadata (description and tags) if we have model ID
-            model_id = civitai_metadata['modelId']
-            if model_id:
-                model_metadata, _ = await client.get_model_metadata(str(model_id))
-                if (model_metadata):
-                    local_metadata['modelDescription'] = model_metadata.get('description', '')
-                    local_metadata['tags'] = model_metadata.get('tags', [])
+            # Extract model metadata directly from civitai_metadata if available
+            model_metadata = None
+            
+            if 'model' in civitai_metadata and civitai_metadata.get('model'):
+                # Data is already available in the response from get_model_version
+                model_metadata = {
+                    'description': civitai_metadata.get('model', {}).get('description', ''),
+                    'tags': civitai_metadata.get('model', {}).get('tags', []),
+                    'creator': civitai_metadata.get('creator', {})
+                }
+            
+            # If we have modelId and don't have enough metadata, fetch additional data
+            if not model_metadata or not model_metadata.get('description'):
+                model_id = civitai_metadata.get('modelId')
+                if model_id:
+                    fetched_metadata, _ = await client.get_model_metadata(str(model_id))
+                    if fetched_metadata:
+                        model_metadata = fetched_metadata
+            
+            # Update local metadata with the model information
+            if model_metadata:
+                local_metadata['modelDescription'] = model_metadata.get('description', '')
+                local_metadata['tags'] = model_metadata.get('tags', [])
+                if 'creator' in model_metadata and model_metadata['creator']:
                     local_metadata['civitai']['creator'] = model_metadata['creator']
         
         # Update base model
@@ -121,8 +154,7 @@ class ModelRouteUtils:
                                 local_metadata['preview_nsfw_level'] = first_preview.get('nsfwLevel', 0)
 
         # Save updated metadata
-        with open(metadata_path, 'w', encoding='utf-8') as f:
-            json.dump(local_metadata, f, indent=2, ensure_ascii=False)
+        await MetadataManager.save_metadata(metadata_path, local_metadata)
 
     @staticmethod
     async def fetch_and_update_model(
@@ -160,8 +192,7 @@ class ModelRouteUtils:
                 # Mark as not from CivitAI if not found
                 local_metadata['from_civitai'] = False
                 model_data['from_civitai'] = False
-                with open(metadata_path, 'w', encoding='utf-8') as f:
-                    json.dump(local_metadata, f, indent=2, ensure_ascii=False)
+                await MetadataManager.save_metadata(file_path, local_metadata)
                 return False
 
             # Update metadata
@@ -204,18 +235,17 @@ class ModelRouteUtils:
         fields = [
             "id", "modelId", "name", "createdAt", "updatedAt", 
             "publishedAt", "trainedWords", "baseModel", "description",
-            "model", "images", "creator"
+            "model", "images", "customImages", "creator"
         ]
         return {k: data[k] for k in fields if k in data}
 
     @staticmethod
-    async def delete_model_files(target_dir: str, file_name: str, file_monitor=None) -> List[str]:
+    async def delete_model_files(target_dir: str, file_name: str) -> List[str]:
         """Delete model and associated files
         
         Args:
             target_dir: Directory containing the model files
             file_name: Base name of the model file without extension
-            file_monitor: Optional file monitor to ignore delete events
             
         Returns:
             List of deleted file paths
@@ -233,11 +263,7 @@ class ModelRouteUtils:
         main_file = patterns[0]
         main_path = os.path.join(target_dir, main_file).replace(os.sep, '/')
         
-        if os.path.exists(main_path):
-            # Notify file monitor to ignore delete event if available
-            if file_monitor:
-                file_monitor.handler.add_ignore_path(main_path, 0)
-            
+        if os.path.exists(main_path):     
             # Delete file
             os.remove(main_path)
             deleted.append(main_path)
@@ -258,10 +284,12 @@ class ModelRouteUtils:
     
     @staticmethod
     def get_multipart_ext(filename):
-        """Get extension that may have multiple parts like .metadata.json"""
+        """Get extension that may have multiple parts like .metadata.json or .metadata.json.bak"""
         parts = filename.split(".")
-        if len(parts) > 2:  # If contains multi-part extension
+        if len(parts) == 3:  # If contains 2-part extension
             return "." + ".".join(parts[-2:])  # Take the last two parts, like ".metadata.json"
+        elif len(parts) >= 4:  # If contains 3-part or more extensions
+            return "." + ".".join(parts[-3:])  # Take the last three parts, like ".metadata.json.bak"
         return os.path.splitext(filename)[1]  # Otherwise take the regular extension, like ".safetensors"
 
     # New common endpoint handlers
@@ -286,13 +314,9 @@ class ModelRouteUtils:
             target_dir = os.path.dirname(file_path)
             file_name = os.path.splitext(os.path.basename(file_path))[0]
             
-            # Get the file monitor from the scanner if available
-            file_monitor = getattr(scanner, 'file_monitor', None)
-            
             deleted_files = await ModelRouteUtils.delete_model_files(
                 target_dir, 
-                file_name,
-                file_monitor
+                file_name
             )
             
             # Remove from cache
@@ -324,7 +348,7 @@ class ModelRouteUtils:
             scanner: The model scanner instance with cache management methods
             
         Returns:
-            web.Response: The HTTP response
+            web.Response: The HTTP response with metadata on success
         """
         try:
             data = await request.json()
@@ -349,7 +373,8 @@ class ModelRouteUtils:
                 # Update the cache
                 await scanner.update_single_model_cache(data['file_path'], data['file_path'], local_metadata)
                 
-                return web.json_response({"success": True})
+                # Return the updated metadata along with success status
+                return web.json_response({"success": True, "metadata": local_metadata})
             finally:
                 await client.close()
 
@@ -359,15 +384,7 @@ class ModelRouteUtils:
 
     @staticmethod
     async def handle_replace_preview(request: web.Request, scanner) -> web.Response:
-        """Handle preview image replacement request
-        
-        Args:
-            request: The aiohttp request
-            scanner: The model scanner instance with methods to update cache
-            
-        Returns:
-            web.Response: The HTTP response
-        """
+        """Handle preview image replacement request"""
         try:
             reader = await request.multipart()
             
@@ -376,6 +393,15 @@ class ModelRouteUtils:
             if field.name != 'preview_file':
                 raise ValueError("Expected 'preview_file' field")
             content_type = field.headers.get('Content-Type', 'image/png')
+            
+            # Try to get original filename if available
+            content_disposition = field.headers.get('Content-Disposition', '')
+            original_filename = None
+            import re
+            filename_match = re.search(r'filename="(.*?)"', content_disposition)
+            if filename_match:
+                original_filename = filename_match.group(1)
+                
             preview_data = await field.read()
             
             # Read model path
@@ -384,17 +410,47 @@ class ModelRouteUtils:
                 raise ValueError("Expected 'model_path' field")
             model_path = (await field.read()).decode()
             
+            # Read NSFW level
+            nsfw_level = 0  # Default to 0 (unknown)
+            field = await reader.next()
+            if field and field.name == 'nsfw_level':
+                try:
+                    nsfw_level = int((await field.read()).decode())
+                except (ValueError, TypeError):
+                    logger.warning("Invalid NSFW level format, using default 0")
+            
             # Save preview file
             base_name = os.path.splitext(os.path.basename(model_path))[0]
             folder = os.path.dirname(model_path)
             
-            # Determine if content is video or image
+            # Determine format based on content type and original filename
+            is_gif = False
+            if original_filename and original_filename.lower().endswith('.gif'):
+                is_gif = True
+            elif content_type.lower() == 'image/gif':
+                is_gif = True
+                
+            # Determine if content is video or image and handle specific formats
             if content_type.startswith('video/'):
-                # For videos, keep original format and use .mp4 extension
-                extension = '.mp4'
+                # For videos, preserve original format if possible
+                if original_filename:
+                    extension = os.path.splitext(original_filename)[1].lower()
+                    # Default to .mp4 if no extension or unrecognized
+                    if not extension or extension not in ['.mp4', '.webm', '.mov', '.avi']:
+                        extension = '.mp4'
+                else:
+                    # Try to determine extension from content type
+                    if 'webm' in content_type:
+                        extension = '.webm'
+                    else:
+                        extension = '.mp4'  # Default
+                optimized_data = preview_data  # No optimization for videos
+            elif is_gif:
+                # Preserve GIF format without optimization
+                extension = '.gif'
                 optimized_data = preview_data
             else:
-                # For images, optimize and convert to WebP
+                # For other images, optimize and convert to WebP
                 optimized_data, _ = ExifUtils.optimize_image(
                     image_data=preview_data,
                     target_width=CARD_PREVIEW_WIDTH,
@@ -402,35 +458,45 @@ class ModelRouteUtils:
                     quality=85,
                     preserve_metadata=False
                 )
-                extension = '.webp'  # Use .webp without .preview part
+                extension = '.webp'
+            
+            # Delete any existing preview files for this model
+            for ext in PREVIEW_EXTENSIONS:
+                existing_preview = os.path.join(folder, base_name + ext)
+                if os.path.exists(existing_preview):
+                    try:
+                        os.remove(existing_preview)
+                        logger.debug(f"Deleted existing preview: {existing_preview}")
+                    except Exception as e:
+                        logger.warning(f"Failed to delete existing preview {existing_preview}: {e}")
             
             preview_path = os.path.join(folder, base_name + extension).replace(os.sep, '/')
             
             with open(preview_path, 'wb') as f:
                 f.write(optimized_data)
             
-            # Update preview path in metadata
+            # Update preview path and NSFW level in metadata
             metadata_path = os.path.splitext(model_path)[0] + '.metadata.json'
             if os.path.exists(metadata_path):
                 try:
                     with open(metadata_path, 'r', encoding='utf-8') as f:
                         metadata = json.load(f)
                     
-                    # Update preview_url directly in the metadata dict
+                    # Update preview_url and preview_nsfw_level in the metadata dict
                     metadata['preview_url'] = preview_path
+                    metadata['preview_nsfw_level'] = nsfw_level
                     
-                    with open(metadata_path, 'w', encoding='utf-8') as f:
-                        json.dump(metadata, f, indent=2, ensure_ascii=False)
+                    await MetadataManager.save_metadata(model_path, metadata)
                 except Exception as e:
                     logger.error(f"Error updating metadata: {e}")
             
             # Update preview URL in scanner cache
-            if hasattr(scanner, 'update_preview_in_cache'):
-                await scanner.update_preview_in_cache(model_path, preview_path)
+            await scanner.update_preview_in_cache(model_path, preview_path, nsfw_level)
             
             return web.json_response({
                 "success": True,
-                "preview_url": config.get_preview_static_url(preview_path)
+                "preview_url": config.get_preview_static_url(preview_path),
+                "preview_nsfw_level": nsfw_level
             })
             
         except Exception as e:
@@ -460,8 +526,7 @@ class ModelRouteUtils:
             metadata['exclude'] = True
             
             # Save updated metadata
-            with open(metadata_path, 'w', encoding='utf-8') as f:
-                json.dump(metadata, f, indent=2, ensure_ascii=False)
+            await MetadataManager.save_metadata(file_path, metadata)
 
             # Update cache
             cache = await scanner.get_cached_data()
@@ -616,7 +681,7 @@ class ModelRouteUtils:
 
     @staticmethod
     async def handle_relink_civitai(request: web.Request, scanner) -> web.Response:
-        """Handle CivitAI metadata re-linking request by model version ID
+        """Handle CivitAI metadata re-linking request by model ID and/or version ID
         
         Args:
             request: The aiohttp request
@@ -628,10 +693,11 @@ class ModelRouteUtils:
         try:
             data = await request.json()
             file_path = data.get('file_path')
+            model_id = data.get('model_id')
             model_version_id = data.get('model_version_id')
             
-            if not file_path or not model_version_id:
-                return web.json_response({"success": False, "error": "Both file_path and model_version_id are required"}, status=400)
+            if not file_path or not model_id:
+                return web.json_response({"success": False, "error": "Both file_path and model_id are required"}, status=400)
             
             metadata_path = os.path.splitext(file_path)[0] + '.metadata.json'
             
@@ -641,24 +707,24 @@ class ModelRouteUtils:
             # Create a client for fetching from Civitai
             client = await CivitaiClient.get_instance()
             try:
-                # Fetch metadata by model version ID
-                civitai_metadata, error = await client.get_model_version_info(model_version_id)
+                # Fetch metadata using get_model_version which includes more comprehensive data
+                civitai_metadata = await client.get_model_version(model_id, model_version_id)
                 if not civitai_metadata:
-                    error_msg = error or "Model version not found on CivitAI"
+                    error_msg = f"Model version not found on CivitAI for ID: {model_id}"
+                    if model_version_id:
+                        error_msg += f" with version: {model_version_id}"
                     return web.json_response({"success": False, "error": error_msg}, status=404)
                 
-                # Find the primary model file to get the correct SHA256 hash
+                # Try to find the primary model file to get the SHA256 hash
                 primary_model_file = None
                 for file in civitai_metadata.get('files', []):
                     if file.get('primary', False) and file.get('type') == 'Model':
                         primary_model_file = file
                         break
                 
-                if not primary_model_file or not primary_model_file.get('hashes', {}).get('SHA256'):
-                    return web.json_response({"success": False, "error": "No SHA256 hash found in model metadata"}, status=404)
-                
-                # Update the SHA256 hash in local metadata (convert to lowercase)
-                local_metadata['sha256'] = primary_model_file['hashes']['SHA256'].lower()
+                # Update the SHA256 hash in local metadata if available
+                if primary_model_file and primary_model_file.get('hashes', {}).get('SHA256'):
+                    local_metadata['sha256'] = primary_model_file['hashes']['SHA256'].lower()
                 
                 # Update metadata with CivitAI information
                 await ModelRouteUtils.update_model_metadata(metadata_path, local_metadata, civitai_metadata, client)
@@ -668,8 +734,9 @@ class ModelRouteUtils:
                 
                 return web.json_response({
                     "success": True,
-                    "message": f"Model successfully re-linked to Civitai version {model_version_id}",
-                    "hash": local_metadata['sha256']
+                    "message": f"Model successfully re-linked to Civitai model {model_id}" + 
+                               (f" version {model_version_id}" if model_version_id else ""),
+                    "hash": local_metadata.get('sha256', '')
                 })
                 
             finally:
@@ -678,3 +745,94 @@ class ModelRouteUtils:
         except Exception as e:
             logger.error(f"Error re-linking to CivitAI: {e}", exc_info=True)
             return web.json_response({"success": False, "error": str(e)}, status=500)
+
+    @staticmethod
+    async def handle_verify_duplicates(request: web.Request, scanner) -> web.Response:
+        """Handle verification of duplicate model hashes
+        
+        Args:
+            request: The aiohttp request
+            scanner: The model scanner instance with cache management methods
+            
+        Returns:
+            web.Response: The HTTP response with verification results
+        """
+        try:
+            data = await request.json()
+            file_paths = data.get('file_paths', [])
+            
+            if not file_paths:
+                return web.json_response({
+                    'success': False,
+                    'error': 'No file paths provided for verification'
+                }, status=400)
+            
+            # Results tracking
+            results = {
+                'verified_as_duplicates': True,  # Start true, set to false if any mismatch
+                'mismatched_files': [],
+                'new_hash_map': {}
+            }
+            
+            # Get expected hash from the first file's metadata
+            expected_hash = None
+            first_metadata_path = os.path.splitext(file_paths[0])[0] + '.metadata.json'
+            first_metadata = await ModelRouteUtils.load_local_metadata(first_metadata_path)
+            if first_metadata and 'sha256' in first_metadata:
+                expected_hash = first_metadata['sha256'].lower()
+            
+            # Process each file
+            for file_path in file_paths:
+                # Skip files that don't exist
+                if not os.path.exists(file_path):
+                    continue
+                    
+                # Calculate actual hash
+                try:
+                    from .file_utils import calculate_sha256
+                    actual_hash = await calculate_sha256(file_path)
+                    
+                    # Get metadata
+                    metadata_path = os.path.splitext(file_path)[0] + '.metadata.json'
+                    metadata = await ModelRouteUtils.load_local_metadata(metadata_path)
+                    
+                    # Compare hashes
+                    stored_hash = metadata.get('sha256', '').lower()
+                    
+                    # Set expected hash from first file if not yet set
+                    if not expected_hash:
+                        expected_hash = stored_hash
+                    
+                    # Check if hash matches expected hash
+                    if actual_hash != expected_hash:
+                        results['verified_as_duplicates'] = False
+                        results['mismatched_files'].append(file_path)
+                        results['new_hash_map'][file_path] = actual_hash
+                        
+                    # Check if stored hash needs updating
+                    if actual_hash != stored_hash:
+                        # Update metadata with actual hash
+                        metadata['sha256'] = actual_hash
+                        
+                        # Save updated metadata
+                        await MetadataManager.save_metadata(file_path, metadata)
+                        
+                        # Update cache
+                        await scanner.update_single_model_cache(file_path, file_path, metadata)
+                except Exception as e:
+                    logger.error(f"Error verifying hash for {file_path}: {e}")
+                    results['mismatched_files'].append(file_path)
+                    results['new_hash_map'][file_path] = "error_calculating_hash"
+                    results['verified_as_duplicates'] = False
+            
+            return web.json_response({
+                'success': True,
+                **results
+            })
+            
+        except Exception as e:
+            logger.error(f"Error verifying duplicate models: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-lora-manager"
 description = "LoRA Manager for ComfyUI - Access it at http://localhost:8188/loras for managing LoRA models with previews and metadata integration."
-version = "0.8.17"
+version = "0.8.18"
 license = {file = "LICENSE"}
 dependencies = [
     "aiohttp",

refs/output.json

@@ -1,11 +1,258 @@
 {
-    "loras": "<lora:ck-neon-retrowave-IL-000012:0.8> <lora:aorunIllstrious:1> <lora:ck-shadow-circuit-IL-000012:0.78> <lora:MoriiMee_Gothic_Niji_Style_Illustrious_r1:0.45> <lora:ck-nc-cyberpunk-IL-000011:0.4>",
-    "prompt": "in the style of ck-rw, aorun, scales, makeup, bare shoulders, pointy ears, dress, claws, in the style of cksc, artist:moriimee, in the style of cknc, masterpiece, best quality, good quality, very aesthetic, absurdres, newest, 8K, depth of field, focused subject, close up, stylized, in gold and neon shades, wabi sabi, 1girl, rainbow angel wings, looking at viewer, dynamic angle, from below, from side, relaxing",
-    "negative_prompt": "bad quality, worst quality, worst detail, sketch ,signature, watermark, patreon logo, nsfw",
-    "steps": "20",
-    "sampler": "euler_ancestral",
-    "cfg_scale": "8",
-    "seed": "241",
-    "size": "832x1216",
-    "clip_skip": "2"
+    "id": 649516,
+    "name": "Cynthia -シロナ - Pokemon Diamond and Pearl - PDXL LORA",
+    "description": "<p><strong>Warning: Without Adetailer eyes are fucked (rainbow color and artefact)</strong></p><p><span style=\"color:rgb(193, 194, 197)\">Trained on </span><a target=\"_blank\" rel=\"ugc\" href=\"https://civitai.com/models/257749/horsefucker-diffusion-v6-xl\"><strong>Pony Diffusion V6 XL</strong></a> with 63 pictures.<br />Best result with weight between : 0.8-1.</p><p><span style=\"color:rgb(193, 194, 197)\">Basic prompts : </span><code>1girl, cynthia \\(pokemon\\), blonde hair, hair over one eye, very long hair, grey eyes, eyelashes, hair ornament</code> <br /><span style=\"color:rgb(193, 194, 197)\">Outfit prompts : </span><code>fur collar, black coat, fur-trimmed coat, long sleeves, black pants, black shirt, high heels</code></p><p>Reviews are really appreciated, i love to see the community use my work, that's why I share it.<br />If you like my work, you can tip me <a target=\"_blank\" rel=\"ugc\" href=\"https://ko-fi.com/konan49773\"><strong>here.</strong></a></p><p>Got a specific request ? I'm open for commission on my <a target=\"_blank\" rel=\"ugc\" href=\"https://ko-fi.com/konan49773/commissions\"><strong>kofi</strong></a> or<strong> </strong><a target=\"_blank\" rel=\"ugc\" href=\"https://www.fiverr.com/konanai/create-lora-model-for-you\"><strong>fiverr gig</strong></a> *! If you provide enough data, OCs are accepted</p>",
+    "allowNoCredit": true,
+    "allowCommercialUse": [
+        "Image",
+        "RentCivit"
+    ],
+    "allowDerivatives": true,
+    "allowDifferentLicense": true,
+    "type": "LORA",
+    "minor": false,
+    "sfwOnly": false,
+    "poi": false,
+    "nsfw": false,
+    "nsfwLevel": 29,
+    "availability": "Public",
+    "cosmetic": null,
+    "supportsGeneration": true,
+    "stats": {
+        "downloadCount": 811,
+        "favoriteCount": 0,
+        "thumbsUpCount": 175,
+        "thumbsDownCount": 0,
+        "commentCount": 4,
+        "ratingCount": 0,
+        "rating": 0,
+        "tippedAmountCount": 10
+    },
+    "creator": {
+        "username": "Konan",
+        "image": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/7cd552a1-60fe-4baf-a0e4-f7d5d5381711/width=96/Konan.jpeg"
+    },
+    "tags": [
+        "anime",
+        "character",
+        "cynthia",
+        "woman",
+        "pokemon",
+        "pokegirl"
+    ],
+    "modelVersions": [
+        {
+            "id": 726676,
+            "index": 0,
+            "name": "v1.0",
+            "baseModel": "Pony",
+            "createdAt": "2024-08-16T01:13:16.099Z",
+            "publishedAt": "2024-08-16T01:14:44.984Z",
+            "status": "Published",
+            "availability": "Public",
+            "nsfwLevel": 29,
+            "trainedWords": [
+                "1girl, cynthia \\(pokemon\\), blonde hair, hair over one eye, very long hair, grey eyes, eyelashes, hair ornament",
+                "fur collar, black coat, fur-trimmed coat, long sleeves, black pants, black shirt, high heels"
+            ],
+            "covered": true,
+            "stats": {
+                "downloadCount": 811,
+                "ratingCount": 0,
+                "rating": 0,
+                "thumbsUpCount": 175,
+                "thumbsDownCount": 0
+            },
+            "files": [
+                {
+                    "id": 641092,
+                    "sizeKB": 56079.65234375,
+                    "name": "CynthiaXL.safetensors",
+                    "type": "Model",
+                    "pickleScanResult": "Success",
+                    "pickleScanMessage": "No Pickle imports",
+                    "virusScanResult": "Success",
+                    "virusScanMessage": null,
+                    "scannedAt": "2024-08-16T01:17:19.087Z",
+                    "metadata": {
+                        "format": "SafeTensor"
+                    },
+                    "hashes": {},
+                    "downloadUrl": "https://civitai.com/api/download/models/726676",
+                    "primary": true
+                }
+            ],
+            "images": [
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/b346d757-2b59-4aeb-9f09-3bee2724519d/width=1248/24511993.jpeg",
+                    "nsfwLevel": 1,
+                    "width": 1248,
+                    "height": 1824,
+                    "hash": "UqNc==RP.9s+~pxvIst7kWWBWBjY%MWBt7WB",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                },
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/fc132ac0-cc1c-4b68-a1d7-5b97b0996ac2/width=1248/24511997.jpeg",
+                    "nsfwLevel": 1,
+                    "width": 1248,
+                    "height": 1824,
+                    "hash": "UMGSS+?tTw.60MIX9cbb~WxHRRR-NEtLRiR%",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                },
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/7b3237d1-e672-466a-85d0-cc5dd42ab130/width=1160/24512001.jpeg",
+                    "nsfwLevel": 4,
+                    "width": 1160,
+                    "height": 1696,
+                    "hash": "U9NA6f~o00%h00wvIYt74:ER-=D%5600DiE1",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                },
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/ccd7d11d-4fa9-4434-85a1-fb999312e60d/width=1248/24511991.jpeg",
+                    "nsfwLevel": 1,
+                    "width": 1248,
+                    "height": 1824,
+                    "hash": "UyNTg.j?~qxu?aoLRkj]%MfkM{jZaya}a#ax",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                },
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/1743be6d-7fe5-4b55-9f19-c931618fa259/width=1248/24511996.jpeg",
+                    "nsfwLevel": 4,
+                    "width": 1248,
+                    "height": 1824,
+                    "hash": "UGOC~n^+?w~6Tx_4oM^$yYEkMds74:9F#*xY",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                },
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/91693c98-d037-4489-882c-100eb26019a0/width=1160/24512010.jpeg",
+                    "nsfwLevel": 4,
+                    "width": 1160,
+                    "height": 1696,
+                    "hash": "UJI}kp^-Kl%hXAIX4;Nf^+M|9GRP0Mt8%L%2",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                },
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/49c7a294-ac5b-4832-98e5-2acd0f1a8782/width=1248/24512017.jpeg",
+                    "nsfwLevel": 4,
+                    "width": 1248,
+                    "height": 1824,
+                    "hash": "UML;8Qn|9G%3mnWA4nWFMf%N?Hae~qog-oNF",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                },
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/d7b442f2-6ead-4a7a-9578-54d9ec2ff148/width=1248/24512015.jpeg",
+                    "nsfwLevel": 1,
+                    "width": 1248,
+                    "height": 1824,
+                    "hash": "UPGR#kt8xw%M0LWC9bWC?wxtR*NLM^jrxWM|",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                },
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/d840f1e9-3dd3-4531-b83a-1ba2c6b7feaa/width=1160/24512004.jpeg",
+                    "nsfwLevel": 8,
+                    "width": 1160,
+                    "height": 1696,
+                    "hash": "ULNm1i_39wi^*I%hDiM_tlo#xuV?^kNIxCs,",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                },
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/520387ae-c176-43e3-92bd-5cd2a672475e/width=1248/24512012.jpeg",
+                    "nsfwLevel": 4,
+                    "width": 1248,
+                    "height": 1824,
+                    "hash": "URM%l.%M.9Ip~poIkExu_3V@M|xuD%oJM{D*",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                },
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/9ea28b94-f326-4776-83ff-851cc203c627/width=1248/24511988.jpeg",
+                    "nsfwLevel": 1,
+                    "width": 1248,
+                    "height": 1824,
+                    "hash": "U-PZloog_Nxut6j]WXWB-;j?IVa#ofaxj]j]",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                },
+                {
+                    "url": "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/2e749dbb-7d5a-48f1-8e29-fea5022a5fe9/width=1248/24522268.jpeg",
+                    "nsfwLevel": 16,
+                    "width": 1248,
+                    "height": 1824,
+                    "hash": "UPLgtm9Z0z=|0yRRE2-A9rWAoNE1~DwOr=t7",
+                    "type": "image",
+                    "minor": false,
+                    "poi": false,
+                    "hasMeta": true,
+                    "hasPositivePrompt": true,
+                    "onSite": false,
+                    "remixOfId": null
+                }
+            ],
+            "downloadUrl": "https://civitai.com/api/download/models/726676"
+        }
+    ]
 }

standalone.py

@@ -1,3 +1,4 @@
+from pathlib import Path
 import os
 import sys
 import json
@@ -280,10 +281,14 @@ class StandaloneLoraManager(LoraManager):
                 # Display path with forward slashes for consistency
                 display_target = target_path.replace('\\', '/')
                 
-                app.router.add_static(route_path, target_path)
-                logger.info(f"Added static route for link target {route_path} -> {display_target}")
-                config.add_route_mapping(target_path, route_path)
-                added_targets.add(norm_target)
+                try:
+                    app.router.add_static(route_path, Path(target_path).resolve(strict=False))
+                    logger.info(f"Added static route for link target {route_path} -> {display_target}")
+                    config.add_route_mapping(target_path, route_path)
+                    added_targets.add(norm_target)
+                except Exception as e:
+                    logger.warning(f"Failed to add static route on initialization for {target_path}: {e}")
+                    continue
         
         # Add static route for plugin assets
         app.router.add_static('/loras_static', config.static_path)

static/css/base.css

@@ -39,6 +39,9 @@ html, body {
     --lora-warning-l: 75%;
     --lora-warning-c: 0.25;
     --lora-warning-h: 80;
+    --lora-success-l: 70%;
+    --lora-success-c: 0.2;
+    --lora-success-h: 140;
 
     /* Composed Colors */
     --lora-accent: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h));
@@ -47,6 +50,7 @@ html, body {
     --lora-text: oklch(95% 0.02 256);
     --lora-error: oklch(75% 0.32 29);
     --lora-warning: oklch(var(--lora-warning-l) var(--lora-warning-c) var(--lora-warning-h)); /* Modified to be used with oklch() */
+    --lora-success: oklch(var(--lora-success-l) var(--lora-success-c) var(--lora-success-h)); /* New green success color */
     
     /* Spacing Scale */
     --space-1: calc(8px * 1);

static/css/components/card.css

@@ -89,7 +89,7 @@
 /* Smaller text for medium density */
 .medium-density .model-name {
     font-size: 0.95em;
-    max-height: 2.6em;
+    max-height: 3em; /* Increased from 2.6em */
 }
 
 .medium-density .base-model-label {
@@ -105,7 +105,7 @@
 /* Smaller text for compact mode */
 .compact-density .model-name {
     font-size: 0.9em;
-    max-height: 2.4em;
+    max-height: 2.8em; /* Increased from 2.4em */
 }
 
 .compact-density .base-model-label {
@@ -167,6 +167,38 @@
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 }
 
+/* NSFW warning adjustments for medium density */
+.medium-density .nsfw-warning {
+    padding: calc(var(--space-2) * 0.85);
+    max-width: 70%;
+}
+
+.medium-density .nsfw-warning p {
+    font-size: 0.95em;
+    margin-bottom: calc(var(--space-1) * 0.85);
+}
+
+.medium-density .show-content-btn {
+    font-size: 0.85em;
+    padding: 3px calc(var(--space-1) * 0.85);
+}
+
+/* NSFW warning adjustments for compact density */
+.compact-density .nsfw-warning {
+    padding: calc(var(--space-2) * 0.7);
+    max-width: 60%;
+}
+
+.compact-density .nsfw-warning p {
+    font-size: 0.85em;
+    margin-bottom: calc(var(--space-1) * 0.7);
+}
+
+.compact-density .show-content-btn {
+    font-size: 0.8em;
+    padding: 2px var(--space-1);
+}
+
 .toggle-blur-btn {
     position: absolute;
     left: var(--space-1);
@@ -331,21 +363,24 @@
     text-decoration: none;
 }
 
+/* Updated model name to fix text cutoff issues */
 .model-name {
     font-weight: bold;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
     font-size: 0.95em;
     word-break: break-word;
     display: block;
-    max-height: 2.8em;
+    max-height: 3em; /* Increased to ensure two full lines */
     overflow: hidden;
+    /* Add line height for consistency */
+    line-height: 1.4;
 }
 
 .model-info {
     flex: 1;
     min-width: 0;
     overflow: hidden;
-    padding-bottom: 4px;
+    padding-bottom: 6px; /* Increased from 4px to give more room for text */
 }
 
 .base-model {
@@ -485,4 +520,44 @@
     .card-grid.virtual-scroll {
         max-width: 2400px;
     }
-}
+}
+
+/* Add after the existing .lora-card:hover styles */
+
+@keyframes update-pulse {
+    0% { box-shadow: 0 0 0 0 var(--lora-accent-transparent); }
+    50% { box-shadow: 0 0 0 4px var(--lora-accent-transparent); }
+    100% { box-shadow: 0 0 0 0 var(--lora-accent-transparent); }
+  }
+  
+  /* Add semi-transparent version of accent color for animation */
+  :root {
+    --lora-accent-transparent: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.6);
+  }
+  
+  .lora-card.updated {
+    animation: update-pulse 1.2s ease-out;
+  }
+  
+  /* Add a subtle updated tag that fades in and out */
+  .update-indicator {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: var(--lora-accent);
+    color: white;
+    border-radius: var(--border-radius-xs);
+    padding: 3px 6px;
+    font-size: 0.75em;
+    opacity: 0;
+    transform: translateY(-5px);
+    z-index: 4;
+    animation: update-tag 1.8s ease-out forwards;
+  }
+  
+  @keyframes update-tag {
+    0% { opacity: 0; transform: translateY(-5px); }
+    15% { opacity: 1; transform: translateY(0); }
+    85% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(0); }
+  }

static/css/components/download-modal.css

@@ -95,7 +95,7 @@
     flex: 1;
 }
 
-.version-info {
+.version-content .version-info {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row !important;
@@ -104,7 +104,7 @@
     font-size: 0.9em;
 }
 
-.version-info .base-model {
+.version-content .version-info .base-model {
     background: oklch(var(--lora-accent) / 0.1);
     color: var(--lora-accent);
     padding: 2px 8px;

static/css/components/duplicates.css

@@ -315,6 +315,7 @@
     margin-bottom: 4px;
     display: flex;
     flex-wrap: wrap;
+    word-break: break-all; /* Ensure long hashes wrap properly */
 }
 
 .model-tooltip .tooltip-info div strong {
@@ -322,6 +323,128 @@
     min-width: 70px;
 }
 
+/* Latest indicator */
+.hash-mismatch-info {
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px dashed var(--border-color);
+    color: oklch(var(--lora-warning-l) var(--lora-warning-c) var(--lora-warning-h));
+    font-weight: bold;
+    word-break: break-all; /* Ensure long hashes wrap properly */
+}
+
+/* Verification Badge Styles */
+.verification-badge {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 8px;
+    padding: 2px 6px;
+    font-size: 0.8em;
+    border-radius: var(--border-radius-xs);
+    font-weight: normal;
+}
+
+.verification-badge.metadata {
+    background-color: var(--bg-color);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+}
+
+.verification-badge.verified {
+    background-color: oklch(70% 0.2 140); /* Green for verified */
+    color: white;
+}
+
+.verification-badge.mismatch {
+    background-color: oklch(var(--lora-warning-l) var(--lora-warning-c) var(--lora-warning-h));
+    color: white;
+}
+
+.verification-badge i {
+    margin-right: 4px;
+}
+
+/* Hash Mismatch Styling */
+.lora-card.duplicate.hash-mismatch {
+    border: 2px dashed oklch(var(--lora-warning-l) var(--lora-warning-c) var(--lora-warning-h));
+    opacity: 0.85;
+    position: relative;
+}
+
+.lora-card.duplicate.hash-mismatch::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: repeating-linear-gradient(
+        45deg,
+        oklch(var(--lora-warning-l) var(--lora-warning-c) var(--lora-warning-h) / 0.05),
+        oklch(var(--lora-warning-l) var(--lora-warning-c) var(--lora-warning-h) / 0.05) 10px,
+        transparent 10px,
+        transparent 20px
+    );
+    z-index: 1;
+    pointer-events: none;
+}
+
+.lora-card.duplicate.hash-mismatch .card-preview {
+    filter: grayscale(20%);
+}
+
+/* Mismatch Badge */
+.mismatch-badge {
+    position: absolute;
+    top: 10px;
+    left: 10px; /* Changed from right:10px to left:10px */
+    background: oklch(var(--lora-warning-l) var(--lora-warning-c) var(--lora-warning-h));
+    color: white;
+    font-size: 12px;
+    padding: 3px 8px;
+    border-radius: var(--border-radius-xs);
+    z-index: 5;
+}
+
+/* Disabled checkbox style */
+.lora-card.duplicate.hash-mismatch .selector-checkbox {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Hash mismatch info in tooltip */
+.hash-mismatch-info {
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px dashed var(--border-color);
+    color: oklch(var(--lora-warning-l) var(--lora-warning-c) var(--lora-warning-h));
+    font-weight: bold;
+}
+
+/* Verify hash button styling */
+.btn-verify-hashes {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    font-size: 0.85em;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btn-verify-hashes:hover {
+    background: var(--bg-color);
+    border-color: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h));
+    transform: translateY(-1px);
+}
+
+.btn-verify-hashes i {
+    font-size: 0.9em;
+}
+
 /* Badge Styles */
 .badge {
     display: inline-flex;

static/css/components/lora-modal/description.css

@@ -0,0 +1,100 @@
+/* Model Description Styling */
+.model-description-container {
+  background: var(--lora-surface);
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
+  min-height: 200px;
+  position: relative;
+  /* Remove the max-height and overflow-y to allow content to expand naturally */
+}
+
+.model-description-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3);
+  color: var(--text-color);
+  opacity: 0.7;
+  font-size: 0.9em;
+}
+
+.model-description-loading .fa-spinner {
+  margin-right: var(--space-1);
+}
+
+.model-description-content {
+  padding: var(--space-2);
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  font-size: 0.95em;
+}
+
+.model-description-content h1,
+.model-description-content h2,
+.model-description-content h3,
+.model-description-content h4,
+.model-description-content h5,
+.model-description-content h6 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+}
+
+.model-description-content p {
+  margin-bottom: 1em;
+}
+
+.model-description-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--border-radius-xs);
+  display: block;
+  margin: 1em 0;
+}
+
+.model-description-content pre {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: var(--border-radius-xs);
+  padding: var(--space-1);
+  white-space: pre-wrap;
+  margin: 1em 0;
+  overflow-x: auto;
+}
+
+.model-description-content code {
+  font-family: monospace;
+  font-size: 0.9em;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
+
+.model-description-content pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.model-description-content ul,
+.model-description-content ol {
+  margin-left: 1.5em;
+  margin-bottom: 1em;
+}
+
+.model-description-content li {
+  margin-bottom: 0.5em;
+}
+
+.model-description-content blockquote {
+  border-left: 3px solid var (--lora-accent);
+  padding-left: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  font-style: italic;
+  opacity: 0.8;
+}
+
+/* Adjust dark mode for model description */
+[data-theme="dark"] .model-description-content pre,
+[data-theme="dark"] .model-description-content code {
+  background: rgba(255, 255, 255, 0.05);
+}

static/css/components/lora-modal/lora-modal.css

@@ -0,0 +1,501 @@
+/* Lora Modal Header */
+.modal-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-bottom: var(--space-3);
+    padding-bottom: var(--space-2);
+    border-bottom: 1px solid var(--lora-border);
+}
+
+/* Info Grid */
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-2);
+    margin-bottom: var(--space-3);
+}
+
+.info-item {
+    padding: var(--space-2);
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-sm);
+}
+
+/* 调整深色主题下的样式 */
+[data-theme="dark"] .info-item {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
+.info-item.full-width {
+    grid-column: 1 / -1;
+}
+
+.info-item label {
+    display: block;
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.8;
+    margin-bottom: 4px;
+}
+
+.info-item span {
+    color: var(--text-color);
+    word-break: break-word;
+}
+
+.info-item.usage-tips,
+.info-item.notes {
+    grid-column: 1 / -1 !important; /* Make notes section full width */
+}
+
+/* Add specific styles for notes content */
+.info-item.notes .editable-field [contenteditable] {
+    min-height: 60px; /* Increase height for multiple lines */
+    max-height: 150px; /* Limit maximum height */
+    overflow-y: auto; /* Add scrolling for long content */
+    white-space: pre-wrap; /* Preserve line breaks */
+    line-height: 1.5; /* Improve readability */
+    padding: 8px 12px; /* Slightly increase padding */
+}
+
+.file-path {
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
+.description-text {
+    line-height: 1.5;
+    max-height: 100px;
+    overflow-y: auto;
+}
+
+/* Editable Fields */
+.editable-field {
+    position: relative;
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.editable-field [contenteditable] {
+    flex: 1;
+    min-height: 24px;
+    padding: 4px 8px;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    font-size: 0.9em;
+    line-height: 1.4;
+    color: var(--text-color);
+    transition: border-color 0.2s;
+    word-break: break-word;
+}
+
+.editable-field [contenteditable]:focus {
+    outline: none;
+    border-color: var(--lora-accent);
+    background: var(--bg-color);
+}
+
+.editable-field [contenteditable]:empty::before {
+    content: attr(data-placeholder);
+    color: var(--text-color);
+    opacity: 0.5;
+}
+
+.save-btn {
+    padding: 4px 8px;
+    background: var(--lora-accent);
+    border: none;
+    border-radius: var(--border-radius-xs);
+    color: white;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.save-btn:hover {
+    opacity: 0.9;
+}
+
+.save-btn i {
+    font-size: 0.9em;
+}
+
+@media (max-width: 640px) {
+    .info-item.usage-tips,
+    .info-item.notes {
+        grid-column: 1 / -1;
+    }
+}
+
+/* 修改 back-to-top 按钮样式，使其固定在 modal 内部 */
+.modal-content .back-to-top {
+    position: sticky; /* 改用 sticky 定位 */
+    float: right; /* 使用 float 确保按钮在右侧 */
+    bottom: 20px; /* 距离底部的距离 */
+    margin-right: 20px; /* 右侧间距 */
+    margin-top: -56px; /* 负边距确保不占用额外空间 */
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    transition: all 0.3s ease;
+    z-index: 10;
+}
+
+.modal-content .back-to-top.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.modal-content .back-to-top:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* File name copy styles */
+.file-name-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px;
+    border-radius: var(--border-radius-xs);
+    transition: background-color 0.2s;
+    position: relative;
+}
+
+.file-name-content {
+    padding: 2px 4px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid transparent;
+    flex: 1;
+}
+
+.file-name-wrapper.editing .file-name-content {
+    border: 1px solid var(--lora-accent);
+    background: var(--bg-color);
+    outline: none;
+}
+
+.edit-file-name-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    opacity: 0;
+    cursor: pointer;
+    padding: 2px 5px;
+    border-radius: var(--border-radius-xs);
+    transition: all 0.2s ease;
+    margin-left: var(--space-1);
+}
+
+.edit-file-name-btn.visible,
+.file-name-wrapper:hover .edit-file-name-btn {
+    opacity: 0.5;
+}
+
+.edit-file-name-btn:hover {
+    opacity: 0.8 !important;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .edit-file-name-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+/* Base Model and Size combined styles */
+.info-item.base-size {
+    display: flex;
+    gap: var(--space-3);
+}
+
+.base-wrapper {
+    flex: 2;  /* 分配更多空间给base model */
+}
+
+/* Base model display and editing styles */
+.base-model-display {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.base-model-content {
+    padding: 2px 4px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid transparent;
+    color: var(--text-color);
+    flex: 1;
+}
+
+.edit-base-model-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    opacity: 0;
+    cursor: pointer;
+    padding: 2px 5px;
+    border-radius: var(--border-radius-xs);
+    transition: all 0.2s ease;
+    margin-left: var(--space-1);
+}
+
+.edit-base-model-btn.visible,
+.base-model-display:hover .edit-base-model-btn {
+    opacity: 0.5;
+}
+
+.edit-base-model-btn:hover {
+    opacity: 0.8 !important;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .edit-base-model-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.base-model-selector {
+    width: 100%;
+    padding: 3px 5px;
+    background: var(--bg-color);
+    border: 1px solid var(--lora-accent);
+    border-radius: var(--border-radius-xs);
+    color: var(--text-color);
+    font-size: 0.9em;
+    outline: none;
+    margin-right: var(--space-1);
+}
+
+.size-wrapper {
+    flex: 1;
+    border-left: 1px solid var(--lora-border);
+    padding-left: var(--space-3);
+}
+
+.base-wrapper label,
+.size-wrapper label {
+    display: block;
+    margin-bottom: 4px;
+}
+
+.size-wrapper span {
+    font-family: monospace;
+    font-size: 0.9em;
+    opacity: 0.9;
+}
+
+/* New Model Name Header Styles */
+.model-name-header {
+    display: flex;
+    align-items: center;
+    width: calc(100% - 40px); /* Avoid overlap with close button */
+    position: relative;
+}
+
+.model-name-content {
+    margin: 0;
+    padding: var(--space-1);
+    border-radius: var(--border-radius-xs);
+    font-size: 1.5em !important;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--text-color);
+    border: 1px solid transparent;
+    outline: none;
+    flex: 1;
+}
+
+.model-name-content:focus {
+    border: 1px solid var(--lora-accent);
+    background: var(--bg-color);
+}
+
+.edit-model-name-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    opacity: 0;
+    cursor: pointer;
+    padding: 2px 5px;
+    border-radius: var(--border-radius-xs);
+    transition: all 0.2s ease;
+    margin-left: var(--space-1);
+}
+
+.edit-model-name-btn.visible,
+.model-name-header:hover .edit-model-name-btn {
+    opacity: 0.5;
+}
+
+.edit-model-name-btn:hover {
+    opacity: 0.8 !important;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .edit-model-name-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+/* Tab System Styling */
+.showcase-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--lora-border);
+    margin-bottom: var(--space-2);
+    position: relative;
+    z-index: 2;
+}
+
+.tab-btn {
+    padding: var(--space-1) var(--space-2);
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--text-color);
+    cursor: pointer;
+    font-size: 0.95em;
+    transition: all 0.2s;
+    opacity: 0.7;
+    position: relative;
+}
+
+.tab-btn:hover {
+    opacity: 1;
+    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.05);
+}
+
+.tab-btn.active {
+    border-bottom: 2px solid var(--lora-accent);
+    opacity: 1;
+    font-weight: 600;
+}
+
+.tab-content {
+    position: relative;
+    min-height: 100px;
+}
+
+.tab-pane {
+    display: none;
+}
+
+.tab-pane.active {
+    display: block;
+}
+
+.view-all-btn {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 12px;
+    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: 13px;
+}
+
+.view-all-btn:hover {
+    opacity: 0.9;
+}
+
+/* Loading, error and empty states */
+.recipes-loading,
+.recipes-error,
+.recipes-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    text-align: center;
+    min-height: 200px;
+}
+
+.recipes-loading i,
+.recipes-error i,
+.recipes-empty i {
+    font-size: 32px;
+    margin-bottom: 15px;
+    color: var(--lora-accent);
+}
+
+.recipes-error i {
+    color: var(--lora-error);
+}
+
+/* Creator Information Styles */
+.creator-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: var(--space-1);
+    padding: 6px 10px;
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-sm);
+    max-width: fit-content;
+}
+
+[data-theme="dark"] .creator-info {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
+.creator-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+}
+
+.creator-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.creator-placeholder {
+    background: var(--lora-accent);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.creator-username {
+    font-size: 0.9em;
+    font-weight: 500;
+    color: var(--text-color);
+}
+
+/* Optional: add hover effect for creator info */
+.creator-info:hover {
+    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+    border-color: var(--lora-accent);
+}

static/css/components/lora-modal/preset-tags.css

@@ -0,0 +1,68 @@
+/* Update Preset Controls styles */
+.preset-controls {
+  display: flex;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+.preset-controls select,
+.preset-controls input {
+  padding: var(--space-1);
+  background: var(--bg-color);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-xs);
+  color: var(--text-color);
+}
+
+.preset-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+}
+
+.preset-tag {
+  display: flex;
+  align-items: center;
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-xs);
+  padding: calc(var(--space-1) * 0.5) var(--space-1);
+  gap: var(--space-1);
+  transition: all 0.2s ease;
+}
+
+.preset-tag span {
+  color: var(--lora-accent);
+  font-size: 0.9em;
+}
+
+.preset-tag i {
+  color: var(--text-color);
+  opacity: 0.5;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.preset-tag:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  border-color: var(--lora-accent);
+}
+
+.preset-tag i:hover {
+  color: var(--lora-error);
+  opacity: 1;
+}
+
+.add-preset-btn {
+  padding: calc(var(--space-1) * 0.5) var(--space-2);
+  background: var(--lora-accent);
+  color: var(--lora-text);
+  border: none;
+  border-radius: var(--border-radius-xs);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.add-preset-btn:hover {
+  opacity: 0.9;
+}

static/css/components/lora-modal/showcase.css

@@ -0,0 +1,478 @@
+/* Showcase Section */
+.showcase-section {
+  position: relative;
+  margin-top: var(--space-4);
+}
+
+.carousel {
+  transition: max-height 0.3s ease-in-out;
+  overflow: hidden;
+}
+
+.carousel.collapsed {
+  max-height: 0;
+}
+
+.carousel-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.media-wrapper {
+  position: relative;
+  width: 100%;
+  background: var(--lora-surface);
+  margin-bottom: var(--space-2);
+  overflow: hidden; /* Ensure metadata panel is contained */
+}
+
+.media-wrapper:last-child {
+  margin-bottom: 0;
+}
+
+.media-wrapper img,
+.media-wrapper video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.no-examples {
+  text-align: center;
+  padding: var(--space-3);
+  color: var(--text-color);
+  opacity: 0.7;
+}
+
+/* Adjust the media wrapper for tab system */
+#showcase-tab .carousel-container {
+  margin-top: var(--space-2);
+}
+
+/* Add styles for blurred showcase content */
+.nsfw-media-wrapper {
+  position: relative;
+}
+
+.media-wrapper img.blurred,
+.media-wrapper video.blurred {
+  filter: blur(25px);
+}
+
+.media-wrapper .nsfw-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  pointer-events: none;
+}
+
+/* Position the toggle button at the top left of showcase media */
+.showcase-toggle-btn {
+  position: absolute;
+  z-index: 3;
+}
+
+/* Add styles for showcase media controls */
+.media-controls {
+  position: absolute;
+  display: flex;
+  gap: 6px;
+  z-index: 4;
+  opacity: 0;
+  transform: translateY(-5px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: none;
+}
+
+.media-controls.visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.media-control-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  padding: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.media-control-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
+}
+
+.media-control-btn.set-preview-btn:hover {
+  background: var(--lora-accent);
+  color: white;
+  border-color: var(--lora-accent);
+}
+
+.media-control-btn.example-delete-btn:hover:not(.disabled) {
+  background: var(--lora-error);
+  color: white;
+  border-color: var(--lora-error);
+}
+
+/* Disabled state for delete button */
+.media-control-btn.example-delete-btn.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Two-step confirmation for delete button */
+.media-control-btn.example-delete-btn .confirm-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--lora-error);
+  color: white;
+  font-size: 1em;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.media-control-btn.example-delete-btn.confirm .fa-trash-alt {
+  opacity: 0;
+}
+
+.media-control-btn.example-delete-btn.confirm .confirm-icon {
+  opacity: 1;
+}
+
+.media-control-btn.example-delete-btn.confirm {
+  background: var(--lora-error);
+  color: white;
+  border-color: var(--lora-error);
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 5px rgba(220, 53, 69, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
+  }
+}
+
+/* Image Metadata Panel Styles */
+.image-metadata-panel {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--bg-color);
+  border-top: 1px solid var(--border-color);
+  padding: var(--space-2);
+  transform: translateY(100%);
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease;
+  z-index: 5;
+  max-height: 50%; /* Reduced to take less space */
+  overflow-y: auto;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Show metadata panel only when the 'visible' class is added */
+.media-wrapper .image-metadata-panel.visible {
+  transform: translateY(0);
+  opacity: 0.98;
+  pointer-events: auto;
+}
+
+/* Adjust to dark theme */
+[data-theme="dark"] .image-metadata-panel {
+  background: var(--card-bg);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.metadata-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Styling for parameters tags */
+.params-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: var(--space-1);
+  padding-bottom: var(--space-1);
+  border-bottom: 1px solid var(--lora-border);
+}
+
+.param-tag {
+  display: inline-flex;
+  align-items: center;
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-xs);
+  padding: 2px 6px;
+  font-size: 0.8em;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.param-tag .param-name {
+  font-weight: 600;
+  color: var(--text-color);
+  margin-right: 4px;
+  opacity: 0.8;
+}
+
+.param-tag .param-value {
+  color: var(--lora-accent);
+}
+
+/* Special styling for prompt row */
+.metadata-row.prompt-row {
+  flex-direction: column;
+  padding-top: 0;
+}
+
+.metadata-row.prompt-row + .metadata-row.prompt-row {
+  margin-top: var(--space-2);
+}
+
+.metadata-label {
+  font-weight: 600;
+  color: var(--text-color);
+  opacity: 0.8;
+  font-size: 0.85em;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.metadata-prompt-wrapper {
+  position: relative;
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-xs);
+  padding: 6px 30px 6px 8px;
+  margin-top: 2px;
+  max-height: 80px; /* Reduced from 120px */
+  overflow-y: auto;
+  word-break: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.metadata-prompt {
+  color: var(--text-color);
+  font-family: monospace;
+  font-size: 0.85em;
+  white-space: pre-wrap;
+}
+
+.copy-prompt-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: transparent;
+  border: none;
+  color: var(--text-color);
+  opacity: 0.6;
+  cursor: pointer;
+  padding: 3px;
+  transition: all 0.2s ease;
+}
+
+.copy-prompt-btn:hover {
+  opacity: 1;
+  color: var(--lora-accent);
+}
+
+/* Scrollbar styling for metadata panel */
+.image-metadata-panel::-webkit-scrollbar {
+  width: 6px;
+}
+
+.image-metadata-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.image-metadata-panel::-webkit-scrollbar-thumb {
+  background-color: var(--border-color);
+  border-radius: 3px;
+}
+
+/* For Firefox */
+.image-metadata-panel {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-color) transparent;
+}
+
+/* No metadata message styling */
+.no-metadata-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2);
+  color: var(--text-color);
+  opacity: 0.7;
+  text-align: center;
+  font-style: italic;
+  gap: 8px;
+}
+
+.no-metadata-message i {
+  font-size: 1.1em;
+  color: var(--lora-accent);
+  opacity: 0.8;
+}
+
+/* Scroll Indicator */
+.scroll-indicator {
+  cursor: pointer;
+  padding: var(--space-2);
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: var(--space-2);
+  transition: background-color 0.2s, transform 0.2s;
+}
+
+.scroll-indicator:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  transform: translateY(-1px);
+}
+
+.scroll-indicator span {
+  font-size: 0.9em;
+  color: var(--text-color);
+}
+
+.lazy {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.lazy[src] {
+  opacity: 1;
+}
+
+/* Example Import Area */
+.example-import-area {
+  margin-top: var(--space-4);
+  padding: var(--space-2);
+}
+
+.example-import-area.empty {
+  margin-top: var(--space-2);
+  padding: var(--space-4) var(--space-2);
+}
+
+.import-container {
+  border: 2px dashed var(--border-color);
+  border-radius: var(--border-radius-sm);
+  padding: var(--space-4);
+  text-align: center;
+  transition: all 0.3s ease;
+  background: var(--lora-surface);
+  cursor: pointer;
+}
+
+.import-container.highlight {
+  border-color: var(--lora-accent);
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  transform: scale(1.01);
+}
+
+.import-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  padding-top: var(--space-1);
+}
+
+.import-placeholder i {
+  font-size: 2.5rem;
+  /* color: var(--lora-accent); */
+  opacity: 0.8;
+  margin-bottom: var(--space-1);
+}
+
+.import-placeholder h3 {
+  margin: 0 0 var(--space-1);
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.import-placeholder p {
+  margin: var(--space-1) 0;
+  color: var(--text-color);
+  opacity: 0.8;
+}
+
+.import-placeholder .sub-text {
+  font-size: 0.9em;
+  opacity: 0.6;
+  margin: var(--space-1) 0;
+}
+
+.import-formats {
+  font-size: 0.8em !important;
+  opacity: 0.6 !important;
+  margin-top: var(--space-2) !important;
+}
+
+.select-files-btn {
+  background: var(--lora-accent);
+  color: var(--lora-text);
+  border: none;
+  border-radius: var(--border-radius-xs);
+  padding: var(--space-2) var(--space-3);
+  cursor: pointer;
+  font-size: 0.9em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s;
+}
+
+.select-files-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+/* For dark theme */
+[data-theme="dark"] .import-container {
+  background: rgba(255, 255, 255, 0.03);
+}

static/css/components/lora-modal/tag.css

@@ -0,0 +1,148 @@
+/* Model Tags styles */
+.model-tags {
+  display: none;
+}
+
+.model-tag {
+  display: none;
+}
+
+/* Updated Model Tags styles - improved visibility in light theme */
+.model-tags-container {
+  position: relative;
+}
+
+.model-tags-compact {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.model-tag-compact {
+  /* Updated styles to match info-item appearance */
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-xs);
+  padding: 2px 8px;
+  font-size: 0.75em;
+  color: var(--text-color);
+  white-space: nowrap;
+}
+
+/* Style for empty tags placeholder */
+.model-tag-empty {
+  background: rgba(0, 0, 0, 0.02);
+  border: 1px dashed rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-xs);
+  padding: 2px 8px;
+  font-size: 0.75em;
+  color: var(--text-color);
+  white-space: nowrap;
+  opacity: 0.7;
+  font-style: italic;
+}
+
+/* Adjust dark theme tag styles */
+[data-theme="dark"] .model-tag-compact {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--lora-border);
+}
+
+/* Dark theme for empty tags */
+[data-theme="dark"] .model-tag-empty {
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px dashed var(--lora-border);
+}
+
+.model-tag-more {
+  background: var(--lora-accent);
+  color: var(--lora-text);
+  border-radius: var(--border-radius-xs);
+  padding: 2px 8px;
+  font-size: 0.75em;
+  cursor: pointer;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.model-tags-tooltip {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+  padding: 10px 14px;
+  max-width: 400px;
+  z-index: 10;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: all 0.2s ease;
+  pointer-events: none;
+}
+
+.model-tags-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.tooltip-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.tooltip-tag {
+  /* Updated styles to match info-item appearance */
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-xs);
+  padding: 3px 8px;
+  font-size: 0.75em;
+  color: var(--text-color);
+}
+
+/* Adjust dark theme tooltip tag styles */
+[data-theme="dark"] .tooltip-tag {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--lora-border);
+}
+
+/* Model Tags Edit Mode */
+.model-tags-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.edit-tags-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-color);
+  opacity: 0;
+  cursor: pointer;
+  padding: 2px 5px;
+  border-radius: var(--border-radius-xs);
+  transition: all 0.2s ease;
+  margin-left: var(--space-1);
+}
+
+.edit-tags-btn.visible,
+.model-tags-container:hover .edit-tags-btn {
+  opacity: 0.5;
+}
+
+/* Edit mode active state */
+.model-tags-container.edit-mode {
+  width: 100%;
+  display: block;
+  flex-basis: 100%;
+  grid-column: 1 / -1;
+}

static/css/components/lora-modal/triggerwords.css

@@ -0,0 +1,112 @@
+/* Update Trigger Words styles */
+.info-item.trigger-words {
+  padding: var(--space-2);
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-sm);
+}
+
+/* 调整 trigger words 样式 */
+[data-theme="dark"] .info-item.trigger-words {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--lora-border);
+}
+
+/* New header style for trigger words */
+.trigger-words-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.trigger-words-content {
+  margin-bottom: var(--space-1);
+}
+
+.trigger-words-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+/* No trigger words message */
+.no-trigger-words {
+  color: var(--text-color);
+  opacity: 0.7;
+  font-style: italic;
+  font-size: 0.9em;
+}
+
+/* Trigger word tags in display mode */
+.trigger-word-tag {
+  display: inline-flex;
+  align-items: center;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-xs);
+  padding: 4px 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  gap: 6px;
+  position: relative;
+}
+
+.trigger-word-content {
+  color: var(--lora-accent) !important;
+  font-size: 0.85em;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.trigger-word-tag:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  border-color: var(--lora-accent);
+}
+
+.trigger-word-copy {
+  display: flex;
+  align-items: center;
+  color: var(--text-color);
+  opacity: 0.5;
+  flex-shrink: 0;
+  transition: opacity 0.2s;
+}
+
+.trained-word-freq {
+  color: var(--text-color);
+  font-size: 0.75em;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  min-width: 20px;
+  padding: 1px 5px;
+  text-align: center;
+  line-height: 1.2;
+}
+
+[data-theme="dark"] .trained-word-freq {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* Class tokens styling */
+.class-tokens-container {
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.class-token-item {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1) !important;
+  border: 1px solid var(--lora-accent) !important;
+}
+
+.token-badge {
+  background: var(--lora-accent);
+  color: white;
+  font-size: 0.7em;
+  padding: 2px 5px;
+  border-radius: 8px;
+  white-space: nowrap;
+}

static/css/components/modal.css

@@ -306,18 +306,6 @@ body.modal-open {
     width: 100%; /* Full width */
 }
 
-/* Migrate control styling */
-.migrate-control {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.migrate-control input {
-    flex: 1;
-    min-width: 0;
-}
-
 /* 统一各个 section 的样式 */
 .support-section,
 .changelog-section,
@@ -375,12 +363,6 @@ body.modal-open {
     background: rgba(255, 255, 255, 0.05);
 }
 
-/* Add disabled style for setting items */
-.setting-item[data-requires-centralized="true"].disabled {
-    opacity: 0.6;
-    pointer-events: none;
-}
-
 /* Control row with label and input together */
 .setting-row {
     display: flex;
@@ -783,30 +765,6 @@ input:checked + .toggle-slider:before {
   display: block;
 }
 
-/* Video embed styles */
-.video-embed {
-  position: relative;
-  padding-bottom: 56.25%; /* 16:9 aspect ratio */
-  height: 0;
-  overflow: hidden;
-  max-width: 100%;
-  margin-bottom: var(--space-2);
-  border-radius: var(--border-radius-sm);
-}
-
-.video-embed iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.video-embed.small {
-  max-width: 100%;
-  margin-bottom: var(--space-1);
-}
-
 .help-text {
   margin: var(--space-2) 0;
 }
@@ -972,4 +930,155 @@ input:checked + .toggle-slider:before {
 [data-theme="dark"] .warning-box {
   background-color: rgba(255, 193, 7, 0.05);
   border-color: rgba(255, 193, 7, 0.3);
+}
+
+/* Privacy-friendly video embed styles */
+.video-container {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  height: 0;
+  margin-bottom: var(--space-2);
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.video-thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.video-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: filter 0.2s ease;
+}
+
+.video-play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.2s ease;
+}
+
+/* External link button styles */
+.external-link-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  border-radius: var(--border-radius-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background-color: var(--lora-accent);
+  color: white;
+  text-decoration: none;
+  border: none;
+}
+
+.external-link-btn:hover {
+  background-color: oklch(from var(--lora-accent) l c h / 85%);
+}
+
+.video-thumbnail i {
+  font-size: 1.2em;
+}
+
+/* Smaller video container for the updates tab */
+.video-item .video-container {
+  padding-bottom: 40%; /* Shorter height for the playlist */
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .video-container {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+/* Example Access Modal */
+.example-access-modal {
+    max-width: 550px;
+    text-align: center;
+}
+
+.example-access-options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    margin: var(--space-3) 0;
+}
+
+.example-option-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--space-2);
+    border-radius: var(--border-radius-sm);
+    border: 1px solid var(--lora-border);
+    background-color: var(--lora-surface);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.example-option-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-color: var(--lora-accent);
+}
+
+.example-option-btn i {
+    font-size: 2em;
+    margin-bottom: var(--space-1);
+    color: var(--lora-accent);
+}
+
+.option-title {
+    font-weight: 500;
+    margin-bottom: 4px;
+    font-size: 1.1em;
+}
+
+.option-desc {
+    font-size: 0.9em;
+    opacity: 0.8;
+}
+
+.example-option-btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.example-option-btn.disabled i {
+    color: var(--text-color);
+    opacity: 0.5;
+}
+
+.modal-footer-note {
+    font-size: 0.9em;
+    opacity: 0.7;
+    margin-top: var(--space-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .example-option-btn:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }

static/css/components/shared/edit-metadata.css

@@ -0,0 +1,321 @@
+/* Common Metadata Edit UI Components */
+/* Used by both tag editing and trigger words editing interfaces */
+
+/* Edit Button */
+.metadata-edit-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-color);
+  opacity: 0.5;
+  cursor: pointer;
+  padding: 2px 5px;
+  border-radius: var(--border-radius-xs);
+  transition: all 0.2s ease;
+}
+
+.metadata-edit-btn:hover {
+  opacity: 0.8;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .metadata-edit-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* Edit mode active state */
+.edit-mode .metadata-edit-btn {
+  opacity: 0.8;
+  color: var(--lora-accent);
+}
+
+/* Edit Container */
+.metadata-edit-container {
+  padding: var(--space-2);
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-sm);
+  margin-top: var(--space-2);
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+}
+
+[data-theme="dark"] .metadata-edit-container {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--lora-border);
+}
+
+/* Edit Header */
+.metadata-edit-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--lora-border);
+  width: 100%;
+}
+
+/* Style for the edit button when positioned in the header */
+.metadata-header-btn {
+  display: inline-flex !important;
+  opacity: 0.8 !important;
+  color: var(--lora-accent) !important;
+  margin-left: auto;
+}
+
+/* Edit Content */
+.metadata-edit-content {
+  margin-bottom: var(--space-1);
+  width: 100%;
+  display: block;
+}
+
+/* Items Container */
+.metadata-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+  margin-bottom: var(--space-2);
+  width: 100%;
+}
+
+/* Individual Item */
+.metadata-item {
+  display: inline-flex;
+  align-items: center;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-xs);
+  padding: 4px 8px;
+  position: relative;
+}
+
+.metadata-item-content {
+  color: var(--lora-accent) !important;
+  font-size: 0.85em;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+/* Delete Button */
+.metadata-delete-btn {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  width: 16px;
+  height: 16px;
+  background: var(--lora-error);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  transition: transform 0.2s ease;
+}
+
+.metadata-delete-btn:hover {
+  transform: scale(1.1);
+}
+
+/* Edit Controls */
+.metadata-edit-controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+.metadata-edit-controls button {
+  padding: 3px 8px;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-size: 0.85em;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.2s ease;
+}
+
+.metadata-edit-controls button:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  border-color: var(--lora-accent);
+}
+
+.metadata-save-btn,
+.save-tags-btn {
+  background: var(--lora-accent) !important;
+  color: white !important;
+  border-color: var(--lora-accent) !important;
+}
+
+.metadata-save-btn:hover,
+.save-tags-btn:hover {
+  opacity: 0.9;
+}
+
+/* Add Form */
+.metadata-add-form {
+  display: flex;
+  gap: var(--space-1);
+  position: relative;
+  width: 100%;
+}
+
+.metadata-input {
+  flex: 1;
+  padding: 4px 8px;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-size: 0.9em;
+}
+
+.metadata-input:focus {
+  border-color: var(--lora-accent);
+  outline: none;
+}
+
+/* Suggestions Dropdown */
+.metadata-suggestions-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  margin-top: 4px;
+  z-index: 100;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.metadata-suggestions-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: var(--card-bg);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.metadata-suggestions-header span {
+  font-size: 0.9em;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.metadata-suggestions-header small {
+  font-size: 0.8em;
+  opacity: 0.7;
+}
+
+.metadata-suggestions-container {
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-content: flex-start;
+}
+
+.metadata-suggestion-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-radius: var(--border-radius-xs);
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  max-width: 150px;
+}
+
+.metadata-suggestion-item:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  border-color: var(--lora-accent);
+}
+
+.metadata-suggestion-item.already-added {
+  opacity: 0.7;
+  cursor: default;
+}
+
+.metadata-suggestion-item.already-added:hover {
+  background: var(--lora-surface);
+  border-color: var(--lora-border);
+}
+
+.metadata-suggestion-text {
+  color: var(--lora-accent) !important;
+  font-size: 0.9em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 4px;
+  max-width: 100px;
+}
+
+.metadata-suggestion-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.added-indicator {
+  color: var(--lora-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75em;
+}
+
+/* No suggestions message */
+.no-suggestions {
+  padding: 16px 12px;
+  text-align: center;
+  color: var(--text-color);
+  opacity: 0.7;
+  font-style: italic;
+  font-size: 0.9em;
+}
+
+/* Loading indicator */
+.metadata-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--space-1) 0;
+  color: var(--text-color);
+  opacity: 0.7;
+  font-size: 0.9em;
+  gap: 8px;
+}
+
+.metadata-loading i {
+  color: var(--lora-accent);
+}
+
+/* Dropdown separator */
+.dropdown-separator {
+  height: 1px;
+  background: var(--lora-border);
+  margin: 5px 10px;
+}

static/css/components/update-modal.css

@@ -37,13 +37,11 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: rgba(0, 0, 0, 0.02); /* 轻微的灰色背景 */
-    border: 1px solid rgba(0, 0, 0, 0.08); /* 更明显的边框 */
     border-radius: var(--border-radius-sm);
     padding: var(--space-3);
 }
 
-.version-info {
+.update-info .version-info {
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -70,6 +68,15 @@
     color: var(--lora-accent);
 }
 
+/* Add styling for git info display */
+.git-info {
+    font-size: 0.85em;
+    opacity: 0.7;
+    margin-top: 4px;
+    font-family: monospace;
+    color: var(--text-color);
+}
+
 .update-link {
     display: flex;
     align-items: center;

static/css/style.css

@@ -13,7 +13,13 @@
 @import 'components/loading.css';
 @import 'components/menu.css';
 @import 'components/update-modal.css';
-@import 'components/lora-modal.css';
+@import 'components/lora-modal/lora-modal.css';
+@import 'components/lora-modal/description.css';
+@import 'components/lora-modal/tag.css';
+@import 'components/lora-modal/preset-tags.css';
+@import 'components/lora-modal/showcase.css';
+@import 'components/lora-modal/triggerwords.css';
+@import 'components/shared/edit-metadata.css';
 @import 'components/support-modal.css';
 @import 'components/search-filter.css';
 @import 'components/bulk.css';

static/js/api/baseModelApi.js

@@ -1,164 +1,7 @@
-// filepath: d:\Workspace\ComfyUI\custom_nodes\ComfyUI-Lora-Manager\static\js\api\baseModelApi.js
 import { state, getCurrentPageState } from '../state/index.js';
 import { showToast } from '../utils/uiHelpers.js';
 import { getSessionItem, saveMapToStorage } from '../utils/storageHelpers.js';
 
-/**
- * Shared functionality for handling models (loras and checkpoints)
- */
-
-// Generic function to load more models with pagination
-export async function loadMoreModels(options = {}) {
-    const {
-        resetPage = false,
-        updateFolders = false,
-        modelType = 'lora', // 'lora' or 'checkpoint'
-        createCardFunction,
-        endpoint = '/api/loras'
-    } = options;
-
-    const pageState = getCurrentPageState();
-    
-    if (pageState.isLoading || (!pageState.hasMore && !resetPage)) return;
-    
-    pageState.isLoading = true;
-    document.body.classList.add('loading');
-    
-    try {
-        // Reset to first page if requested
-        if (resetPage) {
-            pageState.currentPage = 1;
-            // Clear grid if resetting
-            const gridId = modelType === 'checkpoint' ? 'checkpointGrid' : 'loraGrid';
-            const grid = document.getElementById(gridId);
-            if (grid) grid.innerHTML = '';
-        }
-        
-        const params = new URLSearchParams({
-            page: pageState.currentPage,
-            page_size: pageState.pageSize || 20,
-            sort_by: pageState.sortBy
-        });
-        
-        if (pageState.activeFolder !== null) {
-            params.append('folder', pageState.activeFolder);
-        }
-
-        // Add favorites filter parameter if enabled
-        if (pageState.showFavoritesOnly) {
-            params.append('favorites_only', 'true');
-        }
-        
-        // Add active letter filter if set
-        if (pageState.activeLetterFilter) {
-            params.append('first_letter', pageState.activeLetterFilter);
-        }
-
-        // Add search parameters if there's a search term
-        if (pageState.filters?.search) {
-            params.append('search', pageState.filters.search);
-            params.append('fuzzy', 'true');
-            
-            // Add search option parameters if available
-            if (pageState.searchOptions) {
-                params.append('search_filename', pageState.searchOptions.filename.toString());
-                params.append('search_modelname', pageState.searchOptions.modelname.toString());
-                if (pageState.searchOptions.tags !== undefined) {
-                    params.append('search_tags', pageState.searchOptions.tags.toString());
-                }
-                params.append('recursive', (pageState.searchOptions?.recursive ?? false).toString());
-            }
-        }
-        
-        // Add filter parameters if active
-        if (pageState.filters) {
-            // Handle tags filters
-            if (pageState.filters.tags && pageState.filters.tags.length > 0) {
-                // Checkpoints API expects individual 'tag' parameters, Loras API expects comma-separated 'tags'
-                if (modelType === 'checkpoint') {
-                    pageState.filters.tags.forEach(tag => {
-                        params.append('tag', tag);
-                    });
-                } else {
-                    params.append('tags', pageState.filters.tags.join(','));
-                }
-            }
-            
-            // Handle base model filters
-            if (pageState.filters.baseModel && pageState.filters.baseModel.length > 0) {
-                if (modelType === 'checkpoint') {
-                    pageState.filters.baseModel.forEach(model => {
-                        params.append('base_model', model);
-                    });
-                } else {
-                    params.append('base_models', pageState.filters.baseModel.join(','));
-                }
-            }
-        }
-
-        // Add model-specific parameters
-        if (modelType === 'lora') {
-            // Check for recipe-based filtering parameters from session storage
-            const filterLoraHash = getSessionItem('recipe_to_lora_filterLoraHash');
-            const filterLoraHashes = getSessionItem('recipe_to_lora_filterLoraHashes');
-
-            // Add hash filter parameter if present
-            if (filterLoraHash) {
-                params.append('lora_hash', filterLoraHash);
-            } 
-            // Add multiple hashes filter if present
-            else if (filterLoraHashes) {
-                try {
-                    if (Array.isArray(filterLoraHashes) && filterLoraHashes.length > 0) {
-                        params.append('lora_hashes', filterLoraHashes.join(','));
-                    }
-                } catch (error) {
-                    console.error('Error parsing lora hashes from session storage:', error);
-                }
-            }
-        }
-
-        const response = await fetch(`${endpoint}?${params}`);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch models: ${response.statusText}`);
-        }
-        
-        const data = await response.json();
-        
-        const gridId = modelType === 'checkpoint' ? 'checkpointGrid' : 'loraGrid';
-        const grid = document.getElementById(gridId);
-        
-        if (data.items.length === 0 && pageState.currentPage === 1) {
-            grid.innerHTML = `<div class="no-results">No ${modelType}s found in this folder</div>`;
-            pageState.hasMore = false;
-        } else if (data.items.length > 0) {
-            pageState.hasMore = pageState.currentPage < data.total_pages;
-            
-            // Append model cards using the provided card creation function
-            data.items.forEach(model => {
-                const card = createCardFunction(model);
-                grid.appendChild(card);
-            });
-            
-            // Increment the page number AFTER successful loading
-            pageState.currentPage++;
-        } else {
-            pageState.hasMore = false;
-        }
-
-        if (updateFolders && data.folders) {
-            updateFolderTags(data.folders);
-        }
-        
-    } catch (error) {
-        console.error(`Error loading ${modelType}s:`, error);
-        showToast(`Failed to load ${modelType}s: ${error.message}`, 'error');
-    } finally {
-        pageState.isLoading = false;
-        document.body.classList.remove('loading');
-    }
-}
-
 // New method for virtual scrolling fetch
 export async function fetchModelsPage(options = {}) {
     const {
@@ -294,7 +137,6 @@ export async function resetAndReloadWithVirtualScroll(options = {}) {
     
     try {
         pageState.isLoading = true;
-        document.body.classList.add('loading');
         
         // Reset page counter
         pageState.currentPage = 1;
@@ -325,7 +167,6 @@ export async function resetAndReloadWithVirtualScroll(options = {}) {
         throw error;
     } finally {
         pageState.isLoading = false;
-        document.body.classList.remove('loading');
     }
 }
 
@@ -347,7 +188,6 @@ export async function loadMoreWithVirtualScroll(options = {}) {
     try {
         // Start loading state
         pageState.isLoading = true;
-        document.body.classList.add('loading');
         
         // Reset to first page if requested
         if (resetPage) {
@@ -380,7 +220,6 @@ export async function loadMoreWithVirtualScroll(options = {}) {
         throw error;
     } finally {
         pageState.isLoading = false;
-        document.body.classList.remove('loading');
     }
 }
 
@@ -482,22 +321,6 @@ export async function deleteModel(filePath, modelType = 'lora') {
     }
 }
 
-// Reset and reload models
-export async function resetAndReload(options = {}) {
-    const {
-        updateFolders = false,
-        modelType = 'lora', 
-        loadMoreFunction
-    } = options;
-    
-    const pageState = getCurrentPageState();
-    
-    // Reset pagination and load more models
-    if (typeof loadMoreFunction === 'function') {
-        await loadMoreFunction(true, updateFolders);
-    }
-}
-
 // Generic function to refresh models
 export async function refreshModels(options = {}) {
     const { 
@@ -648,6 +471,11 @@ export async function refreshSingleModelMetadata(filePath, modelType = 'lora') {
         const data = await response.json();
         
         if (data.success) {
+            // Use the returned metadata to update just this single item
+            if (data.metadata && state.virtualScroller) {
+                state.virtualScroller.updateSingleItem(filePath, data.metadata);
+            }
+
             showToast('Metadata refreshed successfully', 'success');
             return true;
         } else {
@@ -714,23 +542,17 @@ export async function excludeModel(filePath, modelType = 'lora') {
     }
 }
 
-// Private methods
-
 // Upload a preview image
-async function uploadPreview(filePath, file, modelType = 'lora') {
-    const loadingOverlay = document.getElementById('loading-overlay');
-    const loadingStatus = document.querySelector('.loading-status');
-    
+export async function uploadPreview(filePath, file, modelType = 'lora', nsfwLevel = 0) {
     try {
-        if (loadingOverlay) loadingOverlay.style.display = 'flex';
-        if (loadingStatus) loadingStatus.textContent = 'Uploading preview...';
+        state.loadingManager.showSimpleLoading('Uploading preview...');
         
         const formData = new FormData();
         
-        // Use appropriate parameter names and endpoint based on model type
         // Prepare common form data
         formData.append('preview_file', file);
         formData.append('model_path', filePath);
+        formData.append('nsfw_level', nsfwLevel.toString());  // Add nsfw_level parameter
 
         // Set endpoint based on model type
         const endpoint = modelType === 'checkpoint' 
@@ -747,56 +569,39 @@ async function uploadPreview(filePath, file, modelType = 'lora') {
         }
 
         const data = await response.json();
+
+        // Get the current page's previewVersions Map based on model type
+        const pageType = modelType === 'checkpoint' ? 'checkpoints' : 'loras';
+        const previewVersions = state.pages[pageType].previewVersions;
         
-        // Update the card preview in UI
-        const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-        if (card) {
-            const previewContainer = card.querySelector('.card-preview');
-            const oldPreview = previewContainer.querySelector('img, video');
+        // Update the version timestamp
+        const timestamp = Date.now();
+        if (previewVersions) {
+            previewVersions.set(filePath, timestamp);
             
-            // Get the current page's previewVersions Map based on model type
-            const pageType = modelType === 'checkpoint' ? 'checkpoints' : 'loras';
-            const previewVersions = state.pages[pageType].previewVersions;
-            
-            // Update the version timestamp
-            const timestamp = Date.now();
-            if (previewVersions) {
-                previewVersions.set(filePath, timestamp);
-                
-                // Save the updated Map to localStorage
-                const storageKey = modelType === 'checkpoint' ? 'checkpoint_preview_versions' : 'lora_preview_versions';
-                saveMapToStorage(storageKey, previewVersions);
-            }
-            
-            const previewUrl = data.preview_url ? 
-                `${data.preview_url}?t=${timestamp}` : 
-                `/api/model/preview_image?path=${encodeURIComponent(filePath)}&t=${timestamp}`;
-            
-            // Create appropriate element based on file type
-            if (file.type.startsWith('video/')) {
-                const video = document.createElement('video');
-                video.controls = true;
-                video.autoplay = true;
-                video.muted = true;
-                video.loop = true;
-                video.src = previewUrl;
-                oldPreview.replaceWith(video);
-            } else {
-                const img = document.createElement('img');
-                img.src = previewUrl;
-                oldPreview.replaceWith(img);
-            }
-            
-            showToast('Preview updated successfully', 'success');
+            // Save the updated Map to localStorage
+            const storageKey = modelType === 'checkpoint' ? 'checkpoint_preview_versions' : 'lora_preview_versions';
+            saveMapToStorage(storageKey, previewVersions);
         }
+
+        const updateData = {
+            preview_url: data.preview_url,
+            preview_nsfw_level: data.preview_nsfw_level // Include nsfw level in update data
+        };
+
+        state.virtualScroller.updateSingleItem(filePath, updateData);
+
+        showToast('Preview updated successfully', 'success');
     } catch (error) {
         console.error('Error uploading preview:', error);
         showToast('Failed to upload preview image', 'error');
     } finally {
-        if (loadingOverlay) loadingOverlay.style.display = 'none';
+        state.loadingManager.hide();
     }
 }
 
+// Private methods
+
 // Private function to perform the delete operation
 async function performDelete(filePath, modelType = 'lora') {
     try {

static/js/api/checkpointApi.js

@@ -1,8 +1,5 @@
-import { createCheckpointCard } from '../components/CheckpointCard.js';
 import {
-    loadMoreModels,
     fetchModelsPage,
-    resetAndReload as baseResetAndReload,
     resetAndReloadWithVirtualScroll,
     loadMoreWithVirtualScroll,
     refreshModels as baseRefreshModels,
@@ -36,43 +33,21 @@ export async function fetchCheckpointsPage(page = 1, pageSize = 100) {
  * @returns {Promise<void>}
  */
 export async function loadMoreCheckpoints(resetPage = false, updateFolders = false) {
-    // Check if virtual scroller is available
-    if (state.virtualScroller) {
-        return loadMoreWithVirtualScroll({
-            modelType: 'checkpoint',
-            resetPage,
-            updateFolders,
-            fetchPageFunction: fetchCheckpointsPage
-        });
-    } else {
-        // Fall back to the original implementation if virtual scroller isn't available
-        return loadMoreModels({
-            resetPage,
-            updateFolders,
-            modelType: 'checkpoint',
-            createCardFunction: createCheckpointCard,
-            endpoint: '/api/checkpoints'
-        });
-    }
+    return loadMoreWithVirtualScroll({
+        modelType: 'checkpoint',
+        resetPage,
+        updateFolders,
+        fetchPageFunction: fetchCheckpointsPage
+    });
 }
 
 // Reset and reload checkpoints
 export async function resetAndReload(updateFolders = false) {
-    // Check if virtual scroller is available
-    if (state.virtualScroller) {
-        return resetAndReloadWithVirtualScroll({
-            modelType: 'checkpoint',
-            updateFolders,
-            fetchPageFunction: fetchCheckpointsPage
-        });
-    } else {
-        // Fall back to original implementation
-        return baseResetAndReload({
-            updateFolders,
-            modelType: 'checkpoint',
-            loadMoreFunction: loadMoreCheckpoints
-        });
-    }
+    return resetAndReloadWithVirtualScroll({
+        modelType: 'checkpoint',
+        updateFolders,
+        fetchPageFunction: fetchCheckpointsPage
+    });
 }
 
 // Refresh checkpoints
@@ -106,11 +81,7 @@ export async function fetchCivitai() {
 
 // Refresh single checkpoint metadata
 export async function refreshSingleCheckpointMetadata(filePath) {
-    const success = await refreshSingleModelMetadata(filePath, 'checkpoint');
-    if (success) {
-        // Reload the current view to show updated data
-        await resetAndReload();
-    }
+    await refreshSingleModelMetadata(filePath, 'checkpoint');
 }
 
 /**
@@ -138,6 +109,9 @@ export async function saveModelMetadata(filePath, data) {
         if (!response.ok) {
             throw new Error('Failed to save metadata');
         }
+
+        // Update the virtual scroller with the new metadata
+        state.virtualScroller.updateSingleItem(filePath, data);
         
         return response.json();
     } finally {

static/js/api/loraApi.js

@@ -1,8 +1,5 @@
-import { createLoraCard } from '../components/LoraCard.js';
 import {
-    loadMoreModels,
     fetchModelsPage,
-    resetAndReload as baseResetAndReload,
     resetAndReloadWithVirtualScroll,
     loadMoreWithVirtualScroll,
     refreshModels as baseRefreshModels,
@@ -12,7 +9,7 @@ import {
     refreshSingleModelMetadata,
     excludeModel as baseExcludeModel
 } from './baseModelApi.js';
-import { state, getCurrentPageState } from '../state/index.js';
+import { state } from '../state/index.js';
 
 /**
  * Save model metadata to the server
@@ -39,6 +36,9 @@ export async function saveModelMetadata(filePath, data) {
         if (!response.ok) {
             throw new Error('Failed to save metadata');
         }
+
+        // Update the virtual scroller with the new data
+        state.virtualScroller.updateSingleItem(filePath, data);
         
         return response.json();
     } finally {
@@ -63,26 +63,12 @@ export async function excludeLora(filePath) {
  * @returns {Promise<void>}
  */
 export async function loadMoreLoras(resetPage = false, updateFolders = false) {
-    const pageState = getCurrentPageState();
-    
-    // Check if virtual scroller is available
-    if (state.virtualScroller) {
-        return loadMoreWithVirtualScroll({
-            modelType: 'lora',
-            resetPage,
-            updateFolders,
-            fetchPageFunction: fetchLorasPage
-        });
-    } else {
-        // Fall back to the original implementation if virtual scroller isn't available
-        return loadMoreModels({
-            resetPage,
-            updateFolders,
-            modelType: 'lora',
-            createCardFunction: createLoraCard,
-            endpoint: '/api/loras'
-        });
-    }
+    return loadMoreWithVirtualScroll({
+        modelType: 'lora',
+        resetPage,
+        updateFolders,
+        fetchPageFunction: fetchLorasPage
+    });
 }
 
 /**
@@ -116,39 +102,12 @@ export async function replacePreview(filePath) {
     return replaceModelPreview(filePath, 'lora');
 }
 
-export function appendLoraCards(loras) {
-    // This function is no longer needed with virtual scrolling
-    // but kept for compatibility
-    if (state.virtualScroller) {
-        console.warn('appendLoraCards is deprecated when using virtual scrolling');
-    } else {
-        const grid = document.getElementById('loraGrid');
-        
-        loras.forEach(lora => {
-            const card = createLoraCard(lora);
-            grid.appendChild(card);
-        });
-    }
-}
-
 export async function resetAndReload(updateFolders = false) {
-    const pageState = getCurrentPageState();
-    
-    // Check if virtual scroller is available
-    if (state.virtualScroller) {
-        return resetAndReloadWithVirtualScroll({
-            modelType: 'lora',
-            updateFolders,
-            fetchPageFunction: fetchLorasPage
-        });
-    } else {
-        // Fall back to original implementation
-        return baseResetAndReload({
-            updateFolders,
-            modelType: 'lora',
-            loadMoreFunction: loadMoreLoras
-        });
-    }
+    return resetAndReloadWithVirtualScroll({
+        modelType: 'lora',
+        updateFolders,
+        fetchPageFunction: fetchLorasPage
+    });
 }
 
 export async function refreshLoras(fullRebuild = false) {
@@ -161,11 +120,7 @@ export async function refreshLoras(fullRebuild = false) {
 }
 
 export async function refreshSingleLoraMetadata(filePath) {
-    const success = await refreshSingleModelMetadata(filePath, 'lora');
-    if (success) {
-        // Reload the current view to show updated data
-        await resetAndReload();
-    }
+    await refreshSingleModelMetadata(filePath, 'lora');
 }
 
 export async function fetchModelDescription(modelId, filePath) {

static/js/api/recipeApi.js

@@ -1,6 +1,5 @@
 import { RecipeCard } from '../components/RecipeCard.js';
 import {
-    fetchModelsPage,
     resetAndReloadWithVirtualScroll,
     loadMoreWithVirtualScroll
 } from './baseModelApi.js';

static/js/components/CheckpointCard.js

@@ -219,18 +219,9 @@ export function createCheckpointCard(checkpoint) {
                 favorite: newFavoriteState 
             });
 
-            // Update the UI
             if (newFavoriteState) {
-                starIcon.classList.remove('far');
-                starIcon.classList.add('fas', 'favorite-active');
-                starIcon.title = 'Remove from favorites';
-                card.dataset.favorite = 'true';
                 showToast('Added to favorites', 'success');
             } else {
-                starIcon.classList.remove('fas', 'favorite-active');
-                starIcon.classList.add('far');
-                starIcon.title = 'Add to favorites';
-                card.dataset.favorite = 'false';
                 showToast('Removed from favorites', 'success');
             }
         } catch (error) {

static/js/components/ContextMenu/CheckpointContextMenu.js

@@ -1,17 +1,15 @@
 import { BaseContextMenu } from './BaseContextMenu.js';
-import { refreshSingleCheckpointMetadata, saveModelMetadata, replaceCheckpointPreview } from '../../api/checkpointApi.js';
-import { showToast, getNSFWLevelName, openExampleImagesFolder } from '../../utils/uiHelpers.js';
-import { NSFW_LEVELS } from '../../utils/constants.js';
-import { getStorageItem } from '../../utils/storageHelpers.js';
+import { ModelContextMenuMixin } from './ModelContextMenuMixin.js';
+import { refreshSingleCheckpointMetadata, saveModelMetadata, replaceCheckpointPreview, resetAndReload } from '../../api/checkpointApi.js';
+import { showToast } from '../../utils/uiHelpers.js';
 import { showExcludeModal } from '../../utils/modalUtils.js';
-import { modalManager } from '../../managers/ModalManager.js';
-import { state } from '../../state/index.js';
-import { resetAndReload } from '../../api/checkpointApi.js';
 
 export class CheckpointContextMenu extends BaseContextMenu {
     constructor() {
         super('checkpointContextMenu', '.lora-card');
         this.nsfwSelector = document.getElementById('nsfwLevelSelector');
+        this.modelType = 'checkpoint';
+        this.resetAndReload = resetAndReload;
         
         // Initialize NSFW Level Selector events
         if (this.nsfwSelector) {
@@ -19,30 +17,27 @@ export class CheckpointContextMenu extends BaseContextMenu {
         }
     }
     
+    // Implementation needed by the mixin
+    async saveModelMetadata(filePath, data) {
+        return saveModelMetadata(filePath, data);
+    }
+    
     handleMenuAction(action) {
+        // First try to handle with common actions
+        if (ModelContextMenuMixin.handleCommonMenuActions.call(this, action)) {
+            return;
+        }
+
+        // Otherwise handle checkpoint-specific actions
         switch(action) {
             case 'details':
                 // Show checkpoint details
                 this.currentCard.click();
                 break;
-            case 'preview':
-                // Open example images folder instead of replacing preview
-                openExampleImagesFolder(this.currentCard.dataset.sha256);
-                break;
             case 'replace-preview':
                 // Add new action for replacing preview images
                 replaceCheckpointPreview(this.currentCard.dataset.filepath);
                 break;
-            case 'civitai':
-                // Open civitai page
-                if (this.currentCard.dataset.from_civitai === 'true') {
-                    if (this.currentCard.querySelector('.fa-globe')) {
-                        this.currentCard.querySelector('.fa-globe').click();
-                    }
-                } else {
-                    showToast('No CivitAI information available', 'info');
-                }
-                break;
             case 'delete':
                 // Delete checkpoint
                 if (this.currentCard.querySelector('.fa-trash')) {
@@ -59,14 +54,6 @@ export class CheckpointContextMenu extends BaseContextMenu {
                 // Refresh metadata from CivitAI
                 refreshSingleCheckpointMetadata(this.currentCard.dataset.filepath);
                 break;
-            case 'relink-civitai':
-                // Handle re-link to Civitai
-                this.showRelinkCivitaiModal();
-                break;
-            case 'set-nsfw':
-                // Set NSFW level
-                this.showNSFWLevelSelector(null, null, this.currentCard);
-                break;
             case 'move':
                 // Move to folder (placeholder)
                 showToast('Move to folder feature coming soon', 'info');
@@ -74,339 +61,9 @@ export class CheckpointContextMenu extends BaseContextMenu {
             case 'exclude':
                 showExcludeModal(this.currentCard.dataset.filepath, 'checkpoint');
                 break;
-
         }
     }
+}
 
-    // NSFW Selector methods
-    initNSFWSelector() {
-        // Close button
-        const closeBtn = this.nsfwSelector.querySelector('.close-nsfw-selector');
-        closeBtn.addEventListener('click', () => {
-            this.nsfwSelector.style.display = 'none';
-        });
-
-        // Level buttons
-        const levelButtons = this.nsfwSelector.querySelectorAll('.nsfw-level-btn');
-        levelButtons.forEach(btn => {
-            btn.addEventListener('click', async () => {
-                const level = parseInt(btn.dataset.level);
-                const filePath = this.nsfwSelector.dataset.cardPath;
-                
-                if (!filePath) return;
-                
-                try {
-                    await saveModelMetadata(filePath, { preview_nsfw_level: level });
-                    
-                    // Update card data
-                    const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-                    if (card) {
-                        let metaData = {};
-                        try {
-                            metaData = JSON.parse(card.dataset.meta || '{}');
-                        } catch (err) {
-                            console.error('Error parsing metadata:', err);
-                        }
-                        
-                        metaData.preview_nsfw_level = level;
-                        card.dataset.meta = JSON.stringify(metaData);
-                        card.dataset.nsfwLevel = level.toString();
-                        
-                        // Apply blur effect immediately
-                        this.updateCardBlurEffect(card, level);
-                    }
-                    
-                    showToast(`Content rating set to ${getNSFWLevelName(level)}`, 'success');
-                    this.nsfwSelector.style.display = 'none';
-                } catch (error) {
-                    showToast(`Failed to set content rating: ${error.message}`, 'error');
-                }
-            });
-        });
-        
-        // Close when clicking outside
-        document.addEventListener('click', (e) => {
-            if (this.nsfwSelector.style.display === 'block' && 
-                !this.nsfwSelector.contains(e.target) && 
-                !e.target.closest('.context-menu-item[data-action="set-nsfw"]')) {
-                this.nsfwSelector.style.display = 'none';
-            }
-        });
-    }
-
-    updateCardBlurEffect(card, level) {
-        // Get user settings for blur threshold
-        const blurThreshold = parseInt(getStorageItem('nsfwBlurLevel') || '4');
-        
-        // Get card preview container
-        const previewContainer = card.querySelector('.card-preview');
-        if (!previewContainer) return;
-        
-        // Get preview media element
-        const previewMedia = previewContainer.querySelector('img') || previewContainer.querySelector('video');
-        if (!previewMedia) return;
-        
-        // Check if blur should be applied
-        if (level >= blurThreshold) {
-            // Add blur class to the preview container
-            previewContainer.classList.add('blurred');
-            
-            // Get or create the NSFW overlay
-            let nsfwOverlay = previewContainer.querySelector('.nsfw-overlay');
-            if (!nsfwOverlay) {
-                // Create new overlay
-                nsfwOverlay = document.createElement('div');
-                nsfwOverlay.className = 'nsfw-overlay';
-                
-                // Create and configure the warning content
-                const warningContent = document.createElement('div');
-                warningContent.className = 'nsfw-warning';
-                
-                // Determine NSFW warning text based on level
-                let nsfwText = "Mature Content";
-                if (level >= NSFW_LEVELS.XXX) {
-                    nsfwText = "XXX-rated Content";
-                } else if (level >= NSFW_LEVELS.X) {
-                    nsfwText = "X-rated Content";
-                } else if (level >= NSFW_LEVELS.R) {
-                    nsfwText = "R-rated Content";
-                }
-                
-                // Add warning text and show button
-                warningContent.innerHTML = `
-                    <p>${nsfwText}</p>
-                    <button class="show-content-btn">Show</button>
-                `;
-                
-                // Add click event to the show button
-                const showBtn = warningContent.querySelector('.show-content-btn');
-                showBtn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    previewContainer.classList.remove('blurred');
-                    nsfwOverlay.style.display = 'none';
-                    
-                    // Update toggle button icon if it exists
-                    const toggleBtn = card.querySelector('.toggle-blur-btn');
-                    if (toggleBtn) {
-                        toggleBtn.querySelector('i').className = 'fas fa-eye-slash';
-                    }
-                });
-                
-                nsfwOverlay.appendChild(warningContent);
-                previewContainer.appendChild(nsfwOverlay);
-            } else {
-                // Update existing overlay
-                const warningText = nsfwOverlay.querySelector('p');
-                if (warningText) {
-                    let nsfwText = "Mature Content";
-                    if (level >= NSFW_LEVELS.XXX) {
-                        nsfwText = "XXX-rated Content";
-                    } else if (level >= NSFW_LEVELS.X) {
-                        nsfwText = "X-rated Content";
-                    } else if (level >= NSFW_LEVELS.R) {
-                        nsfwText = "R-rated Content";
-                    }
-                    warningText.textContent = nsfwText;
-                }
-                nsfwOverlay.style.display = 'flex';
-            }
-            
-            // Get or create the toggle button in the header
-            const cardHeader = previewContainer.querySelector('.card-header');
-            if (cardHeader) {
-                let toggleBtn = cardHeader.querySelector('.toggle-blur-btn');
-                
-                if (!toggleBtn) {
-                    toggleBtn = document.createElement('button');
-                    toggleBtn.className = 'toggle-blur-btn';
-                    toggleBtn.title = 'Toggle blur';
-                    toggleBtn.innerHTML = '<i class="fas fa-eye"></i>';
-                    
-                    // Add click event to toggle button
-                    toggleBtn.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        const isBlurred = previewContainer.classList.toggle('blurred');
-                        const icon = toggleBtn.querySelector('i');
-                        
-                        // Update icon and overlay visibility
-                        if (isBlurred) {
-                            icon.className = 'fas fa-eye';
-                            nsfwOverlay.style.display = 'flex';
-                        } else {
-                            icon.className = 'fas fa-eye-slash';
-                            nsfwOverlay.style.display = 'none';
-                        }
-                    });
-                    
-                    // Add to the beginning of header
-                    cardHeader.insertBefore(toggleBtn, cardHeader.firstChild);
-                    
-                    // Update base model label class
-                    const baseModelLabel = cardHeader.querySelector('.base-model-label');
-                    if (baseModelLabel && !baseModelLabel.classList.contains('with-toggle')) {
-                        baseModelLabel.classList.add('with-toggle');
-                    }
-                } else {
-                    // Update existing toggle button
-                    toggleBtn.querySelector('i').className = 'fas fa-eye';
-                }
-            }
-        } else {
-            // Remove blur
-            previewContainer.classList.remove('blurred');
-            
-            // Hide overlay if it exists
-            const overlay = previewContainer.querySelector('.nsfw-overlay');
-            if (overlay) overlay.style.display = 'none';
-            
-            // Remove toggle button when content is set to PG or PG13
-            const cardHeader = previewContainer.querySelector('.card-header');
-            if (cardHeader) {
-                const toggleBtn = cardHeader.querySelector('.toggle-blur-btn');
-                if (toggleBtn) {
-                    // Remove the toggle button completely
-                    toggleBtn.remove();
-                    
-                    // Update base model label class if it exists
-                    const baseModelLabel = cardHeader.querySelector('.base-model-label');
-                    if (baseModelLabel && baseModelLabel.classList.contains('with-toggle')) {
-                        baseModelLabel.classList.remove('with-toggle');
-                    }
-                }
-            }
-        }
-    }
-
-    showNSFWLevelSelector(x, y, card) {
-        const selector = document.getElementById('nsfwLevelSelector');
-        const currentLevelEl = document.getElementById('currentNSFWLevel');
-        
-        // Get current NSFW level
-        let currentLevel = 0;
-        try {
-            const metaData = JSON.parse(card.dataset.meta || '{}');
-            currentLevel = metaData.preview_nsfw_level || 0;
-            
-            // Update if we have no recorded level but have a dataset attribute
-            if (!currentLevel && card.dataset.nsfwLevel) {
-                currentLevel = parseInt(card.dataset.nsfwLevel) || 0;
-            }
-        } catch (err) {
-            console.error('Error parsing metadata:', err);
-        }
-        
-        currentLevelEl.textContent = getNSFWLevelName(currentLevel);
-        
-        // Position the selector
-        if (x && y) {
-            const viewportWidth = document.documentElement.clientWidth;
-            const viewportHeight = document.documentElement.clientHeight;
-            const selectorRect = selector.getBoundingClientRect();
-            
-            // Center the selector if no coordinates provided
-            let finalX = (viewportWidth - selectorRect.width) / 2;
-            let finalY = (viewportHeight - selectorRect.height) / 2;
-            
-            selector.style.left = `${finalX}px`;
-            selector.style.top = `${finalY}px`;
-        }
-        
-        // Highlight current level button
-        document.querySelectorAll('.nsfw-level-btn').forEach(btn => {
-            if (parseInt(btn.dataset.level) === currentLevel) {
-                btn.classList.add('active');
-            } else {
-                btn.classList.remove('active');
-            }
-        });
-        
-        // Store reference to current card
-        selector.dataset.cardPath = card.dataset.filepath;
-        
-        // Show selector
-        selector.style.display = 'block';
-    }
-
-    showRelinkCivitaiModal() {
-        const filePath = this.currentCard.dataset.filepath;
-        if (!filePath) return;
-        
-        // Set up confirm button handler
-        const confirmBtn = document.getElementById('confirmRelinkBtn');
-        const urlInput = document.getElementById('civitaiModelUrl');
-        const errorDiv = document.getElementById('civitaiModelUrlError');
-        
-        // Remove previous event listener if exists
-        if (this._boundRelinkHandler) {
-            confirmBtn.removeEventListener('click', this._boundRelinkHandler);
-        }
-        
-        // Create new bound handler
-        this._boundRelinkHandler = async () => {
-            const url = urlInput.value.trim();
-            const modelVersionId = this.extractModelVersionId(url);
-            
-            if (!modelVersionId) {
-                errorDiv.textContent = 'Invalid URL format. Must include modelVersionId parameter.';
-                return;
-            }
-            
-            errorDiv.textContent = '';
-            modalManager.closeModal('relinkCivitaiModal');
-            
-            try {
-                state.loadingManager.showSimpleLoading('Re-linking to Civitai...');
-                
-                const response = await fetch('/api/checkpoints/relink-civitai', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        file_path: filePath,
-                        model_version_id: modelVersionId
-                    })
-                });
-                
-                if (!response.ok) {
-                    throw new Error(`Failed to re-link model: ${response.statusText}`);
-                }
-                
-                const data = await response.json();
-                
-                if (data.success) {
-                    showToast('Model successfully re-linked to Civitai', 'success');
-                    // Reload the current view to show updated data
-                    await resetAndReload();
-                } else {
-                    throw new Error(data.error || 'Failed to re-link model');
-                }
-            } catch (error) {
-                console.error('Error re-linking model:', error);
-                showToast(`Error: ${error.message}`, 'error');
-            } finally {
-                state.loadingManager.hide();
-            }
-        };
-        
-        // Set new event listener
-        confirmBtn.addEventListener('click', this._boundRelinkHandler);
-        
-        // Clear previous input
-        urlInput.value = '';
-        errorDiv.textContent = '';
-        
-        // Show modal
-        modalManager.showModal('relinkCivitaiModal');
-    }
-
-    extractModelVersionId(url) {
-        try {
-            const parsedUrl = new URL(url);
-            const modelVersionId = parsedUrl.searchParams.get('modelVersionId');
-            return modelVersionId;
-        } catch (e) {
-            return null;
-        }
-    }
-}
+// Mix in shared methods
+Object.assign(CheckpointContextMenu.prototype, ModelContextMenuMixin);

static/js/components/ContextMenu/LoraContextMenu.js

@@ -1,16 +1,15 @@
 import { BaseContextMenu } from './BaseContextMenu.js';
+import { ModelContextMenuMixin } from './ModelContextMenuMixin.js';
 import { refreshSingleLoraMetadata, saveModelMetadata, replacePreview, resetAndReload } from '../../api/loraApi.js';
-import { showToast, getNSFWLevelName, copyToClipboard, sendLoraToWorkflow, openExampleImagesFolder } from '../../utils/uiHelpers.js';
-import { NSFW_LEVELS } from '../../utils/constants.js';
-import { getStorageItem } from '../../utils/storageHelpers.js';
+import { copyToClipboard, sendLoraToWorkflow } from '../../utils/uiHelpers.js';
 import { showExcludeModal, showDeleteModal } from '../../utils/modalUtils.js';
-import { modalManager } from '../../managers/ModalManager.js';
-import { state } from '../../state/index.js';
 
 export class LoraContextMenu extends BaseContextMenu {
     constructor() {
         super('loraContextMenu', '.lora-card');
         this.nsfwSelector = document.getElementById('nsfwLevelSelector');
+        this.modelType = 'lora';
+        this.resetAndReload = resetAndReload;
         
         // Initialize NSFW Level Selector events
         if (this.nsfwSelector) {
@@ -18,24 +17,23 @@ export class LoraContextMenu extends BaseContextMenu {
         }
     }
 
+    // Use the saveModelMetadata implementation from loraApi
+    async saveModelMetadata(filePath, data) {
+        return saveModelMetadata(filePath, data);
+    }
+
     handleMenuAction(action, menuItem) {
+        // First try to handle with common actions
+        if (ModelContextMenuMixin.handleCommonMenuActions.call(this, action)) {
+            return;
+        }
+
+        // Otherwise handle lora-specific actions
         switch(action) {
             case 'detail':
                 // Trigger the main card click which shows the modal
                 this.currentCard.click();
                 break;
-            case 'civitai':
-                // Only trigger if the card is from civitai
-                if (this.currentCard.dataset.from_civitai === 'true') {
-                    if (this.currentCard.dataset.meta === '{}') {
-                        showToast('Please fetch metadata from CivitAI first', 'info');
-                    } else {
-                        this.currentCard.querySelector('.fa-globe')?.click();
-                    }
-                } else {
-                    showToast('No CivitAI information available', 'info');
-                }
-                break;
             case 'copyname':
                 // Generate and copy LoRA syntax
                 this.copyLoraSyntax();
@@ -48,10 +46,6 @@ export class LoraContextMenu extends BaseContextMenu {
                 // Send LoRA to workflow (replace mode)
                 this.sendLoraToWorkflow(true);
                 break;
-            case 'preview':
-                // Open example images folder instead of showing preview image dialog
-                openExampleImagesFolder(this.currentCard.dataset.sha256);
-                break;
             case 'replace-preview':
                 // Add a new action for replacing preview images
                 replacePreview(this.currentCard.dataset.filepath);
@@ -66,19 +60,13 @@ export class LoraContextMenu extends BaseContextMenu {
             case 'refresh-metadata':
                 refreshSingleLoraMetadata(this.currentCard.dataset.filepath);
                 break;
-            case 'relink-civitai':
-                this.showRelinkCivitaiModal();
-                break;
-            case 'set-nsfw':
-                this.showNSFWLevelSelector(null, null, this.currentCard);
-                break;
             case 'exclude':
                 showExcludeModal(this.currentCard.dataset.filepath);
                 break;
         }
     }
 
-    // New method to handle copy syntax functionality
+    // Specific LoRA methods
     copyLoraSyntax() {
         const card = this.currentCard;
         const usageTips = JSON.parse(card.dataset.usage_tips || '{}');
@@ -88,7 +76,6 @@ export class LoraContextMenu extends BaseContextMenu {
         copyToClipboard(loraSyntax, 'LoRA syntax copied to clipboard');
     }
 
-    // New method to handle send to workflow functionality
     sendLoraToWorkflow(replaceMode) {
         const card = this.currentCard;
         const usageTips = JSON.parse(card.dataset.usage_tips || '{}');
@@ -97,341 +84,7 @@ export class LoraContextMenu extends BaseContextMenu {
         
         sendLoraToWorkflow(loraSyntax, replaceMode, 'lora');
     }
+}
 
-    // New method to handle re-link to Civitai
-    showRelinkCivitaiModal() {
-        const filePath = this.currentCard.dataset.filepath;
-        if (!filePath) return;
-        
-        // Set up confirm button handler
-        const confirmBtn = document.getElementById('confirmRelinkBtn');
-        const urlInput = document.getElementById('civitaiModelUrl');
-        const errorDiv = document.getElementById('civitaiModelUrlError');
-        
-        // Remove previous event listener if exists
-        if (this._boundRelinkHandler) {
-            confirmBtn.removeEventListener('click', this._boundRelinkHandler);
-        }
-        
-        // Create new bound handler
-        this._boundRelinkHandler = async () => {
-            const url = urlInput.value.trim();
-            const modelVersionId = this.extractModelVersionId(url);
-            
-            if (!modelVersionId) {
-                errorDiv.textContent = 'Invalid URL format. Must include modelVersionId parameter.';
-                return;
-            }
-            
-            errorDiv.textContent = '';
-            modalManager.closeModal('relinkCivitaiModal');
-            
-            try {
-                state.loadingManager.showSimpleLoading('Re-linking to Civitai...');
-                
-                const response = await fetch('/api/relink-civitai', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        file_path: filePath,
-                        model_version_id: modelVersionId
-                    })
-                });
-                
-                if (!response.ok) {
-                    throw new Error(`Failed to re-link model: ${response.statusText}`);
-                }
-                
-                const data = await response.json();
-                
-                if (data.success) {
-                    showToast('Model successfully re-linked to Civitai', 'success');
-                    // Reload the current view to show updated data
-                    await resetAndReload();
-                } else {
-                    throw new Error(data.error || 'Failed to re-link model');
-                }
-            } catch (error) {
-                console.error('Error re-linking model:', error);
-                showToast(`Error: ${error.message}`, 'error');
-            } finally {
-                state.loadingManager.hide();
-            }
-        };
-        
-        // Set new event listener
-        confirmBtn.addEventListener('click', this._boundRelinkHandler);
-        
-        // Clear previous input
-        urlInput.value = '';
-        errorDiv.textContent = '';
-        
-        // Show modal
-        modalManager.showModal('relinkCivitaiModal');
-    }
-
-    extractModelVersionId(url) {
-        try {
-            const parsedUrl = new URL(url);
-            const modelVersionId = parsedUrl.searchParams.get('modelVersionId');
-            return modelVersionId;
-        } catch (e) {
-            return null;
-        }
-    }
-
-    // NSFW Selector methods from the original context menu
-    initNSFWSelector() {
-        // Close button
-        const closeBtn = this.nsfwSelector.querySelector('.close-nsfw-selector');
-        closeBtn.addEventListener('click', () => {
-            this.nsfwSelector.style.display = 'none';
-        });
-
-        // Level buttons
-        const levelButtons = this.nsfwSelector.querySelectorAll('.nsfw-level-btn');
-        levelButtons.forEach(btn => {
-            btn.addEventListener('click', async () => {
-                const level = parseInt(btn.dataset.level);
-                const filePath = this.nsfwSelector.dataset.cardPath;
-                
-                if (!filePath) return;
-                
-                try {
-                    await this.saveModelMetadata(filePath, { preview_nsfw_level: level });
-                    
-                    // Update card data
-                    const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-                    if (card) {
-                        let metaData = {};
-                        try {
-                            metaData = JSON.parse(card.dataset.meta || '{}');
-                        } catch (err) {
-                            console.error('Error parsing metadata:', err);
-                        }
-                        
-                        metaData.preview_nsfw_level = level;
-                        card.dataset.meta = JSON.stringify(metaData);
-                        card.dataset.nsfwLevel = level.toString();
-                        
-                        // Apply blur effect immediately
-                        this.updateCardBlurEffect(card, level);
-                    }
-                    
-                    showToast(`Content rating set to ${getNSFWLevelName(level)}`, 'success');
-                    this.nsfwSelector.style.display = 'none';
-                } catch (error) {
-                    showToast(`Failed to set content rating: ${error.message}`, 'error');
-                }
-            });
-        });
-        
-        // Close when clicking outside
-        document.addEventListener('click', (e) => {
-            if (this.nsfwSelector.style.display === 'block' && 
-                !this.nsfwSelector.contains(e.target) && 
-                !e.target.closest('.context-menu-item[data-action="set-nsfw"]')) {
-                this.nsfwSelector.style.display = 'none';
-            }
-        });
-    }
-
-    async saveModelMetadata(filePath, data) {
-        return saveModelMetadata(filePath, data);
-    }
-
-    updateCardBlurEffect(card, level) {
-        // Get user settings for blur threshold
-        const blurThreshold = parseInt(getStorageItem('nsfwBlurLevel') || '4');
-        
-        // Get card preview container
-        const previewContainer = card.querySelector('.card-preview');
-        if (!previewContainer) return;
-        
-        // Get preview media element
-        const previewMedia = previewContainer.querySelector('img') || previewContainer.querySelector('video');
-        if (!previewMedia) return;
-        
-        // Check if blur should be applied
-        if (level >= blurThreshold) {
-            // Add blur class to the preview container
-            previewContainer.classList.add('blurred');
-            
-            // Get or create the NSFW overlay
-            let nsfwOverlay = previewContainer.querySelector('.nsfw-overlay');
-            if (!nsfwOverlay) {
-                // Create new overlay
-                nsfwOverlay = document.createElement('div');
-                nsfwOverlay.className = 'nsfw-overlay';
-                
-                // Create and configure the warning content
-                const warningContent = document.createElement('div');
-                warningContent.className = 'nsfw-warning';
-                
-                // Determine NSFW warning text based on level
-                let nsfwText = "Mature Content";
-                if (level >= NSFW_LEVELS.XXX) {
-                    nsfwText = "XXX-rated Content";
-                } else if (level >= NSFW_LEVELS.X) {
-                    nsfwText = "X-rated Content";
-                } else if (level >= NSFW_LEVELS.R) {
-                    nsfwText = "R-rated Content";
-                }
-                
-                // Add warning text and show button
-                warningContent.innerHTML = `
-                    <p>${nsfwText}</p>
-                    <button class="show-content-btn">Show</button>
-                `;
-                
-                // Add click event to the show button
-                const showBtn = warningContent.querySelector('.show-content-btn');
-                showBtn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    previewContainer.classList.remove('blurred');
-                    nsfwOverlay.style.display = 'none';
-                    
-                    // Update toggle button icon if it exists
-                    const toggleBtn = card.querySelector('.toggle-blur-btn');
-                    if (toggleBtn) {
-                        toggleBtn.querySelector('i').className = 'fas fa-eye-slash';
-                    }
-                });
-                
-                nsfwOverlay.appendChild(warningContent);
-                previewContainer.appendChild(nsfwOverlay);
-            } else {
-                // Update existing overlay
-                const warningText = nsfwOverlay.querySelector('p');
-                if (warningText) {
-                    let nsfwText = "Mature Content";
-                    if (level >= NSFW_LEVELS.XXX) {
-                        nsfwText = "XXX-rated Content";
-                    } else if (level >= NSFW_LEVELS.X) {
-                        nsfwText = "X-rated Content";
-                    } else if (level >= NSFW_LEVELS.R) {
-                        nsfwText = "R-rated Content";
-                    }
-                    warningText.textContent = nsfwText;
-                }
-                nsfwOverlay.style.display = 'flex';
-            }
-            
-            // Get or create the toggle button in the header
-            const cardHeader = previewContainer.querySelector('.card-header');
-            if (cardHeader) {
-                let toggleBtn = cardHeader.querySelector('.toggle-blur-btn');
-                
-                if (!toggleBtn) {
-                    toggleBtn = document.createElement('button');
-                    toggleBtn.className = 'toggle-blur-btn';
-                    toggleBtn.title = 'Toggle blur';
-                    toggleBtn.innerHTML = '<i class="fas fa-eye"></i>';
-                    
-                    // Add click event to toggle button
-                    toggleBtn.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        const isBlurred = previewContainer.classList.toggle('blurred');
-                        const icon = toggleBtn.querySelector('i');
-                        
-                        // Update icon and overlay visibility
-                        if (isBlurred) {
-                            icon.className = 'fas fa-eye';
-                            nsfwOverlay.style.display = 'flex';
-                        } else {
-                            icon.className = 'fas fa-eye-slash';
-                            nsfwOverlay.style.display = 'none';
-                        }
-                    });
-                    
-                    // Add to the beginning of header
-                    cardHeader.insertBefore(toggleBtn, cardHeader.firstChild);
-                    
-                    // Update base model label class
-                    const baseModelLabel = cardHeader.querySelector('.base-model-label');
-                    if (baseModelLabel && !baseModelLabel.classList.contains('with-toggle')) {
-                        baseModelLabel.classList.add('with-toggle');
-                    }
-                } else {
-                    // Update existing toggle button
-                    toggleBtn.querySelector('i').className = 'fas fa-eye';
-                }
-            }
-        } else {
-            // Remove blur
-            previewContainer.classList.remove('blurred');
-            
-            // Hide overlay if it exists
-            const overlay = previewContainer.querySelector('.nsfw-overlay');
-            if (overlay) overlay.style.display = 'none';
-            
-            // Remove toggle button when content is set to PG or PG13
-            const cardHeader = previewContainer.querySelector('.card-header');
-            if (cardHeader) {
-                const toggleBtn = cardHeader.querySelector('.toggle-blur-btn');
-                if (toggleBtn) {
-                    // Remove the toggle button completely
-                    toggleBtn.remove();
-                    
-                    // Update base model label class if it exists
-                    const baseModelLabel = cardHeader.querySelector('.base-model-label');
-                    if (baseModelLabel && baseModelLabel.classList.contains('with-toggle')) {
-                        baseModelLabel.classList.remove('with-toggle');
-                    }
-                }
-            }
-        }
-    }
-
-    showNSFWLevelSelector(x, y, card) {
-        const selector = document.getElementById('nsfwLevelSelector');
-        const currentLevelEl = document.getElementById('currentNSFWLevel');
-        
-        // Get current NSFW level
-        let currentLevel = 0;
-        try {
-            const metaData = JSON.parse(card.dataset.meta || '{}');
-            currentLevel = metaData.preview_nsfw_level || 0;
-            
-            // Update if we have no recorded level but have a dataset attribute
-            if (!currentLevel && card.dataset.nsfwLevel) {
-                currentLevel = parseInt(card.dataset.nsfwLevel) || 0;
-            }
-        } catch (err) {
-            console.error('Error parsing metadata:', err);
-        }
-        
-        currentLevelEl.textContent = getNSFWLevelName(currentLevel);
-        
-        // Position the selector
-        if (x && y) {
-            const viewportWidth = document.documentElement.clientWidth;
-            const viewportHeight = document.documentElement.clientHeight;
-            const selectorRect = selector.getBoundingClientRect();
-            
-            // Center the selector if no coordinates provided
-            let finalX = (viewportWidth - selectorRect.width) / 2;
-            let finalY = (viewportHeight - selectorRect.height) / 2;
-            
-            selector.style.left = `${finalX}px`;
-            selector.style.top = `${finalY}px`;
-        }
-        
-        // Highlight current level button
-        document.querySelectorAll('.nsfw-level-btn').forEach(btn => {
-            if (parseInt(btn.dataset.level) === currentLevel) {
-                btn.classList.add('active');
-            } else {
-                btn.classList.remove('active');
-            }
-        });
-        
-        // Store reference to current card
-        selector.dataset.cardPath = card.dataset.filepath;
-        
-        // Show selector
-        selector.style.display = 'block';
-    }
-}
+// Mix in shared methods
+Object.assign(LoraContextMenu.prototype, ModelContextMenuMixin);

static/js/components/ContextMenu/ModelContextMenuMixin.js

@@ -0,0 +1,371 @@
+import { showToast, getNSFWLevelName, openExampleImagesFolder } from '../../utils/uiHelpers.js';
+import { NSFW_LEVELS } from '../../utils/constants.js';
+import { getStorageItem } from '../../utils/storageHelpers.js';
+import { modalManager } from '../../managers/ModalManager.js';
+import { state } from '../../state/index.js';
+
+// Mixin with shared functionality for LoraContextMenu and CheckpointContextMenu
+export const ModelContextMenuMixin = {
+    // NSFW Selector methods
+    initNSFWSelector() {
+        // Close button
+        const closeBtn = this.nsfwSelector.querySelector('.close-nsfw-selector');
+        closeBtn.addEventListener('click', () => {
+            this.nsfwSelector.style.display = 'none';
+        });
+
+        // Level buttons
+        const levelButtons = this.nsfwSelector.querySelectorAll('.nsfw-level-btn');
+        levelButtons.forEach(btn => {
+            btn.addEventListener('click', async () => {
+                const level = parseInt(btn.dataset.level);
+                const filePath = this.nsfwSelector.dataset.cardPath;
+                
+                if (!filePath) return;
+                
+                try {
+                    await this.saveModelMetadata(filePath, { preview_nsfw_level: level });
+                    
+                    showToast(`Content rating set to ${getNSFWLevelName(level)}`, 'success');
+                    this.nsfwSelector.style.display = 'none';
+                } catch (error) {
+                    showToast(`Failed to set content rating: ${error.message}`, 'error');
+                }
+            });
+        });
+        
+        // Close when clicking outside
+        document.addEventListener('click', (e) => {
+            if (this.nsfwSelector.style.display === 'block' && 
+                !this.nsfwSelector.contains(e.target) && 
+                !e.target.closest('.context-menu-item[data-action="set-nsfw"]')) {
+                this.nsfwSelector.style.display = 'none';
+            }
+        });
+    },
+
+    updateCardBlurEffect(card, level) {
+        // Get user settings for blur threshold
+        const blurThreshold = parseInt(getStorageItem('nsfwBlurLevel') || '4');
+        
+        // Get card preview container
+        const previewContainer = card.querySelector('.card-preview');
+        if (!previewContainer) return;
+        
+        // Get preview media element
+        const previewMedia = previewContainer.querySelector('img') || previewContainer.querySelector('video');
+        if (!previewMedia) return;
+        
+        // Check if blur should be applied
+        if (level >= blurThreshold) {
+            // Add blur class to the preview container
+            previewContainer.classList.add('blurred');
+            
+            // Get or create the NSFW overlay
+            let nsfwOverlay = previewContainer.querySelector('.nsfw-overlay');
+            if (!nsfwOverlay) {
+                // Create new overlay
+                nsfwOverlay = document.createElement('div');
+                nsfwOverlay.className = 'nsfw-overlay';
+                
+                // Create and configure the warning content
+                const warningContent = document.createElement('div');
+                warningContent.className = 'nsfw-warning';
+                
+                // Determine NSFW warning text based on level
+                let nsfwText = "Mature Content";
+                if (level >= NSFW_LEVELS.XXX) {
+                    nsfwText = "XXX-rated Content";
+                } else if (level >= NSFW_LEVELS.X) {
+                    nsfwText = "X-rated Content";
+                } else if (level >= NSFW_LEVELS.R) {
+                    nsfwText = "R-rated Content";
+                }
+                
+                // Add warning text and show button
+                warningContent.innerHTML = `
+                    <p>${nsfwText}</p>
+                    <button class="show-content-btn">Show</button>
+                `;
+                
+                // Add click event to the show button
+                const showBtn = warningContent.querySelector('.show-content-btn');
+                showBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    previewContainer.classList.remove('blurred');
+                    nsfwOverlay.style.display = 'none';
+                    
+                    // Update toggle button icon if it exists
+                    const toggleBtn = card.querySelector('.toggle-blur-btn');
+                    if (toggleBtn) {
+                        toggleBtn.querySelector('i').className = 'fas fa-eye-slash';
+                    }
+                });
+                
+                nsfwOverlay.appendChild(warningContent);
+                previewContainer.appendChild(nsfwOverlay);
+            } else {
+                // Update existing overlay
+                const warningText = nsfwOverlay.querySelector('p');
+                if (warningText) {
+                    let nsfwText = "Mature Content";
+                    if (level >= NSFW_LEVELS.XXX) {
+                        nsfwText = "XXX-rated Content";
+                    } else if (level >= NSFW_LEVELS.X) {
+                        nsfwText = "X-rated Content";
+                    } else if (level >= NSFW_LEVELS.R) {
+                        nsfwText = "R-rated Content";
+                    }
+                    warningText.textContent = nsfwText;
+                }
+                nsfwOverlay.style.display = 'flex';
+            }
+            
+            // Get or create the toggle button in the header
+            const cardHeader = previewContainer.querySelector('.card-header');
+            if (cardHeader) {
+                let toggleBtn = cardHeader.querySelector('.toggle-blur-btn');
+                
+                if (!toggleBtn) {
+                    toggleBtn = document.createElement('button');
+                    toggleBtn.className = 'toggle-blur-btn';
+                    toggleBtn.title = 'Toggle blur';
+                    toggleBtn.innerHTML = '<i class="fas fa-eye"></i>';
+                    
+                    // Add click event to toggle button
+                    toggleBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        const isBlurred = previewContainer.classList.toggle('blurred');
+                        const icon = toggleBtn.querySelector('i');
+                        
+                        // Update icon and overlay visibility
+                        if (isBlurred) {
+                            icon.className = 'fas fa-eye';
+                            nsfwOverlay.style.display = 'flex';
+                        } else {
+                            icon.className = 'fas fa-eye-slash';
+                            nsfwOverlay.style.display = 'none';
+                        }
+                    });
+                    
+                    // Add to the beginning of header
+                    cardHeader.insertBefore(toggleBtn, cardHeader.firstChild);
+                    
+                    // Update base model label class
+                    const baseModelLabel = cardHeader.querySelector('.base-model-label');
+                    if (baseModelLabel && !baseModelLabel.classList.contains('with-toggle')) {
+                        baseModelLabel.classList.add('with-toggle');
+                    }
+                } else {
+                    // Update existing toggle button
+                    toggleBtn.querySelector('i').className = 'fas fa-eye';
+                }
+            }
+        } else {
+            // Remove blur
+            previewContainer.classList.remove('blurred');
+            
+            // Hide overlay if it exists
+            const overlay = previewContainer.querySelector('.nsfw-overlay');
+            if (overlay) overlay.style.display = 'none';
+            
+            // Remove toggle button when content is set to PG or PG13
+            const cardHeader = previewContainer.querySelector('.card-header');
+            if (cardHeader) {
+                const toggleBtn = cardHeader.querySelector('.toggle-blur-btn');
+                if (toggleBtn) {
+                    // Remove the toggle button completely
+                    toggleBtn.remove();
+                    
+                    // Update base model label class if it exists
+                    const baseModelLabel = cardHeader.querySelector('.base-model-label');
+                    if (baseModelLabel && baseModelLabel.classList.contains('with-toggle')) {
+                        baseModelLabel.classList.remove('with-toggle');
+                    }
+                }
+            }
+        }
+    },
+
+    showNSFWLevelSelector(x, y, card) {
+        const selector = document.getElementById('nsfwLevelSelector');
+        const currentLevelEl = document.getElementById('currentNSFWLevel');
+        
+        // Get current NSFW level
+        let currentLevel = 0;
+        try {
+            const metaData = JSON.parse(card.dataset.meta || '{}');
+            currentLevel = metaData.preview_nsfw_level || 0;
+            
+            // Update if we have no recorded level but have a dataset attribute
+            if (!currentLevel && card.dataset.nsfwLevel) {
+                currentLevel = parseInt(card.dataset.nsfwLevel) || 0;
+            }
+        } catch (err) {
+            console.error('Error parsing metadata:', err);
+        }
+        
+        currentLevelEl.textContent = getNSFWLevelName(currentLevel);
+        
+        // Position the selector
+        if (x && y) {
+            const viewportWidth = document.documentElement.clientWidth;
+            const viewportHeight = document.documentElement.clientHeight;
+            const selectorRect = selector.getBoundingClientRect();
+            
+            // Center the selector if no coordinates provided
+            let finalX = (viewportWidth - selectorRect.width) / 2;
+            let finalY = (viewportHeight - selectorRect.height) / 2;
+            
+            selector.style.left = `${finalX}px`;
+            selector.style.top = `${finalY}px`;
+        }
+        
+        // Highlight current level button
+        document.querySelectorAll('.nsfw-level-btn').forEach(btn => {
+            if (parseInt(btn.dataset.level) === currentLevel) {
+                btn.classList.add('active');
+            } else {
+                btn.classList.remove('active');
+            }
+        });
+        
+        // Store reference to current card
+        selector.dataset.cardPath = card.dataset.filepath;
+        
+        // Show selector
+        selector.style.display = 'block';
+    },
+
+    // Civitai re-linking methods
+    showRelinkCivitaiModal() {
+        const filePath = this.currentCard.dataset.filepath;
+        if (!filePath) return;
+        
+        // Set up confirm button handler
+        const confirmBtn = document.getElementById('confirmRelinkBtn');
+        const urlInput = document.getElementById('civitaiModelUrl');
+        const errorDiv = document.getElementById('civitaiModelUrlError');
+        
+        // Remove previous event listener if exists
+        if (this._boundRelinkHandler) {
+            confirmBtn.removeEventListener('click', this._boundRelinkHandler);
+        }
+        
+        // Create new bound handler
+        this._boundRelinkHandler = async () => {
+            const url = urlInput.value.trim();
+            const { modelId, modelVersionId } = this.extractModelVersionId(url);
+            
+            if (!modelId) {
+                errorDiv.textContent = 'Invalid URL format. Must include model ID.';
+                return;
+            }
+            
+            errorDiv.textContent = '';
+            modalManager.closeModal('relinkCivitaiModal');
+            
+            try {
+                state.loadingManager.showSimpleLoading('Re-linking to Civitai...');
+                
+                const endpoint = this.modelType === 'checkpoint' ? 
+                    '/api/checkpoints/relink-civitai' : 
+                    '/api/relink-civitai';
+                
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        file_path: filePath,
+                        model_id: modelId,
+                        model_version_id: modelVersionId
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`Failed to re-link model: ${response.statusText}`);
+                }
+                
+                const data = await response.json();
+                
+                if (data.success) {
+                    showToast('Model successfully re-linked to Civitai', 'success');
+                    // Reload the current view to show updated data
+                    await this.resetAndReload();
+                } else {
+                    throw new Error(data.error || 'Failed to re-link model');
+                }
+            } catch (error) {
+                console.error('Error re-linking model:', error);
+                showToast(`Error: ${error.message}`, 'error');
+            } finally {
+                state.loadingManager.hide();
+            }
+        };
+        
+        // Set new event listener
+        confirmBtn.addEventListener('click', this._boundRelinkHandler);
+        
+        // Clear previous input
+        urlInput.value = '';
+        errorDiv.textContent = '';
+        
+        // Show modal
+        modalManager.showModal('relinkCivitaiModal');
+        
+        // Auto-focus the URL input field after modal is shown
+        setTimeout(() => urlInput.focus(), 50);
+    },
+
+    extractModelVersionId(url) {
+        try {
+            // Handle all three URL formats:
+            // 1. https://civitai.com/models/649516
+            // 2. https://civitai.com/models/649516?modelVersionId=726676
+            // 3. https://civitai.com/models/649516/cynthia-pokemon-diamond-and-pearl-pdxl-lora?modelVersionId=726676
+            
+            const parsedUrl = new URL(url);
+            
+            // Extract model ID from path
+            const pathMatch = parsedUrl.pathname.match(/\/models\/(\d+)/);
+            const modelId = pathMatch ? pathMatch[1] : null;
+            
+            // Extract model version ID from query parameters
+            const modelVersionId = parsedUrl.searchParams.get('modelVersionId');
+            
+            return { modelId, modelVersionId };
+        } catch (e) {
+            return { modelId: null, modelVersionId: null };
+        }
+    },
+    
+    // Common action handlers
+    handleCommonMenuActions(action) {
+        switch(action) {
+            case 'preview':
+                openExampleImagesFolder(this.currentCard.dataset.sha256);
+                return true;
+            case 'civitai':
+                if (this.currentCard.dataset.from_civitai === 'true') {
+                    if (this.currentCard.querySelector('.fa-globe')) {
+                        this.currentCard.querySelector('.fa-globe').click();
+                    } else {
+                        showToast('Please fetch metadata from CivitAI first', 'info');
+                    }
+                } else {
+                    showToast('No CivitAI information available', 'info');
+                }
+                return true;
+            case 'relink-civitai':
+                this.showRelinkCivitaiModal();
+                return true;
+            case 'set-nsfw':
+                this.showNSFWLevelSelector(null, null, this.currentCard);
+                return true;
+            default:
+                return false;
+        }
+    }
+};

static/js/components/ContextMenu/index.js

@@ -1,3 +1,4 @@
 export { LoraContextMenu } from './LoraContextMenu.js';
 export { RecipeContextMenu } from './RecipeContextMenu.js';
-export { CheckpointContextMenu } from './CheckpointContextMenu.js';
+export { CheckpointContextMenu } from './CheckpointContextMenu.js';
+export { ModelContextMenuMixin } from './ModelContextMenuMixin.js';

static/js/components/LoraCard.js

@@ -4,7 +4,6 @@ import { showLoraModal } from './loraModal/index.js';
 import { bulkManager } from '../managers/BulkManager.js';
 import { NSFW_LEVELS } from '../utils/constants.js';
 import { replacePreview, saveModelMetadata } from '../api/loraApi.js'
-import { showDeleteModal } from '../utils/modalUtils.js';
 
 // Add a global event delegation handler
 export function setupLoraCardEventDelegation() {
@@ -71,7 +70,7 @@ function handleLoraCardEvent(event) {
     
     if (event.target.closest('.fa-folder-open')) {
         event.stopPropagation();
-        openExampleImagesFolder(card.dataset.sha256);
+        handleExampleImagesAccess(card);
         return;
     }
     
@@ -163,18 +162,9 @@ async function toggleFavorite(card) {
             favorite: newFavoriteState 
         });
 
-        // Update the UI
         if (newFavoriteState) {
-            starIcon.classList.remove('far');
-            starIcon.classList.add('fas', 'favorite-active');
-            starIcon.title = 'Remove from favorites';
-            card.dataset.favorite = 'true';
             showToast('Added to favorites', 'success');
         } else {
-            starIcon.classList.remove('fas', 'favorite-active');
-            starIcon.classList.add('far');
-            starIcon.title = 'Add to favorites';
-            card.dataset.favorite = 'false';
             showToast('Removed from favorites', 'success');
         }
     } catch (error) {
@@ -201,6 +191,142 @@ function copyLoraSyntax(card) {
     copyToClipboard(loraSyntax, 'LoRA syntax copied to clipboard');
 }
 
+// New function to handle example images access
+async function handleExampleImagesAccess(card) {
+    const modelHash = card.dataset.sha256;
+    
+    try {
+        // Check if example images exist
+        const response = await fetch(`/api/has-example-images?model_hash=${modelHash}`);
+        const data = await response.json();
+        
+        if (data.has_images) {
+            // If images exist, open the folder directly (existing behavior)
+            openExampleImagesFolder(modelHash);
+        } else {
+            // If no images exist, show the new modal
+            showExampleAccessModal(card);
+        }
+    } catch (error) {
+        console.error('Error checking for example images:', error);
+        showToast('Error checking for example images', 'error');
+    }
+}
+
+// Function to show the example access modal
+function showExampleAccessModal(card) {
+    const modal = document.getElementById('exampleAccessModal');
+    if (!modal) return;
+    
+    // Get download button and determine if download should be enabled
+    const downloadBtn = modal.querySelector('#downloadExamplesBtn');
+    let hasRemoteExamples = false;
+    
+    try {
+        const metaData = JSON.parse(card.dataset.meta || '{}');
+        hasRemoteExamples = metaData.images && 
+                            Array.isArray(metaData.images) && 
+                            metaData.images.length > 0 && 
+                            metaData.images[0].url;
+    } catch (e) {
+        console.error('Error parsing meta data:', e);
+    }
+    
+    // Enable or disable download button
+    if (downloadBtn) {
+        if (hasRemoteExamples) {
+            downloadBtn.classList.remove('disabled');
+            downloadBtn.removeAttribute('title'); // Remove any previous tooltip
+            downloadBtn.onclick = () => {
+                modalManager.closeModal('exampleAccessModal');
+                // Open settings modal and scroll to example images section
+                const settingsModal = document.getElementById('settingsModal');
+                if (settingsModal) {
+                    modalManager.showModal('settingsModal');
+                    // Scroll to example images section after modal is visible
+                    setTimeout(() => {
+                        const exampleSection = settingsModal.querySelector('.settings-section:nth-child(5)'); // Example Images section
+                        if (exampleSection) {
+                            exampleSection.scrollIntoView({ behavior: 'smooth' });
+                        }
+                    }, 300);
+                }
+            };
+        } else {
+            downloadBtn.classList.add('disabled');
+            downloadBtn.setAttribute('title', 'No remote example images available for this model on Civitai');
+            downloadBtn.onclick = null;
+        }
+    }
+    
+    // Set up import button
+    const importBtn = modal.querySelector('#importExamplesBtn');
+    if (importBtn) {
+        importBtn.onclick = () => {
+            modalManager.closeModal('exampleAccessModal');
+            
+            // Get the lora data from card dataset
+            const loraMeta = {
+                sha256: card.dataset.sha256,
+                file_path: card.dataset.filepath,
+                model_name: card.dataset.name,
+                file_name: card.dataset.file_name,
+                // Other properties needed for showLoraModal
+                folder: card.dataset.folder,
+                modified: card.dataset.modified,
+                file_size: card.dataset.file_size,
+                from_civitai: card.dataset.from_civitai === 'true',
+                base_model: card.dataset.base_model,
+                usage_tips: card.dataset.usage_tips,
+                notes: card.dataset.notes,
+                favorite: card.dataset.favorite === 'true',
+                civitai: (() => {
+                    try {
+                        return JSON.parse(card.dataset.meta || '{}');
+                    } catch (e) {
+                        return {};
+                    }
+                })(),
+                tags: JSON.parse(card.dataset.tags || '[]'),
+                modelDescription: card.dataset.modelDescription || ''
+            };
+            
+            // Show the lora modal
+            showLoraModal(loraMeta);
+            
+            // Scroll to import area after modal is visible
+            setTimeout(() => {
+                const importArea = document.querySelector('.example-import-area');
+                if (importArea) {
+                    const showcaseTab = document.getElementById('showcase-tab');
+                    if (showcaseTab) {
+                        // First make sure showcase tab is visible
+                        const tabBtn = document.querySelector('.tab-btn[data-tab="showcase"]');
+                        if (tabBtn && !tabBtn.classList.contains('active')) {
+                            tabBtn.click();
+                        }
+                        
+                        // Then toggle showcase if collapsed
+                        const carousel = showcaseTab.querySelector('.carousel');
+                        if (carousel && carousel.classList.contains('collapsed')) {
+                            const scrollIndicator = showcaseTab.querySelector('.scroll-indicator');
+                            if (scrollIndicator) {
+                                scrollIndicator.click();
+                            }
+                        }
+                        
+                        // Finally scroll to the import area
+                        importArea.scrollIntoView({ behavior: 'smooth' });
+                    }
+                }
+            }, 500);
+        };
+    }
+    
+    // Show the modal
+    modalManager.showModal('exampleAccessModal');
+}
+
 export function createLoraCard(lora) {
     const card = document.createElement('div');
     card.className = 'lora-card';

static/js/components/ModelDuplicatesManager.js

@@ -2,6 +2,9 @@
 import { showToast } from '../utils/uiHelpers.js';
 import { state, getCurrentPageState } from '../state/index.js';
 import { formatDate } from '../utils/formatters.js';
+import { resetAndReload as resetAndReloadLoras } from '../api/loraApi.js';
+import { resetAndReload as resetAndReloadCheckpoints } from '../api/checkpointApi.js';
+import { LoadingManager } from '../managers/LoadingManager.js';
 
 export class ModelDuplicatesManager {
     constructor(pageManager, modelType = 'loras') {
@@ -11,10 +14,18 @@ export class ModelDuplicatesManager {
         this.selectedForDeletion = new Set();
         this.modelType = modelType; // Use the provided modelType or default to 'loras'
         
+        // Verification tracking
+        this.verifiedGroups = new Set(); // Track which groups have been verified
+        this.mismatchedFiles = new Map(); // Map file paths to actual hashes for mismatched files
+        
+        // Loading manager for verification process
+        this.loadingManager = new LoadingManager();
+        
         // Bind methods
         this.renderModelCard = this.renderModelCard.bind(this);
         this.renderTooltip = this.renderTooltip.bind(this);
         this.checkDuplicatesCount = this.checkDuplicatesCount.bind(this);
+        this.handleVerifyHashes = this.handleVerifyHashes.bind(this);
         
         // Keep track of which controls need to be re-enabled
         this.disabledControls = [];
@@ -245,14 +256,34 @@ export class ModelDuplicatesManager {
             // Create group header
             const header = document.createElement('div');
             header.className = 'duplicate-group-header';
+            
+            // Create verification status badge
+            const verificationBadge = document.createElement('span');
+            verificationBadge.className = 'verification-badge';
+            if (this.verifiedGroups.has(group.hash)) {
+                verificationBadge.classList.add('verified');
+                verificationBadge.innerHTML = '<i class="fas fa-check-circle"></i> Verified';
+            } else {
+                verificationBadge.classList.add('metadata');
+                verificationBadge.innerHTML = '<i class="fas fa-tag"></i> Metadata Hash';
+            }
+            
             header.innerHTML = `
                 <span>Duplicate Group #${groupIndex + 1} (${group.models.length} models with same hash: ${group.hash})</span>
                 <span>
+                    <button class="btn-verify-hashes" data-hash="${group.hash}" title="Recalculate SHA256 hashes to verify if these are true duplicates">
+                        <i class="fas fa-fingerprint"></i> Verify Hashes
+                    </button>
                     <button class="btn-select-all" onclick="modelDuplicatesManager.toggleSelectAllInGroup('${group.hash}')">
                         Select All
                     </button>
                 </span>
             `;
+            
+            // Insert verification badge after the group title
+            const headerFirstSpan = header.querySelector('span:first-child');
+            headerFirstSpan.appendChild(verificationBadge);
+            
             groupDiv.appendChild(header);
             
             // Create cards container
@@ -285,6 +316,15 @@ export class ModelDuplicatesManager {
             
             groupDiv.appendChild(cardsDiv);
             modelGrid.appendChild(groupDiv);
+            
+            // Add event listener to the verify hashes button
+            const verifyButton = header.querySelector('.btn-verify-hashes');
+            if (verifyButton) {
+                verifyButton.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.handleVerifyHashes(group);
+                });
+            }
         });
     }
     
@@ -295,6 +335,14 @@ export class ModelDuplicatesManager {
         card.dataset.hash = model.sha256;
         card.dataset.filePath = model.file_path;
         
+        // Check if this model is a mismatched file
+        const isMismatched = this.mismatchedFiles.has(model.file_path);
+        
+        // Add mismatched class if needed
+        if (isMismatched) {
+            card.classList.add('hash-mismatch');
+        }
+        
         // Create card content using structure similar to createLoraCard in LoraCard.js
         const previewContainer = document.createElement('div');
         previewContainer.className = 'card-preview';
@@ -336,6 +384,19 @@ export class ModelDuplicatesManager {
         
         previewContainer.appendChild(preview);
         
+        // Add hash mismatch badge if needed
+        if (isMismatched) {
+            const mismatchBadge = document.createElement('div');
+            mismatchBadge.className = 'mismatch-badge';
+            mismatchBadge.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Different Hash';
+            previewContainer.appendChild(mismatchBadge);
+        }
+        
+        // Mark as latest if applicable
+        if (model.is_latest) {
+            card.classList.add('latest');
+        }
+        
         // Move tooltip listeners to the preview container for consistent behavior
         // regardless of whether the preview is an image or video
         previewContainer.addEventListener('mouseover', () => this.renderTooltip(card, model));
@@ -373,6 +434,12 @@ export class ModelDuplicatesManager {
             card.classList.add('duplicate-selected');
         }
         
+        // Disable checkbox for mismatched files
+        if (isMismatched) {
+            checkbox.disabled = true;
+            checkbox.title = "This file has a different actual hash and can't be selected";
+        }
+        
         // Add change event to checkbox
         checkbox.addEventListener('change', (e) => {
             e.stopPropagation();
@@ -386,6 +453,11 @@ export class ModelDuplicatesManager {
                 return;
             }
             
+            // Don't toggle if it's a mismatched file
+            if (isMismatched) {
+                return;
+            }
+            
             // Toggle checkbox state
             checkbox.checked = !checkbox.checked;
             this.toggleCardSelection(model.file_path, card, checkbox);
@@ -404,8 +476,12 @@ export class ModelDuplicatesManager {
         const tooltip = document.createElement('div');
         tooltip.className = 'model-tooltip';
         
+        // Check if this model is a mismatched file and get the actual hash
+        const isMismatched = this.mismatchedFiles.has(model.file_path);
+        const actualHash = isMismatched ? this.mismatchedFiles.get(model.file_path) : null;
+        
         // Add model information to tooltip
-        tooltip.innerHTML = `
+        let tooltipContent = `
             <div class="tooltip-header">${model.model_name}</div>
             <div class="tooltip-info">
                 <div><strong>Version:</strong> ${model.civitai?.name || 'Unknown'}</div>
@@ -413,9 +489,17 @@ export class ModelDuplicatesManager {
                 <div><strong>Path:</strong> ${model.file_path}</div>
                 <div><strong>Base Model:</strong> ${model.base_model || 'Unknown'}</div>
                 <div><strong>Modified:</strong> ${formatDate(model.modified)}</div>
-            </div>
+                <div><strong>Metadata Hash:</strong> <span class="hash-value">${model.sha256}</span></div>
         `;
         
+        // Add actual hash information if available
+        if (isMismatched && actualHash) {
+            tooltipContent += `<div class="hash-mismatch-info"><strong>Actual Hash:</strong> <span class="hash-value">${actualHash}</span></div>`;
+        }
+        
+        tooltipContent += `</div>`;
+        tooltip.innerHTML = tooltipContent;
+        
         // Position tooltip relative to card
         const cardRect = card.getBoundingClientRect();
         tooltip.style.top = `${cardRect.top + window.scrollY - 10}px`;
@@ -536,11 +620,43 @@ export class ModelDuplicatesManager {
             
             showToast(`Successfully deleted ${data.total_deleted} models`, 'success');
             
-            // Exit duplicate mode if deletions were successful
+            // If models were successfully deleted
             if (data.total_deleted > 0) {
-                // Check duplicates count after deletion
-                this.checkDuplicatesCount();
-                this.exitDuplicateMode();
+                // Reload model data with updated folders
+                if (this.modelType === 'loras') {
+                    await resetAndReloadLoras(true);
+                } else {
+                    await resetAndReloadCheckpoints(true);
+                }
+                
+                // Check if there are still duplicates
+                try {
+                    const endpoint = `/api/${this.modelType}/find-duplicates`;
+                    const dupResponse = await fetch(endpoint);
+                    
+                    if (!dupResponse.ok) {
+                        throw new Error(`Failed to get duplicates: ${dupResponse.statusText}`);
+                    }
+                    
+                    const dupData = await dupResponse.json();
+                    const remainingDuplicatesCount = (dupData.duplicates || []).length;
+                    
+                    // Update badge count
+                    this.updateDuplicatesBadge(remainingDuplicatesCount);
+                    
+                    // If no more duplicates, exit duplicate mode
+                    if (remainingDuplicatesCount === 0) {
+                        this.exitDuplicateMode();
+                    } else {
+                        // If duplicates remain, refresh duplicate groups display
+                        this.duplicateGroups = dupData.duplicates || [];
+                        this.selectedForDeletion.clear();
+                        this.renderDuplicateGroups();
+                        this.updateSelectedCount();
+                    }
+                } catch (error) {
+                    console.error('Error checking remaining duplicates:', error);
+                }
             }
             
         } catch (error) {
@@ -596,4 +712,73 @@ export class ModelDuplicatesManager {
           }
       });
     }
+
+    // Handle verify hashes button click
+    async handleVerifyHashes(group) {
+        try {
+            const groupHash = group.hash;
+            
+            // Check if already verified
+            if (this.verifiedGroups.has(groupHash)) {
+                showToast('This group has already been verified', 'info');
+                return;
+            }
+            
+            // Show loading state
+            this.loadingManager.showSimpleLoading('Verifying hashes...');
+            
+            // Get file paths for all models in the group
+            const filePaths = group.models.map(model => model.file_path);
+            
+            // Make API request to verify hashes
+            const response = await fetch(`/api/${this.modelType}/verify-duplicates`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ file_paths: filePaths })
+            });
+            
+            if (!response.ok) {
+                throw new Error(`Verification failed: ${response.statusText}`);
+            }
+            
+            const data = await response.json();
+            
+            if (!data.success) {
+                throw new Error(data.error || 'Unknown error during verification');
+            }
+            
+            // Process verification results
+            const verifiedAsDuplicates = data.verified_as_duplicates;
+            const mismatchedFiles = data.mismatched_files || [];
+            
+            // Update mismatchedFiles map
+            if (data.new_hash_map) {
+                Object.entries(data.new_hash_map).forEach(([path, hash]) => {
+                    this.mismatchedFiles.set(path, hash);
+                });
+            }
+            
+            // Mark this group as verified
+            this.verifiedGroups.add(groupHash);
+            
+            // Re-render the duplicate groups to show verification status
+            this.renderDuplicateGroups();
+            
+            // Show appropriate toast message
+            if (mismatchedFiles.length > 0) {
+                showToast(`Verification complete. ${mismatchedFiles.length} file(s) have different actual hashes.`, 'warning');
+            } else {
+                showToast('Verification complete. All files are confirmed duplicates.', 'success');
+            }
+            
+        } catch (error) {
+            console.error('Error verifying hashes:', error);
+            showToast('Failed to verify hashes: ' + error.message, 'error');
+        } finally {
+            // Hide loading state
+            this.loadingManager.hide();
+        }
+    }
 }

static/js/components/checkpointModal/ModelMetadata.js

@@ -4,7 +4,7 @@
  */
 import { showToast } from '../../utils/uiHelpers.js';
 import { BASE_MODELS } from '../../utils/constants.js';
-import { updateCheckpointCard } from '../../utils/cardUpdater.js';
+import { updateModelCard } from '../../utils/cardUpdater.js';
 import { saveModelMetadata, renameCheckpointFile } from '../../api/checkpointApi.js';
 
 /**
@@ -114,16 +114,6 @@ export function setupModelNameEditing(filePath) {
             
             await saveModelMetadata(filePath, { model_name: newModelName });
             
-            // Update the corresponding checkpoint card's dataset and display
-            updateCheckpointCard(filePath, { model_name: newModelName });
-            
-            // BUGFIX: Directly update the card's dataset.name attribute to ensure
-            // it's correctly read when reopening the modal
-            const checkpointCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-            if (checkpointCard) {
-                checkpointCard.dataset.name = newModelName;
-            }
-            
             showToast('Model name updated successfully', 'success');
         } catch (error) {
             console.error('Error updating model name:', error);
@@ -300,9 +290,6 @@ async function saveBaseModel(filePath, originalValue) {
     try {
         await saveModelMetadata(filePath, { base_model: newBaseModel });
         
-        // Update the card with the new base model
-        updateCheckpointCard(filePath, { base_model: newBaseModel });
-        
         showToast('Base model updated successfully', 'success');
     } catch (error) {
         showToast('Failed to update base model', 'error');
@@ -431,7 +418,7 @@ export function setupFileNameEditing(filePath) {
                 const newFilePath = [...pathParts, newFileName].join('/');
                 
                 // Update the checkpoint card with new file path
-                updateCheckpointCard(filePath, { 
+                updateModelCard(filePath, { 
                     filepath: newFilePath,
                     file_name: newFileName 
                 });

static/js/components/checkpointModal/ModelTags.js

@@ -0,0 +1,471 @@
+/**
+ * ModelTags.js
+ * Module for handling checkpoint model tag editing functionality
+ */
+import { showToast } from '../../utils/uiHelpers.js';
+import { saveModelMetadata } from '../../api/checkpointApi.js';
+
+// Preset tag suggestions
+const PRESET_TAGS = [
+  'character', 'style', 'concept', 'clothing', 'base model',
+  'poses', 'background', 'vehicle', 'buildings', 
+  'objects', 'animal'
+];
+
+// Create a named function so we can remove it later
+let saveTagsHandler = null;
+
+/**
+ * Set up tag editing mode
+ */
+export function setupTagEditMode() {
+    const editBtn = document.querySelector('.edit-tags-btn');
+    if (!editBtn) return;
+    
+    // Store original tags for restoring on cancel
+    let originalTags = [];
+    
+    // Remove any previously attached click handler
+    if (editBtn._hasClickHandler) {
+        editBtn.removeEventListener('click', editBtn._clickHandler);
+    }
+    
+    // Create new handler and store reference
+    const editBtnClickHandler = function() {
+        const tagsSection = document.querySelector('.model-tags-container');
+        const isEditMode = tagsSection.classList.toggle('edit-mode');
+        const filePath = this.dataset.filePath;
+        
+        // Toggle edit mode UI elements
+        const compactTagsDisplay = tagsSection.querySelector('.model-tags-compact');
+        const tagsEditContainer = tagsSection.querySelector('.metadata-edit-container');
+        
+        if (isEditMode) {
+            // Enter edit mode
+            this.innerHTML = '<i class="fas fa-times"></i>'; // Change to cancel icon
+            this.title = "Cancel editing";
+            
+            // Get all tags from tooltip, not just the visible ones in compact display
+            originalTags = Array.from(
+                tagsSection.querySelectorAll('.tooltip-tag')
+            ).map(tag => tag.textContent);
+            
+            // Hide compact display, show edit container
+            compactTagsDisplay.style.display = 'none';
+            
+            // If edit container doesn't exist yet, create it
+            if (!tagsEditContainer) {
+                const editContainer = document.createElement('div');
+                editContainer.className = 'metadata-edit-container';
+                
+                // Move the edit button inside the container header for better visibility
+                const editBtnClone = editBtn.cloneNode(true);
+                editBtnClone.classList.add('metadata-header-btn');
+                
+                // Create edit UI with edit button in the header
+                editContainer.innerHTML = createTagEditUI(originalTags, editBtnClone.outerHTML);
+                tagsSection.appendChild(editContainer);
+                
+                // Setup the tag input field behavior
+                setupTagInput();
+                
+                // Create and add preset suggestions dropdown
+                const tagForm = editContainer.querySelector('.metadata-add-form');
+                const suggestionsDropdown = createSuggestionsDropdown(originalTags);
+                tagForm.appendChild(suggestionsDropdown);
+                
+                // Setup delete buttons for existing tags
+                setupDeleteButtons();
+                
+                // Transfer click event from original button to the cloned one
+                const newEditBtn = editContainer.querySelector('.metadata-header-btn');
+                if (newEditBtn) {
+                    newEditBtn.addEventListener('click', function() {
+                        editBtn.click();
+                    });
+                }
+                
+                // Hide the original button when in edit mode
+                editBtn.style.display = 'none';
+            } else {
+                // Just show the existing edit container
+                tagsEditContainer.style.display = 'block';
+                editBtn.style.display = 'none';
+            }
+        } else {
+            // Exit edit mode
+            this.innerHTML = '<i class="fas fa-pencil-alt"></i>'; // Change back to edit icon
+            this.title = "Edit tags";
+            editBtn.style.display = 'block';
+            
+            // Show compact display, hide edit container
+            compactTagsDisplay.style.display = 'flex';
+            if (tagsEditContainer) tagsEditContainer.style.display = 'none';
+            
+            // Check if we're exiting edit mode due to "Save" or "Cancel"
+            if (!this.dataset.skipRestore) {
+                // If canceling, restore original tags
+                restoreOriginalTags(tagsSection, originalTags);
+            } else {
+                // Reset the skip restore flag
+                delete this.dataset.skipRestore;
+            }
+        }
+    };
+    
+    // Store the handler reference on the button itself
+    editBtn._clickHandler = editBtnClickHandler;
+    editBtn._hasClickHandler = true;
+    editBtn.addEventListener('click', editBtnClickHandler);
+    
+    // Clean up any previous document click handler
+    if (saveTagsHandler) {
+        document.removeEventListener('click', saveTagsHandler);
+    }
+    
+    // Create new save handler and store reference
+    saveTagsHandler = function(e) {
+        if (e.target.classList.contains('save-tags-btn') || 
+            e.target.closest('.save-tags-btn')) {
+            saveTags();
+        }
+    };
+    
+    // Add the new handler
+    document.addEventListener('click', saveTagsHandler);
+}
+
+/**
+ * Create the tag editing UI
+ * @param {Array} currentTags - Current tags
+ * @param {string} editBtnHTML - HTML for the edit button to include in header
+ * @returns {string} HTML markup for tag editing UI
+ */
+function createTagEditUI(currentTags, editBtnHTML = '') {
+    return `
+        <div class="metadata-edit-content">
+            <div class="metadata-edit-header">
+                <label>Edit Tags</label>
+                ${editBtnHTML}
+            </div>
+            <div class="metadata-items">
+                ${currentTags.map(tag => `
+                    <div class="metadata-item" data-tag="${tag}">
+                        <span class="metadata-item-content">${tag}</span>
+                        <button class="metadata-delete-btn">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                `).join('')}
+            </div>
+            <div class="metadata-edit-controls">
+                <button class="save-tags-btn" title="Save changes">
+                    <i class="fas fa-save"></i> Save
+                </button>
+            </div>
+            <div class="metadata-add-form">
+                <input type="text" class="metadata-input" placeholder="Type to add or click suggestions below">
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Create suggestions dropdown with preset tags
+ * @param {Array} existingTags - Already added tags
+ * @returns {HTMLElement} - Dropdown element
+ */
+function createSuggestionsDropdown(existingTags = []) {
+    const dropdown = document.createElement('div');
+    dropdown.className = 'metadata-suggestions-dropdown';
+    
+    // Create header
+    const header = document.createElement('div');
+    header.className = 'metadata-suggestions-header';
+    header.innerHTML = `
+        <span>Suggested Tags</span>
+        <small>Click to add</small>
+    `;
+    dropdown.appendChild(header);
+    
+    // Create tag container
+    const container = document.createElement('div');
+    container.className = 'metadata-suggestions-container';
+    
+    // Add each preset tag as a suggestion
+    PRESET_TAGS.forEach(tag => {
+        const isAdded = existingTags.includes(tag);
+        
+        const item = document.createElement('div');
+        item.className = `metadata-suggestion-item ${isAdded ? 'already-added' : ''}`;
+        item.title = tag;
+        item.innerHTML = `
+            <span class="metadata-suggestion-text">${tag}</span>
+            ${isAdded ? '<span class="added-indicator"><i class="fas fa-check"></i></span>' : ''}
+        `;
+        
+        if (!isAdded) {
+            item.addEventListener('click', () => {
+                addNewTag(tag);
+                
+                // Also populate the input field for potential editing
+                const input = document.querySelector('.metadata-input');
+                if (input) input.value = tag;
+                
+                // Focus on the input
+                if (input) input.focus();
+                
+                // Update dropdown without removing it
+                updateSuggestionsDropdown();
+            });
+        }
+        
+        container.appendChild(item);
+    });
+    
+    dropdown.appendChild(container);
+    return dropdown;
+}
+
+/**
+ * Set up tag input behavior
+ */
+function setupTagInput() {
+    const tagInput = document.querySelector('.metadata-input');
+    
+    if (tagInput) {
+        tagInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                addNewTag(this.value);
+                this.value = ''; // Clear input after adding
+            }
+        });
+    }
+}
+
+/**
+ * Set up delete buttons for tags
+ */
+function setupDeleteButtons() {
+    document.querySelectorAll('.metadata-delete-btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            const tag = this.closest('.metadata-item');
+            tag.remove();
+            
+            // Update status of items in the suggestion dropdown
+            updateSuggestionsDropdown();
+        });
+    });
+}
+
+/**
+ * Add a new tag
+ * @param {string} tag - Tag to add
+ */
+function addNewTag(tag) {
+    tag = tag.trim().toLowerCase();
+    if (!tag) return;
+    
+    const tagsContainer = document.querySelector('.metadata-items');
+    if (!tagsContainer) return;
+    
+    // Validation: Check length
+    if (tag.length > 30) {
+        showToast('Tag should not exceed 30 characters', 'error');
+        return;
+    }
+    
+    // Validation: Check total number
+    const currentTags = tagsContainer.querySelectorAll('.metadata-item');
+    if (currentTags.length >= 30) {
+        showToast('Maximum 30 tags allowed', 'error');
+        return;
+    }
+    
+    // Validation: Check for duplicates
+    const existingTags = Array.from(currentTags).map(tag => tag.dataset.tag);
+    if (existingTags.includes(tag)) {
+        showToast('This tag already exists', 'error');
+        return;
+    }
+    
+    // Create new tag
+    const newTag = document.createElement('div');
+    newTag.className = 'metadata-item';
+    newTag.dataset.tag = tag;
+    newTag.innerHTML = `
+        <span class="metadata-item-content">${tag}</span>
+        <button class="metadata-delete-btn">
+            <i class="fas fa-times"></i>
+        </button>
+    `;
+    
+    // Add event listener to delete button
+    const deleteBtn = newTag.querySelector('.metadata-delete-btn');
+    deleteBtn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        newTag.remove();
+        
+        // Update status of items in the suggestion dropdown
+        updateSuggestionsDropdown();
+    });
+    
+    tagsContainer.appendChild(newTag);
+    
+    // Update status of items in the suggestions dropdown
+    updateSuggestionsDropdown();
+}
+
+/**
+ * Update status of items in the suggestions dropdown
+ */
+function updateSuggestionsDropdown() {
+    const dropdown = document.querySelector('.metadata-suggestions-dropdown');
+    if (!dropdown) return;
+    
+    // Get all current tags
+    const currentTags = document.querySelectorAll('.metadata-item');
+    const existingTags = Array.from(currentTags).map(tag => tag.dataset.tag);
+    
+    // Update status of each item in dropdown
+    dropdown.querySelectorAll('.metadata-suggestion-item').forEach(item => {
+        const tagText = item.querySelector('.metadata-suggestion-text').textContent;
+        const isAdded = existingTags.includes(tagText);
+        
+        if (isAdded) {
+            item.classList.add('already-added');
+            
+            // Add indicator if it doesn't exist
+            let indicator = item.querySelector('.added-indicator');
+            if (!indicator) {
+                indicator = document.createElement('span');
+                indicator.className = 'added-indicator';
+                indicator.innerHTML = '<i class="fas fa-check"></i>';
+                item.appendChild(indicator);
+            }
+            
+            // Remove click event
+            item.onclick = null;
+        } else {
+            // Re-enable items that are no longer in the list
+            item.classList.remove('already-added');
+            
+            // Remove indicator if it exists
+            const indicator = item.querySelector('.added-indicator');
+            if (indicator) indicator.remove();
+            
+            // Restore click event if not already set
+            if (!item.onclick) {
+                item.onclick = () => {
+                    const tag = item.querySelector('.metadata-suggestion-text').textContent;
+                    addNewTag(tag);
+                    
+                    // Also populate the input field
+                    const input = document.querySelector('.metadata-input');
+                    if (input) input.value = tag;
+                    
+                    // Focus the input
+                    if (input) input.focus();
+                };
+            }
+        }
+    });
+}
+
+/**
+ * Restore original tags when canceling edit
+ * @param {HTMLElement} section - The tags section
+ * @param {Array} originalTags - Original tags array
+ */
+function restoreOriginalTags(section, originalTags) {
+    // Nothing to do here as we're just hiding the edit UI
+    // and showing the original compact tags which weren't modified
+}
+
+/**
+ * Save tags
+ */
+async function saveTags() {
+    const editBtn = document.querySelector('.edit-tags-btn');
+    if (!editBtn) return;
+    
+    const filePath = editBtn.dataset.filePath;
+    const tagElements = document.querySelectorAll('.metadata-item');
+    const tags = Array.from(tagElements).map(tag => tag.dataset.tag);
+
+    // Get original tags to compare
+    const originalTagElements = document.querySelectorAll('.tooltip-tag');
+    const originalTags = Array.from(originalTagElements).map(tag => tag.textContent);
+    
+    // Check if tags have actually changed
+    const tagsChanged = JSON.stringify(tags) !== JSON.stringify(originalTags);
+    
+    if (!tagsChanged) {
+        // No changes made, just exit edit mode without API call
+        editBtn.dataset.skipRestore = "true";
+        editBtn.click();
+        return;
+    }
+    
+    try {
+        // Save tags metadata
+        await saveModelMetadata(filePath, { tags: tags });
+        
+        // Set flag to skip restoring original tags when exiting edit mode
+        editBtn.dataset.skipRestore = "true";
+        
+        // Update the compact tags display
+        const compactTagsContainer = document.querySelector('.model-tags-container');
+        if (compactTagsContainer) {
+            // Generate new compact tags HTML
+            const compactTagsDisplay = compactTagsContainer.querySelector('.model-tags-compact');
+            
+            if (compactTagsDisplay) {
+                // Clear current tags
+                compactTagsDisplay.innerHTML = '';
+                
+                // Add visible tags (up to 5)
+                const visibleTags = tags.slice(0, 5);
+                visibleTags.forEach(tag => {
+                    const span = document.createElement('span');
+                    span.className = 'model-tag-compact';
+                    span.textContent = tag;
+                    compactTagsDisplay.appendChild(span);
+                });
+                
+                // Add more indicator if needed
+                const remainingCount = Math.max(0, tags.length - 5);
+                if (remainingCount > 0) {
+                    const more = document.createElement('span');
+                    more.className = 'model-tag-more';
+                    more.dataset.count = remainingCount;
+                    more.textContent = `+${remainingCount}`;
+                    compactTagsDisplay.appendChild(more);
+                }
+            }
+            
+            // Update tooltip content
+            const tooltipContent = compactTagsContainer.querySelector('.tooltip-content');
+            if (tooltipContent) {
+                tooltipContent.innerHTML = '';
+                
+                tags.forEach(tag => {
+                    const span = document.createElement('span');
+                    span.className = 'tooltip-tag';
+                    span.textContent = tag;
+                    tooltipContent.appendChild(span);
+                });
+            }
+        }
+        
+        // Exit edit mode
+        editBtn.click();
+        
+        showToast('Tags updated successfully', 'success');
+    } catch (error) {
+        console.error('Error saving tags:', error);
+        showToast('Failed to update tags', 'error');
+    }
+}

static/js/components/checkpointModal/ShowcaseView.js

@@ -1,346 +0,0 @@
-/**
- * ShowcaseView.js
- * Handles showcase content (images, videos) display for checkpoint modal
- */
-import { 
-    toggleShowcase,
-    setupShowcaseScroll,
-    scrollToTop 
-} from '../../utils/uiHelpers.js';
-import { state } from '../../state/index.js';
-import { NSFW_LEVELS } from '../../utils/constants.js';
-
-/**
- * Render showcase content
- * @param {Array} images - Array of images/videos to show
- * @param {string} modelHash - Model hash for identifying local files
- * @param {Array} exampleFiles - Local example files already fetched
- * @returns {string} HTML content
- */
-export function renderShowcaseContent(images, exampleFiles = []) {
-    if (!images?.length) return '<div class="no-examples">No example images available</div>';
-    
-    // Filter images based on SFW setting
-    const showOnlySFW = state.settings.show_only_sfw;
-    let filteredImages = images;
-    let hiddenCount = 0;
-    
-    if (showOnlySFW) {
-        filteredImages = images.filter(img => {
-            const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
-            const isSfw = nsfwLevel < NSFW_LEVELS.R;
-            if (!isSfw) hiddenCount++;
-            return isSfw;
-        });
-    }
-    
-    // Show message if no images are available after filtering
-    if (filteredImages.length === 0) {
-        return `
-            <div class="no-examples">
-                <p>All example images are filtered due to NSFW content settings</p>
-                <p class="nsfw-filter-info">Your settings are currently set to show only safe-for-work content</p>
-                <p>You can change this in Settings <i class="fas fa-cog"></i></p>
-            </div>
-        `;
-    }
-    
-    // Show hidden content notification if applicable
-    const hiddenNotification = hiddenCount > 0 ? 
-        `<div class="nsfw-filter-notification">
-            <i class="fas fa-eye-slash"></i> ${hiddenCount} ${hiddenCount === 1 ? 'image' : 'images'} hidden due to SFW-only setting
-        </div>` : '';
-    
-    return `
-        <div class="scroll-indicator" onclick="toggleShowcase(this)">
-            <i class="fas fa-chevron-down"></i>
-            <span>Scroll or click to show ${filteredImages.length} examples</span>
-        </div>
-        <div class="carousel collapsed">
-            ${hiddenNotification}
-            <div class="carousel-container">
-                ${filteredImages.map((img, index) => {
-                    // Find matching file in our list of actual files
-                    let localFile = null;
-                    if (exampleFiles.length > 0) {
-                        // Try to find the corresponding file by index first
-                        localFile = exampleFiles.find(file => {
-                            const match = file.name.match(/image_(\d+)\./);
-                            return match && parseInt(match[1]) === index;
-                        });
-                        
-                        // If not found by index, just use the same position in the array if available
-                        if (!localFile && index < exampleFiles.length) {
-                            localFile = exampleFiles[index];
-                        }
-                    }
-                    
-                    const remoteUrl = img.url || '';
-                    const localUrl = localFile ? localFile.path : '';
-                    const isVideo = localFile ? localFile.is_video : 
-                                   remoteUrl.endsWith('.mp4') || remoteUrl.endsWith('.webm');
-                    
-                    // Calculate appropriate aspect ratio
-                    const aspectRatio = (img.height / img.width) * 100;
-                    const containerWidth = 800; // modal content maximum width
-                    const minHeightPercent = 40; 
-                    const maxHeightPercent = (window.innerHeight * 0.6 / containerWidth) * 100;
-                    const heightPercent = Math.max(
-                        minHeightPercent,
-                        Math.min(maxHeightPercent, aspectRatio)
-                    );
-                    
-                    // Check if media should be blurred
-                    const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
-                    const shouldBlur = state.settings.blurMatureContent && nsfwLevel > NSFW_LEVELS.PG13;
-                    
-                    // Determine NSFW warning text based on level
-                    let nsfwText = "Mature Content";
-                    if (nsfwLevel >= NSFW_LEVELS.XXX) {
-                        nsfwText = "XXX-rated Content";
-                    } else if (nsfwLevel >= NSFW_LEVELS.X) {
-                        nsfwText = "X-rated Content";
-                    } else if (nsfwLevel >= NSFW_LEVELS.R) {
-                        nsfwText = "R-rated Content";
-                    }
-                    
-                    // Extract metadata from the image
-                    const meta = img.meta || {};
-                    const prompt = meta.prompt || '';
-                    const negativePrompt = meta.negative_prompt || meta.negativePrompt || '';
-                    const size = meta.Size || `${img.width}x${img.height}`;
-                    const seed = meta.seed || '';
-                    const model = meta.Model || '';
-                    const steps = meta.steps || '';
-                    const sampler = meta.sampler || '';
-                    const cfgScale = meta.cfgScale || '';
-                    const clipSkip = meta.clipSkip || '';
-                    
-                    // Check if we have any meaningful generation parameters
-                    const hasParams = seed || model || steps || sampler || cfgScale || clipSkip;
-                    const hasPrompts = prompt || negativePrompt;
-                    
-                    // Create metadata panel content
-                    const metadataPanel = generateMetadataPanel(
-                        hasParams, hasPrompts, 
-                        prompt, negativePrompt, 
-                        size, seed, model, steps, sampler, cfgScale, clipSkip
-                    );
-                    
-                    // Check if this is a video or image
-                    if (isVideo) {
-                        return generateVideoWrapper(
-                            img, heightPercent, shouldBlur, nsfwText, metadataPanel,
-                            localUrl, remoteUrl
-                        );
-                    }
-                    
-                    return generateImageWrapper(
-                        img, heightPercent, shouldBlur, nsfwText, metadataPanel,
-                        localUrl, remoteUrl
-                    );
-                }).join('')}
-            </div>
-        </div>
-    `;
-}
-
-/**
- * Generate media wrapper HTML for an image or video
- * @param {Object} media - Media object with image or video data
- * @returns {string} HTML content
- */
-function generateMediaWrapper(media, urls) {
-    // Calculate appropriate aspect ratio
-    const aspectRatio = (media.height / media.width) * 100;
-    const containerWidth = 800; // modal content maximum width
-    const minHeightPercent = 40; 
-    const maxHeightPercent = (window.innerHeight * 0.6 / containerWidth) * 100;
-    const heightPercent = Math.max(
-        minHeightPercent,
-        Math.min(maxHeightPercent, aspectRatio)
-    );
-    
-    // Check if media should be blurred
-    const nsfwLevel = media.nsfwLevel !== undefined ? media.nsfwLevel : 0;
-    const shouldBlur = state.settings.blurMatureContent && nsfwLevel > NSFW_LEVELS.PG13;
-    
-    // Determine NSFW warning text based on level
-    let nsfwText = "Mature Content";
-    if (nsfwLevel >= NSFW_LEVELS.XXX) {
-        nsfwText = "XXX-rated Content";
-    } else if (nsfwLevel >= NSFW_LEVELS.X) {
-        nsfwText = "X-rated Content";
-    } else if (nsfwLevel >= NSFW_LEVELS.R) {
-        nsfwText = "R-rated Content";
-    }
-    
-    // Extract metadata from the media
-    const meta = media.meta || {};
-    const prompt = meta.prompt || '';
-    const negativePrompt = meta.negative_prompt || meta.negativePrompt || '';
-    const size = meta.Size || `${media.width}x${media.height}`;
-    const seed = meta.seed || '';
-    const model = meta.Model || '';
-    const steps = meta.steps || '';
-    const sampler = meta.sampler || '';
-    const cfgScale = meta.cfgScale || '';
-    const clipSkip = meta.clipSkip || '';
-    
-    // Check if we have any meaningful generation parameters
-    const hasParams = seed || model || steps || sampler || cfgScale || clipSkip;
-    const hasPrompts = prompt || negativePrompt;
-    
-    // Create metadata panel content
-    const metadataPanel = generateMetadataPanel(
-        hasParams, hasPrompts, 
-        prompt, negativePrompt, 
-        size, seed, model, steps, sampler, cfgScale, clipSkip
-    );
-    
-    // Check if this is a video or image
-    if (media.type === 'video') {
-        return generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, urls);
-    }
-    
-    return generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, urls);
-}
-
-/**
- * Generate metadata panel HTML
- */
-function generateMetadataPanel(hasParams, hasPrompts, prompt, negativePrompt, size, seed, model, steps, sampler, cfgScale, clipSkip) {
-    // Create unique IDs for prompt copying
-    const promptIndex = Math.random().toString(36).substring(2, 15);
-    const negPromptIndex = Math.random().toString(36).substring(2, 15);
-    
-    let content = '<div class="image-metadata-panel"><div class="metadata-content">';
-    
-    if (hasParams) {
-        content += `
-            <div class="params-tags">
-                ${size ? `<div class="param-tag"><span class="param-name">Size:</span><span class="param-value">${size}</span></div>` : ''}
-                ${seed ? `<div class="param-tag"><span class="param-name">Seed:</span><span class="param-value">${seed}</span></div>` : ''}
-                ${model ? `<div class="param-tag"><span class="param-name">Model:</span><span class="param-value">${model}</span></div>` : ''}
-                ${steps ? `<div class="param-tag"><span class="param-name">Steps:</span><span class="param-value">${steps}</span></div>` : ''}
-                ${sampler ? `<div class="param-tag"><span class="param-name">Sampler:</span><span class="param-value">${sampler}</span></div>` : ''}
-                ${cfgScale ? `<div class="param-tag"><span class="param-name">CFG:</span><span class="param-value">${cfgScale}</span></div>` : ''}
-                ${clipSkip ? `<div class="param-tag"><span class="param-name">Clip Skip:</span><span class="param-value">${clipSkip}</span></div>` : ''}
-            </div>
-        `;
-    }
-    
-    if (!hasParams && !hasPrompts) {
-        content += `
-            <div class="no-metadata-message">
-                <i class="fas fa-info-circle"></i>
-                <span>No generation parameters available</span>
-            </div>
-        `;
-    }
-    
-    if (prompt) {
-        content += `
-            <div class="metadata-row prompt-row">
-                <span class="metadata-label">Prompt:</span>
-                <div class="metadata-prompt-wrapper">
-                    <div class="metadata-prompt">${prompt}</div>
-                    <button class="copy-prompt-btn" data-prompt-index="${promptIndex}">
-                        <i class="fas fa-copy"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="hidden-prompt" id="prompt-${promptIndex}" style="display:none;">${prompt}</div>
-        `;
-    }
-    
-    if (negativePrompt) {
-        content += `
-            <div class="metadata-row prompt-row">
-                <span class="metadata-label">Negative Prompt:</span>
-                <div class="metadata-prompt-wrapper">
-                    <div class="metadata-prompt">${negativePrompt}</div>
-                    <button class="copy-prompt-btn" data-prompt-index="${negPromptIndex}">
-                        <i class="fas fa-copy"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="hidden-prompt" id="prompt-${negPromptIndex}" style="display:none;">${negativePrompt}</div>
-        `;
-    }
-    
-    content += '</div></div>';
-    return content;
-}
-
-/**
- * Generate video wrapper HTML
- */
-function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl) {
-    return `
-        <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%">
-            ${shouldBlur ? `
-                <button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
-                    <i class="fas fa-eye"></i>
-                </button>
-            ` : ''}
-            <video controls autoplay muted loop crossorigin="anonymous" 
-                referrerpolicy="no-referrer" 
-                data-local-src="${localUrl || ''}"
-                data-remote-src="${remoteUrl}"
-                class="lazy ${shouldBlur ? 'blurred' : ''}">
-                <source data-local-src="${localUrl || ''}" data-remote-src="${remoteUrl}" type="video/mp4">
-                Your browser does not support video playback
-            </video>
-            ${shouldBlur ? `
-                <div class="nsfw-overlay">
-                    <div class="nsfw-warning">
-                        <p>${nsfwText}</p>
-                        <button class="show-content-btn">Show</button>
-                    </div>
-                </div>
-            ` : ''}
-            ${metadataPanel}
-        </div>
-    `;
-}
-
-/**
- * Generate image wrapper HTML
- */
-function generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl) {
-    return `
-        <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%">
-            ${shouldBlur ? `
-                <button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
-                    <i class="fas fa-eye"></i>
-                </button>
-            ` : ''}
-            <img data-local-src="${localUrl || ''}"
-                data-remote-src="${remoteUrl}"
-                alt="Preview" 
-                crossorigin="anonymous" 
-                referrerpolicy="no-referrer"
-                width="${media.width}"
-                height="${media.height}"
-                class="lazy ${shouldBlur ? 'blurred' : ''}"> 
-            ${shouldBlur ? `
-                <div class="nsfw-overlay">
-                    <div class="nsfw-warning">
-                        <p>${nsfwText}</p>
-                        <button class="show-content-btn">Show</button>
-                    </div>
-                </div>
-            ` : ''}
-            ${metadataPanel}
-        </div>
-    `;
-}
-
-// Use the shared setupShowcaseScroll function with the correct modal ID
-export { setupShowcaseScroll, scrollToTop, toggleShowcase };
-
-// Initialize the showcase scroll when this module is imported
-document.addEventListener('DOMContentLoaded', () => {
-    setupShowcaseScroll('checkpointModal');
-});

static/js/components/checkpointModal/index.js

@@ -3,19 +3,23 @@
  * 
  * Modularized checkpoint modal component that handles checkpoint model details display
  */
-import { showToast, getExampleImageFiles, initLazyLoading, initNsfwBlurHandlers, initMetadataPanelHandlers } from '../../utils/uiHelpers.js';
+import { showToast } from '../../utils/uiHelpers.js';
 import { modalManager } from '../../managers/ModalManager.js';
-import { renderShowcaseContent, toggleShowcase, setupShowcaseScroll, scrollToTop } from './ShowcaseView.js';
+import { 
+    toggleShowcase,
+    setupShowcaseScroll, 
+    scrollToTop,
+    loadExampleImages
+} from '../shared/showcase/ShowcaseView.js';
 import { setupTabSwitching, loadModelDescription } from './ModelDescription.js';
 import { 
     setupModelNameEditing, 
     setupBaseModelEditing, 
     setupFileNameEditing
 } from './ModelMetadata.js';
+import { setupTagEditMode } from './ModelTags.js'; // Add import for tag editing
 import { saveModelMetadata } from '../../api/checkpointApi.js';
 import { renderCompactTags, setupTagTooltip, formatFileSize } from './utils.js';
-import { updateCheckpointCard } from '../../utils/cardUpdater.js';
-import { state } from '../../state/index.js';
 
 /**
  * Display the checkpoint modal with the given checkpoint data
@@ -46,7 +50,7 @@ export function showCheckpointModal(checkpoint) {
                     <span class="creator-username">${checkpoint.civitai.creator.username}</span>
                 </div>` : ''}
 
-                ${renderCompactTags(checkpoint.tags || [])}
+                ${renderCompactTags(checkpoint.tags || [], checkpoint.file_path)}
             </header>
 
             <div class="modal-body">
@@ -102,7 +106,7 @@ export function showCheckpointModal(checkpoint) {
                     </div>
                 </div>
 
-                <div class="showcase-section" data-checkpoint-id="${checkpoint.civitai?.modelId || ''}">
+                <div class="showcase-section" data-model-hash="${checkpoint.sha256 || ''}" data-filepath="${checkpoint.file_path}">
                     <div class="showcase-tabs">
                         <button class="tab-btn active" data-tab="showcase">Examples</button>
                         <button class="tab-btn" data-tab="description">Model Description</button>
@@ -137,9 +141,10 @@ export function showCheckpointModal(checkpoint) {
     
     modalManager.showModal('checkpointModal', content);
     setupEditableFields(checkpoint.file_path);
-    setupShowcaseScroll();
+    setupShowcaseScroll('checkpointModal');
     setupTabSwitching();
     setupTagTooltip();
+    setupTagEditMode(); // Initialize tag editing functionality
     setupModelNameEditing(checkpoint.file_path);
     setupBaseModelEditing(checkpoint.file_path);
     setupFileNameEditing(checkpoint.file_path);
@@ -149,68 +154,12 @@ export function showCheckpointModal(checkpoint) {
         loadModelDescription(checkpoint.civitai.modelId, checkpoint.file_path);
     }
     
-    // Load example images asynchronously
-    loadExampleImages(checkpoint.civitai?.images, checkpoint.sha256, checkpoint.file_path);
-}
-
-/**
- * Load example images asynchronously
- * @param {Array} images - Array of image objects
- * @param {string} modelHash - Model hash for fetching local files
- * @param {string} filePath - File path for fetching local files
- */
-async function loadExampleImages(images, modelHash, filePath) {
-    try {
-        const showcaseTab = document.getElementById('showcase-tab');
-        if (!showcaseTab) return;
-        
-        // First fetch local example files
-        let localFiles = [];
-        try {
-            // Choose endpoint based on centralized examples setting
-            const useCentralized = state.global.settings.useCentralizedExamples !== false;
-            const endpoint = useCentralized ? '/api/example-image-files' : '/api/model-example-files';
-            
-            // Use different params based on endpoint
-            const params = useCentralized ? 
-                `model_hash=${modelHash}` :
-                `file_path=${encodeURIComponent(filePath)}`;
-            
-            const response = await fetch(`${endpoint}?${params}`);
-            const result = await response.json();
-            
-            if (result.success) {
-                localFiles = result.files;
-            }
-        } catch (error) {
-            console.error("Failed to get example files:", error);
-        }
-        
-        // Then render with both remote images and local files
-        showcaseTab.innerHTML = renderShowcaseContent(images, localFiles);
-        
-        // Re-initialize the showcase event listeners
-        const carousel = showcaseTab.querySelector('.carousel');
-        if (carousel) {
-            // Only initialize if we actually have examples and they're expanded
-            if (!carousel.classList.contains('collapsed')) {
-                initLazyLoading(carousel);
-                initNsfwBlurHandlers(carousel);
-                initMetadataPanelHandlers(carousel);
-            }
-        }
-    } catch (error) {
-        console.error('Error loading example images:', error);
-        const showcaseTab = document.getElementById('showcase-tab');
-        if (showcaseTab) {
-            showcaseTab.innerHTML = `
-                <div class="error-message">
-                    <i class="fas fa-exclamation-circle"></i>
-                    Error loading example images
-                </div>
-            `;
-        }
-    }
+    // Load example images asynchronously - merge regular and custom images
+    const regularImages = checkpoint.civitai?.images || [];
+    const customImages = checkpoint.civitai?.customImages || [];
+    // Combine images - regular images first, then custom images
+    const allImages = [...regularImages, ...customImages];
+    loadExampleImages(allImages, checkpoint.sha256);
 }
 
 /**
@@ -261,9 +210,6 @@ async function saveNotes(filePath) {
     try {
         await saveModelMetadata(filePath, { notes: content });
 
-        // Update the corresponding checkpoint card's dataset
-        updateCheckpointCard(filePath, { notes: content });
-
         showToast('Notes saved successfully', 'success');
     } catch (error) {
         showToast('Failed to save notes', 'error');

static/js/components/checkpointModal/utils.js

@@ -27,27 +27,35 @@ export function formatFileSize(bytes) {
 /**
  * Render compact tags
  * @param {Array} tags - Array of tags
+ * @param {string} filePath - File path for the edit button
  * @returns {string} HTML content
  */
-export function renderCompactTags(tags) {
-    if (!tags || tags.length === 0) return '';
+export function renderCompactTags(tags, filePath = '') {
+    // Remove the early return and always render the container
+    const tagsList = tags || [];
     
     // Display up to 5 tags, with a tooltip indicator if there are more
-    const visibleTags = tags.slice(0, 5);
-    const remainingCount = Math.max(0, tags.length - 5);
+    const visibleTags = tagsList.slice(0, 5);
+    const remainingCount = Math.max(0, tagsList.length - 5);
     
     return `
         <div class="model-tags-container">
-            <div class="model-tags-compact">
-                ${visibleTags.map(tag => `<span class="model-tag-compact">${tag}</span>`).join('')}
-                ${remainingCount > 0 ? 
-                    `<span class="model-tag-more" data-count="${remainingCount}">+${remainingCount}</span>` : 
-                    ''}
+            <div class="model-tags-header">
+                <div class="model-tags-compact">
+                    ${visibleTags.map(tag => `<span class="model-tag-compact">${tag}</span>`).join('')}
+                    ${remainingCount > 0 ? 
+                        `<span class="model-tag-more" data-count="${remainingCount}">+${remainingCount}</span>` : 
+                        ''}
+                    ${tagsList.length === 0 ? `<span class="model-tag-empty">No tags</span>` : ''}
+                </div>
+                <button class="edit-tags-btn" data-file-path="${filePath}" title="Edit tags">
+                    <i class="fas fa-pencil-alt"></i>
+                </button>
             </div>
-            ${tags.length > 0 ? 
+            ${tagsList.length > 0 ? 
                 `<div class="model-tags-tooltip">
                     <div class="tooltip-content">
-                        ${tags.map(tag => `<span class="tooltip-tag">${tag}</span>`).join('')}
+                        ${tagsList.map(tag => `<span class="tooltip-tag">${tag}</span>`).join('')}
                     </div>
                 </div>` : 
                 ''}

static/js/components/loraModal/ModelMetadata.js

@@ -4,7 +4,7 @@
  */
 import { showToast } from '../../utils/uiHelpers.js';
 import { BASE_MODELS } from '../../utils/constants.js';
-import { updateLoraCard } from '../../utils/cardUpdater.js';
+import { updateModelCard } from '../../utils/cardUpdater.js';
 import { saveModelMetadata, renameLoraFile } from '../../api/loraApi.js';
 
 /**
@@ -115,16 +115,6 @@ export function setupModelNameEditing(filePath) {
             
             await saveModelMetadata(filePath, { model_name: newModelName });
             
-            // Update the corresponding lora card's dataset and display
-            updateLoraCard(filePath, { model_name: newModelName });
-            
-            // BUGFIX: Directly update the card's dataset.name attribute to ensure
-            // it's correctly read when reopening the modal
-            const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-            if (loraCard) {
-                loraCard.dataset.name = newModelName;
-            }
-            
             showToast('Model name updated successfully', 'success');
         } catch (error) {
             console.error('Error updating model name:', error);
@@ -142,40 +132,6 @@ export function setupModelNameEditing(filePath) {
     }
 }
 
-/**
- * 保存模型名称
- * @param {string} filePath - 文件路径
- */
-async function saveModelName(filePath) {
-    const modelNameElement = document.querySelector('.model-name-content');
-    const newModelName = modelNameElement.textContent.trim();
-    
-    // Validate model name
-    if (!newModelName) {
-        showToast('Model name cannot be empty', 'error');
-        return;
-    }
-    
-    // Check if model name is too long (limit to 100 characters)
-    if (newModelName.length > 100) {
-        showToast('Model name is too long (maximum 100 characters)', 'error');
-        // Truncate the displayed text
-        modelNameElement.textContent = newModelName.substring(0, 100);
-        return;
-    }
-    
-    try {
-        await saveModelMetadata(filePath, { model_name: newModelName });
-        
-        // Update the corresponding lora card's dataset and display
-        updateLoraCard(filePath, { model_name: newModelName });
-        
-        showToast('Model name updated successfully', 'success');
-    } catch (error) {
-        showToast('Failed to update model name', 'error');
-    }
-}
-
 /**
  * 设置基础模型编辑功能
  * @param {string} filePath - 文件路径
@@ -338,9 +294,6 @@ async function saveBaseModel(filePath, originalValue) {
     try {
         await saveModelMetadata(filePath, { base_model: newBaseModel });
         
-        // Update the corresponding lora card's dataset
-        updateLoraCard(filePath, { base_model: newBaseModel });
-        
         showToast('Base model updated successfully', 'success');
     } catch (error) {
         showToast('Failed to update base model', 'error');
@@ -468,7 +421,7 @@ export function setupFileNameEditing(filePath) {
                 // Get the new file path and update the card
                 const newFilePath = filePath.replace(originalValue, newFileName);
                 // Pass the new file_name in the updates object for proper card update
-                updateLoraCard(filePath, { file_name: newFileName }, newFilePath);
+                updateModelCard(filePath, { file_name: newFileName, filepath: newFilePath });
             } else {
                 throw new Error(result.error || 'Unknown error');
             }

static/js/components/loraModal/ModelTags.js

@@ -0,0 +1,471 @@
+/**
+ * ModelTags.js
+ * Module for handling model tag editing functionality
+ */
+import { showToast } from '../../utils/uiHelpers.js';
+import { saveModelMetadata } from '../../api/loraApi.js';
+
+// Preset tag suggestions
+const PRESET_TAGS = [
+    'character', 'style', 'concept', 'clothing', 
+    'poses', 'background', 'vehicle', 'buildings', 
+    'objects', 'animal'
+];
+
+// Create a named function so we can remove it later
+let saveTagsHandler = null;
+
+/**
+ * Set up tag editing mode
+ */
+export function setupTagEditMode() {
+    const editBtn = document.querySelector('.edit-tags-btn');
+    if (!editBtn) return;
+    
+    // Store original tags for restoring on cancel
+    let originalTags = [];
+    
+    // Remove any previously attached click handler
+    if (editBtn._hasClickHandler) {
+        editBtn.removeEventListener('click', editBtn._clickHandler);
+    }
+    
+    // Create new handler and store reference
+    const editBtnClickHandler = function() {
+        const tagsSection = document.querySelector('.model-tags-container');
+        const isEditMode = tagsSection.classList.toggle('edit-mode');
+        const filePath = this.dataset.filePath;
+        
+        // Toggle edit mode UI elements
+        const compactTagsDisplay = tagsSection.querySelector('.model-tags-compact');
+        const tagsEditContainer = tagsSection.querySelector('.metadata-edit-container');
+        
+        if (isEditMode) {
+            // Enter edit mode
+            this.innerHTML = '<i class="fas fa-times"></i>'; // Change to cancel icon
+            this.title = "Cancel editing";
+            
+            // Get all tags from tooltip, not just the visible ones in compact display
+            originalTags = Array.from(
+                tagsSection.querySelectorAll('.tooltip-tag')
+            ).map(tag => tag.textContent);
+            
+            // Hide compact display, show edit container
+            compactTagsDisplay.style.display = 'none';
+            
+            // If edit container doesn't exist yet, create it
+            if (!tagsEditContainer) {
+                const editContainer = document.createElement('div');
+                editContainer.className = 'metadata-edit-container';
+                
+                // Move the edit button inside the container header for better visibility
+                const editBtnClone = editBtn.cloneNode(true);
+                editBtnClone.classList.add('metadata-header-btn');
+                
+                // Create edit UI with edit button in the header
+                editContainer.innerHTML = createTagEditUI(originalTags, editBtnClone.outerHTML);
+                tagsSection.appendChild(editContainer);
+                
+                // Setup the tag input field behavior
+                setupTagInput();
+                
+                // Create and add preset suggestions dropdown
+                const tagForm = editContainer.querySelector('.metadata-add-form');
+                const suggestionsDropdown = createSuggestionsDropdown(originalTags);
+                tagForm.appendChild(suggestionsDropdown);
+                
+                // Setup delete buttons for existing tags
+                setupDeleteButtons();
+                
+                // Transfer click event from original button to the cloned one
+                const newEditBtn = editContainer.querySelector('.metadata-header-btn');
+                if (newEditBtn) {
+                    newEditBtn.addEventListener('click', function() {
+                        editBtn.click();
+                    });
+                }
+                
+                // Hide the original button when in edit mode
+                editBtn.style.display = 'none';
+            } else {
+                // Just show the existing edit container
+                tagsEditContainer.style.display = 'block';
+                editBtn.style.display = 'none';
+            }
+        } else {
+            // Exit edit mode
+            this.innerHTML = '<i class="fas fa-pencil-alt"></i>'; // Change back to edit icon
+            this.title = "Edit tags";
+            editBtn.style.display = 'block';
+            
+            // Show compact display, hide edit container
+            compactTagsDisplay.style.display = 'flex';
+            if (tagsEditContainer) tagsEditContainer.style.display = 'none';
+            
+            // Check if we're exiting edit mode due to "Save" or "Cancel"
+            if (!this.dataset.skipRestore) {
+                // If canceling, restore original tags
+                restoreOriginalTags(tagsSection, originalTags);
+            } else {
+                // Reset the skip restore flag
+                delete this.dataset.skipRestore;
+            }
+        }
+    };
+    
+    // Store the handler reference on the button itself
+    editBtn._clickHandler = editBtnClickHandler;
+    editBtn._hasClickHandler = true;
+    editBtn.addEventListener('click', editBtnClickHandler);
+    
+    // Clean up any previous document click handler
+    if (saveTagsHandler) {
+        document.removeEventListener('click', saveTagsHandler);
+    }
+    
+    // Create new save handler and store reference
+    saveTagsHandler = function(e) {
+        if (e.target.classList.contains('save-tags-btn') || 
+            e.target.closest('.save-tags-btn')) {
+            saveTags();
+        }
+    };
+    
+    // Add the new handler
+    document.addEventListener('click', saveTagsHandler);
+}
+
+/**
+ * Create the tag editing UI
+ * @param {Array} currentTags - Current tags
+ * @param {string} editBtnHTML - HTML for the edit button to include in header
+ * @returns {string} HTML markup for tag editing UI
+ */
+function createTagEditUI(currentTags, editBtnHTML = '') {
+    return `
+        <div class="metadata-edit-content">
+            <div class="metadata-edit-header">
+                <label>Edit Tags</label>
+                ${editBtnHTML}
+            </div>
+            <div class="metadata-items">
+                ${currentTags.map(tag => `
+                    <div class="metadata-item" data-tag="${tag}">
+                        <span class="metadata-item-content">${tag}</span>
+                        <button class="metadata-delete-btn">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                `).join('')}
+            </div>
+            <div class="metadata-edit-controls">
+                <button class="save-tags-btn" title="Save changes">
+                    <i class="fas fa-save"></i> Save
+                </button>
+            </div>
+            <div class="metadata-add-form">
+                <input type="text" class="metadata-input" placeholder="Type to add or click suggestions below">
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Create suggestions dropdown with preset tags
+ * @param {Array} existingTags - Already added tags
+ * @returns {HTMLElement} - Dropdown element
+ */
+function createSuggestionsDropdown(existingTags = []) {
+    const dropdown = document.createElement('div');
+    dropdown.className = 'metadata-suggestions-dropdown';
+    
+    // Create header
+    const header = document.createElement('div');
+    header.className = 'metadata-suggestions-header';
+    header.innerHTML = `
+        <span>Suggested Tags</span>
+        <small>Click to add</small>
+    `;
+    dropdown.appendChild(header);
+    
+    // Create tag container
+    const container = document.createElement('div');
+    container.className = 'metadata-suggestions-container';
+    
+    // Add each preset tag as a suggestion
+    PRESET_TAGS.forEach(tag => {
+        const isAdded = existingTags.includes(tag);
+        
+        const item = document.createElement('div');
+        item.className = `metadata-suggestion-item ${isAdded ? 'already-added' : ''}`;
+        item.title = tag;
+        item.innerHTML = `
+            <span class="metadata-suggestion-text">${tag}</span>
+            ${isAdded ? '<span class="added-indicator"><i class="fas fa-check"></i></span>' : ''}
+        `;
+        
+        if (!isAdded) {
+            item.addEventListener('click', () => {
+                addNewTag(tag);
+                
+                // Also populate the input field for potential editing
+                const input = document.querySelector('.metadata-input');
+                if (input) input.value = tag;
+                
+                // Focus on the input
+                if (input) input.focus();
+                
+                // Update dropdown without removing it
+                updateSuggestionsDropdown();
+            });
+        }
+        
+        container.appendChild(item);
+    });
+    
+    dropdown.appendChild(container);
+    return dropdown;
+}
+
+/**
+ * Set up tag input behavior
+ */
+function setupTagInput() {
+    const tagInput = document.querySelector('.metadata-input');
+    
+    if (tagInput) {
+        tagInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                addNewTag(this.value);
+                this.value = ''; // Clear input after adding
+            }
+        });
+    }
+}
+
+/**
+ * Set up delete buttons for tags
+ */
+function setupDeleteButtons() {
+    document.querySelectorAll('.metadata-delete-btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            const tag = this.closest('.metadata-item');
+            tag.remove();
+            
+            // Update status of items in the suggestion dropdown
+            updateSuggestionsDropdown();
+        });
+    });
+}
+
+/**
+ * Add a new tag
+ * @param {string} tag - Tag to add
+ */
+function addNewTag(tag) {
+    tag = tag.trim().toLowerCase();
+    if (!tag) return;
+    
+    const tagsContainer = document.querySelector('.metadata-items');
+    if (!tagsContainer) return;
+    
+    // Validation: Check length
+    if (tag.length > 30) {
+        showToast('Tag should not exceed 30 characters', 'error');
+        return;
+    }
+    
+    // Validation: Check total number
+    const currentTags = tagsContainer.querySelectorAll('.metadata-item');
+    if (currentTags.length >= 30) {
+        showToast('Maximum 30 tags allowed', 'error');
+        return;
+    }
+    
+    // Validation: Check for duplicates
+    const existingTags = Array.from(currentTags).map(tag => tag.dataset.tag);
+    if (existingTags.includes(tag)) {
+        showToast('This tag already exists', 'error');
+        return;
+    }
+    
+    // Create new tag
+    const newTag = document.createElement('div');
+    newTag.className = 'metadata-item';
+    newTag.dataset.tag = tag;
+    newTag.innerHTML = `
+        <span class="metadata-item-content">${tag}</span>
+        <button class="metadata-delete-btn">
+            <i class="fas fa-times"></i>
+        </button>
+    `;
+    
+    // Add event listener to delete button
+    const deleteBtn = newTag.querySelector('.metadata-delete-btn');
+    deleteBtn.addEventListener('click', function(e) {
+        e.stopPropagation();
+        newTag.remove();
+        
+        // Update status of items in the suggestion dropdown
+        updateSuggestionsDropdown();
+    });
+    
+    tagsContainer.appendChild(newTag);
+    
+    // Update status of items in the suggestions dropdown
+    updateSuggestionsDropdown();
+}
+
+/**
+ * Update status of items in the suggestions dropdown
+ */
+function updateSuggestionsDropdown() {
+    const dropdown = document.querySelector('.metadata-suggestions-dropdown');
+    if (!dropdown) return;
+    
+    // Get all current tags
+    const currentTags = document.querySelectorAll('.metadata-item');
+    const existingTags = Array.from(currentTags).map(tag => tag.dataset.tag);
+    
+    // Update status of each item in dropdown
+    dropdown.querySelectorAll('.metadata-suggestion-item').forEach(item => {
+        const tagText = item.querySelector('.metadata-suggestion-text').textContent;
+        const isAdded = existingTags.includes(tagText);
+        
+        if (isAdded) {
+            item.classList.add('already-added');
+            
+            // Add indicator if it doesn't exist
+            let indicator = item.querySelector('.added-indicator');
+            if (!indicator) {
+                indicator = document.createElement('span');
+                indicator.className = 'added-indicator';
+                indicator.innerHTML = '<i class="fas fa-check"></i>';
+                item.appendChild(indicator);
+            }
+            
+            // Remove click event
+            item.onclick = null;
+        } else {
+            // Re-enable items that are no longer in the list
+            item.classList.remove('already-added');
+            
+            // Remove indicator if it exists
+            const indicator = item.querySelector('.added-indicator');
+            if (indicator) indicator.remove();
+            
+            // Restore click event if not already set
+            if (!item.onclick) {
+                item.onclick = () => {
+                    const tag = item.querySelector('.metadata-suggestion-text').textContent;
+                    addNewTag(tag);
+                    
+                    // Also populate the input field
+                    const input = document.querySelector('.metadata-input');
+                    if (input) input.value = tag;
+                    
+                    // Focus the input
+                    if (input) input.focus();
+                };
+            }
+        }
+    });
+}
+
+/**
+ * Restore original tags when canceling edit
+ * @param {HTMLElement} section - The tags section
+ * @param {Array} originalTags - Original tags array
+ */
+function restoreOriginalTags(section, originalTags) {
+    // Nothing to do here as we're just hiding the edit UI
+    // and showing the original compact tags which weren't modified
+}
+
+/**
+ * Save tags
+ */
+async function saveTags() {
+    const editBtn = document.querySelector('.edit-tags-btn');
+    if (!editBtn) return;
+    
+    const filePath = editBtn.dataset.filePath;
+    const tagElements = document.querySelectorAll('.metadata-item');
+    const tags = Array.from(tagElements).map(tag => tag.dataset.tag);
+
+    // Get original tags to compare
+    const originalTagElements = document.querySelectorAll('.tooltip-tag');
+    const originalTags = Array.from(originalTagElements).map(tag => tag.textContent);
+    
+    // Check if tags have actually changed
+    const tagsChanged = JSON.stringify(tags) !== JSON.stringify(originalTags);
+    
+    if (!tagsChanged) {
+        // No changes made, just exit edit mode without API call
+        editBtn.dataset.skipRestore = "true";
+        editBtn.click();
+        return;
+    }
+    
+    try {
+        // Save tags metadata
+        await saveModelMetadata(filePath, { tags: tags });
+        
+        // Set flag to skip restoring original tags when exiting edit mode
+        editBtn.dataset.skipRestore = "true";
+        
+        // Update the compact tags display
+        const compactTagsContainer = document.querySelector('.model-tags-container');
+        if (compactTagsContainer) {
+            // Generate new compact tags HTML
+            const compactTagsDisplay = compactTagsContainer.querySelector('.model-tags-compact');
+            
+            if (compactTagsDisplay) {
+                // Clear current tags
+                compactTagsDisplay.innerHTML = '';
+                
+                // Add visible tags (up to 5)
+                const visibleTags = tags.slice(0, 5);
+                visibleTags.forEach(tag => {
+                    const span = document.createElement('span');
+                    span.className = 'model-tag-compact';
+                    span.textContent = tag;
+                    compactTagsDisplay.appendChild(span);
+                });
+                
+                // Add more indicator if needed
+                const remainingCount = Math.max(0, tags.length - 5);
+                if (remainingCount > 0) {
+                    const more = document.createElement('span');
+                    more.className = 'model-tag-more';
+                    more.dataset.count = remainingCount;
+                    more.textContent = `+${remainingCount}`;
+                    compactTagsDisplay.appendChild(more);
+                }
+            }
+            
+            // Update tooltip content
+            const tooltipContent = compactTagsContainer.querySelector('.tooltip-content');
+            if (tooltipContent) {
+                tooltipContent.innerHTML = '';
+                
+                tags.forEach(tag => {
+                    const span = document.createElement('span');
+                    span.className = 'tooltip-tag';
+                    span.textContent = tag;
+                    tooltipContent.appendChild(span);
+                });
+            }
+        }
+        
+        // Exit edit mode
+        editBtn.click();
+        
+        showToast('Tags updated successfully', 'success');
+    } catch (error) {
+        console.error('Error saving tags:', error);
+        showToast('Failed to update tags', 'error');
+    }
+}

static/js/components/loraModal/PresetTags.js

@@ -62,6 +62,5 @@ window.removePreset = async function(key) {
         usage_tips: newPresetsJson 
     });
     
-    loraCard.dataset.usage_tips = newPresetsJson;
     document.querySelector('.preset-tags').innerHTML = renderPresetTags(currentPresets);
 };

static/js/components/loraModal/ShowcaseView.js

@@ -1,280 +0,0 @@
-/**
- * ShowcaseView.js
- * 处理LoRA模型展示内容（图片、视频）的功能模块
- */
-import { 
-    toggleShowcase,
-    setupShowcaseScroll,
-    scrollToTop 
-} from '../../utils/uiHelpers.js';
-import { state } from '../../state/index.js';
-import { NSFW_LEVELS } from '../../utils/constants.js';
-
-/**
- * 获取展示内容并进行渲染
- * @param {Array} images - 要展示的图片/视频数组
- * @param {Array} exampleFiles - Local example files already fetched
- * @returns {Promise<string>} HTML内容
- */
-export function renderShowcaseContent(images, exampleFiles = []) {
-    if (!images?.length) return '<div class="no-examples">No example images available</div>';
-    
-    // Filter images based on SFW setting
-    const showOnlySFW = state.settings.show_only_sfw;
-    let filteredImages = images;
-    let hiddenCount = 0;
-    
-    if (showOnlySFW) {
-        filteredImages = images.filter(img => {
-            const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
-            const isSfw = nsfwLevel < NSFW_LEVELS.R;
-            if (!isSfw) hiddenCount++;
-            return isSfw;
-        });
-    }
-    
-    // Show message if no images are available after filtering
-    if (filteredImages.length === 0) {
-        return `
-            <div class="no-examples">
-                <p>All example images are filtered due to NSFW content settings</p>
-                <p class="nsfw-filter-info">Your settings are currently set to show only safe-for-work content</p>
-                <p>You can change this in Settings <i class="fas fa-cog"></i></p>
-            </div>
-        `;
-    }
-    
-    // Show hidden content notification if applicable
-    const hiddenNotification = hiddenCount > 0 ? 
-        `<div class="nsfw-filter-notification">
-            <i class="fas fa-eye-slash"></i> ${hiddenCount} ${hiddenCount === 1 ? 'image' : 'images'} hidden due to SFW-only setting
-        </div>` : '';
-    
-    return `
-        <div class="scroll-indicator" onclick="toggleShowcase(this)">
-            <i class="fas fa-chevron-down"></i>
-            <span>Scroll or click to show ${filteredImages.length} examples</span>
-        </div>
-        <div class="carousel collapsed">
-            ${hiddenNotification}
-            <div class="carousel-container">
-                ${filteredImages.map((img, index) => {
-                    // Find matching file in our list of actual files
-                    let localFile = null;
-                    if (exampleFiles.length > 0) {
-                        // Try to find the corresponding file by index first
-                        localFile = exampleFiles.find(file => {
-                            const match = file.name.match(/image_(\d+)\./);
-                            return match && parseInt(match[1]) === index;
-                        });
-                        
-                        // If not found by index, just use the same position in the array if available
-                        if (!localFile && index < exampleFiles.length) {
-                            localFile = exampleFiles[index];
-                        }
-                    }
-                    
-                    const remoteUrl = img.url || '';
-                    const localUrl = localFile ? localFile.path : '';
-                    const isVideo = localFile ? localFile.is_video : 
-                                    remoteUrl.endsWith('.mp4') || remoteUrl.endsWith('.webm');
-                    
-                    // 计算适当的展示高度
-                    const aspectRatio = (img.height / img.width) * 100;
-                    const containerWidth = 800; 
-                    const minHeightPercent = 40; 
-                    const maxHeightPercent = (window.innerHeight * 0.6 / containerWidth) * 100;
-                    const heightPercent = Math.max(
-                        minHeightPercent,
-                        Math.min(maxHeightPercent, aspectRatio)
-                    );
-                    
-                    // Check if image should be blurred
-                    const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
-                    const shouldBlur = state.settings.blurMatureContent && nsfwLevel > NSFW_LEVELS.PG13;
-                    
-                    // Determine NSFW warning text based on level
-                    let nsfwText = "Mature Content";
-                    if (nsfwLevel >= NSFW_LEVELS.XXX) {
-                        nsfwText = "XXX-rated Content";
-                    } else if (nsfwLevel >= NSFW_LEVELS.X) {
-                        nsfwText = "X-rated Content";
-                    } else if (nsfwLevel >= NSFW_LEVELS.R) {
-                        nsfwText = "R-rated Content";
-                    }
-                    
-                    // Extract metadata from the image
-                    const meta = img.meta || {};
-                    const prompt = meta.prompt || '';
-                    const negativePrompt = meta.negative_prompt || meta.negativePrompt || '';
-                    const size = meta.Size || `${img.width}x${img.height}`;
-                    const seed = meta.seed || '';
-                    const model = meta.Model || '';
-                    const steps = meta.steps || '';
-                    const sampler = meta.sampler || '';
-                    const cfgScale = meta.cfgScale || '';
-                    const clipSkip = meta.clipSkip || '';
-                    
-                    const hasParams = seed || model || steps || sampler || cfgScale || clipSkip;
-                    const hasPrompts = prompt || negativePrompt;
-                    
-                    const metadataPanel = generateMetadataPanel(
-                        hasParams, hasPrompts, 
-                        prompt, negativePrompt, 
-                        size, seed, model, steps, sampler, cfgScale, clipSkip
-                    );
-                    
-                    if (isVideo) {
-                        return generateVideoWrapper(
-                            img, heightPercent, shouldBlur, nsfwText, metadataPanel, 
-                            localUrl, remoteUrl
-                        );
-                    }
-                    return generateImageWrapper(
-                        img, heightPercent, shouldBlur, nsfwText, metadataPanel, 
-                        localUrl, remoteUrl
-                    );
-                }).join('')}
-            </div>
-        </div>
-    `;
-}
-
-/**
- * Generate metadata panel HTML
- */
-function generateMetadataPanel(hasParams, hasPrompts, prompt, negativePrompt, size, seed, model, steps, sampler, cfgScale, clipSkip) {
-    // Create unique IDs for prompt copying
-    const promptIndex = Math.random().toString(36).substring(2, 15);
-    const negPromptIndex = Math.random().toString(36).substring(2, 15);
-    
-    let content = '<div class="image-metadata-panel"><div class="metadata-content">';
-    
-    if (hasParams) {
-        content += `
-            <div class="params-tags">
-                ${size ? `<div class="param-tag"><span class="param-name">Size:</span><span class="param-value">${size}</span></div>` : ''}
-                ${seed ? `<div class="param-tag"><span class="param-name">Seed:</span><span class="param-value">${seed}</span></div>` : ''}
-                ${model ? `<div class="param-tag"><span class="param-name">Model:</span><span class="param-value">${model}</span></div>` : ''}
-                ${steps ? `<div class="param-tag"><span class="param-name">Steps:</span><span class="param-value">${steps}</span></div>` : ''}
-                ${sampler ? `<div class="param-tag"><span class="param-name">Sampler:</span><span class="param-value">${sampler}</span></div>` : ''}
-                ${cfgScale ? `<div class="param-tag"><span class="param-name">CFG:</span><span class="param-value">${cfgScale}</span></div>` : ''}
-                ${clipSkip ? `<div class="param-tag"><span class="param-name">Clip Skip:</span><span class="param-value">${clipSkip}</span></div>` : ''}
-            </div>
-        `;
-    }
-    
-    if (!hasParams && !hasPrompts) {
-        content += `
-            <div class="no-metadata-message">
-                <i class="fas fa-info-circle"></i>
-                <span>No generation parameters available</span>
-            </div>
-        `;
-    }
-    
-    if (prompt) {
-        content += `
-            <div class="metadata-row prompt-row">
-                <span class="metadata-label">Prompt:</span>
-                <div class="metadata-prompt-wrapper">
-                    <div class="metadata-prompt">${prompt}</div>
-                    <button class="copy-prompt-btn" data-prompt-index="${promptIndex}">
-                        <i class="fas fa-copy"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="hidden-prompt" id="prompt-${promptIndex}" style="display:none;">${prompt}</div>
-        `;
-    }
-    
-    if (negativePrompt) {
-        content += `
-            <div class="metadata-row prompt-row">
-                <span class="metadata-label">Negative Prompt:</span>
-                <div class="metadata-prompt-wrapper">
-                    <div class="metadata-prompt">${negativePrompt}</div>
-                    <button class="copy-prompt-btn" data-prompt-index="${negPromptIndex}">
-                        <i class="fas fa-copy"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="hidden-prompt" id="prompt-${negPromptIndex}" style="display:none;">${negativePrompt}</div>
-        `;
-    }
-    
-    content += '</div></div>';
-    return content;
-}
-
-/**
- * 生成视频包装HTML
- */
-function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl) {
-    return `
-        <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%">
-            ${shouldBlur ? `
-                <button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
-                    <i class="fas fa-eye"></i>
-                </button>
-            ` : ''}
-            <video controls autoplay muted loop crossorigin="anonymous" 
-                referrerpolicy="no-referrer" 
-                data-local-src="${localUrl || ''}"
-                data-remote-src="${remoteUrl}"
-                class="lazy ${shouldBlur ? 'blurred' : ''}">
-                <source data-local-src="${localUrl || ''}" data-remote-src="${remoteUrl}" type="video/mp4">
-                Your browser does not support video playback
-            </video>
-            ${shouldBlur ? `
-                <div class="nsfw-overlay">
-                    <div class="nsfw-warning">
-                        <p>${nsfwText}</p>
-                        <button class="show-content-btn">Show</button>
-                    </div>
-                </div>
-            ` : ''}
-            ${metadataPanel}
-        </div>
-    `;
-}
-
-/**
- * 生成图片包装HTML
- */
-function generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl) {
-    return `
-        <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%">
-            ${shouldBlur ? `
-                <button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
-                    <i class="fas fa-eye"></i>
-                </button>
-            ` : ''}
-            <img data-local-src="${localUrl || ''}" 
-                data-remote-src="${remoteUrl}"
-                alt="Preview" 
-                crossorigin="anonymous" 
-                referrerpolicy="no-referrer"
-                width="${img.width}"
-                height="${img.height}"
-                class="lazy ${shouldBlur ? 'blurred' : ''}"> 
-            ${shouldBlur ? `
-                <div class="nsfw-overlay">
-                    <div class="nsfw-warning">
-                        <p>${nsfwText}</p>
-                        <button class="show-content-btn">Show</button>
-                    </div>
-                </div>
-            ` : ''}
-            ${metadataPanel}
-        </div>
-    `;
-}
-
-// Use the shared setupShowcaseScroll function with the correct modal ID
-export { setupShowcaseScroll, scrollToTop, toggleShowcase };
-
-// Initialize the showcase scroll when this module is imported
-document.addEventListener('DOMContentLoaded', () => {
-    setupShowcaseScroll('loraModal');
-});

static/js/components/loraModal/TriggerWords.js

@@ -39,17 +39,17 @@ async function fetchTrainedWords(filePath) {
  */
 function createSuggestionDropdown(trainedWords, classTokens, existingWords = []) {
     const dropdown = document.createElement('div');
-    dropdown.className = 'trained-words-dropdown';
+    dropdown.className = 'metadata-suggestions-dropdown';
     
     // Create header
     const header = document.createElement('div');
-    header.className = 'trained-words-header';
+    header.className = 'metadata-suggestions-header';
     
     // No suggestions case
     if ((!trainedWords || trainedWords.length === 0) && !classTokens) {
         header.innerHTML = '<span>No suggestions available</span>';
         dropdown.appendChild(header);
-        dropdown.innerHTML += '<div class="no-trained-words">No trained words or class tokens found in this model. You can manually enter trigger words.</div>';
+        dropdown.innerHTML += '<div class="no-suggestions">No trained words or class tokens found in this model. You can manually enter trigger words.</div>';
         return dropdown;
     }
     
@@ -62,7 +62,7 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
     if (classTokens) {
         // Add class tokens header
         const classTokensHeader = document.createElement('div');
-        classTokensHeader.className = 'trained-words-header';
+        classTokensHeader.className = 'metadata-suggestions-header';
         classTokensHeader.innerHTML = `
             <span>Class Token</span>
             <small>Add to your prompt for best results</small>
@@ -75,11 +75,11 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
         
         // Create a special item for the class token
         const tokenItem = document.createElement('div');
-        tokenItem.className = `trained-word-item class-token-item ${existingWords.includes(classTokens) ? 'already-added' : ''}`;
+        tokenItem.className = `metadata-suggestion-item class-token-item ${existingWords.includes(classTokens) ? 'already-added' : ''}`;
         tokenItem.title = `Class token: ${classTokens}`;
         tokenItem.innerHTML = `
-            <span class="trained-word-text">${classTokens}</span>
-            <div class="trained-word-meta">
+            <span class="metadata-suggestion-text">${classTokens}</span>
+            <div class="metadata-suggestion-meta">
                 <span class="token-badge">Class Token</span>
                 ${existingWords.includes(classTokens) ? 
                     '<span class="added-indicator"><i class="fas fa-check"></i></span>' : ''}
@@ -93,7 +93,7 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
                 addNewTriggerWord(classTokens);
                 
                 // Also populate the input field for potential editing
-                const input = document.querySelector('.new-trigger-word-input');
+                const input = document.querySelector('.metadata-input');
                 if (input) input.value = classTokens;
                 
                 // Focus on the input
@@ -125,18 +125,18 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
         
         // Create tag container for trained words
         const container = document.createElement('div');
-        container.className = 'trained-words-container';
+        container.className = 'metadata-suggestions-container';
         
         // Add each trained word as a tag
         trainedWords.forEach(([word, frequency]) => {
             const isAdded = existingWords.includes(word);
             
             const item = document.createElement('div');
-            item.className = `trained-word-item ${isAdded ? 'already-added' : ''}`;
+            item.className = `metadata-suggestion-item ${isAdded ? 'already-added' : ''}`;
             item.title = word; // Show full word on hover if truncated
             item.innerHTML = `
-                <span class="trained-word-text">${word}</span>
-                <div class="trained-word-meta">
+                <span class="metadata-suggestion-text">${word}</span>
+                <div class="metadata-suggestion-meta">
                     <span class="trained-word-freq">${frequency}</span>
                     ${isAdded ? '<span class="added-indicator"><i class="fas fa-check"></i></span>' : ''}
                 </div>
@@ -148,7 +148,7 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
                     addNewTriggerWord(word);
                     
                     // Also populate the input field for potential editing
-                    const input = document.querySelector('.new-trigger-word-input');
+                    const input = document.querySelector('.metadata-input');
                     if (input) input.value = word;
                     
                     // Focus on the input
@@ -165,7 +165,7 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
         dropdown.appendChild(container);
     } else if (!classTokens) {
         // If we have neither class tokens nor trained words
-        dropdown.innerHTML += '<div class="no-trained-words">No word suggestions found in this model. You can manually enter trigger words.</div>';
+        dropdown.innerHTML += '<div class="no-suggestions">No word suggestions found in this model. You can manually enter trigger words.</div>';
     }
     
     return dropdown;
@@ -182,7 +182,7 @@ export function renderTriggerWords(words, filePath) {
         <div class="info-item full-width trigger-words">
             <div class="trigger-words-header">
                 <label>Trigger Words</label>
-                <button class="edit-trigger-words-btn" data-file-path="${filePath}" title="Edit trigger words">
+                <button class="edit-trigger-words-btn metadata-edit-btn" data-file-path="${filePath}" title="Edit trigger words">
                     <i class="fas fa-pencil-alt"></i>
                 </button>
             </div>
@@ -190,13 +190,13 @@ export function renderTriggerWords(words, filePath) {
                 <span class="no-trigger-words">No trigger word needed</span>
                 <div class="trigger-words-tags" style="display:none;"></div>
             </div>
-            <div class="trigger-words-edit-controls" style="display:none;">
-                <button class="save-trigger-words-btn" title="Save changes">
+            <div class="metadata-edit-controls" style="display:none;">
+                <button class="metadata-save-btn" title="Save changes">
                     <i class="fas fa-save"></i> Save
                 </button>
             </div>
-            <div class="add-trigger-word-form" style="display:none;">
-                <input type="text" class="new-trigger-word-input" placeholder="Type to add or click suggestions below">
+            <div class="metadata-add-form" style="display:none;">
+                <input type="text" class="metadata-input" placeholder="Type to add or click suggestions below">
             </div>
         </div>
     `;
@@ -205,7 +205,7 @@ export function renderTriggerWords(words, filePath) {
         <div class="info-item full-width trigger-words">
             <div class="trigger-words-header">
                 <label>Trigger Words</label>
-                <button class="edit-trigger-words-btn" data-file-path="${filePath}" title="Edit trigger words">
+                <button class="edit-trigger-words-btn metadata-edit-btn" data-file-path="${filePath}" title="Edit trigger words">
                     <i class="fas fa-pencil-alt"></i>
                 </button>
             </div>
@@ -217,20 +217,20 @@ export function renderTriggerWords(words, filePath) {
                             <span class="trigger-word-copy">
                                 <i class="fas fa-copy"></i>
                             </span>
-                            <button class="delete-trigger-word-btn" style="display:none;" onclick="event.stopPropagation();">
+                            <button class="metadata-delete-btn" style="display:none;" onclick="event.stopPropagation();">
                                 <i class="fas fa-times"></i>
                             </button>
                         </div>
                     `).join('')}
                 </div>
             </div>
-            <div class="trigger-words-edit-controls" style="display:none;">
-                <button class="save-trigger-words-btn" title="Save changes">
+            <div class="metadata-edit-controls" style="display:none;">
+                <button class="metadata-save-btn" title="Save changes">
                     <i class="fas fa-save"></i> Save
                 </button>
             </div>
-            <div class="add-trigger-word-form" style="display:none;">
-                <input type="text" class="new-trigger-word-input" placeholder="Type to add or click suggestions below">
+            <div class="metadata-add-form" style="display:none;">
+                <input type="text" class="metadata-input" placeholder="Type to add or click suggestions below">
             </div>
         </div>
     `;
@@ -257,8 +257,8 @@ export function setupTriggerWordsEditMode() {
         
         // Toggle edit mode UI elements
         const triggerWordTags = triggerWordsSection.querySelectorAll('.trigger-word-tag');
-        const editControls = triggerWordsSection.querySelector('.trigger-words-edit-controls');
-        const addForm = triggerWordsSection.querySelector('.add-trigger-word-form');
+        const editControls = triggerWordsSection.querySelector('.metadata-edit-controls');
+        const addForm = triggerWordsSection.querySelector('.metadata-add-form');
         const noTriggerWords = triggerWordsSection.querySelector('.no-trigger-words');
         const tagsContainer = triggerWordsSection.querySelector('.trigger-words-tags');
         
@@ -284,7 +284,7 @@ export function setupTriggerWordsEditMode() {
             triggerWordTags.forEach(tag => {
                 tag.onclick = null;
                 const copyIcon = tag.querySelector('.trigger-word-copy');
-                const deleteBtn = tag.querySelector('.delete-trigger-word-btn');
+                const deleteBtn = tag.querySelector('.metadata-delete-btn');
                 
                 if (copyIcon) copyIcon.style.display = 'none';
                 if (deleteBtn) {
@@ -300,7 +300,7 @@ export function setupTriggerWordsEditMode() {
             // Load trained words and display dropdown when entering edit mode
             // Add loading indicator
             const loadingIndicator = document.createElement('div');
-            loadingIndicator.className = 'trained-words-loading';
+            loadingIndicator.className = 'metadata-loading';
             loadingIndicator.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading suggestions...';
             addForm.appendChild(loadingIndicator);
             
@@ -354,13 +354,14 @@ export function setupTriggerWordsEditMode() {
             }
             
             // Remove dropdown if present
-            const dropdown = document.querySelector('.trained-words-dropdown');
+            const triggerWordsSection = editBtn.closest('.trigger-words');
+            const dropdown = triggerWordsSection.querySelector('.metadata-suggestions-dropdown');
             if (dropdown) dropdown.remove();
         }
     });
     
     // Set up input for adding trigger words
-    const triggerWordInput = document.querySelector('.new-trigger-word-input');
+    const triggerWordInput = document.querySelector('.metadata-input');
     
     if (triggerWordInput) {
         // Add keydown event to input
@@ -374,13 +375,13 @@ export function setupTriggerWordsEditMode() {
     }
     
     // Set up save button
-    const saveBtn = document.querySelector('.save-trigger-words-btn');
+    const saveBtn = document.querySelector('.metadata-save-btn');
     if (saveBtn) {
         saveBtn.addEventListener('click', saveTriggerWords);
     }
     
     // Set up delete buttons
-    document.querySelectorAll('.delete-trigger-word-btn').forEach(btn => {
+    document.querySelectorAll('.metadata-delete-btn').forEach(btn => {
         // Remove any existing listeners to avoid duplication
         btn.removeEventListener('click', deleteTriggerWord);
         btn.addEventListener('click', deleteTriggerWord);
@@ -410,7 +411,7 @@ function resetTriggerWordsUIState(section) {
     triggerWordTags.forEach(tag => {
         const word = tag.dataset.word;
         const copyIcon = tag.querySelector('.trigger-word-copy');
-        const deleteBtn = tag.querySelector('.delete-trigger-word-btn');
+        const deleteBtn = tag.querySelector('.metadata-delete-btn');
         
         // Restore click-to-copy functionality
         tag.onclick = () => copyTriggerWord(word);
@@ -456,7 +457,7 @@ function restoreOriginalTriggerWords(section, originalWords) {
             <span class="trigger-word-copy">
                 <i class="fas fa-copy"></i>
             </span>
-            <button class="delete-trigger-word-btn" style="display:none;" onclick="event.stopPropagation();">
+            <button class="metadata-delete-btn" style="display:none;" onclick="event.stopPropagation();">
                 <i class="fas fa-times"></i>
             </button>
         `;
@@ -525,13 +526,13 @@ function addNewTriggerWord(word) {
         <span class="trigger-word-copy" style="display:none;">
             <i class="fas fa-copy"></i>
         </span>
-        <button class="delete-trigger-word-btn" onclick="event.stopPropagation();">
+        <button class="metadata-delete-btn" onclick="event.stopPropagation();">
             <i class="fas fa-times"></i>
         </button>
     `;
     
     // Add event listener to delete button
-    const deleteBtn = newTag.querySelector('.delete-trigger-word-btn');
+    const deleteBtn = newTag.querySelector('.metadata-delete-btn');
     deleteBtn.addEventListener('click', deleteTriggerWord);
     
     tagsContainer.appendChild(newTag);
@@ -544,7 +545,7 @@ function addNewTriggerWord(word) {
  * Update status of items in the trained words dropdown
  */
 function updateTrainedWordsDropdown() {
-    const dropdown = document.querySelector('.trained-words-dropdown');
+    const dropdown = document.querySelector('.metadata-suggestions-dropdown');
     if (!dropdown) return;
     
     // Get all current trigger words
@@ -552,8 +553,8 @@ function updateTrainedWordsDropdown() {
     const existingWords = Array.from(currentTags).map(tag => tag.dataset.word);
     
     // Update status of each item in dropdown
-    dropdown.querySelectorAll('.trained-word-item').forEach(item => {
-        const wordText = item.querySelector('.trained-word-text').textContent;
+    dropdown.querySelectorAll('.metadata-suggestion-item').forEach(item => {
+        const wordText = item.querySelector('.metadata-suggestion-text').textContent;
         const isAdded = existingWords.includes(wordText);
         
         if (isAdded) {
@@ -562,7 +563,7 @@ function updateTrainedWordsDropdown() {
             // Add indicator if it doesn't exist
             let indicator = item.querySelector('.added-indicator');
             if (!indicator) {
-                const meta = item.querySelector('.trained-word-meta');
+                const meta = item.querySelector('.metadata-suggestion-meta');
                 indicator = document.createElement('span');
                 indicator.className = 'added-indicator';
                 indicator.innerHTML = '<i class="fas fa-check"></i>';
@@ -582,11 +583,11 @@ function updateTrainedWordsDropdown() {
             // Restore click event if not already set
             if (!item.onclick) {
                 item.onclick = () => {
-                    const word = item.querySelector('.trained-word-text').textContent;
+                    const word = item.querySelector('.metadata-suggestion-text').textContent;
                     addNewTriggerWord(word);
                     
                     // Also populate the input field
-                    const input = document.querySelector('.new-trigger-word-input');
+                    const input = document.querySelector('.metadata-input');
                     if (input) input.value = word;
                     
                     // Focus the input
@@ -619,28 +620,6 @@ async function saveTriggerWords() {
         // Exit edit mode without restoring original trigger words
         editBtn.click();
         
-        // Update the LoRA card's dataset
-        const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-        if (loraCard) {
-            try {
-                // Create a proper structure for civitai data
-                let civitaiData = {};
-                
-                // Parse existing data if available
-                if (loraCard.dataset.meta) {
-                    civitaiData = JSON.parse(loraCard.dataset.meta);
-                }
-                
-                // Update trainedWords property
-                civitaiData.trainedWords = words;
-                
-                // Update the meta dataset attribute with the full civitai data
-                loraCard.dataset.meta = JSON.stringify(civitaiData);
-            } catch (e) {
-                console.error('Error updating civitai data:', e);
-            }
-        }
-        
         // If we saved an empty array and there's a no-trigger-words element, show it
         const noTriggerWords = triggerWordsSection.querySelector('.no-trigger-words');
         const tagsContainer = triggerWordsSection.querySelector('.trigger-words-tags');

static/js/components/loraModal/index.js

@@ -3,13 +3,18 @@
  * 
  * 将原始的LoraModal.js拆分成多个功能模块后的主入口文件
  */
-import { showToast, copyToClipboard, getExampleImageFiles } from '../../utils/uiHelpers.js';
+import { showToast } from '../../utils/uiHelpers.js';
 import { modalManager } from '../../managers/ModalManager.js';
-import { renderShowcaseContent, toggleShowcase, setupShowcaseScroll, scrollToTop } from './ShowcaseView.js';
+import { 
+    setupShowcaseScroll, 
+    scrollToTop,
+    loadExampleImages
+} from '../shared/showcase/ShowcaseView.js';
 import { setupTabSwitching, loadModelDescription } from './ModelDescription.js';
 import { renderTriggerWords, setupTriggerWordsEditMode } from './TriggerWords.js';
 import { parsePresets, renderPresetTags } from './PresetTags.js';
-import { loadRecipesForLora } from './RecipeTab.js'; // Add import for recipe tab
+import { loadRecipesForLora } from './RecipeTab.js'; 
+import { setupTagEditMode } from './ModelTags.js'; // Add import for tag editing
 import { 
     setupModelNameEditing, 
     setupBaseModelEditing, 
@@ -17,8 +22,6 @@ import {
 } from './ModelMetadata.js';
 import { saveModelMetadata } from '../../api/loraApi.js';
 import { renderCompactTags, setupTagTooltip, formatFileSize } from './utils.js';
-import { updateLoraCard } from '../../utils/cardUpdater.js';
-import { state } from '../../state/index.js';
 
 /**
  * 显示LoRA模型弹窗
@@ -52,7 +55,7 @@ export function showLoraModal(lora) {
                     <span class="creator-username">${lora.civitai.creator.username}</span>
                 </div>` : ''}
                 
-                ${renderCompactTags(lora.tags || [])}
+                ${renderCompactTags(lora.tags || [], lora.file_path)}
             </header>
 
             <div class="modal-body">
@@ -116,7 +119,7 @@ export function showLoraModal(lora) {
                             <label>Additional Notes</label>
                             <div class="editable-field">
                                 <div class="notes-content" contenteditable="true" spellcheck="false">${lora.notes || 'Add your notes here...'}</div>
-                                <button class="save-btn" onclick="saveNotes('${lora.file_path}')">
+                                <button class="save-btn" data-action="save-notes">
                                     <i class="fas fa-save"></i>
                                 </button>
                             </div>
@@ -128,7 +131,7 @@ export function showLoraModal(lora) {
                     </div>
                 </div>
 
-                <div class="showcase-section" data-lora-id="${lora.civitai?.modelId || ''}">
+                <div class="showcase-section" data-model-hash="${lora.sha256 || ''}" data-filepath="${lora.file_path}">
                     <div class="showcase-tabs">
                         <button class="tab-btn active" data-tab="showcase">Examples</button>
                         <button class="tab-btn" data-tab="description">Model Description</button>
@@ -160,7 +163,7 @@ export function showLoraModal(lora) {
                         </div>
                     </div>
                     
-                    <button class="back-to-top" onclick="scrollToTop(this)">
+                    <button class="back-to-top" data-action="scroll-to-top">
                         <i class="fas fa-arrow-up"></i>
                     </button>
                 </div>
@@ -170,13 +173,15 @@ export function showLoraModal(lora) {
     
     modalManager.showModal('loraModal', content);
     setupEditableFields(lora.file_path);
-    setupShowcaseScroll();
+    setupShowcaseScroll('loraModal');
     setupTabSwitching();
     setupTagTooltip();
     setupTriggerWordsEditMode();
     setupModelNameEditing(lora.file_path);
     setupBaseModelEditing(lora.file_path);
     setupFileNameEditing(lora.file_path);
+    setupTagEditMode(); // Initialize tag editing functionality
+    setupEventHandlers(lora.file_path);
     
     // If we have a model ID but no description, fetch it
     if (lora.civitai?.modelId && !lora.modelDescription) {
@@ -186,90 +191,49 @@ export function showLoraModal(lora) {
     // Load recipes for this Lora
     loadRecipesForLora(lora.model_name, lora.sha256);
     
-    // Load example images asynchronously
-    loadExampleImages(lora.civitai?.images, lora.sha256, lora.file_path);
+    // Load example images asynchronously - merge regular and custom images
+    const regularImages = lora.civitai?.images || [];
+    const customImages = lora.civitai?.customImages || [];
+    // Combine images - regular images first, then custom images
+    const allImages = [...regularImages, ...customImages];
+    loadExampleImages(allImages, lora.sha256);
 }
 
 /**
- * Load example images asynchronously
- * @param {Array} images - Array of image objects
- * @param {string} modelHash - Model hash for fetching local files
- * @param {string} filePath - File path for fetching local files
+ * Sets up event handlers using event delegation
+ * @param {string} filePath - Path to the model file
  */
-async function loadExampleImages(images, modelHash, filePath) {
-    try {
-        const showcaseTab = document.getElementById('showcase-tab');
-        if (!showcaseTab) return;
+function setupEventHandlers(filePath) {
+    const modalElement = document.getElementById('loraModal');
+    
+    // Use event delegation to handle clicks
+    modalElement.addEventListener('click', async (event) => {
+        const target = event.target.closest('[data-action]');
+        if (!target) return;
         
-        // First fetch local example files
-        let localFiles = [];
-
-        try {
-            // Choose endpoint based on centralized examples setting
-            const useCentralized = state.global.settings.useCentralizedExamples !== false;
-            const endpoint = useCentralized ? '/api/example-image-files' : '/api/model-example-files';
-            
-            // Use different params based on endpoint
-            const params = useCentralized ? 
-                `model_hash=${modelHash}` :
-                `file_path=${encodeURIComponent(filePath)}`;
-            
-            const response = await fetch(`${endpoint}?${params}`);
-            const result = await response.json();
-            
-            if (result.success) {
-                localFiles = result.files;
-            }
-        } catch (error) {
-            console.error("Failed to get example files:", error);
-        }
+        const action = target.dataset.action;
         
-        // Then render with both remote images and local files
-        showcaseTab.innerHTML = renderShowcaseContent(images, localFiles);
-        
-        // Re-initialize the showcase event listeners
-        const carousel = showcaseTab.querySelector('.carousel');
-        if (carousel) {
-            // Only initialize if we actually have examples and they're expanded
-            if (!carousel.classList.contains('collapsed')) {
-                initLazyLoading(carousel);
-                initNsfwBlurHandlers(carousel);
-                initMetadataPanelHandlers(carousel);
-            }
+        switch (action) {
+            case 'close-modal':
+                modalManager.closeModal('loraModal');
+                break;
+                
+            case 'save-notes':
+                await saveNotes(filePath);
+                break;
+                
+            case 'scroll-to-top':
+                scrollToTop(target);
+                break;
         }
-    } catch (error) {
-        console.error('Error loading example images:', error);
-        const showcaseTab = document.getElementById('showcase-tab');
-        if (showcaseTab) {
-            showcaseTab.innerHTML = `
-                <div class="error-message">
-                    <i class="fas fa-exclamation-circle"></i>
-                    Error loading example images
-                </div>
-            `;
-        }
-    }
+    });
 }
 
-// Copy file name function
-window.copyFileName = async function(fileName) {
-    try {
-        await copyToClipboard(fileName, 'File name copied');
-    } catch (err) {
-        console.error('Copy failed:', err);
-        showToast('Copy failed', 'error');
-    }
-};
-
-// Add save note function
-window.saveNotes = async function(filePath) {
+async function saveNotes(filePath) {
     const content = document.querySelector('.notes-content').textContent;
     try {
         await saveModelMetadata(filePath, { notes: content });
 
-        // Update the corresponding lora card's dataset
-        updateLoraCard(filePath, { notes: content });
-
         showToast('Notes saved successfully', 'success');
     } catch (error) {
         showToast('Failed to save notes', 'error');
@@ -334,9 +298,6 @@ function setupEditableFields(filePath) {
             usage_tips: newPresetsJson
         });
 
-        // Update the card with the new usage tips
-        updateLoraCard(filePath, { usage_tips: newPresetsJson });
-        
         presetTags.innerHTML = renderPresetTags(currentPresets);
         
         presetSelector.value = '';
@@ -366,7 +327,4 @@ function setupEditableFields(filePath) {
             addPresetBtn.click();
         }
     });
-}
-
-// Export functions for global access
-export { toggleShowcase, scrollToTop };
+}

static/js/components/loraModal/utils.js

@@ -26,27 +26,35 @@ export function formatFileSize(bytes) {
 /**
  * 渲染紧凑标签
  * @param {Array} tags - 标签数组
+ * @param {string} filePath - 文件路径，用于编辑按钮
  * @returns {string} HTML内容
  */
-export function renderCompactTags(tags) {
-    if (!tags || tags.length === 0) return '';
+export function renderCompactTags(tags, filePath = '') {
+    // Remove the early return and always render the container
+    const tagsList = tags || [];
     
     // Display up to 5 tags, with a tooltip indicator if there are more
-    const visibleTags = tags.slice(0, 5);
-    const remainingCount = Math.max(0, tags.length - 5);
+    const visibleTags = tagsList.slice(0, 5);
+    const remainingCount = Math.max(0, tagsList.length - 5);
     
     return `
         <div class="model-tags-container">
-            <div class="model-tags-compact">
-                ${visibleTags.map(tag => `<span class="model-tag-compact">${tag}</span>`).join('')}
-                ${remainingCount > 0 ? 
-                    `<span class="model-tag-more" data-count="${remainingCount}">+${remainingCount}</span>` : 
-                    ''}
+            <div class="model-tags-header">
+                <div class="model-tags-compact">
+                    ${visibleTags.map(tag => `<span class="model-tag-compact">${tag}</span>`).join('')}
+                    ${remainingCount > 0 ? 
+                        `<span class="model-tag-more" data-count="${remainingCount}">+${remainingCount}</span>` : 
+                        ''}
+                    ${tagsList.length === 0 ? `<span class="model-tag-empty">No tags</span>` : ''}
+                </div>
+                <button class="edit-tags-btn" data-file-path="${filePath}" title="Edit tags">
+                    <i class="fas fa-pencil-alt"></i>
+                </button>
             </div>
-            ${tags.length > 0 ? 
+            ${tagsList.length > 0 ? 
                 `<div class="model-tags-tooltip">
                     <div class="tooltip-content">
-                        ${tags.map(tag => `<span class="tooltip-tag">${tag}</span>`).join('')}
+                        ${tagsList.map(tag => `<span class="tooltip-tag">${tag}</span>`).join('')}
                     </div>
                 </div>` : 
                 ''}

static/js/components/shared/showcase/MediaRenderers.js

@@ -0,0 +1,94 @@
+/**
+ * MediaRenderers.js
+ * HTML generators for media items (images/videos) in the showcase
+ */
+
+/**
+ * Generate video wrapper HTML
+ * @param {Object} media - Media metadata
+ * @param {number} heightPercent - Height percentage for container
+ * @param {boolean} shouldBlur - Whether content should be blurred
+ * @param {string} nsfwText - NSFW warning text
+ * @param {string} metadataPanel - Metadata panel HTML
+ * @param {string} localUrl - Local file URL
+ * @param {string} remoteUrl - Remote file URL
+ * @param {string} mediaControlsHtml - HTML for media control buttons
+ * @returns {string} HTML content
+ */
+export function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl, mediaControlsHtml = '') {
+    const nsfwLevel = media.nsfwLevel !== undefined ? media.nsfwLevel : 0;
+    
+    return `
+        <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%" data-short-id="${media.id || ''}" data-nsfw-level="${nsfwLevel}">
+            ${shouldBlur ? `
+                <button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
+                    <i class="fas fa-eye"></i>
+                </button>
+            ` : ''}
+            ${mediaControlsHtml}
+            <video controls autoplay muted loop crossorigin="anonymous" 
+                referrerpolicy="no-referrer" 
+                data-local-src="${localUrl || ''}"
+                data-remote-src="${remoteUrl}"
+                data-nsfw-level="${nsfwLevel}"
+                class="lazy ${shouldBlur ? 'blurred' : ''}">
+                <source data-local-src="${localUrl || ''}" data-remote-src="${remoteUrl}" type="video/mp4">
+                Your browser does not support video playback
+            </video>
+            ${shouldBlur ? `
+                <div class="nsfw-overlay">
+                    <div class="nsfw-warning">
+                        <p>${nsfwText}</p>
+                        <button class="show-content-btn">Show</button>
+                    </div>
+                </div>
+            ` : ''}
+            ${metadataPanel}
+        </div>
+    `;
+}
+
+/**
+ * Generate image wrapper HTML
+ * @param {Object} media - Media metadata
+ * @param {number} heightPercent - Height percentage for container
+ * @param {boolean} shouldBlur - Whether content should be blurred
+ * @param {string} nsfwText - NSFW warning text
+ * @param {string} metadataPanel - Metadata panel HTML
+ * @param {string} localUrl - Local file URL
+ * @param {string} remoteUrl - Remote file URL
+ * @param {string} mediaControlsHtml - HTML for media control buttons
+ * @returns {string} HTML content
+ */
+export function generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl, mediaControlsHtml = '') {
+    const nsfwLevel = media.nsfwLevel !== undefined ? media.nsfwLevel : 0;
+    
+    return `
+        <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%" data-short-id="${media.id || ''}" data-nsfw-level="${nsfwLevel}">
+            ${shouldBlur ? `
+                <button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
+                    <i class="fas fa-eye"></i>
+                </button>
+            ` : ''}
+            ${mediaControlsHtml}
+            <img data-local-src="${localUrl || ''}" 
+                data-remote-src="${remoteUrl}"
+                data-nsfw-level="${nsfwLevel}"
+                alt="Preview" 
+                crossorigin="anonymous" 
+                referrerpolicy="no-referrer"
+                width="${media.width}"
+                height="${media.height}"
+                class="lazy ${shouldBlur ? 'blurred' : ''}"> 
+            ${shouldBlur ? `
+                <div class="nsfw-overlay">
+                    <div class="nsfw-warning">
+                        <p>${nsfwText}</p>
+                        <button class="show-content-btn">Show</button>
+                    </div>
+                </div>
+            ` : ''}
+            ${metadataPanel}
+        </div>
+    `;
+}

static/js/components/shared/showcase/MediaUtils.js

@@ -0,0 +1,592 @@
+/**
+ * MediaUtils.js
+ * Media-specific utility functions for showcase components
+ * (Moved from uiHelpers.js to better organize code)
+ */
+import { showToast, copyToClipboard } from '../../../utils/uiHelpers.js';
+import { state } from '../../../state/index.js';
+import { uploadPreview } from '../../../api/baseModelApi.js';
+
+/**
+ * Try to load local image first, fall back to remote if local fails
+ * @param {HTMLImageElement} imgElement - The image element to update
+ * @param {Object} urls - Object with local URLs {primary, fallback} and remote URL
+ */
+export function tryLocalImageOrFallbackToRemote(imgElement, urls) {
+    const { primary: localUrl, fallback: fallbackUrl } = urls.local || {};
+    const remoteUrl = urls.remote;
+    
+    // If no local options, use remote directly
+    if (!localUrl) {
+        imgElement.src = remoteUrl;
+        return;
+    }
+    
+    // Try primary local URL
+    const testImg = new Image();
+    testImg.onload = () => {
+        // Primary local image loaded successfully
+        imgElement.src = localUrl;
+    };
+    testImg.onerror = () => {
+        // Try fallback URL if available
+        if (fallbackUrl) {
+            const fallbackImg = new Image();
+            fallbackImg.onload = () => {
+                imgElement.src = fallbackUrl;
+            };
+            fallbackImg.onerror = () => {
+                // Both local options failed, use remote
+                imgElement.src = remoteUrl;
+            };
+            fallbackImg.src = fallbackUrl;
+        } else {
+            // No fallback, use remote
+            imgElement.src = remoteUrl;
+        }
+    };
+    testImg.src = localUrl;
+}
+
+/**
+ * Try to load local video first, fall back to remote if local fails
+ * @param {HTMLVideoElement} videoElement - The video element to update
+ * @param {Object} urls - Object with local URLs {primary} and remote URL
+ */
+export function tryLocalVideoOrFallbackToRemote(videoElement, urls) {
+    const { primary: localUrl } = urls.local || {};
+    const remoteUrl = urls.remote;
+    
+    // Only try local if we have a local path
+    if (localUrl) {
+        // Try to fetch local file headers to see if it exists
+        fetch(localUrl, { method: 'HEAD' })
+            .then(response => {
+                if (response.ok) {
+                    // Local video exists, use it
+                    videoElement.src = localUrl;
+                    const source = videoElement.querySelector('source');
+                    if (source) source.src = localUrl;
+                } else {
+                    // Local video doesn't exist, use remote
+                    videoElement.src = remoteUrl;
+                    const source = videoElement.querySelector('source');
+                    if (source) source.src = remoteUrl;
+                }
+                videoElement.load();
+            })
+            .catch(() => {
+                // Error fetching, use remote
+                videoElement.src = remoteUrl;
+                const source = videoElement.querySelector('source');
+                if (source) source.src = remoteUrl;
+                videoElement.load();
+            });
+    } else {
+        // No local path, use remote directly
+        videoElement.src = remoteUrl;
+        const source = videoElement.querySelector('source');
+        if (source) source.src = remoteUrl;
+        videoElement.load();
+    }
+}
+
+/**
+ * Initialize lazy loading for images and videos in a container
+ * @param {HTMLElement} container - The container with lazy-loadable elements
+ */
+export function initLazyLoading(container) {
+    const lazyElements = container.querySelectorAll('.lazy');
+    
+    const lazyLoad = (element) => {
+        // Get URLs from data attributes
+        const localUrls = {
+            primary: element.dataset.localSrc || null,
+            fallback: element.dataset.localFallbackSrc || null
+        };
+        const remoteUrl = element.dataset.remoteSrc;
+        
+        const urls = {
+            local: localUrls,
+            remote: remoteUrl
+        };
+        
+        // Check if element is a video or image
+        if (element.tagName.toLowerCase() === 'video') {
+            tryLocalVideoOrFallbackToRemote(element, urls);
+        } else {
+            tryLocalImageOrFallbackToRemote(element, urls);
+        }
+        
+        element.classList.remove('lazy');
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                lazyLoad(entry.target);
+                observer.unobserve(entry.target);
+            }
+        });
+    });
+
+    lazyElements.forEach(element => observer.observe(element));
+}
+
+/**
+ * Get the actual rendered rectangle of a media element with object-fit: contain
+ * @param {HTMLElement} mediaElement - The img or video element
+ * @param {number} containerWidth - Width of the container
+ * @param {number} containerHeight - Height of the container
+ * @returns {Object} - Rect with left, top, right, bottom coordinates
+ */
+export function getRenderedMediaRect(mediaElement, containerWidth, containerHeight) {
+    // Get natural dimensions of the media
+    const naturalWidth = mediaElement.naturalWidth || mediaElement.videoWidth || mediaElement.clientWidth;
+    const naturalHeight = mediaElement.naturalHeight || mediaElement.videoHeight || mediaElement.clientHeight;
+    
+    if (!naturalWidth || !naturalHeight) {
+        // Fallback if dimensions cannot be determined
+        return { left: 0, top: 0, right: containerWidth, bottom: containerHeight };
+    }
+    
+    // Calculate aspect ratios
+    const containerRatio = containerWidth / containerHeight;
+    const mediaRatio = naturalWidth / naturalHeight;
+    
+    let renderedWidth, renderedHeight, left = 0, top = 0;
+    
+    // Apply object-fit: contain logic
+    if (containerRatio > mediaRatio) {
+        // Container is wider than media - will have empty space on sides
+        renderedHeight = containerHeight;
+        renderedWidth = renderedHeight * mediaRatio;
+        left = (containerWidth - renderedWidth) / 2;
+    } else {
+        // Container is taller than media - will have empty space top/bottom
+        renderedWidth = containerWidth;
+        renderedHeight = renderedWidth / mediaRatio;
+        top = (containerHeight - renderedHeight) / 2;
+    }
+    
+    return {
+        left,
+        top,
+        right: left + renderedWidth,
+        bottom: top + renderedHeight
+    };
+}
+
+/**
+ * Initialize metadata panel interaction handlers
+ * @param {HTMLElement} container - Container element with media wrappers
+ */
+export function initMetadataPanelHandlers(container) {
+    const mediaWrappers = container.querySelectorAll('.media-wrapper');
+    
+    mediaWrappers.forEach(wrapper => {
+        // Get the metadata panel and media element (img or video)
+        const metadataPanel = wrapper.querySelector('.image-metadata-panel');
+        const mediaControls = wrapper.querySelector('.media-controls');
+        const mediaElement = wrapper.querySelector('img, video');
+        
+        if (!mediaElement) return;
+        
+        let isOverMetadataPanel = false;
+        
+        // Add event listeners to the wrapper for mouse tracking
+        wrapper.addEventListener('mousemove', (e) => {
+            // Get mouse position relative to wrapper
+            const rect = wrapper.getBoundingClientRect();
+            const mouseX = e.clientX - rect.left;
+            const mouseY = e.clientY - rect.top;
+            
+            // Get the actual displayed dimensions of the media element
+            const mediaRect = getRenderedMediaRect(mediaElement, rect.width, rect.height);
+            
+            // Check if mouse is over the actual media content
+            const isOverMedia = (
+                mouseX >= mediaRect.left && 
+                mouseX <= mediaRect.right && 
+                mouseY >= mediaRect.top && 
+                mouseY <= mediaRect.bottom
+            );
+            
+            // Show metadata panel and controls when over media content or metadata panel itself
+            if (isOverMedia || isOverMetadataPanel) {
+                if (metadataPanel) metadataPanel.classList.add('visible');
+                if (mediaControls) mediaControls.classList.add('visible');
+            } else {
+                if (metadataPanel) metadataPanel.classList.remove('visible');
+                if (mediaControls) mediaControls.classList.remove('visible');
+            }
+        });
+        
+        wrapper.addEventListener('mouseleave', () => {
+            if (!isOverMetadataPanel) {
+                if (metadataPanel) metadataPanel.classList.remove('visible');
+                if (mediaControls) mediaControls.classList.remove('visible');
+            }
+        });
+        
+        // Add mouse enter/leave events for the metadata panel itself
+        if (metadataPanel) {
+            metadataPanel.addEventListener('mouseenter', () => {
+                isOverMetadataPanel = true;
+                metadataPanel.classList.add('visible');
+                if (mediaControls) mediaControls.classList.add('visible');
+            });
+            
+            metadataPanel.addEventListener('mouseleave', () => {
+                isOverMetadataPanel = false;
+                // Only hide if mouse is not over the media
+                const rect = wrapper.getBoundingClientRect();
+                const mediaRect = getRenderedMediaRect(mediaElement, rect.width, rect.height);
+                const mouseX = event.clientX - rect.left;
+                const mouseY = event.clientY - rect.top;
+                
+                const isOverMedia = (
+                    mouseX >= mediaRect.left && 
+                    mouseX <= mediaRect.right && 
+                    mouseY >= mediaRect.top && 
+                    mouseY <= mediaRect.bottom
+                );
+                
+                if (!isOverMedia) {
+                    metadataPanel.classList.remove('visible');
+                    if (mediaControls) mediaControls.classList.remove('visible');
+                }
+            });
+            
+            // Prevent events from bubbling
+            metadataPanel.addEventListener('click', (e) => {
+                e.stopPropagation();
+            });
+            
+            // Handle copy prompt buttons
+            const copyBtns = metadataPanel.querySelectorAll('.copy-prompt-btn');
+            copyBtns.forEach(copyBtn => {
+                const promptIndex = copyBtn.dataset.promptIndex;
+                const promptElement = wrapper.querySelector(`#prompt-${promptIndex}`);
+                
+                copyBtn.addEventListener('click', async (e) => {
+                    e.stopPropagation();
+                    
+                    if (!promptElement) return;
+                    
+                    try {
+                        await copyToClipboard(promptElement.textContent, 'Prompt copied to clipboard');
+                    } catch (err) {
+                        console.error('Copy failed:', err);
+                        showToast('Copy failed', 'error');
+                    }
+                });
+            });
+            
+            // Prevent panel scroll from causing modal scroll
+            metadataPanel.addEventListener('wheel', (e) => {
+                const isAtTop = metadataPanel.scrollTop === 0;
+                const isAtBottom = metadataPanel.scrollHeight - metadataPanel.scrollTop === metadataPanel.clientHeight;
+                
+                // Only prevent default if scrolling would cause the panel to scroll
+                if ((e.deltaY < 0 && !isAtTop) || (e.deltaY > 0 && !isAtBottom)) {
+                    e.stopPropagation();
+                }
+            }, { passive: true });
+        }
+    });
+}
+
+/**
+ * Initialize NSFW content blur toggle handlers
+ * @param {HTMLElement} container - Container element with media wrappers
+ */
+export function initNsfwBlurHandlers(container) {
+    // Handle toggle blur buttons
+    const toggleButtons = container.querySelectorAll('.toggle-blur-btn');
+    toggleButtons.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const wrapper = btn.closest('.media-wrapper');
+            const media = wrapper.querySelector('img, video');
+            const isBlurred = media.classList.toggle('blurred');
+            const icon = btn.querySelector('i');
+            
+            // Update the icon based on blur state
+            if (isBlurred) {
+                icon.className = 'fas fa-eye';
+            } else {
+                icon.className = 'fas fa-eye-slash';
+            }
+            
+            // Toggle the overlay visibility
+            const overlay = wrapper.querySelector('.nsfw-overlay');
+            if (overlay) {
+                overlay.style.display = isBlurred ? 'flex' : 'none';
+            }
+        });
+    });
+    
+    // Handle "Show" buttons in overlays
+    const showButtons = container.querySelectorAll('.show-content-btn');
+    showButtons.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const wrapper = btn.closest('.media-wrapper');
+            const media = wrapper.querySelector('img, video');
+            media.classList.remove('blurred');
+            
+            // Update the toggle button icon
+            const toggleBtn = wrapper.querySelector('.toggle-blur-btn');
+            if (toggleBtn) {
+                toggleBtn.querySelector('i').className = 'fas fa-eye-slash';
+            }
+            
+            // Hide the overlay
+            const overlay = wrapper.querySelector('.nsfw-overlay');
+            if (overlay) {
+                overlay.style.display = 'none';
+            }
+        });
+    });
+}
+
+/**
+ * Initialize media control buttons event handlers
+ * @param {HTMLElement} container - Container with media wrappers
+ */
+export function initMediaControlHandlers(container) {
+    // Find all delete buttons in the container
+    const deleteButtons = container.querySelectorAll('.example-delete-btn');
+    
+    deleteButtons.forEach(btn => {
+        // Set initial state
+        btn.dataset.state = 'initial';
+        
+        btn.addEventListener('click', async function(e) {
+            e.stopPropagation();
+            
+            // Explicitly check for disabled state
+            if (this.classList.contains('disabled')) {
+                return; // Don't do anything if button is disabled
+            }
+            
+            const shortId = this.dataset.shortId;
+            const btnState = this.dataset.state;
+            
+            if (!shortId) return;
+            
+            // Handle two-step confirmation
+            if (btnState === 'initial') {
+                // First click: show confirmation state
+                this.dataset.state = 'confirm';
+                this.classList.add('confirm');
+                this.title = 'Click again to confirm deletion';
+                
+                // Auto-reset after 3 seconds
+                setTimeout(() => {
+                    if (this.dataset.state === 'confirm') {
+                        this.dataset.state = 'initial';
+                        this.classList.remove('confirm');
+                        this.title = 'Delete this example';
+                    }
+                }, 3000);
+                
+                return;
+            }
+            
+            // Second click within 3 seconds: proceed with deletion
+            if (btnState === 'confirm') {
+                this.disabled = true;
+                this.classList.remove('confirm');
+                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+                
+                // Get model hash from URL or data attribute
+                const mediaWrapper = this.closest('.media-wrapper');
+                const modelHashAttr = document.querySelector('.showcase-section')?.dataset;
+                const modelHash = modelHashAttr?.modelHash;
+                
+                try {
+                    // Call the API to delete the custom example
+                    const response = await fetch('/api/delete-example-image', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            model_hash: modelHash,
+                            short_id: shortId
+                        })
+                    });
+                    
+                    const result = await response.json();
+                    
+                    if (result.success) {
+                        // Success: remove the media wrapper from the DOM
+                        mediaWrapper.style.opacity = '0';
+                        mediaWrapper.style.height = '0';
+                        mediaWrapper.style.transition = 'opacity 0.3s ease, height 0.3s ease 0.3s';
+                        
+                        setTimeout(() => {
+                            mediaWrapper.remove();
+                        }, 600);
+                        
+                        // Show success toast
+                        showToast('Example image deleted', 'success');
+
+                        // Create an update object with only the necessary properties
+                        const updateData = {
+                            civitai: {
+                                customImages: result.custom_images || []
+                            }
+                        };
+                        
+                        // Update the item in the virtual scroller
+                        state.virtualScroller.updateSingleItem(result.model_file_path, updateData);
+                    } else {
+                        // Show error message
+                        showToast(result.error || 'Failed to delete example image', 'error');
+                        
+                        // Reset button state
+                        this.disabled = false;
+                        this.dataset.state = 'initial';
+                        this.classList.remove('confirm');
+                        this.innerHTML = '<i class="fas fa-trash-alt"></i>';
+                        this.title = 'Delete this example';
+                    }
+                } catch (error) {
+                    console.error('Error deleting example image:', error);
+                    showToast('Failed to delete example image', 'error');
+                    
+                    // Reset button state
+                    this.disabled = false;
+                    this.dataset.state = 'initial';
+                    this.classList.remove('confirm');
+                    this.innerHTML = '<i class="fas fa-trash-alt"></i>';
+                    this.title = 'Delete this example';
+                }
+            }
+        });
+    });
+    
+    // Initialize set preview buttons
+    initSetPreviewHandlers(container);
+    
+    // Media control visibility is now handled in initMetadataPanelHandlers
+    // Any click handlers or other functionality can still be added here
+}
+
+/**
+ * Initialize set preview button handlers
+ * @param {HTMLElement} container - Container with media wrappers
+ */
+function initSetPreviewHandlers(container) {
+    const previewButtons = container.querySelectorAll('.set-preview-btn');
+    const modelType = state.currentPageType == 'loras' ? 'lora' : 'checkpoint';
+    
+    previewButtons.forEach(btn => {
+        btn.addEventListener('click', async function(e) {
+            e.stopPropagation();
+            
+            // Show loading state
+            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+            this.disabled = true;
+            
+            try {
+                // Get the model file path from showcase section data attribute
+                const showcaseSection = document.querySelector('.showcase-section');
+                const modelHash = showcaseSection?.dataset.modelHash;
+                const modelFilePath = showcaseSection?.dataset.filepath;
+                
+                if (!modelFilePath) {
+                    throw new Error('Could not determine model file path');
+                }
+                
+                // Get the media wrapper and media element
+                const mediaWrapper = this.closest('.media-wrapper');
+                const mediaElement = mediaWrapper.querySelector('img, video');
+                
+                if (!mediaElement) {
+                    throw new Error('Media element not found');
+                }
+                
+                // Get NSFW level from the wrapper or media element
+                const nsfwLevel = parseInt(mediaWrapper.dataset.nsfwLevel || mediaElement.dataset.nsfwLevel || '0', 10);
+                
+                // Get local file path if available
+                const useLocalFile = mediaElement.dataset.localSrc && !mediaElement.dataset.localSrc.includes('undefined');
+                
+                if (useLocalFile) {
+                    // We have a local file, use it directly
+                    const response = await fetch(mediaElement.dataset.localSrc);
+                    const blob = await response.blob();
+                    const file = new File([blob], 'preview.jpg', { type: blob.type });
+                    
+                    // Use the existing baseModelApi uploadPreview method with nsfw level
+                    await uploadPreview(modelFilePath, file, modelType, nsfwLevel);
+                } else {
+                    // We need to download the remote file first
+                    const response = await fetch(mediaElement.src);
+                    const blob = await response.blob();
+                    const file = new File([blob], 'preview.jpg', { type: blob.type });
+                    
+                    // Use the existing baseModelApi uploadPreview method with nsfw level
+                    await uploadPreview(modelFilePath, file, modelType, nsfwLevel);
+                }
+            } catch (error) {
+                console.error('Error setting preview:', error);
+                showToast('Failed to set preview image', 'error');
+            } finally {
+                // Restore button state
+                this.innerHTML = '<i class="fas fa-image"></i>';
+                this.disabled = false;
+            }
+        });
+    });
+}
+
+/**
+ * Position media controls within the actual rendered media rectangle
+ * @param {HTMLElement} mediaWrapper - The wrapper containing the media and controls
+ */
+export function positionMediaControlsInMediaRect(mediaWrapper) {
+    const mediaElement = mediaWrapper.querySelector('img, video');
+    const controlsElement = mediaWrapper.querySelector('.media-controls');
+    
+    if (!mediaElement || !controlsElement) return;
+    
+    // Get wrapper dimensions
+    const wrapperRect = mediaWrapper.getBoundingClientRect();
+    
+    // Calculate the actual rendered media rectangle
+    const mediaRect = getRenderedMediaRect(
+        mediaElement, 
+        wrapperRect.width, 
+        wrapperRect.height
+    );
+    
+    // Calculate the position for controls - place them inside the actual media area
+    const padding = 8; // Padding from the edge of the media
+    
+    // Position at top-right inside the actual media rectangle
+    controlsElement.style.top = `${mediaRect.top + padding}px`;
+    controlsElement.style.right = `${wrapperRect.width - mediaRect.right + padding}px`;
+    
+    // Also position any toggle blur buttons in the same way but on the left
+    const toggleBlurBtn = mediaWrapper.querySelector('.toggle-blur-btn');
+    if (toggleBlurBtn) {
+        toggleBlurBtn.style.top = `${mediaRect.top + padding}px`;
+        toggleBlurBtn.style.left = `${mediaRect.left + padding}px`;
+    }
+}
+
+/**
+ * Position all media controls in a container
+ * @param {HTMLElement} container - Container with media wrappers
+ */
+export function positionAllMediaControls(container) {
+    const mediaWrappers = container.querySelectorAll('.media-wrapper');
+    mediaWrappers.forEach(wrapper => {
+        positionMediaControlsInMediaRect(wrapper);
+    });
+}

static/js/components/shared/showcase/MetadataPanel.js

@@ -0,0 +1,83 @@
+/**
+ * MetadataPanel.js
+ * Generates metadata panels for showcase media items
+ */
+
+/**
+ * Generate metadata panel HTML
+ * @param {boolean} hasParams - Whether there are generation parameters
+ * @param {boolean} hasPrompts - Whether there are prompts
+ * @param {string} prompt - Prompt text
+ * @param {string} negativePrompt - Negative prompt text
+ * @param {string} size - Image size
+ * @param {string} seed - Generation seed
+ * @param {string} model - Model used
+ * @param {string} steps - Steps used
+ * @param {string} sampler - Sampler used
+ * @param {string} cfgScale - CFG scale
+ * @param {string} clipSkip - Clip skip value
+ * @returns {string} HTML content
+ */
+export function generateMetadataPanel(hasParams, hasPrompts, prompt, negativePrompt, size, seed, model, steps, sampler, cfgScale, clipSkip) {
+    // Create unique IDs for prompt copying
+    const promptIndex = Math.random().toString(36).substring(2, 15);
+    const negPromptIndex = Math.random().toString(36).substring(2, 15);
+    
+    let content = '<div class="image-metadata-panel"><div class="metadata-content">';
+    
+    if (hasParams) {
+        content += `
+            <div class="params-tags">
+                ${size ? `<div class="param-tag"><span class="param-name">Size:</span><span class="param-value">${size}</span></div>` : ''}
+                ${seed ? `<div class="param-tag"><span class="param-name">Seed:</span><span class="param-value">${seed}</span></div>` : ''}
+                ${model ? `<div class="param-tag"><span class="param-name">Model:</span><span class="param-value">${model}</span></div>` : ''}
+                ${steps ? `<div class="param-tag"><span class="param-name">Steps:</span><span class="param-value">${steps}</span></div>` : ''}
+                ${sampler ? `<div class="param-tag"><span class="param-name">Sampler:</span><span class="param-value">${sampler}</span></div>` : ''}
+                ${cfgScale ? `<div class="param-tag"><span class="param-name">CFG:</span><span class="param-value">${cfgScale}</span></div>` : ''}
+                ${clipSkip ? `<div class="param-tag"><span class="param-name">Clip Skip:</span><span class="param-value">${clipSkip}</span></div>` : ''}
+            </div>
+        `;
+    }
+    
+    if (!hasParams && !hasPrompts) {
+        content += `
+            <div class="no-metadata-message">
+                <i class="fas fa-info-circle"></i>
+                <span>No generation parameters available</span>
+            </div>
+        `;
+    }
+    
+    if (prompt) {
+        content += `
+            <div class="metadata-row prompt-row">
+                <span class="metadata-label">Prompt:</span>
+                <div class="metadata-prompt-wrapper">
+                    <div class="metadata-prompt">${prompt}</div>
+                    <button class="copy-prompt-btn" data-prompt-index="${promptIndex}">
+                        <i class="fas fa-copy"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="hidden-prompt" id="prompt-${promptIndex}" style="display:none;">${prompt}</div>
+        `;
+    }
+    
+    if (negativePrompt) {
+        content += `
+            <div class="metadata-row prompt-row">
+                <span class="metadata-label">Negative Prompt:</span>
+                <div class="metadata-prompt-wrapper">
+                    <div class="metadata-prompt">${negativePrompt}</div>
+                    <button class="copy-prompt-btn" data-prompt-index="${negPromptIndex}">
+                        <i class="fas fa-copy"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="hidden-prompt" id="prompt-${negPromptIndex}" style="display:none;">${negativePrompt}</div>
+        `;
+    }
+    
+    content += '</div></div>';
+    return content;
+}

static/js/components/shared/showcase/ShowcaseView.js

@@ -0,0 +1,586 @@
+/**
+ * ShowcaseView.js
+ * Shared showcase component for displaying examples in model modals (Lora/Checkpoint)
+ */
+import { showToast } from '../../../utils/uiHelpers.js';
+import { state } from '../../../state/index.js';
+import { NSFW_LEVELS } from '../../../utils/constants.js';
+import { 
+    initLazyLoading,
+    initNsfwBlurHandlers, 
+    initMetadataPanelHandlers,
+    initMediaControlHandlers,
+    positionAllMediaControls
+} from './MediaUtils.js';
+import { generateMetadataPanel } from './MetadataPanel.js';
+import { generateImageWrapper, generateVideoWrapper } from './MediaRenderers.js';
+
+/**
+ * Load example images asynchronously
+ * @param {Array} images - Array of image objects (both regular and custom)
+ * @param {string} modelHash - Model hash for fetching local files
+ */
+export async function loadExampleImages(images, modelHash) {
+    try {
+        const showcaseTab = document.getElementById('showcase-tab');
+        if (!showcaseTab) return;
+        
+        // First fetch local example files
+        let localFiles = [];
+
+        try {
+            const endpoint = '/api/example-image-files';
+            const params = `model_hash=${modelHash}`;
+            
+            const response = await fetch(`${endpoint}?${params}`);
+            const result = await response.json();
+            
+            if (result.success) {
+                localFiles = result.files;
+            }
+        } catch (error) {
+            console.error("Failed to get example files:", error);
+        }
+        
+        // Then render with both remote images and local files
+        showcaseTab.innerHTML = renderShowcaseContent(images, localFiles);
+        
+        // Re-initialize the showcase event listeners
+        const carousel = showcaseTab.querySelector('.carousel');
+        if (carousel && !carousel.classList.contains('collapsed')) {
+            initShowcaseContent(carousel);
+        }
+        
+        // Initialize the example import functionality
+        initExampleImport(modelHash, showcaseTab);
+    } catch (error) {
+        console.error('Error loading example images:', error);
+        const showcaseTab = document.getElementById('showcase-tab');
+        if (showcaseTab) {
+            showcaseTab.innerHTML = `
+                <div class="error-message">
+                    <i class="fas fa-exclamation-circle"></i>
+                    Error loading example images
+                </div>
+            `;
+        }
+    }
+}
+
+/**
+ * Render showcase content
+ * @param {Array} images - Array of images/videos to show
+ * @param {Array} exampleFiles - Local example files
+ * @param {Object} options - Options for rendering
+ * @returns {string} HTML content
+ */
+export function renderShowcaseContent(images, exampleFiles = []) {
+    if (!images?.length) {
+        // Show empty state with import interface
+        return renderImportInterface(true);
+    }
+    
+    // Filter images based on SFW setting
+    const showOnlySFW = state.settings.show_only_sfw;
+    let filteredImages = images;
+    let hiddenCount = 0;
+    
+    if (showOnlySFW) {
+        filteredImages = images.filter(img => {
+            const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
+            const isSfw = nsfwLevel < NSFW_LEVELS.R;
+            if (!isSfw) hiddenCount++;
+            return isSfw;
+        });
+    }
+    
+    // Show message if no images are available after filtering
+    if (filteredImages.length === 0) {
+        return `
+            <div class="no-examples">
+                <p>All example images are filtered due to NSFW content settings</p>
+                <p class="nsfw-filter-info">Your settings are currently set to show only safe-for-work content</p>
+                <p>You can change this in Settings <i class="fas fa-cog"></i></p>
+            </div>
+        `;
+    }
+    
+    // Show hidden content notification if applicable
+    const hiddenNotification = hiddenCount > 0 ? 
+        `<div class="nsfw-filter-notification">
+            <i class="fas fa-eye-slash"></i> ${hiddenCount} ${hiddenCount === 1 ? 'image' : 'images'} hidden due to SFW-only setting
+        </div>` : '';
+    
+    return `
+        <div class="scroll-indicator" onclick="toggleShowcase(this)">
+            <i class="fas fa-chevron-down"></i>
+            <span>Scroll or click to show ${filteredImages.length} examples</span>
+        </div>
+        <div class="carousel collapsed">
+            ${hiddenNotification}
+            <div class="carousel-container">
+                ${filteredImages.map((img, index) => renderMediaItem(img, index, exampleFiles)).join('')}
+            </div>
+            
+            ${renderImportInterface(false)}
+        </div>
+    `;
+}
+
+/**
+ * Render a single media item (image or video)
+ * @param {Object} img - Image/video metadata
+ * @param {number} index - Index in the array
+ * @param {Array} exampleFiles - Local files
+ * @returns {string} HTML for the media item
+ */
+function renderMediaItem(img, index, exampleFiles) {
+    // Find matching file in our list of actual files
+    let localFile = findLocalFile(img, index, exampleFiles);
+    
+    const remoteUrl = img.url || '';
+    const localUrl = localFile ? localFile.path : '';
+    const isVideo = localFile ? localFile.is_video : 
+                  remoteUrl.endsWith('.mp4') || remoteUrl.endsWith('.webm');
+    
+    // Calculate appropriate aspect ratio
+    const aspectRatio = (img.height / img.width) * 100;
+    const containerWidth = 800; // modal content maximum width
+    const minHeightPercent = 40; 
+    const maxHeightPercent = (window.innerHeight * 0.6 / containerWidth) * 100;
+    const heightPercent = Math.max(
+        minHeightPercent,
+        Math.min(maxHeightPercent, aspectRatio)
+    );
+    
+    // Check if media should be blurred
+    const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
+    const shouldBlur = state.settings.blurMatureContent && nsfwLevel > NSFW_LEVELS.PG13;
+    
+    // Determine NSFW warning text based on level
+    let nsfwText = "Mature Content";
+    if (nsfwLevel >= NSFW_LEVELS.XXX) {
+        nsfwText = "XXX-rated Content";
+    } else if (nsfwLevel >= NSFW_LEVELS.X) {
+        nsfwText = "X-rated Content";
+    } else if (nsfwLevel >= NSFW_LEVELS.R) {
+        nsfwText = "R-rated Content";
+    }
+    
+    // Extract metadata from the image
+    const meta = img.meta || {};
+    const prompt = meta.prompt || '';
+    const negativePrompt = meta.negative_prompt || meta.negativePrompt || '';
+    const size = meta.Size || `${img.width}x${img.height}`;
+    const seed = meta.seed || '';
+    const model = meta.Model || '';
+    const steps = meta.steps || '';
+    const sampler = meta.sampler || '';
+    const cfgScale = meta.cfgScale || '';
+    const clipSkip = meta.clipSkip || '';
+    
+    // Check if we have any meaningful generation parameters
+    const hasParams = seed || model || steps || sampler || cfgScale || clipSkip;
+    const hasPrompts = prompt || negativePrompt;
+    
+    // Create metadata panel content
+    const metadataPanel = generateMetadataPanel(
+        hasParams, hasPrompts, 
+        prompt, negativePrompt, 
+        size, seed, model, steps, sampler, cfgScale, clipSkip
+    );
+    
+    // Determine if this is a custom image (has id property)
+    const isCustomImage = Boolean(img.id);
+    
+    // Create the media control buttons HTML
+    const mediaControlsHtml = `
+        <div class="media-controls">
+            <button class="media-control-btn set-preview-btn" title="Set as preview">
+                <i class="fas fa-image"></i>
+            </button>
+            <button class="media-control-btn example-delete-btn ${!isCustomImage ? 'disabled' : ''}" 
+                    title="${isCustomImage ? 'Delete this example' : 'Only custom images can be deleted'}" 
+                    data-short-id="${img.id || ''}" 
+                    ${!isCustomImage ? 'disabled' : ''}>
+                <i class="fas fa-trash-alt"></i>
+                <i class="fas fa-check confirm-icon"></i>
+            </button>
+        </div>
+    `;
+    
+    // Generate the appropriate wrapper based on media type
+    if (isVideo) {
+        return generateVideoWrapper(
+            img, heightPercent, shouldBlur, nsfwText, metadataPanel, 
+            localUrl, remoteUrl, mediaControlsHtml
+        );
+    }
+    
+    return generateImageWrapper(
+        img, heightPercent, shouldBlur, nsfwText, metadataPanel, 
+        localUrl, remoteUrl, mediaControlsHtml
+    );
+}
+
+/**
+ * Find the matching local file for an image
+ * @param {Object} img - Image metadata
+ * @param {number} index - Image index
+ * @param {Array} exampleFiles - Array of local files
+ * @returns {Object|null} Matching local file or null
+ */
+function findLocalFile(img, index, exampleFiles) {
+    if (!exampleFiles || exampleFiles.length === 0) return null;
+    
+    let localFile = null;
+    
+    if (img.id) {
+        // This is a custom image, find by custom_<id>
+        const customPrefix = `custom_${img.id}`;
+        localFile = exampleFiles.find(file => file.name.startsWith(customPrefix));
+    } else {
+        // This is a regular image from civitai, find by index
+        localFile = exampleFiles.find(file => {
+            const match = file.name.match(/image_(\d+)\./);
+            return match && parseInt(match[1]) === index;
+        });
+        
+        // If not found by index, just use the same position in the array if available
+        if (!localFile && index < exampleFiles.length) {
+            localFile = exampleFiles[index];
+        }
+    }
+    
+    return localFile;
+}
+
+/**
+ * Render the import interface for example images
+ * @param {boolean} isEmpty - Whether there are no existing examples
+ * @returns {string} HTML content for import interface
+ */
+function renderImportInterface(isEmpty) {
+    return `
+        <div class="example-import-area ${isEmpty ? 'empty' : ''}">
+            <div class="import-container" id="exampleImportContainer">
+                <div class="import-placeholder">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    <h3>${isEmpty ? 'No example images available' : 'Add more examples'}</h3>
+                    <p>Drag & drop images or videos here</p>
+                    <p class="sub-text">or</p>
+                    <button class="select-files-btn" id="selectExampleFilesBtn">
+                        <i class="fas fa-folder-open"></i> Select Files
+                    </button>
+                    <p class="import-formats">Supported formats: jpg, png, gif, webp, mp4, webm</p>
+                </div>
+                <input type="file" id="exampleFilesInput" multiple accept="image/*,video/mp4,video/webm" style="display: none;">
+                <div class="import-progress-container" style="display: none;">
+                    <div class="import-progress">
+                        <div class="progress-bar"></div>
+                    </div>
+                    <span class="progress-text">Importing files...</span>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Initialize the example import functionality
+ * @param {string} modelHash - The SHA256 hash of the model
+ * @param {Element} container - The container element for the import area
+ */
+export function initExampleImport(modelHash, container) {
+    if (!container) return;
+    
+    const importContainer = container.querySelector('#exampleImportContainer');
+    const fileInput = container.querySelector('#exampleFilesInput');
+    const selectFilesBtn = container.querySelector('#selectExampleFilesBtn');
+    
+    // Set up file selection button
+    if (selectFilesBtn) {
+        selectFilesBtn.addEventListener('click', () => {
+            fileInput.click();
+        });
+    }
+    
+    // Handle file selection
+    if (fileInput) {
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleImportFiles(Array.from(e.target.files), modelHash, importContainer);
+            }
+        });
+    }
+    
+    // Set up drag and drop
+    if (importContainer) {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            importContainer.addEventListener(eventName, preventDefaults, false);
+        });
+        
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        
+        // Highlight drop area on drag over
+        ['dragenter', 'dragover'].forEach(eventName => {
+            importContainer.addEventListener(eventName, () => {
+                importContainer.classList.add('highlight');
+            }, false);
+        });
+        
+        // Remove highlight on drag leave
+        ['dragleave', 'drop'].forEach(eventName => {
+            importContainer.addEventListener(eventName, () => {
+                importContainer.classList.remove('highlight');
+            }, false);
+        });
+        
+        // Handle dropped files
+        importContainer.addEventListener('drop', (e) => {
+            const files = Array.from(e.dataTransfer.files);
+            handleImportFiles(files, modelHash, importContainer);
+        }, false);
+    }
+}
+
+/**
+ * Handle the file import process
+ * @param {File[]} files - Array of files to import
+ * @param {string} modelHash - The SHA256 hash of the model
+ * @param {Element} importContainer - The container element for import UI
+ */
+async function handleImportFiles(files, modelHash, importContainer) {
+    // Filter for supported file types
+    const supportedImages = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
+    const supportedVideos = ['.mp4', '.webm'];
+    const supportedExtensions = [...supportedImages, ...supportedVideos];
+    
+    const validFiles = files.filter(file => {
+        const ext = '.' + file.name.split('.').pop().toLowerCase();
+        return supportedExtensions.includes(ext);
+    });
+    
+    if (validFiles.length === 0) {
+        alert('No supported files selected. Please select image or video files.');
+        return;
+    }
+    
+    try {
+        // Use FormData to upload files
+        const formData = new FormData();
+        formData.append('model_hash', modelHash);
+        
+        validFiles.forEach(file => {
+            formData.append('files', file);
+        });
+        
+        // Call API to import files
+        const response = await fetch('/api/import-example-images', {
+            method: 'POST',
+            body: formData
+        });
+        
+        const result = await response.json();
+        
+        if (!result.success) {
+            throw new Error(result.error || 'Failed to import example files');
+        }
+        
+        // Get updated local files
+        const updatedFilesResponse = await fetch(`/api/example-image-files?model_hash=${modelHash}`);
+        const updatedFilesResult = await updatedFilesResponse.json();
+        
+        if (!updatedFilesResult.success) {
+            throw new Error(updatedFilesResult.error || 'Failed to get updated file list');
+        }
+        
+        // Re-render the showcase content
+        const showcaseTab = document.getElementById('showcase-tab');
+        if (showcaseTab) {
+            // Get the updated images from the result
+            const regularImages = result.regular_images || [];
+            const customImages = result.custom_images || [];
+            // Combine both arrays for rendering
+            const allImages = [...regularImages, ...customImages];
+            showcaseTab.innerHTML = renderShowcaseContent(allImages, updatedFilesResult.files);
+            
+            // Re-initialize showcase functionality
+            const carousel = showcaseTab.querySelector('.carousel');
+            if (carousel && !carousel.classList.contains('collapsed')) {
+                initShowcaseContent(carousel);
+            }
+            
+            // Initialize the import UI for the new content
+            initExampleImport(modelHash, showcaseTab);
+            
+            showToast('Example images imported successfully', 'success');
+            
+            // Update VirtualScroller if available
+            if (state.virtualScroller && result.model_file_path) {
+                // Create an update object with only the necessary properties
+                const updateData = {
+                    civitai: {
+                        images: regularImages,
+                        customImages: customImages
+                    }
+                };
+                
+                // Update the item in the virtual scroller
+                state.virtualScroller.updateSingleItem(result.model_file_path, updateData);
+            }
+        }
+    } catch (error) {
+        console.error('Error importing examples:', error);
+        showToast('Failed to import example images', 'error');
+    }
+}
+
+/**
+ * Toggle showcase expansion
+ * @param {HTMLElement} element - The scroll indicator element
+ */
+export function toggleShowcase(element) {
+    const carousel = element.nextElementSibling;
+    const isCollapsed = carousel.classList.contains('collapsed');
+    const indicator = element.querySelector('span');
+    const icon = element.querySelector('i');
+    
+    carousel.classList.toggle('collapsed');
+    
+    if (isCollapsed) {
+        const count = carousel.querySelectorAll('.media-wrapper').length;
+        indicator.textContent = `Scroll or click to hide examples`;
+        icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
+        initShowcaseContent(carousel);
+    } else {
+        const count = carousel.querySelectorAll('.media-wrapper').length;
+        indicator.textContent = `Scroll or click to show ${count} examples`;
+        icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
+        
+        // Make sure any open metadata panels get closed
+        const carouselContainer = carousel.querySelector('.carousel-container');
+        if (carouselContainer) {
+            carouselContainer.style.height = '0';
+            setTimeout(() => {
+                carouselContainer.style.height = '';
+            }, 300);
+        }
+    }
+}
+
+/**
+ * Initialize all showcase content interactions
+ * @param {HTMLElement} carousel - The carousel element
+ */
+export function initShowcaseContent(carousel) {
+    if (!carousel) return;
+    
+    initLazyLoading(carousel);
+    initNsfwBlurHandlers(carousel);
+    initMetadataPanelHandlers(carousel);
+    initMediaControlHandlers(carousel);
+    positionAllMediaControls(carousel);
+    
+    // Add window resize handler
+    const resizeHandler = () => positionAllMediaControls(carousel);
+    window.removeEventListener('resize', resizeHandler);
+    window.addEventListener('resize', resizeHandler);
+    
+    // Handle images loading which might change dimensions
+    const mediaElements = carousel.querySelectorAll('img, video');
+    mediaElements.forEach(media => {
+        media.addEventListener('load', () => positionAllMediaControls(carousel));
+        if (media.tagName === 'VIDEO') {
+            media.addEventListener('loadedmetadata', () => positionAllMediaControls(carousel));
+        }
+    });
+}
+
+/**
+ * Scroll to top of modal content
+ * @param {HTMLElement} button - Back to top button
+ */
+export function scrollToTop(button) {
+    const modalContent = button.closest('.modal-content');
+    if (modalContent) {
+        modalContent.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }
+}
+
+/**
+ * Set up showcase scroll functionality
+ * @param {string} modalId - ID of the modal element
+ */
+export function setupShowcaseScroll(modalId) {
+    // Listen for wheel events
+    document.addEventListener('wheel', (event) => {
+        const modalContent = document.querySelector(`#${modalId} .modal-content`);
+        if (!modalContent) return;
+        
+        const showcase = modalContent.querySelector('.showcase-section');
+        if (!showcase) return;
+        
+        const carousel = showcase.querySelector('.carousel');
+        const scrollIndicator = showcase.querySelector('.scroll-indicator');
+        
+        if (carousel?.classList.contains('collapsed') && event.deltaY > 0) {
+            const isNearBottom = modalContent.scrollHeight - modalContent.scrollTop - modalContent.clientHeight < 100;
+            
+            if (isNearBottom) {
+                toggleShowcase(scrollIndicator);
+                event.preventDefault();
+            }
+        }
+    }, { passive: false });
+    
+    // Use MutationObserver to set up back-to-top button when modal content is added
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                const modal = document.getElementById(modalId);
+                if (modal && modal.querySelector('.modal-content')) {
+                    setupBackToTopButton(modal.querySelector('.modal-content'));
+                }
+            }
+        }
+    });
+    
+    observer.observe(document.body, { childList: true, subtree: true });
+    
+    // Try to set up the button immediately in case the modal is already open
+    const modalContent = document.querySelector(`#${modalId} .modal-content`);
+    if (modalContent) {
+        setupBackToTopButton(modalContent);
+    }
+}
+
+/**
+ * Set up back-to-top button
+ * @param {HTMLElement} modalContent - Modal content element
+ */
+function setupBackToTopButton(modalContent) {
+    // Remove any existing scroll listeners to avoid duplicates
+    modalContent.onscroll = null;
+    
+    // Add new scroll listener
+    modalContent.addEventListener('scroll', () => {
+        const backToTopBtn = modalContent.querySelector('.back-to-top');
+        if (backToTopBtn) {
+            if (modalContent.scrollTop > 300) {
+                backToTopBtn.classList.add('visible');
+            } else {
+                backToTopBtn.classList.remove('visible');
+            }
+        }
+    });
+    
+    // Trigger a scroll event to check initial position
+    modalContent.dispatchEvent(new Event('scroll'));
+}

static/js/loras.js

@@ -1,6 +1,6 @@
 import { appCore } from './core.js';
 import { state } from './state/index.js';
-import { showLoraModal, toggleShowcase, scrollToTop } from './components/loraModal/index.js';
+import { showLoraModal } from './components/loraModal/index.js';
 import { loadMoreLoras } from './api/loraApi.js';
 import { updateCardsForBulkMode } from './components/LoraCard.js';
 import { bulkManager } from './managers/BulkManager.js';
@@ -43,8 +43,6 @@ class LoraPageManager {
         window.closeExcludeModal = closeExcludeModal;
         window.downloadManager = this.downloadManager;
         window.moveManager = moveManager;
-        window.toggleShowcase = toggleShowcase;
-        window.scrollToTop = scrollToTop;
         
         // Bulk operations
         window.toggleBulkMode = () => bulkManager.toggleBulkMode();

static/js/managers/BulkManager.js

@@ -18,6 +18,8 @@ export class BulkManager {
         if (!state.loraMetadataCache) {
             state.loraMetadataCache = new Map();
         }
+
+        this.stripMaxThumbnails = 50; // Maximum thumbnails to show in strip
     }
 
     initialize() {
@@ -29,6 +31,29 @@ export class BulkManager {
         if (selectedCount) {
             selectedCount.addEventListener('click', () => this.toggleThumbnailStrip());
         }
+
+        // Add global keyboard event listener for Ctrl+A
+        document.addEventListener('keydown', (e) => {
+            // Check if it's Ctrl+A (or Cmd+A on Mac)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+                // First check if any modal is currently open - if so, don't handle Ctrl+A
+                if (modalManager.isAnyModalOpen()) {
+                    return; // Exit early - let the browser handle Ctrl+A within the modal
+                }
+
+                // Prevent default browser "Select All" behavior
+                e.preventDefault();
+                
+                // If not in bulk mode, enable it first
+                if (!state.bulkMode) {
+                    this.toggleBulkMode();
+                    // Small delay to ensure DOM is updated
+                    setTimeout(() => this.selectAllVisibleLoras(), 50);
+                } else {
+                    this.selectAllVisibleLoras();
+                }
+            }
+        });
     }
 
     toggleBulkMode() {
@@ -404,10 +429,24 @@ export class BulkManager {
         // Clear existing thumbnails
         container.innerHTML = '';
         
-        // Add a thumbnail for each selected LoRA
-        for (const filepath of state.selectedLoras) {
+        // Get all selected loras
+        const selectedLoras = Array.from(state.selectedLoras);
+        
+        // Create counter if we have more thumbnails than we'll show
+        if (selectedLoras.length > this.stripMaxThumbnails) {
+            const counter = document.createElement('div');
+            counter.className = 'strip-counter';
+            counter.textContent = `Showing ${this.stripMaxThumbnails} of ${selectedLoras.length} selected`;
+            container.appendChild(counter);
+        }
+        
+        // Limit the number of thumbnails to display
+        const thumbnailsToShow = selectedLoras.slice(0, this.stripMaxThumbnails);
+        
+        // Add a thumbnail for each selected LoRA (limited to max)
+        thumbnailsToShow.forEach(filepath => {
             const metadata = state.loraMetadataCache.get(filepath);
-            if (!metadata) continue;
+            if (!metadata) return;
             
             const thumbnail = document.createElement('div');
             thumbnail.className = 'selected-thumbnail';
@@ -444,7 +483,7 @@ export class BulkManager {
             });
             
             container.appendChild(thumbnail);
-        }
+        });
     }
     
     deselectItem(filepath) {
@@ -466,6 +505,47 @@ export class BulkManager {
             this.hideThumbnailStrip();
         }
     }
+
+    // Add method to select all visible loras
+    selectAllVisibleLoras() {
+        // Only select loras already in the VirtualScroller's data model
+        if (!state.virtualScroller || !state.virtualScroller.items) {
+            showToast('Unable to select all items', 'error');
+            return;
+        }
+        
+        const oldCount = state.selectedLoras.size;
+        
+        // Add all loaded loras to the selection set
+        state.virtualScroller.items.forEach(item => {
+            if (item && item.file_path) {
+                state.selectedLoras.add(item.file_path);
+                
+                // Add to metadata cache if not already there
+                if (!state.loraMetadataCache.has(item.file_path)) {
+                    state.loraMetadataCache.set(item.file_path, {
+                        fileName: item.file_name,
+                        usageTips: item.usage_tips || '{}',
+                        previewUrl: item.preview_url || '/loras_static/images/no-preview.png',
+                        isVideo: item.is_video || false,
+                        modelName: item.name || item.file_name
+                    });
+                }
+            }
+        });
+        
+        // Update visual state
+        this.applySelectionState();
+        
+        // Show success message
+        const newlySelected = state.selectedLoras.size - oldCount;
+        showToast(`Selected ${newlySelected} additional LoRAs`, 'success');
+        
+        // Update thumbnail strip if visible
+        if (this.isStripVisible) {
+            this.updateThumbnailStrip();
+        }
+    }
 }
 
 // Create a singleton instance

static/js/managers/ExampleImagesManager.js

@@ -48,12 +48,6 @@ class ExampleImagesManager {
         if (collapseBtn) {
             collapseBtn.onclick = () => this.toggleProgressPanel();
         }
-        
-        // Initialize migration button handler
-        const migrateBtn = document.getElementById('exampleImagesMigrateBtn');
-        if (migrateBtn) {
-            migrateBtn.onclick = () => this.handleMigrateButton();
-        }
     }
     
     // Initialize event listeners for buttons
@@ -149,95 +143,6 @@ class ExampleImagesManager {
         }
     }
     
-    // Method to handle migrate button click
-    async handleMigrateButton() {
-        if (this.isDownloading || this.isMigrating) {
-            if (this.isPaused) {
-                // If paused, resume
-                this.resumeDownload();
-            } else {
-                showToast('Migration or download already in progress', 'info');
-            }
-            return;
-        }
-        
-        // Start migration
-        this.startMigrate();
-    }
-    
-    async startMigrate() {
-        try {
-            const outputDir = document.getElementById('exampleImagesPath').value || '';
-            
-            if (!outputDir) {
-                showToast('Please enter a download location first', 'warning');
-                return;
-            }
-            
-            // Update path in backend settings before starting migration
-            try {
-                const pathUpdateResponse = await fetch('/api/settings', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        example_images_path: outputDir
-                    })
-                });
-                
-                if (!pathUpdateResponse.ok) {
-                    throw new Error(`HTTP error! Status: ${pathUpdateResponse.status}`);
-                }
-            } catch (error) {
-                console.error('Failed to update example images path:', error);
-            }
-            
-            const pattern = document.getElementById('exampleImagesMigratePattern').value || '{model}.example.{index}.{ext}';
-            const optimize = document.getElementById('optimizeExampleImages').checked;
-            
-            const response = await fetch('/api/migrate-example-images', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    output_dir: outputDir,
-                    pattern: pattern,
-                    optimize: optimize,
-                    model_types: ['lora', 'checkpoint']
-                })
-            });
-            
-            const data = await response.json();
-            
-            if (data.success) {
-                this.isDownloading = true;
-                this.isMigrating = true;
-                this.isPaused = false;
-                this.hasShownCompletionToast = false; // Reset toast flag when starting new migration
-                this.startTime = new Date();
-                this.updateUI(data.status);
-                this.showProgressPanel();
-                this.startProgressUpdates();
-                // Update button text
-                const btnTextElement = document.getElementById('exampleDownloadBtnText');
-                if (btnTextElement) {
-                    btnTextElement.textContent = "Resume";
-                }
-                showToast('Example images migration started', 'success');
-                
-                // Close settings modal
-                modalManager.closeModal('settingsModal');
-            } else {
-                showToast(data.error || 'Failed to start migration', 'error');
-            }
-        } catch (error) {
-            console.error('Failed to start migration:', error);
-            showToast('Failed to start migration', 'error');
-        }
-    }
-    
     async checkDownloadStatus() {
         try {
             const response = await fetch('/api/example-images-status');

static/js/managers/ModalManager.js

@@ -234,6 +234,19 @@ export class ModalManager {
             });
         }
 
+        // Add exampleAccessModal registration
+        const exampleAccessModal = document.getElementById('exampleAccessModal');
+        if (exampleAccessModal) {
+            this.registerModal('exampleAccessModal', {
+                element: exampleAccessModal,
+                onClose: () => {
+                    this.getModal('exampleAccessModal').element.style.display = 'none';
+                    document.body.classList.remove('modal-open');
+                },
+                closeOnOutsideClick: true
+            });
+        }
+
         document.addEventListener('keydown', this.boundHandleEscape);
         this.initialized = true;
     }

static/js/managers/MoveManager.js

@@ -1,8 +1,8 @@
 import { showToast } from '../utils/uiHelpers.js';
-import { state } from '../state/index.js';
-import { resetAndReload } from '../api/loraApi.js';
+import { state, getCurrentPageState } from '../state/index.js';
 import { modalManager } from './ModalManager.js';
 import { getStorageItem } from '../utils/storageHelpers.js';
+import { updateModelCard } from '../utils/cardUpdater.js';
 
 class MoveManager {
     constructor() {
@@ -136,13 +136,45 @@ class MoveManager {
             if (this.bulkFilePaths) {
                 // Bulk move mode
                 await this.moveBulkModels(this.bulkFilePaths, targetPath);
+
+                // Update virtual scroller if in active folder view
+                const pageState = getCurrentPageState();
+                if (pageState.activeFolder !== null && state.virtualScroller) {
+                    // Remove moved items from virtual scroller instead of reloading
+                    this.bulkFilePaths.forEach(filePath => {
+                        state.virtualScroller.removeItemByFilePath(filePath);
+                    });
+                } else {
+                    // Update the model cards' filepath in the DOM
+                    this.bulkFilePaths.forEach(filePath => {
+                        // Extract filename from original path
+                        const filename = filePath.substring(filePath.lastIndexOf('/') + 1);
+                        // Construct new filepath
+                        const newFilePath = `${targetPath}/${filename}`;
+                        // Update the card with new filepath
+                        updateModelCard(filePath, {filepath: newFilePath});
+                    });
+                }
             } else {
                 // Single move mode
                 await this.moveSingleModel(this.currentFilePath, targetPath);
+                
+                // Update virtual scroller if in active folder view
+                const pageState = getCurrentPageState();
+                if (pageState.activeFolder !== null && state.virtualScroller) {
+                    // Remove moved item from virtual scroller instead of reloading
+                    state.virtualScroller.removeItemByFilePath(this.currentFilePath);
+                } else {
+                    // Extract filename from original path
+                    const filename = this.currentFilePath.substring(this.currentFilePath.lastIndexOf('/') + 1);
+                    // Construct new filepath
+                    const newFilePath = `${targetPath}/${filename}`;
+                    // Update the card with new filepath
+                    updateModelCard(this.currentFilePath, {filepath: newFilePath});
+                }
             }
 
             modalManager.closeModal('moveModal');
-            await resetAndReload(true);
             
             // If we were in bulk mode, exit it after successful move
             if (this.bulkFilePaths && state.bulkMode) {

static/js/managers/SettingsManager.js

@@ -36,11 +36,6 @@ export class SettingsManager {
         if (state.global.settings.optimizeExampleImages === undefined) {
             state.global.settings.optimizeExampleImages = true;
         }
-        
-        // Set default for useCentralizedExamples if undefined
-        if (state.global.settings.useCentralizedExamples === undefined) {
-            state.global.settings.useCentralizedExamples = true;
-        }
 
         // Convert old boolean compactMode to new displayDensity string
         if (typeof state.global.settings.displayDensity === 'undefined') {
@@ -114,14 +109,6 @@ export class SettingsManager {
             optimizeExampleImagesCheckbox.checked = state.global.settings.optimizeExampleImages || false;
         }
 
-        // Set centralized examples setting
-        const useCentralizedExamplesCheckbox = document.getElementById('useCentralizedExamples');
-        if (useCentralizedExamplesCheckbox) {
-            useCentralizedExamplesCheckbox.checked = state.global.settings.useCentralizedExamples !== false;
-            // Update dependent controls
-            this.updateExamplesControlsState();
-        }
-
         // Load default lora root
         await this.loadLoraRoots();
         
@@ -196,10 +183,6 @@ export class SettingsManager {
             state.global.settings.optimizeExampleImages = value;
         } else if (settingKey === 'compact_mode') {
             state.global.settings.compactMode = value;
-        } else if (settingKey === 'use_centralized_examples') {
-            state.global.settings.useCentralizedExamples = value;
-            // Update dependent controls state
-            this.updateExamplesControlsState();
         } else {
             // For any other settings that might be added in the future
             state.global.settings[settingKey] = value;
@@ -523,42 +506,6 @@ export class SettingsManager {
             // Add the appropriate density class
             grid.classList.add(`${density}-density`);
         }
-
-        // Apply centralized examples toggle state
-        this.updateExamplesControlsState();
-    }
-
-    // Add new method to update example control states
-    updateExamplesControlsState() {
-        const useCentralized = state.global.settings.useCentralizedExamples !== false;
-        
-        // Find all controls that require centralized mode
-        const exampleSections = document.querySelectorAll('[data-requires-centralized="true"]');
-        exampleSections.forEach(section => {
-            // Enable/disable all inputs and buttons in the section
-            const controls = section.querySelectorAll('input, button, select');
-            controls.forEach(control => {
-                control.disabled = !useCentralized;
-                
-                // Add/remove disabled class for styling
-                if (control.classList.contains('primary-btn') || control.classList.contains('secondary-btn')) {
-                    if (!useCentralized) {
-                        control.classList.add('disabled');
-                    } else {
-                        control.classList.remove('disabled');
-                    }
-                }
-            });
-            
-            // Visually show the section as disabled
-            if (!useCentralized) {
-                section.style.opacity = '0.6';
-                section.style.pointerEvents = 'none';
-            } else {
-                section.style.opacity = '';
-                section.style.pointerEvents = '';
-            }
-        });
     }
 }
 

static/js/managers/UpdateService.js

@@ -8,6 +8,11 @@ export class UpdateService {
         this.latestVersion = "v0.0.0";   // Initialize with default values
         this.updateInfo = null;
         this.updateAvailable = false;
+        this.gitInfo = {
+            short_hash: "unknown",
+            branch: "unknown",
+            commit_date: "unknown"
+        };
         this.updateNotificationsEnabled = getStorageItem('show_update_notifications');
         this.lastCheckTime = parseInt(getStorageItem('last_update_check') || '0');
     }
@@ -55,13 +60,14 @@ export class UpdateService {
         
         try {
             // Call backend API to check for updates
-            const response = await fetch('/loras/api/check-updates');
+            const response = await fetch('/api/check-updates');
             const data = await response.json();
             
             if (data.success) {
                 this.currentVersion = data.current_version || "v0.0.0";
                 this.latestVersion = data.latest_version || "v0.0.0";
                 this.updateInfo = data;
+                this.gitInfo = data.git_info || this.gitInfo;
                 
                 // Explicitly set update availability based on version comparison
                 this.updateAvailable = this.isNewerVersion(this.latestVersion, this.currentVersion);
@@ -77,7 +83,8 @@ export class UpdateService {
                 console.log("Update check complete:", {
                     currentVersion: this.currentVersion,
                     latestVersion: this.latestVersion,
-                    updateAvailable: this.updateAvailable
+                    updateAvailable: this.updateAvailable,
+                    gitInfo: this.gitInfo
                 });
             }
         } catch (error) {
@@ -152,6 +159,21 @@ export class UpdateService {
         if (currentVersionEl) currentVersionEl.textContent = this.currentVersion;
         if (newVersionEl) newVersionEl.textContent = this.latestVersion;
         
+        // Update git info
+        const gitInfoEl = modal.querySelector('.git-info');
+        if (gitInfoEl && this.gitInfo) {
+            if (this.gitInfo.short_hash !== 'unknown') {
+                let gitText = `Commit: ${this.gitInfo.short_hash}`;
+                if (this.gitInfo.commit_date !== 'unknown') {
+                    gitText += ` - Date: ${this.gitInfo.commit_date}`;
+                }
+                gitInfoEl.textContent = gitText;
+                gitInfoEl.style.display = 'block';
+            } else {
+                gitInfoEl.style.display = 'none';
+            }
+        }
+        
         // Update changelog content if available
         if (this.updateInfo && this.updateInfo.changelog) {
             const changelogContent = modal.querySelector('.changelog-content');

static/js/utils/VirtualScroller.js

@@ -796,16 +796,91 @@ export class VirtualScroller {
         console.log('Virtual scroller enabled');
     }
 
+    // Helper function for deep merging objects
+    deepMerge(target, source) {
+        if (!source) return target;
+        
+        const result = { ...target };
+        
+        Object.keys(source).forEach(key => {
+            if (source[key] !== null && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+                // If property exists in target and is an object, recursively merge
+                if (target[key] && typeof target[key] === 'object' && !Array.isArray(target[key])) {
+                    result[key] = this.deepMerge(target[key], source[key]);
+                } else {
+                    // Otherwise just assign the source value
+                    result[key] = source[key];
+                }
+            } else {
+                // For non-objects (including arrays), just assign the value
+                result[key] = source[key];
+            }
+        });
+        
+        return result;
+    }
+
+    updateSingleItem(filePath, updatedItem) {
+        if (!filePath || !updatedItem) {
+            console.error('Invalid parameters for updateSingleItem');
+            return false;
+        }
+
+        // Find the index of the item with the matching file_path
+        const index = this.items.findIndex(item => item.file_path === filePath);
+        if (index === -1) {
+            console.warn(`Item with file path ${filePath} not found in virtual scroller data`);
+            return false;
+        }
+
+        // Update the item data using deep merge
+        this.items[index] = this.deepMerge(this.items[index], updatedItem);
+        
+        // If the item is currently rendered, update its DOM representation
+        if (this.renderedItems.has(index)) {
+            const element = this.renderedItems.get(index);
+            
+            // Remove the old element
+            element.remove();
+            this.renderedItems.delete(index);
+            
+            // Create and render the updated element
+            const updatedElement = this.createItemElement(this.items[index], index);
+            
+            // Add update indicator visual effects
+            updatedElement.classList.add('updated');
+            
+            // Add temporary update tag
+            const updateIndicator = document.createElement('div');
+            updateIndicator.className = 'update-indicator';
+            updateIndicator.textContent = 'Updated';
+            updatedElement.querySelector('.card-preview').appendChild(updateIndicator);
+            
+            // Automatically remove the updated class after animation completes
+            setTimeout(() => {
+                updatedElement.classList.remove('updated');
+            }, 1500);
+            
+            // Automatically remove the indicator after animation completes
+            setTimeout(() => {
+                if (updateIndicator && updateIndicator.parentNode) {
+                    updateIndicator.remove();
+                }
+            }, 2000);
+            
+            this.renderedItems.set(index, updatedElement);
+            this.gridElement.appendChild(updatedElement);
+        }
+        
+        return true;
+    }
+
     // New method to remove an item by file path
     removeItemByFilePath(filePath) {
         if (!filePath || this.disabled || this.items.length === 0) return false;
 
         // Find the index of the item with the matching file path
-        const index = this.items.findIndex(item => 
-            item.file_path === filePath || 
-            item.filepath === filePath || 
-            item.path === filePath
-        );
+        const index = this.items.findIndex(item => item.file_path === filePath);
 
         if (index === -1) {
             console.warn(`Item with file path ${filePath} not found in virtual scroller data`);

static/js/utils/cardUpdater.js

@@ -2,129 +2,45 @@
  * Utility functions to update checkpoint cards after modal edits
  */
 
-/**
- * Update the checkpoint card after metadata edits in the modal
- * @param {string} filePath - Path to the checkpoint file
- * @param {Object} updates - Object containing the updates (model_name, base_model, etc)
- */
-export function updateCheckpointCard(filePath, updates) {
-    // Find the card with matching filepath
-    const checkpointCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-    if (!checkpointCard) return;
-
-    // Update card dataset and visual elements based on the updates object
-    Object.entries(updates).forEach(([key, value]) => {
-        // Update dataset
-        checkpointCard.dataset[key] = value;
-
-        // Update visual elements based on the property
-        switch(key) {
-            case 'name': // model_name
-                // Update the model name in the footer
-                const modelNameElement = checkpointCard.querySelector('.model-name');
-                if (modelNameElement) modelNameElement.textContent = value;
-                break;
-
-            case 'base_model':
-                // Update the base model label in the card header
-                const baseModelLabel = checkpointCard.querySelector('.base-model-label');
-                if (baseModelLabel) {
-                    baseModelLabel.textContent = value;
-                    baseModelLabel.title = value;
-                }
-                break;
-                
-            case 'filepath':
-                // The filepath was changed (file renamed), update the dataset
-                checkpointCard.dataset.filepath = value;
-                break;
-                
-            case 'tags':
-                // Update tags if they're displayed on the card
-                try {
-                    checkpointCard.dataset.tags = JSON.stringify(value);
-                } catch (e) {
-                    console.error('Failed to update tags:', e);
-                }
-                break;
-                
-            // Add other properties as needed
-        }
-    });
-}
-
 /**
  * Update the Lora card after metadata edits in the modal
  * @param {string} filePath - Path to the Lora file
  * @param {Object} updates - Object containing the updates (model_name, base_model, notes, usage_tips, etc)
- * @param {string} [newFilePath] - Optional new file path if the file has been renamed
  */
-export function updateLoraCard(filePath, updates, newFilePath) {
+export function updateModelCard(filePath, updates) {
     // Find the card with matching filepath
-    const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-    if (!loraCard) return;
-
-    // If file was renamed, update the filepath first
-    if (newFilePath) {
-        loraCard.dataset.filepath = newFilePath;
-    }
+    const modelCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+    if (!modelCard) return;
 
     // Update card dataset and visual elements based on the updates object
     Object.entries(updates).forEach(([key, value]) => {
         // Update dataset
-        loraCard.dataset[key] = value;
+        modelCard.dataset[key] = value;
 
         // Update visual elements based on the property
         switch(key) {
             case 'model_name':
                 // Update the model name in the card title
-                const titleElement = loraCard.querySelector('.card-title');
+                const titleElement = modelCard.querySelector('.card-title');
                 if (titleElement) titleElement.textContent = value;
                 
                 // Also update the model name in the footer if it exists
-                const modelNameElement = loraCard.querySelector('.model-name');
+                const modelNameElement = modelCard.querySelector('.model-name');
                 if (modelNameElement) modelNameElement.textContent = value;
                 break;
-
-            case 'file_name':
-                // Update the file_name in the dataset
-                loraCard.dataset.file_name = value;
-                break;
                 
             case 'base_model':
                 // Update the base model label in the card header if it exists
-                const baseModelLabel = loraCard.querySelector('.base-model-label');
+                const baseModelLabel = modelCard.querySelector('.base-model-label');
                 if (baseModelLabel) {
                     baseModelLabel.textContent = value;
                     baseModelLabel.title = value;
                 }
                 break;
-                
-            case 'tags':
-                // Update tags if they're displayed on the card
-                try {
-                    if (typeof value === 'string') {
-                        loraCard.dataset.tags = value;
-                    } else {
-                        loraCard.dataset.tags = JSON.stringify(value);
-                    }
-                    
-                    // If there's a tag container, update its content
-                    const tagContainer = loraCard.querySelector('.card-tags');
-                    if (tagContainer) {
-                        // This depends on how your tags are rendered
-                        // You may need to update this logic based on your tag rendering function
-                    }
-                } catch (e) {
-                    console.error('Failed to update tags:', e);
-                }
-                break;
-                
-            // No visual updates needed for notes, usage_tips as they're typically not shown on cards
         }
     });
     
-    return loraCard; // Return the updated card element for chaining
+    return modelCard; // Return the updated card element for chaining
 }
 
 /**

static/js/utils/uiHelpers.js

@@ -441,521 +441,4 @@ export async function openExampleImagesFolder(modelHash) {
     showToast('Failed to open example images folder', 'error');
     return false;
   }
-}
-
-/**
- * Gets local URLs for example images with primary and fallback options
- * @param {Object} img - Image object
- * @param {number} index - Image index
- * @param {string} modelHash - Model hash
- * @returns {Object} - Object with primary and fallback URLs
- */
-export function getLocalExampleImageUrl(img, index, modelHash) {
-    if (!modelHash) return { primary: null, fallback: null };
-    
-    // Get remote extension
-    const remoteExt = (img.url || '').split('?')[0].split('.').pop().toLowerCase();
-    
-    // If it's a video (mp4), use that extension with no fallback
-    if (remoteExt === 'mp4') {
-        const videoUrl = `/example_images_static/${modelHash}/image_${index + 1}.mp4`;
-        return { primary: videoUrl, fallback: null };
-    }
-    
-    // For images, prepare both possible formats
-    const basePath = `/example_images_static/${modelHash}/image_${index + 1}`;
-    const webpUrl = `${basePath}.webp`;
-    const originalExtUrl = remoteExt ? `${basePath}.${remoteExt}` : `${basePath}.jpg`;
-    
-    // Check if optimization is enabled (defaults to true)
-    const optimizeImages = state.settings.optimizeExampleImages !== false;
-    
-    // Return primary and fallback URLs based on current settings
-    return {
-        primary: optimizeImages ? webpUrl : originalExtUrl,
-        fallback: optimizeImages ? originalExtUrl : webpUrl
-    };
-}
-
-/**
- * Try to load local image first, fall back to remote if local fails
- * @param {HTMLImageElement} imgElement - The image element to update
- * @param {Object} urls - Object with local URLs {primary, fallback} and remote URL
- */
-export function tryLocalImageOrFallbackToRemote(imgElement, urls) {
-    const { primary: localUrl, fallback: fallbackUrl } = urls.local || {};
-    const remoteUrl = urls.remote;
-    
-    // If no local options, use remote directly
-    if (!localUrl) {
-        imgElement.src = remoteUrl;
-        return;
-    }
-    
-    // Try primary local URL
-    const testImg = new Image();
-    testImg.onload = () => {
-        // Primary local image loaded successfully
-        imgElement.src = localUrl;
-    };
-    testImg.onerror = () => {
-        // Try fallback URL if available
-        if (fallbackUrl) {
-            const fallbackImg = new Image();
-            fallbackImg.onload = () => {
-                imgElement.src = fallbackUrl;
-            };
-            fallbackImg.onerror = () => {
-                // Both local options failed, use remote
-                imgElement.src = remoteUrl;
-            };
-            fallbackImg.src = fallbackUrl;
-        } else {
-            // No fallback, use remote
-            imgElement.src = remoteUrl;
-        }
-    };
-    testImg.src = localUrl;
-}
-
-/**
- * Try to load local video first, fall back to remote if local fails
- * @param {HTMLVideoElement} videoElement - The video element to update
- * @param {Object} urls - Object with local URLs {primary} and remote URL
- */
-export function tryLocalVideoOrFallbackToRemote(videoElement, urls) {
-    const { primary: localUrl } = urls.local || {};
-    const remoteUrl = urls.remote;
-    
-    // Only try local if we have a local path
-    if (localUrl) {
-        // Try to fetch local file headers to see if it exists
-        fetch(localUrl, { method: 'HEAD' })
-            .then(response => {
-                if (response.ok) {
-                    // Local video exists, use it
-                    videoElement.src = localUrl;
-                    const source = videoElement.querySelector('source');
-                    if (source) source.src = localUrl;
-                } else {
-                    // Local video doesn't exist, use remote
-                    videoElement.src = remoteUrl;
-                    const source = videoElement.querySelector('source');
-                    if (source) source.src = remoteUrl;
-                }
-                videoElement.load();
-            })
-            .catch(() => {
-                // Error fetching, use remote
-                videoElement.src = remoteUrl;
-                const source = videoElement.querySelector('source');
-                if (source) source.src = remoteUrl;
-                videoElement.load();
-            });
-    } else {
-        // No local path, use remote directly
-        videoElement.src = remoteUrl;
-        const source = videoElement.querySelector('source');
-        if (source) source.src = remoteUrl;
-        videoElement.load();
-    }
-}
-
-/**
- * Initialize lazy loading for images and videos in a container
- * @param {HTMLElement} container - The container with lazy-loadable elements
- */
-export function initLazyLoading(container) {
-    const lazyElements = container.querySelectorAll('.lazy');
-    
-    const lazyLoad = (element) => {
-        // Get URLs from data attributes
-        const localUrls = {
-            primary: element.dataset.localSrc || null,
-            fallback: element.dataset.localFallbackSrc || null
-        };
-        const remoteUrl = element.dataset.remoteSrc;
-        
-        const urls = {
-            local: localUrls,
-            remote: remoteUrl
-        };
-        
-        // Check if element is a video or image
-        if (element.tagName.toLowerCase() === 'video') {
-            tryLocalVideoOrFallbackToRemote(element, urls);
-        } else {
-            tryLocalImageOrFallbackToRemote(element, urls);
-        }
-        
-        element.classList.remove('lazy');
-    };
-
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                lazyLoad(entry.target);
-                observer.unobserve(entry.target);
-            }
-        });
-    });
-
-    lazyElements.forEach(element => observer.observe(element));
-}
-
-/**
- * Get the actual rendered rectangle of a media element with object-fit: contain
- * @param {HTMLElement} mediaElement - The img or video element
- * @param {number} containerWidth - Width of the container
- * @param {number} containerHeight - Height of the container
- * @returns {Object} - Rect with left, top, right, bottom coordinates
- */
-export function getRenderedMediaRect(mediaElement, containerWidth, containerHeight) {
-    // Get natural dimensions of the media
-    const naturalWidth = mediaElement.naturalWidth || mediaElement.videoWidth || mediaElement.clientWidth;
-    const naturalHeight = mediaElement.naturalHeight || mediaElement.videoHeight || mediaElement.clientHeight;
-    
-    if (!naturalWidth || !naturalHeight) {
-        // Fallback if dimensions cannot be determined
-        return { left: 0, top: 0, right: containerWidth, bottom: containerHeight };
-    }
-    
-    // Calculate aspect ratios
-    const containerRatio = containerWidth / containerHeight;
-    const mediaRatio = naturalWidth / naturalHeight;
-    
-    let renderedWidth, renderedHeight, left = 0, top = 0;
-    
-    // Apply object-fit: contain logic
-    if (containerRatio > mediaRatio) {
-        // Container is wider than media - will have empty space on sides
-        renderedHeight = containerHeight;
-        renderedWidth = renderedHeight * mediaRatio;
-        left = (containerWidth - renderedWidth) / 2;
-    } else {
-        // Container is taller than media - will have empty space top/bottom
-        renderedWidth = containerWidth;
-        renderedHeight = renderedWidth / mediaRatio;
-        top = (containerHeight - renderedHeight) / 2;
-    }
-    
-    return {
-        left,
-        top,
-        right: left + renderedWidth,
-        bottom: top + renderedHeight
-    };
-}
-
-/**
- * Initialize metadata panel interaction handlers
- * @param {HTMLElement} container - Container element with media wrappers
- */
-export function initMetadataPanelHandlers(container) {
-    const mediaWrappers = container.querySelectorAll('.media-wrapper');
-    
-    mediaWrappers.forEach(wrapper => {
-        // Get the metadata panel and media element (img or video)
-        const metadataPanel = wrapper.querySelector('.image-metadata-panel');
-        const mediaElement = wrapper.querySelector('img, video');
-        
-        if (!metadataPanel || !mediaElement) return;
-        
-        let isOverMetadataPanel = false;
-        
-        // Add event listeners to the wrapper for mouse tracking
-        wrapper.addEventListener('mousemove', (e) => {
-            // Get mouse position relative to wrapper
-            const rect = wrapper.getBoundingClientRect();
-            const mouseX = e.clientX - rect.left;
-            const mouseY = e.clientY - rect.top;
-            
-            // Get the actual displayed dimensions of the media element
-            const mediaRect = getRenderedMediaRect(mediaElement, rect.width, rect.height);
-            
-            // Check if mouse is over the actual media content
-            const isOverMedia = (
-                mouseX >= mediaRect.left && 
-                mouseX <= mediaRect.right && 
-                mouseY >= mediaRect.top && 
-                mouseY <= mediaRect.bottom
-            );
-            
-            // Show metadata panel when over media content or metadata panel itself
-            if (isOverMedia || isOverMetadataPanel) {
-                metadataPanel.classList.add('visible');
-            } else {
-                metadataPanel.classList.remove('visible');
-            }
-        });
-        
-        wrapper.addEventListener('mouseleave', () => {
-            if (!isOverMetadataPanel) {
-                metadataPanel.classList.remove('visible');
-            }
-        });
-        
-        // Add mouse enter/leave events for the metadata panel itself
-        metadataPanel.addEventListener('mouseenter', () => {
-            isOverMetadataPanel = true;
-            metadataPanel.classList.add('visible');
-        });
-        
-        metadataPanel.addEventListener('mouseleave', () => {
-            isOverMetadataPanel = false;
-            // Only hide if mouse is not over the media
-            const rect = wrapper.getBoundingClientRect();
-            const mediaRect = getRenderedMediaRect(mediaElement, rect.width, rect.height);
-            const mouseX = event.clientX - rect.left;
-            const mouseY = event.clientY - rect.top;
-            
-            const isOverMedia = (
-                mouseX >= mediaRect.left && 
-                mouseX <= mediaRect.right && 
-                mouseY >= mediaRect.top && 
-                mouseY <= mediaRect.bottom
-            );
-            
-            if (!isOverMedia) {
-                metadataPanel.classList.remove('visible');
-            }
-        });
-        
-        // Prevent events from bubbling
-        metadataPanel.addEventListener('click', (e) => {
-            e.stopPropagation();
-        });
-        
-        // Handle copy prompt buttons
-        const copyBtns = metadataPanel.querySelectorAll('.copy-prompt-btn');
-        copyBtns.forEach(copyBtn => {
-            const promptIndex = copyBtn.dataset.promptIndex;
-            const promptElement = wrapper.querySelector(`#prompt-${promptIndex}`);
-            
-            copyBtn.addEventListener('click', async (e) => {
-                e.stopPropagation();
-                
-                if (!promptElement) return;
-                
-                try {
-                    await copyToClipboard(promptElement.textContent, 'Prompt copied to clipboard');
-                } catch (err) {
-                    console.error('Copy failed:', err);
-                    showToast('Copy failed', 'error');
-                }
-            });
-        });
-        
-        // Prevent panel scroll from causing modal scroll
-        metadataPanel.addEventListener('wheel', (e) => {
-            const isAtTop = metadataPanel.scrollTop === 0;
-            const isAtBottom = metadataPanel.scrollHeight - metadataPanel.scrollTop === metadataPanel.clientHeight;
-            
-            // Only prevent default if scrolling would cause the panel to scroll
-            if ((e.deltaY < 0 && !isAtTop) || (e.deltaY > 0 && !isAtBottom)) {
-                e.stopPropagation();
-            }
-        }, { passive: true });
-    });
-}
-
-/**
- * Initialize NSFW content blur toggle handlers
- * @param {HTMLElement} container - Container element with media wrappers
- */
-export function initNsfwBlurHandlers(container) {
-    // Handle toggle blur buttons
-    const toggleButtons = container.querySelectorAll('.toggle-blur-btn');
-    toggleButtons.forEach(btn => {
-        btn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const wrapper = btn.closest('.media-wrapper');
-            const media = wrapper.querySelector('img, video');
-            const isBlurred = media.classList.toggle('blurred');
-            const icon = btn.querySelector('i');
-            
-            // Update the icon based on blur state
-            if (isBlurred) {
-                icon.className = 'fas fa-eye';
-            } else {
-                icon.className = 'fas fa-eye-slash';
-            }
-            
-            // Toggle the overlay visibility
-            const overlay = wrapper.querySelector('.nsfw-overlay');
-            if (overlay) {
-                overlay.style.display = isBlurred ? 'flex' : 'none';
-            }
-        });
-    });
-    
-    // Handle "Show" buttons in overlays
-    const showButtons = container.querySelectorAll('.show-content-btn');
-    showButtons.forEach(btn => {
-        btn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const wrapper = btn.closest('.media-wrapper');
-            const media = wrapper.querySelector('img, video');
-            media.classList.remove('blurred');
-            
-            // Update the toggle button icon
-            const toggleBtn = wrapper.querySelector('.toggle-blur-btn');
-            if (toggleBtn) {
-                toggleBtn.querySelector('i').className = 'fas fa-eye-slash';
-            }
-            
-            // Hide the overlay
-            const overlay = wrapper.querySelector('.nsfw-overlay');
-            if (overlay) {
-                overlay.style.display = 'none';
-            }
-        });
-    });
-}
-
-/**
- * Toggle showcase expansion
- * @param {HTMLElement} element - The scroll indicator element
- */
-export function toggleShowcase(element) {
-    const carousel = element.nextElementSibling;
-    const isCollapsed = carousel.classList.contains('collapsed');
-    const indicator = element.querySelector('span');
-    const icon = element.querySelector('i');
-    
-    carousel.classList.toggle('collapsed');
-    
-    if (isCollapsed) {
-        const count = carousel.querySelectorAll('.media-wrapper').length;
-        indicator.textContent = `Scroll or click to hide examples`;
-        icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
-        initLazyLoading(carousel);
-        
-        // Initialize NSFW content blur toggle handlers
-        initNsfwBlurHandlers(carousel);
-        
-        // Initialize metadata panel interaction handlers
-        initMetadataPanelHandlers(carousel);
-    } else {
-        const count = carousel.querySelectorAll('.media-wrapper').length;
-        indicator.textContent = `Scroll or click to show ${count} examples`;
-        icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
-        
-        // Make sure any open metadata panels get closed
-        const carouselContainer = carousel.querySelector('.carousel-container');
-        if (carouselContainer) {
-            carouselContainer.style.height = '0';
-            setTimeout(() => {
-                carouselContainer.style.height = '';
-            }, 300);
-        }
-    }
-}
-
-/**
- * Set up showcase scroll functionality
- * @param {string} modalId - ID of the modal element
- */
-export function setupShowcaseScroll(modalId) {
-    // Listen for wheel events
-    document.addEventListener('wheel', (event) => {
-        const modalContent = document.querySelector(`#${modalId} .modal-content`);
-        if (!modalContent) return;
-        
-        const showcase = modalContent.querySelector('.showcase-section');
-        if (!showcase) return;
-        
-        const carousel = showcase.querySelector('.carousel');
-        const scrollIndicator = showcase.querySelector('.scroll-indicator');
-        
-        if (carousel?.classList.contains('collapsed') && event.deltaY > 0) {
-            const isNearBottom = modalContent.scrollHeight - modalContent.scrollTop - modalContent.clientHeight < 100;
-            
-            if (isNearBottom) {
-                toggleShowcase(scrollIndicator);
-                event.preventDefault();
-            }
-        }
-    }, { passive: false });
-    
-    // Use MutationObserver to set up back-to-top button when modal content is added
-    const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-            if (mutation.type === 'childList' && mutation.addedNodes.length) {
-                const modal = document.getElementById(modalId);
-                if (modal && modal.querySelector('.modal-content')) {
-                    setupBackToTopButton(modal.querySelector('.modal-content'));
-                }
-            }
-        }
-    });
-    
-    // Start observing the document body for changes
-    observer.observe(document.body, { childList: true, subtree: true });
-    
-    // Also try to set up the button immediately in case the modal is already open
-    const modalContent = document.querySelector(`#${modalId} .modal-content`);
-    if (modalContent) {
-        setupBackToTopButton(modalContent);
-    }
-}
-
-/**
- * Set up back-to-top button
- * @param {HTMLElement} modalContent - Modal content element
- */
-export function setupBackToTopButton(modalContent) {
-    // Remove any existing scroll listeners to avoid duplicates
-    modalContent.onscroll = null;
-    
-    // Add new scroll listener
-    modalContent.addEventListener('scroll', () => {
-        const backToTopBtn = modalContent.querySelector('.back-to-top');
-        if (backToTopBtn) {
-            if (modalContent.scrollTop > 300) {
-                backToTopBtn.classList.add('visible');
-            } else {
-                backToTopBtn.classList.remove('visible');
-            }
-        }
-    });
-    
-    // Trigger a scroll event to check initial position
-    modalContent.dispatchEvent(new Event('scroll'));
-}
-
-/**
- * Scroll to top of modal content
- * @param {HTMLElement} button - Back to top button element
- */
-export function scrollToTop(button) {
-    const modalContent = button.closest('.modal-content');
-    if (modalContent) {
-        modalContent.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-        });
-    }
-}
-
-/**
- * Get example image files for a specific model from the backend
- * @param {string} modelHash - The model's hash
- * @returns {Promise<Array>} Array of file objects with path and metadata
- */
-export async function getExampleImageFiles(modelHash) {
-  try {
-    const response = await fetch(`/api/example-image-files?model_hash=${modelHash}`);
-    const result = await response.json();
-    
-    if (result.success) {
-      return result.files;
-    } else {
-      console.error('Failed to get example image files:', result.error);
-      return [];
-    }
-  } catch (error) {
-    console.error('Error fetching example image files:', error);
-    return [];
-  }
 }

templates/checkpoints.html

@@ -16,7 +16,7 @@
 
 <div id="checkpointContextMenu" class="context-menu" style="display: none;">
     <!-- <div class="context-menu-item" data-action="details"><i class="fas fa-info-circle"></i> View Details</div> -->
-    <div class="context-menu-item" data-action="civitai"><i class="fas fa-external-link-alt"></i> View on CivitAI</div>
+    <!-- <div class="context-menu-item" data-action="civitai"><i class="fas fa-external-link-alt"></i> View on CivitAI</div> -->
     <div class="context-menu-item" data-action="refresh-metadata"><i class="fas fa-sync"></i> Refresh Civitai Data</div>
     <div class="context-menu-item" data-action="relink-civitai"><i class="fas fa-link"></i> Re-link to Civitai</div>
     <div class="context-menu-item" data-action="copyname"><i class="fas fa-copy"></i> Copy Model Filename</div>

templates/components/context_menu.html

@@ -2,9 +2,9 @@
     <!-- <div class="context-menu-item" data-action="detail">
         <i class="fas fa-info-circle"></i> Show Details
     </div> -->
-    <div class="context-menu-item" data-action="civitai">
+    <!-- <div class="context-menu-item" data-action="civitai">
         <i class="fas fa-external-link-alt"></i> View on Civitai
-    </div>
+    </div> -->
     <div class="context-menu-item" data-action="refresh-metadata">
         <i class="fas fa-sync"></i> Refresh Civitai Data
     </div>

templates/components/modals.html

@@ -229,7 +229,7 @@
             </div>
             
             <!-- Add Cache Management Section -->
-            <div class="settings-section">
+            <!-- <div class="settings-section">
                 <h3>Cache Management</h3>
                 
                 <div class="setting-item">
@@ -249,33 +249,13 @@
                         <span class="warning-text">May cause temporary performance impact during rebuild.</span>
                     </div>
                 </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="useCentralizedExamples">Use Centralized Example Storage</label>
-                        </div>
-                        <div class="setting-control">
-                            <label class="toggle-switch">
-                                <input type="checkbox" id="useCentralizedExamples" checked 
-                                       onchange="settingsManager.saveToggleSetting('useCentralizedExamples', 'use_centralized_examples')">
-                                <span class="toggle-slider"></span>
-                            </label>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        When enabled (recommended), example images are stored in a central folder for better organization and performance.
-                        When disabled, only example images stored alongside models (e.g., model-name.example.0.jpg) will be shown, but download 
-                        and management features will be unavailable.
-                    </div>
-                </div>
-                
-                <div class="setting-item" data-requires-centralized="true">
                     <div class="setting-row">
                         <div class="setting-info">
                             <label for="exampleImagesPath">Download Location <i class="fas fa-sync-alt restart-required-icon" title="Requires restart"></i></label>
@@ -291,29 +271,8 @@
                         Enter the folder path where example images from Civitai will be saved
                     </div>
                 </div>
-
-                <!-- New migrate section -->
-                <div class="setting-item" data-requires-centralized="true">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="exampleImagesMigratePattern">Migrate Existing Example Images</label>
-                        </div>
-                        <div class="setting-control migrate-control">
-                            <input type="text" id="exampleImagesMigratePattern" 
-                                placeholder="{model}.example.{index}.{ext}" 
-                                value="{model}.example.{index}.{ext}" />
-                            <button id="exampleImagesMigrateBtn" class="secondary-btn">
-                                <i class="fas fa-file-import"></i> <span>Migrate</span>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Pattern to find existing example images. Use {model} for model filename, {index} for numbering, and {ext} for file extension.<br>
-                        Example patterns: "{model}.example.{index}.{ext}", "{model}_{index}.{ext}", "{model}/{model}.example.{index}.{ext}"
-                    </div>
-                </div>
                 
-                <div class="setting-item" data-requires-centralized="true">
+                <div class="setting-item">
                     <div class="setting-row">
                         <div class="setting-info">
                             <label for="optimizeExampleImages">Optimize Downloaded Images</label>
@@ -327,7 +286,7 @@
                         </div>
                     </div>
                     <div class="input-help">
-                        Optimize example images to reduce file size and improve loading speed
+                        Optimize example images to reduce file size and improve loading speed (metadata will be preserved)
                     </div>
                 </div>
             </div>
@@ -432,6 +391,7 @@
                         <span class="label">Current Version:</span>
                         <span class="version-number">v0.0.0</span>
                     </div>
+                    <div class="git-info" style="display:none;">Commit: unknown</div>
                     <div class="new-version">
                         <span class="label">New Version:</span>
                         <span class="version-number">v0.0.0</span>
@@ -482,12 +442,16 @@
             <!-- Getting Started Tab -->
             <div class="tab-pane active" id="getting-started">
                 <h3>Getting Started with LoRA Manager</h3>
-                <div class="video-embed">
-                    <iframe src="https://www.youtube.com/embed/hvKw31YpE-U" 
-                            title="Getting Started with LoRA Manager" 
-                            frameborder="0" 
-                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                            allowfullscreen></iframe>
+                <div class="video-container">
+                    <div class="video-thumbnail" data-video-id="hvKw31YpE-U">
+                        <img src="/loras_static/images/video-thumbnails/getting-started.jpg" alt="Getting Started with LoRA Manager">
+                        <div class="video-play-overlay">
+                            <a href="https://www.youtube.com/watch?v=hvKw31YpE-U" target="_blank" class="external-link-btn">
+                                <i class="fas fa-external-link-alt"></i>
+                                <span>Watch on YouTube</span>
+                            </a>
+                        </div>
+                    </div>
                 </div>
                 <div class="help-text">
                     <h4>Key Features:</h4>
@@ -514,12 +478,16 @@
                 </h3>
                 <div class="video-list">
                     <div class="video-item">
-                        <div class="video-embed small">
-                            <iframe src="https://www.youtube.com/embed/videoseries?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj" 
-                                    title="LoRA Manager Updates" 
-                                    frameborder="0" 
-                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                                    allowfullscreen></iframe>
+                        <div class="video-container">
+                            <div class="video-thumbnail" data-video-id="videoseries?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj">
+                                <img src="/loras_static/images/video-thumbnails/updates-playlist.jpg" alt="LoRA Manager Updates Playlist">
+                                <div class="video-play-overlay">
+                                    <a href="https://www.youtube.com/playlist?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj" target="_blank" class="external-link-btn">
+                                        <i class="fas fa-external-link-alt"></i>
+                                        <span>Watch on YouTube</span>
+                                    </a>
+                                </div>
+                            </div>
                         </div>
                         <div class="video-info">
                             <h4>LoRA Manager Updates Playlist</h4>
@@ -528,7 +496,7 @@
                     </div>
                 </div>
             </div>
-            
+
             <!-- Documentation Tab -->
             <div class="tab-pane" id="documentation">
                 <h3>Documentation</h3>
@@ -590,10 +558,14 @@
         </div>
         <div class="input-group">
             <label for="civitaiModelUrl">Civitai Model URL:</label>
-            <input type="text" id="civitaiModelUrl" placeholder="https://civitai.com/models/1098030?modelVersionId=1233411" />
+            <input type="text" id="civitaiModelUrl" placeholder="https://civitai.com/models/649516/model-name?modelVersionId=726676" />
             <div class="input-error" id="civitaiModelUrlError"></div>
             <div class="input-help">
-                The URL must include the modelVersionId parameter.
+                Paste any Civitai model URL. Supported formats:<br>
+                • https://civitai.com/models/649516<br>
+                • https://civitai.com/models/649516?modelVersionId=726676<br>
+                • https://civitai.com/models/649516/model-name?modelVersionId=726676<br>
+                <em>Note: If no modelVersionId is provided, the latest version will be used.</em>
             </div>
         </div>
         <div class="modal-actions">
@@ -601,4 +573,32 @@
             <button class="confirm-btn" id="confirmRelinkBtn">Confirm Re-link</button>
         </div>
     </div>
+</div>
+
+<!-- Example Images Access Modal -->
+<div id="exampleAccessModal" class="modal">
+    <div class="modal-content example-access-modal">
+        <button class="close" onclick="modalManager.closeModal('exampleAccessModal')">&times;</button>
+        <h2>Local Example Images</h2>
+        <p>No local example images found for this model. View options:</p>
+
+        <div class="example-access-options">
+            <button id="downloadExamplesBtn" class="example-option-btn">
+                <i class="fas fa-cloud-download-alt"></i>
+                <span class="option-title">Download from Civitai</span>
+                <span class="option-desc">Save remote examples locally for offline use and faster loading</span>
+            </button>
+
+            <button id="importExamplesBtn" class="example-option-btn">
+                <i class="fas fa-file-import"></i>
+                <span class="option-title">Import Your Own</span>
+                <span class="option-desc">Add your own custom examples for this model</span>
+            </button>
+        </div>
+
+        <div class="modal-footer-note">
+            <i class="fas fa-info-circle"></i>
+            <span>Remote examples are still viewable in the model details even without local copies</span>
+        </div>
+    </div>
 </div>

web/comfyui/debug_metadata.js

@@ -0,0 +1,52 @@
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
+import { addJsonDisplayWidget } from "./json_display_widget.js";
+
+app.registerExtension({
+    name: "LoraManager.DebugMetadata",
+    
+    setup() {
+        // Add message handler to listen for metadata updates from Python
+        api.addEventListener("metadata_update", (event) => {
+            const { id, metadata } = event.detail;
+            this.handleMetadataUpdate(id, metadata);
+        });
+    },
+
+    async nodeCreated(node) {
+        if (node.comfyClass === "Debug Metadata (LoraManager)") {
+            // Enable widget serialization
+            node.serialize_widgets = true;
+
+            // Add a widget to display metadata
+            const jsonWidget = addJsonDisplayWidget(node, "metadata", {
+                defaultVal: "",
+            }).widget;
+            
+            // Store reference to the widget
+            node.jsonWidget = jsonWidget;
+
+            // Restore saved value if exists
+            if (node.widgets_values && node.widgets_values.length > 0) {
+                const savedValue = node.widgets_values[0];
+                if (savedValue) {
+                    jsonWidget.value = savedValue;
+                }
+            }
+        }
+    },
+    
+    // Handle metadata updates from Python
+    handleMetadataUpdate(id, metadata) {
+        const node = app.graph.getNodeById(+id);
+        if (!node || node.comfyClass !== "Debug Metadata (LoraManager)") {
+            console.warn("Node not found or not a DebugMetadata node:", id);
+            return;
+        }
+        
+        if (node.jsonWidget) {
+            // Update the widget with the received metadata
+            node.jsonWidget.value = metadata;
+        }
+    }
+});

web/comfyui/json_display_widget.js

@@ -0,0 +1,153 @@
+export function addJsonDisplayWidget(node, name, opts) {
+  // Create container for JSON display
+  const container = document.createElement("div");
+  container.className = "comfy-json-display-container";
+  
+  // Set initial height
+  const defaultHeight = 200;
+  container.style.setProperty('--comfy-widget-min-height', `${defaultHeight}px`);
+  container.style.setProperty('--comfy-widget-max-height', `${defaultHeight * 2}px`);
+  container.style.setProperty('--comfy-widget-height', `${defaultHeight}px`);
+  
+  Object.assign(container.style, {
+    display: "block",
+    padding: "8px",
+    backgroundColor: "rgba(40, 44, 52, 0.6)",
+    borderRadius: "6px",
+    width: "100%",
+    boxSizing: "border-box",
+    overflow: "auto",
+    overflowY: "scroll",
+    maxHeight: `${defaultHeight}px`,
+    fontFamily: "monospace",
+    fontSize: "12px",
+    lineHeight: "1.5",
+    whiteSpace: "pre-wrap",
+    color: "rgba(226, 232, 240, 0.9)"
+  });
+
+  // Initialize default value
+  const initialValue = opts?.defaultVal || "";
+  
+  // Function to format and display JSON content with syntax highlighting
+  const displayJson = (jsonString, widget) => {
+    try {
+      // If string is empty, show placeholder
+      if (!jsonString || jsonString.trim() === '') {
+        container.textContent = "No metadata available";
+        container.style.fontStyle = "italic";
+        container.style.color = "rgba(226, 232, 240, 0.6)";
+        container.style.textAlign = "center";
+        container.style.padding = "20px 0";
+        return;
+      }
+      
+      // Try to parse and pretty-print if it's valid JSON
+      try {
+        const jsonObj = JSON.parse(jsonString);
+        container.innerHTML = syntaxHighlight(JSON.stringify(jsonObj, null, 2));
+      } catch (e) {
+        // If not valid JSON, display as-is
+        container.textContent = jsonString;
+      }
+      
+      container.style.fontStyle = "normal";
+      container.style.textAlign = "left";
+      container.style.padding = "8px";
+    } catch (error) {
+      console.error("Error displaying JSON:", error);
+      container.textContent = "Error displaying content";
+    }
+  };
+
+  // Function to add syntax highlighting to JSON
+  function syntaxHighlight(json) {
+    // Color scheme
+    const colors = {
+      key: "#6ad6f5",       // Light blue for keys
+      string: "#98c379",    // Soft green for strings
+      number: "#e5c07b",    // Amber for numbers
+      boolean: "#c678dd",   // Purple for booleans
+      null: "#7f848e"       // Gray for null
+    };
+    
+    // Replace JSON syntax with highlighted HTML
+    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    
+    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+      let cls = 'number';
+      let color = colors.number;
+      
+      if (/^"/.test(match)) {
+        if (/:$/.test(match)) {
+          cls = 'key';
+          color = colors.key;
+          // Remove the colon from the key and add it back without color
+          match = match.replace(/:$/, '');
+          return '<span style="color:' + color + ';">' + match + '</span>:';
+        } else {
+          cls = 'string';
+          color = colors.string;
+        }
+      } else if (/true|false/.test(match)) {
+        cls = 'boolean';
+        color = colors.boolean;
+      } else if (/null/.test(match)) {
+        cls = 'null';
+        color = colors.null;
+      }
+      
+      return '<span style="color:' + color + ';">' + match + '</span>';
+    });
+  }
+  
+  // Store the value
+  let widgetValue = initialValue;
+
+  // Create widget with DOM Widget API
+  const widget = node.addDOMWidget(name, "custom", container, {
+    getValue: function() {
+      return widgetValue;
+    },
+    setValue: function(v) {
+      widgetValue = v;
+      displayJson(widgetValue, widget);
+    },
+    getMinHeight: function() {
+      return parseInt(container.style.getPropertyValue('--comfy-widget-min-height')) || defaultHeight;
+    },
+    getMaxHeight: function() {
+      return parseInt(container.style.getPropertyValue('--comfy-widget-max-height')) || defaultHeight * 2;
+    },
+    getHeight: function() {
+      // Return actual container height to reduce the gap
+      return parseInt(container.style.getPropertyValue('--comfy-widget-height')) || defaultHeight;
+    },
+    hideOnZoom: true
+  });
+
+  // Set initial value
+  widget.value = initialValue;
+
+  widget.serializeValue = () => {
+    return widgetValue;
+  };
+
+  // Update widget when node is resized
+  const onNodeResize = node.onResize;
+  node.onResize = function(size) {
+    if(onNodeResize) {
+      onNodeResize.call(this, size);
+    }
+    
+    // Adjust container height to node height
+    if(size && size[1]) {
+      // Reduce the offset to minimize the gap at the bottom
+      const widgetHeight = Math.min(size[1] - 30, defaultHeight * 2); // Reduced from 80 to 30
+      container.style.maxHeight = `${widgetHeight}px`;
+      container.style.setProperty('--comfy-widget-height', `${widgetHeight}px`);
+    }
+  };
+
+  return { minWidth: 300, minHeight: defaultHeight, widget };
+}

web/comfyui/tags_widget.js

@@ -131,7 +131,7 @@ export function addTagsWidget(node, name, opts, callback) {
   // Helper function to update tag style based on active state
   function updateTagStyle(tagEl, active) {
     const baseStyles = {
-      padding: "4px 10px", // Slightly reduced horizontal padding
+      padding: "3px 10px", // Adjusted vertical padding to balance text
       borderRadius: "6px",
       maxWidth: "200px",
       overflow: "hidden",
@@ -141,18 +141,22 @@ export function addTagsWidget(node, name, opts, callback) {
       cursor: "pointer",
       transition: "all 0.2s ease",
       border: "1px solid transparent",
-      display: "inline-flex", // Changed to inline-flex for better text alignment
-      alignItems: "center", // Center text vertically
-      justifyContent: "center", // Center text horizontally
+      display: "inline-block", // inline-block for better text truncation
       boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
-      margin: "1px", // Reduced margin
+      margin: "1px", 
       userSelect: "none",
       WebkitUserSelect: "none",
       MozUserSelect: "none",
       msUserSelect: "none",
-      height: "20px", // Slightly increased height to prevent text cutoff
-      minHeight: "20px", // Ensure consistent height
-      boxSizing: "border-box" // Ensure padding doesn't affect the overall size
+      height: "22px", // Increased height to better fit text with descenders
+      minHeight: "22px", // Matching minHeight
+      boxSizing: "border-box",
+      width: "fit-content",
+      maxWidth: "200px",
+      lineHeight: "16px", // Added explicit line-height
+      verticalAlign: "middle", // Added vertical alignment
+      position: "relative", // For better text positioning
+      textAlign: "center", // Center text horizontally
     };
 
     if (active) {
@@ -225,4 +229,4 @@ export function addTagsWidget(node, name, opts, callback) {
   };
 
   return { minWidth: 300, minHeight: defaultHeight, widget };
-} 
+}

web/comfyui/ui_utils.js

@@ -104,6 +104,45 @@ const initializeWidgets = () => {
     addWidget('.comfy-menu', addWidgetMenu);
 };
 
+// Fetch version info from the API
+const fetchVersionInfo = async () => {
+    try {
+        const response = await fetch('/api/version-info');
+        const data = await response.json();
+        
+        if (data.success) {
+            return data.version;
+        }
+        return '';
+    } catch (error) {
+        console.error('Error fetching version info:', error);
+        return '';
+    }
+};
+
+// Register about badge with version info
+const registerAboutBadge = async () => {
+    let version = await fetchVersionInfo();
+    const label = version ? `LoRA-Manager v${version}` : 'LoRA-Manager';
+    
+    app.registerExtension({
+        name: 'LoraManager.AboutBadge',
+        aboutPageBadges: [
+            {
+                label: label,
+                url: 'https://github.com/willmiao/ComfyUI-Lora-Manager',
+                icon: 'pi pi-tags'
+            }
+        ]
+    });
+};
+
+// Initialize everything
+const initialize = () => {
+    initializeWidgets();
+    registerAboutBadge();
+};
+
 const getLoraManagerIcon = () => {
     return `
         <svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
@@ -144,4 +183,4 @@ const getLoraManagerIcon = () => {
     `;
 };
 
-initializeWidgets();
+initialize();