Update version to 0.8.5 and add release notes for enhanced features and improvements

feat: Add pulse animation to filter indicators in Lora and recipe management
refactor: Change filter-active button to a div for better semantic structure

.gitignore

@@ -1,4 +1,5 @@
 __pycache__/
 settings.json
 output/*
-py/run_test.py
+py/run_test.py
+.vscode/

README.md

@@ -14,11 +14,44 @@ A comprehensive toolset that streamlines organizing, downloading, and applying L
 Watch this quick tutorial to learn how to use the new one-click LoRA integration feature:
 
 [![One-Click LoRA Integration Tutorial](https://img.youtube.com/vi/qS95OjX3e70/0.jpg)](https://youtu.be/qS95OjX3e70)
+[![LoRA Manager v0.8.0 - New Recipe Feature & Bulk Operations](https://img.youtube.com/vi/noN7f_ER7yo/0.jpg)](https://youtu.be/noN7f_ER7yo)
 
 ---
 
 ## Release Notes
 
+### v0.8.5
+* **Enhanced LoRA & Recipe Connectivity** - Added Recipes tab in LoRA details to see all recipes using a specific LoRA
+* **Improved Navigation** - New shortcuts to jump between related LoRAs and Recipes with one-click navigation
+* **Video Preview Controls** - Added "Autoplay Videos on Hover" setting to optimize performance and reduce resource usage
+* **UI Experience Refinements** - Smoother transitions between related content pages
+
+### v0.8.4
+* **Node Layout Improvements** - Fixed layout issues with LoRA Loader and Trigger Words Toggle nodes in newer ComfyUI frontend versions
+* **Recipe LoRA Reconnection** - Added ability to reconnect deleted LoRAs in recipes by clicking the "deleted" badge in recipe details
+* **Bug Fixes & Stability** - Resolved various issues for improved reliability
+
+### v0.8.3
+* **Enhanced Workflow Parser** - Rebuilt workflow analysis engine with improved support for ComfyUI core nodes and easier extensibility
+* **Improved Recipe System** - Refined the experimental Save Recipe functionality with better workflow integration
+* **New Save Image Node** - Added experimental node with metadata support for perfect CivitAI compatibility
+  * Supports dynamic filename prefixes with variables [1](https://github.com/nkchocoai/ComfyUI-SaveImageWithMetaData?tab=readme-ov-file#filename_prefix)
+* **Default LoRA Root Setting** - Added configuration option for setting your preferred LoRA directory
+
+### v0.8.2  
+* **Faster Initialization for Forge Users** - Improved first-run efficiency by utilizing existing `.json` and `.civitai.info` files from Forge’s CivitAI helper extension, making migration smoother.  
+* **LoRA Filename Editing** - Added support for renaming LoRA files directly within LoRA Manager.  
+* **Recipe Editing** - Users can now edit recipe names and tags.  
+* **Retain Deleted LoRAs in Recipes** - Deleted LoRAs will remain listed in recipes, allowing future functionality to reconnect them once re-obtained.  
+* **Download Missing LoRAs from Recipes** - Easily fetch missing LoRAs associated with a recipe.
+
+### v0.8.1
+* **Base Model Correction** - Added support for modifying base model associations to fix incorrect metadata for non-CivitAI LoRAs
+* **LoRA Loader Flexibility** - Made CLIP input optional for model-only workflows like Hunyuan video generation
+* **Expanded Recipe Support** - Added compatibility with 3 additional recipe metadata formats
+* **Enhanced Showcase Images** - Generation parameters now displayed alongside LoRA preview images
+* **UI Improvements & Bug Fixes** - Various interface refinements and stability enhancements
+
 ### v0.8.0
 * **Introduced LoRA Recipes** - Create, import, save, and share your favorite LoRA combinations
 * **Recipe Management System** - Easily browse, search, and organize your LoRA recipes
@@ -27,52 +60,6 @@ Watch this quick tutorial to learn how to use the new one-click LoRA integration
 * **Enhanced UI & UX** - Improved interface design and user experience
 * **Bug Fixes & Stability** - Resolved various issues and enhanced overall performance
 
-### v0.7.37
-* Added NSFW content control settings (blur mature content and SFW-only filter)
-* Implemented intelligent blur effects for previews and showcase media
-* Added manual content rating option through context menu
-* Enhanced user experience with configurable content visibility
-* Fixed various bugs and improved stability
-
-### v0.7.36
-* Enhanced LoRA details view with model descriptions and tags display
-* Added tag filtering system for improved model discovery
-* Implemented editable trigger words functionality
-* Improved TriggerWord Toggle node with new group mode option for granular control
-* Added new Lora Stacker node with cross-compatibility support (works with efficiency nodes, ComfyRoll, easy-use, etc.)
-* Fixed several bugs
-
-### v0.7.35-beta
-* Added base model filtering
-* Implemented bulk operations (copy syntax, move multiple LoRAs)
-* Added ability to edit LoRA model names in details view
-* Added update checker with notification system
-* Added support modal for user feedback and community links
-
-### v0.7.33
-* Enhanced LoRA Loader node with visual strength adjustment widgets
-* Added toggle switches for LoRA enable/disable
-* Implemented image tooltips for LoRA preview
-* Added TriggerWord Toggle node with visual word selection
-* Fixed various bugs and improved stability
-
-### v0.7.3
-* Added "Lora Loader (LoraManager)" custom node for workflows
-* Implemented one-click LoRA integration
-* Added direct copying of LoRA syntax from manager interface
-* Added automatic preset strength value application
-* Added automatic trigger word loading
-
-### v0.7.0
-* Added direct CivitAI integration for downloading LoRAs
-* Implemented version selection for model downloads
-* Added target folder selection for downloads
-* Added context menu with quick actions
-* Added force refresh for CivitAI data
-* Implemented LoRA movement between folders
-* Added personal usage tips and notes for LoRAs
-* Improved performance for details window
-
 [View Update History](./update_logs.md)
 
 ---
@@ -156,6 +143,15 @@ pip install requirements.txt
 
 ---
 
+## Credits
+
+This project has been inspired by and benefited from other excellent ComfyUI extensions:
+
+- [ComfyUI-SaveImageWithMetaData](https://github.com/Comfy-Community/ComfyUI-SaveImageWithMetaData) - For the image metadata functionality
+- [rgthree-comfy](https://github.com/rgthree/rgthree-comfy) - For the lora loader functionality
+
+---
+
 ## Contributing
 
 If you have suggestions, bug reports, or improvements, feel free to open an issue or contribute directly to the codebase. Pull requests are always welcome!

__init__.py

@@ -2,13 +2,13 @@ from .py.lora_manager import LoraManager
 from .py.nodes.lora_loader import LoraManagerLoader
 from .py.nodes.trigger_word_toggle import TriggerWordToggle
 from .py.nodes.lora_stacker import LoraStacker
-# from .py.nodes.save_image import SaveImage
+from .py.nodes.save_image import SaveImage
 
 NODE_CLASS_MAPPINGS = {
     LoraManagerLoader.NAME: LoraManagerLoader,
     TriggerWordToggle.NAME: TriggerWordToggle,
     LoraStacker.NAME: LoraStacker,
-    # SaveImage.NAME: SaveImage
+    SaveImage.NAME: SaveImage
 }
 
 WEB_DIRECTORY = "./web/comfyui"

py/config.py

@@ -85,6 +85,17 @@ class Config:
                 mapped_path = normalized_path.replace(target_path, link_path, 1)
                 return mapped_path
         return path
+    
+    def map_link_to_path(self, link_path: str) -> str:
+        """将符号链接路径映射回实际路径"""
+        normalized_link = os.path.normpath(link_path).replace(os.sep, '/')
+        # 检查路径是否包含在任何映射的目标路径中
+        for target_path, link_path in self._path_mappings.items():
+            if normalized_link.startswith(target_path):
+                # 如果路径以目标路径开头，则替换为实际路径
+                mapped_path = normalized_link.replace(target_path, link_path, 1)
+                return mapped_path
+        return link_path
 
     def _init_lora_paths(self) -> List[str]:
         """Initialize and validate LoRA paths from ComfyUI settings"""

py/nodes/lora_loader.py

@@ -18,7 +18,7 @@ class LoraManagerLoader:
         return {
             "required": {
                 "model": ("MODEL",),
-                "clip": ("CLIP",),
+                # "clip": ("CLIP",),
                 "text": (IO.STRING, {
                     "multiline": True, 
                     "dynamicPrompts": True, 
@@ -75,11 +75,12 @@ class LoraManagerLoader:
             logger.warning(f"Unexpected loras format: {type(loras_data)}")
             return []
     
-    def load_loras(self, model, clip, text, **kwargs):
+    def load_loras(self, model, text, **kwargs):
         """Loads multiple LoRAs based on the kwargs input and lora_stack."""
         loaded_loras = []
         all_trigger_words = []
         
+        clip = kwargs.get('clip', None)
         lora_stack = kwargs.get('lora_stack', None)
         # First process lora_stack if available
         if lora_stack:

py/nodes/lora_stacker.py

@@ -26,8 +26,8 @@ class LoraStacker:
             "optional": FlexibleOptionalInputType(any_type),
         }
 
-    RETURN_TYPES = ("LORA_STACK", IO.STRING)
-    RETURN_NAMES = ("LORA_STACK", "trigger_words")
+    RETURN_TYPES = ("LORA_STACK", IO.STRING, IO.STRING)
+    RETURN_NAMES = ("LORA_STACK", "trigger_words", "active_loras")
     FUNCTION = "stack_loras"
 
     async def get_lora_info(self, lora_name):
@@ -75,6 +75,7 @@ class LoraStacker:
     def stack_loras(self, text, **kwargs):
         """Stacks multiple LoRAs based on the kwargs input without loading them."""
         stack = []
+        active_loras = []
         all_trigger_words = []
         
         # Process existing lora_stack if available
@@ -103,11 +104,15 @@ class LoraStacker:
             # Add to stack without loading
             # replace '/' with os.sep to avoid different OS path format
             stack.append((lora_path.replace('/', os.sep), model_strength, clip_strength))
+            active_loras.append((lora_name, model_strength))
             
             # Add trigger words to collection
             all_trigger_words.extend(trigger_words)
         
         # use ',, ' to separate trigger words for group mode
         trigger_words_text = ",, ".join(all_trigger_words) if all_trigger_words else ""
+        # Format active_loras as <lora:lora_name:strength> separated by spaces
+        active_loras_text = " ".join([f"<lora:{name}:{str(strength).strip()}>" 
+                                  for name, strength in active_loras])
 
-        return (stack, trigger_words_text)
+        return (stack, trigger_words_text, active_loras_text)

py/nodes/save_image.py

@@ -1,16 +1,44 @@
 import json
-from server import PromptServer # type: ignore
+import os
+import asyncio
+import re
+import numpy as np
+import folder_paths # type: ignore
+from ..services.lora_scanner import LoraScanner
+from ..workflow.parser import WorkflowParser
+from PIL import Image, PngImagePlugin
+import piexif
+from io import BytesIO
 
 class SaveImage:
     NAME = "Save Image (LoraManager)"
     CATEGORY = "Lora Manager/utils"
-    DESCRIPTION = "Experimental node to display image preview and print prompt and extra_pnginfo"
+    DESCRIPTION = "Save images with embedded generation metadata in compatible format"
+
+    def __init__(self):
+        self.output_dir = folder_paths.get_output_directory()
+        self.type = "output"
+        self.prefix_append = ""
+        self.compress_level = 4
+        self.counter = 0
+    
+    # Add pattern format regex for filename substitution
+    pattern_format = re.compile(r"(%[^%]+%)")
     
     @classmethod
     def INPUT_TYPES(cls):
         return {
             "required": {
-                "image": ("IMAGE",),
+                "images": ("IMAGE",),
+                "filename_prefix": ("STRING", {"default": "ComfyUI"}),
+                "file_format": (["png", "jpeg", "webp"],),
+            },
+            "optional": {
+                "custom_prompt": ("STRING", {"default": "", "forceInput": True}),
+                "lossless_webp": ("BOOLEAN", {"default": True}),
+                "quality": ("INT", {"default": 100, "min": 1, "max": 100}),
+                "embed_workflow": ("BOOLEAN", {"default": False}),
+                "add_counter_to_filename": ("BOOLEAN", {"default": True}),
             },
             "hidden": {
                 "prompt": "PROMPT",
@@ -19,23 +47,329 @@ class SaveImage:
         }
 
     RETURN_TYPES = ("IMAGE",)
-    RETURN_NAMES = ("image",)
+    RETURN_NAMES = ("images",)
     FUNCTION = "process_image"
+    OUTPUT_NODE = True
 
-    def process_image(self, image, prompt=None, extra_pnginfo=None):
-        # Print the prompt information
-        print("SaveImage Node - Prompt:")
+    async def get_lora_hash(self, lora_name):
+        """Get the lora hash from cache"""
+        scanner = await LoraScanner.get_instance()
+        cache = await scanner.get_cached_data()
+        
+        for item in cache.raw_data:
+            if item.get('file_name') == lora_name:
+                return item.get('sha256')
+        return None
+
+    async def format_metadata(self, parsed_workflow, custom_prompt=None):
+        """Format metadata in the requested format similar to userComment example"""
+        if not parsed_workflow:
+            return ""
+        
+        # Extract the prompt and negative prompt
+        prompt = parsed_workflow.get('prompt', '')
+        negative_prompt = parsed_workflow.get('negative_prompt', '')
+        
+        # Override prompt with custom_prompt if provided
+        if custom_prompt:
+            prompt = custom_prompt
+        
+        # Extract loras from the prompt if present
+        loras_text = parsed_workflow.get('loras', '')
+        lora_hashes = {}
+        
+        # If loras are found, add them on a new line after the prompt
+        if loras_text:
+            prompt_with_loras = f"{prompt}\n{loras_text}"
+            
+            # Extract lora names from the format <lora:name:strength>
+            lora_matches = re.findall(r'<lora:([^:]+):([^>]+)>', loras_text)
+            
+            # Get hash for each lora
+            for lora_name, strength in lora_matches:
+                hash_value = await self.get_lora_hash(lora_name)
+                if hash_value:
+                    lora_hashes[lora_name] = hash_value
+        else:
+            prompt_with_loras = prompt
+        
+        # Format the first part (prompt and loras)
+        metadata_parts = [prompt_with_loras]
+        
+        # Add negative prompt
+        if negative_prompt:
+            metadata_parts.append(f"Negative prompt: {negative_prompt}")
+        
+        # Format the second part (generation parameters)
+        params = []
+        
+        # Add standard parameters in the correct order
+        if 'steps' in parsed_workflow:
+            params.append(f"Steps: {parsed_workflow.get('steps')}")
+        
+        if 'sampler' in parsed_workflow:
+            sampler = parsed_workflow.get('sampler')
+            # Convert ComfyUI sampler names to user-friendly names
+            sampler_mapping = {
+                'euler': 'Euler',
+                'euler_ancestral': 'Euler a',
+                'dpm_2': 'DPM2',
+                'dpm_2_ancestral': 'DPM2 a',
+                'heun': 'Heun',
+                'dpm_fast': 'DPM fast',
+                'dpm_adaptive': 'DPM adaptive',
+                'lms': 'LMS',
+                'dpmpp_2s_ancestral': 'DPM++ 2S a',
+                'dpmpp_sde': 'DPM++ SDE',
+                'dpmpp_sde_gpu': 'DPM++ SDE',
+                'dpmpp_2m': 'DPM++ 2M',
+                'dpmpp_2m_sde': 'DPM++ 2M SDE',
+                'dpmpp_2m_sde_gpu': 'DPM++ 2M SDE',
+                'ddim': 'DDIM'
+            }
+            sampler_name = sampler_mapping.get(sampler, sampler)
+            params.append(f"Sampler: {sampler_name}")
+        
+        if 'scheduler' in parsed_workflow:
+            scheduler = parsed_workflow.get('scheduler')
+            scheduler_mapping = {
+                'normal': 'Simple',
+                'karras': 'Karras',
+                'exponential': 'Exponential',
+                'sgm_uniform': 'SGM Uniform',
+                'sgm_quadratic': 'SGM Quadratic'
+            }
+            scheduler_name = scheduler_mapping.get(scheduler, scheduler)
+            params.append(f"Schedule type: {scheduler_name}")
+        
+        # CFG scale (cfg in parsed_workflow)
+        if 'cfg_scale' in parsed_workflow:
+            params.append(f"CFG scale: {parsed_workflow.get('cfg_scale')}")
+        elif 'cfg' in parsed_workflow:
+            params.append(f"CFG scale: {parsed_workflow.get('cfg')}")
+        
+        # Seed
+        if 'seed' in parsed_workflow:
+            params.append(f"Seed: {parsed_workflow.get('seed')}")
+        
+        # Size
+        if 'size' in parsed_workflow:
+            params.append(f"Size: {parsed_workflow.get('size')}")
+        
+        # Model info
+        if 'checkpoint' in parsed_workflow:
+            # Extract basename without path
+            checkpoint = os.path.basename(parsed_workflow.get('checkpoint', ''))
+            # Remove extension if present
+            checkpoint = os.path.splitext(checkpoint)[0]
+            params.append(f"Model: {checkpoint}")
+        
+        # Add LoRA hashes if available
+        if lora_hashes:
+            lora_hash_parts = []
+            for lora_name, hash_value in lora_hashes.items():
+                lora_hash_parts.append(f"{lora_name}: {hash_value}")
+            
+            if lora_hash_parts:
+                params.append(f"Lora hashes: \"{', '.join(lora_hash_parts)}\"")
+        
+        # Combine all parameters with commas
+        metadata_parts.append(", ".join(params))
+        
+        # Join all parts with a new line
+        return "\n".join(metadata_parts)
+
+    # credit to nkchocoai
+    # Add format_filename method to handle pattern substitution
+    def format_filename(self, filename, parsed_workflow):
+        """Format filename with metadata values"""
+        if not parsed_workflow:
+            return filename
+            
+        result = re.findall(self.pattern_format, filename)
+        for segment in result:
+            parts = segment.replace("%", "").split(":")
+            key = parts[0]
+            
+            if key == "seed" and 'seed' in parsed_workflow:
+                filename = filename.replace(segment, str(parsed_workflow.get('seed', '')))
+            elif key == "width" and 'size' in parsed_workflow:
+                size = parsed_workflow.get('size', 'x')
+                w = size.split('x')[0] if isinstance(size, str) else size[0]
+                filename = filename.replace(segment, str(w))
+            elif key == "height" and 'size' in parsed_workflow:
+                size = parsed_workflow.get('size', 'x')
+                h = size.split('x')[1] if isinstance(size, str) else size[1]
+                filename = filename.replace(segment, str(h))
+            elif key == "pprompt" and 'prompt' in parsed_workflow:
+                prompt = parsed_workflow.get('prompt', '').replace("\n", " ")
+                if len(parts) >= 2:
+                    length = int(parts[1])
+                    prompt = prompt[:length]
+                filename = filename.replace(segment, prompt.strip())
+            elif key == "nprompt" and 'negative_prompt' in parsed_workflow:
+                prompt = parsed_workflow.get('negative_prompt', '').replace("\n", " ")
+                if len(parts) >= 2:
+                    length = int(parts[1])
+                    prompt = prompt[:length]
+                filename = filename.replace(segment, prompt.strip())
+            elif key == "model" and 'checkpoint' in parsed_workflow:
+                model = parsed_workflow.get('checkpoint', '')
+                model = os.path.splitext(os.path.basename(model))[0]
+                if len(parts) >= 2:
+                    length = int(parts[1])
+                    model = model[:length]
+                filename = filename.replace(segment, model)
+            elif key == "date":
+                from datetime import datetime
+                now = datetime.now()
+                date_table = {
+                    "yyyy": str(now.year),
+                    "MM": str(now.month).zfill(2),
+                    "dd": str(now.day).zfill(2),
+                    "hh": str(now.hour).zfill(2),
+                    "mm": str(now.minute).zfill(2),
+                    "ss": str(now.second).zfill(2),
+                }
+                if len(parts) >= 2:
+                    date_format = parts[1]
+                    for k, v in date_table.items():
+                        date_format = date_format.replace(k, v)
+                    filename = filename.replace(segment, date_format)
+                else:
+                    date_format = "yyyyMMddhhmmss"
+                    for k, v in date_table.items():
+                        date_format = date_format.replace(k, v)
+                    filename = filename.replace(segment, date_format)
+                    
+        return filename
+
+    def save_images(self, images, filename_prefix, file_format, prompt=None, extra_pnginfo=None, 
+                   lossless_webp=True, quality=100, embed_workflow=False, add_counter_to_filename=True,
+                   custom_prompt=None):
+        """Save images with metadata"""
+        results = []
+        
+        # Parse the workflow using the WorkflowParser
+        parser = WorkflowParser()
         if prompt:
-            print(json.dumps(prompt, indent=2))
+            parsed_workflow = parser.parse_workflow(prompt)
         else:
-            print("No prompt information available")
+            parsed_workflow = {}
+            
+        # Get or create metadata asynchronously
+        metadata = asyncio.run(self.format_metadata(parsed_workflow, custom_prompt))
         
-        # Print the extra_pnginfo
-        print("\nSaveImage Node - Extra PNG Info:")
-        if extra_pnginfo:
-            print(json.dumps(extra_pnginfo, indent=2))
-        else:
-            print("No extra PNG info available")
+        # Process filename_prefix with pattern substitution
+        filename_prefix = self.format_filename(filename_prefix, parsed_workflow)
         
-        # Return the image unchanged
-        return (image,)
+        # Get initial save path info once for the batch
+        full_output_folder, filename, counter, subfolder, processed_prefix = folder_paths.get_save_image_path(
+            filename_prefix, self.output_dir, images[0].shape[1], images[0].shape[0]
+        )
+        
+        # Create directory if it doesn't exist
+        if not os.path.exists(full_output_folder):
+            os.makedirs(full_output_folder, exist_ok=True)
+        
+        # Process each image with incrementing counter
+        for i, image in enumerate(images):
+            # Convert the tensor image to numpy array
+            img = 255. * image.cpu().numpy()
+            img = Image.fromarray(np.clip(img, 0, 255).astype(np.uint8))
+            
+            # Generate filename with counter if needed
+            base_filename = filename
+            if add_counter_to_filename:
+                # Use counter + i to ensure unique filenames for all images in batch
+                current_counter = counter + i
+                base_filename += f"_{current_counter:05}"
+                
+            # Set file extension and prepare saving parameters
+            if file_format == "png":
+                file = base_filename + ".png"
+                file_extension = ".png"
+                save_kwargs = {"optimize": True, "compress_level": self.compress_level}
+                pnginfo = PngImagePlugin.PngInfo()
+            elif file_format == "jpeg":
+                file = base_filename + ".jpg"
+                file_extension = ".jpg"
+                save_kwargs = {"quality": quality, "optimize": True}
+            elif file_format == "webp":
+                file = base_filename + ".webp" 
+                file_extension = ".webp"
+                save_kwargs = {"quality": quality, "lossless": lossless_webp}
+            
+            # Full save path
+            file_path = os.path.join(full_output_folder, file)
+            
+            # Save the image with metadata
+            try:
+                if file_format == "png":
+                    if metadata:
+                        pnginfo.add_text("parameters", metadata)
+                    if embed_workflow and extra_pnginfo is not None:
+                        workflow_json = json.dumps(extra_pnginfo["workflow"])
+                        pnginfo.add_text("workflow", workflow_json)
+                    save_kwargs["pnginfo"] = pnginfo
+                    img.save(file_path, format="PNG", **save_kwargs)
+                elif file_format == "jpeg":
+                    # For JPEG, use piexif
+                    if metadata:
+                        try:
+                            exif_dict = {'Exif': {piexif.ExifIFD.UserComment: b'UNICODE\0' + metadata.encode('utf-16be')}}
+                            exif_bytes = piexif.dump(exif_dict)
+                            save_kwargs["exif"] = exif_bytes
+                        except Exception as e:
+                            print(f"Error adding EXIF data: {e}")
+                    img.save(file_path, format="JPEG", **save_kwargs)
+                elif file_format == "webp":
+                    # For WebP, also use piexif for metadata
+                    if metadata:
+                        try:
+                            exif_dict = {'Exif': {piexif.ExifIFD.UserComment: b'UNICODE\0' + metadata.encode('utf-16be')}}
+                            exif_bytes = piexif.dump(exif_dict)
+                            save_kwargs["exif"] = exif_bytes
+                        except Exception as e:
+                            print(f"Error adding EXIF data: {e}")
+                    img.save(file_path, format="WEBP", **save_kwargs)
+                
+                results.append({
+                    "filename": file,
+                    "subfolder": subfolder,
+                    "type": self.type
+                })
+                
+            except Exception as e:
+                print(f"Error saving image: {e}")
+        
+        return results
+
+    def process_image(self, images, filename_prefix="ComfyUI", file_format="png", prompt=None, extra_pnginfo=None,
+                     lossless_webp=True, quality=100, embed_workflow=False, add_counter_to_filename=True,
+                     custom_prompt=""):
+        """Process and save image with metadata"""
+        # Make sure the output directory exists
+        os.makedirs(self.output_dir, exist_ok=True)
+        
+        # Ensure images is always a list of images
+        if len(images.shape) == 3:  # Single image (height, width, channels)
+            images = [images]
+        else:  # Multiple images (batch, height, width, channels)
+            images = [img for img in images]
+        
+        # Save all images
+        results = self.save_images(
+            images, 
+            filename_prefix, 
+            file_format, 
+            prompt, 
+            extra_pnginfo,
+            lossless_webp,
+            quality,
+            embed_workflow,
+            add_counter_to_filename,
+            custom_prompt if custom_prompt.strip() else None
+        )
+        
+        return (images,)

py/routes/api_routes.py

@@ -42,6 +42,8 @@ class ApiRoutes:
         app.router.add_get('/api/lora-roots', routes.get_lora_roots)
         app.router.add_get('/api/folders', routes.get_folders)
         app.router.add_get('/api/civitai/versions/{model_id}', routes.get_civitai_versions)
+        app.router.add_get('/api/civitai/model/{modelVersionId}', routes.get_civitai_model)
+        app.router.add_get('/api/civitai/model/{hash}', routes.get_civitai_model)
         app.router.add_post('/api/download-lora', routes.download_lora)
         app.router.add_post('/api/settings', routes.update_settings)
         app.router.add_post('/api/move_model', routes.move_model)
@@ -52,6 +54,7 @@ class ApiRoutes:
         app.router.add_get('/api/loras/top-tags', routes.get_top_tags)  # Add new route for top tags
         app.router.add_get('/api/loras/base-models', routes.get_base_models)  # Add new route for base models
         app.router.add_get('/api/lora-civitai-url', routes.get_lora_civitai_url)  # Add new route for Civitai URL
+        app.router.add_post('/api/rename_lora', routes.rename_lora)  # Add new route for renaming LoRA files
 
         # Add update check routes
         UpdateRoutes.setup_routes(app)
@@ -129,13 +132,9 @@ class ApiRoutes:
             page = int(request.query.get('page', '1'))
             page_size = int(request.query.get('page_size', '20'))
             sort_by = request.query.get('sort_by', 'name')
-            folder = request.query.get('folder')
-            search = request.query.get('search', '').lower()
-            fuzzy = request.query.get('fuzzy', 'false').lower() == 'true'
-            
-            # Parse base models filter parameter
-            base_models = request.query.get('base_models', '').split(',')
-            base_models = [model.strip() for model in base_models if model.strip()]
+            folder = request.query.get('folder', None)
+            search = request.query.get('search', None)
+            fuzzy_search = request.query.get('fuzzy', 'false').lower() == 'true'
             
             # Parse search options
             search_filename = request.query.get('search_filename', 'true').lower() == 'true'
@@ -143,62 +142,68 @@ class ApiRoutes:
             search_tags = request.query.get('search_tags', 'false').lower() == 'true'
             recursive = request.query.get('recursive', 'false').lower() == 'true'
             
-            # Validate parameters
-            if page < 1 or page_size < 1 or page_size > 100:
-                return web.json_response({
-                    'error': 'Invalid pagination parameters'
-                }, status=400)
+            # Get filter parameters
+            base_models = request.query.get('base_models', None)
+            tags = request.query.get('tags', None)
             
-            if sort_by not in ['date', 'name']:
-                return web.json_response({
-                    'error': 'Invalid sort parameter'
-                }, status=400)
+            # New parameters for recipe filtering
+            lora_hash = request.query.get('lora_hash', None)
+            lora_hashes = request.query.get('lora_hashes', None)
             
-            # Parse tags filter parameter
-            tags = request.query.get('tags', '').split(',')
-            tags = [tag.strip() for tag in tags if tag.strip()]
+            # Parse filter parameters
+            filters = {}
+            if base_models:
+                filters['base_model'] = base_models.split(',')
+            if tags:
+                filters['tags'] = tags.split(',')
             
-            # Get paginated data with search and filters
-            result = await self.scanner.get_paginated_data(
-                page=page,
-                page_size=page_size,
-                sort_by=sort_by,
+            # Add search options to filters
+            search_options = {
+                'filename': search_filename,
+                'modelname': search_modelname,
+                'tags': search_tags,
+                'recursive': recursive
+            }
+            
+            # Add lora hash filtering options
+            hash_filters = {}
+            if lora_hash:
+                hash_filters['single_hash'] = lora_hash.lower()
+            elif lora_hashes:
+                hash_filters['multiple_hashes'] = [h.lower() for h in lora_hashes.split(',')]
+            
+            # Get file data
+            data = await self.scanner.get_paginated_data(
+                page, 
+                page_size, 
+                sort_by=sort_by, 
                 folder=folder,
                 search=search,
-                fuzzy=fuzzy,
-                base_models=base_models,  # Pass base models filter
-                tags=tags,  # Add tags parameter
-                search_options={
-                    'filename': search_filename,
-                    'modelname': search_modelname,
-                    'tags': search_tags,
-                    'recursive': recursive
-                }
+                fuzzy_search=fuzzy_search,
+                base_models=filters.get('base_model', None),
+                tags=filters.get('tags', None),
+                search_options=search_options,
+                hash_filters=hash_filters
             )
-            
-            # Format the response data
-            formatted_items = [
-                self._format_lora_response(item) 
-                for item in result['items']
-            ]
 
             # Get all available folders from cache
             cache = await self.scanner.get_cached_data()
             
-            return web.json_response({
-                'items': formatted_items,
-                'total': result['total'],
-                'page': result['page'],
-                'page_size': result['page_size'],
-                'total_pages': result['total_pages'],
-                'folders': cache.folders
-            })
+            # Convert output to match expected format
+            result = {
+                'items': [self._format_lora_response(lora) for lora in data['items']],
+                'folders': cache.folders,
+                'total': data['total'],
+                'page': data['page'],
+                'page_size': data['page_size'],
+                'total_pages': data['total_pages']
+            }
+            
+            return web.json_response(result)
             
         except Exception as e:
-            logger.error(f"Error in get_loras: {str(e)}", exc_info=True)
-            return web.json_response({
-                'error': 'Internal server error'
-            }, status=500)
+            logger.error(f"Error retrieving loras: {e}", exc_info=True)
+            return web.json_response({"error": str(e)}, status=500)
 
     def _format_lora_response(self, lora: Dict) -> Dict:
         """Format LoRA data for API response"""
@@ -565,6 +570,23 @@ class ApiRoutes:
         except Exception as e:
             logger.error(f"Error fetching model versions: {e}")
             return web.Response(status=500, text=str(e))
+        
+    async def get_civitai_model(self, request: web.Request) -> web.Response:
+        """Get CivitAI model details by model version ID or hash"""
+        try:
+            model_version_id = request.match_info['modelVersionId']
+            if not model_version_id:
+                hash = request.match_info['hash']
+                model = await self.civitai_client.get_model_by_hash(hash)
+                return web.json_response(model)
+            
+            # Get model details from Civitai API    
+            model = await self.civitai_client.get_model_version_info(model_version_id)
+            return web.json_response(model)
+        except Exception as e:
+            logger.error(f"Error fetching model details: {e}")
+            return web.Response(status=500, text=str(e))
+    
 
     async def download_lora(self, request: web.Request) -> web.Response:
         async with self._download_lock:
@@ -578,8 +600,22 @@ class ApiRoutes:
                         'progress': progress
                     })
                 
+                # Check which identifier is provided
+                download_url = data.get('download_url')
+                model_hash = data.get('model_hash')
+                model_version_id = data.get('model_version_id')
+                
+                # Validate that at least one identifier is provided
+                if not any([download_url, model_hash, model_version_id]):
+                    return web.Response(
+                        status=400, 
+                        text="Missing required parameter: Please provide either 'download_url', 'hash', or 'modelVersionId'"
+                    )
+                
                 result = await self.download_manager.download_from_civitai(
-                    download_url=data.get('download_url'),
+                    download_url=download_url,
+                    model_hash=model_hash,
+                    model_version_id=model_version_id,
                     save_dir=data.get('lora_root'),
                     relative_path=data.get('relative_path'),
                     progress_callback=progress_callback
@@ -633,12 +669,28 @@ class ApiRoutes:
         """Handle model move request"""
         try:
             data = await request.json()
-            file_path = data.get('file_path')
-            target_path = data.get('target_path')
+            file_path = data.get('file_path') # full path of the model file, e.g. /path/to/model.safetensors
+            target_path = data.get('target_path') # folder path to move the model to, e.g. /path/to/target_folder
             
             if not file_path or not target_path:
                 return web.Response(text='File path and target path are required', status=400)
 
+            # Check if source and destination are the same
+            source_dir = os.path.dirname(file_path)
+            if os.path.normpath(source_dir) == os.path.normpath(target_path):
+                logger.info(f"Source and target directories are the same: {source_dir}")
+                return web.json_response({'success': True, 'message': 'Source and target directories are the same'})
+
+            # Check if target file already exists
+            file_name = os.path.basename(file_path)
+            target_file_path = os.path.join(target_path, file_name).replace(os.sep, '/')
+            
+            if os.path.exists(target_file_path):
+                return web.json_response({
+                    'success': False, 
+                    'error': f"Target file already exists: {target_file_path}"
+                }, status=409)  # 409 Conflict
+
             # Call scanner to handle the move operation
             success = await self.scanner.move_model(file_path, target_path)
             
@@ -781,39 +833,64 @@ class ApiRoutes:
 
         except Exception as e:
             logger.error(f"Error getting lora Civitai URL: {e}", exc_info=True)
-            return web.Response(text=str(e), status=500)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)
 
     async def move_models_bulk(self, request: web.Request) -> web.Response:
         """Handle bulk model move request"""
         try:
             data = await request.json()
-            file_paths = data.get('file_paths', [])
-            target_path = data.get('target_path')
+            file_paths = data.get('file_paths', []) # list of full paths of the model files, e.g. ["/path/to/model1.safetensors", "/path/to/model2.safetensors"]
+            target_path = data.get('target_path') # folder path to move the models to, e.g. "/path/to/target_folder"
             
             if not file_paths or not target_path:
                 return web.Response(text='File paths and target path are required', status=400)
 
             results = []
             for file_path in file_paths:
+                # Check if source and destination are the same
+                source_dir = os.path.dirname(file_path)
+                if os.path.normpath(source_dir) == os.path.normpath(target_path):
+                    results.append({
+                        "path": file_path, 
+                        "success": True, 
+                        "message": "Source and target directories are the same"
+                    })
+                    continue
+                
+                # Check if target file already exists
+                file_name = os.path.basename(file_path)
+                target_file_path = os.path.join(target_path, file_name).replace(os.sep, '/')
+                
+                if os.path.exists(target_file_path):
+                    results.append({
+                        "path": file_path, 
+                        "success": False, 
+                        "message": f"Target file already exists: {target_file_path}"
+                    })
+                    continue
+                
+                # Try to move the model
                 success = await self.scanner.move_model(file_path, target_path)
-                results.append({"path": file_path, "success": success})
+                results.append({
+                    "path": file_path, 
+                    "success": success,
+                    "message": "Success" if success else "Failed to move model"
+                })
             
-            # Count successes
+            # Count successes and failures
             success_count = sum(1 for r in results if r["success"])
+            failure_count = len(results) - success_count
             
-            if success_count == len(file_paths):
-                return web.json_response({
-                    'success': True,
-                    'message': f'Successfully moved {success_count} models'
-                })
-            elif success_count > 0:
-                return web.json_response({
-                    'success': True,
-                    'message': f'Moved {success_count} of {len(file_paths)} models',
-                    'results': results
-                })
-            else:
-                return web.Response(text='Failed to move any models', status=500)
+            return web.json_response({
+                'success': True,
+                'message': f'Moved {success_count} of {len(file_paths)} models',
+                'results': results,
+                'success_count': success_count,
+                'failure_count': failure_count
+            })
                 
         except Exception as e:
             logger.error(f"Error moving models in bulk: {e}", exc_info=True)
@@ -928,7 +1005,150 @@ class ApiRoutes:
                 'base_models': base_models
             })
         except Exception as e:
-            logger.error(f"Error retrieving base models: {e}", exc_info=True)
+            logger.error(f"Error retrieving base models: {e}")
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)
+
+    def get_multipart_ext(self, filename):
+        parts = filename.split(".")
+        if len(parts) > 2:  # 如果包含多级扩展名
+            return "." + ".".join(parts[-2:])  # 取最后两部分，如 ".metadata.json"
+        return os.path.splitext(filename)[1]  # 否则取普通扩展名，如 ".safetensors"
+
+    async def rename_lora(self, request: web.Request) -> web.Response:
+        """Handle renaming a LoRA file and its associated files"""
+        try:
+            data = await request.json()
+            file_path = data.get('file_path')
+            new_file_name = data.get('new_file_name')
+            
+            if not file_path or not new_file_name:
+                return web.json_response({
+                    'success': False,
+                    'error': 'File path and new file name are required'
+                }, status=400)
+            
+            # Validate the new file name (no path separators or invalid characters)
+            invalid_chars = ['/', '\\', ':', '*', '?', '"', '<', '>', '|']
+            if any(char in new_file_name for char in invalid_chars):
+                return web.json_response({
+                    'success': False,
+                    'error': 'Invalid characters in file name'
+                }, status=400)
+            
+            # Get the directory and current file name
+            target_dir = os.path.dirname(file_path)
+            old_file_name = os.path.splitext(os.path.basename(file_path))[0]
+            
+            # Check if the target file already exists
+            new_file_path = os.path.join(target_dir, f"{new_file_name}.safetensors").replace(os.sep, '/')
+            if os.path.exists(new_file_path):
+                return web.json_response({
+                    'success': False,
+                    'error': 'A file with this name already exists'
+                }, status=400)
+            
+            # Define the patterns for associated files
+            patterns = [
+                f"{old_file_name}.safetensors",  # Required
+                f"{old_file_name}.metadata.json",
+                f"{old_file_name}.preview.png",
+                f"{old_file_name}.preview.jpg",
+                f"{old_file_name}.preview.jpeg",
+                f"{old_file_name}.preview.webp",
+                f"{old_file_name}.preview.mp4",
+                f"{old_file_name}.png",
+                f"{old_file_name}.jpg",
+                f"{old_file_name}.jpeg",
+                f"{old_file_name}.webp",
+                f"{old_file_name}.mp4"
+            ]
+            
+            # Find all matching files
+            existing_files = []
+            for pattern in patterns:
+                path = os.path.join(target_dir, pattern)
+                if os.path.exists(path):
+                    existing_files.append((path, pattern))
+            
+            # Get the hash from the main file to update hash index
+            hash_value = None
+            metadata = None
+            metadata_path = os.path.join(target_dir, f"{old_file_name}.metadata.json")
+            
+            if os.path.exists(metadata_path):
+                try:
+                    with open(metadata_path, 'r', encoding='utf-8') as f:
+                        metadata = json.load(f)
+                        hash_value = metadata.get('sha256')
+                except Exception as e:
+                    logger.error(f"Error loading metadata for rename: {e}")
+            
+            # Rename all files
+            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) and self.download_manager.file_monitor:
+                # Add old and new paths to ignore list
+                file_size = os.path.getsize(main_file_path)
+                self.download_manager.file_monitor.handler.add_ignore_path(main_file_path, file_size)
+                self.download_manager.file_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 = self.get_multipart_ext(pattern)
+
+                # Create the new path
+                new_path = os.path.join(target_dir, f"{new_file_name}{ext}").replace(os.sep, '/')
+                
+                # Rename the file
+                os.rename(old_path, new_path)
+                renamed_files.append(new_path)
+                
+                # Keep track of metadata path for later update
+                if ext == '.metadata.json':
+                    new_metadata_path = new_path
+            
+            # Update the metadata file with new file name and paths
+            if new_metadata_path and metadata:
+                # Update file_name, file_path and preview_url in metadata
+                metadata['file_name'] = new_file_name
+                metadata['file_path'] = new_file_path
+                
+                # Update preview_url if it exists
+                if 'preview_url' in metadata and metadata['preview_url']:
+                    old_preview = metadata['preview_url']
+                    ext = self.get_multipart_ext(old_preview)
+                    new_preview = os.path.join(target_dir, f"{new_file_name}{ext}").replace(os.sep, '/')
+                    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)
+            
+            # Update the scanner cache
+            if metadata:
+                await self.scanner.update_single_lora_cache(file_path, new_file_path, metadata)
+                
+                # Update recipe files and cache if hash is available
+                if hash_value:
+                    recipe_scanner = RecipeScanner(self.scanner)
+                    recipes_updated, cache_updated = await recipe_scanner.update_lora_filename_by_hash(hash_value, new_file_name)
+                    logger.info(f"Updated {recipes_updated} recipe files and {cache_updated} cache entries for renamed LoRA")
+            
+            return web.json_response({
+                'success': True,
+                'new_file_path': new_file_path,
+                'renamed_files': renamed_files,
+                'reload_required': False
+            })
+            
+        except Exception as e:
+            logger.error(f"Error renaming LoRA: {e}", exc_info=True)
             return web.json_response({
                 'success': False,
                 'error': str(e)

py/routes/lora_routes.py

@@ -58,11 +58,13 @@ class LoraRoutes:
     async def handle_loras_page(self, request: web.Request) -> web.Response:
         """Handle GET /loras request"""
         try:
-            # 不等待缓存数据，直接检查缓存状态
+            # 检查缓存初始化状态，增强判断条件
             is_initializing = (
-                self.scanner._cache is None and 
+                self.scanner._cache is None or 
                 (self.scanner._initialization_task is not None and 
-                not self.scanner._initialization_task.done())
+                not self.scanner._initialization_task.done()) or
+                (self.scanner._cache is not None and len(self.scanner._cache.raw_data) == 0 and 
+                 self.scanner._initialization_task is not None)
             )
 
             if is_initializing:
@@ -74,16 +76,31 @@ class LoraRoutes:
                     settings=settings,  # Pass settings to template
                     request=request  # Pass the request object to the template
                 )
+                
+                logger.info("Loras page is initializing, returning loading page")
             else:
-                # 正常流程
-                cache = await self.scanner.get_cached_data()
-                template = self.template_env.get_template('loras.html')
-                rendered = template.render(
-                    folders=cache.folders,
-                    is_initializing=False,
-                    settings=settings,  # Pass settings to template
-                    request=request  # Pass the request object to the template
-                )
+                # 正常流程 - 但不要等待缓存刷新
+                try:
+                    cache = await self.scanner.get_cached_data(force_refresh=False)
+                    template = self.template_env.get_template('loras.html')
+                    rendered = template.render(
+                        folders=cache.folders,
+                        is_initializing=False,
+                        settings=settings,  # Pass settings to template
+                        request=request  # Pass the request object to the template
+                    )
+                    logger.debug(f"Loras page loaded successfully with {len(cache.raw_data)} items")
+                except Exception as cache_error:
+                    logger.error(f"Error loading cache data: {cache_error}")
+                    # 如果获取缓存失败，也显示初始化页面
+                    template = self.template_env.get_template('loras.html')
+                    rendered = template.render(
+                        folders=[],
+                        is_initializing=True,
+                        settings=settings,
+                        request=request
+                    )
+                    logger.info("Cache error, returning initialization page")
             
             return web.Response(
                 text=rendered,

py/routes/recipe_routes.py

@@ -14,7 +14,7 @@ from ..services.recipe_scanner import RecipeScanner
 from ..services.lora_scanner import LoraScanner
 from ..config import config
 from ..workflow.parser import WorkflowParser
-from ..utils.utils import download_twitter_image
+from ..utils.utils import download_civitai_image
 
 logger = logging.getLogger(__name__)
 
@@ -47,10 +47,22 @@ class RecipeRoutes:
         app.router.add_get('/api/recipe/{recipe_id}/share', routes.share_recipe)
         app.router.add_get('/api/recipe/{recipe_id}/share/download', routes.download_shared_recipe)
         
+        # Add new endpoint for getting recipe syntax
+        app.router.add_get('/api/recipe/{recipe_id}/syntax', routes.get_recipe_syntax)
+        
+        # Add new endpoint for updating recipe metadata (name and tags)
+        app.router.add_put('/api/recipe/{recipe_id}/update', routes.update_recipe)
+        
+        # Add new endpoint for reconnecting deleted LoRAs
+        app.router.add_post('/api/recipe/lora/reconnect', routes.reconnect_lora)
+        
         # Start cache initialization
         app.on_startup.append(routes._init_cache)
         
         app.router.add_post('/api/recipes/save-from-widget', routes.save_recipe_from_widget)
+        
+        # Add route to get recipes for a specific Lora
+        app.router.add_get('/api/recipes/for-lora', routes.get_recipes_for_lora)
     
     async def _init_cache(self, app):
         """Initialize cache on startup"""
@@ -89,6 +101,9 @@ class RecipeRoutes:
             base_models = request.query.get('base_models', None)
             tags = request.query.get('tags', None)
             
+            # New parameter: get LoRA hash filter
+            lora_hash = request.query.get('lora_hash', None)
+            
             # Parse filter parameters
             filters = {}
             if base_models:
@@ -104,14 +119,15 @@ class RecipeRoutes:
                 'lora_model': search_lora_model
             }
 
-            # Get paginated data
+            # Get paginated data with the new lora_hash parameter
             result = await self.recipe_scanner.get_paginated_data(
                 page=page,
                 page_size=page_size,
                 sort_by=sort_by,
                 search=search,
                 filters=filters,
-                search_options=search_options
+                search_options=search_options,
+                lora_hash=lora_hash
             )
             
             # Format the response data with static URLs for file paths
@@ -139,20 +155,14 @@ class RecipeRoutes:
         """Get detailed information about a specific recipe"""
         try:
             recipe_id = request.match_info['recipe_id']
-
-            # Get all recipes from cache
-            cache = await self.recipe_scanner.get_cached_data()
             
-            # Find the specific recipe
-            recipe = next((r for r in cache.raw_data if str(r.get('id', '')) == recipe_id), None)
+            # Use the new get_recipe_by_id method from recipe_scanner
+            recipe = await self.recipe_scanner.get_recipe_by_id(recipe_id)
             
             if not recipe:
                 return web.json_response({"error": "Recipe not found"}, status=404)
             
-            # Format recipe data
-            formatted_recipe = self._format_recipe_data(recipe)
-            
-            return web.json_response(formatted_recipe)
+            return web.json_response(recipe)
         except Exception as e:
             logger.error(f"Error retrieving recipe details: {e}", exc_info=True)
             return web.json_response({"error": str(e)}, status=500)
@@ -235,7 +245,7 @@ class RecipeRoutes:
                     }, status=400)
                 
                 # Download image from URL
-                temp_path = download_twitter_image(url)
+                temp_path = download_civitai_image(url)
                 
                 if not temp_path:
                     return web.json_response({
@@ -244,10 +254,10 @@ class RecipeRoutes:
                     }, status=400)
             
             # Extract metadata from the image using ExifUtils
-            user_comment = ExifUtils.extract_user_comment(temp_path)
+            metadata = ExifUtils.extract_image_metadata(temp_path)
             
             # If no metadata found, return a more specific error
-            if not user_comment:
+            if not metadata:
                 result = {
                     "error": "No metadata found in this image",
                     "loras": []  # Return empty loras array to prevent client-side errors
@@ -262,7 +272,7 @@ class RecipeRoutes:
                 return web.json_response(result, status=200)
             
             # Use the parser factory to get the appropriate parser
-            parser = RecipeParserFactory.create_parser(user_comment)
+            parser = RecipeParserFactory.create_parser(metadata)
 
             if parser is None:
                 result = {
@@ -280,7 +290,7 @@ class RecipeRoutes:
             
             # Parse the metadata
             result = await parser.parse_metadata(
-                user_comment, 
+                metadata, 
                 recipe_scanner=self.recipe_scanner, 
                 civitai_client=self.civitai_client
             )
@@ -387,8 +397,7 @@ class RecipeRoutes:
                         return web.json_response({"error": f"Invalid base64 image data: {str(e)}"}, status=400)
                 elif image_url:
                     # Download image from URL
-                    from ..utils.utils import download_twitter_image
-                    temp_path = download_twitter_image(image_url)
+                    temp_path = download_civitai_image(image_url)
                     if not temp_path:
                         return web.json_response({"error": "Failed to download image from URL"}, status=400)
                     
@@ -433,19 +442,20 @@ class RecipeRoutes:
             # Format loras data according to the recipe.json format
             loras_data = []
             for lora in metadata.get("loras", []):
-                # Skip deleted LoRAs if they're marked to be excluded
-                if lora.get("isDeleted", False) and lora.get("exclude", False):
-                    continue
+                # Modified: Always include deleted LoRAs in the recipe metadata
+                # Even if they're marked to be excluded, we still keep their identifying information
+                # The exclude flag will only be used to determine if they should be included in recipe syntax
                 
                 # Convert frontend lora format to recipe format
                 lora_entry = {
-                    "file_name": lora.get("file_name", "") or os.path.splitext(os.path.basename(lora.get("localPath", "")))[0],
+                    "file_name": lora.get("file_name", "") or os.path.splitext(os.path.basename(lora.get("localPath", "")))[0] if lora.get("localPath") else "",
                     "hash": lora.get("hash", "").lower() if lora.get("hash") else "",
                     "strength": float(lora.get("weight", 1.0)),
                     "modelVersionId": lora.get("id", ""),
                     "modelName": lora.get("name", ""),
                     "modelVersionName": lora.get("version", ""),
-                    "isDeleted": lora.get("isDeleted", False)  # Preserve deletion status in saved recipe
+                    "isDeleted": lora.get("isDeleted", False),  # Preserve deletion status in saved recipe
+                    "exclude": lora.get("exclude", False)  # Add exclude flag to the recipe
                 }
                 loras_data.append(lora_entry)
             
@@ -756,7 +766,7 @@ class RecipeRoutes:
                         return web.json_response({"error": "Invalid workflow JSON"}, status=400)
             
             if not workflow_json:
-                return web.json_response({"error": "Missing required workflow_json field"}, status=400)
+                return web.json_response({"error": "Missing workflow JSON"}, status=400)
             
             # Find the latest image in the temp directory
             temp_dir = config.temp_directory
@@ -777,8 +787,8 @@ class RecipeRoutes:
             # Parse the workflow to extract generation parameters and loras
             parsed_workflow = self.parser.parse_workflow(workflow_json)
 
-            if not parsed_workflow or not parsed_workflow.get("gen_params"):
-                return web.json_response({"error": "Could not extract generation parameters from workflow"}, status=400)
+            if not parsed_workflow:
+                return web.json_response({"error": "Could not extract parameters from workflow"}, status=400)
             
             # Get the lora stack from the parsed workflow
             lora_stack = parsed_workflow.get("loras", "")
@@ -874,7 +884,9 @@ class RecipeRoutes:
                 "created_date": time.time(),
                 "base_model": most_common_base_model,
                 "loras": loras_data,
-                "gen_params": parsed_workflow.get("gen_params", {}),  # Use the parsed workflow parameters
+                "checkpoint": parsed_workflow.get("checkpoint", ""),
+                "gen_params": {key: value for key, value in parsed_workflow.items() 
+                               if key not in ['checkpoint', 'loras']},
                 "loras_stack": lora_stack  # Include the original lora stack string
             }
             
@@ -906,3 +918,266 @@ class RecipeRoutes:
         except Exception as e:
             logger.error(f"Error saving recipe from widget: {e}", exc_info=True)
             return web.json_response({"error": str(e)}, status=500)
+
+    async def get_recipe_syntax(self, request: web.Request) -> web.Response:
+        """Generate recipe syntax for LoRAs in the recipe, looking up proper file names using hash_index"""
+        try:
+            recipe_id = request.match_info['recipe_id']
+            
+            # Get all recipes from cache
+            cache = await self.recipe_scanner.get_cached_data()
+            
+            # Find the specific recipe
+            recipe = next((r for r in cache.raw_data if str(r.get('id', '')) == recipe_id), None)
+            
+            if not recipe:
+                return web.json_response({"error": "Recipe not found"}, status=404)
+            
+            # Get the loras from the recipe
+            loras = recipe.get('loras', [])
+            
+            if not loras:
+                return web.json_response({"error": "No LoRAs found in this recipe"}, status=400)
+            
+            # Generate recipe syntax for all LoRAs that:
+            # 1. Are in the library (not deleted) OR
+            # 2. Are deleted but not marked for exclusion
+            lora_syntax_parts = []
+            
+            # Access the hash_index from lora_scanner
+            hash_index = self.recipe_scanner._lora_scanner._hash_index
+            
+            for lora in loras:
+                # Skip loras that are deleted AND marked for exclusion
+                if lora.get("isDeleted", False):
+                    continue
+
+                if not self.recipe_scanner._lora_scanner.has_lora_hash(lora.get("hash", "")):
+                    continue
+                
+                # Get the strength
+                strength = lora.get("strength", 1.0)
+                
+                # Try to find the actual file name for this lora
+                file_name = None
+                hash_value = lora.get("hash", "").lower()
+                
+                if hash_value and hasattr(hash_index, "_hash_to_path"):
+                    # Look up the file path from the hash
+                    file_path = hash_index._hash_to_path.get(hash_value)
+                    
+                    if file_path:
+                        # Extract the file name without extension from the path
+                        file_name = os.path.splitext(os.path.basename(file_path))[0]
+                
+                # If hash lookup failed, fall back to modelVersionId lookup
+                if not file_name and lora.get("modelVersionId"):
+                    # Search for files with matching modelVersionId
+                    all_loras = await self.recipe_scanner._lora_scanner.get_cached_data()
+                    for cached_lora in all_loras.raw_data:
+                        if not cached_lora.get("civitai"):
+                            continue
+                        if cached_lora.get("civitai", {}).get("id") == lora.get("modelVersionId"):
+                            file_name = os.path.splitext(os.path.basename(cached_lora["path"]))[0]
+                            break
+                
+                # If all lookups failed, use the file_name from the recipe
+                if not file_name:
+                    file_name = lora.get("file_name", "unknown-lora")
+                
+                # Add to syntax parts
+                lora_syntax_parts.append(f"<lora:{file_name}:{strength}>")
+            
+            # Join the LoRA syntax parts
+            lora_syntax = " ".join(lora_syntax_parts)
+            
+            return web.json_response({
+                'success': True,
+                'syntax': lora_syntax
+            })
+        except Exception as e:
+            logger.error(f"Error generating recipe syntax: {e}", exc_info=True)
+            return web.json_response({"error": str(e)}, status=500)
+
+    async def update_recipe(self, request: web.Request) -> web.Response:
+        """Update recipe metadata (name and tags)"""
+        try:
+            recipe_id = request.match_info['recipe_id']
+            data = await request.json()
+            
+            # Validate required fields
+            if 'title' not in data and 'tags' not in data:
+                return web.json_response({
+                    "error": "At least one field to update must be provided (title or tags)"
+                }, status=400)
+            
+            # Use the recipe scanner's update method
+            success = await self.recipe_scanner.update_recipe_metadata(recipe_id, data)
+            
+            if not success:
+                return web.json_response({"error": "Recipe not found or update failed"}, status=404)
+            
+            return web.json_response({
+                "success": True,
+                "recipe_id": recipe_id,
+                "updates": data
+            })
+        except Exception as e:
+            logger.error(f"Error updating recipe: {e}", exc_info=True)
+            return web.json_response({"error": str(e)}, status=500)
+
+    async def reconnect_lora(self, request: web.Request) -> web.Response:
+        """Reconnect a deleted LoRA in a recipe to a local LoRA file"""
+        try:
+            # Parse request data
+            data = await request.json()
+            
+            # Validate required fields
+            required_fields = ['recipe_id', 'lora_data', 'target_name']
+            for field in required_fields:
+                if field not in data:
+                    return web.json_response({
+                        "error": f"Missing required field: {field}"
+                    }, status=400)
+            
+            recipe_id = data['recipe_id']
+            lora_data = data['lora_data']
+            target_name = data['target_name']
+            
+            # Get recipe scanner
+            scanner = self.recipe_scanner
+            lora_scanner = scanner._lora_scanner
+            
+            # Check if recipe exists
+            recipe_path = os.path.join(scanner.recipes_dir, f"{recipe_id}.recipe.json")
+            if not os.path.exists(recipe_path):
+                return web.json_response({"error": "Recipe not found"}, status=404)
+                
+            # Find target LoRA by name
+            target_lora = await lora_scanner.get_lora_info_by_name(target_name)
+            if not target_lora:
+                return web.json_response({"error": f"Local LoRA not found with name: {target_name}"}, status=404)
+                
+            # Load recipe data
+            with open(recipe_path, 'r', encoding='utf-8') as f:
+                recipe_data = json.load(f)
+                
+            # Find the deleted LoRA in the recipe
+            found = False
+            updated_lora = None
+            
+            # Identification can be by hash, modelVersionId, or modelName
+            for i, lora in enumerate(recipe_data.get('loras', [])):
+                match_found = False
+                
+                # Try to match by available identifiers
+                if 'hash' in lora and 'hash' in lora_data and lora['hash'] == lora_data['hash']:
+                    match_found = True
+                elif 'modelVersionId' in lora and 'modelVersionId' in lora_data and lora['modelVersionId'] == lora_data['modelVersionId']:
+                    match_found = True
+                elif 'modelName' in lora and 'modelName' in lora_data and lora['modelName'] == lora_data['modelName']:
+                    match_found = True
+                    
+                if match_found:
+                    # Update LoRA data
+                    lora['isDeleted'] = False
+                    lora['file_name'] = target_name
+                    
+                    # Update with information from the target LoRA
+                    if 'sha256' in target_lora:
+                        lora['hash'] = target_lora['sha256'].lower()
+                    if target_lora.get("civitai"):
+                        lora['modelName'] = target_lora['civitai']['model']['name']
+                        lora['modelVersionName'] = target_lora['civitai']['name']
+                        lora['modelVersionId'] = target_lora['civitai']['id']
+                        
+                    # Keep original fields for identification
+                    
+                    # Mark as found and store updated lora
+                    found = True
+                    updated_lora = dict(lora)  # Make a copy for response
+                    break
+                    
+            if not found:
+                return web.json_response({"error": "Could not find matching deleted LoRA in recipe"}, status=404)
+                
+            # Save updated recipe
+            with open(recipe_path, 'w', encoding='utf-8') as f:
+                json.dump(recipe_data, f, indent=4, ensure_ascii=False)
+
+            updated_lora['inLibrary'] = True
+            updated_lora['preview_url'] = target_lora['preview_url']
+            updated_lora['localPath'] = target_lora['file_path']
+                
+            # Update in cache if it exists
+            if scanner._cache is not None:
+                for cache_item in scanner._cache.raw_data:
+                    if cache_item.get('id') == recipe_id:
+                        # Replace loras array with updated version
+                        cache_item['loras'] = recipe_data['loras']
+                        
+                        # Resort the cache
+                        asyncio.create_task(scanner._cache.resort())
+                        break
+                        
+            # Update EXIF metadata if image exists
+            image_path = recipe_data.get('file_path')
+            if image_path and os.path.exists(image_path):
+                from ..utils.exif_utils import ExifUtils
+                ExifUtils.append_recipe_metadata(image_path, recipe_data)
+                
+            return web.json_response({
+                "success": True,
+                "recipe_id": recipe_id,
+                "updated_lora": updated_lora
+            })
+            
+        except Exception as e:
+            logger.error(f"Error reconnecting LoRA: {e}", exc_info=True)
+            return web.json_response({"error": str(e)}, status=500)
+
+    async def get_recipes_for_lora(self, request: web.Request) -> web.Response:
+        """Get recipes that use a specific Lora"""
+        try:
+            lora_hash = request.query.get('hash')
+            
+            # Hash is required
+            if not lora_hash:
+                return web.json_response({'success': False, 'error': 'Lora hash is required'}, status=400)
+            
+            # Log the search parameters
+            logger.info(f"Getting recipes for Lora by hash: {lora_hash}")
+            
+            # Get all recipes from cache
+            cache = await self.recipe_scanner.get_cached_data()
+            
+            # Filter recipes that use this Lora by hash
+            matching_recipes = []
+            for recipe in cache.raw_data:
+                # Check if any of the recipe's loras match this hash
+                loras = recipe.get('loras', [])
+                for lora in loras:
+                    if lora.get('hash', '').lower() == lora_hash.lower():
+                        matching_recipes.append(recipe)
+                        break  # No need to check other loras in this recipe
+            
+            # Process the recipes similar to get_paginated_data to ensure all needed data is available
+            for recipe in matching_recipes:
+                # Add inLibrary information for each lora
+                if 'loras' in recipe:
+                    for lora in recipe['loras']:
+                        if 'hash' in lora and lora['hash']:
+                            lora['inLibrary'] = self.recipe_scanner._lora_scanner.has_lora_hash(lora['hash'].lower())
+                            lora['preview_url'] = self.recipe_scanner._lora_scanner.get_preview_url_by_hash(lora['hash'].lower())
+                            lora['localPath'] = self.recipe_scanner._lora_scanner.get_lora_path_by_hash(lora['hash'].lower())
+                
+                # Ensure file_url is set (needed by frontend)
+                if 'file_path' in recipe:
+                    recipe['file_url'] = self._format_recipe_file_url(recipe['file_path'])
+                else:
+                    recipe['file_url'] = '/loras_static/images/no-preview.png'
+            
+            return web.json_response({'success': True, 'recipes': matching_recipes})
+        except Exception as e:
+            logger.error(f"Error getting recipes for Lora: {str(e)}")
+            return web.json_response({'success': False, 'error': str(e)}, status=500)

py/services/civitai_client.py

@@ -76,10 +76,11 @@ class CivitaiClient:
             headers = self._get_request_headers()
             async with session.get(url, headers=headers, allow_redirects=True) as response:
                 if response.status != 200:
-                    # Handle early access 401 unauthorized responses
+                    # Handle 401 unauthorized responses
                     if response.status == 401:
                         logger.warning(f"Unauthorized access to resource: {url} (Status 401)")
-                        return False, "Early access restriction: You must purchase early access to download this LoRA."
+                        
+                        return False, "Invalid or missing CivitAI API key, or early access restriction."
                     
                     # Handle other client errors that might be permission-related
                     if response.status == 403:
@@ -233,11 +234,9 @@ class CivitaiClient:
             if not self._session:
                 return None
             
-            logger.info(f"Fetching model version info from Civitai for ID: {model_version_id}")
             version_info = await self._session.get(f"{self.base_url}/model-versions/{model_version_id}")
             
             if not version_info or not version_info.json().get('files'):
-                logger.warning(f"No files found in version info for ID: {model_version_id}")
                 return None
             
             # Get hash from the first file
@@ -247,8 +246,7 @@ class CivitaiClient:
                     hash_value = file_info['hashes']['SHA256'].lower()
                     return hash_value
                 
-            logger.warning(f"No SHA256 hash found in version info for ID: {model_version_id}")
             return None
         except Exception as e:
             logger.error(f"Error getting hash from Civitai: {e}")
-            return None
+            return None

py/services/download_manager.py

@@ -13,8 +13,9 @@ class DownloadManager:
         self.civitai_client = CivitaiClient()
         self.file_monitor = file_monitor
 
-    async def download_from_civitai(self, download_url: str, save_dir: str, relative_path: str = '', 
-                                  progress_callback=None) -> Dict:
+    async def download_from_civitai(self, download_url: str = None, model_hash: str = None, 
+                                  model_version_id: str = None, save_dir: str = None, 
+                                  relative_path: str = '', progress_callback=None) -> Dict:
         try:
             # Update save directory with relative path if provided
             if relative_path:
@@ -22,14 +23,26 @@ class DownloadManager:
                 # Create directory if it doesn't exist
                 os.makedirs(save_dir, exist_ok=True)
 
-            # Get version info
-            version_id = download_url.split('/')[-1]
-            version_info = await self.civitai_client.get_model_version_info(version_id)
+            # Get version info based on the provided identifier
+            version_info = None
+            
+            if download_url:
+                # Extract version ID from download URL
+                version_id = download_url.split('/')[-1]
+                version_info = await self.civitai_client.get_model_version_info(version_id)
+            elif model_version_id:
+                # Use model version ID directly
+                version_info = await self.civitai_client.get_model_version_info(model_version_id)
+            elif model_hash:
+                # Get model by hash
+                version_info = await self.civitai_client.get_model_by_hash(model_hash)
+
+            
             if not version_info:
                 return {'success': False, 'error': 'Failed to fetch model metadata'}
 
             # Check if this is an early access LoRA
-            if 'earlyAccessEndsAt' in version_info:
+            if version_info.get('earlyAccessEndsAt'):
                 early_access_date = version_info.get('earlyAccessEndsAt', '')
                 # Convert to a readable date if possible
                 try:
@@ -62,17 +75,10 @@ class DownloadManager:
             file_size = file_info.get('sizeKB', 0) * 1024
 
             # 4. 通知文件监控系统 - 使用规范化路径和文件大小
-            if self.file_monitor and self.file_monitor.handler:
-                # Add both the normalized path and potential alternative paths
-                normalized_path = save_path.replace(os.sep, '/')
-                self.file_monitor.handler.add_ignore_path(normalized_path, file_size)
-                
-                # Also add the path with file extension variations (.safetensors)
-                if not normalized_path.endswith('.safetensors'):
-                    safetensors_path = os.path.splitext(normalized_path)[0] + '.safetensors'
-                    self.file_monitor.handler.add_ignore_path(safetensors_path, file_size)
-                
-                logger.debug(f"Added download path to ignore list: {normalized_path} (size: {file_size} bytes)")
+            self.file_monitor.handler.add_ignore_path(
+                 save_path.replace(os.sep, '/'),
+                 file_size
+            )
 
             # 5. 准备元数据
             metadata = LoraMetadata.from_civitai_info(version_info, file_info, save_path)
@@ -89,7 +95,7 @@ class DownloadManager:
             
             # 6. 开始下载流程
             result = await self._execute_download(
-                download_url=download_url,
+                download_url=file_info.get('downloadUrl', ''),
                 save_dir=save_dir,
                 metadata=metadata,
                 version_info=version_info,

py/services/file_monitor.py

@@ -2,9 +2,10 @@ from operator import itemgetter
 import os
 import logging
 import asyncio
+import time
 from watchdog.observers import Observer
-from watchdog.events import FileSystemEventHandler, FileCreatedEvent, FileDeletedEvent
-from typing import List
+from watchdog.events import FileSystemEventHandler
+from typing import List, Dict, Set
 from threading import Lock
 from .lora_scanner import LoraScanner
 from ..config import config
@@ -20,91 +21,167 @@ class LoraFileHandler(FileSystemEventHandler):
         self.pending_changes = set()  # 待处理的变更
         self.lock = Lock()  # 线程安全锁
         self.update_task = None  # 异步更新任务
-        self._ignore_paths = {}  # Change to dictionary to store expiration times
+        self._ignore_paths = set()  # Add ignore paths set
         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 that are already scheduled for processing
+        self.scheduled_files: Set[str] = set()
 
     def _should_ignore(self, path: str) -> bool:
         """Check if path should be ignored"""
         real_path = os.path.realpath(path)  # Resolve any symbolic links
-        normalized_path = real_path.replace(os.sep, '/')
-        
-        # Also check with backslashes for Windows compatibility
-        alt_path = real_path.replace('/', '\\')
-        
-        # 使用传入的事件循环而不是尝试获取当前线程的事件循环
-        current_time = self.loop.time()
-        
-        # Check if path is in ignore list and not expired
-        if normalized_path in self._ignore_paths and self._ignore_paths[normalized_path] > current_time:
-            return True
-        
-        # Also check alternative path format
-        if alt_path in self._ignore_paths and self._ignore_paths[alt_path] > current_time:
-            return True
-            
-        return False
+        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
-        normalized_path = real_path.replace(os.sep, '/')
+        self._ignore_paths.add(real_path.replace(os.sep, '/'))
         
-        # Calculate timeout based on file size
-        # For small files, use minimum timeout
-        # For larger files, estimate download time + buffer
-        if file_size > 0:
-            # Estimate download time in seconds (size / speed) + buffer
-            estimated_time = (file_size / self._download_speed) + 10
-            timeout = max(self._min_ignore_timeout, estimated_time)
-        else:
-            timeout = self._min_ignore_timeout
-        
-        current_time = self.loop.time()
-        expiration_time = current_time + timeout
-        
-        # Store both normalized and alternative path formats
-        self._ignore_paths[normalized_path] = expiration_time
-        
-        # Also store with backslashes for Windows compatibility
-        alt_path = real_path.replace('/', '\\')
-        self._ignore_paths[alt_path] = expiration_time
-        
-        logger.debug(f"Added ignore path: {normalized_path} (expires in {timeout:.1f}s)")
+        # Short timeout (e.g. 5 seconds) is sufficient to ignore the CREATE event
+        timeout = 5
         
         self.loop.call_later(
             timeout,
-            self._remove_ignore_path,
-            normalized_path
+            self._ignore_paths.discard,
+            real_path.replace(os.sep, '/')
         )
-    
-    def _remove_ignore_path(self, path: str):
-        """Remove path from ignore list after timeout"""
-        if path in self._ignore_paths:
-            del self._ignore_paths[path]
-            logger.debug(f"Removed ignore path: {path}")
         
-        # Also remove alternative path format
-        alt_path = path.replace('/', '\\')
-        if alt_path in self._ignore_paths:
-            del self._ignore_paths[alt_path]
-
     def on_created(self, event):
-        if event.is_directory or not event.src_path.endswith('.safetensors'):
+        if event.is_directory:
             return
-        if self._should_ignore(event.src_path):
+            
+        # Handle safetensors files directly
+        if event.src_path.endswith('.safetensors'):
+            if self._should_ignore(event.src_path):
+                return
+            
+            # We'll process this file directly and ignore subsequent modifications
+            # to prevent duplicate processing
+            normalized_path = os.path.realpath(event.src_path).replace(os.sep, '/')
+            if normalized_path not in self.scheduled_files:
+                logger.info(f"LoRA 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
+                # This helps avoid duplicate processing
+                self.loop.call_later(
+                    self.debounce_delay * 2,
+                    self.scheduled_files.discard,
+                    normalized_path
+                )
+            
+        # For browser downloads, we'll catch them when they're renamed to .safetensors
+        
+    def on_modified(self, event):
+        if event.is_directory:
             return
-        logger.info(f"LoRA file created: {event.src_path}")
-        self._schedule_update('add', event.src_path)
+            
+        # Only process safetensors files
+        if event.src_path.endswith('.safetensors'):
+            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 LoRA file: {file_path}")
+            self._schedule_update('add', file_path)
 
     def on_deleted(self, event):
         if event.is_directory or not event.src_path.endswith('.safetensors'):
             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"LoRA file deleted: {event.src_path}")
         self._schedule_update('remove', event.src_path)
         
+    def on_moved(self, event):
+        """Handle file move/rename events"""
+        
+        # If destination is a safetensors file, treat it as a new file
+        if event.dest_path.endswith('.safetensors'):
+            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"LoRA 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 safetensors file, treat it as deleted
+        if event.src_path.endswith('.safetensors'):
+            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"LoRA file moved/renamed from: {event.src_path}")
+            self._schedule_update('remove', event.src_path)
+
     def _schedule_update(self, action: str, file_path: str): #file_path is a real path
         """Schedule a cache update"""
         with self.lock:
@@ -141,6 +218,12 @@ class LoraFileHandler(FileSystemEventHandler):
             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
                         lora_data = await self.scanner.scan_single_lora(file_path)
                         if lora_data:

py/services/lora_scanner.py

@@ -3,11 +3,13 @@ import os
 import logging
 import asyncio
 import shutil
+import time
 from typing import List, Dict, Optional
-from dataclasses import dataclass
-from operator import itemgetter
+
+from ..utils.models import LoraMetadata
 from ..config import config
-from ..utils.file_utils import load_metadata, get_file_info
+from ..utils.file_utils import load_metadata, get_file_info, normalize_path, find_preview_file, save_metadata
+from ..utils.lora_metadata import extract_lora_metadata
 from .lora_cache import LoraCache
 from .lora_hash_index import LoraHashIndex
 from .settings_manager import settings
@@ -91,6 +93,7 @@ class LoraScanner:
     async def _initialize_cache(self) -> None:
         """Initialize or refresh the cache"""
         try:
+            start_time = time.time()
             # Clear existing hash index
             self._hash_index.clear()
             
@@ -122,7 +125,7 @@ class LoraScanner:
             await self._cache.resort()
 
             self._initialization_task = None
-            logger.info("LoRA Manager: Cache initialization completed")
+            logger.info(f"LoRA Manager: Cache initialization completed in {time.time() - start_time:.2f} seconds, found {len(raw_data)} loras")
         except Exception as e:
             logger.error(f"LoRA Manager: Error initializing cache: {e}")
             self._cache = LoraCache(
@@ -133,9 +136,9 @@ class LoraScanner:
             )
 
     async def get_paginated_data(self, page: int, page_size: int, sort_by: str = 'name', 
-                               folder: str = None, search: str = None, fuzzy: bool = False,
+                               folder: str = None, search: str = None, fuzzy_search: bool = False,
                                base_models: list = None, tags: list = None,
-                               search_options: dict = None) -> Dict:
+                               search_options: dict = None, hash_filters: dict = None) -> Dict:
         """Get paginated and filtered lora data
         
         Args:
@@ -144,10 +147,11 @@ class LoraScanner:
             sort_by: Sort method ('name' or 'date')
             folder: Filter by folder path
             search: Search term
-            fuzzy: Use fuzzy matching for search
+            fuzzy_search: Use fuzzy matching for search
             base_models: List of base models to filter by
             tags: List of tags to filter by
             search_options: Dictionary with search options (filename, modelname, tags, recursive)
+            hash_filters: Dictionary with hash filtering options (single_hash or multiple_hashes)
         """
         cache = await self.get_cached_data()
 
@@ -157,90 +161,108 @@ class LoraScanner:
                 'filename': True,
                 'modelname': True,
                 'tags': False,
-                'recursive': False
+                'recursive': False,
             }
 
         # Get the base data set
         filtered_data = cache.sorted_by_date if sort_by == 'date' else cache.sorted_by_name
         
+        # Apply hash filtering if provided (highest priority)
+        if hash_filters:
+            single_hash = hash_filters.get('single_hash')
+            multiple_hashes = hash_filters.get('multiple_hashes')
+            
+            if single_hash:
+                # Filter by single hash
+                single_hash = single_hash.lower()  # Ensure lowercase for matching
+                filtered_data = [
+                    lora for lora in filtered_data
+                    if lora.get('sha256', '').lower() == single_hash
+                ]
+            elif multiple_hashes:
+                # Filter by multiple hashes
+                hash_set = set(hash.lower() for hash in multiple_hashes)  # Convert to set for faster lookup
+                filtered_data = [
+                    lora for lora in filtered_data
+                    if lora.get('sha256', '').lower() in hash_set
+                ]
+            
+
+            # Jump to pagination
+            total_items = len(filtered_data)
+            start_idx = (page - 1) * page_size
+            end_idx = min(start_idx + page_size, total_items)
+            
+            result = {
+                'items': filtered_data[start_idx:end_idx],
+                'total': total_items,
+                'page': page,
+                'page_size': page_size,
+                'total_pages': (total_items + page_size - 1) // page_size
+            }
+            
+            return result
+        
         # Apply SFW filtering if enabled
         if settings.get('show_only_sfw', False):
             filtered_data = [
-                item for item in filtered_data
-                if not item.get('preview_nsfw_level') or item.get('preview_nsfw_level') < NSFW_LEVELS['R']
+                lora for lora in filtered_data
+                if not lora.get('preview_nsfw_level') or lora.get('preview_nsfw_level') < NSFW_LEVELS['R']
             ]
         
         # Apply folder filtering
         if folder is not None:
             if search_options.get('recursive', False):
-                # Recursive mode: match all paths starting with this folder
+                # Recursive folder filtering - include all subfolders
                 filtered_data = [
-                    item for item in filtered_data 
-                    if item['folder'].startswith(folder + '/') or item['folder'] == folder
+                    lora for lora in filtered_data
+                    if lora['folder'].startswith(folder)
                 ]
             else:
-                # Non-recursive mode: match exact folder
+                # Exact folder filtering
                 filtered_data = [
-                    item for item in filtered_data 
-                    if item['folder'] == folder
+                    lora for lora in filtered_data
+                    if lora['folder'] == folder
                 ]
         
         # Apply base model filtering
         if base_models and len(base_models) > 0:
             filtered_data = [
-                item for item in filtered_data
-                if item.get('base_model') in base_models
+                lora for lora in filtered_data
+                if lora.get('base_model') in base_models
             ]
         
         # Apply tag filtering
         if tags and len(tags) > 0:
             filtered_data = [
-                item for item in filtered_data
-                if any(tag in item.get('tags', []) for tag in tags)
+                lora for lora in filtered_data
+                if any(tag in lora.get('tags', []) for tag in tags)
             ]
         
         # Apply search filtering
         if search:
             search_results = []
-            for item in filtered_data:
-                # Check filename if enabled
-                if search_options.get('filename', True):
-                    if fuzzy:
-                        if fuzzy_match(item.get('file_name', ''), search):
-                            search_results.append(item)
-                            continue
-                    else:
-                        if search.lower() in item.get('file_name', '').lower():
-                            search_results.append(item)
-                            continue
-                            
-                # Check model name if enabled
-                if search_options.get('modelname', True):
-                    if fuzzy:
-                        if fuzzy_match(item.get('model_name', ''), search):
-                            search_results.append(item)
-                            continue
-                    else:
-                        if search.lower() in item.get('model_name', '').lower():
-                            search_results.append(item)
-                            continue
-                            
-                # Check tags if enabled
-                if search_options.get('tags', False) and item.get('tags'):
-                    found_tag = False
-                    for tag in item['tags']:
-                        if fuzzy:
-                            if fuzzy_match(tag, search):
-                                found_tag = True
-                                break
-                        else:
-                            if search.lower() in tag.lower():
-                                found_tag = True
-                                break
-                    if found_tag:
-                        search_results.append(item)
+            search_opts = search_options or {}
+            
+            for lora in filtered_data:
+                # Search by file name
+                if search_opts.get('filename', True):
+                    if fuzzy_match(lora.get('file_name', ''), search):
+                        search_results.append(lora)
                         continue
                         
+                # Search by model name
+                if search_opts.get('modelname', True):
+                    if fuzzy_match(lora.get('model_name', ''), search):
+                        search_results.append(lora)
+                        continue
+                        
+                # Search by tags
+                if search_opts.get('tags', False) and 'tags' in lora:
+                    if any(fuzzy_match(tag, search) for tag in lora['tags']):
+                        search_results.append(lora)
+                        continue
+            
             filtered_data = search_results
 
         # Calculate pagination
@@ -330,8 +352,30 @@ class LoraScanner:
         metadata = await load_metadata(file_path)
         
         if metadata is None:
-            # Create new metadata if none exists
-            metadata = await get_file_info(file_path)
+            # Try to find and use .civitai.info file first
+            civitai_info_path = f"{os.path.splitext(file_path)[0]}.civitai.info"
+            if os.path.exists(civitai_info_path):
+                try:
+                    with open(civitai_info_path, 'r', encoding='utf-8') as f:
+                        version_info = json.load(f)
+                    
+                    file_info = next((f for f in version_info.get('files', []) if f.get('primary')), None)
+                    if file_info:
+                        # Create a minimal file_info with the required fields
+                        file_name = os.path.splitext(os.path.basename(file_path))[0]
+                        file_info['name'] = file_name
+                    
+                        # Use from_civitai_info to create metadata
+                        metadata = LoraMetadata.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)
+                        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}")
+            
+            # If still no metadata, create new metadata using get_file_info
+            if metadata is None:
+                metadata = await get_file_info(file_path)
         
         # Convert to dict and add folder info
         lora_data = metadata.to_dict()
@@ -342,7 +386,7 @@ class LoraScanner:
         lora_data['folder'] = folder.replace(os.path.sep, '/')
         
         return lora_data
-
+            
     async def _fetch_missing_metadata(self, file_path: str, lora_data: Dict) -> None:
         """Fetch missing description and tags from Civitai if needed
         

py/services/recipe_cache.py

@@ -37,18 +37,18 @@ class RecipeCache:
         Returns:
             bool: True if the update was successful, False if the recipe wasn't found
         """
-        async with self._lock:
-            # Update in raw_data
-            for item in self.raw_data:
-                if item.get('id') == recipe_id:
-                    item.update(metadata)
-                    break
-            else:
-                return False  # Recipe not found
-                
-            # Resort to reflect changes
-            await self.resort()
-            return True
+
+        # Update in raw_data
+        for item in self.raw_data:
+            if item.get('id') == recipe_id:
+                item.update(metadata)
+                break
+        else:
+            return False  # Recipe not found
+            
+        # Resort to reflect changes
+        await self.resort()
+        return True
             
     async def add_recipe(self, recipe_data: Dict) -> None:
         """Add a new recipe to the cache

py/services/recipe_scanner.py

@@ -2,9 +2,7 @@ import os
 import logging
 import asyncio
 import json
-import re
-from typing import List, Dict, Optional, Any
-from datetime import datetime
+from typing import List, Dict, Optional, Any, Tuple
 from ..config import config
 from .recipe_cache import RecipeCache
 from .lora_scanner import LoraScanner
@@ -64,61 +62,44 @@ class RecipeScanner:
 
         # Try to acquire the lock with a timeout to prevent deadlocks
         try:
-            # Use a timeout for acquiring the lock
-            async with asyncio.timeout(1.0):
-                async with self._initialization_lock:
-                    # Check again after acquiring the lock
-                    if self._cache is not None and not force_refresh:
-                        return self._cache
+            async with self._initialization_lock:
+                # Check again after acquiring the lock
+                if self._cache is not None and not force_refresh:
+                    return self._cache
+                
+                # Mark as initializing to prevent concurrent initializations
+                self._is_initializing = True
+                
+                try:
+                    # Remove dependency on lora scanner initialization
+                    # Scan for recipe data directly
+                    raw_data = await self.scan_all_recipes()
                     
-                    # Mark as initializing to prevent concurrent initializations
-                    self._is_initializing = True
+                    # Update cache
+                    self._cache = RecipeCache(
+                        raw_data=raw_data,
+                        sorted_by_name=[],
+                        sorted_by_date=[]
+                    )
                     
-                    try:
-                        # First ensure the lora scanner is initialized
-                        if self._lora_scanner:
-                            try:
-                                lora_cache = await asyncio.wait_for(
-                                    self._lora_scanner.get_cached_data(), 
-                                    timeout=10.0
-                                )
-                            except asyncio.TimeoutError:
-                                logger.error("Timeout waiting for lora scanner initialization")
-                            except Exception as e:
-                                logger.error(f"Error waiting for lora scanner: {e}")
-                        
-                        # Scan for recipe data
-                        raw_data = await self.scan_all_recipes()
-                        
-                        # Update cache
-                        self._cache = RecipeCache(
-                            raw_data=raw_data,
-                            sorted_by_name=[],
-                            sorted_by_date=[]
-                        )
-                        
-                        # Resort cache
-                        await self._cache.resort()
-                        
-                        return self._cache
+                    # Resort cache
+                    await self._cache.resort()
                     
-                    except Exception as e:
-                        logger.error(f"Recipe Manager: Error initializing cache: {e}", exc_info=True)
-                        # Create empty cache on error
-                        self._cache = RecipeCache(
-                            raw_data=[],
-                            sorted_by_name=[],
-                            sorted_by_date=[]
-                        )
-                        return self._cache
-                    finally:
-                        # Mark initialization as complete
-                        self._is_initializing = False
+                    return self._cache
+                
+                except Exception as e:
+                    logger.error(f"Recipe Manager: Error initializing cache: {e}", exc_info=True)
+                    # Create empty cache on error
+                    self._cache = RecipeCache(
+                        raw_data=[],
+                        sorted_by_name=[],
+                        sorted_by_date=[]
+                    )
+                    return self._cache
+                finally:
+                    # Mark initialization as complete
+                    self._is_initializing = False
         
-        except asyncio.TimeoutError:
-            # If we can't acquire the lock in time, return the current cache or an empty one
-            logger.warning("Timeout acquiring initialization lock - returning current cache state")
-            return self._cache or RecipeCache(raw_data=[], sorted_by_name=[], sorted_by_date=[])
         except Exception as e:
             logger.error(f"Unexpected error in get_cached_data: {e}")
             return self._cache or RecipeCache(raw_data=[], sorted_by_name=[], sorted_by_date=[])
@@ -230,7 +211,7 @@ class RecipeScanner:
                         lora['hash'] = hash_from_civitai
                         metadata_updated = True
                     else:
-                        logger.warning(f"Could not get hash for modelVersionId {model_version_id}")
+                        logger.debug(f"Could not get hash for modelVersionId {model_version_id}")
             
             # If has hash but no file_name, look up in lora library
             if 'hash' in lora and (not lora.get('file_name') or not lora['file_name']):
@@ -280,7 +261,7 @@ class RecipeScanner:
             version_info = await self._civitai_client.get_model_version_info(model_version_id)
             
             if not version_info or not version_info.get('files'):
-                logger.warning(f"No files found in version info for ID: {model_version_id}")
+                logger.debug(f"No files found in version info for ID: {model_version_id}")
                 return None
                 
             # Get hash from the first file
@@ -288,7 +269,7 @@ class RecipeScanner:
                 if file_info.get('hashes', {}).get('SHA256'):
                     return file_info['hashes']['SHA256']
                     
-            logger.warning(f"No SHA256 hash found in version info for ID: {model_version_id}")
+            logger.debug(f"No SHA256 hash found in version info for ID: {model_version_id}")
             return None
         except Exception as e:
             logger.error(f"Error getting hash from Civitai: {e}")
@@ -305,7 +286,7 @@ class RecipeScanner:
             if version_info and 'name' in version_info:
                 return version_info['name']
                     
-            logger.warning(f"No version name found for modelVersionId {model_version_id}")
+            logger.debug(f"No version name found for modelVersionId {model_version_id}")
             return None
         except Exception as e:
             logger.error(f"Error getting model version name from Civitai: {e}")
@@ -349,7 +330,7 @@ class RecipeScanner:
             logger.error(f"Error getting base model for lora: {e}")
             return None
 
-    async def get_paginated_data(self, page: int, page_size: int, sort_by: str = 'date', search: str = None, filters: dict = None, search_options: dict = None):
+    async def get_paginated_data(self, page: int, page_size: int, sort_by: str = 'date', search: str = None, filters: dict = None, search_options: dict = None, lora_hash: str = None, bypass_filters: bool = True):
         """Get paginated and filtered recipe data
         
         Args:
@@ -359,69 +340,89 @@ class RecipeScanner:
             search: Search term
             filters: Dictionary of filters to apply
             search_options: Dictionary of search options to apply
+            lora_hash: Optional SHA256 hash of a LoRA to filter recipes by
+            bypass_filters: If True, ignore other filters when a lora_hash is provided
         """
         cache = await self.get_cached_data()
 
         # Get base dataset
         filtered_data = cache.sorted_by_date if sort_by == 'date' else cache.sorted_by_name
         
-        # Apply search filter
-        if search:
-            # Default search options if none provided
-            if not search_options:
-                search_options = {
-                    'title': True,
-                    'tags': True,
-                    'lora_name': True,
-                    'lora_model': True
-                }
+        # Special case: Filter by LoRA hash (takes precedence if bypass_filters is True)
+        if lora_hash:
+            # Filter recipes that contain this LoRA hash
+            filtered_data = [
+                item for item in filtered_data
+                if 'loras' in item and any(
+                    lora.get('hash', '').lower() == lora_hash.lower() 
+                    for lora in item['loras']
+                )
+            ]
             
-            # Build the search predicate based on search options
-            def matches_search(item):
-                # Search in title if enabled
-                if search_options.get('title', True):
-                    if fuzzy_match(str(item.get('title', '')), search):
-                        return True
-                
-                # Search in tags if enabled
-                if search_options.get('tags', True) and 'tags' in item:
-                    for tag in item['tags']:
-                        if fuzzy_match(tag, search):
-                            return True
-                
-                # Search in lora file names if enabled
-                if search_options.get('lora_name', True) and 'loras' in item:
-                    for lora in item['loras']:
-                        if fuzzy_match(str(lora.get('file_name', '')), search):
-                            return True
-                
-                # Search in lora model names if enabled
-                if search_options.get('lora_model', True) and 'loras' in item:
-                    for lora in item['loras']:
-                        if fuzzy_match(str(lora.get('modelName', '')), search):
-                            return True
-                
-                # No match found
-                return False
-            
-            # Filter the data using the search predicate
-            filtered_data = [item for item in filtered_data if matches_search(item)]
+            if bypass_filters:
+                # Skip other filters if bypass_filters is True
+                pass
+            # Otherwise continue with normal filtering after applying LoRA hash filter
         
-        # Apply additional filters
-        if filters:
-            # Filter by base model
-            if 'base_model' in filters and filters['base_model']:
-                filtered_data = [
-                    item for item in filtered_data
-                    if item.get('base_model', '') in filters['base_model']
-                ]
+        # Skip further filtering if we're only filtering by LoRA hash with bypass enabled
+        if not (lora_hash and bypass_filters):
+            # Apply search filter
+            if search:
+                # Default search options if none provided
+                if not search_options:
+                    search_options = {
+                        'title': True,
+                        'tags': True,
+                        'lora_name': True,
+                        'lora_model': True
+                    }
+                
+                # Build the search predicate based on search options
+                def matches_search(item):
+                    # Search in title if enabled
+                    if search_options.get('title', True):
+                        if fuzzy_match(str(item.get('title', '')), search):
+                            return True
+                    
+                    # Search in tags if enabled
+                    if search_options.get('tags', True) and 'tags' in item:
+                        for tag in item['tags']:
+                            if fuzzy_match(tag, search):
+                                return True
+                    
+                    # Search in lora file names if enabled
+                    if search_options.get('lora_name', True) and 'loras' in item:
+                        for lora in item['loras']:
+                            if fuzzy_match(str(lora.get('file_name', '')), search):
+                                return True
+                    
+                    # Search in lora model names if enabled
+                    if search_options.get('lora_model', True) and 'loras' in item:
+                        for lora in item['loras']:
+                            if fuzzy_match(str(lora.get('modelName', '')), search):
+                                return True
+                    
+                    # No match found
+                    return False
+                
+                # Filter the data using the search predicate
+                filtered_data = [item for item in filtered_data if matches_search(item)]
             
-            # Filter by tags
-            if 'tags' in filters and filters['tags']:
-                filtered_data = [
-                    item for item in filtered_data
-                    if any(tag in item.get('tags', []) for tag in filters['tags'])
-                ]
+            # Apply additional filters
+            if filters:
+                # Filter by base model
+                if 'base_model' in filters and filters['base_model']:
+                    filtered_data = [
+                        item for item in filtered_data
+                        if item.get('base_model', '') in filters['base_model']
+                    ]
+                
+                # Filter by tags
+                if 'tags' in filters and filters['tags']:
+                    filtered_data = [
+                        item for item in filtered_data
+                        if any(tag in item.get('tags', []) for tag in filters['tags'])
+                    ]
 
         # Calculate pagination
         total_items = len(filtered_data)
@@ -448,4 +449,204 @@ class RecipeScanner:
             'total_pages': (total_items + page_size - 1) // page_size
         }
         
-        return result 
+        return result
+    
+    async def get_recipe_by_id(self, recipe_id: str) -> dict:
+        """Get a single recipe by ID with all metadata and formatted URLs
+        
+        Args:
+            recipe_id: The ID of the recipe to retrieve
+            
+        Returns:
+            Dict containing the recipe data or None if not found
+        """
+        if not recipe_id:
+            return None
+            
+        # Get all recipes from cache
+        cache = await self.get_cached_data()
+        
+        # Find the recipe with the specified ID
+        recipe = next((r for r in cache.raw_data if str(r.get('id', '')) == recipe_id), None)
+        
+        if not recipe:
+            return None
+            
+        # Format the recipe with all needed information
+        formatted_recipe = {**recipe}  # Copy all fields
+        
+        # Format file path to URL
+        if 'file_path' in formatted_recipe:
+            formatted_recipe['file_url'] = self._format_file_url(formatted_recipe['file_path'])
+            
+        # Format dates for display
+        for date_field in ['created_date', 'modified']:
+            if date_field in formatted_recipe:
+                formatted_recipe[f"{date_field}_formatted"] = self._format_timestamp(formatted_recipe[date_field])
+                
+        # Add lora metadata
+        if 'loras' in formatted_recipe:
+            for lora in formatted_recipe['loras']:
+                if 'hash' in lora and lora['hash']:
+                    lora_hash = lora['hash'].lower()
+                    lora['inLibrary'] = self._lora_scanner.has_lora_hash(lora_hash)
+                    lora['preview_url'] = self._lora_scanner.get_preview_url_by_hash(lora_hash)
+                    lora['localPath'] = self._lora_scanner.get_lora_path_by_hash(lora_hash)
+                    
+        return formatted_recipe
+        
+    def _format_file_url(self, file_path: str) -> str:
+        """Format file path as URL for serving in web UI"""
+        if not file_path:
+            return '/loras_static/images/no-preview.png'
+            
+        try:
+            # Format file path as a URL that will work with static file serving
+            recipes_dir = os.path.join(config.loras_roots[0], "recipes").replace(os.sep, '/')
+            if file_path.replace(os.sep, '/').startswith(recipes_dir):
+                relative_path = os.path.relpath(file_path, config.loras_roots[0]).replace(os.sep, '/')
+                return f"/loras_static/root1/preview/{relative_path}"
+                
+            # If not in recipes dir, try to create a valid URL from the file name
+            file_name = os.path.basename(file_path)
+            return f"/loras_static/root1/preview/recipes/{file_name}"
+        except Exception as e:
+            logger.error(f"Error formatting file URL: {e}")
+            return '/loras_static/images/no-preview.png'
+    
+    def _format_timestamp(self, timestamp: float) -> str:
+        """Format timestamp for display"""
+        from datetime import datetime
+        return datetime.fromtimestamp(timestamp).strftime('%Y-%m-%d %H:%M:%S')
+
+    async def update_recipe_metadata(self, recipe_id: str, metadata: dict) -> bool:
+        """Update recipe metadata (like title and tags) in both file system and cache
+        
+        Args:
+            recipe_id: The ID of the recipe to update
+            metadata: Dictionary containing metadata fields to update (title, tags, etc.)
+            
+        Returns:
+            bool: True if successful, False otherwise
+        """
+        import os
+        import json
+        
+        # First, find the recipe JSON file path
+        recipe_json_path = os.path.join(self.recipes_dir, f"{recipe_id}.recipe.json")
+        
+        if not os.path.exists(recipe_json_path):
+            return False
+            
+        try:
+            # Load existing recipe data
+            with open(recipe_json_path, 'r', encoding='utf-8') as f:
+                recipe_data = json.load(f)
+                
+            # Update fields
+            for key, value in metadata.items():
+                recipe_data[key] = value
+                
+            # Save updated recipe
+            with open(recipe_json_path, 'w', encoding='utf-8') as f:
+                json.dump(recipe_data, f, indent=4, ensure_ascii=False)
+                
+            # Update the cache if it exists
+            if self._cache is not None:
+                await self._cache.update_recipe_metadata(recipe_id, metadata)
+                
+            # If the recipe has an image, update its EXIF metadata
+            from ..utils.exif_utils import ExifUtils
+            image_path = recipe_data.get('file_path')
+            if image_path and os.path.exists(image_path):
+                ExifUtils.append_recipe_metadata(image_path, recipe_data)
+                
+            return True
+        except Exception as e:
+            import logging
+            logging.getLogger(__name__).error(f"Error updating recipe metadata: {e}", exc_info=True)
+            return False
+
+    async def update_lora_filename_by_hash(self, hash_value: str, new_file_name: str) -> Tuple[int, int]:
+        """Update file_name in all recipes that contain a LoRA with the specified hash.
+        
+        Args:
+            hash_value: The SHA256 hash value of the LoRA
+            new_file_name: The new file_name to set
+            
+        Returns:
+            Tuple[int, int]: (number of recipes updated in files, number of recipes updated in cache)
+        """
+        if not hash_value or not new_file_name:
+            return 0, 0
+            
+        # Always use lowercase hash for consistency
+        hash_value = hash_value.lower()
+        
+        # Get recipes directory
+        recipes_dir = self.recipes_dir
+        if not recipes_dir or not os.path.exists(recipes_dir):
+            logger.warning(f"Recipes directory not found: {recipes_dir}")
+            return 0, 0
+            
+        # Check if cache is initialized
+        cache_initialized = self._cache is not None
+        cache_updated_count = 0
+        file_updated_count = 0
+        
+        # Get all recipe JSON files in the recipes directory
+        recipe_files = []
+        for root, _, files in os.walk(recipes_dir):
+            for file in files:
+                if file.lower().endswith('.recipe.json'):
+                    recipe_files.append(os.path.join(root, file))
+        
+        # Process each recipe file
+        for recipe_path in recipe_files:
+            try:
+                # Load the recipe data
+                with open(recipe_path, 'r', encoding='utf-8') as f:
+                    recipe_data = json.load(f)
+                
+                # Skip if no loras or invalid structure
+                if not recipe_data or not isinstance(recipe_data, dict) or 'loras' not in recipe_data:
+                    continue
+                
+                # Check if any lora has matching hash
+                file_updated = False
+                for lora in recipe_data.get('loras', []):
+                    if 'hash' in lora and lora['hash'].lower() == hash_value:
+                        # Update file_name
+                        old_file_name = lora.get('file_name', '')
+                        lora['file_name'] = new_file_name
+                        file_updated = True
+                        logger.info(f"Updated file_name in recipe {recipe_path}: {old_file_name} -> {new_file_name}")
+                
+                # If updated, save the file
+                if file_updated:
+                    with open(recipe_path, 'w', encoding='utf-8') as f:
+                        json.dump(recipe_data, f, indent=4, ensure_ascii=False)
+                    file_updated_count += 1
+                    
+                    # Also update in cache if it exists
+                    if cache_initialized:
+                        recipe_id = recipe_data.get('id')
+                        if recipe_id:
+                            for cache_item in self._cache.raw_data:
+                                if cache_item.get('id') == recipe_id:
+                                    # Replace loras array with updated version
+                                    cache_item['loras'] = recipe_data['loras']
+                                    cache_updated_count += 1
+                                    break
+            
+            except Exception as e:
+                logger.error(f"Error updating recipe file {recipe_path}: {e}")
+                import traceback
+                traceback.print_exc(file=sys.stderr)
+        
+        # Resort cache if updates were made
+        if cache_initialized and cache_updated_count > 0:
+            await self._cache.resort()
+            logger.info(f"Resorted recipe cache after updating {cache_updated_count} items")
+            
+        return file_updated_count, cache_updated_count

py/utils/exif_utils.py

@@ -1,11 +1,10 @@
 import piexif
 import json
 import logging
-from typing import Dict, Optional, Any
+from typing import Optional
 from io import BytesIO
 import os
 from PIL import Image
-import re
 
 logger = logging.getLogger(__name__)
 
@@ -13,11 +12,23 @@ class ExifUtils:
     """Utility functions for working with EXIF data in images"""
     
     @staticmethod
-    def extract_user_comment(image_path: str) -> Optional[str]:
-        """Extract UserComment field from image EXIF data"""
+    def extract_image_metadata(image_path: str) -> Optional[str]:
+        """Extract metadata from image including UserComment or parameters field
+        
+        Args:
+            image_path (str): Path to the image file
+            
+        Returns:
+            Optional[str]: Extracted metadata or None if not found
+        """
         try:
-            # First try to open as image to check format
+            # First try to open the image
             with Image.open(image_path) as img:
+                # Method 1: Check for parameters in image info
+                if hasattr(img, 'info') and 'parameters' in img.info:
+                    return img.info['parameters']
+                
+                # 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()
@@ -28,82 +39,106 @@ class ExifUtils:
                                 return user_comment[8:].decode('utf-16be')
                             return user_comment.decode('utf-8', errors='ignore')
                         return user_comment
-                    return None
                 
                 # For JPEG/TIFF/WEBP, use piexif
-                exif_dict = piexif.load(image_path)
+                try:
+                    exif_dict = piexif.load(image_path)
+                    
+                    if piexif.ExifIFD.UserComment in exif_dict.get('Exif', {}):
+                        user_comment = exif_dict['Exif'][piexif.ExifIFD.UserComment]
+                        if isinstance(user_comment, bytes):
+                            if user_comment.startswith(b'UNICODE\0'):
+                                user_comment = user_comment[8:].decode('utf-16be')
+                            else:
+                                user_comment = user_comment.decode('utf-8', errors='ignore')
+                        return user_comment
+                except Exception as e:
+                    logger.debug(f"Error loading EXIF data: {e}")
+                
+                # Method 3: Check PNG metadata for workflow info (for ComfyUI images)
+                if img.format == 'PNG':
+                    # Look for workflow or prompt metadata in PNG chunks
+                    for key in img.info:
+                        if key in ['workflow', 'prompt', 'parameters']:
+                            return img.info[key]
                 
-                if piexif.ExifIFD.UserComment in exif_dict.get('Exif', {}):
-                    user_comment = exif_dict['Exif'][piexif.ExifIFD.UserComment]
-                    if isinstance(user_comment, bytes):
-                        if user_comment.startswith(b'UNICODE\0'):
-                            user_comment = user_comment[8:].decode('utf-16be')
-                        else:
-                            user_comment = user_comment.decode('utf-8', errors='ignore')
-                    return user_comment
                 return None
                 
         except Exception as e:
+            logger.error(f"Error extracting image metadata: {e}", exc_info=True)
             return None
     
     @staticmethod
-    def update_user_comment(image_path: str, user_comment: str) -> str:
-        """Update UserComment field in image EXIF data"""
+    def update_image_metadata(image_path: str, metadata: str) -> str:
+        """Update metadata in image's EXIF data or parameters fields
+        
+        Args:
+            image_path (str): Path to the image file
+            metadata (str): Metadata string to save
+            
+        Returns:
+            str: Path to the updated image
+        """
         try:
-            # Load the image and its EXIF data
+            # Load the image and check its format
             with Image.open(image_path) as img:
-                # Get original format
                 img_format = img.format
                 
-                # For WebP format, we need a different approach
-                if img_format == 'WEBP':
-                    # WebP doesn't support standard EXIF through piexif
-                    # We'll use PIL's exif parameter directly
-                    exif_dict = {'Exif': {piexif.ExifIFD.UserComment: b'UNICODE\0' + user_comment.encode('utf-16be')}}
+                # For PNG, try to update parameters directly
+                if img_format == 'PNG':
+                    # We'll save with parameters in the PNG info
+                    info_dict = {'parameters': metadata}
+                    img.save(image_path, format='PNG', pnginfo=info_dict)
+                    return image_path
+                
+                # For WebP format, use PIL's exif parameter directly
+                elif img_format == 'WEBP':
+                    exif_dict = {'Exif': {piexif.ExifIFD.UserComment: b'UNICODE\0' + metadata.encode('utf-16be')}}
                     exif_bytes = piexif.dump(exif_dict)
                     
                     # Save with the exif data
                     img.save(image_path, format='WEBP', exif=exif_bytes, quality=85)
                     return image_path
                 
-                # For other formats, use the standard approach
-                try:
-                    exif_dict = piexif.load(img.info.get('exif', b''))
-                except:
-                    exif_dict = {'0th':{}, 'Exif':{}, 'GPS':{}, 'Interop':{}, '1st':{}}
-                
-                # If no Exif dictionary exists, create one
-                if 'Exif' not in exif_dict:
-                    exif_dict['Exif'] = {}
-                
-                # Update the UserComment field - use UNICODE format
-                unicode_bytes = user_comment.encode('utf-16be')
-                user_comment_bytes = b'UNICODE\0' + unicode_bytes
-                
-                exif_dict['Exif'][piexif.ExifIFD.UserComment] = user_comment_bytes
-                
-                # Convert EXIF dict back to bytes
-                exif_bytes = piexif.dump(exif_dict)
-                
-                # Save the image with updated EXIF data
-                img.save(image_path, exif=exif_bytes)
-                
+                # For other formats, use standard EXIF approach
+                else:
+                    try:
+                        exif_dict = piexif.load(img.info.get('exif', b''))
+                    except:
+                        exif_dict = {'0th':{}, 'Exif':{}, 'GPS':{}, 'Interop':{}, '1st':{}}
+                    
+                    # If no Exif dictionary exists, create one
+                    if 'Exif' not in exif_dict:
+                        exif_dict['Exif'] = {}
+                    
+                    # Update the UserComment field - use UNICODE format
+                    unicode_bytes = metadata.encode('utf-16be')
+                    metadata_bytes = b'UNICODE\0' + unicode_bytes
+                    
+                    exif_dict['Exif'][piexif.ExifIFD.UserComment] = metadata_bytes
+                    
+                    # Convert EXIF dict back to bytes
+                    exif_bytes = piexif.dump(exif_dict)
+                    
+                    # Save the image with updated EXIF data
+                    img.save(image_path, exif=exif_bytes)
+                    
             return image_path
         except Exception as e:
-            logger.error(f"Error updating EXIF data in {image_path}: {e}")
+            logger.error(f"Error updating metadata in {image_path}: {e}")
             return image_path
             
     @staticmethod
     def append_recipe_metadata(image_path, recipe_data) -> str:
         """Append recipe metadata to an image's EXIF data"""
         try:
-            # First, extract existing user comment
-            user_comment = ExifUtils.extract_user_comment(image_path)
+            # First, extract existing metadata
+            metadata = ExifUtils.extract_image_metadata(image_path)
             
-            # Check if there's already recipe metadata in the user comment
-            if user_comment:
+            # Check if there's already recipe metadata
+            if metadata:
                 # Remove any existing recipe metadata
-                user_comment = ExifUtils.remove_recipe_metadata(user_comment)
+                metadata = ExifUtils.remove_recipe_metadata(metadata)
             
             # Prepare simplified loras data
             simplified_loras = []
@@ -133,11 +168,11 @@ class ExifUtils:
             # Create the recipe metadata marker
             recipe_metadata_marker = f"Recipe metadata: {recipe_metadata_json}"
             
-            # Append to existing user comment or create new one
-            new_user_comment = f"{user_comment} \n {recipe_metadata_marker}" if user_comment else recipe_metadata_marker
+            # Append to existing metadata or create new one
+            new_metadata = f"{metadata} \n {recipe_metadata_marker}" if metadata else recipe_metadata_marker
             
             # Write back to the image
-            return ExifUtils.update_user_comment(image_path, new_user_comment)
+            return ExifUtils.update_image_metadata(image_path, new_metadata)
         except Exception as e:
             logger.error(f"Error appending recipe metadata: {e}", exc_info=True)
             return image_path
@@ -184,11 +219,11 @@ class ExifUtils:
         """
         try:
             # Extract metadata if needed
-            user_comment = None
+            metadata = None
             if preserve_metadata:
                 if isinstance(image_data, str) and os.path.exists(image_data):
                     # It's a file path
-                    user_comment = ExifUtils.extract_user_comment(image_data)
+                    metadata = ExifUtils.extract_image_metadata(image_data)
                     img = Image.open(image_data)
                 else:
                     # It's binary data
@@ -199,7 +234,7 @@ class ExifUtils:
                     with tempfile.NamedTemporaryFile(suffix='.jpg', delete=False) as temp_file:
                         temp_path = temp_file.name
                         temp_file.write(image_data)
-                    user_comment = ExifUtils.extract_user_comment(temp_path)
+                    metadata = ExifUtils.extract_image_metadata(temp_path)
                     os.unlink(temp_path)
             else:
                 # Just open the image without extracting metadata
@@ -239,14 +274,14 @@ class ExifUtils:
             optimized_data = output.getvalue()
             
             # If we need to preserve metadata, write it to a temporary file
-            if preserve_metadata and user_comment:
+            if preserve_metadata and metadata:
                 # For WebP format, we'll directly save with metadata
                 if format.lower() == 'webp':
                     # Create a new BytesIO with metadata
                     output_with_metadata = BytesIO()
                     
                     # Create EXIF data with user comment
-                    exif_dict = {'Exif': {piexif.ExifIFD.UserComment: b'UNICODE\0' + user_comment.encode('utf-16be')}}
+                    exif_dict = {'Exif': {piexif.ExifIFD.UserComment: b'UNICODE\0' + metadata.encode('utf-16be')}}
                     exif_bytes = piexif.dump(exif_dict)
                     
                     # Save with metadata
@@ -260,7 +295,7 @@ class ExifUtils:
                         temp_file.write(optimized_data)
                     
                     # Add the metadata back
-                    ExifUtils.update_user_comment(temp_path, user_comment)
+                    ExifUtils.update_image_metadata(temp_path, metadata)
                     
                     # Read the file with metadata
                     with open(temp_path, 'rb') as f:
@@ -277,210 +312,4 @@ class ExifUtils:
             if isinstance(image_data, str) and os.path.exists(image_data):
                 with open(image_data, 'rb') as f:
                     return f.read(), os.path.splitext(image_data)[1]
-            return image_data, '.jpg'
-
-    @staticmethod
-    def _parse_comfyui_workflow(workflow_data: Any) -> Dict[str, Any]:
-        """
-        Parse ComfyUI workflow data and extract relevant generation parameters
-        
-        Args:
-            workflow_data: Raw workflow data (string or dict)
-            
-        Returns:
-            Formatted generation parameters dictionary
-        """
-        try:
-            # If workflow_data is a string, try to parse it as JSON
-            if isinstance(workflow_data, str):
-                try:
-                    workflow_data = json.loads(workflow_data)
-                except json.JSONDecodeError:
-                    logger.error("Failed to parse workflow data as JSON")
-                    return {}
-            
-            # Now workflow_data should be a dictionary
-            if not isinstance(workflow_data, dict):
-                logger.error(f"Workflow data is not a dictionary: {type(workflow_data)}")
-                return {}
-                
-            # Initialize parameters dictionary with only the required fields
-            gen_params = {
-                "prompt": "",
-                "negative_prompt": "",
-                "steps": "",
-                "sampler": "",
-                "cfg_scale": "",
-                "seed": "",
-                "size": "",
-                "clip_skip": ""
-            }
-            
-            # First pass: find the KSampler node to get basic parameters and node references
-            # Store node references to follow for prompts
-            positive_ref = None
-            negative_ref = None
-            
-            for node_id, node_data in workflow_data.items():
-                if not isinstance(node_data, dict):
-                    continue
-                    
-                # Extract node inputs if available
-                inputs = node_data.get("inputs", {})
-                if not inputs:
-                    continue
-                
-                # KSampler nodes contain most generation parameters and references to prompt nodes
-                if "KSampler" in node_data.get("class_type", ""):
-                    # Extract basic sampling parameters
-                    gen_params["steps"] = inputs.get("steps", "")
-                    gen_params["cfg_scale"] = inputs.get("cfg", "")
-                    gen_params["sampler"] = inputs.get("sampler_name", "")
-                    gen_params["seed"] = inputs.get("seed", "")
-                    if isinstance(gen_params["seed"], list) and len(gen_params["seed"]) > 1:
-                        gen_params["seed"] = gen_params["seed"][1]  # Use the actual value if it's a list
-                    
-                    # Get references to positive and negative prompt nodes
-                    positive_ref = inputs.get("positive", "")
-                    negative_ref = inputs.get("negative", "")
-                    
-                # CLIPSetLastLayer contains clip_skip information
-                elif "CLIPSetLastLayer" in node_data.get("class_type", ""):
-                    gen_params["clip_skip"] = inputs.get("stop_at_clip_layer", "")
-                    if isinstance(gen_params["clip_skip"], int) and gen_params["clip_skip"] < 0:
-                        # Convert negative layer index to positive clip skip value
-                        gen_params["clip_skip"] = abs(gen_params["clip_skip"])
-                
-                # Look for resolution information
-                elif "LatentImage" in node_data.get("class_type", "") or "Empty" in node_data.get("class_type", ""):
-                    width = inputs.get("width", 0)
-                    height = inputs.get("height", 0)
-                    if width and height:
-                        gen_params["size"] = f"{width}x{height}"
-                    
-                    # Some nodes have resolution as a string like "832x1216 (0.68)"
-                    resolution = inputs.get("resolution", "")
-                    if isinstance(resolution, str) and "x" in resolution:
-                        gen_params["size"] = resolution.split(" ")[0]  # Extract just the dimensions
-            
-            # Helper function to follow node references and extract text content
-            def get_text_from_node_ref(node_ref, workflow_data):
-                if not node_ref or not isinstance(node_ref, list) or len(node_ref) < 2:
-                    return ""
-                
-                node_id, slot_idx = node_ref
-                
-                # If we can't find the node, return empty string
-                if node_id not in workflow_data:
-                    return ""
-                
-                node = workflow_data[node_id]
-                inputs = node.get("inputs", {})
-                
-                # Direct text input in CLIP Text Encode nodes
-                if "CLIPTextEncode" in node.get("class_type", ""):
-                    text = inputs.get("text", "")
-                    if isinstance(text, str):
-                        return text
-                    elif isinstance(text, list) and len(text) >= 2:
-                        # If text is a reference to another node, follow it
-                        return get_text_from_node_ref(text, workflow_data)
-                
-                # Other nodes might have text input with different field names
-                for field_name, field_value in inputs.items():
-                    if field_name == "text" and isinstance(field_value, str):
-                        return field_value
-                    elif isinstance(field_value, list) and len(field_value) >= 2 and field_name in ["text"]:
-                        # If it's a reference to another node, follow it
-                        return get_text_from_node_ref(field_value, workflow_data)
-                
-                return ""
-            
-            # Extract prompts by following references from KSampler node
-            if positive_ref:
-                gen_params["prompt"] = get_text_from_node_ref(positive_ref, workflow_data)
-            
-            if negative_ref:
-                gen_params["negative_prompt"] = get_text_from_node_ref(negative_ref, workflow_data)
-            
-            # Fallback: if we couldn't extract prompts via references, use the traditional method
-            if not gen_params["prompt"] or not gen_params["negative_prompt"]:
-                for node_id, node_data in workflow_data.items():
-                    if not isinstance(node_data, dict):
-                        continue
-                        
-                    inputs = node_data.get("inputs", {})
-                    if not inputs:
-                        continue
-                    
-                    if "CLIPTextEncode" in node_data.get("class_type", ""):
-                        # Check for negative prompt nodes
-                        title = node_data.get("_meta", {}).get("title", "").lower()
-                        prompt_text = inputs.get("text", "")
-                        
-                        if isinstance(prompt_text, str):
-                            if "negative" in title and not gen_params["negative_prompt"]:
-                                gen_params["negative_prompt"] = prompt_text
-                            elif prompt_text and not "negative" in title and not gen_params["prompt"]:
-                                gen_params["prompt"] = prompt_text
-            
-            return gen_params
-            
-        except Exception as e:
-            logger.error(f"Error parsing ComfyUI workflow: {e}", exc_info=True)
-            return {}
-
-    @staticmethod
-    def extract_comfyui_gen_params(image_path: str) -> Dict[str, Any]:
-        """
-        Extract ComfyUI workflow data from PNG images and format for recipe data
-        Only extracts the specific generation parameters needed for recipes.
-        
-        Args:
-            image_path: Path to the ComfyUI-generated PNG image
-            
-        Returns:
-            Dictionary containing formatted generation parameters
-        """
-        try:
-            # Check if the file exists and is accessible
-            if not os.path.exists(image_path):
-                logger.error(f"Image file not found: {image_path}")
-                return {}
-                
-            # Open the image to extract embedded workflow data
-            with Image.open(image_path) as img:
-                workflow_data = None
-                
-                # For PNG images, look for the ComfyUI workflow data in PNG chunks
-                if img.format == 'PNG':
-                    # Check standard metadata fields that might contain workflow
-                    if 'parameters' in img.info:
-                        workflow_data = img.info['parameters']
-                    elif 'prompt' in img.info:
-                        workflow_data = img.info['prompt']
-                    else:
-                        # Look for other potential field names that might contain workflow data
-                        for key in img.info:
-                            if isinstance(key, str) and ('workflow' in key.lower() or 'comfy' in key.lower()):
-                                workflow_data = img.info[key]
-                                break
-                
-                # If no workflow data found in PNG chunks, try EXIF as fallback
-                if not workflow_data:
-                    user_comment = ExifUtils.extract_user_comment(image_path)
-                    if user_comment and '{' in user_comment and '}' in user_comment:
-                        # Try to extract JSON part
-                        json_start = user_comment.find('{')
-                        json_end = user_comment.rfind('}') + 1
-                        workflow_data = user_comment[json_start:json_end]
-                
-                # Parse workflow data if found
-                if workflow_data:
-                    return ExifUtils._parse_comfyui_workflow(workflow_data)
-                
-                return {}
-                
-        except Exception as e:
-            logger.error(f"Error extracting ComfyUI gen params from {image_path}: {e}", exc_info=True)
-            return {}
+            return image_data, '.jpg'

py/utils/file_utils.py

@@ -19,7 +19,7 @@ async def calculate_sha256(file_path: str) -> str:
             sha256_hash.update(byte_block)
     return sha256_hash.hexdigest()
 
-def _find_preview_file(base_name: str, dir_path: str) -> str:
+def find_preview_file(base_name: str, dir_path: str) -> str:
     """Find preview file for given base name in directory"""
     preview_patterns = [
         f"{base_name}.preview.png",
@@ -56,16 +56,33 @@ async def get_file_info(file_path: str) -> Optional[LoraMetadata]:
     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)
+    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}")
 
     try:
+        # If we didn't get SHA256 from the .json file, calculate it
+        if not sha256:
+            sha256 = await calculate_sha256(real_path)
+            
         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=await calculate_sha256(real_path),
+            sha256=sha256,
             base_model="Unknown",  # Will be updated later
             usage_tips="",
             notes="",
@@ -125,7 +142,7 @@ async def load_metadata(file_path: str) -> Optional[LoraMetadata]:
                 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))
+                    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

py/utils/models.py

@@ -75,3 +75,31 @@ class LoraMetadata:
             self.modified = os.path.getmtime(file_path)
             self.file_path = file_path.replace(os.sep, '/')
 
+@dataclass
+class CheckpointMetadata:
+    """Represents the metadata structure for a Checkpoint model"""
+    file_name: str              # The filename without extension
+    model_name: str             # The checkpoint's name defined by the creator
+    file_path: str              # Full path to the model file
+    size: int                   # File size in bytes
+    modified: float             # Last modified timestamp
+    sha256: str                 # SHA256 hash of the file
+    base_model: str             # Base model type (SD1.5/SD2.1/SDXL/etc.)
+    preview_url: str            # Preview image URL
+    preview_nsfw_level: int = 0 # NSFW level of the preview image
+    model_type: str = "checkpoint"  # Model type (checkpoint, inpainting, etc.)
+    notes: str = ""             # Additional notes
+    from_civitai: bool = True   # Whether from Civitai
+    civitai: Optional[Dict] = None  # Civitai API data if available
+    tags: List[str] = None      # Model tags
+    modelDescription: str = ""  # Full model description
+    
+    # Additional checkpoint-specific fields
+    resolution: Optional[str] = None  # Native resolution (e.g., 512x512, 1024x1024)
+    vae_included: bool = False       # Whether VAE is included in the checkpoint
+    architecture: str = ""           # Model architecture (if known)
+    
+    def __post_init__(self):
+        if self.tags is None:
+            self.tags = []
+

py/utils/recipe_parsers.py

@@ -44,6 +44,138 @@ class RecipeMetadataParser(ABC):
             Dict containing parsed recipe data with standardized format
         """
         pass
+    
+    async def populate_lora_from_civitai(self, lora_entry: Dict[str, Any], civitai_info: Dict[str, Any], 
+                                         recipe_scanner=None, base_model_counts=None, hash_value=None) -> Dict[str, Any]:
+        """
+        Populate a lora entry with information from Civitai API response
+        
+        Args:
+            lora_entry: The lora entry to populate
+            civitai_info: The response from Civitai API
+            recipe_scanner: Optional recipe scanner for local file lookup
+            base_model_counts: Optional dict to track base model counts
+            hash_value: Optional hash value to use if not available in civitai_info
+            
+        Returns:
+            The populated lora_entry dict
+        """
+        try:
+            if civitai_info and civitai_info.get("error") != "Model not found":
+                # Check if this is an early access lora
+                if civitai_info.get('earlyAccessEndsAt'):
+                    # Convert earlyAccessEndsAt to a human-readable date
+                    early_access_date = civitai_info.get('earlyAccessEndsAt', '')
+                    lora_entry['isEarlyAccess'] = True
+                    lora_entry['earlyAccessEndsAt'] = early_access_date
+                
+                # Update model name if available
+                if 'model' in civitai_info and 'name' in civitai_info['model']:
+                    lora_entry['name'] = civitai_info['model']['name']
+                
+                # Update version if available
+                if 'name' in civitai_info:
+                    lora_entry['version'] = civitai_info.get('name', '')
+                
+                # Get thumbnail URL from first image
+                if 'images' in civitai_info and civitai_info['images']:
+                    lora_entry['thumbnailUrl'] = civitai_info['images'][0].get('url', '')
+                
+                # Get base model
+                current_base_model = civitai_info.get('baseModel', '')
+                lora_entry['baseModel'] = current_base_model
+                
+                # Update base model counts if tracking them
+                if base_model_counts is not None and current_base_model:
+                    base_model_counts[current_base_model] = base_model_counts.get(current_base_model, 0) + 1
+                
+                # Get download URL
+                lora_entry['downloadUrl'] = civitai_info.get('downloadUrl', '')
+                
+                # Process file information if available
+                if 'files' in civitai_info:
+                    model_file = next((file for file in civitai_info.get('files', []) 
+                                    if file.get('type') == 'Model'), None)
+                    
+                    if model_file:
+                        # Get size
+                        lora_entry['size'] = model_file.get('sizeKB', 0) * 1024
+                        
+                        # Get SHA256 hash
+                        sha256 = model_file.get('hashes', {}).get('SHA256', hash_value)
+                        if sha256:
+                            lora_entry['hash'] = sha256.lower()
+                        
+                        # Check if exists locally
+                        if recipe_scanner and lora_entry['hash']:
+                            lora_scanner = recipe_scanner._lora_scanner
+                            exists_locally = lora_scanner.has_lora_hash(lora_entry['hash'])
+                            if exists_locally:
+                                try:
+                                    local_path = lora_scanner.get_lora_path_by_hash(lora_entry['hash'])
+                                    lora_entry['existsLocally'] = True
+                                    lora_entry['localPath'] = local_path
+                                    lora_entry['file_name'] = os.path.splitext(os.path.basename(local_path))[0]
+                                    
+                                    # Get thumbnail from local preview if available
+                                    lora_cache = await lora_scanner.get_cached_data()
+                                    lora_item = next((item for item in lora_cache.raw_data 
+                                                     if item['sha256'].lower() == lora_entry['hash'].lower()), None)
+                                    if lora_item and 'preview_url' in lora_item:
+                                        lora_entry['thumbnailUrl'] = config.get_preview_static_url(lora_item['preview_url'])
+                                except Exception as e:
+                                    logger.error(f"Error getting local lora path: {e}")
+                            else:
+                                # For missing LoRAs, get file_name from model_file.name
+                                file_name = model_file.get('name', '')
+                                lora_entry['file_name'] = os.path.splitext(file_name)[0] if file_name else ''
+            else:
+                # Model not found or deleted
+                lora_entry['isDeleted'] = True
+                lora_entry['thumbnailUrl'] = '/loras_static/images/no-preview.png'
+                
+        except Exception as e:
+            logger.error(f"Error populating lora from Civitai info: {e}")
+            
+        return lora_entry
+        
+    async def populate_checkpoint_from_civitai(self, checkpoint: Dict[str, Any], civitai_info: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Populate checkpoint information from Civitai API response
+        
+        Args:
+            checkpoint: The checkpoint entry to populate
+            civitai_info: The response from Civitai API
+            
+        Returns:
+            The populated checkpoint dict
+        """
+        try:
+            if civitai_info and civitai_info.get("error") != "Model not found":
+                # Update model name if available
+                if 'model' in civitai_info and 'name' in civitai_info['model']:
+                    checkpoint['name'] = civitai_info['model']['name']
+                
+                # Update version if available
+                if 'name' in civitai_info:
+                    checkpoint['version'] = civitai_info.get('name', '')
+                
+                # Get thumbnail URL from first image
+                if 'images' in civitai_info and civitai_info['images']:
+                    checkpoint['thumbnailUrl'] = civitai_info['images'][0].get('url', '')
+                
+                # Get base model
+                checkpoint['baseModel'] = civitai_info.get('baseModel', '')
+                
+                # Get download URL
+                checkpoint['downloadUrl'] = civitai_info.get('downloadUrl', '')
+            else:
+                # Model not found or deleted
+                checkpoint['isDeleted'] = True
+        except Exception as e:
+            logger.error(f"Error populating checkpoint from Civitai info: {e}")
+            
+        return checkpoint
 
 
 class RecipeFormatParser(RecipeMetadataParser):
@@ -110,33 +242,14 @@ class RecipeFormatParser(RecipeMetadataParser):
                         if lora.get('modelVersionId') and civitai_client:
                             try:
                                 civitai_info = await civitai_client.get_model_version_info(lora['modelVersionId'])
-                                if civitai_info and civitai_info.get("error") != "Model not found":
-                                    # Check if this is an early access lora
-                                    if civitai_info.get('earlyAccessEndsAt'):
-                                        # Convert earlyAccessEndsAt to a human-readable date
-                                        early_access_date = civitai_info.get('earlyAccessEndsAt', '')
-                                        lora_entry['isEarlyAccess'] = True
-                                        lora_entry['earlyAccessEndsAt'] = early_access_date
-                                    
-                                    # Get thumbnail URL from first image
-                                    if 'images' in civitai_info and civitai_info['images']:
-                                        lora_entry['thumbnailUrl'] = civitai_info['images'][0].get('url', '')
-                                    
-                                    # Get base model
-                                    lora_entry['baseModel'] = civitai_info.get('baseModel', '')
-                                    
-                                    # Get download URL
-                                    lora_entry['downloadUrl'] = civitai_info.get('downloadUrl', '')
-                                    
-                                    # Get size from files if available
-                                    if 'files' in civitai_info:
-                                        model_file = next((file for file in civitai_info.get('files', []) 
-                                                        if file.get('type') == 'Model'), None)
-                                        if model_file:
-                                            lora_entry['size'] = model_file.get('sizeKB', 0) * 1024
-                                else:
-                                    lora_entry['isDeleted'] = True
-                                    lora_entry['thumbnailUrl'] = '/loras_static/images/no-preview.png'
+                                # Populate lora entry with Civitai info
+                                lora_entry = await self.populate_lora_from_civitai(
+                                    lora_entry, 
+                                    civitai_info, 
+                                    recipe_scanner,
+                                    None,  # No need to track base model counts
+                                    lora['hash']
+                                )
                             except Exception as e:
                                 logger.error(f"Error fetching Civitai info for LoRA: {e}")
                                 lora_entry['thumbnailUrl'] = '/loras_static/images/no-preview.png'
@@ -222,57 +335,16 @@ class StandardMetadataParser(RecipeMetadataParser):
                 
                 # Get additional info from Civitai if client is available
                 if civitai_client:
-                    civitai_info = await civitai_client.get_model_version_info(model_version_id)
-
-                    # Check if this LoRA exists locally by SHA256 hash
-                    if civitai_info and civitai_info.get("error") != "Model not found":
-                        # Check if this is an early access lora
-                        if civitai_info.get('earlyAccessEndsAt'):
-                            # Convert earlyAccessEndsAt to a human-readable date
-                            early_access_date = civitai_info.get('earlyAccessEndsAt', '')
-                            lora_entry['isEarlyAccess'] = True
-                            lora_entry['earlyAccessEndsAt'] = early_access_date
-                        
-                        # LoRA exists on Civitai, process its information
-                        if 'files' in civitai_info:
-                            # Find the model file (type="Model") in the files list
-                            model_file = next((file for file in civitai_info.get('files', []) 
-                                            if file.get('type') == 'Model'), None)
-                            
-                            if model_file and recipe_scanner:
-                                sha256 = model_file.get('hashes', {}).get('SHA256', '')
-                                if sha256:
-                                    lora_scanner = recipe_scanner._lora_scanner
-                                    exists_locally = lora_scanner.has_lora_hash(sha256)
-                                    if exists_locally:
-                                        local_path = lora_scanner.get_lora_path_by_hash(sha256)
-                                        lora_entry['existsLocally'] = True
-                                        lora_entry['localPath'] = local_path
-                                        lora_entry['file_name'] = os.path.splitext(os.path.basename(local_path))[0]
-                                    else:
-                                        # For missing LoRAs, get file_name from model_file.name
-                                        file_name = model_file.get('name', '')
-                                        lora_entry['file_name'] = os.path.splitext(file_name)[0] if file_name else ''
-                                
-                                lora_entry['hash'] = sha256
-                                lora_entry['size'] = model_file.get('sizeKB', 0) * 1024
-                        
-                        # Get thumbnail URL from first image
-                        if 'images' in civitai_info and civitai_info['images']:
-                            lora_entry['thumbnailUrl'] = civitai_info['images'][0].get('url', '')
-                        
-                        # Get base model and update counts
-                        current_base_model = civitai_info.get('baseModel', '')
-                        lora_entry['baseModel'] = current_base_model
-                        if current_base_model:
-                            base_model_counts[current_base_model] = base_model_counts.get(current_base_model, 0) + 1
-                        
-                        # Get download URL
-                        lora_entry['downloadUrl'] = civitai_info.get('downloadUrl', '')
-                    else:
-                        # LoRA is deleted from Civitai or not found
-                        lora_entry['isDeleted'] = True
-                        lora_entry['thumbnailUrl'] = '/loras_static/images/no-preview.png'
+                    try:
+                        civitai_info = await civitai_client.get_model_version_info(model_version_id)
+                        # Populate lora entry with Civitai info
+                        lora_entry = await self.populate_lora_from_civitai(
+                            lora_entry, 
+                            civitai_info, 
+                            recipe_scanner
+                        )
+                    except Exception as e:
+                        logger.error(f"Error fetching Civitai info for LoRA: {e}")
                 
                 loras.append(lora_entry)
             
@@ -394,7 +466,9 @@ class A1111MetadataParser(RecipeMetadataParser):
             # Extract LoRA information from prompt
             lora_weights = {}
             lora_matches = re.findall(self.LORA_PATTERN, prompt)
-            for lora_name, weight in lora_matches:
+            for lora_name, weights in lora_matches:
+                # Take only the first strength value (before the colon)
+                weight = weights.split(':')[0]
                 lora_weights[lora_name.strip()] = float(weight.strip())
             
             # Remove LoRA patterns from prompt
@@ -436,61 +510,18 @@ class A1111MetadataParser(RecipeMetadataParser):
                     'isDeleted': False
                 }
                 
-                # Get info from Civitai by hash
-                if civitai_client:
+                # Get info from Civitai by hash if available
+                if civitai_client and hash_value:
                     try:
                         civitai_info = await civitai_client.get_model_by_hash(hash_value)
-                        if civitai_info and civitai_info.get("error") != "Model not found":
-                            # Check if this is an early access lora
-                            if civitai_info.get('earlyAccessEndsAt'):
-                                # Convert earlyAccessEndsAt to a human-readable date
-                                early_access_date = civitai_info.get('earlyAccessEndsAt', '')
-                                lora_entry['isEarlyAccess'] = True
-                                lora_entry['earlyAccessEndsAt'] = early_access_date
-                            
-                            # Get model version ID
-                            lora_entry['id'] = civitai_info.get('id', '')
-                            
-                            # Get model name and version
-                            lora_entry['name'] = civitai_info.get('model', {}).get('name', lora_name)
-                            lora_entry['version'] = civitai_info.get('name', '')
-                            
-                            # Get thumbnail URL
-                            if 'images' in civitai_info and civitai_info['images']:
-                                lora_entry['thumbnailUrl'] = civitai_info['images'][0].get('url', '')
-                            
-                            # Get base model and update counts
-                            current_base_model = civitai_info.get('baseModel', '')
-                            lora_entry['baseModel'] = current_base_model
-                            if current_base_model:
-                                base_model_counts[current_base_model] = base_model_counts.get(current_base_model, 0) + 1
-                            
-                            # Get download URL
-                            lora_entry['downloadUrl'] = civitai_info.get('downloadUrl', '')
-                            
-                            # Get file name and size from Civitai
-                            if 'files' in civitai_info:
-                                model_file = next((file for file in civitai_info.get('files', []) 
-                                                if file.get('type') == 'Model'), None)
-                                if model_file:
-                                    file_name = model_file.get('name', '')
-                                    lora_entry['file_name'] = os.path.splitext(file_name)[0] if file_name else lora_name
-                                    lora_entry['size'] = model_file.get('sizeKB', 0) * 1024
-                                    # Update hash to sha256
-                                    lora_entry['hash'] = model_file.get('hashes', {}).get('SHA256', hash_value).lower()
-                                    
-                            # Check if exists locally with sha256 hash
-                            if recipe_scanner and lora_entry['hash']:
-                                lora_scanner = recipe_scanner._lora_scanner
-                                exists_locally = lora_scanner.has_lora_hash(lora_entry['hash'])
-                                if exists_locally:
-                                    lora_cache = await lora_scanner.get_cached_data()
-                                    lora_item = next((item for item in lora_cache.raw_data if item['sha256'] == lora_entry['hash']), None)
-                                    if lora_item:
-                                        lora_entry['existsLocally'] = True
-                                        lora_entry['localPath'] = lora_item['file_path']
-                                        lora_entry['thumbnailUrl'] = config.get_preview_static_url(lora_item['preview_url'])
-                                        
+                        # Populate lora entry with Civitai info
+                        lora_entry = await self.populate_lora_from_civitai(
+                            lora_entry, 
+                            civitai_info, 
+                            recipe_scanner,
+                            base_model_counts,
+                            hash_value
+                        )
                     except Exception as e:
                         logger.error(f"Error fetching Civitai info for LoRA hash {hash_value}: {e}")
                 
@@ -523,6 +554,499 @@ class A1111MetadataParser(RecipeMetadataParser):
             return {"error": str(e), "loras": []}
 
 
+class ComfyMetadataParser(RecipeMetadataParser):
+    """Parser for Civitai ComfyUI metadata JSON format"""
+    
+    METADATA_MARKER = r"class_type"
+    
+    def is_metadata_matching(self, user_comment: str) -> bool:
+        """Check if the user comment matches the ComfyUI metadata format"""
+        try:
+            data = json.loads(user_comment)
+            # Check if it contains class_type nodes typical of ComfyUI workflow
+            return isinstance(data, dict) and any(isinstance(v, dict) and 'class_type' in v for v in data.values())
+        except (json.JSONDecodeError, TypeError):
+            return False
+    
+    async def parse_metadata(self, user_comment: str, recipe_scanner=None, civitai_client=None) -> Dict[str, Any]:
+        """Parse metadata from Civitai ComfyUI metadata format"""
+        try:
+            data = json.loads(user_comment)
+            loras = []
+            
+            # Find all LoraLoader nodes
+            lora_nodes = {k: v for k, v in data.items() if isinstance(v, dict) and v.get('class_type') == 'LoraLoader'}
+            
+            if not lora_nodes:
+                return {"error": "No LoRA information found in this ComfyUI workflow", "loras": []}
+            
+            # Process each LoraLoader node
+            for node_id, node in lora_nodes.items():
+                if 'inputs' not in node or 'lora_name' not in node['inputs']:
+                    continue
+                    
+                lora_name = node['inputs'].get('lora_name', '')
+                
+                # Parse the URN to extract model ID and version ID
+                # Format: "urn:air:sdxl:lora:civitai:1107767@1253442"
+                lora_id_match = re.search(r'civitai:(\d+)@(\d+)', lora_name)
+                if not lora_id_match:
+                    continue
+                    
+                model_id = lora_id_match.group(1)
+                model_version_id = lora_id_match.group(2)
+                
+                # Get strength from node inputs
+                weight = node['inputs'].get('strength_model', 1.0)
+                
+                # Initialize lora entry with default values
+                lora_entry = {
+                    'id': model_version_id,
+                    'modelId': model_id,
+                    'name': f"Lora {model_id}",  # Default name
+                    'version': '',
+                    'type': 'lora',
+                    'weight': weight,
+                    'existsLocally': False,
+                    'localPath': None,
+                    'file_name': '',
+                    'hash': '',
+                    'thumbnailUrl': '/loras_static/images/no-preview.png',
+                    'baseModel': '',
+                    'size': 0,
+                    'downloadUrl': '',
+                    'isDeleted': False
+                }
+                
+                # Get additional info from Civitai if client is available
+                if civitai_client:
+                    try:
+                        civitai_info = await civitai_client.get_model_version_info(model_version_id)
+                        # Populate lora entry with Civitai info
+                        lora_entry = await self.populate_lora_from_civitai(
+                            lora_entry, 
+                            civitai_info, 
+                            recipe_scanner
+                        )
+                    except Exception as e:
+                        logger.error(f"Error fetching Civitai info for LoRA: {e}")
+                
+                loras.append(lora_entry)
+            
+            # Find checkpoint info
+            checkpoint_nodes = {k: v for k, v in data.items() if isinstance(v, dict) and v.get('class_type') == 'CheckpointLoaderSimple'}
+            checkpoint = None
+            checkpoint_id = None
+            checkpoint_version_id = None
+            
+            if checkpoint_nodes:
+                # Get the first checkpoint node
+                checkpoint_node = next(iter(checkpoint_nodes.values()))
+                if 'inputs' in checkpoint_node and 'ckpt_name' in checkpoint_node['inputs']:
+                    checkpoint_name = checkpoint_node['inputs']['ckpt_name']
+                    # Parse checkpoint URN
+                    checkpoint_match = re.search(r'civitai:(\d+)@(\d+)', checkpoint_name)
+                    if checkpoint_match:
+                        checkpoint_id = checkpoint_match.group(1)
+                        checkpoint_version_id = checkpoint_match.group(2)
+                        checkpoint = {
+                            'id': checkpoint_version_id,
+                            'modelId': checkpoint_id,
+                            'name': f"Checkpoint {checkpoint_id}",
+                            'version': '',
+                            'type': 'checkpoint'
+                        }
+                        
+                        # Get additional checkpoint info from Civitai
+                        if civitai_client:
+                            try:
+                                civitai_info = await civitai_client.get_model_version_info(checkpoint_version_id)
+                                # Populate checkpoint with Civitai info
+                                checkpoint = await self.populate_checkpoint_from_civitai(checkpoint, civitai_info)
+                            except Exception as e:
+                                logger.error(f"Error fetching Civitai info for checkpoint: {e}")
+            
+            # Extract generation parameters
+            gen_params = {}
+            
+            # First try to get from extraMetadata
+            if 'extraMetadata' in data:
+                try:
+                    # extraMetadata is a JSON string that needs to be parsed
+                    extra_metadata = json.loads(data['extraMetadata'])
+                    
+                    # Map fields from extraMetadata to our standard format
+                    mapping = {
+                        'prompt': 'prompt',
+                        'negativePrompt': 'negative_prompt',
+                        'steps': 'steps',
+                        'sampler': 'sampler',
+                        'cfgScale': 'cfg_scale',
+                        'seed': 'seed'
+                    }
+                    
+                    for src_key, dest_key in mapping.items():
+                        if src_key in extra_metadata:
+                            gen_params[dest_key] = extra_metadata[src_key]
+                    
+                    # If size info is available, format as "width x height"
+                    if 'width' in extra_metadata and 'height' in extra_metadata:
+                        gen_params['size'] = f"{extra_metadata['width']}x{extra_metadata['height']}"
+                    
+                except Exception as e:
+                    logger.error(f"Error parsing extraMetadata: {e}")
+            
+            # If extraMetadata doesn't have all the info, try to get from nodes
+            if not gen_params or len(gen_params) < 3:  # At least we want prompt, negative_prompt, and steps
+                # Find positive prompt node
+                positive_nodes = {k: v for k, v in data.items() if isinstance(v, dict) and 
+                                v.get('class_type', '').endswith('CLIPTextEncode') and 
+                                v.get('_meta', {}).get('title') == 'Positive'}
+                
+                if positive_nodes:
+                    positive_node = next(iter(positive_nodes.values()))
+                    if 'inputs' in positive_node and 'text' in positive_node['inputs']:
+                        gen_params['prompt'] = positive_node['inputs']['text']
+                
+                # Find negative prompt node
+                negative_nodes = {k: v for k, v in data.items() if isinstance(v, dict) and 
+                                v.get('class_type', '').endswith('CLIPTextEncode') and 
+                                v.get('_meta', {}).get('title') == 'Negative'}
+                
+                if negative_nodes:
+                    negative_node = next(iter(negative_nodes.values()))
+                    if 'inputs' in negative_node and 'text' in negative_node['inputs']:
+                        gen_params['negative_prompt'] = negative_node['inputs']['text']
+                
+                # Find KSampler node for other parameters
+                ksampler_nodes = {k: v for k, v in data.items() if isinstance(v, dict) and v.get('class_type') == 'KSampler'}
+                
+                if ksampler_nodes:
+                    ksampler_node = next(iter(ksampler_nodes.values()))
+                    if 'inputs' in ksampler_node:
+                        inputs = ksampler_node['inputs']
+                        if 'sampler_name' in inputs:
+                            gen_params['sampler'] = inputs['sampler_name']
+                        if 'steps' in inputs:
+                            gen_params['steps'] = inputs['steps']
+                        if 'cfg' in inputs:
+                            gen_params['cfg_scale'] = inputs['cfg']
+                        if 'seed' in inputs:
+                            gen_params['seed'] = inputs['seed']
+            
+            # Determine base model from loras info
+            base_model = None
+            if loras:
+                # Use the most common base model from loras
+                base_models = [lora['baseModel'] for lora in loras if lora.get('baseModel')]
+                if base_models:
+                    from collections import Counter
+                    base_model_counts = Counter(base_models)
+                    base_model = base_model_counts.most_common(1)[0][0]
+            
+            return {
+                'base_model': base_model,
+                'loras': loras,
+                'checkpoint': checkpoint,
+                'gen_params': gen_params,
+                'from_comfy_metadata': True
+            }
+            
+        except Exception as e:
+            logger.error(f"Error parsing ComfyUI metadata: {e}", exc_info=True)
+            return {"error": str(e), "loras": []}
+
+
+class MetaFormatParser(RecipeMetadataParser):
+    """Parser for images with meta format metadata (Lora_N Model hash format)"""
+    
+    METADATA_MARKER = r'Lora_\d+ Model hash:'
+    
+    def is_metadata_matching(self, user_comment: str) -> bool:
+        """Check if the user comment matches the metadata format"""
+        return re.search(self.METADATA_MARKER, user_comment, re.IGNORECASE | re.DOTALL) is not None
+    
+    async def parse_metadata(self, user_comment: str, recipe_scanner=None, civitai_client=None) -> Dict[str, Any]:
+        """Parse metadata from images with meta format metadata"""
+        try:
+            # Extract prompt and negative prompt
+            parts = user_comment.split('Negative prompt:', 1)
+            prompt = parts[0].strip()
+            
+            # Initialize metadata
+            metadata = {"prompt": prompt, "loras": []}
+            
+            # Extract negative prompt and parameters if available
+            if len(parts) > 1:
+                negative_and_params = parts[1]
+                
+                # Extract negative prompt - everything until the first parameter (usually "Steps:")
+                param_start = re.search(r'([A-Za-z]+): ', negative_and_params)
+                if param_start:
+                    neg_prompt = negative_and_params[:param_start.start()].strip()
+                    metadata["negative_prompt"] = neg_prompt
+                    params_section = negative_and_params[param_start.start():]
+                else:
+                    params_section = negative_and_params
+                
+                # Extract key-value parameters (Steps, Sampler, Seed, etc.)
+                param_pattern = r'([A-Za-z_0-9 ]+): ([^,]+)'
+                params = re.findall(param_pattern, params_section)
+                for key, value in params:
+                    clean_key = key.strip().lower().replace(' ', '_')
+                    metadata[clean_key] = value.strip()
+            
+            # Extract LoRA information
+            # Pattern to match lora entries: Lora_0 Model name: ArtVador I.safetensors, Lora_0 Model hash: 08f7133a58, etc.
+            lora_pattern = r'Lora_(\d+) Model name: ([^,]+), Lora_\1 Model hash: ([^,]+), Lora_\1 Strength model: ([^,]+), Lora_\1 Strength clip: ([^,]+)'
+            lora_matches = re.findall(lora_pattern, user_comment)
+            
+            # If the regular pattern doesn't match, try a more flexible approach
+            if not lora_matches:
+                # First find all Lora indices
+                lora_indices = set(re.findall(r'Lora_(\d+)', user_comment))
+                
+                # For each index, extract the information
+                for idx in lora_indices:
+                    lora_info = {}
+                    
+                    # Extract model name
+                    name_match = re.search(f'Lora_{idx} Model name: ([^,]+)', user_comment)
+                    if name_match:
+                        lora_info['name'] = name_match.group(1).strip()
+                    
+                    # Extract model hash
+                    hash_match = re.search(f'Lora_{idx} Model hash: ([^,]+)', user_comment)
+                    if hash_match:
+                        lora_info['hash'] = hash_match.group(1).strip()
+                    
+                    # Extract strength model
+                    strength_model_match = re.search(f'Lora_{idx} Strength model: ([^,]+)', user_comment)
+                    if strength_model_match:
+                        lora_info['strength_model'] = float(strength_model_match.group(1).strip())
+                    
+                    # Extract strength clip
+                    strength_clip_match = re.search(f'Lora_{idx} Strength clip: ([^,]+)', user_comment)
+                    if strength_clip_match:
+                        lora_info['strength_clip'] = float(strength_clip_match.group(1).strip())
+                    
+                    # Only add if we have at least name and hash
+                    if 'name' in lora_info and 'hash' in lora_info:
+                        lora_matches.append((idx, lora_info['name'], lora_info['hash'], 
+                                            str(lora_info.get('strength_model', 1.0)), 
+                                            str(lora_info.get('strength_clip', 1.0))))
+            
+            # Process LoRAs
+            base_model_counts = {}
+            loras = []
+            
+            for match in lora_matches:
+                if len(match) == 5:  # Regular pattern match
+                    idx, name, hash_value, strength_model, strength_clip = match
+                else:  # Flexible approach match
+                    continue  # Should not happen now
+                
+                # Clean up the values
+                name = name.strip()
+                if name.endswith('.safetensors'):
+                    name = name[:-12]  # Remove .safetensors extension
+                    
+                hash_value = hash_value.strip()
+                weight = float(strength_model)  # Use model strength as weight
+                
+                # Initialize lora entry with default values
+                lora_entry = {
+                    'name': name,
+                    'type': 'lora',
+                    'weight': weight,
+                    'existsLocally': False,
+                    'localPath': None,
+                    'file_name': name,
+                    'hash': hash_value,
+                    'thumbnailUrl': '/loras_static/images/no-preview.png',
+                    'baseModel': '',
+                    'size': 0,
+                    'downloadUrl': '',
+                    'isDeleted': False
+                }
+                
+                # Get info from Civitai by hash if available
+                if civitai_client and hash_value:
+                    try:
+                        civitai_info = await civitai_client.get_model_by_hash(hash_value)
+                        # Populate lora entry with Civitai info
+                        lora_entry = await self.populate_lora_from_civitai(
+                            lora_entry, 
+                            civitai_info, 
+                            recipe_scanner,
+                            base_model_counts,
+                            hash_value
+                        )
+                    except Exception as e:
+                        logger.error(f"Error fetching Civitai info for LoRA hash {hash_value}: {e}")
+                
+                loras.append(lora_entry)
+            
+            # Extract model information
+            model = None
+            if 'model' in metadata:
+                model = metadata['model']
+            
+            # Set base_model to the most common one from civitai_info
+            base_model = None
+            if base_model_counts:
+                base_model = max(base_model_counts.items(), key=lambda x: x[1])[0]
+            
+            # Extract generation parameters for recipe metadata
+            gen_params = {}
+            for key in GEN_PARAM_KEYS:
+                if key in metadata:
+                    gen_params[key] = metadata.get(key, '')
+            
+            # Try to extract size information if available
+            if 'width' in metadata and 'height' in metadata:
+                gen_params['size'] = f"{metadata['width']}x{metadata['height']}"
+            
+            return {
+                'base_model': base_model,
+                'loras': loras,
+                'gen_params': gen_params,
+                'raw_metadata': metadata,
+                'from_meta_format': True
+            }
+            
+        except Exception as e:
+            logger.error(f"Error parsing meta format metadata: {e}", exc_info=True)
+            return {"error": str(e), "loras": []}
+
+
+class ImageSaverMetadataParser(RecipeMetadataParser):
+    """Parser for ComfyUI Image Saver plugin metadata format"""
+    
+    METADATA_MARKER = r'Hashes: \{"LORA:'
+    LORA_PATTERN = r'<lora:([^:]+):([^>]+)>'
+    HASH_PATTERN = r'Hashes: (\{.*?\})'
+    
+    def is_metadata_matching(self, user_comment: str) -> bool:
+        """Check if the user comment matches the Image Saver metadata format"""
+        return re.search(self.METADATA_MARKER, user_comment, re.IGNORECASE | re.DOTALL) is not None
+    
+    async def parse_metadata(self, user_comment: str, recipe_scanner=None, civitai_client=None) -> Dict[str, Any]:
+        """Parse metadata from Image Saver plugin format"""
+        try:
+            # Extract prompt and negative prompt
+            parts = user_comment.split('Negative prompt:', 1)
+            prompt = parts[0].strip()
+            
+            # Initialize metadata
+            metadata = {"prompt": prompt, "loras": []}
+            
+            # Extract negative prompt and parameters
+            if len(parts) > 1:
+                negative_and_params = parts[1]
+                
+                # Extract negative prompt
+                if "Steps:" in negative_and_params:
+                    neg_prompt = negative_and_params.split("Steps:", 1)[0].strip()
+                    metadata["negative_prompt"] = neg_prompt
+                
+                # Extract key-value parameters (Steps, Sampler, CFG scale, etc.)
+                param_pattern = r'([A-Za-z ]+): ([^,]+)'
+                params = re.findall(param_pattern, negative_and_params)
+                for key, value in params:
+                    clean_key = key.strip().lower().replace(' ', '_')
+                    metadata[clean_key] = value.strip()
+            
+            # Extract LoRA information from prompt
+            lora_weights = {}
+            lora_matches = re.findall(self.LORA_PATTERN, prompt)
+            for lora_name, weight in lora_matches:
+                lora_weights[lora_name.strip()] = float(weight.split(':')[0].strip())
+            
+            # Remove LoRA patterns from prompt
+            metadata["prompt"] = re.sub(self.LORA_PATTERN, '', prompt).strip()
+            
+            # Extract LoRA hashes from Hashes section
+            lora_hashes = {}
+            hash_match = re.search(self.HASH_PATTERN, user_comment)
+            if hash_match:
+                try:
+                    hashes = json.loads(hash_match.group(1))
+                    for key, hash_value in hashes.items():
+                        if key.startswith('LORA:'):
+                            lora_name = key[5:]  # Remove 'LORA:' prefix
+                            lora_hashes[lora_name] = hash_value.strip()
+                except json.JSONDecodeError:
+                    pass
+            
+            # Process LoRAs and collect base models
+            base_model_counts = {}
+            loras = []
+            
+            # Process each LoRA with hash and weight
+            for lora_name, hash_value in lora_hashes.items():
+                weight = lora_weights.get(lora_name, 1.0)
+                
+                # Initialize lora entry with default values
+                lora_entry = {
+                    'name': lora_name,
+                    'type': 'lora',
+                    'weight': weight,
+                    'existsLocally': False,
+                    'localPath': None,
+                    'file_name': lora_name,
+                    'hash': hash_value,
+                    'thumbnailUrl': '/loras_static/images/no-preview.png',
+                    'baseModel': '',
+                    'size': 0,
+                    'downloadUrl': '',
+                    'isDeleted': False
+                }
+                
+                # Get info from Civitai by hash if available
+                if civitai_client and hash_value:
+                    try:
+                        civitai_info = await civitai_client.get_model_by_hash(hash_value)
+                        # Populate lora entry with Civitai info
+                        lora_entry = await self.populate_lora_from_civitai(
+                            lora_entry, 
+                            civitai_info, 
+                            recipe_scanner,
+                            base_model_counts,
+                            hash_value
+                        )
+                    except Exception as e:
+                        logger.error(f"Error fetching Civitai info for LoRA hash {hash_value}: {e}")
+                
+                loras.append(lora_entry)
+
+            # Set base_model to the most common one from civitai_info
+            base_model = None
+            if base_model_counts:
+                base_model = max(base_model_counts.items(), key=lambda x: x[1])[0]
+            
+            # Extract generation parameters for recipe metadata
+            gen_params = {}
+            for key in GEN_PARAM_KEYS:
+                if key in metadata:
+                    gen_params[key] = metadata.get(key, '')
+            
+            # Add model information if available
+            if 'model' in metadata:
+                gen_params['checkpoint'] = metadata['model']
+            
+            return {
+                'base_model': base_model,
+                'loras': loras,
+                'gen_params': gen_params,
+                'raw_metadata': metadata
+            }
+            
+        except Exception as e:
+            logger.error(f"Error parsing Image Saver metadata: {e}", exc_info=True)
+            return {"error": str(e), "loras": []}
+
+
 class RecipeParserFactory:
     """Factory for creating recipe metadata parsers"""
     
@@ -537,11 +1061,23 @@ class RecipeParserFactory:
         Returns:
             Appropriate RecipeMetadataParser implementation
         """
+        # Try ComfyMetadataParser first since it requires valid JSON
+        try:
+            if ComfyMetadataParser().is_metadata_matching(user_comment):
+                return ComfyMetadataParser()
+        except Exception:
+            # If JSON parsing fails, move on to other parsers
+            pass
+            
         if RecipeFormatParser().is_metadata_matching(user_comment):
             return RecipeFormatParser()
         elif StandardMetadataParser().is_metadata_matching(user_comment):
             return StandardMetadataParser()
         elif A1111MetadataParser().is_metadata_matching(user_comment):
             return A1111MetadataParser()
+        elif MetaFormatParser().is_metadata_matching(user_comment):
+            return MetaFormatParser()
+        elif ImageSaverMetadataParser().is_metadata_matching(user_comment):
+            return ImageSaverMetadataParser()
         else:
-            return None
+            return None

py/utils/utils.py

@@ -40,7 +40,45 @@ def download_twitter_image(url):
     except Exception as e:
         print(f"Error downloading twitter image: {e}")
         return None
+
+def download_civitai_image(url):
+    """Download image from a URL containing avatar image with specific class and style attributes
     
+    Args:
+        url (str): The URL to download image from
+        
+    Returns:
+        str: Path to downloaded temporary image file
+    """
+    try:
+        # Download page content
+        response = requests.get(url)
+        response.raise_for_status()
+        
+        # Parse HTML
+        soup = BeautifulSoup(response.text, 'html.parser')
+        
+        # Find image with specific class and style attributes
+        image = soup.select_one('img.EdgeImage_image__iH4_q.max-h-full.w-auto.max-w-full')
+        
+        if not image or 'src' not in image.attrs:
+            return None
+            
+        image_url = image['src']
+        
+        # Download image
+        image_response = requests.get(image_url)
+        image_response.raise_for_status()
+        
+        # Save to temp file
+        with tempfile.NamedTemporaryFile(delete=False, suffix='.jpg') as temp_file:
+            temp_file.write(image_response.content)
+            return temp_file.name
+            
+    except Exception as e:
+        print(f"Error downloading civitai avatar: {e}")
+        return None
+
 def fuzzy_match(text: str, pattern: str, threshold: float = 0.7) -> bool:
         """
         Check if text matches pattern using fuzzy matching.

py/workflow/README.md

@@ -1,149 +0,0 @@
-# ComfyUI Workflow Parser
-
-本模块提供了一个灵活的解析系统，可以从ComfyUI工作流中提取生成参数和LoRA信息。
-
-## 设计理念
-
-工作流解析器基于以下设计原则：
-
-1. **模块化**: 每种节点类型由独立的mapper处理
-2. **可扩展性**: 通过扩展系统轻松添加新的节点类型支持
-3. **回溯**: 通过工作流图的模型输入路径跟踪LoRA节点
-4. **灵活性**: 适应不同的ComfyUI工作流结构
-
-## 主要组件
-
-### 1. NodeMapper
-
-`NodeMapper`是所有节点映射器的基类，定义了如何从工作流中提取节点信息:
-
-```python
-class NodeMapper:
-    def __init__(self, node_type: str, inputs_to_track: List[str]):
-        self.node_type = node_type
-        self.inputs_to_track = inputs_to_track
-    
-    def process(self, node_id: str, node_data: Dict, workflow: Dict, parser) -> Any:
-        # 处理节点的通用逻辑
-        ...
-    
-    def transform(self, inputs: Dict) -> Any:
-        # 由子类覆盖以提供特定转换
-        return inputs
-```
-
-### 2. WorkflowParser
-
-主要解析类，通过跟踪工作流图来提取参数:
-
-```python
-parser = WorkflowParser()
-result = parser.parse_workflow("workflow.json")
-```
-
-### 3. 扩展系统
-
-允许通过添加新的自定义mapper来扩展支持的节点类型:
-
-```python
-# 在py/workflow/ext/中添加自定义mapper模块
-load_extensions()  # 自动加载所有扩展
-```
-
-## 使用方法
-
-### 基本用法
-
-```python
-from workflow.parser import parse_workflow
-
-# 解析工作流并保存结果
-result = parse_workflow("workflow.json", "output.json")
-```
-
-### 自定义解析
-
-```python
-from workflow.parser import WorkflowParser
-from workflow.mappers import register_mapper, load_extensions
-
-# 加载扩展
-load_extensions()
-
-# 创建解析器
-parser = WorkflowParser(load_extensions_on_init=False)  # 不自动加载扩展
-
-# 解析工作流
-result = parser.parse_workflow(workflow_data)
-```
-
-## 扩展系统
-
-### 添加新的节点映射器
-
-在`py/workflow/ext/`目录中创建Python文件，定义从`NodeMapper`继承的类:
-
-```python
-# example_mapper.py
-from ..mappers import NodeMapper
-
-class MyCustomNodeMapper(NodeMapper):
-    def __init__(self):
-        super().__init__(
-            node_type="MyCustomNode",  # 节点的class_type
-            inputs_to_track=["param1", "param2"]  # 要提取的参数
-        )
-    
-    def transform(self, inputs: Dict) -> Any:
-        # 处理提取的参数
-        return {
-            "custom_param": inputs.get("param1", "default")
-        }
-```
-
-扩展系统会自动加载和注册这些映射器。
-
-### LoraManager节点说明
-
-LoraManager相关节点的处理方式:
-
-1. **Lora Loader**: 处理`loras`数组，过滤出`active=true`的条目，和`lora_stack`输入
-2. **Lora Stacker**: 处理`loras`数组和已有的`lora_stack`，构建叠加的LoRA
-3. **TriggerWord Toggle**: 从`toggle_trigger_words`中提取`active=true`的条目
-
-## 输出格式
-
-解析器生成的输出格式如下:
-
-```json
-{
-    "gen_params": {
-        "prompt": "...",
-        "negative_prompt": "",
-        "steps": "25",
-        "sampler": "dpmpp_2m",
-        "scheduler": "beta",
-        "cfg": "1",
-        "seed": "48",
-        "guidance": 3.5,
-        "size": "896x1152",
-        "clip_skip": "2"
-    },
-    "loras": "<lora:name1:0.9> <lora:name2:0.8>"
-}
-```
-
-## 高级用法
-
-### 直接注册映射器
-
-```python
-from workflow.mappers import register_mapper
-from workflow.mappers import NodeMapper
-
-# 创建自定义映射器
-class CustomMapper(NodeMapper):
-    # ...实现映射器
-
-# 注册映射器
-register_mapper(CustomMapper()) 

py/workflow/ext/comfyui_core.py

@@ -0,0 +1,285 @@
+"""
+ComfyUI Core nodes mappers extension for workflow parsing
+"""
+import logging
+from typing import Dict, Any, List
+
+logger = logging.getLogger(__name__)
+
+# =============================================================================
+# Transform Functions
+# =============================================================================
+
+def transform_random_noise(inputs: Dict) -> Dict:
+    """Transform function for RandomNoise node"""
+    return {"seed": str(inputs.get("noise_seed", ""))}
+
+def transform_ksampler_select(inputs: Dict) -> Dict:
+    """Transform function for KSamplerSelect node"""
+    return {"sampler": inputs.get("sampler_name", "")}
+
+def transform_basic_scheduler(inputs: Dict) -> Dict:
+    """Transform function for BasicScheduler node"""
+    result = {
+        "scheduler": inputs.get("scheduler", ""),
+        "denoise": str(inputs.get("denoise", "1.0"))
+    }
+    
+    # Get steps from inputs or steps input
+    if "steps" in inputs:
+        if isinstance(inputs["steps"], str):
+            result["steps"] = inputs["steps"]
+        elif isinstance(inputs["steps"], dict) and "value" in inputs["steps"]:
+            result["steps"] = str(inputs["steps"]["value"])
+        else:
+            result["steps"] = str(inputs["steps"])
+    
+    return result
+
+def transform_basic_guider(inputs: Dict) -> Dict:
+    """Transform function for BasicGuider node"""
+    result = {}
+    
+    # Process conditioning
+    if "conditioning" in inputs:
+        if isinstance(inputs["conditioning"], str):
+            result["prompt"] = inputs["conditioning"]
+        elif isinstance(inputs["conditioning"], dict):
+            result["conditioning"] = inputs["conditioning"]
+    
+    # Get model information if needed
+    if "model" in inputs and isinstance(inputs["model"], dict):
+        result["model"] = inputs["model"]
+    
+    return result
+
+def transform_model_sampling_flux(inputs: Dict) -> Dict:
+    """Transform function for ModelSamplingFlux - mostly a pass-through node"""
+    # This node is primarily used for routing, so we mostly pass through values
+    
+    return inputs["model"]
+
+def transform_sampler_custom_advanced(inputs: Dict) -> Dict:
+    """Transform function for SamplerCustomAdvanced node"""
+    result = {}
+    
+    # Extract seed from noise
+    if "noise" in inputs and isinstance(inputs["noise"], dict):
+        result["seed"] = str(inputs["noise"].get("seed", ""))
+    
+    # Extract sampler info
+    if "sampler" in inputs and isinstance(inputs["sampler"], dict):
+        sampler = inputs["sampler"].get("sampler", "")
+        if sampler:
+            result["sampler"] = sampler
+    
+    # Extract scheduler, steps, denoise from sigmas
+    if "sigmas" in inputs and isinstance(inputs["sigmas"], dict):
+        sigmas = inputs["sigmas"]
+        result["scheduler"] = sigmas.get("scheduler", "")
+        result["steps"] = str(sigmas.get("steps", ""))
+        result["denoise"] = str(sigmas.get("denoise", "1.0"))
+    
+    # Extract prompt and guidance from guider
+    if "guider" in inputs and isinstance(inputs["guider"], dict):
+        guider = inputs["guider"]
+        
+        # Get prompt from conditioning
+        if "conditioning" in guider and isinstance(guider["conditioning"], str):
+            result["prompt"] = guider["conditioning"]
+        elif "conditioning" in guider and isinstance(guider["conditioning"], dict):
+            result["guidance"] = guider["conditioning"].get("guidance", "")
+            result["prompt"] = guider["conditioning"].get("prompt", "")
+
+        if "model" in guider and isinstance(guider["model"], dict):
+            result["checkpoint"] = guider["model"].get("checkpoint", "")
+            result["loras"] = guider["model"].get("loras", "")
+            result["clip_skip"] = str(int(guider["model"].get("clip_skip", "-1")) * -1)
+    
+    # Extract dimensions from latent_image
+    if "latent_image" in inputs and isinstance(inputs["latent_image"], dict):
+        latent = inputs["latent_image"]
+        width = latent.get("width", 0)
+        height = latent.get("height", 0)
+        if width and height:
+            result["width"] = width
+            result["height"] = height
+            result["size"] = f"{width}x{height}"
+    
+    return result
+
+def transform_ksampler(inputs: Dict) -> Dict:
+    """Transform function for KSampler nodes"""
+    result = {
+        "seed": str(inputs.get("seed", "")),
+        "steps": str(inputs.get("steps", "")),
+        "cfg": str(inputs.get("cfg", "")),
+        "sampler": inputs.get("sampler_name", ""),
+        "scheduler": inputs.get("scheduler", ""),
+    }
+    
+    # Process positive prompt
+    if "positive" in inputs:
+        result["prompt"] = inputs["positive"]
+    
+    # Process negative prompt
+    if "negative" in inputs:
+        result["negative_prompt"] = inputs["negative"]
+    
+    # Get dimensions from latent image
+    if "latent_image" in inputs and isinstance(inputs["latent_image"], dict):
+        width = inputs["latent_image"].get("width", 0)
+        height = inputs["latent_image"].get("height", 0)
+        if width and height:
+            result["size"] = f"{width}x{height}"
+    
+    # Add clip_skip if present
+    if "clip_skip" in inputs:
+        result["clip_skip"] = str(inputs.get("clip_skip", ""))
+
+    # Add guidance if present
+    if "guidance" in inputs:
+        result["guidance"] = str(inputs.get("guidance", ""))
+
+    # Add model if present
+    if "model" in inputs:
+        result["checkpoint"] = inputs.get("model", {}).get("checkpoint", "")
+        result["loras"] = inputs.get("model", {}).get("loras", "")
+        result["clip_skip"] = str(inputs.get("model", {}).get("clip_skip", -1) * -1)
+        
+    return result
+
+def transform_empty_latent(inputs: Dict) -> Dict:
+    """Transform function for EmptyLatentImage nodes"""
+    width = inputs.get("width", 0)
+    height = inputs.get("height", 0)
+    return {"width": width, "height": height, "size": f"{width}x{height}"}
+
+def transform_clip_text(inputs: Dict) -> Any:
+    """Transform function for CLIPTextEncode nodes"""
+    return inputs.get("text", "")
+
+def transform_flux_guidance(inputs: Dict) -> Dict:
+    """Transform function for FluxGuidance nodes"""
+    result = {}
+    
+    if "guidance" in inputs:
+        result["guidance"] = inputs["guidance"]
+    
+    if "conditioning" in inputs:
+        conditioning = inputs["conditioning"]
+        if isinstance(conditioning, str):
+            result["prompt"] = conditioning
+        else:
+            result["prompt"] = "Unknown prompt"
+    
+    return result
+
+def transform_unet_loader(inputs: Dict) -> Dict:
+    """Transform function for UNETLoader node"""
+    unet_name = inputs.get("unet_name", "")
+    return {"checkpoint": unet_name} if unet_name else {}
+
+def transform_checkpoint_loader(inputs: Dict) -> Dict:
+    """Transform function for CheckpointLoaderSimple node"""
+    ckpt_name = inputs.get("ckpt_name", "")
+    return {"checkpoint": ckpt_name} if ckpt_name else {}
+
+def transform_latent_upscale_by(inputs: Dict) -> Dict:
+    """Transform function for LatentUpscaleBy node"""
+    result = {}
+    
+    width = inputs["samples"].get("width", 0) * inputs["scale_by"]
+    height = inputs["samples"].get("height", 0) * inputs["scale_by"]
+    result["width"] = width
+    result["height"] = height
+    result["size"] = f"{width}x{height}"
+    
+    return result
+
+def transform_clip_set_last_layer(inputs: Dict) -> Dict:
+    """Transform function for CLIPSetLastLayer node"""
+    result = {}
+    
+    if "stop_at_clip_layer" in inputs:
+        result["clip_skip"] = inputs["stop_at_clip_layer"]
+    
+    return result
+
+# =============================================================================
+# Node Mapper Definitions
+# =============================================================================
+
+# Define the mappers for ComfyUI core nodes not in main mapper
+NODE_MAPPERS_EXT = {
+    # KSamplers
+    "SamplerCustomAdvanced": {
+        "inputs_to_track": ["noise", "guider", "sampler", "sigmas", "latent_image"],
+        "transform_func": transform_sampler_custom_advanced
+    },
+    "KSampler": {
+        "inputs_to_track": [
+            "seed", "steps", "cfg", "sampler_name", "scheduler", 
+            "denoise", "positive", "negative", "latent_image",
+            "model", "clip_skip"
+        ],
+        "transform_func": transform_ksampler
+    },
+    # ComfyUI core nodes
+    "EmptyLatentImage": {
+        "inputs_to_track": ["width", "height", "batch_size"],
+        "transform_func": transform_empty_latent
+    },
+    "EmptySD3LatentImage": {
+        "inputs_to_track": ["width", "height", "batch_size"],
+        "transform_func": transform_empty_latent
+    },
+    "CLIPTextEncode": {
+        "inputs_to_track": ["text", "clip"],
+        "transform_func": transform_clip_text
+    },
+    "FluxGuidance": {
+        "inputs_to_track": ["guidance", "conditioning"],
+        "transform_func": transform_flux_guidance
+    },
+    "RandomNoise": {
+        "inputs_to_track": ["noise_seed"],
+        "transform_func": transform_random_noise
+    },
+    "KSamplerSelect": {
+        "inputs_to_track": ["sampler_name"],
+        "transform_func": transform_ksampler_select
+    },
+    "BasicScheduler": {
+        "inputs_to_track": ["scheduler", "steps", "denoise", "model"],
+        "transform_func": transform_basic_scheduler
+    },
+    "BasicGuider": {
+        "inputs_to_track": ["model", "conditioning"],
+        "transform_func": transform_basic_guider
+    },
+    "ModelSamplingFlux": {
+        "inputs_to_track": ["max_shift", "base_shift", "width", "height", "model"],
+        "transform_func": transform_model_sampling_flux
+    },
+    "UNETLoader": {
+        "inputs_to_track": ["unet_name"],
+        "transform_func": transform_unet_loader
+    },
+    "CheckpointLoaderSimple": {
+        "inputs_to_track": ["ckpt_name"],
+        "transform_func": transform_checkpoint_loader
+    },
+    "LatentUpscale": {
+        "inputs_to_track": ["width", "height"],
+        "transform_func": transform_empty_latent
+    },
+    "LatentUpscaleBy": {
+        "inputs_to_track": ["samples", "scale_by"],
+        "transform_func": transform_latent_upscale_by
+    },
+    "CLIPSetLastLayer": {
+        "inputs_to_track": ["clip", "stop_at_clip_layer"],
+        "transform_func": transform_clip_set_last_layer
+    }
+} 

py/workflow/ext/example_mapper.py

@@ -1,54 +0,0 @@
-"""
-Example extension mapper for demonstrating the extension system
-"""
-from typing import Dict, Any
-from ..mappers import NodeMapper
-
-class ExampleNodeMapper(NodeMapper):
-    """Example mapper for custom nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="ExampleCustomNode",
-            inputs_to_track=["param1", "param2", "image"]
-        )
-    
-    def transform(self, inputs: Dict) -> Dict:
-        """Transform extracted inputs into the desired output format"""
-        result = {}
-        
-        # Extract interesting parameters
-        if "param1" in inputs:
-            result["example_param1"] = inputs["param1"]
-        
-        if "param2" in inputs:
-            result["example_param2"] = inputs["param2"]
-        
-        # You can process the data in any way needed
-        return result
-
-
-class VAEMapperExtension(NodeMapper):
-    """Extension mapper for VAE nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="VAELoader",
-            inputs_to_track=["vae_name"]
-        )
-    
-    def transform(self, inputs: Dict) -> Dict:
-        """Extract VAE information"""
-        vae_name = inputs.get("vae_name", "")
-        
-        # Remove path prefix if present
-        if "/" in vae_name or "\\" in vae_name:
-            # Get just the filename without path or extension
-            vae_name = vae_name.replace("\\", "/").split("/")[-1]
-            vae_name = vae_name.split(".")[0]  # Remove extension
-            
-        return {"vae": vae_name}
-
-
-# Note: No need to register manually - extensions are automatically registered
-# when the extension system loads this file 

py/workflow/ext/kjnodes.py

@@ -0,0 +1,74 @@
+"""
+KJNodes mappers extension for ComfyUI workflow parsing
+"""
+import logging
+import re
+from typing import Dict, Any
+
+logger = logging.getLogger(__name__)
+
+# =============================================================================
+# Transform Functions
+# =============================================================================
+
+def transform_join_strings(inputs: Dict) -> str:
+    """Transform function for JoinStrings nodes"""
+    string1 = inputs.get("string1", "")
+    string2 = inputs.get("string2", "")
+    delimiter = inputs.get("delimiter", "")
+    return f"{string1}{delimiter}{string2}"
+
+def transform_string_constant(inputs: Dict) -> str:
+    """Transform function for StringConstant nodes"""
+    return inputs.get("string", "")
+
+def transform_empty_latent_presets(inputs: Dict) -> Dict:
+    """Transform function for EmptyLatentImagePresets nodes"""
+    dimensions = inputs.get("dimensions", "")
+    invert = inputs.get("invert", False)
+    
+    # Extract width and height from dimensions string
+    # Expected format: "width x height (ratio)" or similar
+    width = 0
+    height = 0
+    
+    if dimensions:
+        # Try to extract dimensions using regex
+        match = re.search(r'(\d+)\s*x\s*(\d+)', dimensions)
+        if match:
+            width = int(match.group(1))
+            height = int(match.group(2))
+    
+    # If invert is True, swap width and height
+    if invert and width and height:
+        width, height = height, width
+    
+    return {"width": width, "height": height, "size": f"{width}x{height}"}
+
+def transform_int_constant(inputs: Dict) -> int:
+    """Transform function for INTConstant nodes"""
+    return inputs.get("value", 0)
+
+# =============================================================================
+# Node Mapper Definitions
+# =============================================================================
+
+# Define the mappers for KJNodes
+NODE_MAPPERS_EXT = {
+    "JoinStrings": {
+        "inputs_to_track": ["string1", "string2", "delimiter"],
+        "transform_func": transform_join_strings
+    },
+    "StringConstantMultiline": {
+        "inputs_to_track": ["string"],
+        "transform_func": transform_string_constant
+    },
+    "EmptyLatentImagePresets": {
+        "inputs_to_track": ["dimensions", "invert", "batch_size"],
+        "transform_func": transform_empty_latent_presets
+    },
+    "INTConstant": {
+        "inputs_to_track": ["value"],
+        "transform_func": transform_int_constant
+    }
+} 

py/workflow/mappers.py

@@ -5,375 +5,229 @@ import logging
 import os
 import importlib.util
 import inspect
-from typing import Dict, List, Any, Optional, Union, Type, Callable
+from typing import Dict, List, Any, Optional, Union, Type, Callable, Tuple
 
 logger = logging.getLogger(__name__)
 
 # Global mapper registry
-_MAPPER_REGISTRY: Dict[str, 'NodeMapper'] = {}
-
-class NodeMapper:
-    """Base class for node mappers that define how to extract information from a specific node type"""
-    
-    def __init__(self, node_type: str, inputs_to_track: List[str]):
-        self.node_type = node_type
-        self.inputs_to_track = inputs_to_track
-    
-    def process(self, node_id: str, node_data: Dict, workflow: Dict, parser: 'WorkflowParser') -> Any: # type: ignore
-        """Process the node and extract relevant information"""
-        result = {}
-        for input_name in self.inputs_to_track:
-            if input_name in node_data.get("inputs", {}):
-                input_value = node_data["inputs"][input_name]
-                # Check if input is a reference to another node's output
-                if isinstance(input_value, list) and len(input_value) == 2:
-                    # Format is [node_id, output_slot]
-                    try:
-                        ref_node_id, output_slot = input_value
-                        # Convert node_id to string if it's an integer
-                        if isinstance(ref_node_id, int):
-                            ref_node_id = str(ref_node_id)
-                        
-                        # Recursively process the referenced node
-                        ref_value = parser.process_node(ref_node_id, workflow)
-                        
-                        # Store the processed value
-                        if ref_value is not None:
-                            result[input_name] = ref_value
-                        else:
-                            # If we couldn't get a value from the reference, store the raw value
-                            result[input_name] = input_value
-                    except Exception as e:
-                        logger.error(f"Error processing reference in node {node_id}, input {input_name}: {e}")
-                        # If we couldn't process the reference, store the raw value
-                        result[input_name] = input_value
-                else:
-                    # Direct value
-                    result[input_name] = input_value
-        
-        # Apply any transformations
-        return self.transform(result)
-    
-    def transform(self, inputs: Dict) -> Any:
-        """Transform the extracted inputs - override in subclasses"""
-        return inputs
-
-
-class KSamplerMapper(NodeMapper):
-    """Mapper for KSampler nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="KSampler",
-            inputs_to_track=["seed", "steps", "cfg", "sampler_name", "scheduler", 
-                             "denoise", "positive", "negative", "latent_image",
-                             "model", "clip_skip"]
-        )
-    
-    def transform(self, inputs: Dict) -> Dict:
-        result = {
-            "seed": str(inputs.get("seed", "")),
-            "steps": str(inputs.get("steps", "")),
-            "cfg": str(inputs.get("cfg", "")),
-            "sampler": inputs.get("sampler_name", ""),
-            "scheduler": inputs.get("scheduler", ""),
-        }
-        
-        # Process positive prompt
-        if "positive" in inputs:
-            result["prompt"] = inputs["positive"]
-        
-        # Process negative prompt
-        if "negative" in inputs:
-            result["negative_prompt"] = inputs["negative"]
-        
-        # Get dimensions from latent image
-        if "latent_image" in inputs and isinstance(inputs["latent_image"], dict):
-            width = inputs["latent_image"].get("width", 0)
-            height = inputs["latent_image"].get("height", 0)
-            if width and height:
-                result["size"] = f"{width}x{height}"
-        
-        # Add clip_skip if present
-        if "clip_skip" in inputs:
-            result["clip_skip"] = str(inputs.get("clip_skip", ""))
-            
-        return result
-
-
-class EmptyLatentImageMapper(NodeMapper):
-    """Mapper for EmptyLatentImage nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="EmptyLatentImage",
-            inputs_to_track=["width", "height", "batch_size"]
-        )
-    
-    def transform(self, inputs: Dict) -> Dict:
-        width = inputs.get("width", 0)
-        height = inputs.get("height", 0)
-        return {"width": width, "height": height, "size": f"{width}x{height}"}
-
-
-class EmptySD3LatentImageMapper(NodeMapper):
-    """Mapper for EmptySD3LatentImage nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="EmptySD3LatentImage",
-            inputs_to_track=["width", "height", "batch_size"]
-        )
-    
-    def transform(self, inputs: Dict) -> Dict:
-        width = inputs.get("width", 0)
-        height = inputs.get("height", 0)
-        return {"width": width, "height": height, "size": f"{width}x{height}"}
-
-
-class CLIPTextEncodeMapper(NodeMapper):
-    """Mapper for CLIPTextEncode nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="CLIPTextEncode",
-            inputs_to_track=["text", "clip"]
-        )
-    
-    def transform(self, inputs: Dict) -> Any:
-        # Simply return the text
-        return inputs.get("text", "")
-
-
-class LoraLoaderMapper(NodeMapper):
-    """Mapper for LoraLoader nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="Lora Loader (LoraManager)",
-            inputs_to_track=["loras", "lora_stack"]
-        )
-    
-    def transform(self, inputs: Dict) -> Dict:
-        # Fallback to loras array if text field doesn't exist or is invalid
-        loras_data = inputs.get("loras", [])
-        lora_stack = inputs.get("lora_stack", {}).get("lora_stack", [])
-        
-        # Process loras array - filter active entries
-        lora_texts = []
-        
-        # Check if loras_data is a list or a dict with __value__ key (new format)
-        if isinstance(loras_data, dict) and "__value__" in loras_data:
-            loras_list = loras_data["__value__"]
-        elif isinstance(loras_data, list):
-            loras_list = loras_data
-        else:
-            loras_list = []
-            
-        # Process each active lora entry
-        for lora in loras_list:
-            logger.info(f"Lora: {lora}, active: {lora.get('active')}")
-            if isinstance(lora, dict) and lora.get("active", False):
-                lora_name = lora.get("name", "")
-                strength = lora.get("strength", 1.0)
-                lora_texts.append(f"<lora:{lora_name}:{strength}>")
-        
-        # Process lora_stack if it exists and is a valid format (list of tuples)
-        if lora_stack and isinstance(lora_stack, list):
-            # If lora_stack is a reference to another node ([node_id, output_slot]),
-            # we don't process it here as it's already been processed recursively
-            if len(lora_stack) == 2 and isinstance(lora_stack[0], (str, int)) and isinstance(lora_stack[1], int):
-                # This is a reference to another node, already processed
-                pass
-            else:
-                # Format each entry from the stack (assuming it's a list of tuples)
-                for stack_entry in lora_stack:
-                    lora_name = stack_entry[0]
-                    strength = stack_entry[1]
-                    lora_texts.append(f"<lora:{lora_name}:{strength}>")
-        
-        # Join with spaces
-        combined_text = " ".join(lora_texts)
-            
-        return {"loras": combined_text}
-
-
-class LoraStackerMapper(NodeMapper):
-    """Mapper for LoraStacker nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="Lora Stacker (LoraManager)",
-            inputs_to_track=["loras", "lora_stack"]
-        )
-    
-    def transform(self, inputs: Dict) -> Dict:
-        loras_data = inputs.get("loras", [])
-        result_stack = []
-        
-        # Handle existing stack entries
-        existing_stack = []
-        lora_stack_input = inputs.get("lora_stack", [])
-        
-        # Handle different formats of lora_stack
-        if isinstance(lora_stack_input, dict) and "lora_stack" in lora_stack_input:
-            # Format from another LoraStacker node
-            existing_stack = lora_stack_input["lora_stack"]
-        elif isinstance(lora_stack_input, list):
-            # Direct list format or reference format [node_id, output_slot]
-            if len(lora_stack_input) == 2 and isinstance(lora_stack_input[0], (str, int)) and isinstance(lora_stack_input[1], int):
-                # This is likely a reference that was already processed
-                pass
-            else:
-                # Regular list of tuples/entries
-                existing_stack = lora_stack_input
-        
-        # Add existing entries first
-        if existing_stack:
-            result_stack.extend(existing_stack)
-        
-        # Process loras array - filter active entries
-        # Check if loras_data is a list or a dict with __value__ key (new format)
-        if isinstance(loras_data, dict) and "__value__" in loras_data:
-            loras_list = loras_data["__value__"]
-        elif isinstance(loras_data, list):
-            loras_list = loras_data
-        else:
-            loras_list = []
-            
-        # Process each active lora entry
-        for lora in loras_list:
-            if isinstance(lora, dict) and lora.get("active", False):
-                lora_name = lora.get("name", "")
-                strength = float(lora.get("strength", 1.0))
-                result_stack.append((lora_name, strength))
-        
-        return {"lora_stack": result_stack}
-
-
-class JoinStringsMapper(NodeMapper):
-    """Mapper for JoinStrings nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="JoinStrings",
-            inputs_to_track=["string1", "string2", "delimiter"]
-        )
-    
-    def transform(self, inputs: Dict) -> str:
-        string1 = inputs.get("string1", "")
-        string2 = inputs.get("string2", "")
-        delimiter = inputs.get("delimiter", "")
-        return f"{string1}{delimiter}{string2}"
-
-
-class StringConstantMapper(NodeMapper):
-    """Mapper for StringConstant and StringConstantMultiline nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="StringConstantMultiline",
-            inputs_to_track=["string"]
-        )
-    
-    def transform(self, inputs: Dict) -> str:
-        return inputs.get("string", "")
-
-
-class TriggerWordToggleMapper(NodeMapper):
-    """Mapper for TriggerWordToggle nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="TriggerWord Toggle (LoraManager)",
-            inputs_to_track=["toggle_trigger_words"]
-        )
-    
-    def transform(self, inputs: Dict) -> str:
-        toggle_data = inputs.get("toggle_trigger_words", [])
-
-        # check if toggle_words is a list or a dict with __value__ key (new format)
-        if isinstance(toggle_data, dict) and "__value__" in toggle_data:
-            toggle_words = toggle_data["__value__"]
-        elif isinstance(toggle_data, list):
-            toggle_words = toggle_data
-        else:
-            toggle_words = []
-        
-        # Filter active trigger words
-        active_words = []
-        for item in toggle_words:
-            if isinstance(item, dict) and item.get("active", False):
-                word = item.get("text", "")
-                if word and not word.startswith("__dummy"):
-                    active_words.append(word)
-        
-        # Join with commas
-        result = ", ".join(active_words)
-        return result
-
-
-class FluxGuidanceMapper(NodeMapper):
-    """Mapper for FluxGuidance nodes"""
-    
-    def __init__(self):
-        super().__init__(
-            node_type="FluxGuidance",
-            inputs_to_track=["guidance", "conditioning"]
-        )
-    
-    def transform(self, inputs: Dict) -> Dict:
-        result = {}
-        
-        # Handle guidance parameter
-        if "guidance" in inputs:
-            result["guidance"] = inputs["guidance"]
-        
-        # Handle conditioning (the prompt text)
-        if "conditioning" in inputs:
-            conditioning = inputs["conditioning"]
-            if isinstance(conditioning, str):
-                result["prompt"] = conditioning
-            else:
-                result["prompt"] = "Unknown prompt"
-        
-        return result
-
+_MAPPER_REGISTRY: Dict[str, Dict] = {}
 
 # =============================================================================
-# Mapper Registry Functions
+# Mapper Definition Functions
 # =============================================================================
 
-def register_mapper(mapper: NodeMapper) -> None:
+def create_mapper(
+    node_type: str,
+    inputs_to_track: List[str],
+    transform_func: Callable[[Dict], Any] = None
+) -> Dict:
+    """Create a mapper definition for a node type"""
+    mapper = {
+        "node_type": node_type,
+        "inputs_to_track": inputs_to_track,
+        "transform": transform_func or (lambda inputs: inputs)
+    }
+    return mapper
+
+def register_mapper(mapper: Dict) -> None:
     """Register a node mapper in the global registry"""
-    _MAPPER_REGISTRY[mapper.node_type] = mapper
-    logger.debug(f"Registered mapper for node type: {mapper.node_type}")
+    _MAPPER_REGISTRY[mapper["node_type"]] = mapper
+    logger.debug(f"Registered mapper for node type: {mapper['node_type']}")
 
-def get_mapper(node_type: str) -> Optional[NodeMapper]:
+def get_mapper(node_type: str) -> Optional[Dict]:
     """Get a mapper for the specified node type"""
     return _MAPPER_REGISTRY.get(node_type)
 
-def get_all_mappers() -> Dict[str, NodeMapper]:
+def get_all_mappers() -> Dict[str, Dict]:
     """Get all registered mappers"""
     return _MAPPER_REGISTRY.copy()
 
-def register_default_mappers() -> None:
-    """Register all default mappers"""
-    default_mappers = [
-        KSamplerMapper(),
-        EmptyLatentImageMapper(),
-        EmptySD3LatentImageMapper(),
-        CLIPTextEncodeMapper(),
-        LoraLoaderMapper(),
-        LoraStackerMapper(),
-        JoinStringsMapper(),
-        StringConstantMapper(),
-        TriggerWordToggleMapper(),
-        FluxGuidanceMapper()
-    ]
+# =============================================================================
+# Node Processing Function
+# =============================================================================
+
+def process_node(node_id: str, node_data: Dict, workflow: Dict, parser: 'WorkflowParser') -> Any: # type: ignore
+    """Process a node using its mapper and extract relevant information"""
+    node_type = node_data.get("class_type")
+    mapper = get_mapper(node_type)
     
-    for mapper in default_mappers:
+    if not mapper:
+        logger.warning(f"No mapper found for node type: {node_type}")
+        return None
+        
+    result = {}
+    
+    # Extract inputs based on the mapper's tracked inputs
+    for input_name in mapper["inputs_to_track"]:
+        if input_name in node_data.get("inputs", {}):
+            input_value = node_data["inputs"][input_name]
+            
+            # Check if input is a reference to another node's output
+            if isinstance(input_value, list) and len(input_value) == 2:
+                try:
+                    # Format is [node_id, output_slot]
+                    ref_node_id, output_slot = input_value
+                    # Convert node_id to string if it's an integer
+                    if isinstance(ref_node_id, int):
+                        ref_node_id = str(ref_node_id)
+                    
+                    # Recursively process the referenced node
+                    ref_value = parser.process_node(ref_node_id, workflow)
+                    
+                    if ref_value is not None:
+                        result[input_name] = ref_value
+                    else:
+                        # If we couldn't get a value from the reference, store the raw value
+                        result[input_name] = input_value
+                except Exception as e:
+                    logger.error(f"Error processing reference in node {node_id}, input {input_name}: {e}")
+                    result[input_name] = input_value
+            else:
+                # Direct value
+                result[input_name] = input_value
+    
+    # Apply the transform function
+    try:
+        return mapper["transform"](result)
+    except Exception as e:
+        logger.error(f"Error in transform function for node {node_id} of type {node_type}: {e}")
+        return result
+
+# =============================================================================
+# Transform Functions
+# =============================================================================
+
+
+
+def transform_lora_loader(inputs: Dict) -> Dict:
+    """Transform function for LoraLoader nodes"""
+    loras_data = inputs.get("loras", [])
+    lora_stack = inputs.get("lora_stack", {}).get("lora_stack", [])
+    
+    lora_texts = []
+    
+    # Process loras array
+    if isinstance(loras_data, dict) and "__value__" in loras_data:
+        loras_list = loras_data["__value__"]
+    elif isinstance(loras_data, list):
+        loras_list = loras_data
+    else:
+        loras_list = []
+        
+    # Process each active lora entry
+    for lora in loras_list:
+        if isinstance(lora, dict) and lora.get("active", False):
+            lora_name = lora.get("name", "")
+            strength = lora.get("strength", 1.0)
+            lora_texts.append(f"<lora:{lora_name}:{strength}>")
+    
+    # Process lora_stack if valid
+    if lora_stack and isinstance(lora_stack, list):
+        if not (len(lora_stack) == 2 and isinstance(lora_stack[0], (str, int)) and isinstance(lora_stack[1], int)):
+            for stack_entry in lora_stack:
+                lora_name = stack_entry[0]
+                strength = stack_entry[1]
+                lora_texts.append(f"<lora:{lora_name}:{strength}>")
+
+    result = {
+        "checkpoint": inputs.get("model", {}).get("checkpoint", ""),
+        "loras": " ".join(lora_texts)
+    }
+
+    if "clip" in inputs and isinstance(inputs["clip"], dict):
+        result["clip_skip"] = inputs["clip"].get("clip_skip", "-1")
+    
+    return result
+
+def transform_lora_stacker(inputs: Dict) -> Dict:
+    """Transform function for LoraStacker nodes"""
+    loras_data = inputs.get("loras", [])
+    result_stack = []
+    
+    # Handle existing stack entries
+    existing_stack = []
+    lora_stack_input = inputs.get("lora_stack", [])
+    
+    if isinstance(lora_stack_input, dict) and "lora_stack" in lora_stack_input:
+        existing_stack = lora_stack_input["lora_stack"]
+    elif isinstance(lora_stack_input, list):
+        if not (len(lora_stack_input) == 2 and isinstance(lora_stack_input[0], (str, int)) and 
+               isinstance(lora_stack_input[1], int)):
+            existing_stack = lora_stack_input
+    
+    # Add existing entries
+    if existing_stack:
+        result_stack.extend(existing_stack)
+    
+    # Process new loras
+    if isinstance(loras_data, dict) and "__value__" in loras_data:
+        loras_list = loras_data["__value__"]
+    elif isinstance(loras_data, list):
+        loras_list = loras_data
+    else:
+        loras_list = []
+        
+    for lora in loras_list:
+        if isinstance(lora, dict) and lora.get("active", False):
+            lora_name = lora.get("name", "")
+            strength = float(lora.get("strength", 1.0))
+            result_stack.append((lora_name, strength))
+    
+    return {"lora_stack": result_stack}
+
+def transform_trigger_word_toggle(inputs: Dict) -> str:
+    """Transform function for TriggerWordToggle nodes"""
+    toggle_data = inputs.get("toggle_trigger_words", [])
+
+    if isinstance(toggle_data, dict) and "__value__" in toggle_data:
+        toggle_words = toggle_data["__value__"]
+    elif isinstance(toggle_data, list):
+        toggle_words = toggle_data
+    else:
+        toggle_words = []
+    
+    # Filter active trigger words
+    active_words = []
+    for item in toggle_words:
+        if isinstance(item, dict) and item.get("active", False):
+            word = item.get("text", "")
+            if word and not word.startswith("__dummy"):
+                active_words.append(word)
+    
+    return ", ".join(active_words)
+
+# =============================================================================
+# Node Mapper Definitions
+# =============================================================================
+
+# Central definition of all supported node types and their configurations
+NODE_MAPPERS = {
+    
+    # LoraManager nodes
+    "Lora Loader (LoraManager)": {
+        "inputs_to_track": ["model", "clip", "loras", "lora_stack"],
+        "transform_func": transform_lora_loader
+    },
+    "Lora Stacker (LoraManager)": {
+        "inputs_to_track": ["loras", "lora_stack"],
+        "transform_func": transform_lora_stacker
+    },
+    "TriggerWord Toggle (LoraManager)": {
+        "inputs_to_track": ["toggle_trigger_words"],
+        "transform_func": transform_trigger_word_toggle
+    }   
+}
+
+def register_all_mappers() -> None:
+    """Register all mappers from the NODE_MAPPERS dictionary"""
+    for node_type, config in NODE_MAPPERS.items():
+        mapper = create_mapper(
+            node_type=node_type,
+            inputs_to_track=config["inputs_to_track"],
+            transform_func=config["transform_func"]
+        )
         register_mapper(mapper)
+    logger.info(f"Registered {len(NODE_MAPPERS)} node mappers")
 
 # =============================================================================
 # Extension Loading
@@ -383,8 +237,8 @@ def load_extensions(ext_dir: str = None) -> None:
     """
     Load mapper extensions from the specified directory
     
-    Each Python file in the directory will be loaded, and any NodeMapper subclasses
-    defined in those files will be automatically registered.
+    Extension files should define a NODE_MAPPERS_EXT dictionary containing mapper configurations.
+    These will be added to the global NODE_MAPPERS dictionary and registered automatically.
     """
     # Use default path if none provided
     if ext_dir is None:
@@ -411,18 +265,18 @@ def load_extensions(ext_dir: str = None) -> None:
                     module = importlib.util.module_from_spec(spec)
                     spec.loader.exec_module(module)
                     
-                    # Find all NodeMapper subclasses in the module
-                    for name, obj in inspect.getmembers(module):
-                        if (inspect.isclass(obj) and issubclass(obj, NodeMapper) 
-                                and obj != NodeMapper and hasattr(obj, 'node_type')):
-                            # Instantiate and register the mapper
-                            mapper = obj()
-                            register_mapper(mapper)
-                            logger.info(f"Loaded extension mapper: {mapper.node_type} from {filename}")
-            
+                    # Check if the module defines NODE_MAPPERS_EXT
+                    if hasattr(module, 'NODE_MAPPERS_EXT'):
+                        # Add the extension mappers to the global NODE_MAPPERS dictionary
+                        NODE_MAPPERS.update(module.NODE_MAPPERS_EXT)
+                        logger.info(f"Added {len(module.NODE_MAPPERS_EXT)} mappers from extension: {filename}")
+                    else:
+                        logger.warning(f"Extension {filename} does not define NODE_MAPPERS_EXT dictionary")
             except Exception as e:
                 logger.warning(f"Error loading extension {filename}: {e}")
-
+    
+    # Re-register all mappers after loading extensions
+    register_all_mappers()
 
 # Initialize the registry with default mappers
-register_default_mappers() 
+# register_default_mappers() 

py/workflow/parser.py

@@ -4,7 +4,7 @@ Main workflow parser implementation for ComfyUI
 import json
 import logging
 from typing import Dict, List, Any, Optional, Union, Set
-from .mappers import get_mapper, get_all_mappers, load_extensions
+from .mappers import get_mapper, get_all_mappers, load_extensions, process_node
 from .utils import (
     load_workflow, save_output, find_node_by_type,
     trace_model_path
@@ -15,14 +15,13 @@ logger = logging.getLogger(__name__)
 class WorkflowParser:
     """Parser for ComfyUI workflows"""
     
-    def __init__(self, load_extensions_on_init: bool = True):
+    def __init__(self):
         """Initialize the parser with mappers"""
         self.processed_nodes: Set[str] = set()  # Track processed nodes to avoid cycles
         self.node_results_cache: Dict[str, Any] = {}  # Cache for processed node results
         
-        # Load extensions if requested
-        if load_extensions_on_init:
-            load_extensions()
+        # Load extensions
+        load_extensions()
     
     def process_node(self, node_id: str, workflow: Dict) -> Any:
         """Process a single node and extract relevant information"""
@@ -45,10 +44,9 @@ class WorkflowParser:
         node_type = node_data.get("class_type")
         
         result = None
-        mapper = get_mapper(node_type)
-        if mapper:
+        if get_mapper(node_type):
             try:
-                result = mapper.process(node_id, node_data, workflow, self)
+                result = process_node(node_id, node_data, workflow, self)
                 # Cache the result
                 self.node_results_cache[node_id] = result
             except Exception as e:
@@ -60,32 +58,58 @@ class WorkflowParser:
         self.processed_nodes.remove(node_id)
         return result
     
-    def collect_loras_from_model(self, model_input: List, workflow: Dict) -> str:
-        """Collect loras information from the model node chain"""
-        if not isinstance(model_input, list) or len(model_input) != 2:
-            return ""
-            
-        model_node_id, _ = model_input
-        # Convert node_id to string if it's an integer
-        if isinstance(model_node_id, int):
-            model_node_id = str(model_node_id)
-            
-        # Process the model node
-        model_result = self.process_node(model_node_id, workflow)
+    def find_primary_sampler_node(self, workflow: Dict) -> Optional[str]:
+        """
+        Find the primary sampler node in the workflow.
         
-        # If this is a Lora Loader node, return the loras text
-        if model_result and isinstance(model_result, dict) and "loras" in model_result:
-            return model_result["loras"]
-            
-        # If not a lora loader, check the node's inputs for a model connection
-        node_data = workflow.get(model_node_id, {})
-        inputs = node_data.get("inputs", {})
+        Priority:
+        1. First try to find a SamplerCustomAdvanced node
+        2. If not found, look for KSampler nodes with denoise=1.0
+        3. If still not found, use the first KSampler node
         
-        # If this node has a model input, follow that path
-        if "model" in inputs and isinstance(inputs["model"], list):
-            return self.collect_loras_from_model(inputs["model"], workflow)
+        Args:
+            workflow: The workflow data as a dictionary
             
-        return ""
+        Returns:
+            The node ID of the primary sampler node, or None if not found
+        """
+        # First check for SamplerCustomAdvanced nodes
+        sampler_advanced_nodes = []
+        ksampler_nodes = []
+        
+        # Scan workflow for sampler nodes
+        for node_id, node_data in workflow.items():
+            node_type = node_data.get("class_type")
+            
+            if node_type == "SamplerCustomAdvanced":
+                sampler_advanced_nodes.append(node_id)
+            elif node_type == "KSampler":
+                ksampler_nodes.append(node_id)
+        
+        # If we found SamplerCustomAdvanced nodes, return the first one
+        if sampler_advanced_nodes:
+            logger.debug(f"Found SamplerCustomAdvanced node: {sampler_advanced_nodes[0]}")
+            return sampler_advanced_nodes[0]
+        
+        # If we have KSampler nodes, look for one with denoise=1.0
+        if ksampler_nodes:
+            for node_id in ksampler_nodes:
+                node_data = workflow[node_id]
+                inputs = node_data.get("inputs", {})
+                denoise = inputs.get("denoise", 0)
+                
+                # Check if denoise is 1.0 (allowing for small floating point differences)
+                if abs(float(denoise) - 1.0) < 0.001:
+                    logger.debug(f"Found KSampler node with denoise=1.0: {node_id}")
+                    return node_id
+            
+            # If no KSampler with denoise=1.0 found, use the first one
+            logger.debug(f"No KSampler with denoise=1.0 found, using first KSampler: {ksampler_nodes[0]}")
+            return ksampler_nodes[0]
+        
+        # No sampler nodes found
+        logger.warning("No sampler nodes found in workflow")
+        return None
     
     def parse_workflow(self, workflow_data: Union[str, Dict], output_path: Optional[str] = None) -> Dict:
         """
@@ -108,77 +132,38 @@ class WorkflowParser:
         self.processed_nodes = set()
         self.node_results_cache = {}
         
-        # Find the KSampler node
-        ksampler_node_id = find_node_by_type(workflow, "KSampler")
-        if not ksampler_node_id:
-            logger.warning("No KSampler node found in workflow")
+        # Find the primary sampler node
+        sampler_node_id = self.find_primary_sampler_node(workflow)
+        if not sampler_node_id:
+            logger.warning("No suitable sampler node found in workflow")
             return {}
         
-        # Start parsing from the KSampler node
-        result = {
-            "gen_params": {},
-            "loras": ""
-        }
+        # Process sampler node to extract parameters
+        sampler_result = self.process_node(sampler_node_id, workflow)
+        if not sampler_result:
+            return {}
         
-        # Process KSampler node to extract parameters
-        ksampler_result = self.process_node(ksampler_node_id, workflow)
-        if ksampler_result:
-            # Process the result
-            for key, value in ksampler_result.items():
-                # Special handling for the positive prompt from FluxGuidance
-                if key == "positive" and isinstance(value, dict):
-                    # Extract guidance value
-                    if "guidance" in value:
-                        result["gen_params"]["guidance"] = value["guidance"]
-                    
-                    # Extract prompt
-                    if "prompt" in value:
-                        result["gen_params"]["prompt"] = value["prompt"]
-                else:
-                    # Normal handling for other values
-                    result["gen_params"][key] = value
-        
-        # Process the positive prompt node if it exists and we don't have a prompt yet
-        if "prompt" not in result["gen_params"] and "positive" in ksampler_result:
-            positive_value = ksampler_result.get("positive")
-            if isinstance(positive_value, str):
-                result["gen_params"]["prompt"] = positive_value
-        
-        # Manually check for FluxGuidance if we don't have guidance value
-        if "guidance" not in result["gen_params"]:
-            flux_node_id = find_node_by_type(workflow, "FluxGuidance")
-            if flux_node_id:
-                # Get the direct input from the node
-                node_inputs = workflow[flux_node_id].get("inputs", {})
-                if "guidance" in node_inputs:
-                    result["gen_params"]["guidance"] = node_inputs["guidance"]
-        
-        # Extract loras from the model input of KSampler
-        ksampler_node = workflow.get(ksampler_node_id, {})
-        ksampler_inputs = ksampler_node.get("inputs", {})
-        if "model" in ksampler_inputs and isinstance(ksampler_inputs["model"], list):
-            loras_text = self.collect_loras_from_model(ksampler_inputs["model"], workflow)
-            if loras_text:
-                result["loras"] = loras_text
+        # Return the sampler result directly - it's already in the format we need
+        # This simplifies the structure and makes it easier to use in recipe_routes.py
         
         # Handle standard ComfyUI names vs our output format
-        if "cfg" in result["gen_params"]:
-            result["gen_params"]["cfg_scale"] = result["gen_params"].pop("cfg")
+        if "cfg" in sampler_result:
+            sampler_result["cfg_scale"] = sampler_result.pop("cfg")
             
-        # Add clip_skip = 2 to match reference output if not already present
-        if "clip_skip" not in result["gen_params"]:
-            result["gen_params"]["clip_skip"] = "2"
+        # Add clip_skip = 1 to match reference output if not already present
+        if "clip_skip" not in sampler_result:
+            sampler_result["clip_skip"] = "1"
         
         # Ensure the prompt is a string and not a nested dictionary
-        if "prompt" in result["gen_params"] and isinstance(result["gen_params"]["prompt"], dict):
-            if "prompt" in result["gen_params"]["prompt"]:
-                result["gen_params"]["prompt"] = result["gen_params"]["prompt"]["prompt"]
+        if "prompt" in sampler_result and isinstance(sampler_result["prompt"], dict):
+            if "prompt" in sampler_result["prompt"]:
+                sampler_result["prompt"] = sampler_result["prompt"]["prompt"]
         
         # Save the result if requested
         if output_path:
-            save_output(result, output_path)
+            save_output(sampler_result, output_path)
             
-        return result
+        return sampler_result
 
 
 def parse_workflow(workflow_path: str, output_path: Optional[str] = None) -> Dict:
@@ -193,4 +178,4 @@ def parse_workflow(workflow_path: str, output_path: Optional[str] = None) -> Dic
         Dictionary containing extracted parameters
     """
     parser = WorkflowParser()
-    return parser.parse_workflow(workflow_path, output_path) 
+    return parser.parse_workflow(workflow_path, output_path)

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.0"
+version = "0.8.5"
 license = {file = "LICENSE"}
 dependencies = [
     "aiohttp",

refs/civitai_api_model_by_versionId.json

@@ -95,7 +95,6 @@
             "onSite": false,
             "remixOfId": null
         }
-        // more images here
     ],
     "downloadUrl": "https://civitai.com/api/download/models/1387174"
 }

refs/civitai_comfy_metadata.json

@@ -0,0 +1,153 @@
+{
+    "resource-stack": {
+      "class_type": "CheckpointLoaderSimple",
+      "inputs": { "ckpt_name": "urn:air:sdxl:checkpoint:civitai:827184@1410435" }
+    },
+    "resource-stack-1": {
+      "class_type": "LoraLoader",
+      "inputs": {
+        "lora_name": "urn:air:sdxl:lora:civitai:1107767@1253442",
+        "strength_model": 1,
+        "strength_clip": 1,
+        "model": ["resource-stack", 0],
+        "clip": ["resource-stack", 1]
+      }
+    },
+    "resource-stack-2": {
+      "class_type": "LoraLoader",
+      "inputs": {
+        "lora_name": "urn:air:sdxl:lora:civitai:1342708@1516344",
+        "strength_model": 1,
+        "strength_clip": 1,
+        "model": ["resource-stack-1", 0],
+        "clip": ["resource-stack-1", 1]
+      }
+    },
+    "resource-stack-3": {
+      "class_type": "LoraLoader",
+      "inputs": {
+        "lora_name": "urn:air:sdxl:lora:civitai:122359@135867",
+        "strength_model": 1.55,
+        "strength_clip": 1,
+        "model": ["resource-stack-2", 0],
+        "clip": ["resource-stack-2", 1]
+      }
+    },
+    "6": {
+      "class_type": "smZ CLIPTextEncode",
+      "inputs": {
+        "text": "masterpiece, best quality, amazing quality, detailed setting, detailed background, 1girl, yunyun (konosuba), nude, red eyes, hair ornament, braid, hair between eyes,low twintails, pink ribbon, bow, hair bow, pussy, frilled skirt, layered skirt, belt, pink thighhighs, (pussy juice), large insertion, vaginal tugging, pussy grip, detailed skin, detailed soles, stretched pussy, feet in stockings, ass, nipples, medium breasts, french kiss, anus, shocked, nervous, penis awe,  BREAK Professor\u0027s office, college student, pornographic, 1boy, close eyes, (musscular male, detailed large cock), vaginal sex, college office setting, ass grab, fucking, riding, cowgirl, erotic, side view, deep fucking",
+        "parser": "comfy",
+        "text_g": "",
+        "text_l": "",
+        "ascore": 2.5,
+        "width": 0,
+        "height": 0,
+        "crop_w": 0,
+        "crop_h": 0,
+        "target_width": 0,
+        "target_height": 0,
+        "smZ_steps": 1,
+        "mean_normalization": true,
+        "multi_conditioning": true,
+        "use_old_emphasis_implementation": false,
+        "with_SDXL": false,
+        "clip": ["resource-stack-3", 1]
+      },
+      "_meta": { "title": "Positive" }
+    },
+    "7": {
+      "class_type": "smZ CLIPTextEncode",
+      "inputs": {
+        "text": "bad quality,worst quality,worst detail,sketch,censor",
+        "parser": "comfy",
+        "text_g": "",
+        "text_l": "",
+        "ascore": 2.5,
+        "width": 0,
+        "height": 0,
+        "crop_w": 0,
+        "crop_h": 0,
+        "target_width": 0,
+        "target_height": 0,
+        "smZ_steps": 1,
+        "mean_normalization": true,
+        "multi_conditioning": true,
+        "use_old_emphasis_implementation": false,
+        "with_SDXL": false,
+        "clip": ["resource-stack-3", 1]
+      },
+      "_meta": { "title": "Negative" }
+    },
+    "20": {
+      "class_type": "UpscaleModelLoader",
+      "inputs": { "model_name": "urn:air:other:upscaler:civitai:147759@164821" },
+      "_meta": { "title": "Load Upscale Model" }
+    },
+    "17": {
+      "class_type": "LoadImage",
+      "inputs": {
+        "image": "https://orchestration.civitai.com/v2/consumer/blobs/5KZ6358TW8CNEGPZKD08NVDB30",
+        "upload": "image"
+      },
+      "_meta": { "title": "Image Load" }
+    },
+    "19": {
+      "class_type": "ImageUpscaleWithModel",
+      "inputs": { "upscale_model": ["20", 0], "image": ["17", 0] },
+      "_meta": { "title": "Upscale Image (using Model)" }
+    },
+    "23": {
+      "class_type": "ImageScale",
+      "inputs": {
+        "upscale_method": "nearest-exact",
+        "crop": "disabled",
+        "width": 1280,
+        "height": 1856,
+        "image": ["19", 0]
+      },
+      "_meta": { "title": "Upscale Image" }
+    },
+    "21": {
+      "class_type": "VAEEncode",
+      "inputs": { "pixels": ["23", 0], "vae": ["resource-stack", 2] },
+      "_meta": { "title": "VAE Encode" }
+    },
+    "11": {
+      "class_type": "KSampler",
+      "inputs": {
+        "sampler_name": "euler_ancestral",
+        "scheduler": "normal",
+        "seed": 2088370631,
+        "steps": 47,
+        "cfg": 6.5,
+        "denoise": 0.3,
+        "model": ["resource-stack-3", 0],
+        "positive": ["6", 0],
+        "negative": ["7", 0],
+        "latent_image": ["21", 0]
+      },
+      "_meta": { "title": "KSampler" }
+    },
+    "13": {
+      "class_type": "VAEDecode",
+      "inputs": { "samples": ["11", 0], "vae": ["resource-stack", 2] },
+      "_meta": { "title": "VAE Decode" }
+    },
+    "12": {
+      "class_type": "SaveImage",
+      "inputs": { "filename_prefix": "ComfyUI", "images": ["13", 0] },
+      "_meta": { "title": "Save Image" }
+    },
+    "extra": {
+      "airs": [
+        "urn:air:other:upscaler:civitai:147759@164821",
+        "urn:air:sdxl:checkpoint:civitai:827184@1410435",
+        "urn:air:sdxl:lora:civitai:1107767@1253442",
+        "urn:air:sdxl:lora:civitai:1342708@1516344",
+        "urn:air:sdxl:lora:civitai:122359@135867"
+      ]
+    },
+    "extraMetadata": "{\u0022prompt\u0022:\u0022masterpiece, best quality, amazing quality, detailed setting, detailed background, 1girl, yunyun (konosuba), nude, red eyes, hair ornament, braid, hair between eyes,low twintails, pink ribbon, bow, hair bow, pussy, frilled skirt, layered skirt, belt, pink thighhighs, (pussy juice), large insertion, vaginal tugging, pussy grip, detailed skin, detailed soles, stretched pussy, feet in stockings, ass, nipples, medium breasts, french kiss, anus, shocked, nervous, penis awe,  BREAK Professor\u0027s office, college student, pornographic, 1boy, close eyes, (musscular male, detailed large cock), vaginal sex, college office setting, ass grab, fucking, riding, cowgirl, erotic, side view, deep fucking\u0022,\u0022negativePrompt\u0022:\u0022bad quality,worst quality,worst detail,sketch,censor\u0022,\u0022steps\u0022:47,\u0022cfgScale\u0022:6.5,\u0022sampler\u0022:\u0022euler_ancestral\u0022,\u0022workflowId\u0022:\u0022img2img-hires\u0022,\u0022resources\u0022:[{\u0022modelVersionId\u0022:1410435,\u0022strength\u0022:1},{\u0022modelVersionId\u0022:1410435,\u0022strength\u0022:1},{\u0022modelVersionId\u0022:1253442,\u0022strength\u0022:1},{\u0022modelVersionId\u0022:1516344,\u0022strength\u0022:1},{\u0022modelVersionId\u0022:135867,\u0022strength\u0022:1.55}],\u0022remixOfId\u0022:32140259}"
+  }
+  

refs/jpeg_civitai_exif_userComment_example

@@ -2,28 +2,17 @@ a dynamic and dramatic digital artwork featuring a stylized anthropomorphic whit
 Negative prompt:
 Steps: 30, Sampler: Undefined, CFG scale: 3.5, Seed: 90300501, Size: 832x1216, Clip skip: 2, Created Date: 2025-03-05T13:51:18.1770234Z, Civitai resources: [{"type":"checkpoint","modelVersionId":691639,"modelName":"FLUX","modelVersionName":"Dev"},{"type":"lora","weight":0.4,"modelVersionId":1202162,"modelName":"Velvet\u0027s Mythic Fantasy Styles | Flux \u002B Pony \u002B illustrious","modelVersionName":"Flux Gothic Lines"},{"type":"lora","weight":0.8,"modelVersionId":1470588,"modelName":"Velvet\u0027s Mythic Fantasy Styles | Flux \u002B Pony \u002B illustrious","modelVersionName":"Flux Retro"},{"type":"lora","weight":0.75,"modelVersionId":746484,"modelName":"Elden Ring - Yoshitaka Amano","modelVersionName":"V1"},{"type":"lora","weight":0.2,"modelVersionId":914935,"modelName":"Ink-style","modelVersionName":"ink-dynamic"},{"type":"lora","weight":0.2,"modelVersionId":1189379,"modelName":"Painterly Fantasy by ChronoKnight - [FLUX \u0026 IL]","modelVersionName":"FLUX"},{"type":"lora","weight":0.2,"modelVersionId":757030,"modelName":"Mezzotint Artstyle for Flux - by Ethanar","modelVersionName":"V1"}], Civitai metadata: {}
 
-<lora:ck-shadow-circuit-IL:0.78>,
 masterpiece, best quality, good quality, very aesthetic, absurdres, newest, 8K, depth of field, focused subject,
 dynamic angle, dutch angle, from below, epic half body portrait, gritty, wabi sabi, looking at viewer, woman is a geisha, parted lips,
-holographic skin, holofoil glitter, faint, glowing, ethereal, neon hair, glowing hair, otherworldly glow, she is dangerous,
-<lora:ck-nc-cyberpunk-IL-000011:0.4>
-<lora:ck-neon-retrowave-IL:0.2>
- <lora:ck-yoneyama-mai-IL-000014:0.4>
+holographic skin, holofoil glitter, faint, glowing, ethereal, neon hair, glowing hair, otherworldly glow, she is dangerous
+<lora:ck-shadow-circuit-IL:0.78>, <lora:ck-nc-cyberpunk-IL-000011:0.4>, <lora:ck-neon-retrowave-IL:0.2>, <lora:ck-yoneyama-mai-IL-000014:0.4>
 Negative prompt: score_6, score_5, score_4, bad quality, worst quality, worst detail, sketch, censorship, furry, window, headphones,
 Steps: 30, Sampler: Euler a, Schedule type: Simple, CFG scale: 7, Seed: 1405717592, Size: 832x1216, Model hash: 1ad6ca7f70, Model: waiNSFWIllustrious_v100, Denoising strength: 0.35, Hires CFG Scale: 5, Hires upscale: 1.3, Hires steps: 20, Hires upscaler: 4x-AnimeSharp, Lora hashes: "ck-shadow-circuit-IL: 88e247aa8c3d, ck-nc-cyberpunk-IL-000011: 935e6755554c, ck-neon-retrowave-IL: edafb9df7da1, ck-yoneyama-mai-IL-000014: 1b9305692a2e", Version: f2.0.1v1.10.1-1.10.1, Diffusion in Low Bits: Automatic (fp16 LoRA)
 
-masterpiece, best quality,high quality, newest, highres,8K,HDR,absurdres, 1girl, solo, steampunk aesthetic, mechanical monocle, long trench coat, leather gloves, brass accessories, intricate clockwork rifle, aiming at viewer, wind-blown scarf, high boots, fingerless gloves, pocket watch, corset, brown and gold color scheme, industrial cityscape, smoke and gears, atmospheric lighting, depth of field, dynamic pose, dramatic composition, detailed background, foreshortening, detailed background, dynamic pose, dynamic composition,dutch angle, detailed backgroud,foreshortening,blurry edges <lora:iLLMythAn1m3Style:1> MythAn1m3
-Negative prompt: worst quality, normal quality, anatomical nonsense, bad anatomy,interlocked fingers, extra fingers,watermark,simple background, loli,
-Steps: 35, Sampler: DPM++ 2M SDE, Schedule type: Karras, CFG scale: 4, Seed: 3537159932, Size: 1072x1376, Model hash: c364bbdae9, Model: waiNSFWIllustrious_v110, Clip skip: 2, ADetailer model: face_yolov8n.pt, ADetailer confidence: 0.3, ADetailer dilate erode: 4, ADetailer mask blur: 4, ADetailer denoising strength: 0.4, ADetailer inpaint only masked: True, ADetailer inpaint padding: 32, ADetailer version: 24.8.0, Lora hashes: "iLLMythAn1m3Style: d3480076057b", Version: f2.0.1v1.10.1-previous-519-g44eb4ea8, Module 1: sdxl.vae
-
 Masterpiece, best quality, high quality, newest, highres, 8K, HDR, absurdres, 1girl, solo, futuristic warrior, sleek exosuit with glowing energy cores, long braided hair flowing behind, gripping a high-tech bow with an energy arrow drawn, standing on a floating platform overlooking a massive space station, planets and nebulae in the distance, soft glow from distant stars, cinematic depth, foreshortening, dynamic pose, dramatic sci-fi lighting.
 Negative prompt: worst quality, normal quality, anatomical nonsense, bad anatomy,interlocked fingers, extra fingers,watermark,simple background, loli,
 Steps: 20, Sampler: euler_ancestral_karras, CFG scale: 8.0, Seed: 691121152183439, Model: il\waiNSFWIllustrious_v110.safetensors, Model hash: c3688ee04c, Lora_0 Model name: iLLMythAn1m3Style.safetensors, Lora_0 Model hash: ba7a040786, Lora_0 Strength model: 1.0, Lora_0 Strength clip: 1.0, Hashes: {"model": "c3688ee04c", "lora:iLLMythAn1m3Style": "ba7a040786"}
 
-Masterpiece, best quality, high quality, newest, highres, 8K, HDR, absurdres, 1boy, solo, gothic horror, pale vampire lord in regal, intricately detailed robes, crimson eyes glowing under the dim candlelight of a grand but decayed castle hall, holding a silver goblet filled with an unknown substance, a massive stained-glass window shattered behind him, cold mist rolling in, dramatic lighting, dark yet elegant aesthetic, foreshortening, cinematic perspective.
-Negative prompt: worst quality, normal quality, anatomical nonsense, bad anatomy,interlocked fingers, extra fingers,watermark,simple background, loli,
-Steps: 20, Sampler: euler_ancestral_karras, CFG scale: 8.0, Seed: 290117945770094, Model: il\waiNSFWIllustrious_v110.safetensors, Model hash: c3688ee04c, Lora_0 Model name: iLLMythAn1m3Style.safetensors, Lora_0 Model hash: ba7a040786, Lora_0 Strength model: 0.6, Lora_0 Strength clip: 0.7000000000000001, Hashes: {"model": "c3688ee04c", "lora:iLLMythAn1m3Style": "ba7a040786"}
-
-bo-exposure, An impressionistic oil painting in the style of J.M.W. Turner, depicting a ghostly ship sailing through a sea of swirling golden mist. The waves crash and dissolve into abstract, fiery strokes of orange and deep indigo, blurring the line between ocean and sky. The ship appears almost ethereal, as if drifting between worlds, lost in the ever-changing tides of memory and myth. The dynamic brushstrokes capture the relentless power of nature and the fleeting essence of time.
+Immerse yourself in the enchanting journey, where harmonious transmutation of Bauhaus art unites photographic precision and contemporary illustration, capturing an enthralling blend between vivid abstract nature and urban landscapes. Let your eyes be captivated by a kaleidoscope of rich, deep reds and yellows, entwined with intriguing shades that beckon a somber atmosphere. As your spirit ventures along this haunting path, witness the mysterious, high-angle perspective dominated by scattered clouds – granting you a mesmerizing glimpse into the ever-transforming realm of metamorphosing environments. ,<lora:flux/fav/ck-charcoal-drawing-000014.safetensors:1.0:1.0>   
 Negative prompt:
-Steps: 25, Sampler: DPM++ 2M, CFG scale: 3.5, Seed: 1024252061321625, Size: 832x1216, Clip skip: 1, Model hash: , Model: flux_dev, Hashes: {"model": ""}, Version: ComfyUI
+Steps: 20, Sampler: Euler, CFG scale: 3.5, Seed: 885491426361006, Size: 832x1216, Model hash: 4610115bb0, Model: flux_dev, Hashes: {"LORA:flux/fav/ck-charcoal-drawing-000014.safetensors": "34d36c17c1", "model": "4610115bb0"}, Version: ComfyUI

refs/meta_format.txt

@@ -0,0 +1,3 @@
+In this ethereal masterpiece, metallic sculptures juxtapose effortlessly against a subtle backdrop of misty neutral hues. Exquisite curvatures and geometric shapes converge harmoniously, creating an illuminating realm of polished metallic surfaces. Shimmering copper, gleaming silver, and lustrous gold hues dance in perfect balance, highlighting the intricate play of light and shadow cast upon these celestial forms.  A halo of diffused radiance envelops each piece, enhancing their textured depths and metallic brilliance while allowing delicate details to emerge from obscurity. The composition conveys a serene yet mesmerizing atmosphere, as if suspended in a dreamlike limbo between reality and fantasy. The tantalizing interplay of colors within this transcendent realm creates a profound sense of depth and grandeur that invites the viewer into an enchanting voyage through abstract metallic beauty.  This captivating artwork evokes emotions of boundless curiosity and reverence reminiscent of the timeless works by artists such as Giorgio de Chirico or Paul Klee, while asserting a unique, modern artistic sensibility. With every observation, a new nuance unfolds, as if a never-ending story waiting to be discovered through the lens of metallic artistry.
+Negative prompt:
+Steps: 25, Sampler: dpmpp_2m_sgm_uniform, Seed: 471889513588087, Model: Fluxmania V5P.safetensors, Model hash: 8ae0583b06, VAE: ae.sft, VAE hash: afc8e28272, Lora_0 Model name: ArtVador I.safetensors, Lora_0 Model hash: 08f7133a58, Lora_0 Strength model: 0.65, Lora_0 Strength clip: 0.65, Lora_1 Model name: Kaoru Yamada.safetensors, Lora_1 Model hash: d4893f7202, Lora_1 Strength model: 0.75, Lora_1 Strength clip: 0.75, Hashes: {"model": "8ae0583b06", "vae": "afc8e28272", "lora:ArtVador I": "08f7133a58", "lora:Kaoru Yamada": "d4893f7202"}

refs/output.json

@@ -1,13 +1,11 @@
 {
     "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>",
-    "gen_params": {
-        "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"
-    }
+    "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"
 }

refs/prompt.json

@@ -1,75 +1,12 @@
 {
-    "3": {
-        "inputs": {
-            "seed": 241,
-            "steps": 20,
-            "cfg": 8,
-            "sampler_name": "euler_ancestral",
-            "scheduler": "karras",
-            "denoise": 1,
-            "model": [
-                "56",
-                0
-            ],
-            "positive": [
-                "6",
-                0
-            ],
-            "negative": [
-                "7",
-                0
-            ],
-            "latent_image": [
-                "5",
-                0
-            ]
-        },
-        "class_type": "KSampler",
-        "_meta": {
-            "title": "KSampler"
-        }
-    },
-    "4": {
-        "inputs": {
-            "ckpt_name": "il\\waiNSFWIllustrious_v110.safetensors"
-        },
-        "class_type": "CheckpointLoaderSimple",
-        "_meta": {
-            "title": "Load Checkpoint"
-        }
-    },
-    "5": {
-        "inputs": {
-            "width": 832,
-            "height": 1216,
-            "batch_size": 1
-        },
-        "class_type": "EmptyLatentImage",
-        "_meta": {
-            "title": "Empty Latent Image"
-        }
-    },
     "6": {
         "inputs": {
             "text": [
-                "22",
+                "301",
                 0
             ],
             "clip": [
-                "56",
-                1
-            ]
-        },
-        "class_type": "CLIPTextEncode",
-        "_meta": {
-            "title": "CLIP Text Encode (Prompt)"
-        }
-    },
-    "7": {
-        "inputs": {
-            "text": "bad quality, worst quality, worst detail, sketch ,signature, watermark, patreon logo, nsfw",
-            "clip": [
-                "56",
+                "299",
                 1
             ]
         },
@@ -81,12 +18,12 @@
     "8": {
         "inputs": {
             "samples": [
-                "3",
-                0
+                "13",
+                1
             ],
             "vae": [
-                "4",
-                2
+                "10",
+                0
             ]
         },
         "class_type": "VAEDecode",
@@ -94,7 +31,230 @@
             "title": "VAE Decode"
         }
     },
-    "14": {
+    "10": {
+        "inputs": {
+            "vae_name": "flux1\\ae.safetensors"
+        },
+        "class_type": "VAELoader",
+        "_meta": {
+            "title": "Load VAE"
+        }
+    },
+    "11": {
+        "inputs": {
+            "clip_name1": "t5xxl_fp8_e4m3fn.safetensors",
+            "clip_name2": "ViT-L-14-TEXT-detail-improved-hiT-GmP-TE-only-HF.safetensors",
+            "type": "flux",
+            "device": "default"
+        },
+        "class_type": "DualCLIPLoader",
+        "_meta": {
+            "title": "DualCLIPLoader"
+        }
+    },
+    "13": {
+        "inputs": {
+            "noise": [
+                "147",
+                0
+            ],
+            "guider": [
+                "22",
+                0
+            ],
+            "sampler": [
+                "16",
+                0
+            ],
+            "sigmas": [
+                "17",
+                0
+            ],
+            "latent_image": [
+                "48",
+                0
+            ]
+        },
+        "class_type": "SamplerCustomAdvanced",
+        "_meta": {
+            "title": "SamplerCustomAdvanced"
+        }
+    },
+    "16": {
+        "inputs": {
+            "sampler_name": "dpmpp_2m"
+        },
+        "class_type": "KSamplerSelect",
+        "_meta": {
+            "title": "KSamplerSelect"
+        }
+    },
+    "17": {
+        "inputs": {
+            "scheduler": "beta",
+            "steps": [
+                "246",
+                0
+            ],
+            "denoise": 1,
+            "model": [
+                "28",
+                0
+            ]
+        },
+        "class_type": "BasicScheduler",
+        "_meta": {
+            "title": "BasicScheduler"
+        }
+    },
+    "22": {
+        "inputs": {
+            "model": [
+                "28",
+                0
+            ],
+            "conditioning": [
+                "29",
+                0
+            ]
+        },
+        "class_type": "BasicGuider",
+        "_meta": {
+            "title": "BasicGuider"
+        }
+    },
+    "28": {
+        "inputs": {
+            "max_shift": 1.1500000000000001,
+            "base_shift": 0.5,
+            "width": [
+                "48",
+                1
+            ],
+            "height": [
+                "48",
+                2
+            ],
+            "model": [
+                "299",
+                0
+            ]
+        },
+        "class_type": "ModelSamplingFlux",
+        "_meta": {
+            "title": "ModelSamplingFlux"
+        }
+    },
+    "29": {
+        "inputs": {
+            "guidance": 3.5,
+            "conditioning": [
+                "6",
+                0
+            ]
+        },
+        "class_type": "FluxGuidance",
+        "_meta": {
+            "title": "FluxGuidance"
+        }
+    },
+    "48": {
+        "inputs": {
+            "resolution": "832x1216 (0.68)",
+            "batch_size": 1,
+            "width_override": 0,
+            "height_override": 0
+        },
+        "class_type": "SDXLEmptyLatentSizePicker+",
+        "_meta": {
+            "title": "🔧 SDXL Empty Latent Size Picker"
+        }
+    },
+    "65": {
+        "inputs": {
+            "unet_name": "flux\\flux1-dev-fp8-e4m3fn.safetensors",
+            "weight_dtype": "fp8_e4m3fn_fast"
+        },
+        "class_type": "UNETLoader",
+        "_meta": {
+            "title": "Load Diffusion Model"
+        }
+    },
+    "147": {
+        "inputs": {
+            "noise_seed": 651532572596956
+        },
+        "class_type": "RandomNoise",
+        "_meta": {
+            "title": "RandomNoise"
+        }
+    },
+    "148": {
+        "inputs": {
+            "wildcard_text": "__some-prompts__",
+            "populated_text": "A surreal digital artwork showcases a forward-thinking inventor captivated by his intricate mechanical creation through a large magnifying glass. Viewed from an unconventional perspective, the scene reveals an eccentric assembly of gears, springs, and brass instruments within his workshop. Soft, ethereal light radiates from the invention, casting enigmatic shadows on the walls as time appears to bend around its metallic form, invoking a sense of curiosity, wonder, and exhilaration in discovery.",
+            "mode": "fixed",
+            "seed": 553084268162351,
+            "Select to add Wildcard": "Select the Wildcard to add to the text"
+        },
+        "class_type": "ImpactWildcardProcessor",
+        "_meta": {
+            "title": "ImpactWildcardProcessor"
+        }
+    },
+    "151": {
+        "inputs": {
+            "text": "A hyper-realistic close-up portrait of a young woman with shoulder-length black hair styled in edgy, futuristic layers, adorned with glowing tips. She wears mecha eyewear with a neon green visor that transitions into iridescent shades of teal and gold. The frame is sleek, with angular edges and fine mechanical detailing. Her expression is fierce and confident, with flawless skin highlighted by the neon reflections. She wears a high-tech bodysuit with integrated LED lines and metallic panels. The background depicts a hazy rendition of The Great Wave off Kanagawa by Hokusai, its powerful waves blending seamlessly with the neon tones, amplifying her intense, defiant aura."
+        },
+        "class_type": "Text Multiline",
+        "_meta": {
+            "title": "Text Multiline"
+        }
+    },
+    "191": {
+        "inputs": {
+            "text": "A cinematic, oil painting masterpiece captures the essence of impressionistic surrealism, inspired by Claude Monet. A mysterious woman in a flowing crimson dress stands at the edge of a tranquil lake, where lily pads shimmer under an ethereal, golden twilight. The water’s surface reflects a dreamlike sky, its swirling hues of violet and sapphire melting together like liquid light. The thick, expressive brushstrokes lend depth to the scene, evoking a sense of nostalgia and quiet longing, as if the world itself is caught between reality and a fleeting dream.  \nA mesmerizing oil painting masterpiece inspired by Salvador Dalí, blending surrealism with post-impressionist texture. A lone violinist plays atop a melting clock tower, his form distorted by the passage of time. The sky is a cascade of swirling, liquid oranges and deep blues, where floating staircases spiral endlessly into the horizon. The impasto technique gives depth and movement to the surreal elements, making time itself feel fluid, as if the world is dissolving into a dream.  \nA stunning impressionistic oil painting evokes the spirit of Edvard Munch, capturing a solitary figure standing on a rain-soaked street, illuminated by the glow of flickering gas lamps. The swirling, chaotic strokes of deep blues and fiery reds reflect the turbulence of emotion, while the blurred reflections in the wet cobblestone suggest a merging of past and present. The faceless figure, draped in a dark overcoat, seems lost in thought, embodying the ephemeral nature of memory and time.  \nA breathtaking oil painting masterpiece, inspired by Gustav Klimt, presents a celestial ballroom where faceless dancers swirl in an eternal waltz beneath a gilded, star-speckled sky. Their golden garments shimmer with intricate patterns, blending into the opulent mosaic floor that seems to stretch into infinity. The dreamlike composition, rich in warm amber and deep sapphire hues, captures an otherworldly elegance, as if the dancers are suspended in a moment that transcends time.  \nA visionary oil painting inspired by Marc Chagall depicts a dreamlike cityscape where gravity ceases to exist. A couple floats above a crimson-tinted town, their forms dissolving into the swirling strokes of a vast, cerulean sky. The buildings below twist and bend in rhythmic motion, their windows glowing like tiny stars. The thick, textured brushwork conveys a sense of weightlessness and wonder, as if love itself has defied the laws of the universe.  \nAn impressionistic oil painting in the style of J.M.W. Turner, depicting a ghostly ship sailing through a sea of swirling golden mist. The waves crash and dissolve into abstract, fiery strokes of orange and deep indigo, blurring the line between ocean and sky. The ship appears almost ethereal, as if drifting between worlds, lost in the ever-changing tides of memory and myth. The dynamic brushstrokes capture the relentless power of nature and the fleeting essence of time.  \nA captivating oil painting masterpiece, infused with surrealist impressionism, portrays a grand library where books float midair, their pages unraveling into ribbons of light. The towering shelves twist into the heavens, vanishing into an infinite, starry void. A lone scholar, illuminated by the glow of a suspended lantern, reaches for a book that seems to pulse with life. The scene pulses with mystery, where the impasto textures bring depth to the interplay between knowledge and dreams.  \nA luminous impressionistic oil painting captures the melancholic beauty of an abandoned carnival, its faded carousel horses frozen mid-gallop beneath a sky of swirling lavender and gold. The wind carries fragments of forgotten laughter through the empty fairground, where scattered ticket stubs and crumbling banners whisper tales of joy long past. The thick, textured brushstrokes blend nostalgia with an eerie dreamlike quality, as if the carnival exists only in the echoes of memory.  \nA surreal oil painting in the spirit of René Magritte, featuring a towering lighthouse that emits not light, but cascading waterfalls from its peak. The swirling sky, painted in deep midnight blues, is punctuated by glowing, crescent moons that defy gravity. A lone figure stands at the water’s edge, gazing up in quiet contemplation, as if caught between wonder and the unknown. The painting’s rich textures and luminous colors create an enigmatic, dreamlike landscape.  \nA striking impressionistic oil painting, reminiscent of Van Gogh, portrays a lone traveler on a winding cobblestone path, their silhouette bathed in the golden glow of lantern-lit cherry blossoms. The petals swirl through the night air like glowing embers, blending with the deep, rhythmic strokes of a star-filled indigo sky. The scene captures a feeling of wistful solitude, as if the traveler is walking not only through the city, but through the fleeting nature of time itself."
+        },
+        "class_type": "Text Multiline",
+        "_meta": {
+            "title": "Text Multiline"
+        }
+    },
+    "203": {
+        "inputs": {
+            "string1": [
+                "289",
+                0
+            ],
+            "string2": [
+                "293",
+                0
+            ],
+            "delimiter": ", "
+        },
+        "class_type": "JoinStrings",
+        "_meta": {
+            "title": "Join Strings"
+        }
+    },
+    "208": {
+        "inputs": {
+            "file_path": "",
+            "dictionary_name": "[filename]",
+            "label": "TextBatch",
+            "mode": "automatic",
+            "index": 0,
+            "multiline_text": [
+                "191",
+                0
+            ]
+        },
+        "class_type": "Text Load Line From File",
+        "_meta": {
+            "title": "Text Load Line From File"
+        }
+    },
+    "226": {
         "inputs": {
             "images": [
                 "8",
@@ -106,60 +266,21 @@
             "title": "Preview Image"
         }
     },
-    "19": {
+    "246": {
         "inputs": {
-            "stop_at_clip_layer": -2,
-            "clip": [
-                "4",
-                1
-            ]
+            "value": 25
         },
-        "class_type": "CLIPSetLastLayer",
+        "class_type": "INTConstant",
         "_meta": {
-            "title": "CLIP Set Last Layer"
+            "title": "Steps"
         }
     },
-    "21": {
-        "inputs": {
-            "string": "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",
-            "strip_newlines": false
-        },
-        "class_type": "StringConstantMultiline",
-        "_meta": {
-            "title": "positive"
-        }
-    },
-    "22": {
-        "inputs": {
-            "string1": [
-                "55",
-                0
-            ],
-            "string2": [
-                "21",
-                0
-            ],
-            "delimiter": ", "
-        },
-        "class_type": "JoinStrings",
-        "_meta": {
-            "title": "Join Strings"
-        }
-    },
-    "55": {
+    "289": {
         "inputs": {
             "group_mode": true,
             "toggle_trigger_words": [
                 {
-                    "text": "in the style of ck-rw",
-                    "active": true
-                },
-                {
-                    "text": "in the style of cksc",
-                    "active": true
-                },
-                {
-                    "text": "artist:moriimee",
+                    "text": "bo-exposure",
                     "active": true
                 },
                 {
@@ -173,9 +294,9 @@
                     "_isDummy": true
                 }
             ],
-            "orinalMessage": "in the style of ck-rw,, in the style of cksc,, artist:moriimee",
+            "orinalMessage": "bo-exposure",
             "trigger_words": [
-                "56",
+                "299",
                 2
             ]
         },
@@ -184,25 +305,58 @@
             "title": "TriggerWord Toggle (LoraManager)"
         }
     },
-    "56": {
+    "293": {
         "inputs": {
-            "text": "<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>",
+            "input": 1,
+            "text1": [
+                "208",
+                0
+            ],
+            "text2": [
+                "151",
+                0
+            ]
+        },
+        "class_type": "easy textSwitch",
+        "_meta": {
+            "title": "Text Switch"
+        }
+    },
+    "297": {
+        "inputs": {
+            "text": ""
+        },
+        "class_type": "Lora Stacker (LoraManager)",
+        "_meta": {
+            "title": "Lora Stacker (LoraManager)"
+        }
+    },
+    "298": {
+        "inputs": {
+            "anything": [
+                "297",
+                0
+            ]
+        },
+        "class_type": "easy showAnything",
+        "_meta": {
+            "title": "Show Any"
+        }
+    },
+    "299": {
+        "inputs": {
+            "text": "<lora:boFLUX Double Exposure Magic v2:0.8> <lora:FluxDFaeTasticDetails:0.65>",
             "loras": [
                 {
-                    "name": "ck-shadow-circuit-IL-000012",
-                    "strength": 0.78,
+                    "name": "boFLUX Double Exposure Magic v2",
+                    "strength": 0.8,
                     "active": true
                 },
                 {
-                    "name": "MoriiMee_Gothic_Niji_Style_Illustrious_r1",
-                    "strength": 0.45,
+                    "name": "FluxDFaeTasticDetails",
+                    "strength": 0.65,
                     "active": true
                 },
-                {
-                    "name": "ck-nc-cyberpunk-IL-000011",
-                    "strength": 0.4,
-                    "active": false
-                },
                 {
                     "name": "__dummy_item1__",
                     "strength": 0,
@@ -217,15 +371,15 @@
                 }
             ],
             "model": [
-                "4",
+                "65",
                 0
             ],
             "clip": [
-                "4",
-                1
+                "11",
+                0
             ],
             "lora_stack": [
-                "57",
+                "297",
                 0
             ]
         },
@@ -234,64 +388,14 @@
             "title": "Lora Loader (LoraManager)"
         }
     },
-    "57": {
+    "301": {
         "inputs": {
-            "text": "<lora:aorunIllstrious:1>",
-            "loras": [
-                {
-                    "name": "aorunIllstrious",
-                    "strength": "0.90",
-                    "active": false
-                },
-                {
-                    "name": "__dummy_item1__",
-                    "strength": 0,
-                    "active": false,
-                    "_isDummy": true
-                },
-                {
-                    "name": "__dummy_item2__",
-                    "strength": 0,
-                    "active": false,
-                    "_isDummy": true
-                }
-            ],
-            "lora_stack": [
-                "59",
-                0
-            ]
+            "string": "A hyper-realistic close-up portrait of a young woman with shoulder-length black hair styled in edgy, futuristic layers, adorned with glowing tips. She wears mecha eyewear with a neon green visor that transitions into iridescent shades of teal and gold. The frame is sleek, with angular edges and fine mechanical detailing. Her expression is fierce and confident, with flawless skin highlighted by the neon reflections. She wears a high-tech bodysuit with integrated LED lines and metallic panels. The background depicts a hazy rendition of The Great Wave off Kanagawa by Hokusai, its powerful waves blending seamlessly with the neon tones, amplifying her intense, defiant aura.",
+            "strip_newlines": true
         },
-        "class_type": "Lora Stacker (LoraManager)",
+        "class_type": "StringConstantMultiline",
         "_meta": {
-            "title": "Lora Stacker (LoraManager)"
-        }
-    },
-    "59": {
-        "inputs": {
-            "text": "<lora:ck-neon-retrowave-IL-000012:0.8>",
-            "loras": [
-                {
-                    "name": "ck-neon-retrowave-IL-000012",
-                    "strength": 0.8,
-                    "active": true
-                },
-                {
-                    "name": "__dummy_item1__",
-                    "strength": 0,
-                    "active": false,
-                    "_isDummy": true
-                },
-                {
-                    "name": "__dummy_item2__",
-                    "strength": 0,
-                    "active": false,
-                    "_isDummy": true
-                }
-            ]
-        },
-        "class_type": "Lora Stacker (LoraManager)",
-        "_meta": {
-            "title": "Lora Stacker (LoraManager)"
+            "title": "String Constant Multiline"
         }
     }
 }

simple_test.py

@@ -1,25 +0,0 @@
-import json
-from py.workflow.parser import WorkflowParser
-
-# Load workflow data
-with open('refs/prompt.json', 'r') as f:
-    workflow_data = json.load(f)
-
-# Parse workflow
-parser = WorkflowParser()
-try:
-    # Parse the workflow
-    result = parser.parse_workflow(workflow_data)
-    print("Parsing successful!")
-    
-    # Print each component separately
-    print("\nGeneration Parameters:")
-    for k, v in result.get("gen_params", {}).items():
-        print(f"  {k}: {v}")
-    
-    print("\nLoRAs:")
-    print(result.get("loras", ""))
-except Exception as e:
-    print(f"Error parsing workflow: {e}")
-    import traceback
-    traceback.print_exc() 

static/css/components/filter-indicator.css

@@ -0,0 +1,84 @@
+/* Filter indicator styles */
+.control-group .filter-active {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--lora-accent);
+    color: white;
+    border-radius: var(--border-radius-xs);
+    padding: 4px 10px;
+    transition: all 0.2s ease;
+    border: 1px solid var(--lora-accent);
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    font-size: 0.85em;
+}
+
+.control-group .filter-active:hover {
+    opacity: 0.92;
+    transform: translateY(-1px);
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
+}
+
+.control-group .filter-active:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.control-group .filter-active i.fa-filter {
+    font-size: 0.9em;
+    margin-right: 2px;
+    opacity: 0.9;
+}
+
+.control-group .filter-active i.clear-filter {
+    transition: transform 0.2s ease, background-color 0.2s ease;
+    cursor: pointer;
+    margin-left: 4px;
+    border-radius: 50%;
+    font-size: 0.85em;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.control-group .filter-active i.clear-filter:hover {
+    transform: scale(1.2);
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.control-group .filter-active .lora-name {
+    font-weight: 500;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Animation for filter indicator */
+@keyframes filterPulse {
+    0% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
+    50% { transform: scale(1.03); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); }
+    100% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
+}
+
+.filter-active.animate {
+    animation: filterPulse 0.6s ease;
+}
+
+/* Make responsive */
+@media (max-width: 576px) {
+    .control-group .filter-active {
+        padding: 6px 10px;
+    }
+    
+    .control-group .filter-active .lora-name {
+        max-width: 100px;
+    }
+    
+    .control-group .filter-active:hover {
+        transform: none; /* Disable hover effects on mobile */
+    }
+}

static/css/components/lora-modal.css

@@ -99,6 +99,7 @@
     width: 100%;
     background: var(--lora-surface);
     margin-bottom: var(--space-2);
+    overflow: hidden; /* Ensure metadata panel is contained */
 }
 
 .media-wrapper:last-child {
@@ -542,25 +543,53 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    cursor: pointer;
     padding: 4px;
     border-radius: var(--border-radius-xs);
     transition: background-color 0.2s;
+    position: relative;
 }
 
 .file-name-wrapper:hover {
     background: oklch(var(--lora-accent) / 0.1);
 }
 
-.file-name-wrapper i {
-    color: var(--text-color);
-    opacity: 0.5;
-    transition: opacity 0.2s;
+.file-name-content {
+    padding: 2px 4px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid transparent;
+    flex: 1;
 }
 
-.file-name-wrapper:hover i {
-    opacity: 1;
-    color: var(--lora-accent);
+.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 */
@@ -573,6 +602,59 @@
     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);
@@ -781,7 +863,7 @@
 }
 
 .model-description-content blockquote {
-    border-left: 3px solid var(--lora-accent);
+    border-left: 3px solid var (--lora-accent);
     padding-left: 1em;
     margin-left: 0;
     margin-right: 0;
@@ -1030,4 +1112,215 @@
 /* Make sure media wrapper maintains position: relative for absolute positioning of children */
 .carousel .media-wrapper {
     position: relative;
+}
+
+/* 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 on hover */
+.media-wrapper:hover .image-metadata-panel {
+    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;
+}
+
+.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);
 }

static/css/components/modal.css

@@ -196,7 +196,7 @@ body.modal-open {
 }
 
 .settings-modal {
-    max-width: 500px;
+    max-width: 650px; /* Further increased from 600px for more space */
 }
 
 /* Settings Links */
@@ -266,14 +266,22 @@ body.modal-open {
     }
 }
 
+/* API key input specific styles */
 .api-key-input {
+    width: 100%; /* Take full width of parent */
     position: relative;
     display: flex;
     align-items: center;
 }
 
 .api-key-input input {
-    padding-right: 40px;
+    width: 100%;
+    padding: 6px 40px 6px 10px; /* Add left padding */
+    height: 32px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+    background-color: var(--lora-surface);
+    color: var(--text-color);
 }
 
 .api-key-input .toggle-visibility {
@@ -294,8 +302,10 @@ body.modal-open {
 .input-help {
     font-size: 0.85em;
     color: var(--text-color);
-    opacity: 0.8;
-    margin-top: 4px;
+    opacity: 0.7;
+    margin-top: 8px; /* Space between control and help */
+    line-height: 1.4;
+    width: 100%; /* Full width */
 }
 
 /* 统一各个 section 的样式 */
@@ -341,9 +351,8 @@ body.modal-open {
 
 .setting-item {
     display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: var(--space-2);
+    flex-direction: column; /* Changed to column for help text placement */
+    margin-bottom: var(--space-3); /* Increased to provide more spacing between items */
     padding: var(--space-1);
     border-radius: var(--border-radius-xs);
 }
@@ -356,18 +365,68 @@ body.modal-open {
     background: rgba(255, 255, 255, 0.05);
 }
 
+/* Control row with label and input together */
+.setting-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
 .setting-info {
-    flex: 1;
+    margin-bottom: 0;
+    width: 35%; /* Increased from 30% to prevent wrapping */
+    flex-shrink: 0; /* Prevent shrinking */
 }
 
 .setting-info label {
     display: block;
-    margin-bottom: 4px;
     font-weight: 500;
+    margin-bottom: 0;
+    white-space: nowrap; /* Prevent label wrapping */
 }
 
 .setting-control {
-    padding-left: var(--space-2);
+    width: 60%; /* Decreased slightly from 65% */
+    margin-bottom: 0;
+    display: flex;
+    justify-content: flex-end; /* Right-align all controls */
+}
+
+/* Select Control Styles */
+.select-control {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.select-control select {
+    width: 100%;
+    max-width: 100%; /* Increased from 200px */
+    padding: 6px 10px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+    background-color: var(--lora-surface);
+    color: var(--text-color);
+    font-size: 0.95em;
+    height: 32px;
+}
+
+/* Fix dark theme select dropdown text color */
+[data-theme="dark"] .select-control select {
+    background-color: rgba(30, 30, 30, 0.9);
+    color: var(--text-color);
+}
+
+[data-theme="dark"] .select-control select option {
+    background-color: #2d2d2d;
+    color: var(--text-color);
+}
+
+.select-control select:focus {
+    border-color: var(--lora-accent);
+    outline: none;
 }
 
 /* Toggle Switch */
@@ -377,6 +436,7 @@ body.modal-open {
     width: 50px;
     height: 24px;
     cursor: pointer;
+    margin-left: auto; /* Push to right side */
 }
 
 .toggle-switch input {
@@ -426,15 +486,6 @@ input:checked + .toggle-slider:before {
     width: 22px;
 }
 
-/* Update input help styles */
-.input-help {
-    font-size: 0.85em;
-    color: var(--text-color);
-    opacity: 0.7;
-    margin-top: 4px;
-    line-height: 1.4;
-}
-
 /* Blur effect for NSFW content */
 .nsfw-blur {
     filter: blur(12px);
@@ -482,4 +533,44 @@ input:checked + .toggle-slider:before {
     font-style: italic;
     margin-top: var(--space-1);
     text-align: center;
+}
+
+/* Add styles for markdown elements in changelog */
+.changelog-item ul {
+    padding-left: 20px;
+    margin-top: 8px;
+}
+
+.changelog-item li {
+    margin-bottom: 6px;
+    line-height: 1.4;
+}
+
+.changelog-item strong {
+    font-weight: 600;
+}
+
+.changelog-item em {
+    font-style: italic;
+}
+
+.changelog-item code {
+    background: rgba(0, 0, 0, 0.05);
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
+[data-theme="dark"] .changelog-item code {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.changelog-item a {
+    color: var(--lora-accent);
+    text-decoration: none;
+}
+
+.changelog-item a:hover {
+    text-decoration: underline;
 }

static/css/components/recipe-card.css

@@ -1,184 +0,0 @@
-.recipe-tag-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
-}
-
-.recipe-tag {
-    background: var(--lora-surface-hover);
-    color: var(--lora-text-secondary);
-    padding: 0.25rem 0.5rem;
-    border-radius: var(--border-radius-sm);
-    font-size: 0.8rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.recipe-tag:hover, .recipe-tag.active {
-    background: var(--lora-primary);
-    color: var(--lora-text-on-primary);
-}
-
-.recipe-card {
-    position: relative;
-    background: var(--lora-surface);
-    border-radius: var(--border-radius-base);
-    overflow: hidden;
-    box-shadow: var(--shadow-sm);
-    transition: all 0.2s ease;
-    aspect-ratio: 896/1152;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-}
-
-.recipe-card:hover {
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-md);
-}
-
-.recipe-card:focus-visible {
-    outline: 2px solid var(--lora-accent);
-    outline-offset: 2px;
-}
-
-.recipe-indicator {
-    position: absolute;
-    top: 6px;
-    left: 8px;
-    width: 24px;
-    height: 24px;
-    background: var(--lora-primary);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-weight: bold;
-    z-index: 2;
-}
-
-.recipe-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 1.5rem;
-    margin-top: 1.5rem;
-}
-
-.placeholder-message {
-    grid-column: 1 / -1;
-    text-align: center;
-    padding: 2rem;
-    background: var(--lora-surface-alt);
-    border-radius: var(--border-radius-base);
-}
-
-.card-preview {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--border-radius-base);
-    overflow: hidden;
-}
-
-.card-preview img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center top;
-}
-
-.card-header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: linear-gradient(oklch(0% 0 0 / 0.75), transparent 85%);
-    backdrop-filter: blur(8px);
-    color: white;
-    padding: var(--space-1);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    z-index: 1;
-    min-height: 20px;
-}
-
-.base-model-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-left: 32px;
-}
-
-.card-actions {
-    display: flex;
-    gap: 8px;
-}
-
-.card-actions i {
-    cursor: pointer;
-    opacity: 0.8;
-    transition: opacity 0.2s ease;
-}
-
-.card-actions i:hover {
-    opacity: 1;
-}
-
-.card-footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: linear-gradient(transparent 15%, oklch(0% 0 0 / 0.75));
-    backdrop-filter: blur(8px);
-    color: white;
-    padding: var(--space-1);
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    min-height: 32px;
-    gap: var(--space-1);
-}
-
-.lora-count {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    background: rgba(255, 255, 255, 0.2);
-    padding: 2px 8px;
-    border-radius: var(--border-radius-xs);
-    font-size: 0.85em;
-    position: relative;
-}
-
-.lora-count.ready {
-    background: rgba(46, 204, 113, 0.3);
-}
-
-.lora-count.missing {
-    background: rgba(231, 76, 60, 0.3);
-}
-
-/* 响应式设计 */
-@media (max-width: 1400px) {
-    .recipe-grid {
-        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    }
-    
-    .recipe-card {
-        max-width: 240px;
-    }
-}
-
-@media (max-width: 768px) {
-    .recipe-grid {
-        grid-template-columns: minmax(260px, 1fr);
-    }
-    
-    .recipe-card {
-        max-width: 100%;
-    }
-} 

static/css/components/recipe-modal.css

@@ -18,6 +18,110 @@
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
+    width: calc(100% - 20px);
+}
+
+/* Editable content styles */
+.editable-content {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.editable-content.hide {
+    display: none;
+}
+
+.editable-content .content-text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.edit-icon {
+    background: none;
+    border: none;
+    color: var(--text-color);
+    opacity: 0;
+    cursor: pointer;
+    padding: 4px 8px;
+    margin-left: 8px;
+    border-radius: var(--border-radius-xs);
+    transition: all 0.2s;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.editable-content:hover .edit-icon {
+    opacity: 0.6;
+}
+
+.edit-icon:hover {
+    opacity: 1 !important;
+    background: var(--lora-surface);
+}
+
+/* Content editor styles */
+.content-editor {
+    display: none;
+    width: 100%;
+    padding: 4px 0;
+}
+
+.content-editor.active {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.content-editor input {
+    flex: 1;
+    background: var(--bg-color);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-xs);
+    padding: 6px 8px;
+    font-size: 1em;
+    color: var(--text-color);
+    min-width: 0;
+}
+
+.content-editor.tags-editor input {
+    font-size: 0.9em;
+}
+
+/* 删除不再需要的按钮样式 */
+.editor-actions {
+    display: none;
+}
+
+/* Special styling for tags content */
+.tags-content {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 8px;
+}
+
+.tags-display {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 6px;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.no-tags {
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.6;
+    font-style: italic;
 }
 
 /* Recipe Tags styles */
@@ -129,7 +233,14 @@
     justify-content: center;
 }
 
-.recipe-preview-container img {
+.recipe-preview-container img,
+.recipe-preview-container video {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+
+.recipe-preview-media {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
@@ -289,6 +400,27 @@
     gap: var(--space-1);
 }
 
+/* View LoRAs button */
+.view-loras-btn {
+    background: none;
+    border: none;
+    color: var(--text-color);
+    opacity: 0.7;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: var(--border-radius-xs);
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.view-loras-btn:hover {
+    opacity: 1;
+    background: var(--lora-surface);
+    color: var(--lora-accent);
+}
+
 #recipeLorasCount {
     font-size: 0.9em;
     color: var(--text-color);
@@ -309,6 +441,7 @@
     gap: 10px;
     overflow-y: auto;
     flex: 1;
+    padding-top: 4px; /* Add padding to prevent first item from being cut off when hovered */
 }
 
 .recipe-lora-item {
@@ -322,6 +455,14 @@
     will-change: transform;
     /* Create a new containing block for absolutely positioned descendants */
     transform: translateZ(0);
+    cursor: pointer; /* Make it clear the item is clickable */
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.recipe-lora-item:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border-color: var(--lora-accent);
 }
 
 .recipe-lora-item.exists-locally {
@@ -333,6 +474,12 @@
     border-left: 4px solid var(--lora-error);
 }
 
+.recipe-lora-item.is-deleted {
+    background: rgba(127, 127, 127, 0.05);
+    border-left: 4px solid #777;
+    opacity: 0.8;
+}
+
 .recipe-lora-thumbnail {
     width: 46px;
     height: 46px;
@@ -340,9 +487,19 @@
     border-radius: var(--border-radius-xs);
     overflow: hidden;
     background: var(--bg-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.recipe-lora-thumbnail img {
+.recipe-lora-thumbnail img,
+.recipe-lora-thumbnail video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.thumbnail-video {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -457,6 +614,170 @@
     font-size: 0.9em;
 }
 
+/* Deleted badge with reconnect functionality */
+.deleted-badge {
+    display: inline-flex;
+    align-items: center;
+    background: #777;
+    color: white;
+    padding: 3px 6px;
+    border-radius: var(--border-radius-xs);
+    font-size: 0.75em;
+    font-weight: 500;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.deleted-badge i {
+    margin-right: 4px;
+    font-size: 0.9em;
+}
+
+/* Add reconnect functionality styles */
+.deleted-badge.reconnectable {
+    position: relative;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.deleted-badge.reconnectable:hover {
+    background-color: var(--lora-accent);
+}
+
+.deleted-badge .reconnect-tooltip {
+    position: absolute;
+    display: none;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    padding: 8px 12px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: var(--z-overlay);
+    width: max-content;
+    max-width: 200px;
+    font-size: 0.85rem;
+    font-weight: normal;
+    top: calc(100% + 5px);
+    left: 0;
+    margin-left: -100px;
+}
+
+.deleted-badge.reconnectable:hover .reconnect-tooltip {
+    display: block;
+}
+
+/* LoRA reconnect container */
+.lora-reconnect-container {
+    display: none;
+    flex-direction: column;
+    background: var(--lora-surface);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    padding: 12px;
+    margin-top: 10px;
+    gap: 10px;
+}
+
+.lora-reconnect-container.active {
+    display: flex;
+}
+
+.reconnect-instructions {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.reconnect-instructions p {
+    margin: 0;
+    font-size: 0.95em;
+    font-weight: 500;
+    color: var(--text-color);
+}
+
+.reconnect-instructions small {
+    color: var(--text-color);
+    opacity: 0.7;
+    font-size: 0.85em;
+}
+
+.reconnect-instructions code {
+    background: rgba(0, 0, 0, 0.1);
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
+[data-theme="dark"] .reconnect-instructions code {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.reconnect-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.reconnect-input {
+    width: calc(100% - 20px);
+    padding: 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    background: var(--bg-color);
+    color: var(--text-color);
+    font-size: 0.9em;
+}
+
+.reconnect-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+}
+
+.reconnect-cancel-btn, 
+.reconnect-confirm-btn {
+    padding: 6px 12px;
+    border-radius: var(--border-radius-xs);
+    font-size: 0.85em;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s;
+}
+
+.reconnect-cancel-btn {
+    background: var(--bg-color);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+}
+
+.reconnect-confirm-btn {
+    background: var(--lora-accent);
+    color: white;
+}
+
+.reconnect-cancel-btn:hover {
+    background: var(--lora-surface);
+}
+
+.reconnect-confirm-btn:hover {
+    background: color-mix(in oklch, var(--lora-accent), black 10%);
+}
+
+/* Recipe status partial state */
+.recipe-status.partial {
+    background: rgba(127, 127, 127, 0.1);
+    color: #777;
+}
+
+/* 标题输入框特定的样式 */
+.title-input {
+    font-size: 1.2em !important; /* 调整为更合适的大小 */
+    line-height: 1.2;
+    font-weight: 500;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .recipe-top-section {
@@ -485,7 +806,8 @@
 
 /* Update the local-badge and missing-badge to be positioned within the badge-container */
 .badge-container .local-badge, 
-.badge-container .missing-badge {
+.badge-container .missing-badge,
+.badge-container .deleted-badge {
     position: static; /* Override absolute positioning */
     transform: none; /* Remove the transform */
 }
@@ -495,3 +817,46 @@
     position: fixed; /* Keep as fixed for Chrome */
     z-index: 100;
 }
+
+/* Add styles for missing LoRAs download feature */
+.recipe-status.missing {
+    position: relative;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.recipe-status.missing:hover {
+    background-color: rgba(var(--lora-warning-rgb, 255, 165, 0), 0.2);
+}
+
+.recipe-status.missing .missing-tooltip {
+    position: absolute;
+    display: none;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    padding: 8px 12px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: var(--z-overlay);
+    width: max-content;
+    max-width: 200px;
+    font-size: 0.85rem;
+    font-weight: normal;
+    margin-left: -100px;
+    margin-top: -65px;
+}
+
+.recipe-status.missing:hover .missing-tooltip {
+    display: block;
+}
+
+.recipe-status.clickable {
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: var(--border-radius-xs);
+}
+
+.recipe-status.clickable:hover {
+    background-color: rgba(var(--lora-warning-rgb, 255, 165, 0), 0.2);
+}

static/css/layout.css

@@ -38,6 +38,90 @@
     flex-wrap: nowrap;
 }
 
+/* Action button styling */
+.control-group {
+    position: relative;
+}
+
+.control-group button {
+    min-width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    border-radius: var(--border-radius-xs);
+    padding: 4px 10px;
+    border: 1px solid var(--border-color);
+    background: var(--card-bg);
+    color: var(--text-color);
+    font-size: 0.85em;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.control-group button:hover {
+    border-color: var(--lora-accent);
+    background: var(--bg-color);
+    transform: translateY(-1px);
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
+}
+
+.control-group button:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.control-group button i {
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+}
+
+.control-group button:hover i {
+    opacity: 1;
+}
+
+/* Active state for buttons that can be toggled */
+.control-group button.active {
+    background: var(--lora-accent);
+    color: white;
+    border-color: var(--lora-accent);
+}
+
+/* Select dropdown styling */
+.control-group select {
+    min-width: 100px;
+    padding: 4px 26px 4px 10px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    font-size: 0.85em;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 6px center;
+    background-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.control-group select:hover {
+    border-color: var(--lora-accent);
+    background-color: var(--bg-color);
+    transform: translateY(-1px);
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
+}
+
+.control-group select:focus {
+    outline: none;
+    border-color: var(--lora-accent);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent) / 0.15);
+}
+
 /* Ensure hidden class works properly */
 .hidden {
     display: none !important;
@@ -86,12 +170,14 @@
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .toggle-folders-btn:hover {
     background: var(--lora-accent);
     color: white;
     transform: translateY(-2px);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
 }
 
 .toggle-folders-btn i {
@@ -101,8 +187,9 @@
 /* Icon-only button style */
 .icon-only {
     min-width: unset !important;
-    width: 36px !important;
+    width: 32px !important;
     padding: 0 !important;
+    height: 32px !important;
 }
 
 /* Rotate icon when folders are collapsed */
@@ -133,16 +220,25 @@
     cursor: pointer;
     padding: 2px 8px;
     margin: 2px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius-xs);
     display: inline-block;
     line-height: 1.2;
     font-size: 14px;
+    background-color: var(--card-bg);
+    transition: all 0.2s ease;
+}
+
+.tag:hover {
+    border-color: var(--lora-accent);
+    background-color: oklch(var(--lora-accent) / 0.1);
+    transform: translateY(-1px);
 }
 
 .tag.active {
-    background-color: #007bff;
+    background-color: var(--lora-accent);
     color: white;
+    border-color: var(--lora-accent);
 }
 
 /* Back to Top Button */
@@ -155,7 +251,7 @@
     border-radius: 50%;
     background: var(--card-bg);
     border: 1px solid var(--border-color);
-    color: var (--text-color);
+    color: var(--text-color);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -165,6 +261,7 @@
     transform: translateY(10px);
     transition: all 0.3s ease;
     z-index: var(--z-overlay);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
 .back-to-top.visible {
@@ -174,9 +271,10 @@
 }
 
 .back-to-top:hover {
-    background: var (--lora-accent);
+    background: var(--lora-accent);
     color: white;
     transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 @media (max-width: 768px) {
@@ -203,19 +301,22 @@
     }
     
     .toggle-folders-btn:hover {
-        transform: none; /* 移动端下禁用hover效果 */
+        transform: none; /* Disable hover effects on mobile */
+    }
+
+    .control-group button:hover {
+        transform: none; /* Disable hover effects on mobile */
+    }
+
+    .control-group select:hover {
+        transform: none; /* Disable hover effects on mobile */
+    }
+
+    .tag:hover {
+        transform: none; /* Disable hover effects on mobile */
     }
 
     .back-to-top {
         bottom: 60px; /* Give some extra space from bottom on mobile */
     }
 }
-
-/* Standardize button widths in controls */
-.control-group button {
-    min-width: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-}

static/css/style.css

@@ -18,6 +18,7 @@
 @import 'components/search-filter.css';
 @import 'components/bulk.css';
 @import 'components/shared.css';
+@import 'components/filter-indicator.css';
 
 .initialization-notice {
     display: flex;

static/js/api/loraApi.js

@@ -4,6 +4,7 @@ import { createLoraCard } from '../components/LoraCard.js';
 import { initializeInfiniteScroll } from '../utils/infiniteScroll.js';
 import { showDeleteModal } from '../utils/modalUtils.js';
 import { toggleFolder } from '../utils/uiHelpers.js';
+import { getSessionItem } from '../utils/storageHelpers.js';
 
 export async function loadMoreLoras(resetPage = false, updateFolders = false) {
     const pageState = getCurrentPageState();
@@ -57,6 +58,28 @@ export async function loadMoreLoras(resetPage = false, updateFolders = false) {
             }
         }
 
+        // Check for recipe-based filtering parameters from session storage
+        const filterLoraHash = getSessionItem('recipe_to_lora_filterLoraHash');
+        const filterLoraHashes = getSessionItem('recipe_to_lora_filterLoraHashes');
+
+        console.log('Filter Lora Hash:', filterLoraHash);
+        console.log('Filter Lora Hashes:', 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(`/api/loras?${params}`);
         if (!response.ok) {
             throw new Error(`Failed to fetch loras: ${response.statusText}`);

static/js/components/LoraCard.js

@@ -1,6 +1,6 @@
 import { showToast } from '../utils/uiHelpers.js';
 import { state } from '../state/index.js';
-import { showLoraModal } from './LoraModal.js';
+import { showLoraModal } from './loraModal/index.js';
 import { bulkManager } from '../managers/BulkManager.js';
 import { NSFW_LEVELS } from '../utils/constants.js';
 
@@ -57,10 +57,15 @@ export function createLoraCard(lora) {
         nsfwText = "R-rated Content";
     }
 
+    // Check if autoplayOnHover is enabled for video previews
+    const autoplayOnHover = state.global.settings.autoplayOnHover || false;
+    const isVideo = previewUrl.endsWith('.mp4');
+    const videoAttrs = autoplayOnHover ? 'controls muted loop' : 'controls autoplay muted loop';
+
     card.innerHTML = `
         <div class="card-preview ${shouldBlur ? 'blurred' : ''}">
-            ${previewUrl.endsWith('.mp4') ? 
-                `<video controls autoplay muted loop>
+            ${isVideo ? 
+                `<video ${videoAttrs}>
                     <source src="${versionedPreviewUrl}" type="video/mp4">
                 </video>` :
                 `<img src="${versionedPreviewUrl}" alt="${lora.model_name}">`
@@ -246,6 +251,26 @@ export function createLoraCard(lora) {
             actionGroup.style.display = 'none';
         });
     }
+    
+    // Add autoplayOnHover handlers for video elements if needed
+    const videoElement = card.querySelector('video');
+    if (videoElement && autoplayOnHover) {
+        const cardPreview = card.querySelector('.card-preview');
+        
+        // Remove autoplay attribute and pause initially
+        videoElement.removeAttribute('autoplay');
+        videoElement.pause();
+        
+        // Add mouse events to trigger play/pause
+        cardPreview.addEventListener('mouseenter', () => {
+            videoElement.play();
+        });
+        
+        cardPreview.addEventListener('mouseleave', () => {
+            videoElement.pause();
+            videoElement.currentTime = 0;
+        });
+    }
 
     return card;
 }

static/js/components/LoraModal.js

@@ -1,7 +1,7 @@
 import { showToast } from '../utils/uiHelpers.js';
 import { state } from '../state/index.js';
 import { modalManager } from '../managers/ModalManager.js';
-import { NSFW_LEVELS } from '../utils/constants.js';
+import { NSFW_LEVELS, BASE_MODELS } from '../utils/constants.js';
 
 export function showLoraModal(lora) {
     const escapedWords = lora.civitai?.trainedWords?.length ? 
@@ -29,9 +29,11 @@ export function showLoraModal(lora) {
                         </div>
                         <div class="info-item">
                             <label>File Name</label>
-                            <div class="file-name-wrapper" onclick="copyFileName('${lora.file_name}')">
-                                <span id="file-name">${lora.file_name || 'N/A'}</span>
-                                <i class="fas fa-copy" title="Copy file name"></i>
+                            <div class="file-name-wrapper">
+                                <span id="file-name" class="file-name-content">${lora.file_name || 'N/A'}</span>
+                                <button class="edit-file-name-btn" title="Edit file name">
+                                    <i class="fas fa-pencil-alt"></i>
+                                </button>
                             </div>
                         </div>
                         <div class="info-item location-size">
@@ -43,7 +45,12 @@ export function showLoraModal(lora) {
                         <div class="info-item base-size">
                             <div class="base-wrapper">
                                 <label>Base Model</label>
-                                <span>${lora.base_model || 'N/A'}</span>
+                                <div class="base-model-display">
+                                    <span class="base-model-content">${lora.base_model || 'N/A'}</span>
+                                    <button class="edit-base-model-btn" title="Edit base model">
+                                        <i class="fas fa-pencil-alt"></i>
+                                    </button>
+                                </div>
                             </div>
                             <div class="size-wrapper">
                                 <label>Size</label>
@@ -124,6 +131,8 @@ export function showLoraModal(lora) {
     setupTagTooltip();
     setupTriggerWordsEditMode();
     setupModelNameEditing();
+    setupBaseModelEditing();
+    setupFileNameEditing();
     
     // If we have a model ID but no description, fetch it
     if (lora.civitai?.modelId && !lora.modelDescription) {
@@ -202,61 +211,165 @@ function renderShowcaseContent(images) {
                         nsfwText = "R-rated Content";
                     }
                     
-                    if (img.type === 'video') {
-                        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-src="${img.url}"
-                                       class="lazy ${shouldBlur ? 'blurred' : ''}">
-                                    <source data-src="${img.url}" 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>
-                                ` : ''}
-                            </div>
-                        `;
-                    }
-                    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-src="${img.url}" 
-                                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>
+                    // 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;
+                    
+                    // If no metadata available, show a message
+                    if (!hasParams && !hasPrompts) {
+                        const metadataPanel = `
+                            <div class="image-metadata-panel">
+                                <div class="metadata-content">
+                                    <div class="no-metadata-message">
+                                        <i class="fas fa-info-circle"></i>
+                                        <span>No generation parameters available</span>
                                     </div>
                                 </div>
-                            ` : ''}
+                            </div>
+                        `;
+                        
+                        if (img.type === 'video') {
+                            return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+                        }
+                        return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+                    }
+                    
+                    // Create a data attribute with the prompt for copying instead of trying to handle it in the onclick
+                    // This avoids issues with quotes and special characters
+                    const promptIndex = Math.random().toString(36).substring(2, 15);
+                    const negPromptIndex = Math.random().toString(36).substring(2, 15);
+                    
+                    // Create parameter tags HTML
+                    const paramTags = `
+                        <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>
                     `;
+                    
+                    // Metadata panel HTML
+                    const metadataPanel = `
+                        <div class="image-metadata-panel">
+                            <div class="metadata-content">
+                                ${hasParams ? paramTags : ''}
+                                ${!hasParams && !hasPrompts ? `
+                                <div class="no-metadata-message">
+                                    <i class="fas fa-info-circle"></i>
+                                    <span>No generation parameters available</span>
+                                </div>
+                                ` : ''}
+                                ${prompt ? `
+                                <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>
+                                ` : ''}
+                                ${negativePrompt ? `
+                                <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>
+                                ` : ''}
+                            </div>
+                        </div>
+                    `;
+                    
+                    if (img.type === 'video') {
+                        return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+                    }
+                    return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
                 }).join('')}
             </div>
         </div>
     `;
 }
 
+// Helper function to generate video wrapper HTML
+function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel) {
+    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-src="${img.url}"
+                class="lazy ${shouldBlur ? 'blurred' : ''}">
+                <source data-src="${img.url}" 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>
+    `;
+}
+
+// Helper function to generate image wrapper HTML
+function generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel) {
+    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-src="${img.url}" 
+                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>
+    `;
+}
+
 // New function to handle tab switching
 function setupTabSwitching() {
     const tabButtons = document.querySelectorAll('.showcase-tabs .tab-btn');
@@ -620,13 +733,74 @@ export function toggleShowcase(element) {
         
         // 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);
+        }
     }
 }
 
+// Function to initialize metadata panel interactions
+function initMetadataPanelHandlers(container) {
+    // Find all media wrappers
+    const mediaWrappers = container.querySelectorAll('.media-wrapper');
+    
+    mediaWrappers.forEach(wrapper => {
+        // Get the metadata panel
+        const metadataPanel = wrapper.querySelector('.image-metadata-panel');
+        if (!metadataPanel) return;
+        
+        // Prevent events from the metadata panel from bubbling
+        metadataPanel.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+        
+        // Handle copy prompt button clicks
+        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(); // Prevent bubbling
+                
+                if (!promptElement) return;
+                
+                try {
+                    await navigator.clipboard.writeText(promptElement.textContent);
+                    showToast('Prompt copied to clipboard', 'success');
+                } catch (err) {
+                    console.error('Copy failed:', err);
+                    showToast('Copy failed', 'error');
+                }
+            });
+        });
+        
+        // Prevent scrolling in the metadata panel from scrolling the whole modal
+        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 });
+    });
+}
+
 // New function to initialize blur toggle handlers for showcase images/videos
 function initNsfwBlurHandlers(container) {
     // Handle toggle blur buttons
@@ -1225,3 +1399,335 @@ function setupModelNameEditing() {
         }
     });
 }
+
+// Add save model base model function
+window.saveBaseModel = async function(filePath, originalValue) {
+    const baseModelElement = document.querySelector('.base-model-content');
+    const newBaseModel = baseModelElement.textContent.trim();
+    
+    // Only save if the value has actually changed
+    if (newBaseModel === originalValue) {
+        return; // No change, no need to save
+    }
+    
+    try {
+        await saveModelMetadata(filePath, { base_model: newBaseModel });
+        
+        // Update the corresponding lora card's dataset
+        const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+        if (loraCard) {
+            loraCard.dataset.base_model = newBaseModel;
+        }
+        
+        showToast('Base model updated successfully', 'success');
+    } catch (error) {
+        showToast('Failed to update base model', 'error');
+    }
+};
+
+// New function to handle base model editing
+function setupBaseModelEditing() {
+    const baseModelContent = document.querySelector('.base-model-content');
+    const editBtn = document.querySelector('.edit-base-model-btn');
+    
+    if (!baseModelContent || !editBtn) return;
+    
+    // Show edit button on hover
+    const baseModelDisplay = document.querySelector('.base-model-display');
+    baseModelDisplay.addEventListener('mouseenter', () => {
+        editBtn.classList.add('visible');
+    });
+    
+    baseModelDisplay.addEventListener('mouseleave', () => {
+        if (!baseModelDisplay.classList.contains('editing')) {
+            editBtn.classList.remove('visible');
+        }
+    });
+    
+    // Handle edit button click
+    editBtn.addEventListener('click', () => {
+        baseModelDisplay.classList.add('editing');
+        
+        // Store the original value to check for changes later
+        const originalValue = baseModelContent.textContent.trim();
+        
+        // Create dropdown selector to replace the base model content
+        const currentValue = originalValue;
+        const dropdown = document.createElement('select');
+        dropdown.className = 'base-model-selector';
+        
+        // Flag to track if a change was made
+        let valueChanged = false;
+        
+        // Add options from BASE_MODELS constants
+        const baseModelCategories = {
+            'Stable Diffusion 1.x': [BASE_MODELS.SD_1_4, BASE_MODELS.SD_1_5, BASE_MODELS.SD_1_5_LCM, BASE_MODELS.SD_1_5_HYPER],
+            'Stable Diffusion 2.x': [BASE_MODELS.SD_2_0, BASE_MODELS.SD_2_1],
+            'Stable Diffusion 3.x': [BASE_MODELS.SD_3, BASE_MODELS.SD_3_5, BASE_MODELS.SD_3_5_MEDIUM, BASE_MODELS.SD_3_5_LARGE, BASE_MODELS.SD_3_5_LARGE_TURBO],
+            'SDXL': [BASE_MODELS.SDXL, BASE_MODELS.SDXL_LIGHTNING, BASE_MODELS.SDXL_HYPER],
+            'Video Models': [BASE_MODELS.SVD, BASE_MODELS.WAN_VIDEO, BASE_MODELS.HUNYUAN_VIDEO],
+            'Other Models': [
+                BASE_MODELS.FLUX_1_D, BASE_MODELS.FLUX_1_S, BASE_MODELS.AURAFLOW,
+                BASE_MODELS.PIXART_A, BASE_MODELS.PIXART_E, BASE_MODELS.HUNYUAN_1,
+                BASE_MODELS.LUMINA, BASE_MODELS.KOLORS, BASE_MODELS.NOOBAI,
+                BASE_MODELS.ILLUSTRIOUS, BASE_MODELS.PONY, BASE_MODELS.UNKNOWN
+            ]
+        };
+        
+        // Create option groups for better organization
+        Object.entries(baseModelCategories).forEach(([category, models]) => {
+            const group = document.createElement('optgroup');
+            group.label = category;
+            
+            models.forEach(model => {
+                const option = document.createElement('option');
+                option.value = model;
+                option.textContent = model;
+                option.selected = model === currentValue;
+                group.appendChild(option);
+            });
+            
+            dropdown.appendChild(group);
+        });
+        
+        // Replace content with dropdown
+        baseModelContent.style.display = 'none';
+        baseModelDisplay.insertBefore(dropdown, editBtn);
+        
+        // Hide edit button during editing
+        editBtn.style.display = 'none';
+        
+        // Focus the dropdown
+        dropdown.focus();
+        
+        // Handle dropdown change
+        dropdown.addEventListener('change', function() {
+            const selectedModel = this.value;
+            baseModelContent.textContent = selectedModel;
+            
+            // Mark that a change was made if the value differs from original
+            if (selectedModel !== originalValue) {
+                valueChanged = true;
+            } else {
+                valueChanged = false;
+            }
+        });
+        
+        // Function to save changes and exit edit mode
+        const saveAndExit = function() {
+            // Check if dropdown still exists and remove it
+            if (dropdown && dropdown.parentNode === baseModelDisplay) {
+                baseModelDisplay.removeChild(dropdown);
+            }
+            
+            // Show the content and edit button
+            baseModelContent.style.display = '';
+            editBtn.style.display = '';
+            
+            // Remove editing class
+            baseModelDisplay.classList.remove('editing');
+            
+            // Only save if the value has actually changed
+            if (valueChanged || baseModelContent.textContent.trim() !== originalValue) {
+                // Get file path for saving
+                const filePath = document.querySelector('#loraModal .modal-content')
+                    .querySelector('.file-path').textContent + 
+                    document.querySelector('#loraModal .modal-content')
+                    .querySelector('#file-name').textContent + '.safetensors';
+                
+                // Save the changes, passing the original value for comparison
+                saveBaseModel(filePath, originalValue);
+            }
+            
+            // Remove this event listener
+            document.removeEventListener('click', outsideClickHandler);
+        };
+        
+        // Handle outside clicks to save and exit
+        const outsideClickHandler = function(e) {
+            // If click is outside the dropdown and base model display
+            if (!baseModelDisplay.contains(e.target)) {
+                saveAndExit();
+            }
+        };
+        
+        // Add delayed event listener for outside clicks
+        setTimeout(() => {
+            document.addEventListener('click', outsideClickHandler);
+        }, 0);
+        
+        // Also handle dropdown blur event
+        dropdown.addEventListener('blur', function(e) {
+            // Only save if the related target is not the edit button or inside the baseModelDisplay
+            if (!baseModelDisplay.contains(e.relatedTarget)) {
+                saveAndExit();
+            }
+        });
+    });
+}
+
+// New function to handle file name editing
+function setupFileNameEditing() {
+    const fileNameContent = document.querySelector('.file-name-content');
+    const editBtn = document.querySelector('.edit-file-name-btn');
+    
+    if (!fileNameContent || !editBtn) return;
+    
+    // Show edit button on hover
+    const fileNameWrapper = document.querySelector('.file-name-wrapper');
+    fileNameWrapper.addEventListener('mouseenter', () => {
+        editBtn.classList.add('visible');
+    });
+    
+    fileNameWrapper.addEventListener('mouseleave', () => {
+        if (!fileNameWrapper.classList.contains('editing')) {
+            editBtn.classList.remove('visible');
+        }
+    });
+    
+    // Handle edit button click
+    editBtn.addEventListener('click', () => {
+        fileNameWrapper.classList.add('editing');
+        fileNameContent.setAttribute('contenteditable', 'true');
+        fileNameContent.focus();
+        
+        // Store original value for comparison later
+        fileNameContent.dataset.originalValue = fileNameContent.textContent.trim();
+        
+        // Place cursor at the end
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.selectNodeContents(fileNameContent);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        
+        editBtn.classList.add('visible');
+    });
+    
+    // Handle keyboard events in edit mode
+    fileNameContent.addEventListener('keydown', function(e) {
+        if (!this.getAttribute('contenteditable')) return;
+        
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.blur(); // Trigger save on Enter
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            // Restore original value
+            this.textContent = this.dataset.originalValue;
+            exitEditMode();
+        }
+    });
+    
+    // Handle input validation
+    fileNameContent.addEventListener('input', function() {
+        if (!this.getAttribute('contenteditable')) return;
+        
+        // Replace invalid characters for filenames
+        const invalidChars = /[\\/:*?"<>|]/g;
+        if (invalidChars.test(this.textContent)) {
+            const cursorPos = window.getSelection().getRangeAt(0).startOffset;
+            this.textContent = this.textContent.replace(invalidChars, '');
+            
+            // Restore cursor position
+            const range = document.createRange();
+            const sel = window.getSelection();
+            const newPos = Math.min(cursorPos, this.textContent.length);
+            
+            if (this.firstChild) {
+                range.setStart(this.firstChild, newPos);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+            
+            showToast('Invalid characters removed from filename', 'warning');
+        }
+    });
+    
+    // Handle focus out - save changes
+    fileNameContent.addEventListener('blur', async function() {
+        if (!this.getAttribute('contenteditable')) return;
+        
+        const newFileName = this.textContent.trim();
+        const originalValue = this.dataset.originalValue;
+        
+        // Basic validation
+        if (!newFileName) {
+            // Restore original value if empty
+            this.textContent = originalValue;
+            showToast('File name cannot be empty', 'error');
+            exitEditMode();
+            return;
+        }
+        
+        if (newFileName === originalValue) {
+            // No changes, just exit edit mode
+            exitEditMode();
+            return;
+        }
+        
+        try {
+            // Get the full file path
+            const filePath = document.querySelector('#loraModal .modal-content')
+                .querySelector('.file-path').textContent + originalValue + '.safetensors';
+                
+            // Call API to rename the file
+            const response = await fetch('/api/rename_lora', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    file_path: filePath,
+                    new_file_name: newFileName
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                showToast('File name updated successfully', 'success');
+                
+                // Update card in the gallery
+                const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+                if (loraCard) {
+                    // Update the card's filepath attribute to the new path
+                    loraCard.dataset.filepath = result.new_file_path;
+                    loraCard.dataset.file_name = newFileName;
+                    
+                    // Update the filename display in the card
+                    const cardFileName = loraCard.querySelector('.card-filename');
+                    if (cardFileName) {
+                        cardFileName.textContent = newFileName;
+                    }
+                }
+                
+                // Handle the case where we need to reload the page
+                if (result.reload_required) {
+                    showToast('Reloading page to apply changes...', 'info');
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1500);
+                }
+            } else {
+                // Show error and restore original filename
+                showToast(result.error || 'Failed to update file name', 'error');
+                this.textContent = originalValue;
+            }
+        } catch (error) {
+            console.error('Error saving filename:', error);
+            showToast('Failed to update file name', 'error');
+            this.textContent = originalValue;
+        } finally {
+            exitEditMode();
+        }
+    });
+    
+    function exitEditMode() {
+        fileNameContent.removeAttribute('contenteditable');
+        fileNameWrapper.classList.remove('editing');
+        editBtn.classList.remove('visible');
+    }
+}

static/js/components/RecipeCard.js

@@ -25,7 +25,7 @@ class RecipeCard {
         const lorasCount = loras.length;
         
         // Check if all LoRAs are available in the library
-        const missingLorasCount = loras.filter(lora => !lora.inLibrary).length;
+        const missingLorasCount = loras.filter(lora => !lora.inLibrary && !lora.isDeleted).length;
         const allLorasAvailable = missingLorasCount === 0 && lorasCount > 0;
         
         // Ensure file_url exists, fallback to file_path if needed
@@ -96,22 +96,24 @@ class RecipeCard {
     
     copyRecipeSyntax() {
         try {
-            // Generate recipe syntax in the format <lora:file_name:strength> separated by spaces
-            const loras = this.recipe.loras || [];
-            if (loras.length === 0) {
-                showToast('No LoRAs in this recipe to copy', 'warning');
+            // Get recipe ID
+            const recipeId = this.recipe.id;
+            if (!recipeId) {
+                showToast('Cannot copy recipe syntax: Missing recipe ID', 'error');
                 return;
             }
+
             
-            const syntax = loras.map(lora => {
-                // Use file_name if available, otherwise use empty placeholder
-                const fileName = lora.file_name || '[missing-lora]';
-                const strength = lora.strength || 1.0;
-                return `<lora:${fileName}:${strength}>`;
-            }).join(' ');
-            
-            // Copy to clipboard
-            navigator.clipboard.writeText(syntax)
+            // Fallback if button not found
+            fetch(`/api/recipe/${recipeId}/syntax`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success && data.syntax) {
+                        return navigator.clipboard.writeText(data.syntax);
+                    } else {
+                        throw new Error(data.error || 'No syntax returned');
+                    }
+                })
                 .then(() => {
                     showToast('Recipe syntax copied to clipboard', 'success');
                 })

static/js/components/loraModal/ModelDescription.js

@@ -0,0 +1,102 @@
+/**
+ * ModelDescription.js
+ * 处理LoRA模型描述相关的功能模块
+ */
+import { showToast } from '../../utils/uiHelpers.js';
+
+/**
+ * 设置标签页切换功能
+ */
+export function setupTabSwitching() {
+    const tabButtons = document.querySelectorAll('.showcase-tabs .tab-btn');
+    
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            // Remove active class from all tabs
+            document.querySelectorAll('.showcase-tabs .tab-btn').forEach(btn => 
+                btn.classList.remove('active')
+            );
+            document.querySelectorAll('.tab-content .tab-pane').forEach(tab => 
+                tab.classList.remove('active')
+            );
+            
+            // Add active class to clicked tab
+            button.classList.add('active');
+            const tabId = `${button.dataset.tab}-tab`;
+            document.getElementById(tabId).classList.add('active');
+            
+            // If switching to description tab, make sure content is properly sized
+            if (button.dataset.tab === 'description') {
+                const descriptionContent = document.querySelector('.model-description-content');
+                if (descriptionContent) {
+                    const hasContent = descriptionContent.innerHTML.trim() !== '';
+                    document.querySelector('.model-description-loading')?.classList.add('hidden');
+                    
+                    // If no content, show a message
+                    if (!hasContent) {
+                        descriptionContent.innerHTML = '<div class="no-description">No model description available</div>';
+                        descriptionContent.classList.remove('hidden');
+                    }
+                }
+            }
+        });
+    });
+}
+
+/**
+ * 加载模型描述
+ * @param {string} modelId - 模型ID
+ * @param {string} filePath - 文件路径
+ */
+export async function loadModelDescription(modelId, filePath) {
+    try {
+        const descriptionContainer = document.querySelector('.model-description-content');
+        const loadingElement = document.querySelector('.model-description-loading');
+        
+        if (!descriptionContainer || !loadingElement) return;
+        
+        // Show loading indicator
+        loadingElement.classList.remove('hidden');
+        descriptionContainer.classList.add('hidden');
+        
+        // Try to get model description from API
+        const response = await fetch(`/api/lora-model-description?model_id=${modelId}&file_path=${encodeURIComponent(filePath)}`);
+        
+        if (!response.ok) {
+            throw new Error(`Failed to fetch model description: ${response.statusText}`);
+        }
+        
+        const data = await response.json();
+        
+        if (data.success && data.description) {
+            // Update the description content
+            descriptionContainer.innerHTML = data.description;
+            
+            // Process any links in the description to open in new tab
+            const links = descriptionContainer.querySelectorAll('a');
+            links.forEach(link => {
+                link.setAttribute('target', '_blank');
+                link.setAttribute('rel', 'noopener noreferrer');
+            });
+            
+            // Show the description and hide loading indicator
+            descriptionContainer.classList.remove('hidden');
+            loadingElement.classList.add('hidden');
+        } else {
+            throw new Error(data.error || 'No description available');
+        }
+    } catch (error) {
+        console.error('Error loading model description:', error);
+        const loadingElement = document.querySelector('.model-description-loading');
+        if (loadingElement) {
+            loadingElement.innerHTML = `<div class="error-message">Failed to load model description. ${error.message}</div>`;
+        }
+        
+        // Show empty state message in the description container
+        const descriptionContainer = document.querySelector('.model-description-content');
+        if (descriptionContainer) {
+            descriptionContainer.innerHTML = '<div class="no-description">No model description available</div>';
+            descriptionContainer.classList.remove('hidden');
+        }
+    }
+}

static/js/components/loraModal/ModelMetadata.js

@@ -0,0 +1,493 @@
+/**
+ * ModelMetadata.js
+ * 处理LoRA模型元数据编辑相关的功能模块
+ */
+import { showToast } from '../../utils/uiHelpers.js';
+import { BASE_MODELS } from '../../utils/constants.js';
+
+/**
+ * 保存模型元数据到服务器
+ * @param {string} filePath - 文件路径
+ * @param {Object} data - 要保存的数据
+ * @returns {Promise} 保存操作的Promise
+ */
+export async function saveModelMetadata(filePath, data) {
+    const response = await fetch('/loras/api/save-metadata', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            file_path: filePath,
+            ...data
+        })
+    });
+
+    if (!response.ok) {
+        throw new Error('Failed to save metadata');
+    }
+    
+    return response.json();
+}
+
+/**
+ * 设置模型名称编辑功能
+ */
+export function setupModelNameEditing() {
+    const modelNameContent = document.querySelector('.model-name-content');
+    const editBtn = document.querySelector('.edit-model-name-btn');
+    
+    if (!modelNameContent || !editBtn) return;
+    
+    // Show edit button on hover
+    const modelNameHeader = document.querySelector('.model-name-header');
+    modelNameHeader.addEventListener('mouseenter', () => {
+        editBtn.classList.add('visible');
+    });
+    
+    modelNameHeader.addEventListener('mouseleave', () => {
+        if (!modelNameContent.getAttribute('data-editing')) {
+            editBtn.classList.remove('visible');
+        }
+    });
+    
+    // Handle edit button click
+    editBtn.addEventListener('click', () => {
+        modelNameContent.setAttribute('data-editing', 'true');
+        modelNameContent.focus();
+        
+        // Place cursor at the end
+        const range = document.createRange();
+        const sel = window.getSelection();
+        if (modelNameContent.childNodes.length > 0) {
+            range.setStart(modelNameContent.childNodes[0], modelNameContent.textContent.length);
+            range.collapse(true);
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+        
+        editBtn.classList.add('visible');
+    });
+    
+    // Handle focus out
+    modelNameContent.addEventListener('blur', function() {
+        this.removeAttribute('data-editing');
+        editBtn.classList.remove('visible');
+        
+        if (this.textContent.trim() === '') {
+            // Restore original model name if empty
+            const filePath = document.querySelector('#loraModal .modal-content')
+                .querySelector('.file-path').textContent + 
+                document.querySelector('#loraModal .modal-content')
+                .querySelector('#file-name').textContent + '.safetensors';
+            const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+            if (loraCard) {
+                this.textContent = loraCard.dataset.model_name;
+            }
+        }
+    });
+    
+    // Handle enter key
+    modelNameContent.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const filePath = document.querySelector('#loraModal .modal-content')
+                .querySelector('.file-path').textContent + 
+                document.querySelector('#loraModal .modal-content')
+                .querySelector('#file-name').textContent + '.safetensors';
+            saveModelName(filePath);
+            this.blur();
+        }
+    });
+    
+    // Limit model name length
+    modelNameContent.addEventListener('input', function() {
+        // Limit model name length
+        if (this.textContent.length > 100) {
+            this.textContent = this.textContent.substring(0, 100);
+            // Place cursor at the end
+            const range = document.createRange();
+            const sel = window.getSelection();
+            range.setStart(this.childNodes[0], 100);
+            range.collapse(true);
+            sel.removeAllRanges();
+            sel.addRange(range);
+            
+            showToast('Model name is limited to 100 characters', 'warning');
+        }
+    });
+}
+
+/**
+ * 保存模型名称
+ * @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
+        const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+        if (loraCard) {
+            loraCard.dataset.model_name = newModelName;
+            const titleElement = loraCard.querySelector('.card-title');
+            if (titleElement) {
+                titleElement.textContent = newModelName;
+            }
+        }
+        
+        showToast('Model name updated successfully', 'success');
+        
+        // Reload the page to reflect the sorted order
+        setTimeout(() => {
+            window.location.reload();
+        }, 1500);
+    } catch (error) {
+        showToast('Failed to update model name', 'error');
+    }
+}
+
+/**
+ * 设置基础模型编辑功能
+ */
+export function setupBaseModelEditing() {
+    const baseModelContent = document.querySelector('.base-model-content');
+    const editBtn = document.querySelector('.edit-base-model-btn');
+    
+    if (!baseModelContent || !editBtn) return;
+    
+    // Show edit button on hover
+    const baseModelDisplay = document.querySelector('.base-model-display');
+    baseModelDisplay.addEventListener('mouseenter', () => {
+        editBtn.classList.add('visible');
+    });
+    
+    baseModelDisplay.addEventListener('mouseleave', () => {
+        if (!baseModelDisplay.classList.contains('editing')) {
+            editBtn.classList.remove('visible');
+        }
+    });
+    
+    // Handle edit button click
+    editBtn.addEventListener('click', () => {
+        baseModelDisplay.classList.add('editing');
+        
+        // Store the original value to check for changes later
+        const originalValue = baseModelContent.textContent.trim();
+        
+        // Create dropdown selector to replace the base model content
+        const currentValue = originalValue;
+        const dropdown = document.createElement('select');
+        dropdown.className = 'base-model-selector';
+        
+        // Flag to track if a change was made
+        let valueChanged = false;
+        
+        // Add options from BASE_MODELS constants
+        const baseModelCategories = {
+            'Stable Diffusion 1.x': [BASE_MODELS.SD_1_4, BASE_MODELS.SD_1_5, BASE_MODELS.SD_1_5_LCM, BASE_MODELS.SD_1_5_HYPER],
+            'Stable Diffusion 2.x': [BASE_MODELS.SD_2_0, BASE_MODELS.SD_2_1],
+            'Stable Diffusion 3.x': [BASE_MODELS.SD_3, BASE_MODELS.SD_3_5, BASE_MODELS.SD_3_5_MEDIUM, BASE_MODELS.SD_3_5_LARGE, BASE_MODELS.SD_3_5_LARGE_TURBO],
+            'SDXL': [BASE_MODELS.SDXL, BASE_MODELS.SDXL_LIGHTNING, BASE_MODELS.SDXL_HYPER],
+            'Video Models': [BASE_MODELS.SVD, BASE_MODELS.WAN_VIDEO, BASE_MODELS.HUNYUAN_VIDEO],
+            'Other Models': [
+                BASE_MODELS.FLUX_1_D, BASE_MODELS.FLUX_1_S, BASE_MODELS.AURAFLOW,
+                BASE_MODELS.PIXART_A, BASE_MODELS.PIXART_E, BASE_MODELS.HUNYUAN_1,
+                BASE_MODELS.LUMINA, BASE_MODELS.KOLORS, BASE_MODELS.NOOBAI,
+                BASE_MODELS.ILLUSTRIOUS, BASE_MODELS.PONY, BASE_MODELS.UNKNOWN
+            ]
+        };
+        
+        // Create option groups for better organization
+        Object.entries(baseModelCategories).forEach(([category, models]) => {
+            const group = document.createElement('optgroup');
+            group.label = category;
+            
+            models.forEach(model => {
+                const option = document.createElement('option');
+                option.value = model;
+                option.textContent = model;
+                option.selected = model === currentValue;
+                group.appendChild(option);
+            });
+            
+            dropdown.appendChild(group);
+        });
+        
+        // Replace content with dropdown
+        baseModelContent.style.display = 'none';
+        baseModelDisplay.insertBefore(dropdown, editBtn);
+        
+        // Hide edit button during editing
+        editBtn.style.display = 'none';
+        
+        // Focus the dropdown
+        dropdown.focus();
+        
+        // Handle dropdown change
+        dropdown.addEventListener('change', function() {
+            const selectedModel = this.value;
+            baseModelContent.textContent = selectedModel;
+            
+            // Mark that a change was made if the value differs from original
+            if (selectedModel !== originalValue) {
+                valueChanged = true;
+            } else {
+                valueChanged = false;
+            }
+        });
+        
+        // Function to save changes and exit edit mode
+        const saveAndExit = function() {
+            // Check if dropdown still exists and remove it
+            if (dropdown && dropdown.parentNode === baseModelDisplay) {
+                baseModelDisplay.removeChild(dropdown);
+            }
+            
+            // Show the content and edit button
+            baseModelContent.style.display = '';
+            editBtn.style.display = '';
+            
+            // Remove editing class
+            baseModelDisplay.classList.remove('editing');
+            
+            // Only save if the value has actually changed
+            if (valueChanged || baseModelContent.textContent.trim() !== originalValue) {
+                // Get file path for saving
+                const filePath = document.querySelector('#loraModal .modal-content')
+                    .querySelector('.file-path').textContent + 
+                    document.querySelector('#loraModal .modal-content')
+                    .querySelector('#file-name').textContent + '.safetensors';
+                
+                // Save the changes, passing the original value for comparison
+                saveBaseModel(filePath, originalValue);
+            }
+            
+            // Remove this event listener
+            document.removeEventListener('click', outsideClickHandler);
+        };
+        
+        // Handle outside clicks to save and exit
+        const outsideClickHandler = function(e) {
+            // If click is outside the dropdown and base model display
+            if (!baseModelDisplay.contains(e.target)) {
+                saveAndExit();
+            }
+        };
+        
+        // Add delayed event listener for outside clicks
+        setTimeout(() => {
+            document.addEventListener('click', outsideClickHandler);
+        }, 0);
+        
+        // Also handle dropdown blur event
+        dropdown.addEventListener('blur', function(e) {
+            // Only save if the related target is not the edit button or inside the baseModelDisplay
+            if (!baseModelDisplay.contains(e.relatedTarget)) {
+                saveAndExit();
+            }
+        });
+    });
+}
+
+/**
+ * 保存基础模型
+ * @param {string} filePath - 文件路径
+ * @param {string} originalValue - 原始值（用于比较）
+ */
+async function saveBaseModel(filePath, originalValue) {
+    const baseModelElement = document.querySelector('.base-model-content');
+    const newBaseModel = baseModelElement.textContent.trim();
+    
+    // Only save if the value has actually changed
+    if (newBaseModel === originalValue) {
+        return; // No change, no need to save
+    }
+    
+    try {
+        await saveModelMetadata(filePath, { base_model: newBaseModel });
+        
+        // Update the corresponding lora card's dataset
+        const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+        if (loraCard) {
+            loraCard.dataset.base_model = newBaseModel;
+        }
+        
+        showToast('Base model updated successfully', 'success');
+    } catch (error) {
+        showToast('Failed to update base model', 'error');
+    }
+}
+
+/**
+ * 设置文件名编辑功能
+ */
+export function setupFileNameEditing() {
+    const fileNameContent = document.querySelector('.file-name-content');
+    const editBtn = document.querySelector('.edit-file-name-btn');
+    
+    if (!fileNameContent || !editBtn) return;
+    
+    // Show edit button on hover
+    const fileNameWrapper = document.querySelector('.file-name-wrapper');
+    fileNameWrapper.addEventListener('mouseenter', () => {
+        editBtn.classList.add('visible');
+    });
+    
+    fileNameWrapper.addEventListener('mouseleave', () => {
+        if (!fileNameWrapper.classList.contains('editing')) {
+            editBtn.classList.remove('visible');
+        }
+    });
+    
+    // Handle edit button click
+    editBtn.addEventListener('click', () => {
+        fileNameWrapper.classList.add('editing');
+        fileNameContent.setAttribute('contenteditable', 'true');
+        fileNameContent.focus();
+        
+        // Store original value for comparison later
+        fileNameContent.dataset.originalValue = fileNameContent.textContent.trim();
+        
+        // Place cursor at the end
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.selectNodeContents(fileNameContent);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        
+        editBtn.classList.add('visible');
+    });
+    
+    // Handle keyboard events in edit mode
+    fileNameContent.addEventListener('keydown', function(e) {
+        if (!this.getAttribute('contenteditable')) return;
+        
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.blur(); // Trigger save on Enter
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            // Restore original value
+            this.textContent = this.dataset.originalValue;
+            exitEditMode();
+        }
+    });
+    
+    // Handle input validation
+    fileNameContent.addEventListener('input', function() {
+        if (!this.getAttribute('contenteditable')) return;
+        
+        // Replace invalid characters for filenames
+        const invalidChars = /[\\/:*?"<>|]/g;
+        if (invalidChars.test(this.textContent)) {
+            const cursorPos = window.getSelection().getRangeAt(0).startOffset;
+            this.textContent = this.textContent.replace(invalidChars, '');
+            
+            // Restore cursor position
+            const range = document.createRange();
+            const sel = window.getSelection();
+            const newPos = Math.min(cursorPos, this.textContent.length);
+            
+            if (this.firstChild) {
+                range.setStart(this.firstChild, newPos);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+            
+            showToast('Invalid characters removed from filename', 'warning');
+        }
+    });
+    
+    // Handle focus out - save changes
+    fileNameContent.addEventListener('blur', async function() {
+        if (!this.getAttribute('contenteditable')) return;
+        
+        const newFileName = this.textContent.trim();
+        const originalValue = this.dataset.originalValue;
+        
+        // Basic validation
+        if (!newFileName) {
+            // Restore original value if empty
+            this.textContent = originalValue;
+            showToast('File name cannot be empty', 'error');
+            exitEditMode();
+            return;
+        }
+        
+        if (newFileName === originalValue) {
+            // No changes, just exit edit mode
+            exitEditMode();
+            return;
+        }
+        
+        try {
+            // Get the full file path
+            const filePath = document.querySelector('#loraModal .modal-content')
+                .querySelector('.file-path').textContent + originalValue + '.safetensors';
+                
+            // Call API to rename the file
+            const response = await fetch('/api/rename_lora', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    file_path: filePath,
+                    new_file_name: newFileName
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                showToast('File name updated successfully', 'success');
+                
+                // Update the LoRA card with new file path
+                const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+                if (loraCard) {
+                    const newFilePath = filePath.replace(originalValue, newFileName);
+                    loraCard.dataset.filepath = newFilePath;
+                }
+                
+                // Reload the page after a short delay to reflect changes
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1500);
+            } else {
+                throw new Error(result.error || 'Unknown error');
+            }
+        } catch (error) {
+            console.error('Error renaming file:', error);
+            this.textContent = originalValue; // Restore original file name
+            showToast(`Failed to rename file: ${error.message}`, 'error');
+        } finally {
+            exitEditMode();
+        }
+    });
+    
+    function exitEditMode() {
+        fileNameContent.removeAttribute('contenteditable');
+        fileNameWrapper.classList.remove('editing');
+        editBtn.classList.remove('visible');
+    }
+}

static/js/components/loraModal/PresetTags.js

@@ -0,0 +1,68 @@
+/**
+ * PresetTags.js
+ * 处理LoRA模型预设参数标签相关的功能模块
+ */
+import { saveModelMetadata } from './ModelMetadata.js';
+import { showToast } from '../../utils/uiHelpers.js';
+
+/**
+ * 解析预设参数
+ * @param {string} usageTips - 包含预设参数的JSON字符串
+ * @returns {Object} 解析后的预设参数对象
+ */
+export function parsePresets(usageTips) {
+    if (!usageTips) return {};
+    try {
+        return JSON.parse(usageTips);
+    } catch {
+        return {};
+    }
+}
+
+/**
+ * 渲染预设标签
+ * @param {Object} presets - 预设参数对象
+ * @returns {string} HTML内容
+ */
+export function renderPresetTags(presets) {
+    return Object.entries(presets).map(([key, value]) => `
+        <div class="preset-tag" data-key="${key}">
+            <span>${formatPresetKey(key)}: ${value}</span>
+            <i class="fas fa-times" onclick="removePreset('${key}')"></i>
+        </div>
+    `).join('');
+}
+
+/**
+ * 格式化预设键名
+ * @param {string} key - 预设键名
+ * @returns {string} 格式化后的键名
+ */
+function formatPresetKey(key) {
+    return key.split('_').map(word => 
+        word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+}
+
+/**
+ * 移除预设参数
+ * @param {string} key - 要移除的预设键名
+ */
+window.removePreset = async function(key) {
+    const filePath = document.querySelector('#loraModal .modal-content')
+            .querySelector('.file-path').textContent + 
+            document.querySelector('#loraModal .modal-content')
+            .querySelector('#file-name').textContent + '.safetensors';
+    const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+    const currentPresets = parsePresets(loraCard.dataset.usage_tips);
+    
+    delete currentPresets[key];
+    const newPresetsJson = JSON.stringify(currentPresets);
+
+    await saveModelMetadata(filePath, { 
+        usage_tips: newPresetsJson 
+    });
+    
+    loraCard.dataset.usage_tips = newPresetsJson;
+    document.querySelector('.preset-tags').innerHTML = renderPresetTags(currentPresets);
+};

static/js/components/loraModal/RecipeTab.js

@@ -0,0 +1,234 @@
+/**
+ * RecipeTab - Handles the recipes tab in the Lora Modal
+ */
+import { showToast } from '../../utils/uiHelpers.js';
+import { setSessionItem, removeSessionItem } from '../../utils/storageHelpers.js';
+
+/**
+ * Loads recipes that use the specified Lora and renders them in the tab
+ * @param {string} loraName - The display name of the Lora
+ * @param {string} sha256 - The SHA256 hash of the Lora
+ */
+export function loadRecipesForLora(loraName, sha256) {
+    const recipeTab = document.getElementById('recipes-tab');
+    if (!recipeTab) return;
+    
+    // Show loading state
+    recipeTab.innerHTML = `
+        <div class="recipes-loading">
+            <i class="fas fa-spinner fa-spin"></i> Loading recipes...
+        </div>
+    `;
+    
+    // Fetch recipes that use this Lora by hash
+    fetch(`/api/recipes/for-lora?hash=${encodeURIComponent(sha256.toLowerCase())}`)
+        .then(response => response.json())
+        .then(data => {
+            if (!data.success) {
+                throw new Error(data.error || 'Failed to load recipes');
+            }
+            
+            renderRecipes(recipeTab, data.recipes, loraName, sha256);
+        })
+        .catch(error => {
+            console.error('Error loading recipes for Lora:', error);
+            recipeTab.innerHTML = `
+                <div class="recipes-error">
+                    <i class="fas fa-exclamation-circle"></i>
+                    <p>Failed to load recipes. Please try again later.</p>
+                </div>
+            `;
+        });
+}
+
+/**
+ * Renders the recipe cards in the tab
+ * @param {HTMLElement} tabElement - The tab element to render into
+ * @param {Array} recipes - Array of recipe objects
+ * @param {string} loraName - The display name of the Lora
+ * @param {string} loraHash - The hash of the Lora
+ */
+function renderRecipes(tabElement, recipes, loraName, loraHash) {
+    if (!recipes || recipes.length === 0) {
+        tabElement.innerHTML = `
+            <div class="recipes-empty">
+                <i class="fas fa-book-open"></i>
+                <p>No recipes found that use this Lora.</p>
+            </div>
+        `;
+        
+        return;
+    }
+
+    // Create header with count and view all button
+    const headerElement = document.createElement('div');
+    headerElement.className = 'recipes-header';
+    headerElement.innerHTML = `
+        <h3>Found ${recipes.length} recipe${recipes.length > 1 ? 's' : ''} using this Lora</h3>
+        <button class="view-all-btn" title="View all in Recipes page">
+            <i class="fas fa-external-link-alt"></i> View All in Recipes
+        </button>
+    `;
+    
+    // Add click handler for "View All" button
+    headerElement.querySelector('.view-all-btn').addEventListener('click', () => {
+        navigateToRecipesPage(loraName, loraHash);
+    });
+    
+    // Create grid container for recipe cards
+    const cardGrid = document.createElement('div');
+    cardGrid.className = 'card-grid';
+    
+    // Create recipe cards matching the structure in recipes.html
+    recipes.forEach(recipe => {
+        // Get basic info
+        const baseModel = recipe.base_model || '';
+        const loras = recipe.loras || [];
+        const lorasCount = loras.length;
+        const missingLorasCount = loras.filter(lora => !lora.inLibrary && !lora.isDeleted).length;
+        const allLorasAvailable = missingLorasCount === 0 && lorasCount > 0;
+        
+        // Ensure file_url exists, fallback to file_path if needed
+        const imageUrl = recipe.file_url || 
+                         (recipe.file_path ? `/loras_static/root1/preview/${recipe.file_path.split('/').pop()}` : 
+                         '/loras_static/images/no-preview.png');
+        
+        // Create card element matching the structure in recipes.html
+        const card = document.createElement('div');
+        card.className = 'lora-card';
+        card.dataset.filePath = recipe.file_path || '';
+        card.dataset.title = recipe.title || '';
+        card.dataset.created = recipe.created_date || '';
+        card.dataset.id = recipe.id || '';
+        
+        card.innerHTML = `
+            <div class="recipe-indicator" title="Recipe">R</div>
+            <div class="card-preview">
+                <img src="${imageUrl}" alt="${recipe.title}" loading="lazy">
+                <div class="card-header">
+                    <div class="base-model-wrapper">
+                        ${baseModel ? `<span class="base-model-label" title="${baseModel}">${baseModel}</span>` : ''}
+                    </div>
+                    <div class="card-actions">
+                        <i class="fas fa-copy" title="Copy Recipe Syntax"></i>
+                    </div>
+                </div>
+                <div class="card-footer">
+                    <div class="model-info">
+                        <span class="model-name">${recipe.title}</span>
+                    </div>
+                    <div class="lora-count ${allLorasAvailable ? 'ready' : (lorasCount > 0 ? 'missing' : '')}" 
+                         title="${getLoraStatusTitle(lorasCount, missingLorasCount)}">
+                        <i class="fas fa-layer-group"></i> ${lorasCount}
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Add event listeners for action buttons
+        card.querySelector('.fa-copy').addEventListener('click', (e) => {
+            e.stopPropagation();
+            copyRecipeSyntax(recipe.id);
+        });
+        
+        // Add click handler for the entire card
+        card.addEventListener('click', () => {
+            navigateToRecipeDetails(recipe.id);
+        });
+        
+        // Add card to grid
+        cardGrid.appendChild(card);
+    });
+    
+    // Clear loading indicator and append content
+    tabElement.innerHTML = '';
+    tabElement.appendChild(headerElement);
+    tabElement.appendChild(cardGrid);
+}
+
+/**
+ * Returns a descriptive title for the LoRA status indicator
+ * @param {number} totalCount - Total number of LoRAs in recipe
+ * @param {number} missingCount - Number of missing LoRAs
+ * @returns {string} Status title text
+ */
+function getLoraStatusTitle(totalCount, missingCount) {
+    if (totalCount === 0) return "No LoRAs in this recipe";
+    if (missingCount === 0) return "All LoRAs available - Ready to use";
+    return `${missingCount} of ${totalCount} LoRAs missing`;
+}
+
+/**
+ * Copies recipe syntax to clipboard
+ * @param {string} recipeId - The recipe ID
+ */
+function copyRecipeSyntax(recipeId) {
+    if (!recipeId) {
+        showToast('Cannot copy recipe syntax: Missing recipe ID', 'error');
+        return;
+    }
+
+    fetch(`/api/recipe/${recipeId}/syntax`)
+        .then(response => response.json())
+        .then(data => {
+            if (data.success && data.syntax) {
+                return navigator.clipboard.writeText(data.syntax);
+            } else {
+                throw new Error(data.error || 'No syntax returned');
+            }
+        })
+        .then(() => {
+            showToast('Recipe syntax copied to clipboard', 'success');
+        })
+        .catch(err => {
+            console.error('Failed to copy: ', err);
+            showToast('Failed to copy recipe syntax', 'error');
+        });
+}
+
+/**
+ * Navigates to the recipes page with filter for the current Lora
+ * @param {string} loraName - The Lora display name to filter by
+ * @param {string} loraHash - The hash of the Lora to filter by
+ * @param {boolean} createNew - Whether to open the create recipe dialog
+ */
+function navigateToRecipesPage(loraName, loraHash) {
+    // Close the current modal
+    if (window.modalManager) {
+        modalManager.closeModal('loraModal');
+    }
+    
+    // Clear any previous filters first
+    removeSessionItem('lora_to_recipe_filterLoraName');
+    removeSessionItem('lora_to_recipe_filterLoraHash');
+    removeSessionItem('viewRecipeId');
+    
+    // Store the LoRA name and hash filter in sessionStorage
+    setSessionItem('lora_to_recipe_filterLoraName', loraName);
+    setSessionItem('lora_to_recipe_filterLoraHash', loraHash);
+    
+    // Directly navigate to recipes page
+    window.location.href = '/loras/recipes';
+}
+
+/**
+ * Navigates directly to a specific recipe's details
+ * @param {string} recipeId - The recipe ID to view
+ */
+function navigateToRecipeDetails(recipeId) {
+    // Close the current modal
+    if (window.modalManager) {
+        modalManager.closeModal('loraModal');
+    }
+    
+    // Clear any previous filters first
+    removeSessionItem('filterLoraName');
+    removeSessionItem('filterLoraHash');
+    removeSessionItem('viewRecipeId');
+    
+    // Store the recipe ID in sessionStorage to load on recipes page
+    setSessionItem('viewRecipeId', recipeId);
+    
+    // Directly navigate to recipes page
+    window.location.href = '/loras/recipes';
+}

static/js/components/loraModal/ShowcaseView.js

@@ -0,0 +1,501 @@
+/**
+ * ShowcaseView.js
+ * 处理LoRA模型展示内容（图片、视频）的功能模块
+ */
+import { showToast } from '../../utils/uiHelpers.js';
+import { state } from '../../state/index.js';
+import { NSFW_LEVELS } from '../../utils/constants.js';
+
+/**
+ * 渲染展示内容
+ * @param {Array} images - 要展示的图片/视频数组
+ * @returns {string} HTML内容
+ */
+export function renderShowcaseContent(images) {
+    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 => {
+                    // 计算适当的展示高度：
+                    // 1. 保持原始宽高比
+                    // 2. 限制最大高度为视窗高度的60%
+                    // 3. 确保最小高度为容器宽度的40%
+                    const aspectRatio = (img.height / img.width) * 100;
+                    const containerWidth = 800; // modal content的最大宽度
+                    const minHeightPercent = 40; // 最小高度为容器宽度的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 || '';
+                    
+                    // Check if we have any meaningful generation parameters
+                    const hasParams = seed || model || steps || sampler || cfgScale || clipSkip;
+                    const hasPrompts = prompt || negativePrompt;
+                    
+                    // If no metadata available, show a message
+                    if (!hasParams && !hasPrompts) {
+                        const metadataPanel = `
+                            <div class="image-metadata-panel">
+                                <div class="metadata-content">
+                                    <div class="no-metadata-message">
+                                        <i class="fas fa-info-circle"></i>
+                                        <span>No generation parameters available</span>
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+                        
+                        if (img.type === 'video') {
+                            return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+                        }
+                        return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+                    }
+                    
+                    // Create a data attribute with the prompt for copying instead of trying to handle it in the onclick
+                    // This avoids issues with quotes and special characters
+                    const promptIndex = Math.random().toString(36).substring(2, 15);
+                    const negPromptIndex = Math.random().toString(36).substring(2, 15);
+                    
+                    // Create parameter tags HTML
+                    const paramTags = `
+                        <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>
+                    `;
+                    
+                    // Metadata panel HTML
+                    const metadataPanel = `
+                        <div class="image-metadata-panel">
+                            <div class="metadata-content">
+                                ${hasParams ? paramTags : ''}
+                                ${!hasParams && !hasPrompts ? `
+                                <div class="no-metadata-message">
+                                    <i class="fas fa-info-circle"></i>
+                                    <span>No generation parameters available</span>
+                                </div>
+                                ` : ''}
+                                ${prompt ? `
+                                <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>
+                                ` : ''}
+                                ${negativePrompt ? `
+                                <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>
+                                ` : ''}
+                            </div>
+                        </div>
+                    `;
+                    
+                    if (img.type === 'video') {
+                        return generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+                    }
+                    return generateImageWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel);
+                }).join('')}
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * 生成视频包装HTML
+ */
+function generateVideoWrapper(img, heightPercent, shouldBlur, nsfwText, metadataPanel) {
+    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-src="${img.url}"
+                class="lazy ${shouldBlur ? 'blurred' : ''}">
+                <source data-src="${img.url}" 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) {
+    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-src="${img.url}" 
+                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>
+    `;
+}
+
+/**
+ * 切换展示区域的显示状态
+ */
+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);
+        }
+    }
+}
+
+/**
+ * 初始化元数据面板交互处理
+ */
+function initMetadataPanelHandlers(container) {
+    // Find all media wrappers
+    const mediaWrappers = container.querySelectorAll('.media-wrapper');
+    
+    mediaWrappers.forEach(wrapper => {
+        // Get the metadata panel
+        const metadataPanel = wrapper.querySelector('.image-metadata-panel');
+        if (!metadataPanel) return;
+        
+        // Prevent events from the metadata panel from bubbling
+        metadataPanel.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+        
+        // Handle copy prompt button clicks
+        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(); // Prevent bubbling
+                
+                if (!promptElement) return;
+                
+                try {
+                    await navigator.clipboard.writeText(promptElement.textContent);
+                    showToast('Prompt copied to clipboard', 'success');
+                } catch (err) {
+                    console.error('Copy failed:', err);
+                    showToast('Copy failed', 'error');
+                }
+            });
+        });
+        
+        // Prevent scrolling in the metadata panel from scrolling the whole modal
+        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 });
+    });
+}
+
+/**
+ * 初始化模糊切换处理
+ */
+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';
+            }
+        });
+    });
+}
+
+/**
+ * 初始化延迟加载
+ */
+function initLazyLoading(container) {
+    const lazyElements = container.querySelectorAll('.lazy');
+    
+    const lazyLoad = (element) => {
+        if (element.tagName.toLowerCase() === 'video') {
+            element.src = element.dataset.src;
+            element.querySelector('source').src = element.dataset.src;
+            element.load();
+        } else {
+            element.src = element.dataset.src;
+        }
+        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));
+}
+
+/**
+ * 设置展示区域的滚动处理
+ */
+export function setupShowcaseScroll() {
+    // Add event listener to document for wheel events
+    document.addEventListener('wheel', (event) => {
+        // Find the active modal content
+        const modalContent = document.querySelector('#loraModal .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 instead of deprecated DOMNodeInserted
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                // Check if loraModal content was added
+                const loraModal = document.getElementById('loraModal');
+                if (loraModal && loraModal.querySelector('.modal-content')) {
+                    setupBackToTopButton(loraModal.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('#loraModal .modal-content');
+    if (modalContent) {
+        setupBackToTopButton(modalContent);
+    }
+}
+
+/**
+ * 设置返回顶部按钮
+ */
+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'));
+}
+
+/**
+ * 滚动到顶部
+ */
+export function scrollToTop(button) {
+    const modalContent = button.closest('.modal-content');
+    if (modalContent) {
+        modalContent.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }
+}

static/js/components/loraModal/TriggerWords.js

@@ -0,0 +1,345 @@
+/**
+ * TriggerWords.js
+ * 处理LoRA模型触发词相关的功能模块
+ */
+import { showToast } from '../../utils/uiHelpers.js';
+import { saveModelMetadata } from './ModelMetadata.js';
+
+/**
+ * 渲染触发词
+ * @param {Array} words - 触发词数组
+ * @param {string} filePath - 文件路径
+ * @returns {string} HTML内容
+ */
+export function renderTriggerWords(words, filePath) {
+    if (!words.length) return `
+        <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">
+                    <i class="fas fa-pencil-alt"></i>
+                </button>
+            </div>
+            <div class="trigger-words-content">
+                <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="add-trigger-word-btn" title="Add a trigger word">
+                    <i class="fas fa-plus"></i> Add
+                </button>
+                <button class="save-trigger-words-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="Enter trigger word">
+                <button class="confirm-add-trigger-word-btn">Add</button>
+                <button class="cancel-add-trigger-word-btn">Cancel</button>
+            </div>
+        </div>
+    `;
+    
+    return `
+        <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">
+                    <i class="fas fa-pencil-alt"></i>
+                </button>
+            </div>
+            <div class="trigger-words-content">
+                <div class="trigger-words-tags">
+                    ${words.map(word => `
+                        <div class="trigger-word-tag" data-word="${word}" onclick="copyTriggerWord('${word}')">
+                            <span class="trigger-word-content">${word}</span>
+                            <span class="trigger-word-copy">
+                                <i class="fas fa-copy"></i>
+                            </span>
+                            <button class="delete-trigger-word-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="add-trigger-word-btn" title="Add a trigger word">
+                    <i class="fas fa-plus"></i> Add
+                </button>
+                <button class="save-trigger-words-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="Enter trigger word">
+                <button class="confirm-add-trigger-word-btn">Add</button>
+                <button class="cancel-add-trigger-word-btn">Cancel</button>
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * 设置触发词编辑模式
+ */
+export function setupTriggerWordsEditMode() {
+    const editBtn = document.querySelector('.edit-trigger-words-btn');
+    if (!editBtn) return;
+    
+    editBtn.addEventListener('click', function() {
+        const triggerWordsSection = this.closest('.trigger-words');
+        const isEditMode = triggerWordsSection.classList.toggle('edit-mode');
+        
+        // Toggle edit mode UI elements
+        const triggerWordTags = triggerWordsSection.querySelectorAll('.trigger-word-tag');
+        const editControls = triggerWordsSection.querySelector('.trigger-words-edit-controls');
+        const noTriggerWords = triggerWordsSection.querySelector('.no-trigger-words');
+        const tagsContainer = triggerWordsSection.querySelector('.trigger-words-tags');
+        
+        if (isEditMode) {
+            this.innerHTML = '<i class="fas fa-times"></i>'; // Change to cancel icon
+            this.title = "Cancel editing";
+            editControls.style.display = 'flex';
+            
+            // If we have no trigger words yet, hide the "No trigger word needed" text
+            // and show the empty tags container
+            if (noTriggerWords) {
+                noTriggerWords.style.display = 'none';
+                if (tagsContainer) tagsContainer.style.display = 'flex';
+            }
+            
+            // Disable click-to-copy and show delete buttons
+            triggerWordTags.forEach(tag => {
+                tag.onclick = null;
+                tag.querySelector('.trigger-word-copy').style.display = 'none';
+                tag.querySelector('.delete-trigger-word-btn').style.display = 'block';
+            });
+        } else {
+            this.innerHTML = '<i class="fas fa-pencil-alt"></i>'; // Change back to edit icon
+            this.title = "Edit trigger words";
+            editControls.style.display = 'none';
+            
+            // If we have no trigger words, show the "No trigger word needed" text
+            // and hide the empty tags container
+            const currentTags = triggerWordsSection.querySelectorAll('.trigger-word-tag');
+            if (noTriggerWords && currentTags.length === 0) {
+                noTriggerWords.style.display = '';
+                if (tagsContainer) tagsContainer.style.display = 'none';
+            }
+            
+            // Restore original state
+            triggerWordTags.forEach(tag => {
+                const word = tag.dataset.word;
+                tag.onclick = () => copyTriggerWord(word);
+                tag.querySelector('.trigger-word-copy').style.display = 'flex';
+                tag.querySelector('.delete-trigger-word-btn').style.display = 'none';
+            });
+            
+            // Hide add form if open
+            triggerWordsSection.querySelector('.add-trigger-word-form').style.display = 'none';
+        }
+    });
+    
+    // Set up add trigger word button
+    const addBtn = document.querySelector('.add-trigger-word-btn');
+    if (addBtn) {
+        addBtn.addEventListener('click', function() {
+            const triggerWordsSection = this.closest('.trigger-words');
+            const addForm = triggerWordsSection.querySelector('.add-trigger-word-form');
+            addForm.style.display = 'flex';
+            addForm.querySelector('input').focus();
+        });
+    }
+    
+    // Set up confirm and cancel add buttons
+    const confirmAddBtn = document.querySelector('.confirm-add-trigger-word-btn');
+    const cancelAddBtn = document.querySelector('.cancel-add-trigger-word-btn');
+    const triggerWordInput = document.querySelector('.new-trigger-word-input');
+    
+    if (confirmAddBtn && triggerWordInput) {
+        confirmAddBtn.addEventListener('click', function() {
+            addNewTriggerWord(triggerWordInput.value);
+        });
+        
+        // Add keydown event to input
+        triggerWordInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                addNewTriggerWord(this.value);
+            }
+        });
+    }
+    
+    if (cancelAddBtn) {
+        cancelAddBtn.addEventListener('click', function() {
+            const addForm = this.closest('.add-trigger-word-form');
+            addForm.style.display = 'none';
+            addForm.querySelector('input').value = '';
+        });
+    }
+    
+    // Set up save button
+    const saveBtn = document.querySelector('.save-trigger-words-btn');
+    if (saveBtn) {
+        saveBtn.addEventListener('click', saveTriggerWords);
+    }
+    
+    // Set up delete buttons
+    document.querySelectorAll('.delete-trigger-word-btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            const tag = this.closest('.trigger-word-tag');
+            tag.remove();
+        });
+    });
+}
+
+/**
+ * 添加新触发词
+ * @param {string} word - 要添加的触发词
+ */
+function addNewTriggerWord(word) {
+    word = word.trim();
+    if (!word) return;
+    
+    const triggerWordsSection = document.querySelector('.trigger-words');
+    let tagsContainer = document.querySelector('.trigger-words-tags');
+    
+    // Ensure tags container exists and is visible
+    if (tagsContainer) {
+        tagsContainer.style.display = 'flex';
+    } else {
+        // Create tags container if it doesn't exist
+        const contentDiv = triggerWordsSection.querySelector('.trigger-words-content');
+        if (contentDiv) {
+            tagsContainer = document.createElement('div');
+            tagsContainer.className = 'trigger-words-tags';
+            contentDiv.appendChild(tagsContainer);
+        }
+    }
+    
+    if (!tagsContainer) return;
+    
+    // Hide "no trigger words" message if it exists
+    const noTriggerWordsMsg = triggerWordsSection.querySelector('.no-trigger-words');
+    if (noTriggerWordsMsg) {
+        noTriggerWordsMsg.style.display = 'none';
+    }
+    
+    // Validation: Check length
+    if (word.split(/\s+/).length > 30) {
+        showToast('Trigger word should not exceed 30 words', 'error');
+        return;
+    }
+    
+    // Validation: Check total number
+    const currentTags = tagsContainer.querySelectorAll('.trigger-word-tag');
+    if (currentTags.length >= 10) {
+        showToast('Maximum 10 trigger words allowed', 'error');
+        return;
+    }
+    
+    // Validation: Check for duplicates
+    const existingWords = Array.from(currentTags).map(tag => tag.dataset.word);
+    if (existingWords.includes(word)) {
+        showToast('This trigger word already exists', 'error');
+        return;
+    }
+    
+    // Create new tag
+    const newTag = document.createElement('div');
+    newTag.className = 'trigger-word-tag';
+    newTag.dataset.word = word;
+    newTag.innerHTML = `
+        <span class="trigger-word-content">${word}</span>
+        <span class="trigger-word-copy" style="display:none;">
+            <i class="fas fa-copy"></i>
+        </span>
+        <button class="delete-trigger-word-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');
+    deleteBtn.addEventListener('click', function() {
+        newTag.remove();
+    });
+    
+    tagsContainer.appendChild(newTag);
+    
+    // Clear and hide the input form
+    const triggerWordInput = document.querySelector('.new-trigger-word-input');
+    triggerWordInput.value = '';
+    document.querySelector('.add-trigger-word-form').style.display = 'none';
+}
+
+/**
+ * 保存触发词
+ */
+async function saveTriggerWords() {
+    const filePath = document.querySelector('.edit-trigger-words-btn').dataset.filePath;
+    const triggerWordTags = document.querySelectorAll('.trigger-word-tag');
+    const words = Array.from(triggerWordTags).map(tag => tag.dataset.word);
+    
+    try {
+        // Special format for updating nested civitai.trainedWords
+        await saveModelMetadata(filePath, {
+            civitai: { trainedWords: words }
+        });
+        
+        // Update UI
+        const editBtn = document.querySelector('.edit-trigger-words-btn');
+        editBtn.click(); // Exit edit mode
+        
+        // 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 = document.querySelector('.no-trigger-words');
+        const tagsContainer = document.querySelector('.trigger-words-tags');
+        if (words.length === 0 && noTriggerWords) {
+            noTriggerWords.style.display = '';
+            if (tagsContainer) tagsContainer.style.display = 'none';
+        }
+        
+        showToast('Trigger words updated successfully', 'success');
+    } catch (error) {
+        console.error('Error saving trigger words:', error);
+        showToast('Failed to update trigger words', 'error');
+    }
+}
+
+/**
+ * 复制触发词到剪贴板
+ * @param {string} word - 要复制的触发词
+ */
+window.copyTriggerWord = async function(word) {
+    try {
+        await navigator.clipboard.writeText(word);
+        showToast('Trigger word copied', 'success');
+    } catch (err) {
+        console.error('Copy failed:', err);
+        showToast('Copy failed', 'error');
+    }
+};

static/js/components/loraModal/index.js

@@ -0,0 +1,302 @@
+/**
+ * LoraModal - 主入口点
+ * 
+ * 将原始的LoraModal.js拆分成多个功能模块后的主入口文件
+ */
+import { showToast } from '../../utils/uiHelpers.js';
+import { state } from '../../state/index.js';
+import { modalManager } from '../../managers/ModalManager.js';
+import { renderShowcaseContent, toggleShowcase, setupShowcaseScroll, scrollToTop } from './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 { 
+    setupModelNameEditing, 
+    setupBaseModelEditing, 
+    setupFileNameEditing,
+    saveModelMetadata
+} from './ModelMetadata.js';
+import { renderCompactTags, setupTagTooltip, formatFileSize } from './utils.js';
+
+/**
+ * 显示LoRA模型弹窗
+ * @param {Object} lora - LoRA模型数据
+ */
+export function showLoraModal(lora) {
+    const escapedWords = lora.civitai?.trainedWords?.length ? 
+        lora.civitai.trainedWords.map(word => word.replace(/'/g, '\\\'')) : [];
+
+    const content = `
+        <div class="modal-content">
+            <button class="close" onclick="modalManager.closeModal('loraModal')">&times;</button>
+            <header class="modal-header">
+                <div class="model-name-header">
+                    <h2 class="model-name-content" contenteditable="true" spellcheck="false">${lora.model_name}</h2>
+                    <button class="edit-model-name-btn" title="Edit model name">
+                        <i class="fas fa-pencil-alt"></i>
+                    </button>
+                </div>
+                ${renderCompactTags(lora.tags || [])}
+            </header>
+
+            <div class="modal-body">
+                <div class="info-section">
+                    <div class="info-grid">
+                        <div class="info-item">
+                            <label>Version</label>
+                            <span>${lora.civitai.name || 'N/A'}</span>
+                        </div>
+                        <div class="info-item">
+                            <label>File Name</label>
+                            <div class="file-name-wrapper">
+                                <span id="file-name" class="file-name-content">${lora.file_name || 'N/A'}</span>
+                                <button class="edit-file-name-btn" title="Edit file name">
+                                    <i class="fas fa-pencil-alt"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="info-item location-size">
+                            <div class="location-wrapper">
+                                <label>Location</label>
+                                <span class="file-path">${lora.file_path.replace(/[^/]+$/, '') || 'N/A'}</span>
+                            </div>
+                        </div>
+                        <div class="info-item base-size">
+                            <div class="base-wrapper">
+                                <label>Base Model</label>
+                                <div class="base-model-display">
+                                    <span class="base-model-content">${lora.base_model || 'N/A'}</span>
+                                    <button class="edit-base-model-btn" title="Edit base model">
+                                        <i class="fas fa-pencil-alt"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="size-wrapper">
+                                <label>Size</label>
+                                <span>${formatFileSize(lora.file_size)}</span>
+                            </div>
+                        </div>
+                        <div class="info-item usage-tips">
+                            <label>Usage Tips</label>
+                            <div class="editable-field">
+                                <div class="preset-controls">
+                                    <select id="preset-selector">
+                                        <option value="">Add preset parameter...</option>
+                                        <option value="strength_min">Strength Min</option>
+                                        <option value="strength_max">Strength Max</option>
+                                        <option value="strength">Strength</option>
+                                        <option value="clip_skip">Clip Skip</option>
+                                    </select>
+                                    <input type="number" id="preset-value" step="0.01" placeholder="Value" style="display:none;">
+                                    <button class="add-preset-btn">Add</button>
+                                </div>
+                                <div class="preset-tags">
+                                    ${renderPresetTags(parsePresets(lora.usage_tips))}
+                                </div>
+                            </div>
+                        </div>
+                        ${renderTriggerWords(escapedWords, lora.file_path)}
+                        <div class="info-item notes">
+                            <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}')">
+                                    <i class="fas fa-save"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="info-item full-width">
+                            <label>About this version</label>
+                            <div class="description-text">${lora.description || 'N/A'}</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="showcase-section" data-lora-id="${lora.civitai?.modelId || ''}">
+                    <div class="showcase-tabs">
+                        <button class="tab-btn active" data-tab="showcase">Examples</button>
+                        <button class="tab-btn" data-tab="description">Model Description</button>
+                        <button class="tab-btn" data-tab="recipes">Recipes</button>
+                    </div>
+                    
+                    <div class="tab-content">
+                        <div id="showcase-tab" class="tab-pane active">
+                            ${renderShowcaseContent(lora.civitai?.images)}
+                        </div>
+                        
+                        <div id="description-tab" class="tab-pane">
+                            <div class="model-description-container">
+                                <div class="model-description-loading">
+                                    <i class="fas fa-spinner fa-spin"></i> Loading model description...
+                                </div>
+                                <div class="model-description-content">
+                                    ${lora.modelDescription || ''}
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div id="recipes-tab" class="tab-pane">
+                            <div class="recipes-loading">
+                                <i class="fas fa-spinner fa-spin"></i> Loading recipes...
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <button class="back-to-top" onclick="scrollToTop(this)">
+                        <i class="fas fa-arrow-up"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    `;
+    
+    modalManager.showModal('loraModal', content);
+    setupEditableFields();
+    setupShowcaseScroll();
+    setupTabSwitching();
+    setupTagTooltip();
+    setupTriggerWordsEditMode();
+    setupModelNameEditing();
+    setupBaseModelEditing();
+    setupFileNameEditing();
+    
+    // If we have a model ID but no description, fetch it
+    if (lora.civitai?.modelId && !lora.modelDescription) {
+        loadModelDescription(lora.civitai.modelId, lora.file_path);
+    }
+    
+    // Load recipes for this Lora
+    loadRecipesForLora(lora.model_name, lora.sha256);
+}
+
+// Copy file name function
+window.copyFileName = async function(fileName) {
+    try {
+        await navigator.clipboard.writeText(fileName);
+        showToast('File name copied', 'success');
+    } catch (err) {
+        console.error('Copy failed:', err);
+        showToast('Copy failed', 'error');
+    }
+};
+
+// Add save note function
+window.saveNotes = async function(filePath) {
+    const content = document.querySelector('.notes-content').textContent;
+    try {
+        await saveModelMetadata(filePath, { notes: content });
+
+        // Update the corresponding lora card's dataset
+        const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+        if (loraCard) {
+            loraCard.dataset.notes = content;
+        }
+
+        showToast('Notes saved successfully', 'success');
+    } catch (error) {
+        showToast('Failed to save notes', 'error');
+    }
+};
+
+function setupEditableFields() {
+    const editableFields = document.querySelectorAll('.editable-field [contenteditable]');
+    
+    editableFields.forEach(field => {
+        field.addEventListener('focus', function() {
+            if (this.textContent === 'Add your notes here...') {
+                this.textContent = '';
+            }
+        });
+
+        field.addEventListener('blur', function() {
+            if (this.textContent.trim() === '') {
+                if (this.classList.contains('notes-content')) {
+                    this.textContent = 'Add your notes here...';
+                }
+            }
+        });
+    });
+
+    const presetSelector = document.getElementById('preset-selector');
+    const presetValue = document.getElementById('preset-value');
+    const addPresetBtn = document.querySelector('.add-preset-btn');
+    const presetTags = document.querySelector('.preset-tags');
+
+    presetSelector.addEventListener('change', function() {
+        const selected = this.value;
+        if (selected) {
+            presetValue.style.display = 'inline-block';
+            presetValue.min = selected.includes('strength') ? -10 : 0;
+            presetValue.max = selected.includes('strength') ? 10 : 10;
+            presetValue.step = 0.5;
+            if (selected === 'clip_skip') {
+                presetValue.type = 'number';
+                presetValue.step = 1;
+            }
+            // Add auto-focus
+            setTimeout(() => presetValue.focus(), 0);
+        } else {
+            presetValue.style.display = 'none';
+        }
+    });
+
+    addPresetBtn.addEventListener('click', async function() {
+        const key = presetSelector.value;
+        const value = presetValue.value;
+        
+        if (!key || !value) return;
+
+        const filePath = document.querySelector('#loraModal .modal-content')
+            .querySelector('.file-path').textContent + 
+            document.querySelector('#loraModal .modal-content')
+            .querySelector('#file-name').textContent + '.safetensors';
+
+        const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+        const currentPresets = parsePresets(loraCard.dataset.usage_tips);
+        
+        currentPresets[key] = parseFloat(value);
+        const newPresetsJson = JSON.stringify(currentPresets);
+
+        await saveModelMetadata(filePath, { 
+            usage_tips: newPresetsJson
+        });
+
+        loraCard.dataset.usage_tips = newPresetsJson;
+        presetTags.innerHTML = renderPresetTags(currentPresets);
+        
+        presetSelector.value = '';
+        presetValue.value = '';
+        presetValue.style.display = 'none';
+    });
+
+    // Add keydown event listeners for notes
+    const notesContent = document.querySelector('.notes-content');
+    if (notesContent) {
+        notesContent.addEventListener('keydown', async function(e) {
+            if (e.key === 'Enter') {
+                if (e.shiftKey) {
+                    // Allow shift+enter for new line
+                    return;
+                }
+                e.preventDefault();
+                const filePath = document.querySelector('#loraModal .modal-content')
+                    .querySelector('.file-path').textContent + 
+                    document.querySelector('#loraModal .modal-content')
+                    .querySelector('#file-name').textContent + '.safetensors';
+                await saveNotes(filePath);
+            }
+        });
+    }
+
+    // Add keydown event for preset value
+    presetValue.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            addPresetBtn.click();
+        }
+    });
+}
+
+// Export functions for global access
+export { toggleShowcase, scrollToTop };

static/js/components/loraModal/utils.js

@@ -0,0 +1,73 @@
+/**
+ * utils.js
+ * LoraModal组件的辅助函数集合
+ */
+import { showToast } from '../../utils/uiHelpers.js';
+
+/**
+ * 格式化文件大小
+ * @param {number} bytes - 字节数
+ * @returns {string} 格式化后的文件大小
+ */
+export function formatFileSize(bytes) {
+    if (!bytes) return 'N/A';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let size = bytes;
+    let unitIndex = 0;
+    
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex++;
+    }
+    
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+}
+
+/**
+ * 渲染紧凑标签
+ * @param {Array} tags - 标签数组
+ * @returns {string} HTML内容
+ */
+export function renderCompactTags(tags) {
+    if (!tags || tags.length === 0) return '';
+    
+    // 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);
+    
+    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>
+            ${tags.length > 0 ? 
+                `<div class="model-tags-tooltip">
+                    <div class="tooltip-content">
+                        ${tags.map(tag => `<span class="tooltip-tag">${tag}</span>`).join('')}
+                    </div>
+                </div>` : 
+                ''}
+        </div>
+    `;
+}
+
+/**
+ * 设置标签提示功能
+ */
+export function setupTagTooltip() {
+    const tagsContainer = document.querySelector('.model-tags-container');
+    const tooltip = document.querySelector('.model-tags-tooltip');
+    
+    if (tagsContainer && tooltip) {
+        tagsContainer.addEventListener('mouseenter', () => {
+            tooltip.classList.add('visible');
+        });
+        
+        tagsContainer.addEventListener('mouseleave', () => {
+            tooltip.classList.remove('visible');
+        });
+    }
+}

static/js/core.js

@@ -4,7 +4,7 @@ import { LoadingManager } from './managers/LoadingManager.js';
 import { modalManager } from './managers/ModalManager.js';
 import { updateService } from './managers/UpdateService.js';
 import { HeaderManager } from './components/Header.js';
-import { SettingsManager } from './managers/SettingsManager.js';
+import { settingsManager } from './managers/SettingsManager.js';
 import { showToast, initTheme, initBackToTop, lazyLoadImages } from './utils/uiHelpers.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { migrateStorageItems } from './utils/storageHelpers.js';
@@ -26,7 +26,7 @@ export class AppCore {
         modalManager.initialize();
         updateService.initialize();
         window.modalManager = modalManager;
-        window.settingsManager = new SettingsManager();
+        window.settingsManager = settingsManager;
         
         // Initialize UI components
         window.headerManager = new HeaderManager();
@@ -76,4 +76,4 @@ document.addEventListener('DOMContentLoaded', () => {
 export const appCore = new AppCore();
 
 // Export common utilities for global use
-export { showToast, lazyLoadImages, initializeInfiniteScroll }; 
+export { showToast, lazyLoadImages, initializeInfiniteScroll };

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.js';
+import { showLoraModal, toggleShowcase, scrollToTop } from './components/loraModal/index.js';
 import { loadMoreLoras, fetchCivitai, deleteModel, replacePreview, resetAndReload, refreshLoras } from './api/loraApi.js';
 import { 
     restoreFolderFilter, 
@@ -17,6 +17,7 @@ import { LoraContextMenu } from './components/ContextMenu.js';
 import { moveManager } from './managers/MoveManager.js';
 import { updateCardsForBulkMode } from './components/LoraCard.js';
 import { bulkManager } from './managers/BulkManager.js';
+import { setStorageItem, getStorageItem, getSessionItem, removeSessionItem } from './utils/storageHelpers.js';
 
 // Initialize the LoRA page
 class LoraPageManager {
@@ -63,11 +64,14 @@ class LoraPageManager {
     
     async initialize() {
         // Initialize page-specific components
-        initializeEventListeners();
+        this.initEventListeners();
         restoreFolderFilter();
         initFolderTagsVisibility();
         new LoraContextMenu();
         
+        // Check for custom filters from recipe page navigation
+        this.checkCustomFilters();
+        
         // Initialize cards for current bulk mode state (should be false initially)
         updateCardsForBulkMode(state.bulkMode);
         
@@ -77,22 +81,119 @@ class LoraPageManager {
         // Initialize common page features (lazy loading, infinite scroll)
         appCore.initializePageFeatures();
     }
-}
 
-// Initialize event listeners
-function initializeEventListeners() {
-    const sortSelect = document.getElementById('sortSelect');
-    if (sortSelect) {
-        sortSelect.value = state.sortBy;
-        sortSelect.addEventListener('change', async (e) => {
-            state.sortBy = e.target.value;
-            await resetAndReload();
-        });
+    // Check for custom filter parameters in session storage
+    checkCustomFilters() {
+        const filterLoraHash = getSessionItem('recipe_to_lora_filterLoraHash');
+        const filterLoraHashes = getSessionItem('recipe_to_lora_filterLoraHashes');
+        const filterRecipeName = getSessionItem('filterRecipeName');
+        const viewLoraDetail = getSessionItem('viewLoraDetail');
+
+        console.log("Checking custom filters...");
+        console.log("filterLoraHash:", filterLoraHash);
+        console.log("filterLoraHashes:", filterLoraHashes);
+        console.log("filterRecipeName:", filterRecipeName);
+        console.log("viewLoraDetail:", viewLoraDetail);
+        
+        if ((filterLoraHash || filterLoraHashes) && filterRecipeName) {
+            // Found custom filter parameters, set up the custom filter
+            
+            // Show the filter indicator
+            const indicator = document.getElementById('customFilterIndicator');
+            const filterText = indicator.querySelector('.customFilterText');
+            
+            if (indicator && filterText) {
+                indicator.classList.remove('hidden');
+                
+                // Set text content with recipe name
+                const filterType = filterLoraHash && viewLoraDetail ? "Viewing LoRA from" : "Viewing LoRAs from";
+                const displayText = `${filterType}: ${filterRecipeName}`;
+                
+                filterText.textContent = this._truncateText(displayText, 30);
+                filterText.setAttribute('title', displayText);
+                
+                // Add click handler for the clear button
+                const clearBtn = indicator.querySelector('.clear-filter');
+                if (clearBtn) {
+                    clearBtn.addEventListener('click', this.clearCustomFilter);
+                }
+
+                // Add pulse animation
+                const filterElement = indicator.querySelector('.filter-active');
+                if (filterElement) {
+                    filterElement.classList.add('animate');
+                    setTimeout(() => filterElement.classList.remove('animate'), 600);
+                }
+            }
+            
+            // If we're viewing a specific LoRA detail, set up to open the modal
+            if (filterLoraHash && viewLoraDetail) {
+                // Store this to fetch after initial load completes
+                state.pendingLoraHash = filterLoraHash;
+            }
+        }
+    }
+    
+    // Helper to truncate text with ellipsis
+    _truncateText(text, maxLength) {
+        return text.length > maxLength ? text.substring(0, maxLength - 3) + '...' : text;
+    }
+    
+    // Clear the custom filter and reload the page
+    clearCustomFilter = async () => {
+        console.log("Clearing custom filter...");
+        // Remove filter parameters from session storage
+        removeSessionItem('recipe_to_lora_filterLoraHash');
+        removeSessionItem('recipe_to_lora_filterLoraHashes');
+        removeSessionItem('filterRecipeName');
+        removeSessionItem('viewLoraDetail');
+        
+        // Hide the filter indicator
+        const indicator = document.getElementById('customFilterIndicator');
+        if (indicator) {
+            indicator.classList.add('hidden');
+        }
+        
+        // Reset state
+        if (state.pendingLoraHash) {
+            delete state.pendingLoraHash;
+        }
+        
+        // Reload the loras
+        await resetAndReload();
+    }
+    
+    loadSortPreference() {
+        const savedSort = getStorageItem('loras_sort');
+        if (savedSort) {
+            state.sortBy = savedSort;
+            const sortSelect = document.getElementById('sortSelect');
+            if (sortSelect) {
+                sortSelect.value = savedSort;
+            }
+        }
     }
 
-    document.querySelectorAll('.folder-tags .tag').forEach(tag => {
-        tag.addEventListener('click', toggleFolder);
-    });
+    saveSortPreference(sortValue) {
+        setStorageItem('loras_sort', sortValue);
+    }
+
+	initEventListeners() {
+		const sortSelect = document.getElementById('sortSelect');
+		if (sortSelect) {
+			sortSelect.value = state.sortBy;
+			this.loadSortPreference();
+			sortSelect.addEventListener('change', async (e) => {
+				state.sortBy = e.target.value;
+				this.saveSortPreference(e.target.value);
+				await resetAndReload();
+			});
+		}
+
+		document.querySelectorAll('.folder-tags .tag').forEach(tag => {
+			tag.addEventListener('click', toggleFolder);
+		});
+	}
 }
 
 // Initialize everything when DOM is ready

static/js/managers/DownloadManager.js

@@ -3,7 +3,7 @@ import { showToast } from '../utils/uiHelpers.js';
 import { LoadingManager } from './LoadingManager.js';
 import { state } from '../state/index.js';
 import { resetAndReload } from '../api/loraApi.js';
-
+import { getStorageItem } from '../utils/storageHelpers.js';
 export class DownloadManager {
     constructor() {
         this.currentVersion = null;
@@ -246,6 +246,12 @@ export class DownloadManager {
                 `<option value="${root}">${root}</option>`
             ).join('');
 
+            // Set default lora root if available
+            const defaultRoot = getStorageItem('settings', {}).default_loras_root;
+            if (defaultRoot && data.roots.includes(defaultRoot)) {
+                loraRoot.value = defaultRoot;
+            }
+
             // Initialize folder browser after loading roots
             this.initializeFolderBrowser();
         } catch (error) {

static/js/managers/ImportManager.js

@@ -1,6 +1,7 @@
 import { modalManager } from './ModalManager.js';
 import { showToast } from '../utils/uiHelpers.js';
 import { LoadingManager } from './LoadingManager.js';
+import { getStorageItem } from '../utils/storageHelpers.js';
 
 export class ImportManager {
     constructor() {
@@ -26,7 +27,7 @@ export class ImportManager {
         this.importMode = 'upload'; // Default mode: 'upload' or 'url'
     }
 
-    showImportModal() {
+    showImportModal(recipeData = null, recipeId = null) {
         if (!this.initialized) {
             // Check if modal exists
             const modal = document.getElementById('importModal');
@@ -39,6 +40,10 @@ export class ImportManager {
         
         // Always reset the state when opening the modal
         this.resetSteps();
+        if (recipeData) {
+            this.downloadableLoRAs = recipeData.loras;
+            this.recipeId = recipeId;
+        }
         
         // Show the modal
         modalManager.showModal('importModal', null, () => {
@@ -116,6 +121,7 @@ export class ImportManager {
         this.recipeName = '';
         this.recipeTags = [];
         this.missingLoras = [];
+        this.downloadableLoRAs = [];
         
         // Reset import mode to upload
         this.importMode = 'upload';
@@ -398,7 +404,7 @@ export class ImportManager {
                 }
             }
         }
-        
+
         // Update LoRA count information
         const totalLoras = this.recipeData.loras.length;
         const existingLoras = this.recipeData.loras.filter(lora => lora.existsLocally).length;
@@ -548,33 +554,24 @@ export class ImportManager {
                 <div class="warning-icon"><i class="fas fa-exclamation-triangle"></i></div>
                 <div class="warning-content">
                     <div class="warning-title">${deletedLoras} LoRA(s) have been deleted from Civitai</div>
-                    <div class="warning-text">These LoRAs cannot be downloaded. If you continue, they will be removed from the recipe.</div>
+                    <div class="warning-text">These LoRAs cannot be downloaded. If you continue, they will remain in the recipe but won't be included when used.</div>
                 </div>
             `;
             
             // Insert before the buttons container
             buttonsContainer.parentNode.insertBefore(warningContainer, buttonsContainer);
+        }
             
-            // Update next button text to be more clear
-            nextButton.textContent = 'Continue Without Deleted LoRAs';
+        // If we have missing LoRAs (not deleted), show "Download Missing LoRAs"
+        // Otherwise show "Save Recipe"
+        const missingNotDeleted = this.recipeData.loras.filter(
+            lora => !lora.existsLocally && !lora.isDeleted
+        ).length;
+        
+        if (missingNotDeleted > 0) {
+            nextButton.textContent = 'Download Missing LoRAs';
         } else {
-            // Remove warning if no deleted LoRAs
-            const warningMsg = document.getElementById('deletedLorasWarning');
-            if (warningMsg) {
-                warningMsg.remove();
-            }
-            
-            // If we have missing LoRAs (not deleted), show "Download Missing LoRAs"
-            // Otherwise show "Save Recipe"
-            const missingNotDeleted = this.recipeData.loras.filter(
-                lora => !lora.existsLocally && !lora.isDeleted
-            ).length;
-            
-            if (missingNotDeleted > 0) {
-                nextButton.textContent = 'Download Missing LoRAs';
-            } else {
-                nextButton.textContent = 'Save Recipe';
-            }
+            nextButton.textContent = 'Save Recipe';
         }
     }
 
@@ -783,6 +780,12 @@ export class ImportManager {
                 loraRoot.innerHTML = rootsData.roots.map(root => 
                     `<option value="${root}">${root}</option>`
                 ).join('');
+                
+                // Set default lora root if available
+                const defaultRoot = getStorageItem('settings', {}).default_loras_root;
+                if (defaultRoot && rootsData.roots.includes(defaultRoot)) {
+                    loraRoot.value = defaultRoot;
+                }
             }
             
             // Fetch folders
@@ -839,219 +842,233 @@ export class ImportManager {
     }
 
     async saveRecipe() {
-        if (!this.recipeName) {
+        // Check if we're in download-only mode (for existing recipe)
+        const isDownloadOnly = !!this.recipeId;
+
+        console.log("isDownloadOnly", isDownloadOnly);
+        
+        if (!isDownloadOnly && !this.recipeName) {
             showToast('Please enter a recipe name', 'error');
             return;
         }
         
         try {
-            // First save the recipe
-            this.loadingManager.showSimpleLoading('Saving recipe...');
+            this.loadingManager.showSimpleLoading(isDownloadOnly ? 'Preparing download...' : 'Saving recipe...');
             
-            // Create form data for save request
-            const formData = new FormData();
-            
-            // Handle image data - either from file upload or from URL mode
-            if (this.recipeImage) {
-                // File upload mode
-                formData.append('image', this.recipeImage);
-            } else if (this.recipeData && this.recipeData.image_base64) {
-                // URL mode with base64 data
-                formData.append('image_base64', this.recipeData.image_base64);
-            } else if (this.importMode === 'url') {
-                // Fallback for URL mode - tell backend to fetch the image again
-                const urlInput = document.getElementById('imageUrlInput');
-                if (urlInput && urlInput.value) {
-                    formData.append('image_url', urlInput.value);
+            // If we're only downloading LoRAs for an existing recipe, skip the recipe save step
+            if (!isDownloadOnly) {
+                // First save the recipe
+                // Create form data for save request
+                const formData = new FormData();
+                
+                // Handle image data - either from file upload or from URL mode
+                if (this.recipeImage) {
+                    // File upload mode
+                    formData.append('image', this.recipeImage);
+                } else if (this.recipeData && this.recipeData.image_base64) {
+                    // URL mode with base64 data
+                    formData.append('image_base64', this.recipeData.image_base64);
+                } else if (this.importMode === 'url') {
+                    // Fallback for URL mode - tell backend to fetch the image again
+                    const urlInput = document.getElementById('imageUrlInput');
+                    if (urlInput && urlInput.value) {
+                        formData.append('image_url', urlInput.value);
+                    } else {
+                        throw new Error('No image data available');
+                    }
                 } else {
                     throw new Error('No image data available');
                 }
-            } else {
-                throw new Error('No image data available');
+                
+                formData.append('name', this.recipeName);
+                formData.append('tags', JSON.stringify(this.recipeTags));
+                
+                // Prepare complete metadata including generation parameters
+                const completeMetadata = {
+                    base_model: this.recipeData.base_model || "",
+                    loras: this.recipeData.loras || [],
+                    gen_params: this.recipeData.gen_params || {},
+                    raw_metadata: this.recipeData.raw_metadata || {}
+                };
+                
+                formData.append('metadata', JSON.stringify(completeMetadata));
+            
+                // Send save request
+                const response = await fetch('/api/recipes/save', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const result = await response.json();
+
+                if (!result.success) {
+                    // Handle save error
+                    console.error("Failed to save recipe:", result.error);
+                    showToast(result.error, 'error');
+                    // Close modal
+                    modalManager.closeModal('importModal');
+                    return;
+                }
             }
-            
-            formData.append('name', this.recipeName);
-            formData.append('tags', JSON.stringify(this.recipeTags));
-            
-            // Prepare complete metadata including generation parameters
-            const completeMetadata = {
-                base_model: this.recipeData.base_model || "",
-                loras: this.recipeData.loras || [],
-                gen_params: this.recipeData.gen_params || {},
-                raw_metadata: this.recipeData.raw_metadata || {}
-            };
-            
-            formData.append('metadata', JSON.stringify(completeMetadata));
-            
-            // Send save request
-            const response = await fetch('/api/recipes/save', {
-                method: 'POST',
-                body: formData
-            });
-            
-            const result = await response.json();
-            if (result.success) {
-                // Handle successful save
+
+            // Check if we need to download LoRAs
+            let failedDownloads = 0;
+            if (this.downloadableLoRAs && this.downloadableLoRAs.length > 0) {
+                // For download, we need to validate the target path
+                const loraRoot = document.getElementById('importLoraRoot')?.value;
+                if (!loraRoot) {
+                    throw new Error('Please select a LoRA root directory');
+                }
                 
+                // Build target path
+                let targetPath = loraRoot;
+                if (this.selectedFolder) {
+                    targetPath += '/' + this.selectedFolder;
+                }
                 
-                // Check if we need to download LoRAs
-                if (this.downloadableLoRAs && this.downloadableLoRAs.length > 0) {
-                    // For download, we need to validate the target path
-                    const loraRoot = document.getElementById('importLoraRoot')?.value;
-                    if (!loraRoot) {
-                        throw new Error('Please select a LoRA root directory');
-                    }
-                    
-                    // Build target path
-                    let targetPath = loraRoot;
-                    if (this.selectedFolder) {
-                        targetPath += '/' + this.selectedFolder;
-                    }
-                    
-                    const newFolder = document.getElementById('importNewFolder')?.value?.trim();
-                    if (newFolder) {
-                        targetPath += '/' + newFolder;
-                    }
-                    
-                    // Set up WebSocket for progress updates
-                    const wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
-                    const ws = new WebSocket(`${wsProtocol}${window.location.host}/ws/fetch-progress`);
-                    
-                    // Show enhanced loading with progress details for multiple items
-                    const updateProgress = this.loadingManager.showDownloadProgress(this.downloadableLoRAs.length);
-                    
-                    let completedDownloads = 0;
-                    let failedDownloads = 0;
-                    let earlyAccessFailures = 0;
-                    let currentLoraProgress = 0;
-                    
-                    // Set up progress tracking for current download
-                    ws.onmessage = (event) => {
-                        const data = JSON.parse(event.data);
-                        if (data.status === 'progress') {
-                            // Update current LoRA progress
-                            currentLoraProgress = data.progress;
-                            
-                            // Get current LoRA name
-                            const currentLora = this.downloadableLoRAs[completedDownloads + failedDownloads];
-                            const loraName = currentLora ? currentLora.name : '';
-                            
-                            // Update progress display
-                            updateProgress(currentLoraProgress, completedDownloads, loraName);
-                            
-                            // Add more detailed status messages based on progress
-                            if (currentLoraProgress < 3) {
-                                this.loadingManager.setStatus(
-                                    `Preparing download for LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
-                                );
-                            } else if (currentLoraProgress === 3) {
-                                this.loadingManager.setStatus(
-                                    `Downloaded preview for LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
-                                );
-                            } else if (currentLoraProgress > 3 && currentLoraProgress < 100) {
-                                this.loadingManager.setStatus(
-                                    `Downloading LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
-                                );
-                            } else {
-                                this.loadingManager.setStatus(
-                                    `Finalizing LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
-                                );
-                            }
-                        }
-                    };
-                    
-                    for (let i = 0; i < this.downloadableLoRAs.length; i++) {
-                        const lora = this.downloadableLoRAs[i];
+                const newFolder = document.getElementById('importNewFolder')?.value?.trim();
+                if (newFolder) {
+                    targetPath += '/' + newFolder;
+                }
+                
+                // Set up WebSocket for progress updates
+                const wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+                const ws = new WebSocket(`${wsProtocol}${window.location.host}/ws/fetch-progress`);
+                
+                // Show enhanced loading with progress details for multiple items
+                const updateProgress = this.loadingManager.showDownloadProgress(this.downloadableLoRAs.length);
+                
+                let completedDownloads = 0;
+                let accessFailures = 0;
+                let currentLoraProgress = 0;
+                
+                // Set up progress tracking for current download
+                ws.onmessage = (event) => {
+                    const data = JSON.parse(event.data);
+                    if (data.status === 'progress') {
+                        // Update current LoRA progress
+                        currentLoraProgress = data.progress;
                         
-                        // Reset current LoRA progress for new download
-                        currentLoraProgress = 0;
+                        // Get current LoRA name
+                        const currentLora = this.downloadableLoRAs[completedDownloads + failedDownloads];
+                        const loraName = currentLora ? currentLora.name : '';
                         
-                        // Initial status update for new LoRA
-                        this.loadingManager.setStatus(`Starting download for LoRA ${i+1}/${this.downloadableLoRAs.length}`);
-                        updateProgress(0, completedDownloads, lora.name);
+                        // Update progress display
+                        updateProgress(currentLoraProgress, completedDownloads, loraName);
                         
-                        try {
-                            // Download the LoRA
-                            const response = await fetch('/api/download-lora', {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({
-                                    download_url: lora.downloadUrl,
-                                    lora_root: loraRoot,
-                                    relative_path: targetPath.replace(loraRoot + '/', '')
-                                })
-                            });
-                            
-                            if (!response.ok) {
-                                const errorText = await response.text();
-                                console.error(`Failed to download LoRA ${lora.name}: ${errorText}`);
-                                
-                                // Check if this is an early access error (status 401 is the key indicator)
-                                if (response.status === 401 || 
-                                   (errorText.toLowerCase().includes('early access') || 
-                                    errorText.toLowerCase().includes('purchase'))) {
-                                    earlyAccessFailures++;
-                                    this.loadingManager.setStatus(
-                                        `Failed to download ${lora.name}: Early Access required`
-                                    );
-                                }
-                                
-                                failedDownloads++;
-                                // Continue with next download
-                            } else {
-                                completedDownloads++;
-                                
-                                // Update progress to show completion of current LoRA
-                                updateProgress(100, completedDownloads, '');
-                                
-                                if (completedDownloads + failedDownloads < this.downloadableLoRAs.length) {
-                                    this.loadingManager.setStatus(
-                                        `Completed ${completedDownloads}/${this.downloadableLoRAs.length} LoRAs. Starting next download...`
-                                    );
-                                }
-                            }
-                        } catch (downloadError) {
-                            console.error(`Error downloading LoRA ${lora.name}:`, downloadError);
-                            failedDownloads++;
-                            // Continue with next download
-                        }
-                    }
-                    
-                    // Close WebSocket
-                    ws.close();
-                    
-                    // Show appropriate completion message based on results
-                    if (failedDownloads === 0) {
-                        showToast(`All ${completedDownloads} LoRAs downloaded successfully`, 'success');
-                    } else {
-                        if (earlyAccessFailures > 0) {
-                            showToast(
-                                `Downloaded ${completedDownloads} of ${this.downloadableLoRAs.length} LoRAs. ${earlyAccessFailures} failed due to Early Access restrictions.`,
-                                'error'
+                        // Add more detailed status messages based on progress
+                        if (currentLoraProgress < 3) {
+                            this.loadingManager.setStatus(
+                                `Preparing download for LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
+                            );
+                        } else if (currentLoraProgress === 3) {
+                            this.loadingManager.setStatus(
+                                `Downloaded preview for LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
+                            );
+                        } else if (currentLoraProgress > 3 && currentLoraProgress < 100) {
+                            this.loadingManager.setStatus(
+                                `Downloading LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
                             );
                         } else {
-                            showToast(`Downloaded ${completedDownloads} of ${this.downloadableLoRAs.length} LoRAs`, 'error');
+                            this.loadingManager.setStatus(
+                                `Finalizing LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
+                            );
                         }
                     }
+                };
+                
+                for (let i = 0; i < this.downloadableLoRAs.length; i++) {
+                    const lora = this.downloadableLoRAs[i];
+                    
+                    // Reset current LoRA progress for new download
+                    currentLoraProgress = 0;
+                    
+                    // Initial status update for new LoRA
+                    this.loadingManager.setStatus(`Starting download for LoRA ${i+1}/${this.downloadableLoRAs.length}`);
+                    updateProgress(0, completedDownloads, lora.name);
+                    
+                    try {
+                        // Download the LoRA
+                        const response = await fetch('/api/download-lora', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                download_url: lora.downloadUrl,
+                                model_version_id: lora.modelVersionId,
+                                model_hash: lora.hash,
+                                lora_root: loraRoot,
+                                relative_path: targetPath.replace(loraRoot + '/', '')
+                            })
+                        });
+                        
+                        if (!response.ok) {
+                            const errorText = await response.text();
+                            console.error(`Failed to download LoRA ${lora.name}: ${errorText}`);
+                            
+                            // Check if this is an early access error (status 401 is the key indicator)
+                            if (response.status === 401) {
+                                accessFailures++;
+                                this.loadingManager.setStatus(
+                                    `Failed to download ${lora.name}: Access restricted`
+                                );
+                            }
+                            
+                            failedDownloads++;
+                            // Continue with next download
+                        } else {
+                            completedDownloads++;
+                            
+                            // Update progress to show completion of current LoRA
+                            updateProgress(100, completedDownloads, '');
+                            
+                            if (completedDownloads + failedDownloads < this.downloadableLoRAs.length) {
+                                this.loadingManager.setStatus(
+                                    `Completed ${completedDownloads}/${this.downloadableLoRAs.length} LoRAs. Starting next download...`
+                                );
+                            }
+                        }
+                    } catch (downloadError) {
+                        console.error(`Error downloading LoRA ${lora.name}:`, downloadError);
+                        failedDownloads++;
+                        // Continue with next download
+                    }
                 }
+                
+                // Close WebSocket
+                ws.close();
+                
+                // Show appropriate completion message based on results
+                if (failedDownloads === 0) {
+                    showToast(`All ${completedDownloads} LoRAs downloaded successfully`, 'success');
+                } else {
+                    if (accessFailures > 0) {
+                        showToast(
+                            `Downloaded ${completedDownloads} of ${this.downloadableLoRAs.length} LoRAs. ${accessFailures} failed due to access restrictions. Check your API key in settings or early access status.`,
+                            'error'
+                        );
+                    } else {
+                        showToast(`Downloaded ${completedDownloads} of ${this.downloadableLoRAs.length} LoRAs`, 'error');
+                    }
+                }
+            }
 
-                // Show success message for recipe save
-                showToast(`Recipe "${this.recipeName}" saved successfully`, 'success');
-                
-                // Close modal and reload recipes
-                modalManager.closeModal('importModal');
-                
-                window.recipeManager.loadRecipes(true); // true to reset pagination
-                
+            // Show success message
+            if (isDownloadOnly) {
+                if (failedDownloads === 0) {    
+                    showToast('LoRAs downloaded successfully', 'success');
+                }
             } else {
-                // Handle error
-                console.error(`Failed to save recipe: ${result.error}`);
-                // Show error message to user
-                showToast(result.error, 'error');
+                showToast(`Recipe "${this.recipeName}" saved successfully`, 'success');
             }
             
+            // Close modal
+            modalManager.closeModal('importModal');
+            
+            // Refresh the recipe
+            window.recipeManager.loadRecipes(this.recipeId);
+            
         } catch (error) {
-            console.error('Error saving recipe:', error);
+            console.error('Error:', error);
             showToast(error.message, 'error');
         } finally {
             this.loadingManager.hide();
@@ -1213,4 +1230,33 @@ export class ImportManager {
         
         return true;
     }
-} 
+
+    // Add new method to handle downloading missing LoRAs from a recipe
+    downloadMissingLoras(recipeData, recipeId) {
+        // Store the recipe data and ID
+        this.recipeData = recipeData;
+        this.recipeId = recipeId;
+        
+        // Show the location step directly
+        this.showImportModal(recipeData, recipeId);
+        this.proceedToLocation();
+        
+        // Update the modal title to reflect we're downloading for an existing recipe
+        const modalTitle = document.querySelector('#importModal h2');
+        if (modalTitle) {
+            modalTitle.textContent = 'Download Missing LoRAs';
+        }
+        
+        // Update the save button text
+        const saveButton = document.querySelector('#locationStep .primary-btn');
+        if (saveButton) {
+            saveButton.textContent = 'Download Missing LoRAs';
+        }
+        
+        // Hide the back button since we're skipping steps
+        const backButton = document.querySelector('#locationStep .secondary-btn');
+        if (backButton) {
+            backButton.style.display = 'none';
+        }
+    }
+}

static/js/managers/MoveManager.js

@@ -2,6 +2,7 @@ import { showToast } from '../utils/uiHelpers.js';
 import { state } from '../state/index.js';
 import { resetAndReload } from '../api/loraApi.js';
 import { modalManager } from './ModalManager.js';
+import { getStorageItem } from '../utils/storageHelpers.js';
 
 class MoveManager {
     constructor() {
@@ -87,6 +88,12 @@ class MoveManager {
                 `<option value="${root}">${root}</option>`
             ).join('');
 
+            // Set default lora root if available
+            const defaultRoot = getStorageItem('settings', {}).default_loras_root;
+            if (defaultRoot && data.roots.includes(defaultRoot)) {
+                this.loraRootSelect.value = defaultRoot;
+            }
+
             this.updatePathPreview();
             modalManager.showModal('moveModal');
             
@@ -166,11 +173,20 @@ class MoveManager {
             })
         });
 
+        const result = await response.json();
+        
         if (!response.ok) {
+            if (result && result.error) {
+                throw new Error(result.error);
+            }
             throw new Error('Failed to move model');
         }
 
-        showToast('Model moved successfully', 'success');
+        if (result && result.message) {
+            showToast(result.message, 'info');
+        } else {
+            showToast('Model moved successfully', 'success');
+        }
     }
     
     async moveBulkModels(filePaths, targetPath) {
@@ -195,11 +211,44 @@ class MoveManager {
             })
         });
 
+        const result = await response.json();
+
         if (!response.ok) {
             throw new Error('Failed to move models');
         }
 
-        showToast(`Successfully moved ${movedPaths.length} models`, 'success');
+        // Display results with more details
+        if (result.success) {
+            if (result.failure_count > 0) {
+                // Some files failed to move
+                showToast(`Moved ${result.success_count} models, ${result.failure_count} failed`, 'warning');
+                
+                // Log details about failures
+                console.log('Move operation results:', result.results);
+                
+                // Get list of failed files with reasons
+                const failedFiles = result.results
+                    .filter(r => !r.success)
+                    .map(r => {
+                        const fileName = r.path.substring(r.path.lastIndexOf('/') + 1);
+                        return `${fileName}: ${r.message}`;
+                    });
+                
+                // Show first few failures in a toast
+                if (failedFiles.length > 0) {
+                    const failureMessage = failedFiles.length <= 3 
+                        ? failedFiles.join('\n')
+                        : failedFiles.slice(0, 3).join('\n') + `\n(and ${failedFiles.length - 3} more)`;
+                    
+                    showToast(`Failed moves:\n${failureMessage}`, 'warning', 6000);
+                }
+            } else {
+                // All files moved successfully
+                showToast(`Successfully moved ${result.success_count} models`, 'success');
+            }
+        } else {
+            throw new Error(result.message || 'Failed to move models');
+        }
     }
 }
 

static/js/managers/SettingsManager.js

@@ -53,7 +53,7 @@ export class SettingsManager {
         this.initialized = true;
     }
 
-    loadSettingsToUI() {
+    async loadSettingsToUI() {
         // Set frontend settings from state
         const blurMatureContentCheckbox = document.getElementById('blurMatureContent');
         if (blurMatureContentCheckbox) {
@@ -66,9 +66,57 @@ export class SettingsManager {
             state.global.settings.show_only_sfw = showOnlySFWCheckbox.checked;
         }
         
+        // Set video autoplay on hover setting
+        const autoplayOnHoverCheckbox = document.getElementById('autoplayOnHover');
+        if (autoplayOnHoverCheckbox) {
+            autoplayOnHoverCheckbox.checked = state.global.settings.autoplayOnHover || false;
+        }
+
+        // Load default lora root
+        await this.loadLoraRoots();
+        
         // Backend settings are loaded from the template directly
     }
 
+    async loadLoraRoots() {
+        try {
+            const defaultLoraRootSelect = document.getElementById('defaultLoraRoot');
+            if (!defaultLoraRootSelect) return;
+            
+            // Fetch lora roots
+            const response = await fetch('/api/lora-roots');
+            if (!response.ok) {
+                throw new Error('Failed to fetch LoRA roots');
+            }
+            
+            const data = await response.json();
+            if (!data.roots || data.roots.length === 0) {
+                throw new Error('No LoRA roots found');
+            }
+            
+            // Clear existing options except the first one (No Default)
+            const noDefaultOption = defaultLoraRootSelect.querySelector('option[value=""]');
+            defaultLoraRootSelect.innerHTML = '';
+            defaultLoraRootSelect.appendChild(noDefaultOption);
+            
+            // Add options for each root
+            data.roots.forEach(root => {
+                const option = document.createElement('option');
+                option.value = root;
+                option.textContent = root;
+                defaultLoraRootSelect.appendChild(option);
+            });
+            
+            // Set selected value from settings
+            const defaultRoot = state.global.settings.default_loras_root || '';
+            defaultLoraRootSelect.value = defaultRoot;
+            
+        } catch (error) {
+            console.error('Error loading LoRA roots:', error);
+            showToast('Failed to load LoRA roots: ' + error.message, 'error');
+        }
+    }
+
     toggleSettings() {
         if (this.isOpen) {
             modalManager.closeModal('settingsModal');
@@ -78,17 +126,179 @@ export class SettingsManager {
         this.isOpen = !this.isOpen;
     }
 
+    // Auto-save methods for different control types
+
+    // For toggle switches
+    async saveToggleSetting(elementId, settingKey) {
+        const element = document.getElementById(elementId);
+        if (!element) return;
+        
+        const value = element.checked;
+        
+        // Update frontend state
+        if (settingKey === 'blur_mature_content') {
+            state.global.settings.blurMatureContent = value;
+        } else if (settingKey === 'show_only_sfw') {
+            state.global.settings.show_only_sfw = value;
+        } else if (settingKey === 'autoplay_on_hover') {
+            state.global.settings.autoplayOnHover = value;
+        } else {
+            // For any other settings that might be added in the future
+            state.global.settings[settingKey] = value;
+        }
+        
+        // Save to localStorage
+        setStorageItem('settings', state.global.settings);
+        
+        try {
+            // For backend settings, make API call
+            if (['show_only_sfw', 'blur_mature_content', 'autoplay_on_hover'].includes(settingKey)) {
+                const payload = {};
+                payload[settingKey] = value;
+                
+                const response = await fetch('/api/settings', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(payload)
+                });
+
+                if (!response.ok) {
+                    throw new Error('Failed to save setting');
+                }
+                
+                showToast(`Settings updated: ${settingKey.replace(/_/g, ' ')}`, 'success');
+            }
+            
+            // Apply frontend settings immediately
+            this.applyFrontendSettings();
+            
+            if (settingKey === 'show_only_sfw') {
+                this.reloadContent();
+            }
+            
+        } catch (error) {
+            showToast('Failed to save setting: ' + error.message, 'error');
+        }
+    }
+    
+    // For select dropdowns
+    async saveSelectSetting(elementId, settingKey) {
+        const element = document.getElementById(elementId);
+        if (!element) return;
+        
+        const value = element.value;
+        
+        // Update frontend state
+        if (settingKey === 'default_lora_root') {
+            state.global.settings.default_loras_root = value;
+        } else {
+            // For any other settings that might be added in the future
+            state.global.settings[settingKey] = value;
+        }
+        
+        // Save to localStorage
+        setStorageItem('settings', state.global.settings);
+        
+        try {
+            // For backend settings, make API call
+            const payload = {};
+            payload[settingKey] = value;
+            
+            const response = await fetch('/api/settings', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload)
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to save setting');
+            }
+            
+            showToast(`Settings updated: ${settingKey.replace(/_/g, ' ')}`, 'success');
+            
+        } catch (error) {
+            showToast('Failed to save setting: ' + error.message, 'error');
+        }
+    }
+    
+    // For input fields
+    async saveInputSetting(elementId, settingKey) {
+        const element = document.getElementById(elementId);
+        if (!element) return;
+        
+        const value = element.value;
+        
+        // For API key or other inputs that need to be saved on backend
+        try {
+            // Check if value has changed from existing value
+            const currentValue = state.global.settings[settingKey] || '';
+            if (value === currentValue) {
+                return; // No change, exit early
+            }
+            
+            // Update state
+            state.global.settings[settingKey] = value;
+            
+            // Save to localStorage if appropriate
+            if (!settingKey.includes('api_key')) { // Don't store API keys in localStorage for security
+                setStorageItem('settings', state.global.settings);
+            }
+            
+            // For backend settings, make API call
+            const payload = {};
+            payload[settingKey] = value;
+            
+            const response = await fetch('/api/settings', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(payload)
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to save setting');
+            }
+            
+            showToast(`Settings updated: ${settingKey.replace(/_/g, ' ')}`, 'success');
+            
+        } catch (error) {
+            showToast('Failed to save setting: ' + error.message, 'error');
+        }
+    }
+
+    async reloadContent() {
+        if (this.currentPage === 'loras') {
+            // Reload the loras without updating folders
+            await resetAndReload(false);
+        } else if (this.currentPage === 'recipes') {
+            // Reload the recipes without updating folders
+            await window.recipeManager.loadRecipes();
+        } else if (this.currentPage === 'checkpoints') {
+            // Reload the checkpoints without updating folders
+            await window.checkpointsManager.loadCheckpoints();
+        }
+    }
+
     async saveSettings() {
         // Get frontend settings from UI
         const blurMatureContent = document.getElementById('blurMatureContent').checked;
+        const showOnlySFW = document.getElementById('showOnlySFW').checked;
+        const defaultLoraRoot = document.getElementById('defaultLoraRoot').value;
+        const autoplayOnHover = document.getElementById('autoplayOnHover').checked;
         
         // Get backend settings
         const apiKey = document.getElementById('civitaiApiKey').value;
-        const showOnlySFW = document.getElementById('showOnlySFW').checked;
         
         // Update frontend state and save to localStorage
         state.global.settings.blurMatureContent = blurMatureContent;
         state.global.settings.show_only_sfw = showOnlySFW;
+        state.global.settings.default_loras_root = defaultLoraRoot;
+        state.global.settings.autoplayOnHover = autoplayOnHover;
         
         // Save settings to localStorage
         setStorageItem('settings', state.global.settings);
@@ -142,11 +352,42 @@ export class SettingsManager {
             }
         });
         
+        // Apply autoplay setting to existing videos in card previews
+        const autoplayOnHover = state.global.settings.autoplayOnHover;
+        document.querySelectorAll('.card-preview video').forEach(video => {
+            // Remove previous event listeners by cloning and replacing the element
+            const videoParent = video.parentElement;
+            const videoClone = video.cloneNode(true);
+            
+            if (autoplayOnHover) {
+                // Pause video initially and set up mouse events for hover playback
+                videoClone.removeAttribute('autoplay');
+                videoClone.pause();
+                
+                // Add mouse events to the parent element
+                videoParent.onmouseenter = () => videoClone.play();
+                videoParent.onmouseleave = () => {
+                    videoClone.pause();
+                    videoClone.currentTime = 0;
+                };
+            } else {
+                // Use default autoplay behavior
+                videoClone.setAttribute('autoplay', '');
+                videoParent.onmouseenter = null;
+                videoParent.onmouseleave = null;
+            }
+            
+            videoParent.replaceChild(videoClone, video);
+        });
+        
         // For show_only_sfw, there's no immediate action needed as it affects content loading
         // The setting will take effect on next reload
     }
 }
 
+// Create singleton instance
+export const settingsManager = new SettingsManager();
+
 // Helper function for toggling API key visibility
 export function toggleApiKeyVisibility(button) {
     const input = button.parentElement.querySelector('input');

static/js/managers/UpdateService.js

@@ -178,7 +178,8 @@ export class UpdateService {
                 if (this.updateInfo.changelog && this.updateInfo.changelog.length > 0) {
                     this.updateInfo.changelog.forEach(item => {
                         const listItem = document.createElement('li');
-                        listItem.textContent = item;
+                        // Parse markdown in changelog items
+                        listItem.innerHTML = this.parseMarkdown(item);
                         changelogList.appendChild(listItem);
                     });
                 } else {
@@ -201,6 +202,25 @@ export class UpdateService {
         }
     }
     
+    // Simple markdown parser for changelog items
+    parseMarkdown(text) {
+        if (!text) return '';
+        
+        // Handle bold text (**text**)
+        text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+        
+        // Handle italic text (*text*)
+        text = text.replace(/\*(.*?)\*/g, '<em>$1</em>');
+        
+        // Handle inline code (`code`)
+        text = text.replace(/`(.*?)`/g, '<code>$1</code>');
+        
+        // Handle links [text](url)
+        text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>');
+        
+        return text;
+    }
+    
     toggleUpdateModal() {
         const updateModal = modalManager.getModal('updateModal');
         

static/js/recipes.js

@@ -4,6 +4,8 @@ import { ImportManager } from './managers/ImportManager.js';
 import { RecipeCard } from './components/RecipeCard.js';
 import { RecipeModal } from './components/RecipeModal.js';
 import { getCurrentPageState } from './state/index.js';
+import { toggleApiKeyVisibility } from './managers/SettingsManager.js';
+import { getSessionItem, removeSessionItem } from './utils/storageHelpers.js';
 
 class RecipeManager {
     constructor() {
@@ -19,6 +21,14 @@ class RecipeManager {
         // Add state tracking for infinite scroll
         this.pageState.isLoading = false;
         this.pageState.hasMore = true;
+        
+        // Custom filter state
+        this.customFilter = {
+            active: false,
+            loraName: null,
+            loraHash: null,
+            recipeId: null
+        };
     }
     
     async initialize() {
@@ -28,6 +38,9 @@ class RecipeManager {
         // Set default search options if not already defined
         this._initSearchOptions();
         
+        // Check for custom filter parameters in session storage
+        this._checkCustomFilter();
+        
         // Load initial set of recipes
         await this.loadRecipes();
         
@@ -54,6 +67,101 @@ class RecipeManager {
         // Only expose what's needed for the page
         window.recipeManager = this;
         window.importManager = this.importManager;
+        window.toggleApiKeyVisibility = toggleApiKeyVisibility;
+    }
+    
+    _checkCustomFilter() {
+        // Check for Lora filter
+        const filterLoraName = getSessionItem('lora_to_recipe_filterLoraName');
+        const filterLoraHash = getSessionItem('lora_to_recipe_filterLoraHash');
+        
+        // Check for specific recipe ID
+        const viewRecipeId = getSessionItem('viewRecipeId');
+        
+        // Set custom filter if any parameter is present
+        if (filterLoraName || filterLoraHash || viewRecipeId) {
+            this.customFilter = {
+                active: true,
+                loraName: filterLoraName,
+                loraHash: filterLoraHash,
+                recipeId: viewRecipeId
+            };
+            
+            // Show custom filter indicator
+            this._showCustomFilterIndicator();
+        }
+    }
+    
+    _showCustomFilterIndicator() {
+        const indicator = document.getElementById('customFilterIndicator');
+        const textElement = document.getElementById('customFilterText');
+        
+        if (!indicator || !textElement) return;
+        
+        // Update text based on filter type
+        let filterText = '';
+        
+        if (this.customFilter.recipeId) {
+            filterText = 'Viewing specific recipe';
+        } else if (this.customFilter.loraName) {
+            // Format with Lora name
+            const loraName = this.customFilter.loraName;
+            const displayName = loraName.length > 25 ? 
+                loraName.substring(0, 22) + '...' : 
+                loraName;
+                
+            filterText = `<span>Recipes using: <span class="lora-name">${displayName}</span></span>`;
+        } else {
+            filterText = 'Filtered recipes';
+        }
+        
+        // Update indicator text and show it
+        textElement.innerHTML = filterText;
+        // Add title attribute to show the lora name as a tooltip
+        if (this.customFilter.loraName) {
+            textElement.setAttribute('title', this.customFilter.loraName);
+        }
+        indicator.classList.remove('hidden');
+        
+        // Add pulse animation
+        const filterElement = indicator.querySelector('.filter-active');
+        if (filterElement) {
+            filterElement.classList.add('animate');
+            setTimeout(() => filterElement.classList.remove('animate'), 600);
+        }
+        
+        // Add click handler for clear filter button
+        const clearFilterBtn = indicator.querySelector('.clear-filter');
+        if (clearFilterBtn) {
+            clearFilterBtn.addEventListener('click', (e) => {
+                e.stopPropagation();  // Prevent button click from triggering
+                this._clearCustomFilter();
+            });
+        }
+    }
+    
+    _clearCustomFilter() {
+        // Reset custom filter
+        this.customFilter = {
+            active: false,
+            loraName: null,
+            loraHash: null,
+            recipeId: null
+        };
+        
+        // Hide indicator
+        const indicator = document.getElementById('customFilterIndicator');
+        if (indicator) {
+            indicator.classList.add('hidden');
+        }
+        
+        // Clear any session storage items
+        removeSessionItem('lora_to_recipe_filterLoraName');
+        removeSessionItem('lora_to_recipe_filterLoraHash');
+        removeSessionItem('viewRecipeId');
+        
+        // Reload recipes without custom filter
+        this.loadRecipes();
     }
     
     initEventListeners() {
@@ -81,6 +189,12 @@ class RecipeManager {
                 if (grid) grid.innerHTML = '';
             }
             
+            // If we have a specific recipe ID to load
+            if (this.customFilter.active && this.customFilter.recipeId) {
+                await this._loadSpecificRecipe(this.customFilter.recipeId);
+                return;
+            }
+            
             // Build query parameters
             const params = new URLSearchParams({
                 page: this.pageState.currentPage,
@@ -88,28 +202,38 @@ class RecipeManager {
                 sort_by: this.pageState.sortBy
             });
             
-            // Add search filter if present
-            if (this.pageState.filters.search) {
-                params.append('search', this.pageState.filters.search);
+            // Add custom filter for Lora if present
+            if (this.customFilter.active && this.customFilter.loraHash) {
+                params.append('lora_hash', this.customFilter.loraHash);
                 
-                // Add search option parameters
-                if (this.pageState.searchOptions) {
-                    params.append('search_title', this.pageState.searchOptions.title.toString());
-                    params.append('search_tags', this.pageState.searchOptions.tags.toString());
-                    params.append('search_lora_name', this.pageState.searchOptions.loraName.toString());
-                    params.append('search_lora_model', this.pageState.searchOptions.loraModel.toString());
-                    params.append('fuzzy', 'true');
+                // Skip other filters when using custom filter
+                params.append('bypass_filters', 'true');
+            } else {
+                // Normal filtering logic
+                
+                // Add search filter if present
+                if (this.pageState.filters.search) {
+                    params.append('search', this.pageState.filters.search);
+                    
+                    // Add search option parameters
+                    if (this.pageState.searchOptions) {
+                        params.append('search_title', this.pageState.searchOptions.title.toString());
+                        params.append('search_tags', this.pageState.searchOptions.tags.toString());
+                        params.append('search_lora_name', this.pageState.searchOptions.loraName.toString());
+                        params.append('search_lora_model', this.pageState.searchOptions.loraModel.toString());
+                        params.append('fuzzy', 'true');
+                    }
+                }
+                
+                // Add base model filters
+                if (this.pageState.filters.baseModel && this.pageState.filters.baseModel.length) {
+                    params.append('base_models', this.pageState.filters.baseModel.join(','));
+                }
+                
+                // Add tag filters
+                if (this.pageState.filters.tags && this.pageState.filters.tags.length) {
+                    params.append('tags', this.pageState.filters.tags.join(','));
                 }
-            }
-            
-            // Add base model filters
-            if (this.pageState.filters.baseModel && this.pageState.filters.baseModel.length) {
-                params.append('base_models', this.pageState.filters.baseModel.join(','));
-            }
-            
-            // Add tag filters
-            if (this.pageState.filters.tags && this.pageState.filters.tags.length) {
-                params.append('tags', this.pageState.filters.tags.join(','));
             }
 
             // Fetch recipes
@@ -137,6 +261,46 @@ class RecipeManager {
         }
     }
     
+    async _loadSpecificRecipe(recipeId) {
+        try {
+            // Fetch specific recipe by ID
+            const response = await fetch(`/api/recipe/${recipeId}`);
+            
+            if (!response.ok) {
+                throw new Error(`Failed to load recipe: ${response.statusText}`);
+            }
+            
+            const recipe = await response.json();
+            
+            // Create a data structure that matches the expected format
+            const recipeData = {
+                items: [recipe],
+                total: 1,
+                page: 1,
+                page_size: 1,
+                total_pages: 1
+            };
+            
+            // Update grid with single recipe
+            this.updateRecipesGrid(recipeData, true);
+            
+            // Pagination not needed for single recipe
+            this.pageState.hasMore = false;
+            
+            // Show recipe details modal
+            setTimeout(() => {
+                this.showRecipeDetails(recipe);
+            }, 300);
+            
+        } catch (error) {
+            console.error('Error loading specific recipe:', error);
+            appCore.showToast('Failed to load recipe details', 'error');
+            
+            // Clear the filter and show all recipes
+            this._clearCustomFilter();
+        }
+    }
+    
     updateRecipesGrid(data, resetGrid = true) {
         const grid = document.getElementById('recipeGrid');
         if (!grid) return;

static/js/utils/storageHelpers.js

@@ -69,6 +69,53 @@ export function removeStorageItem(key) {
     localStorage.removeItem(key); // Also remove legacy key
 }
 
+/**
+ * Get an item from sessionStorage with namespace support
+ * @param {string} key - The key without prefix
+ * @param {any} defaultValue - Default value if key doesn't exist
+ * @returns {any} The stored value or defaultValue
+ */
+export function getSessionItem(key, defaultValue = null) {
+    // Try with prefix
+    const prefixedValue = sessionStorage.getItem(STORAGE_PREFIX + key);
+    
+    if (prefixedValue !== null) {
+        // If it's a JSON string, parse it
+        try {
+            return JSON.parse(prefixedValue);
+        } catch (e) {
+            return prefixedValue;
+        }
+    }
+    
+    // Return default value if key doesn't exist
+    return defaultValue;
+}
+
+/**
+ * Set an item in sessionStorage with namespace prefix
+ * @param {string} key - The key without prefix
+ * @param {any} value - The value to store
+ */
+export function setSessionItem(key, value) {
+    const prefixedKey = STORAGE_PREFIX + key;
+    
+    // Convert objects and arrays to JSON strings
+    if (typeof value === 'object' && value !== null) {
+        sessionStorage.setItem(prefixedKey, JSON.stringify(value));
+    } else {
+        sessionStorage.setItem(prefixedKey, value);
+    }
+}
+
+/**
+ * Remove an item from sessionStorage with namespace prefix
+ * @param {string} key - The key without prefix
+ */
+export function removeSessionItem(key) {
+    sessionStorage.removeItem(STORAGE_PREFIX + key);
+}
+
 /**
  * Migrate all existing localStorage items to use the prefix
  * This should be called once during application initialization

templates/base.html

@@ -37,6 +37,49 @@
     <link rel="preconnect" href="https://civitai.com">
     <link rel="preconnect" href="https://cdnjs.cloudflare.com">
 
+    <!-- Add styles for initialization notice -->
+    {% if is_initializing %}
+    <style>
+        .initialization-notice {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.85);
+            z-index: 9999;
+            margin-top: 0;
+            border-radius: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+        }
+        .notice-content {
+            background-color: rgba(30, 30, 30, 0.9);
+            border-radius: 10px;
+            padding: 30px;
+            text-align: center;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+            max-width: 500px;
+            width: 80%;
+        }
+        .loading-spinner {
+            border: 5px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 5px solid #fff;
+            width: 50px;
+            height: 50px;
+            margin: 0 auto 20px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+    {% endif %}
+
     <script>
         // 计算滚动条宽度并设置CSS变量
         document.addEventListener('DOMContentLoaded', () => {
@@ -52,6 +95,15 @@
 </head>
 
 <body data-page="{% block page_id %}base{% endblock %}">
+    {% if is_initializing %}
+    <div class="initialization-notice">
+        <div class="notice-content">
+            <div class="loading-spinner"></div>
+            <h2>{% block init_title %}Initializing{% endblock %}</h2>
+            <p>{% block init_message %}Scanning and building cache. This may take a few minutes...{% endblock %}</p>
+        </div>
+    </div>
+    {% else %}
     {% include 'components/header.html' %}
 
     <div class="page-content">
@@ -61,22 +113,12 @@
         {% block additional_components %}{% endblock %}
 
         <div class="container">
-            {% if is_initializing %}
-            <div class="initialization-notice">
-                <div class="notice-content">
-                    <div class="loading-spinner"></div>
-                    <h2>{% block init_title %}Initializing{% endblock %}</h2>
-                    <p>{% block init_message %}Scanning and building cache. This may take a few minutes...{% endblock %}
-                    </p>
-                </div>
-            </div>
-            {% else %}
             {% block content %}{% endblock %}
-            {% endif %}
         </div>
 
         {% block overlay %}{% endblock %}
     </div>
+    {% endif %}
 
     {% block main_script %}{% endblock %}
 
@@ -100,11 +142,11 @@
         }
 
         // 启动状态检查
-        checkInitStatus();
+        setTimeout(checkInitStatus, 1000); // 给页面完全加载的时间
     </script>
     {% endif %}
 
     {% block additional_scripts %}{% endblock %}
 </body>
 
-</html>
+</html>

templates/components/controls.html

@@ -19,7 +19,7 @@
                 <button onclick="refreshLoras()"><i class="fas fa-sync"></i> Refresh</button>
             </div>
             <div class="control-group">
-                <button onclick="fetchCivitai()" class="secondary" title="Fetch from Civitai"><i class="fas fa-download"></i> Fetch</button>
+                <button onclick="fetchCivitai()" title="Fetch from Civitai"><i class="fas fa-download"></i> Fetch</button>
             </div>
             <div class="control-group">
                 <button onclick="downloadManager.showDownloadModal()" title="Download from URL">
@@ -31,6 +31,12 @@
                     <i class="fas fa-th-large"></i> Bulk
                 </button>
             </div>
+            <div id="customFilterIndicator" class="control-group hidden">
+                <div class="filter-active">
+                    <i class="fas fa-filter"></i> <span class="customFilterText" title=""></span>
+                    <i class="fas fa-times-circle clear-filter"></i>
+                </div>
+            </div>
         </div>
         <div class="toggle-folders-container">
             <button class="toggle-folders-btn icon-only" onclick="toggleFolderTags()" title="Toggle folder tags">

templates/components/modals.html

@@ -17,16 +17,24 @@
         <button class="close" onclick="modalManager.closeModal('settingsModal')">&times;</button>
         <h2>Settings</h2>
         <div class="settings-form">
-            <div class="input-group">
-                <label for="civitaiApiKey">Civitai API Key:</label>
-                <div class="api-key-input">
-                    <input type="password" 
-                           id="civitaiApiKey" 
-                           placeholder="Enter your Civitai API key"
-                           value="{{ settings.get('civitai_api_key', '') }}" />
-                    <button class="toggle-visibility" onclick="toggleApiKeyVisibility(this)">
-                        <i class="fas fa-eye"></i>
-                    </button>
+            <div class="setting-item api-key-item">
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <label for="civitaiApiKey">Civitai API Key:</label>
+                    </div>
+                    <div class="setting-control">
+                        <div class="api-key-input">
+                            <input type="password" 
+                                id="civitaiApiKey" 
+                                placeholder="Enter your Civitai API key"
+                                value="{{ settings.get('civitai_api_key', '') }}"
+                                onblur="settingsManager.saveInputSetting('civitaiApiKey', 'civitai_api_key')"
+                                onkeydown="if(event.key === 'Enter') { this.blur(); }" />
+                            <button class="toggle-visibility" onclick="toggleApiKeyVisibility(this)">
+                                <i class="fas fa-eye"></i>
+                            </button>
+                        </div>
+                    </div>
                 </div>
                 <div class="input-help">
                     Used for authentication when downloading models from Civitai
@@ -37,47 +45,86 @@
                 <h3>Content Filtering</h3>
                 
                 <div class="setting-item">
-                    <div class="setting-info">
-                        <label for="blurMatureContent">Blur NSFW Content</label>
-                        <div class="input-help">
-                            Blur mature (NSFW) content preview images
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="blurMatureContent">Blur NSFW Content</label>
+                        </div>
+                        <div class="setting-control">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="blurMatureContent" checked 
+                                       onchange="settingsManager.saveToggleSetting('blurMatureContent', 'blur_mature_content')">
+                                <span class="toggle-slider"></span>
+                            </label>
                         </div>
                     </div>
-                    <div class="setting-control">
-                        <label class="toggle-switch">
-                            <input type="checkbox" id="blurMatureContent" checked>
-                            <span class="toggle-slider"></span>
-                        </label>
+                    <div class="input-help">
+                        Blur mature (NSFW) content preview images
                     </div>
                 </div>
                 
                 <div class="setting-item">
-                    <div class="setting-info">
-                        <label for="showOnlySFW">Show Only SFW Results</label>
-                        <div class="input-help">
-                            Filter out all NSFW content when browsing and searching
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="showOnlySFW">Show Only SFW Results</label>
+                        </div>
+                        <div class="setting-control">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="showOnlySFW" value="{{ settings.get('show_only_sfw', False) }}" {% if settings.get('show_only_sfw', False) %}checked{% endif %}
+                                       onchange="settingsManager.saveToggleSetting('showOnlySFW', 'show_only_sfw')">
+                                <span class="toggle-slider"></span>
+                            </label>
                         </div>
                     </div>
-                    <div class="setting-control">
-                        <label class="toggle-switch">
-                            <input type="checkbox" id="showOnlySFW" value="{{ settings.get('show_only_sfw', False) }}" {% if settings.get('show_only_sfw', False) %}checked{% endif %}>
-                            <span class="toggle-slider"></span>
-                        </label>
+                    <div class="input-help">
+                        Filter out all NSFW content when browsing and searching
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Add Video Settings Section -->
+            <div class="settings-section">
+                <h3>Video Settings</h3>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="autoplayOnHover">Autoplay Videos on Hover</label>
+                        </div>
+                        <div class="setting-control">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="autoplayOnHover" 
+                                       onchange="settingsManager.saveToggleSetting('autoplayOnHover', 'autoplay_on_hover')">
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Only play video previews when hovering over them
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Add Folder Settings Section -->
+            <div class="settings-section">
+                <h3>Folder Settings</h3>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="defaultLoraRoot">Default LoRA Root</label>
+                        </div>
+                        <div class="setting-control select-control">
+                            <select id="defaultLoraRoot" onchange="settingsManager.saveSelectSetting('defaultLoraRoot', 'default_lora_root')">
+                                <option value="">No Default</option>
+                                <!-- Options will be loaded dynamically -->
+                            </select>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Set the default LoRA root directory for downloads, imports and moves
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="modal-actions">
-            <button class="primary-btn" onclick="settingsManager.saveSettings()">Save</button>
-        </div>
-        <!-- Add the new links section -->
-        <div class="settings-links">
-            <a href="https://github.com/willmiao/ComfyUI-Lora-Manager" target="_blank" class="settings-link" title="GitHub Repository">
-                <i class="fab fa-github"></i>
-            </a>
-            <a href="https://github.com/willmiao/ComfyUI-Lora-Manager/issues/new" target="_blank" class="settings-link" title="Report Issue">
-                <i class="fas fa-bug"></i>
-            </a>
         </div>
     </div>
 </div>

templates/components/recipe_modal.html

@@ -16,8 +16,8 @@
         <div class="modal-body">
             <!-- Top Section: Preview and Generation Parameters -->
             <div class="recipe-top-section">
-                <div class="recipe-preview-container">
-                    <img id="recipeModalImage" src="" alt="Recipe Preview">
+                <div class="recipe-preview-container" id="recipePreviewContainer">
+                    <img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
                 </div>
                 
                 <div class="info-section recipe-gen-params">
@@ -58,6 +58,9 @@
                     <h3>Resources</h3>
                     <div class="recipe-section-actions">
                         <span id="recipeLorasCount"><i class="fas fa-layer-group"></i> 0 LoRAs</span>
+                        <button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
+                            <i class="fas fa-external-link-alt"></i>
+                        </button>
                         <button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
                             <i class="fas fa-copy"></i>
                         </button>

templates/loras.html

@@ -4,7 +4,9 @@
 {% block page_id %}loras{% endblock %}
 
 {% block preload %}
+{% if not is_initializing %}
 <link rel="preload" href="/loras_static/js/loras.js" as="script" crossorigin="anonymous">
+{% endif %}
 {% endblock %}
 
 {% block init_title %}Initializing LoRA Manager{% endblock %}
@@ -29,5 +31,7 @@
 {% endblock %}
 
 {% block main_script %}
+{% if not is_initializing %}
 <script type="module" src="/loras_static/js/loras.js"></script>
+{% endif %}
 {% endblock %}

templates/recipes.html

@@ -32,6 +32,13 @@
             <div title="Import recipes" class="control-group">
                 <button onclick="importManager.showImportModal()"><i class="fas fa-file-import"></i> Import</button>
             </div>
+            <!-- Custom filter indicator button (hidden by default) -->
+            <div id="customFilterIndicator" class="control-group hidden">
+                <div class="filter-active">
+                    <i class="fas fa-filter"></i> <span id="customFilterText">Filtered by LoRA</span>
+                    <i class="fas fa-times-circle clear-filter"></i>
+                </div>
+            </div>
         </div>
     </div>
     

test_parser.py

@@ -1,45 +0,0 @@
-import json
-import sys
-from py.workflow.parser import WorkflowParser
-from py.workflow.utils import trace_model_path
-
-# Load workflow data
-with open('refs/prompt.json', 'r') as f:
-    workflow_data = json.load(f)
-
-# Parse workflow
-parser = WorkflowParser()
-try:
-    # Find KSampler node
-    ksampler_node = None
-    for node_id, node in workflow_data.items():
-        if node.get("class_type") == "KSampler":
-            ksampler_node = node_id
-            break
-    
-    if not ksampler_node:
-        print("KSampler node not found")
-        sys.exit(1)
-    
-    # Trace all Lora nodes
-    print("Finding Lora nodes in the workflow...")
-    lora_nodes = trace_model_path(workflow_data, ksampler_node)
-    print(f"Found Lora nodes: {lora_nodes}")
-    
-    # Print node details
-    for node_id in lora_nodes:
-        node = workflow_data[node_id]
-        print(f"\nNode {node_id}: {node.get('class_type')}")
-        for key, value in node.get("inputs", {}).items():
-            print(f"  - {key}: {value}")
-    
-    # Parse the workflow
-    result = parser.parse_workflow(workflow_data)
-    print("\nParsing successful!")
-    print(json.dumps(result, indent=2))
-    sys.exit(0)
-except Exception as e:
-    print(f"Error parsing workflow: {e}")
-    import traceback
-    traceback.print_exc()
-    sys.exit(1) 

update_logs.md

@@ -2,6 +2,52 @@
 
 ---
 
+### v0.7.37
+* Added NSFW content control settings (blur mature content and SFW-only filter)
+* Implemented intelligent blur effects for previews and showcase media
+* Added manual content rating option through context menu
+* Enhanced user experience with configurable content visibility
+* Fixed various bugs and improved stability
+
+### v0.7.36
+* Enhanced LoRA details view with model descriptions and tags display
+* Added tag filtering system for improved model discovery
+* Implemented editable trigger words functionality
+* Improved TriggerWord Toggle node with new group mode option for granular control
+* Added new Lora Stacker node with cross-compatibility support (works with efficiency nodes, ComfyRoll, easy-use, etc.)
+* Fixed several bugs
+
+### v0.7.35-beta
+* Added base model filtering
+* Implemented bulk operations (copy syntax, move multiple LoRAs)
+* Added ability to edit LoRA model names in details view
+* Added update checker with notification system
+* Added support modal for user feedback and community links
+
+### v0.7.33
+* Enhanced LoRA Loader node with visual strength adjustment widgets
+* Added toggle switches for LoRA enable/disable
+* Implemented image tooltips for LoRA preview
+* Added TriggerWord Toggle node with visual word selection
+* Fixed various bugs and improved stability
+
+### v0.7.3
+* Added "Lora Loader (LoraManager)" custom node for workflows
+* Implemented one-click LoRA integration
+* Added direct copying of LoRA syntax from manager interface
+* Added automatic preset strength value application
+* Added automatic trigger word loading
+
+### v0.7.0
+* Added direct CivitAI integration for downloading LoRAs
+* Implemented version selection for model downloads
+* Added target folder selection for downloads
+* Added context menu with quick actions
+* Added force refresh for CivitAI data
+* Implemented LoRA movement between folders
+* Added personal usage tips and notes for LoRAs
+* Improved performance for details window
+
 ## [Update 0.5.9] Enhanced Search Capabilities
 
 - 🔍 **Advanced Search Features**:

web/comfyui/DomWidget.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    class="dom-widget"
+    :title="tooltip"
+    ref="widgetElement"
+    :style="style"
+    v-show="widgetState.visible"
+  >
+    <component
+      v-if="isComponentWidget(widget)"
+      :is="widget.component"
+      :modelValue="widget.value"
+      @update:modelValue="emit('update:widgetValue', $event)"
+      :widget="widget"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { CSSProperties, computed, onMounted, ref, watch } from 'vue'
+
+import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
+import { useDomClipping } from '@/composables/element/useDomClipping'
+import {
+  type BaseDOMWidget,
+  isComponentWidget,
+  isDOMWidget
+} from '@/scripts/domWidget'
+import { DomWidgetState } from '@/stores/domWidgetStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
+
+const { widget, widgetState } = defineProps<{
+  widget: BaseDOMWidget<string | object>
+  widgetState: DomWidgetState
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:widgetValue', value: string | object): void
+}>()
+
+const widgetElement = ref<HTMLElement | undefined>()
+
+const { style: positionStyle, updatePositionWithTransform } =
+  useAbsolutePosition()
+const { style: clippingStyle, updateClipPath } = useDomClipping()
+const style = computed<CSSProperties>(() => ({
+  ...positionStyle.value,
+  ...(enableDomClipping.value ? clippingStyle.value : {}),
+  zIndex: widgetState.zIndex,
+  pointerEvents: widgetState.readonly ? 'none' : 'auto'
+}))
+
+const canvasStore = useCanvasStore()
+const settingStore = useSettingStore()
+const enableDomClipping = computed(() =>
+  settingStore.get('Comfy.DOMClippingEnabled')
+)
+
+const updateDomClipping = () => {
+  const lgCanvas = canvasStore.canvas
+  if (!lgCanvas || !widgetElement.value) return
+
+  const selectedNode = Object.values(lgCanvas.selected_nodes ?? {})[0]
+  if (!selectedNode) return
+
+  const node = widget.node
+  const isSelected = selectedNode === node
+  const renderArea = selectedNode?.renderArea
+  const offset = lgCanvas.ds.offset
+  const scale = lgCanvas.ds.scale
+  const selectedAreaConfig = renderArea
+    ? {
+        x: renderArea[0],
+        y: renderArea[1],
+        width: renderArea[2],
+        height: renderArea[3],
+        scale,
+        offset: [offset[0], offset[1]] as [number, number]
+      }
+    : undefined
+
+  updateClipPath(
+    widgetElement.value,
+    lgCanvas.canvas,
+    isSelected,
+    selectedAreaConfig
+  )
+}
+
+watch(
+  () => widgetState,
+  (newState) => {
+    updatePositionWithTransform(newState)
+    if (enableDomClipping.value) {
+      updateDomClipping()
+    }
+  },
+  { deep: true }
+)
+
+watch(
+  () => widgetState.visible,
+  (newVisible, oldVisible) => {
+    if (!newVisible && oldVisible) {
+      widget.options.onHide?.(widget)
+    }
+  }
+)
+
+if (isDOMWidget(widget)) {
+  if (widget.element.blur) {
+    useEventListener(document, 'mousedown', (event) => {
+      if (!widget.element.contains(event.target as HTMLElement)) {
+        widget.element.blur()
+      }
+    })
+  }
+
+  for (const evt of widget.options.selectOn ?? ['focus', 'click']) {
+    useEventListener(widget.element, evt, () => {
+      const lgCanvas = canvasStore.canvas
+      lgCanvas?.selectNode(widget.node)
+      lgCanvas?.bringToFront(widget.node)
+    })
+  }
+}
+
+const inputSpec = widget.node.constructor.nodeData
+const tooltip = inputSpec?.inputs?.[widget.name]?.tooltip
+
+onMounted(() => {
+  if (isDOMWidget(widget) && widgetElement.value) {
+    widgetElement.value.appendChild(widget.element)
+  }
+})
+</script>
+
+<style scoped>
+.dom-widget > * {
+  @apply h-full w-full;
+}
+</style>

web/comfyui/domWidget.ts

@@ -1,193 +1,121 @@
-import { LGraphCanvas, LGraphNode } from '@comfyorg/litegraph'
-import type { Size, Vector4 } from '@comfyorg/litegraph'
-import type { ISerialisedNode } from '@comfyorg/litegraph/dist/types/serialisation'
+import { LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import type {
   ICustomWidget,
+  IWidget,
   IWidgetOptions
 } from '@comfyorg/litegraph/dist/types/widgets'
+import _ from 'lodash'
+import { type Component, toRaw } from 'vue'
 
-import { useSettingStore } from '@/stores/settingStore'
+import { useChainCallback } from '@/composables/functional/useChainCallback'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
+import { generateUUID } from '@/utils/formatUtil'
 
-import { app } from './app'
+export interface BaseDOMWidget<V extends object | string>
+  extends ICustomWidget {
+  // ICustomWidget properties
+  type: 'custom'
+  options: DOMWidgetOptions<V>
+  value: V
+  callback?: (value: V) => void
 
-const SIZE = Symbol()
-
-interface Rect {
-  height: number
-  width: number
-  x: number
-  y: number
+  // BaseDOMWidget properties
+  /** The unique ID of the widget. */
+  readonly id: string
+  /** The node that the widget belongs to. */
+  readonly node: LGraphNode
+  /** Whether the widget is visible. */
+  isVisible(): boolean
+  /** The margin of the widget. */
+  margin: number
 }
 
+/**
+ * A DOM widget that wraps a custom HTML element as a litegraph widget.
+ */
 export interface DOMWidget<T extends HTMLElement, V extends object | string>
-  extends ICustomWidget<T> {
-  // All unrecognized types will be treated the same way as 'custom' in litegraph internally.
-  type: 'custom'
-  name: string
+  extends BaseDOMWidget<V> {
   element: T
-  options: DOMWidgetOptions<T, V>
-  value: V
-  y?: number
   /**
    * @deprecated Legacy property used by some extensions for customtext
-   * (textarea) widgets. Use `element` instead as it provides the same
+   * (textarea) widgets. Use {@link element} instead as it provides the same
    * functionality and works for all DOMWidget types.
    */
   inputEl?: T
-  callback?: (value: V) => void
-  /**
-   * Draw the widget on the canvas.
-   */
-  draw?: (
-    ctx: CanvasRenderingContext2D,
-    node: LGraphNode,
-    widgetWidth: number,
-    y: number,
-    widgetHeight: number
-  ) => void
-  /**
-   * TODO(huchenlei): Investigate when is this callback fired. `onRemove` is
-   * on litegraph's IBaseWidget definition, but not called in litegraph.
-   * Currently only called in widgetInputs.ts.
-   */
-  onRemove?: () => void
 }
 
-export interface DOMWidgetOptions<
-  T extends HTMLElement,
-  V extends object | string
-> extends IWidgetOptions {
+/**
+ * A DOM widget that wraps a Vue component as a litegraph widget.
+ */
+export interface ComponentWidget<V extends object | string>
+  extends BaseDOMWidget<V> {
+  readonly component: Component
+  readonly inputSpec: InputSpec
+}
+
+export interface DOMWidgetOptions<V extends object | string>
+  extends IWidgetOptions {
+  /**
+   * Whether to render a placeholder rectangle when zoomed out.
+   */
   hideOnZoom?: boolean
   selectOn?: string[]
-  onHide?: (widget: DOMWidget<T, V>) => void
+  onHide?: (widget: BaseDOMWidget<V>) => void
   getValue?: () => V
   setValue?: (value: V) => void
   getMinHeight?: () => number
   getMaxHeight?: () => number
   getHeight?: () => string | number
-  onDraw?: (widget: DOMWidget<T, V>) => void
-  beforeResize?: (this: DOMWidget<T, V>, node: LGraphNode) => void
-  afterResize?: (this: DOMWidget<T, V>, node: LGraphNode) => void
+  onDraw?: (widget: BaseDOMWidget<V>) => void
+  margin?: number
+  /**
+   * @deprecated Use `afterResize` instead. This callback is a legacy API
+   * that fires before resize happens, but it is no longer supported. Now it
+   * fires after resize happens.
+   * The resize logic has been upstreamed to litegraph in
+   * https://github.com/Comfy-Org/ComfyUI_frontend/pull/2557
+   */
+  beforeResize?: (this: BaseDOMWidget<V>, node: LGraphNode) => void
+  afterResize?: (this: BaseDOMWidget<V>, node: LGraphNode) => void
 }
 
-function intersect(a: Rect, b: Rect): Vector4 | null {
-  const x = Math.max(a.x, b.x)
-  const num1 = Math.min(a.x + a.width, b.x + b.width)
-  const y = Math.max(a.y, b.y)
-  const num2 = Math.min(a.y + a.height, b.y + b.height)
-  if (num1 >= x && num2 >= y) return [x, y, num1 - x, num2 - y]
-  else return null
-}
+export const isDOMWidget = <T extends HTMLElement, V extends object | string>(
+  widget: IWidget
+): widget is DOMWidget<T, V> => 'element' in widget && !!widget.element
 
-function getClipPath(
-  node: LGraphNode,
-  element: HTMLElement,
-  canvasRect: DOMRect
-): string {
-  const selectedNode: LGraphNode = Object.values(
-    app.canvas.selected_nodes ?? {}
-  )[0] as LGraphNode
-  if (selectedNode && selectedNode !== node) {
-    const elRect = element.getBoundingClientRect()
-    const MARGIN = 4
-    const { offset, scale } = app.canvas.ds
-    const { renderArea } = selectedNode
+export const isComponentWidget = <V extends object | string>(
+  widget: IWidget
+): widget is ComponentWidget<V> => 'component' in widget && !!widget.component
 
-    // Get intersection in browser space
-    const intersection = intersect(
-      {
-        x: elRect.left - canvasRect.left,
-        y: elRect.top - canvasRect.top,
-        width: elRect.width,
-        height: elRect.height
-      },
-      {
-        x: (renderArea[0] + offset[0] - MARGIN) * scale,
-        y: (renderArea[1] + offset[1] - MARGIN) * scale,
-        width: (renderArea[2] + 2 * MARGIN) * scale,
-        height: (renderArea[3] + 2 * MARGIN) * scale
-      }
-    )
-
-    if (!intersection) {
-      return ''
-    }
-
-    // Convert intersection to canvas scale (element has scale transform)
-    const clipX =
-      (intersection[0] - elRect.left + canvasRect.left) / scale + 'px'
-    const clipY = (intersection[1] - elRect.top + canvasRect.top) / scale + 'px'
-    const clipWidth = intersection[2] / scale + 'px'
-    const clipHeight = intersection[3] / scale + 'px'
-    const path = `polygon(0% 0%, 0% 100%, ${clipX} 100%, ${clipX} ${clipY}, calc(${clipX} + ${clipWidth}) ${clipY}, calc(${clipX} + ${clipWidth}) calc(${clipY} + ${clipHeight}), ${clipX} calc(${clipY} + ${clipHeight}), ${clipX} 100%, 100% 100%, 100% 0%)`
-    return path
-  }
-  return ''
-}
-
-// Override the compute visible nodes function to allow us to hide/show DOM elements when the node goes offscreen
-const elementWidgets = new Set<LGraphNode>()
-const computeVisibleNodes = LGraphCanvas.prototype.computeVisibleNodes
-LGraphCanvas.prototype.computeVisibleNodes = function (
-  nodes?: LGraphNode[],
-  out?: LGraphNode[]
-): LGraphNode[] {
-  const visibleNodes = computeVisibleNodes.call(this, nodes, out)
-
-  for (const node of app.graph.nodes) {
-    if (elementWidgets.has(node)) {
-      const hidden = visibleNodes.indexOf(node) === -1
-      for (const w of node.widgets ?? []) {
-        if (w.element) {
-          w.element.dataset.isInVisibleNodes = hidden ? 'false' : 'true'
-          const shouldOtherwiseHide = w.element.dataset.shouldHide === 'true'
-          const isCollapsed = w.element.dataset.collapsed === 'true'
-          const wasHidden = w.element.hidden
-          const actualHidden = hidden || shouldOtherwiseHide || isCollapsed
-          w.element.hidden = actualHidden
-          w.element.style.display = actualHidden ? 'none' : ''
-          if (actualHidden && !wasHidden) {
-            w.options.onHide?.(w as DOMWidget<HTMLElement, object>)
-          }
-        }
-      }
-    }
-  }
-
-  return visibleNodes
-}
-
-export class DOMWidgetImpl<T extends HTMLElement, V extends object | string>
-  implements DOMWidget<T, V>
+abstract class BaseDOMWidgetImpl<V extends object | string>
+  implements BaseDOMWidget<V>
 {
-  type: 'custom'
-  name: string
-  element: T
-  options: DOMWidgetOptions<T, V>
+  static readonly DEFAULT_MARGIN = 10
+  readonly type: 'custom'
+  readonly name: string
+  readonly options: DOMWidgetOptions<V>
   computedHeight?: number
+  y: number = 0
   callback?: (value: V) => void
-  private mouseDownHandler?: (event: MouseEvent) => void
 
-  constructor(
-    name: string,
-    type: string,
-    element: T,
-    options: DOMWidgetOptions<T, V> = {}
-  ) {
+  readonly id: string
+  readonly node: LGraphNode
+
+  constructor(obj: {
+    id: string
+    node: LGraphNode
+    name: string
+    type: string
+    options: DOMWidgetOptions<V>
+  }) {
     // @ts-expect-error custom widget type
-    this.type = type
-    this.name = name
-    this.element = element
-    this.options = options
+    this.type = obj.type
+    this.name = obj.name
+    this.options = obj.options
 
-    if (element.blur) {
-      this.mouseDownHandler = (event) => {
-        if (!element.contains(event.target as HTMLElement)) {
-          element.blur()
-        }
-      }
-      document.addEventListener('mousedown', this.mouseDownHandler)
-    }
+    this.id = obj.id
+    this.node = obj.node
   }
 
   get value(): V {
@@ -199,6 +127,67 @@ export class DOMWidgetImpl<T extends HTMLElement, V extends object | string>
     this.callback?.(this.value)
   }
 
+  get margin(): number {
+    return this.options.margin ?? BaseDOMWidgetImpl.DEFAULT_MARGIN
+  }
+
+  isVisible(): boolean {
+    return (
+      !_.isNil(this.computedHeight) &&
+      this.computedHeight > 0 &&
+      !['converted-widget', 'hidden'].includes(this.type) &&
+      !this.node.collapsed
+    )
+  }
+
+  draw(
+    ctx: CanvasRenderingContext2D,
+    _node: LGraphNode,
+    widget_width: number,
+    y: number,
+    widget_height: number,
+    lowQuality?: boolean
+  ): void {
+    if (this.options.hideOnZoom && lowQuality && this.isVisible()) {
+      // Draw a placeholder rectangle
+      const originalFillStyle = ctx.fillStyle
+      ctx.beginPath()
+      ctx.fillStyle = LiteGraph.WIDGET_BGCOLOR
+      ctx.rect(
+        this.margin,
+        y + this.margin,
+        widget_width - this.margin * 2,
+        (this.computedHeight ?? widget_height) - 2 * this.margin
+      )
+      ctx.fill()
+      ctx.fillStyle = originalFillStyle
+    }
+    this.options.onDraw?.(this)
+  }
+
+  onRemove(): void {
+    useDomWidgetStore().unregisterWidget(this.id)
+  }
+}
+
+export class DOMWidgetImpl<T extends HTMLElement, V extends object | string>
+  extends BaseDOMWidgetImpl<V>
+  implements DOMWidget<T, V>
+{
+  readonly element: T
+
+  constructor(obj: {
+    id: string
+    node: LGraphNode
+    name: string
+    type: string
+    element: T
+    options: DOMWidgetOptions<V>
+  }) {
+    super(obj)
+    this.element = obj.element
+  }
+
   /** Extract DOM widget size info */
   computeLayoutSize(node: LGraphNode) {
     // @ts-expect-error custom widget type
@@ -241,69 +230,61 @@ export class DOMWidgetImpl<T extends HTMLElement, V extends object | string>
       minWidth: 0
     }
   }
+}
 
-  draw(
-    ctx: CanvasRenderingContext2D,
-    node: LGraphNode,
-    widgetWidth: number,
-    y: number
-  ): void {
-    const { offset, scale } = app.canvas.ds
-    const hidden =
-      (!!this.options.hideOnZoom && app.canvas.low_quality) ||
-      (this.computedHeight ?? 0) <= 0 ||
-      // @ts-expect-error custom widget type
-      this.type === 'converted-widget' ||
-      // @ts-expect-error custom widget type
-      this.type === 'hidden'
+export class ComponentWidgetImpl<V extends object | string>
+  extends BaseDOMWidgetImpl<V>
+  implements ComponentWidget<V>
+{
+  readonly component: Component
+  readonly inputSpec: InputSpec
 
-    this.element.dataset.shouldHide = hidden ? 'true' : 'false'
-    const isInVisibleNodes = this.element.dataset.isInVisibleNodes === 'true'
-    const isCollapsed = this.element.dataset.collapsed === 'true'
-    const actualHidden = hidden || !isInVisibleNodes || isCollapsed
-    const wasHidden = this.element.hidden
-    this.element.hidden = actualHidden
-    this.element.style.display = actualHidden ? 'none' : ''
-
-    if (actualHidden && !wasHidden) {
-      this.options.onHide?.(this)
-    }
-    if (actualHidden) {
-      return
-    }
-
-    const elRect = ctx.canvas.getBoundingClientRect()
-    const margin = 10
-    const top = node.pos[0] + offset[0] + margin
-    const left = node.pos[1] + offset[1] + margin + y
-
-    Object.assign(this.element.style, {
-      transformOrigin: '0 0',
-      transform: `scale(${scale})`,
-      left: `${top * scale}px`,
-      top: `${left * scale}px`,
-      width: `${widgetWidth - margin * 2}px`,
-      height: `${(this.computedHeight ?? 50) - margin * 2}px`,
-      position: 'absolute',
-      zIndex: app.graph.nodes.indexOf(node),
-      pointerEvents: app.canvas.read_only ? 'none' : 'auto'
+  constructor(obj: {
+    id: string
+    node: LGraphNode
+    name: string
+    component: Component
+    inputSpec: InputSpec
+    options: DOMWidgetOptions<V>
+  }) {
+    super({
+      ...obj,
+      type: 'custom'
     })
-
-    if (useSettingStore().get('Comfy.DOMClippingEnabled')) {
-      const clipPath = getClipPath(node, this.element, elRect)
-      this.element.style.clipPath = clipPath ?? 'none'
-      this.element.style.willChange = 'clip-path'
-    }
-
-    this.options.onDraw?.(this)
+    this.component = obj.component
+    this.inputSpec = obj.inputSpec
   }
 
-  onRemove(): void {
-    if (this.mouseDownHandler) {
-      document.removeEventListener('mousedown', this.mouseDownHandler)
+  computeLayoutSize() {
+    const minHeight = this.options.getMinHeight?.() ?? 50
+    const maxHeight = this.options.getMaxHeight?.()
+    return {
+      minHeight,
+      maxHeight,
+      minWidth: 0
     }
-    this.element.remove()
   }
+
+  serializeValue(): V {
+    return toRaw(this.value)
+  }
+}
+
+export const addWidget = <W extends BaseDOMWidget<object | string>>(
+  node: LGraphNode,
+  widget: W
+) => {
+  node.addCustomWidget(widget)
+  node.onRemoved = useChainCallback(node.onRemoved, () => {
+    widget.onRemove?.()
+  })
+
+  node.onResize = useChainCallback(node.onResize, () => {
+    widget.options.beforeResize?.call(widget, node)
+    widget.options.afterResize?.call(widget, node)
+  })
+
+  useDomWidgetStore().registerWidget(widget)
 }
 
 LGraphNode.prototype.addDOMWidget = function <
@@ -314,24 +295,19 @@ LGraphNode.prototype.addDOMWidget = function <
   name: string,
   type: string,
   element: T,
-  options: DOMWidgetOptions<T, V> = {}
+  options: DOMWidgetOptions<V> = {}
 ): DOMWidget<T, V> {
-  options = { hideOnZoom: true, selectOn: ['focus', 'click'], ...options }
+  const widget = new DOMWidgetImpl({
+    id: generateUUID(),
+    node: this,
+    name,
+    type,
+    element,
+    options: { hideOnZoom: true, ...options }
+  })
+  // Note: Before `LGraphNode.configure` is called, `this.id` is always `-1`.
+  addWidget(this, widget as unknown as BaseDOMWidget<object | string>)
 
-  if (!element.parentElement) {
-    app.canvasContainer.append(element)
-  }
-  element.hidden = true
-  element.style.display = 'none'
-
-  const { nodeData } = this.constructor
-  const tooltip = (nodeData?.input.required?.[name] ??
-    nodeData?.input.optional?.[name])?.[1]?.tooltip
-  if (tooltip && !element.title) {
-    element.title = tooltip
-  }
-
-  const widget = new DOMWidgetImpl(name, type, element, options)
   // Workaround for https://github.com/Comfy-Org/ComfyUI_frontend/issues/2493
   // Some custom nodes are explicitly expecting getter and setter of `value`
   // property to be on instance instead of prototype.
@@ -345,55 +321,5 @@ LGraphNode.prototype.addDOMWidget = function <
     }
   })
 
-  // Ensure selectOn exists before iteration
-  const selectEvents = options.selectOn ?? ['focus', 'click']
-  for (const evt of selectEvents) {
-    element.addEventListener(evt, () => {
-      app.canvas.selectNode(this)
-      app.canvas.bringToFront(this)
-    })
-  }
-
-  this.addCustomWidget(widget)
-  elementWidgets.add(this)
-
-  const collapse = this.collapse
-  this.collapse = function (this: LGraphNode, force?: boolean) {
-    collapse.call(this, force)
-    if (this.collapsed) {
-      element.hidden = true
-      element.style.display = 'none'
-    }
-    element.dataset.collapsed = this.collapsed ? 'true' : 'false'
-  }
-
-  const { onConfigure } = this
-  this.onConfigure = function (
-    this: LGraphNode,
-    serializedNode: ISerialisedNode
-  ) {
-    onConfigure?.call(this, serializedNode)
-    element.dataset.collapsed = this.collapsed ? 'true' : 'false'
-  }
-
-  const onRemoved = this.onRemoved
-  this.onRemoved = function (this: LGraphNode) {
-    element.remove()
-    elementWidgets.delete(this)
-    onRemoved?.call(this)
-  }
-
-  // @ts-ignore index with symbol
-  if (!this[SIZE]) {
-    // @ts-ignore index with symbol
-    this[SIZE] = true
-    const onResize = this.onResize
-    this.onResize = function (this: LGraphNode, size: Size) {
-      options.beforeResize?.call(widget, this)
-      onResize?.call(this, size)
-      options.afterResize?.call(widget, this)
-    }
-  }
-
   return widget
 }

web/comfyui/legacyDomWidget.ts

@@ -0,0 +1,399 @@
+import { LGraphCanvas, LGraphNode } from '@comfyorg/litegraph'
+import type { Size, Vector4 } from '@comfyorg/litegraph'
+import type { ISerialisedNode } from '@comfyorg/litegraph/dist/types/serialisation'
+import type {
+  ICustomWidget,
+  IWidgetOptions
+} from '@comfyorg/litegraph/dist/types/widgets'
+
+import { useSettingStore } from '@/stores/settingStore'
+
+import { app } from './app'
+
+const SIZE = Symbol()
+
+interface Rect {
+  height: number
+  width: number
+  x: number
+  y: number
+}
+
+export interface DOMWidget<T extends HTMLElement, V extends object | string>
+  extends ICustomWidget<T> {
+  // All unrecognized types will be treated the same way as 'custom' in litegraph internally.
+  type: 'custom'
+  name: string
+  element: T
+  options: DOMWidgetOptions<T, V>
+  value: V
+  y?: number
+  /**
+   * @deprecated Legacy property used by some extensions for customtext
+   * (textarea) widgets. Use `element` instead as it provides the same
+   * functionality and works for all DOMWidget types.
+   */
+  inputEl?: T
+  callback?: (value: V) => void
+  /**
+   * Draw the widget on the canvas.
+   */
+  draw?: (
+    ctx: CanvasRenderingContext2D,
+    node: LGraphNode,
+    widgetWidth: number,
+    y: number,
+    widgetHeight: number
+  ) => void
+  /**
+   * TODO(huchenlei): Investigate when is this callback fired. `onRemove` is
+   * on litegraph's IBaseWidget definition, but not called in litegraph.
+   * Currently only called in widgetInputs.ts.
+   */
+  onRemove?: () => void
+}
+
+export interface DOMWidgetOptions<
+  T extends HTMLElement,
+  V extends object | string
+> extends IWidgetOptions {
+  hideOnZoom?: boolean
+  selectOn?: string[]
+  onHide?: (widget: DOMWidget<T, V>) => void
+  getValue?: () => V
+  setValue?: (value: V) => void
+  getMinHeight?: () => number
+  getMaxHeight?: () => number
+  getHeight?: () => string | number
+  onDraw?: (widget: DOMWidget<T, V>) => void
+  beforeResize?: (this: DOMWidget<T, V>, node: LGraphNode) => void
+  afterResize?: (this: DOMWidget<T, V>, node: LGraphNode) => void
+}
+
+function intersect(a: Rect, b: Rect): Vector4 | null {
+  const x = Math.max(a.x, b.x)
+  const num1 = Math.min(a.x + a.width, b.x + b.width)
+  const y = Math.max(a.y, b.y)
+  const num2 = Math.min(a.y + a.height, b.y + b.height)
+  if (num1 >= x && num2 >= y) return [x, y, num1 - x, num2 - y]
+  else return null
+}
+
+function getClipPath(
+  node: LGraphNode,
+  element: HTMLElement,
+  canvasRect: DOMRect
+): string {
+  const selectedNode: LGraphNode = Object.values(
+    app.canvas.selected_nodes ?? {}
+  )[0] as LGraphNode
+  if (selectedNode && selectedNode !== node) {
+    const elRect = element.getBoundingClientRect()
+    const MARGIN = 4
+    const { offset, scale } = app.canvas.ds
+    const { renderArea } = selectedNode
+
+    // Get intersection in browser space
+    const intersection = intersect(
+      {
+        x: elRect.left - canvasRect.left,
+        y: elRect.top - canvasRect.top,
+        width: elRect.width,
+        height: elRect.height
+      },
+      {
+        x: (renderArea[0] + offset[0] - MARGIN) * scale,
+        y: (renderArea[1] + offset[1] - MARGIN) * scale,
+        width: (renderArea[2] + 2 * MARGIN) * scale,
+        height: (renderArea[3] + 2 * MARGIN) * scale
+      }
+    )
+
+    if (!intersection) {
+      return ''
+    }
+
+    // Convert intersection to canvas scale (element has scale transform)
+    const clipX =
+      (intersection[0] - elRect.left + canvasRect.left) / scale + 'px'
+    const clipY = (intersection[1] - elRect.top + canvasRect.top) / scale + 'px'
+    const clipWidth = intersection[2] / scale + 'px'
+    const clipHeight = intersection[3] / scale + 'px'
+    const path = `polygon(0% 0%, 0% 100%, ${clipX} 100%, ${clipX} ${clipY}, calc(${clipX} + ${clipWidth}) ${clipY}, calc(${clipX} + ${clipWidth}) calc(${clipY} + ${clipHeight}), ${clipX} calc(${clipY} + ${clipHeight}), ${clipX} 100%, 100% 100%, 100% 0%)`
+    return path
+  }
+  return ''
+}
+
+// Override the compute visible nodes function to allow us to hide/show DOM elements when the node goes offscreen
+const elementWidgets = new Set<LGraphNode>()
+const computeVisibleNodes = LGraphCanvas.prototype.computeVisibleNodes
+LGraphCanvas.prototype.computeVisibleNodes = function (
+  nodes?: LGraphNode[],
+  out?: LGraphNode[]
+): LGraphNode[] {
+  const visibleNodes = computeVisibleNodes.call(this, nodes, out)
+
+  for (const node of app.graph.nodes) {
+    if (elementWidgets.has(node)) {
+      const hidden = visibleNodes.indexOf(node) === -1
+      for (const w of node.widgets ?? []) {
+        if (w.element) {
+          w.element.dataset.isInVisibleNodes = hidden ? 'false' : 'true'
+          const shouldOtherwiseHide = w.element.dataset.shouldHide === 'true'
+          const isCollapsed = w.element.dataset.collapsed === 'true'
+          const wasHidden = w.element.hidden
+          const actualHidden = hidden || shouldOtherwiseHide || isCollapsed
+          w.element.hidden = actualHidden
+          w.element.style.display = actualHidden ? 'none' : ''
+          if (actualHidden && !wasHidden) {
+            w.options.onHide?.(w as DOMWidget<HTMLElement, object>)
+          }
+        }
+      }
+    }
+  }
+
+  return visibleNodes
+}
+
+export class DOMWidgetImpl<T extends HTMLElement, V extends object | string>
+  implements DOMWidget<T, V>
+{
+  type: 'custom'
+  name: string
+  element: T
+  options: DOMWidgetOptions<T, V>
+  computedHeight?: number
+  callback?: (value: V) => void
+  private mouseDownHandler?: (event: MouseEvent) => void
+
+  constructor(
+    name: string,
+    type: string,
+    element: T,
+    options: DOMWidgetOptions<T, V> = {}
+  ) {
+    // @ts-expect-error custom widget type
+    this.type = type
+    this.name = name
+    this.element = element
+    this.options = options
+
+    if (element.blur) {
+      this.mouseDownHandler = (event) => {
+        if (!element.contains(event.target as HTMLElement)) {
+          element.blur()
+        }
+      }
+      document.addEventListener('mousedown', this.mouseDownHandler)
+    }
+  }
+
+  get value(): V {
+    return this.options.getValue?.() ?? ('' as V)
+  }
+
+  set value(v: V) {
+    this.options.setValue?.(v)
+    this.callback?.(this.value)
+  }
+
+  /** Extract DOM widget size info */
+  computeLayoutSize(node: LGraphNode) {
+    // @ts-expect-error custom widget type
+    if (this.type === 'hidden') {
+      return {
+        minHeight: 0,
+        maxHeight: 0,
+        minWidth: 0
+      }
+    }
+
+    const styles = getComputedStyle(this.element)
+    let minHeight =
+      this.options.getMinHeight?.() ??
+      parseInt(styles.getPropertyValue('--comfy-widget-min-height'))
+    let maxHeight =
+      this.options.getMaxHeight?.() ??
+      parseInt(styles.getPropertyValue('--comfy-widget-max-height'))
+
+    let prefHeight: string | number =
+      this.options.getHeight?.() ??
+      styles.getPropertyValue('--comfy-widget-height')
+
+    if (typeof prefHeight === 'string' && prefHeight.endsWith?.('%')) {
+      prefHeight =
+        node.size[1] *
+        (parseFloat(prefHeight.substring(0, prefHeight.length - 1)) / 100)
+    } else {
+      prefHeight =
+        typeof prefHeight === 'number' ? prefHeight : parseInt(prefHeight)
+
+      if (isNaN(minHeight)) {
+        minHeight = prefHeight
+      }
+    }
+
+    return {
+      minHeight: isNaN(minHeight) ? 50 : minHeight,
+      maxHeight: isNaN(maxHeight) ? undefined : maxHeight,
+      minWidth: 0
+    }
+  }
+
+  draw(
+    ctx: CanvasRenderingContext2D,
+    node: LGraphNode,
+    widgetWidth: number,
+    y: number
+  ): void {
+    const { offset, scale } = app.canvas.ds
+    const hidden =
+      (!!this.options.hideOnZoom && app.canvas.low_quality) ||
+      (this.computedHeight ?? 0) <= 0 ||
+      // @ts-expect-error custom widget type
+      this.type === 'converted-widget' ||
+      // @ts-expect-error custom widget type
+      this.type === 'hidden'
+
+    this.element.dataset.shouldHide = hidden ? 'true' : 'false'
+    const isInVisibleNodes = this.element.dataset.isInVisibleNodes === 'true'
+    const isCollapsed = this.element.dataset.collapsed === 'true'
+    const actualHidden = hidden || !isInVisibleNodes || isCollapsed
+    const wasHidden = this.element.hidden
+    this.element.hidden = actualHidden
+    this.element.style.display = actualHidden ? 'none' : ''
+
+    if (actualHidden && !wasHidden) {
+      this.options.onHide?.(this)
+    }
+    if (actualHidden) {
+      return
+    }
+
+    const elRect = ctx.canvas.getBoundingClientRect()
+    const margin = 10
+    const top = node.pos[0] + offset[0] + margin
+    const left = node.pos[1] + offset[1] + margin + y
+
+    Object.assign(this.element.style, {
+      transformOrigin: '0 0',
+      transform: `scale(${scale})`,
+      left: `${top * scale}px`,
+      top: `${left * scale}px`,
+      width: `${widgetWidth - margin * 2}px`,
+      height: `${(this.computedHeight ?? 50) - margin * 2}px`,
+      position: 'absolute',
+      zIndex: app.graph.nodes.indexOf(node),
+      pointerEvents: app.canvas.read_only ? 'none' : 'auto'
+    })
+
+    if (useSettingStore().get('Comfy.DOMClippingEnabled')) {
+      const clipPath = getClipPath(node, this.element, elRect)
+      this.element.style.clipPath = clipPath ?? 'none'
+      this.element.style.willChange = 'clip-path'
+    }
+
+    this.options.onDraw?.(this)
+  }
+
+  onRemove(): void {
+    if (this.mouseDownHandler) {
+      document.removeEventListener('mousedown', this.mouseDownHandler)
+    }
+    this.element.remove()
+  }
+}
+
+LGraphNode.prototype.addDOMWidget = function <
+  T extends HTMLElement,
+  V extends object | string
+>(
+  this: LGraphNode,
+  name: string,
+  type: string,
+  element: T,
+  options: DOMWidgetOptions<T, V> = {}
+): DOMWidget<T, V> {
+  options = { hideOnZoom: true, selectOn: ['focus', 'click'], ...options }
+
+  if (!element.parentElement) {
+    app.canvasContainer.append(element)
+  }
+  element.hidden = true
+  element.style.display = 'none'
+
+  const { nodeData } = this.constructor
+  const tooltip = (nodeData?.input.required?.[name] ??
+    nodeData?.input.optional?.[name])?.[1]?.tooltip
+  if (tooltip && !element.title) {
+    element.title = tooltip
+  }
+
+  const widget = new DOMWidgetImpl(name, type, element, options)
+  // Workaround for https://github.com/Comfy-Org/ComfyUI_frontend/issues/2493
+  // Some custom nodes are explicitly expecting getter and setter of `value`
+  // property to be on instance instead of prototype.
+  Object.defineProperty(widget, 'value', {
+    get(this: DOMWidgetImpl<T, V>): V {
+      return this.options.getValue?.() ?? ('' as V)
+    },
+    set(this: DOMWidgetImpl<T, V>, v: V) {
+      this.options.setValue?.(v)
+      this.callback?.(this.value)
+    }
+  })
+
+  // Ensure selectOn exists before iteration
+  const selectEvents = options.selectOn ?? ['focus', 'click']
+  for (const evt of selectEvents) {
+    element.addEventListener(evt, () => {
+      app.canvas.selectNode(this)
+      app.canvas.bringToFront(this)
+    })
+  }
+
+  this.addCustomWidget(widget)
+  elementWidgets.add(this)
+
+  const collapse = this.collapse
+  this.collapse = function (this: LGraphNode, force?: boolean) {
+    collapse.call(this, force)
+    if (this.collapsed) {
+      element.hidden = true
+      element.style.display = 'none'
+    }
+    element.dataset.collapsed = this.collapsed ? 'true' : 'false'
+  }
+
+  const { onConfigure } = this
+  this.onConfigure = function (
+    this: LGraphNode,
+    serializedNode: ISerialisedNode
+  ) {
+    onConfigure?.call(this, serializedNode)
+    element.dataset.collapsed = this.collapsed ? 'true' : 'false'
+  }
+
+  const onRemoved = this.onRemoved
+  this.onRemoved = function (this: LGraphNode) {
+    element.remove()
+    elementWidgets.delete(this)
+    onRemoved?.call(this)
+  }
+
+  // @ts-ignore index with symbol
+  if (!this[SIZE]) {
+    // @ts-ignore index with symbol
+    this[SIZE] = true
+    const onResize = this.onResize
+    this.onResize = function (this: LGraphNode, size: Size) {
+      options.beforeResize?.call(widget, this)
+      onResize?.call(this, size)
+      options.afterResize?.call(widget, this)
+    }
+  }
+
+  return widget
+}

web/comfyui/legacy_loras_widget.js

@@ -0,0 +1,882 @@
+import { api } from "../../scripts/api.js";
+import { app } from "../../scripts/app.js";
+
+export function addLorasWidget(node, name, opts, callback) {
+  // Create container for loras
+  const container = document.createElement("div");
+  container.className = "comfy-loras-container";
+  Object.assign(container.style, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    padding: "6px",
+    backgroundColor: "rgba(40, 44, 52, 0.6)",
+    borderRadius: "6px",
+    width: "100%",
+  });
+
+  // Initialize default value
+  const defaultValue = opts?.defaultVal || [];
+
+  // Parse LoRA entries from value
+  const parseLoraValue = (value) => {
+    if (!value) return [];
+    return Array.isArray(value) ? value : [];
+  };
+
+  // Format LoRA data
+  const formatLoraValue = (loras) => {
+    return loras;
+  };
+
+  // Function to create toggle element
+  const createToggle = (active, onChange) => {
+    const toggle = document.createElement("div");
+    toggle.className = "comfy-lora-toggle";
+    
+    updateToggleStyle(toggle, active);
+    
+    toggle.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onChange(!active);
+    });
+    
+    return toggle;
+  };
+
+  // Helper function to update toggle style
+  function updateToggleStyle(toggleEl, active) {
+    Object.assign(toggleEl.style, {
+      width: "18px",
+      height: "18px",
+      borderRadius: "4px",
+      cursor: "pointer",
+      transition: "all 0.2s ease",
+      backgroundColor: active ? "rgba(66, 153, 225, 0.9)" : "rgba(45, 55, 72, 0.7)",
+      border: `1px solid ${active ? "rgba(66, 153, 225, 0.9)" : "rgba(226, 232, 240, 0.2)"}`,
+    });
+
+    // Add hover effect
+    toggleEl.onmouseenter = () => {
+      toggleEl.style.transform = "scale(1.05)";
+      toggleEl.style.boxShadow = "0 2px 4px rgba(0,0,0,0.15)";
+    };
+
+    toggleEl.onmouseleave = () => {
+      toggleEl.style.transform = "scale(1)";
+      toggleEl.style.boxShadow = "none";
+    };
+  }
+
+  // Create arrow button for strength adjustment
+  const createArrowButton = (direction, onClick) => {
+    const button = document.createElement("div");
+    button.className = `comfy-lora-arrow comfy-lora-arrow-${direction}`;
+    
+    Object.assign(button.style, {
+      width: "16px",
+      height: "16px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      userSelect: "none",
+      fontSize: "12px",
+      color: "rgba(226, 232, 240, 0.8)",
+      transition: "all 0.2s ease",
+    });
+    
+    button.textContent = direction === "left" ? "◀" : "▶";
+    
+    button.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+    
+    // Add hover effect
+    button.onmouseenter = () => {
+      button.style.color = "white";
+      button.style.transform = "scale(1.2)";
+    };
+    
+    button.onmouseleave = () => {
+      button.style.color = "rgba(226, 232, 240, 0.8)";
+      button.style.transform = "scale(1)";
+    };
+    
+    return button;
+  };
+
+  // 添加预览弹窗组件
+  class PreviewTooltip {
+    constructor() {
+      this.element = document.createElement('div');
+      Object.assign(this.element.style, {
+        position: 'fixed',
+        zIndex: 9999,
+        background: 'rgba(0, 0, 0, 0.85)',
+        borderRadius: '6px',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+        display: 'none',
+        overflow: 'hidden',
+        maxWidth: '300px',
+      });
+      document.body.appendChild(this.element);
+      this.hideTimeout = null;  // 添加超时处理变量
+      
+      // 添加全局点击事件来隐藏tooltip
+      document.addEventListener('click', () => this.hide());
+      
+      // 添加滚动事件监听
+      document.addEventListener('scroll', () => this.hide(), true);
+    }
+
+    async show(loraName, x, y) {
+      try {
+        // 清除之前的隐藏定时器
+        if (this.hideTimeout) {
+          clearTimeout(this.hideTimeout);
+          this.hideTimeout = null;
+        }
+
+        // 如果已经显示同一个lora的预览，则不重复显示
+        if (this.element.style.display === 'block' && this.currentLora === loraName) {
+          return;
+        }
+
+        this.currentLora = loraName;
+        
+        // 获取预览URL
+        const response = await api.fetchApi(`/lora-preview-url?name=${encodeURIComponent(loraName)}`, {
+          method: 'GET'
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch preview URL');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.preview_url) {
+          throw new Error('No preview available');
+        }
+
+        // 清除现有内容
+        while (this.element.firstChild) {
+          this.element.removeChild(this.element.firstChild);
+        }
+
+        // Create media container with relative positioning
+        const mediaContainer = document.createElement('div');
+        Object.assign(mediaContainer.style, {
+          position: 'relative',
+          maxWidth: '300px',
+          maxHeight: '300px',
+        });
+
+        const isVideo = data.preview_url.endsWith('.mp4');
+        const mediaElement = isVideo ? document.createElement('video') : document.createElement('img');
+
+        Object.assign(mediaElement.style, {
+          maxWidth: '300px',
+          maxHeight: '300px',
+          objectFit: 'contain',
+          display: 'block',
+        });
+
+        if (isVideo) {
+          mediaElement.autoplay = true;
+          mediaElement.loop = true;
+          mediaElement.muted = true;
+          mediaElement.controls = false;
+        }
+
+        mediaElement.src = data.preview_url;
+
+        // Create name label with absolute positioning
+        const nameLabel = document.createElement('div');
+        nameLabel.textContent = loraName;
+        Object.assign(nameLabel.style, {
+          position: 'absolute',
+          bottom: '0',
+          left: '0',
+          right: '0',
+          padding: '8px',
+          color: 'rgba(255, 255, 255, 0.95)',
+          fontSize: '13px',
+          fontFamily: "'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif",
+          background: 'linear-gradient(transparent, rgba(0, 0, 0, 0.8))',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          textAlign: 'center',
+          backdropFilter: 'blur(4px)',
+          WebkitBackdropFilter: 'blur(4px)',
+        });
+
+        mediaContainer.appendChild(mediaElement);
+        mediaContainer.appendChild(nameLabel);
+        this.element.appendChild(mediaContainer);
+        
+        // 添加淡入效果
+        this.element.style.opacity = '0';
+        this.element.style.display = 'block';
+        this.position(x, y);
+        
+        requestAnimationFrame(() => {
+          this.element.style.transition = 'opacity 0.15s ease';
+          this.element.style.opacity = '1';
+        });
+      } catch (error) {
+        console.warn('Failed to load preview:', error);
+      }
+    }
+
+    position(x, y) {
+      // 确保预览框不超出视窗边界
+      const rect = this.element.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let left = x + 10; // 默认在鼠标右侧偏移10px
+      let top = y + 10;  // 默认在鼠标下方偏移10px
+
+      // 检查右边界
+      if (left + rect.width > viewportWidth) {
+        left = x - rect.width - 10;
+      }
+
+      // 检查下边界
+      if (top + rect.height > viewportHeight) {
+        top = y - rect.height - 10;
+      }
+
+      Object.assign(this.element.style, {
+        left: `${left}px`,
+        top: `${top}px`
+      });
+    }
+
+    hide() {
+      // 使用淡出效果
+      if (this.element.style.display === 'block') {
+        this.element.style.opacity = '0';
+        this.hideTimeout = setTimeout(() => {
+          this.element.style.display = 'none';
+          this.currentLora = null;
+          // 停止视频播放
+          const video = this.element.querySelector('video');
+          if (video) {
+            video.pause();
+          }
+          this.hideTimeout = null;
+        }, 150);
+      }
+    }
+
+    cleanup() {
+      if (this.hideTimeout) {
+        clearTimeout(this.hideTimeout);
+      }
+      // 移除所有事件监听器
+      document.removeEventListener('click', () => this.hide());
+      document.removeEventListener('scroll', () => this.hide(), true);
+      this.element.remove();
+    }
+  }
+
+  // 创建预览tooltip实例
+  const previewTooltip = new PreviewTooltip();
+
+  // Function to create menu item
+  const createMenuItem = (text, icon, onClick) => {
+    const menuItem = document.createElement('div');
+    Object.assign(menuItem.style, {
+      padding: '6px 20px',
+      cursor: 'pointer',
+      color: 'rgba(226, 232, 240, 0.9)',
+      fontSize: '13px',
+      userSelect: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+    });
+
+    // Create icon element
+    const iconEl = document.createElement('div');
+    iconEl.innerHTML = icon;
+    Object.assign(iconEl.style, {
+      width: '14px',
+      height: '14px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    });
+
+    // Create text element
+    const textEl = document.createElement('span');
+    textEl.textContent = text;
+
+    menuItem.appendChild(iconEl);
+    menuItem.appendChild(textEl);
+
+    menuItem.addEventListener('mouseenter', () => {
+      menuItem.style.backgroundColor = 'rgba(66, 153, 225, 0.2)';
+    });
+
+    menuItem.addEventListener('mouseleave', () => {
+      menuItem.style.backgroundColor = 'transparent';
+    });
+
+    if (onClick) {
+      menuItem.addEventListener('click', onClick);
+    }
+
+    return menuItem;
+  };
+
+  // Function to create context menu
+  const createContextMenu = (x, y, loraName, widget) => {
+    // Hide preview tooltip first
+    previewTooltip.hide();
+
+    // Remove existing context menu if any
+    const existingMenu = document.querySelector('.comfy-lora-context-menu');
+    if (existingMenu) {
+      existingMenu.remove();
+    }
+
+    const menu = document.createElement('div');
+    menu.className = 'comfy-lora-context-menu';
+    Object.assign(menu.style, {
+      position: 'fixed',
+      left: `${x}px`,
+      top: `${y}px`,
+      backgroundColor: 'rgba(30, 30, 30, 0.95)',
+      border: '1px solid rgba(255, 255, 255, 0.1)',
+      borderRadius: '4px',
+      padding: '4px 0',
+      zIndex: 1000,
+      boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
+       minWidth: '180px',
+    });
+
+    // View on Civitai option with globe icon
+    const viewOnCivitaiOption = createMenuItem(
+      'View on Civitai',
+      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>',
+      async () => {
+        menu.remove();
+        document.removeEventListener('click', closeMenu);
+        
+        try {
+          // Get Civitai URL from API
+          const response = await api.fetchApi(`/lora-civitai-url?name=${encodeURIComponent(loraName)}`, {
+            method: 'GET'
+          });
+          
+          if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(errorText || 'Failed to get Civitai URL');
+          }
+          
+          const data = await response.json();
+          if (data.success && data.civitai_url) {
+            // Open the URL in a new tab
+            window.open(data.civitai_url, '_blank');
+          } else {
+            // Show error message if no Civitai URL
+            if (app && app.extensionManager && app.extensionManager.toast) {
+              app.extensionManager.toast.add({
+                severity: 'warning',
+                summary: 'Not Found',
+                detail: 'This LoRA has no associated Civitai URL',
+                life: 3000
+              });
+            } else {
+              alert('This LoRA has no associated Civitai URL');
+            }
+          }
+        } catch (error) {
+          console.error('Error getting Civitai URL:', error);
+          if (app && app.extensionManager && app.extensionManager.toast) {
+            app.extensionManager.toast.add({
+              severity: 'error',
+              summary: 'Error',
+              detail: error.message || 'Failed to get Civitai URL',
+              life: 5000
+            });
+          } else {
+            alert('Error: ' + (error.message || 'Failed to get Civitai URL'));
+          }
+        }
+      }
+    );
+
+    // Delete option with trash icon
+    const deleteOption = createMenuItem(
+      'Delete', 
+      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>',
+      () => {
+        menu.remove();
+        document.removeEventListener('click', closeMenu);
+        
+        const lorasData = parseLoraValue(widget.value).filter(l => l.name !== loraName);
+        widget.value = formatLoraValue(lorasData);
+
+        if (widget.callback) {
+          widget.callback(widget.value);
+        }
+      }
+    );
+
+    // Save recipe option with bookmark icon
+    const saveOption = createMenuItem(
+      'Save Recipe',
+      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>',
+      () => {
+        menu.remove();
+        document.removeEventListener('click', closeMenu);
+        saveRecipeDirectly(widget);
+      }
+    );
+
+    // Add separator
+    const separator = document.createElement('div');
+    Object.assign(separator.style, {
+      margin: '4px 0',
+      borderTop: '1px solid rgba(255, 255, 255, 0.1)',
+    });
+
+    menu.appendChild(viewOnCivitaiOption); // Add the new menu option
+    menu.appendChild(deleteOption);
+    menu.appendChild(separator);
+    menu.appendChild(saveOption);
+    
+    document.body.appendChild(menu);
+
+    // Close menu when clicking outside
+    const closeMenu = (e) => {
+      if (!menu.contains(e.target)) {
+        menu.remove();
+        document.removeEventListener('click', closeMenu);
+      }
+    };
+    setTimeout(() => document.addEventListener('click', closeMenu), 0);
+  };
+
+  // Function to render loras from data
+  const renderLoras = (value, widget) => {
+    // Clear existing content
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+
+    // Parse the loras data
+    const lorasData = parseLoraValue(value);
+
+    if (lorasData.length === 0) {
+      // Show message when no loras are added
+      const emptyMessage = document.createElement("div");
+      emptyMessage.textContent = "No LoRAs added";
+      Object.assign(emptyMessage.style, {
+        textAlign: "center",
+        padding: "20px 0",
+        color: "rgba(226, 232, 240, 0.8)",
+        fontStyle: "italic",
+        userSelect: "none",     // Add this line to prevent text selection
+        WebkitUserSelect: "none",  // For Safari support
+        MozUserSelect: "none",     // For Firefox support
+        msUserSelect: "none",      // For IE/Edge support
+      });
+      container.appendChild(emptyMessage);
+      return;
+    }
+
+    // Create header
+    const header = document.createElement("div");
+    header.className = "comfy-loras-header";
+    Object.assign(header.style, {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: "4px 8px",
+      borderBottom: "1px solid rgba(226, 232, 240, 0.2)",
+      marginBottom: "8px"
+    });
+
+    // Add toggle all control
+    const allActive = lorasData.every(lora => lora.active);
+    const toggleAll = createToggle(allActive, (active) => {
+      // Update all loras active state
+      const lorasData = parseLoraValue(widget.value);
+      lorasData.forEach(lora => lora.active = active);
+      
+      const newValue = formatLoraValue(lorasData);
+      widget.value = newValue;
+    });
+
+    // Add label to toggle all
+    const toggleLabel = document.createElement("div");
+    toggleLabel.textContent = "Toggle All";
+    Object.assign(toggleLabel.style, {
+      color: "rgba(226, 232, 240, 0.8)",
+      fontSize: "13px",
+      marginLeft: "8px",
+      userSelect: "none",     // Add this line to prevent text selection
+      WebkitUserSelect: "none",  // For Safari support
+      MozUserSelect: "none",     // For Firefox support
+      msUserSelect: "none",      // For IE/Edge support
+    });
+
+    const toggleContainer = document.createElement("div");
+    Object.assign(toggleContainer.style, {
+      display: "flex",
+      alignItems: "center",
+    });
+    toggleContainer.appendChild(toggleAll);
+    toggleContainer.appendChild(toggleLabel);
+
+    // Strength label
+    const strengthLabel = document.createElement("div");
+    strengthLabel.textContent = "Strength";
+    Object.assign(strengthLabel.style, {
+      color: "rgba(226, 232, 240, 0.8)",
+      fontSize: "13px",
+      marginRight: "8px",
+      userSelect: "none",     // Add this line to prevent text selection
+      WebkitUserSelect: "none",  // For Safari support
+      MozUserSelect: "none",     // For Firefox support
+      msUserSelect: "none",      // For IE/Edge support
+    });
+
+    header.appendChild(toggleContainer);
+    header.appendChild(strengthLabel);
+    container.appendChild(header);
+
+    // Render each lora entry
+    lorasData.forEach((loraData) => {
+      const { name, strength, active } = loraData;
+      
+      const loraEl = document.createElement("div");
+      loraEl.className = "comfy-lora-entry";
+      Object.assign(loraEl.style, {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "8px",
+        borderRadius: "6px",
+        backgroundColor: active ? "rgba(45, 55, 72, 0.7)" : "rgba(35, 40, 50, 0.5)",
+        transition: "all 0.2s ease",
+        marginBottom: "6px",
+      });
+
+      // Create toggle for this lora
+      const toggle = createToggle(active, (newActive) => {
+        // Update this lora's active state
+        const lorasData = parseLoraValue(widget.value);
+        const loraIndex = lorasData.findIndex(l => l.name === name);
+        
+        if (loraIndex >= 0) {
+          lorasData[loraIndex].active = newActive;
+          
+          const newValue = formatLoraValue(lorasData);
+          widget.value = newValue;
+        }
+      });
+
+      // Create name display
+      const nameEl = document.createElement("div");
+      nameEl.textContent = name;
+      Object.assign(nameEl.style, {
+        marginLeft: "10px",
+        flex: "1",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        color: active ? "rgba(226, 232, 240, 0.9)" : "rgba(226, 232, 240, 0.6)",
+        fontSize: "13px",
+        cursor: "pointer", // Add pointer cursor to indicate hoverable area
+        userSelect: "none",     // Add this line to prevent text selection
+        WebkitUserSelect: "none",  // For Safari support
+        MozUserSelect: "none",     // For Firefox support
+        msUserSelect: "none",      // For IE/Edge support
+      });
+
+      // Move preview tooltip events to nameEl instead of loraEl
+      nameEl.addEventListener('mouseenter', async (e) => {
+        e.stopPropagation();
+        const rect = nameEl.getBoundingClientRect();
+        await previewTooltip.show(name, rect.right, rect.top);
+      });
+
+      nameEl.addEventListener('mouseleave', (e) => {
+        e.stopPropagation();
+        previewTooltip.hide();
+      });
+
+      // Remove the preview tooltip events from loraEl
+      loraEl.onmouseenter = () => {
+        loraEl.style.backgroundColor = active ? "rgba(50, 60, 80, 0.8)" : "rgba(40, 45, 55, 0.6)";
+      };
+      
+      loraEl.onmouseleave = () => {
+        loraEl.style.backgroundColor = active ? "rgba(45, 55, 72, 0.7)" : "rgba(35, 40, 50, 0.5)";
+      };
+
+      // Add context menu event
+      loraEl.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        createContextMenu(e.clientX, e.clientY, name, widget);
+      });
+
+      // Create strength control
+      const strengthControl = document.createElement("div");
+      Object.assign(strengthControl.style, {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+      });
+
+      // Left arrow
+      const leftArrow = createArrowButton("left", () => {
+        // Decrease strength
+        const lorasData = parseLoraValue(widget.value);
+        const loraIndex = lorasData.findIndex(l => l.name === name);
+        
+        if (loraIndex >= 0) {
+          lorasData[loraIndex].strength = (lorasData[loraIndex].strength - 0.05).toFixed(2);
+          
+          const newValue = formatLoraValue(lorasData);
+          widget.value = newValue;
+        }
+      });
+
+      // Strength display
+      const strengthEl = document.createElement("input");
+      strengthEl.type = "text";
+      strengthEl.value = typeof strength === 'number' ? strength.toFixed(2) : Number(strength).toFixed(2);
+      Object.assign(strengthEl.style, {
+        minWidth: "50px",
+        width: "50px",
+        textAlign: "center",
+        color: active ? "rgba(226, 232, 240, 0.9)" : "rgba(226, 232, 240, 0.6)",
+        fontSize: "13px",
+        background: "none",
+        border: "1px solid transparent",
+        padding: "2px 4px",
+        borderRadius: "3px",
+        outline: "none",
+      });
+
+      // 添加hover效果
+      strengthEl.addEventListener('mouseenter', () => {
+        strengthEl.style.border = "1px solid rgba(226, 232, 240, 0.2)";
+      });
+
+      strengthEl.addEventListener('mouseleave', () => {
+        if (document.activeElement !== strengthEl) {
+          strengthEl.style.border = "1px solid transparent";
+        }
+      });
+
+      // 处理焦点
+      strengthEl.addEventListener('focus', () => {
+        strengthEl.style.border = "1px solid rgba(66, 153, 225, 0.6)";
+        strengthEl.style.background = "rgba(0, 0, 0, 0.2)";
+        // 自动选中所有内容
+        strengthEl.select();
+      });
+
+      strengthEl.addEventListener('blur', () => {
+        strengthEl.style.border = "1px solid transparent";
+        strengthEl.style.background = "none";
+      });
+
+      // 处理输入变化
+      strengthEl.addEventListener('change', () => {
+        let newValue = parseFloat(strengthEl.value);
+        
+        // 验证输入
+        if (isNaN(newValue)) {
+          newValue = 1.0;
+        }
+        
+        // 更新数值
+        const lorasData = parseLoraValue(widget.value);
+        const loraIndex = lorasData.findIndex(l => l.name === name);
+        
+        if (loraIndex >= 0) {
+          lorasData[loraIndex].strength = newValue.toFixed(2);
+          
+          // 更新值并触发回调
+          const newLorasValue = formatLoraValue(lorasData);
+          widget.value = newLorasValue;
+        }
+      });
+
+      // 处理按键事件
+      strengthEl.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          strengthEl.blur();
+        }
+      });
+
+      // Right arrow
+      const rightArrow = createArrowButton("right", () => {
+        // Increase strength
+        const lorasData = parseLoraValue(widget.value);
+        const loraIndex = lorasData.findIndex(l => l.name === name);
+        
+        if (loraIndex >= 0) {
+          lorasData[loraIndex].strength = (parseFloat(lorasData[loraIndex].strength) + 0.05).toFixed(2);
+          
+          const newValue = formatLoraValue(lorasData);
+          widget.value = newValue;
+        }
+      });
+
+      strengthControl.appendChild(leftArrow);
+      strengthControl.appendChild(strengthEl);
+      strengthControl.appendChild(rightArrow);
+
+      // Assemble entry
+      const leftSection = document.createElement("div");
+      Object.assign(leftSection.style, {
+        display: "flex",
+        alignItems: "center",
+        flex: "1",
+        minWidth: "0", // Allow shrinking
+      });
+      
+      leftSection.appendChild(toggle);
+      leftSection.appendChild(nameEl);
+      
+      loraEl.appendChild(leftSection);
+      loraEl.appendChild(strengthControl);
+
+      container.appendChild(loraEl);
+    });
+  };
+
+  // Store the value in a variable to avoid recursion
+  let widgetValue = defaultValue;
+
+  // Create widget with initial properties
+  const widget = node.addDOMWidget(name, "loras", container, {
+    getValue: function() {
+      return widgetValue;
+    },
+    setValue: function(v) {
+      // Remove duplicates by keeping the last occurrence of each lora name
+      const uniqueValue = (v || []).reduce((acc, lora) => {
+        // Remove any existing lora with the same name
+        const filtered = acc.filter(l => l.name !== lora.name);
+        // Add the current lora
+        return [...filtered, lora];
+      }, []);
+
+      widgetValue = uniqueValue;
+      renderLoras(widgetValue, widget);
+      
+      // Update container height after rendering
+      requestAnimationFrame(() => {
+        const minHeight = this.getMinHeight();
+        container.style.height = `${minHeight}px`;
+        
+        // Force node to update size
+        node.setSize([node.size[0], node.computeSize()[1]]);
+        node.setDirtyCanvas(true, true);
+      });
+    },
+    getMinHeight: function() {
+      // Calculate height based on content
+      const lorasCount = parseLoraValue(widgetValue).length;
+      return Math.max(
+        100,
+        lorasCount > 0 ? 60 + lorasCount * 44 : 60
+      );
+    },
+  });
+
+  widget.value = defaultValue;
+
+  widget.callback = callback;
+
+  widget.serializeValue = () => {
+    // Add dummy items to avoid the 2-element serialization issue, a bug in comfyui
+    return [...widgetValue, 
+        { name: "__dummy_item1__", strength: 0, active: false, _isDummy: true },
+        { name: "__dummy_item2__", strength: 0, active: false, _isDummy: true }
+      ];
+  }
+
+  widget.onRemove = () => {
+    container.remove(); 
+    previewTooltip.cleanup();
+  };
+
+  return { minWidth: 400, minHeight: 200, widget };
+}
+
+// Function to directly save the recipe without dialog
+async function saveRecipeDirectly(widget) {
+  try {
+    // Get the workflow data from the ComfyUI app
+    const prompt = await app.graphToPrompt();
+    console.log('Prompt:', prompt);
+    
+    // Show loading toast
+    if (app && app.extensionManager && app.extensionManager.toast) {
+      app.extensionManager.toast.add({
+        severity: 'info',
+        summary: 'Saving Recipe',
+        detail: 'Please wait...',
+        life: 2000
+      });
+    }
+    
+    // Prepare the data - only send workflow JSON
+    const formData = new FormData();
+    formData.append('workflow_json', JSON.stringify(prompt.output));
+    
+    // Send the request
+    const response = await fetch('/api/recipes/save-from-widget', {
+      method: 'POST',
+      body: formData
+    });
+    
+    const result = await response.json();
+    
+    // Show result toast
+    if (app && app.extensionManager && app.extensionManager.toast) {
+      if (result.success) {
+        app.extensionManager.toast.add({
+          severity: 'success',
+          summary: 'Recipe Saved',
+          detail: 'Recipe has been saved successfully',
+          life: 3000
+        });
+      } else {
+        app.extensionManager.toast.add({
+          severity: 'error',
+          summary: 'Error',
+          detail: result.error || 'Failed to save recipe',
+          life: 5000
+        });
+      }
+    }
+  } catch (error) {
+    console.error('Error saving recipe:', error);
+    
+    // Show error toast
+    if (app && app.extensionManager && app.extensionManager.toast) {
+      app.extensionManager.toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: 'Failed to save recipe: ' + (error.message || 'Unknown error'),
+        life: 5000
+      });
+    }
+  }
+}

web/comfyui/legacy_tags_widget.js

@@ -0,0 +1,193 @@
+export function addTagsWidget(node, name, opts, callback) {
+  // Create container for tags
+  const container = document.createElement("div");
+  container.className = "comfy-tags-container";
+  Object.assign(container.style, {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "4px",    // 从8px减小到4px
+    padding: "6px",
+    minHeight: "30px",
+    backgroundColor: "rgba(40, 44, 52, 0.6)",  // Darker, more modern background
+    borderRadius: "6px",    // Slightly larger radius
+    width: "100%",
+  });
+
+  // Initialize default value as array
+  const initialTagsData = opts?.defaultVal || [];
+
+  // Function to render tags from array data
+  const renderTags = (tagsData, widget) => {
+    // Clear existing tags
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+
+    const normalizedTags = tagsData;
+
+    if (normalizedTags.length === 0) {
+      // Show message when no tags are present
+      const emptyMessage = document.createElement("div");
+      emptyMessage.textContent = "No trigger words detected";
+      Object.assign(emptyMessage.style, {
+        textAlign: "center",
+        padding: "20px 0",
+        color: "rgba(226, 232, 240, 0.8)",
+        fontStyle: "italic",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        MozUserSelect: "none",
+        msUserSelect: "none",
+      });
+      container.appendChild(emptyMessage);
+      return;
+    }
+
+    normalizedTags.forEach((tagData, index) => {
+      const { text, active } = tagData;
+      const tagEl = document.createElement("div");
+      tagEl.className = "comfy-tag";
+      
+      updateTagStyle(tagEl, active);
+
+      tagEl.textContent = text;
+      tagEl.title = text; // Set tooltip for full content
+
+      // Add click handler to toggle state
+      tagEl.addEventListener("click", (e) => {
+        e.stopPropagation();
+
+        // Toggle active state for this specific tag using its index
+        const updatedTags = [...widget.value];
+        updatedTags[index].active = !updatedTags[index].active;
+        updateTagStyle(tagEl, updatedTags[index].active);
+
+        widget.value = updatedTags;
+      });
+
+      container.appendChild(tagEl);
+    });
+  };
+
+  // Helper function to update tag style based on active state
+  function updateTagStyle(tagEl, active) {
+    const baseStyles = {
+      padding: "4px 12px",    // 垂直内边距从6px减小到4px
+      borderRadius: "6px",    // Matching container radius
+      maxWidth: "200px",      // Increased max width
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      fontSize: "13px",       // Slightly larger font
+      cursor: "pointer",
+      transition: "all 0.2s ease",  // Smoother transition
+      border: "1px solid transparent",
+      display: "inline-block",
+      boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
+      margin: "2px",          // 从4px减小到2px
+      userSelect: "none",     // Add this line to prevent text selection
+      WebkitUserSelect: "none",  // For Safari support
+      MozUserSelect: "none",     // For Firefox support
+      msUserSelect: "none",      // For IE/Edge support
+    };
+
+    if (active) {
+      Object.assign(tagEl.style, {
+        ...baseStyles,
+        backgroundColor: "rgba(66, 153, 225, 0.9)",  // Modern blue
+        color: "white",
+        borderColor: "rgba(66, 153, 225, 0.9)",
+      });
+    } else {
+      Object.assign(tagEl.style, {
+        ...baseStyles,
+        backgroundColor: "rgba(45, 55, 72, 0.7)",    // Darker inactive state
+        color: "rgba(226, 232, 240, 0.8)",          // Lighter text for contrast
+        borderColor: "rgba(226, 232, 240, 0.2)",
+      });
+    }
+
+    // Add hover effect
+    tagEl.onmouseenter = () => {
+      tagEl.style.transform = "translateY(-1px)";
+      tagEl.style.boxShadow = "0 2px 4px rgba(0,0,0,0.15)";
+    };
+
+    tagEl.onmouseleave = () => {
+      tagEl.style.transform = "translateY(0)";
+      tagEl.style.boxShadow = "0 1px 2px rgba(0,0,0,0.1)";
+    };
+  }
+
+  // Store the value as array
+  let widgetValue = initialTagsData;
+
+  // Create widget with initial properties
+  const widget = node.addDOMWidget(name, "tags", container, {
+    getValue: function() {
+      return widgetValue;
+    },
+    setValue: function(v) {
+      widgetValue = v;
+      renderTags(widgetValue, widget);
+
+      // Update container height after rendering
+      requestAnimationFrame(() => {
+        const minHeight = this.getMinHeight();
+        container.style.height = `${minHeight}px`;
+        
+        // Force node to update size
+        node.setSize([node.size[0], node.computeSize()[1]]);
+        node.setDirtyCanvas(true, true);
+      });
+    },
+    getMinHeight: function() {
+      const minHeight = 150;
+      // If no tags or only showing the empty message, return a minimum height
+      if (widgetValue.length === 0) {
+        return minHeight; // Height for empty state with message
+      }
+      
+      // Get all tag elements
+      const tagElements = container.querySelectorAll('.comfy-tag');
+      
+      if (tagElements.length === 0) {
+        return minHeight; // Fallback if elements aren't rendered yet
+      }
+      
+      // Calculate the actual height based on tag positions
+      let maxBottom = 0;
+      
+      tagElements.forEach(tag => {
+        const rect = tag.getBoundingClientRect();
+        const tagBottom = rect.bottom - container.getBoundingClientRect().top;
+        maxBottom = Math.max(maxBottom, tagBottom);
+      });
+      
+      // Add padding (top and bottom padding of container)
+      const computedStyle = window.getComputedStyle(container);
+      const paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
+      const paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
+      
+      // Add extra buffer for potential wrapping issues and to ensure no clipping
+      const extraBuffer = 20;
+      
+      // Round up to nearest 5px for clean sizing and ensure minimum height
+      return Math.max(minHeight, Math.ceil((maxBottom + paddingBottom + extraBuffer) / 5) * 5);
+    },
+  });
+
+  widget.value = initialTagsData;
+
+  widget.callback = callback;
+
+  widget.serializeValue = () => {
+    // Add dummy items to avoid the 2-element serialization issue, a bug in comfyui
+    return [...widgetValue, 
+        { text: "__dummy_item__", active: false, _isDummy: true },
+        { text: "__dummy_item__", active: false, _isDummy: true }
+      ];
+  };
+
+  return { minWidth: 300, minHeight: 150, widget };
+}

web/comfyui/lora_loader.js

@@ -1,9 +1,14 @@
 import { app } from "../../scripts/app.js";
-import { addLorasWidget } from "./loras_widget.js";
+import { dynamicImportByVersion } from "./utils.js";
 
 // Extract pattern into a constant for consistent use
 const LORA_PATTERN = /<lora:([^:]+):([-\d\.]+)>/g;
 
+// Function to get the appropriate loras widget based on ComfyUI version
+async function getLorasWidgetModule() {
+    return await dynamicImportByVersion("./loras_widget.js", "./legacy_loras_widget.js");
+}
+
 function mergeLoras(lorasText, lorasArr) {
     const result = [];
     let match;
@@ -35,12 +40,16 @@ app.registerExtension({
             // Enable widget serialization
             node.serialize_widgets = true;
 
+            node.addInput('clip', 'CLIP', {
+                "shape": 7
+            });
+
             node.addInput("lora_stack", 'LORA_STACK', {
                 "shape": 7  // 7 is the shape of the optional input
             });
 
             // Wait for node to be properly initialized
-            requestAnimationFrame(() => {
+            requestAnimationFrame(async () => {
                 // Restore saved value if exists
                 let existingLoras = [];
                 if (node.widgets_values && node.widgets_values.length > 0) {
@@ -63,6 +72,10 @@ app.registerExtension({
                 
                 // Add flag to prevent callback loops
                 let isUpdating = false;
+                
+                // Dynamically load the appropriate widget module
+                const lorasModule = await getLorasWidgetModule();
+                const { addLorasWidget } = lorasModule;
                  
                 // Get the widget object directly from the returned object
                 const result = addLorasWidget(node, "loras", {

web/comfyui/loras_widget.js

@@ -5,19 +5,34 @@ export function addLorasWidget(node, name, opts, callback) {
   // Create container for loras
   const container = document.createElement("div");
   container.className = "comfy-loras-container";
+  
+  // Set initial height using CSS variables approach
+  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: "flex",
     flexDirection: "column",
-    gap: "8px",
+    gap: "5px",
     padding: "6px",
     backgroundColor: "rgba(40, 44, 52, 0.6)",
     borderRadius: "6px",
     width: "100%",
+    boxSizing: "border-box",
+    overflow: "auto"
   });
 
   // Initialize default value
   const defaultValue = opts?.defaultVal || [];
 
+  // Fixed sizes for component calculations
+  const LORA_ENTRY_HEIGHT = 40; // Height of a single lora entry
+  const HEADER_HEIGHT = 40; // Height of the header section
+  const CONTAINER_PADDING = 12; // Top and bottom padding
+  const EMPTY_CONTAINER_HEIGHT = 100; // Height when no loras are present
+
   // Parse LoRA entries from value
   const parseLoraValue = (value) => {
     if (!value) return [];
@@ -29,6 +44,23 @@ export function addLorasWidget(node, name, opts, callback) {
     return loras;
   };
 
+  // Function to update widget height consistently
+  const updateWidgetHeight = (height) => {
+    // Ensure minimum height
+    const finalHeight = Math.max(defaultHeight, height);
+    
+    // Update CSS variables
+    container.style.setProperty('--comfy-widget-min-height', `${finalHeight}px`);
+    container.style.setProperty('--comfy-widget-height', `${finalHeight}px`);
+    
+    // Force node to update size after a short delay to ensure DOM is updated
+    if (node) {
+      setTimeout(() => {
+        node.setDirtyCanvas(true, true);
+      }, 10);
+    }
+  };
+
   // Function to create toggle element
   const createToggle = (active, onChange) => {
     const toggle = document.createElement("div");
@@ -107,7 +139,7 @@ export function addLorasWidget(node, name, opts, callback) {
     return button;
   };
 
-  // 添加预览弹窗组件
+  // Preview tooltip class
   class PreviewTooltip {
     constructor() {
       this.element = document.createElement('div');
@@ -122,31 +154,31 @@ export function addLorasWidget(node, name, opts, callback) {
         maxWidth: '300px',
       });
       document.body.appendChild(this.element);
-      this.hideTimeout = null;  // 添加超时处理变量
+      this.hideTimeout = null;
       
-      // 添加全局点击事件来隐藏tooltip
+      // Add global click event to hide tooltip
       document.addEventListener('click', () => this.hide());
       
-      // 添加滚动事件监听
+      // Add scroll event listener
       document.addEventListener('scroll', () => this.hide(), true);
     }
 
     async show(loraName, x, y) {
       try {
-        // 清除之前的隐藏定时器
+        // Clear previous hide timer
         if (this.hideTimeout) {
           clearTimeout(this.hideTimeout);
           this.hideTimeout = null;
         }
 
-        // 如果已经显示同一个lora的预览，则不重复显示
+        // Don't redisplay the same lora preview
         if (this.element.style.display === 'block' && this.currentLora === loraName) {
           return;
         }
 
         this.currentLora = loraName;
         
-        // 获取预览URL
+        // Get preview URL
         const response = await api.fetchApi(`/lora-preview-url?name=${encodeURIComponent(loraName)}`, {
           method: 'GET'
         });
@@ -160,7 +192,7 @@ export function addLorasWidget(node, name, opts, callback) {
           throw new Error('No preview available');
         }
 
-        // 清除现有内容
+        // Clear existing content
         while (this.element.firstChild) {
           this.element.removeChild(this.element.firstChild);
         }
@@ -217,7 +249,7 @@ export function addLorasWidget(node, name, opts, callback) {
         mediaContainer.appendChild(nameLabel);
         this.element.appendChild(mediaContainer);
         
-        // 添加淡入效果
+        // Add fade-in effect
         this.element.style.opacity = '0';
         this.element.style.display = 'block';
         this.position(x, y);
@@ -232,20 +264,20 @@ export function addLorasWidget(node, name, opts, callback) {
     }
 
     position(x, y) {
-      // 确保预览框不超出视窗边界
+      // Ensure preview box doesn't exceed viewport boundaries
       const rect = this.element.getBoundingClientRect();
       const viewportWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
 
-      let left = x + 10; // 默认在鼠标右侧偏移10px
-      let top = y + 10;  // 默认在鼠标下方偏移10px
+      let left = x + 10; // Default 10px offset to the right of mouse
+      let top = y + 10;  // Default 10px offset below mouse
 
-      // 检查右边界
+      // Check right boundary
       if (left + rect.width > viewportWidth) {
         left = x - rect.width - 10;
       }
 
-      // 检查下边界
+      // Check bottom boundary
       if (top + rect.height > viewportHeight) {
         top = y - rect.height - 10;
       }
@@ -257,13 +289,13 @@ export function addLorasWidget(node, name, opts, callback) {
     }
 
     hide() {
-      // 使用淡出效果
+      // Use fade-out effect
       if (this.element.style.display === 'block') {
         this.element.style.opacity = '0';
         this.hideTimeout = setTimeout(() => {
           this.element.style.display = 'none';
           this.currentLora = null;
-          // 停止视频播放
+          // Stop video playback
           const video = this.element.querySelector('video');
           if (video) {
             video.pause();
@@ -277,14 +309,14 @@ export function addLorasWidget(node, name, opts, callback) {
       if (this.hideTimeout) {
         clearTimeout(this.hideTimeout);
       }
-      // 移除所有事件监听器
+      // Remove all event listeners
       document.removeEventListener('click', () => this.hide());
       document.removeEventListener('scroll', () => this.hide(), true);
       this.element.remove();
     }
   }
 
-  // 创建预览tooltip实例
+  // Create preview tooltip instance
   const previewTooltip = new PreviewTooltip();
 
   // Function to create menu item
@@ -357,7 +389,7 @@ export function addLorasWidget(node, name, opts, callback) {
       padding: '4px 0',
       zIndex: 1000,
       boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
-       minWidth: '180px',
+      minWidth: '180px',
     });
 
     // View on Civitai option with globe icon
@@ -447,7 +479,7 @@ export function addLorasWidget(node, name, opts, callback) {
       borderTop: '1px solid rgba(255, 255, 255, 0.1)',
     });
 
-    menu.appendChild(viewOnCivitaiOption); // Add the new menu option
+    menu.appendChild(viewOnCivitaiOption);
     menu.appendChild(deleteOption);
     menu.appendChild(separator);
     menu.appendChild(saveOption);
@@ -483,12 +515,16 @@ export function addLorasWidget(node, name, opts, callback) {
         padding: "20px 0",
         color: "rgba(226, 232, 240, 0.8)",
         fontStyle: "italic",
-        userSelect: "none",     // Add this line to prevent text selection
-        WebkitUserSelect: "none",  // For Safari support
-        MozUserSelect: "none",     // For Firefox support
-        msUserSelect: "none",      // For IE/Edge support
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        MozUserSelect: "none",
+        msUserSelect: "none",
+        width: "100%"
       });
       container.appendChild(emptyMessage);
+      
+      // Set fixed height for empty state
+      updateWidgetHeight(EMPTY_CONTAINER_HEIGHT);
       return;
     }
 
@@ -501,7 +537,7 @@ export function addLorasWidget(node, name, opts, callback) {
       alignItems: "center",
       padding: "4px 8px",
       borderBottom: "1px solid rgba(226, 232, 240, 0.2)",
-      marginBottom: "8px"
+      marginBottom: "5px"
     });
 
     // Add toggle all control
@@ -522,10 +558,10 @@ export function addLorasWidget(node, name, opts, callback) {
       color: "rgba(226, 232, 240, 0.8)",
       fontSize: "13px",
       marginLeft: "8px",
-      userSelect: "none",     // Add this line to prevent text selection
-      WebkitUserSelect: "none",  // For Safari support
-      MozUserSelect: "none",     // For Firefox support
-      msUserSelect: "none",      // For IE/Edge support
+      userSelect: "none",
+      WebkitUserSelect: "none",
+      MozUserSelect: "none",
+      msUserSelect: "none",
     });
 
     const toggleContainer = document.createElement("div");
@@ -543,10 +579,10 @@ export function addLorasWidget(node, name, opts, callback) {
       color: "rgba(226, 232, 240, 0.8)",
       fontSize: "13px",
       marginRight: "8px",
-      userSelect: "none",     // Add this line to prevent text selection
-      WebkitUserSelect: "none",  // For Safari support
-      MozUserSelect: "none",     // For Firefox support
-      msUserSelect: "none",      // For IE/Edge support
+      userSelect: "none",
+      WebkitUserSelect: "none",
+      MozUserSelect: "none",
+      msUserSelect: "none",
     });
 
     header.appendChild(toggleContainer);
@@ -563,11 +599,11 @@ export function addLorasWidget(node, name, opts, callback) {
         display: "flex",
         justifyContent: "space-between",
         alignItems: "center",
-        padding: "8px",
+        padding: "6px",
         borderRadius: "6px",
         backgroundColor: active ? "rgba(45, 55, 72, 0.7)" : "rgba(35, 40, 50, 0.5)",
         transition: "all 0.2s ease",
-        marginBottom: "6px",
+        marginBottom: "4px",
       });
 
       // Create toggle for this lora
@@ -595,11 +631,11 @@ export function addLorasWidget(node, name, opts, callback) {
         whiteSpace: "nowrap",
         color: active ? "rgba(226, 232, 240, 0.9)" : "rgba(226, 232, 240, 0.6)",
         fontSize: "13px",
-        cursor: "pointer", // Add pointer cursor to indicate hoverable area
-        userSelect: "none",     // Add this line to prevent text selection
-        WebkitUserSelect: "none",  // For Safari support
-        MozUserSelect: "none",     // For Firefox support
-        msUserSelect: "none",      // For IE/Edge support
+        cursor: "pointer",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        MozUserSelect: "none",
+        msUserSelect: "none",
       });
 
       // Move preview tooltip events to nameEl instead of loraEl
@@ -645,7 +681,7 @@ export function addLorasWidget(node, name, opts, callback) {
         const loraIndex = lorasData.findIndex(l => l.name === name);
         
         if (loraIndex >= 0) {
-          lorasData[loraIndex].strength = (lorasData[loraIndex].strength - 0.05).toFixed(2);
+          lorasData[loraIndex].strength = (parseFloat(lorasData[loraIndex].strength) - 0.05).toFixed(2);
           
           const newValue = formatLoraValue(lorasData);
           widget.value = newValue;
@@ -669,7 +705,7 @@ export function addLorasWidget(node, name, opts, callback) {
         outline: "none",
       });
 
-      // 添加hover效果
+      // Add hover effect
       strengthEl.addEventListener('mouseenter', () => {
         strengthEl.style.border = "1px solid rgba(226, 232, 240, 0.2)";
       });
@@ -680,11 +716,11 @@ export function addLorasWidget(node, name, opts, callback) {
         }
       });
 
-      // 处理焦点
+      // Handle focus
       strengthEl.addEventListener('focus', () => {
         strengthEl.style.border = "1px solid rgba(66, 153, 225, 0.6)";
         strengthEl.style.background = "rgba(0, 0, 0, 0.2)";
-        // 自动选中所有内容
+        // Auto-select all content
         strengthEl.select();
       });
 
@@ -693,29 +729,29 @@ export function addLorasWidget(node, name, opts, callback) {
         strengthEl.style.background = "none";
       });
 
-      // 处理输入变化
+      // Handle input changes
       strengthEl.addEventListener('change', () => {
         let newValue = parseFloat(strengthEl.value);
         
-        // 验证输入
+        // Validate input
         if (isNaN(newValue)) {
           newValue = 1.0;
         }
         
-        // 更新数值
+        // Update value
         const lorasData = parseLoraValue(widget.value);
         const loraIndex = lorasData.findIndex(l => l.name === name);
         
         if (loraIndex >= 0) {
           lorasData[loraIndex].strength = newValue.toFixed(2);
           
-          // 更新值并触发回调
+          // Update value and trigger callback
           const newLorasValue = formatLoraValue(lorasData);
           widget.value = newLorasValue;
         }
       });
 
-      // 处理按键事件
+      // Handle key events
       strengthEl.addEventListener('keydown', (e) => {
         if (e.key === 'Enter') {
           strengthEl.blur();
@@ -757,13 +793,17 @@ export function addLorasWidget(node, name, opts, callback) {
 
       container.appendChild(loraEl);
     });
+    
+    // Calculate height based on number of loras and fixed sizes
+    const calculatedHeight = CONTAINER_PADDING + HEADER_HEIGHT + (lorasData.length * LORA_ENTRY_HEIGHT);
+    updateWidgetHeight(calculatedHeight);
   };
 
   // Store the value in a variable to avoid recursion
   let widgetValue = defaultValue;
 
-  // Create widget with initial properties
-  const widget = node.addDOMWidget(name, "loras", container, {
+  // Create widget with new DOM Widget API
+  const widget = node.addDOMWidget(name, "custom", container, {
     getValue: function() {
       return widgetValue;
     },
@@ -778,29 +818,28 @@ export function addLorasWidget(node, name, opts, callback) {
 
       widgetValue = uniqueValue;
       renderLoras(widgetValue, widget);
-      
-      // Update container height after rendering
-      requestAnimationFrame(() => {
-        const minHeight = this.getMinHeight();
-        container.style.height = `${minHeight}px`;
-        
-        // Force node to update size
-        node.setSize([node.size[0], node.computeSize()[1]]);
-        node.setDirtyCanvas(true, true);
-      });
     },
     getMinHeight: function() {
-      // Calculate height based on content
-      const lorasCount = parseLoraValue(widgetValue).length;
-      return Math.max(
-        100,
-        lorasCount > 0 ? 60 + lorasCount * 44 : 60
-      );
+      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 parseInt(container.style.getPropertyValue('--comfy-widget-height')) || defaultHeight;
+    },
+    hideOnZoom: true,
+    selectOn: ['click', 'focus'],
+    afterResize: function(node) {
+      // Re-render after node resize
+      if (this.value && this.value.length > 0) {
+        renderLoras(this.value, this);
+      }
+    }
   });
 
   widget.value = defaultValue;
-
+  
   widget.callback = callback;
 
   widget.serializeValue = () => {
@@ -816,7 +855,7 @@ export function addLorasWidget(node, name, opts, callback) {
     previewTooltip.cleanup();
   };
 
-  return { minWidth: 400, minHeight: 200, widget };
+  return { minWidth: 400, minHeight: defaultHeight, widget };
 }
 
 // Function to directly save the recipe without dialog
@@ -824,7 +863,6 @@ async function saveRecipeDirectly(widget) {
   try {
     // Get the workflow data from the ComfyUI app
     const prompt = await app.graphToPrompt();
-    console.log('Prompt:', prompt.output);
     
     // Show loading toast
     if (app && app.extensionManager && app.extensionManager.toast) {
@@ -879,4 +917,4 @@ async function saveRecipeDirectly(widget) {
       });
     }
   }
-}
+} 

web/comfyui/tags_widget.js

@@ -2,20 +2,36 @@ export function addTagsWidget(node, name, opts, callback) {
   // Create container for tags
   const container = document.createElement("div");
   container.className = "comfy-tags-container";
+  
+  // Set initial height
+  const defaultHeight = 150;
+  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: "flex",
     flexWrap: "wrap",
-    gap: "4px",    // 从8px减小到4px
+    gap: "4px",
     padding: "6px",
-    minHeight: "30px",
-    backgroundColor: "rgba(40, 44, 52, 0.6)",  // Darker, more modern background
-    borderRadius: "6px",    // Slightly larger radius
+    backgroundColor: "rgba(40, 44, 52, 0.6)",
+    borderRadius: "6px",
     width: "100%",
+    boxSizing: "border-box",
+    overflow: "auto",
+    alignItems: "flex-start" // Ensure tags align at the top of each row
   });
 
   // Initialize default value as array
   const initialTagsData = opts?.defaultVal || [];
 
+  // Fixed sizes for tag elements to avoid zoom-related calculation issues
+  const TAG_HEIGHT = 26; // Adjusted height of a single tag including margins
+  const TAGS_PER_ROW = 3; // Approximate number of tags per row
+  const ROW_GAP = 2; // Reduced gap between rows
+  const CONTAINER_PADDING = 12; // Top and bottom padding
+  const EMPTY_CONTAINER_HEIGHT = 60; // Height when no tags are present
+
   // Function to render tags from array data
   const renderTags = (tagsData, widget) => {
     // Clear existing tags
@@ -38,11 +54,28 @@ export function addTagsWidget(node, name, opts, callback) {
         WebkitUserSelect: "none",
         MozUserSelect: "none",
         msUserSelect: "none",
+        width: "100%"
       });
       container.appendChild(emptyMessage);
+      
+      // Set fixed height for empty state
+      updateWidgetHeight(EMPTY_CONTAINER_HEIGHT);
       return;
     }
 
+    // Create a row container approach for better layout control
+    let rowContainer = document.createElement("div");
+    rowContainer.className = "comfy-tags-row";
+    Object.assign(rowContainer.style, {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "4px",
+      width: "100%",
+      marginBottom: "2px" // Small gap between rows
+    });
+    container.appendChild(rowContainer);
+
+    let tagCount = 0;
     normalizedTags.forEach((tagData, index) => {
       const { text, active } = tagData;
       const tagEl = document.createElement("div");
@@ -65,44 +98,75 @@ export function addTagsWidget(node, name, opts, callback) {
         widget.value = updatedTags;
       });
 
-      container.appendChild(tagEl);
+      rowContainer.appendChild(tagEl);
+      tagCount++;
     });
+    
+    // Calculate height based on number of tags and fixed sizes
+    const tagsCount = normalizedTags.length;
+    const rows = Math.ceil(tagsCount / TAGS_PER_ROW);
+    const calculatedHeight = CONTAINER_PADDING + (rows * TAG_HEIGHT) + ((rows - 1) * ROW_GAP);
+    
+    // Update widget height with calculated value
+    updateWidgetHeight(calculatedHeight);
+  };
+
+  // Function to update widget height consistently
+  const updateWidgetHeight = (height) => {
+    // Ensure minimum height
+    const finalHeight = Math.max(defaultHeight, height);
+    
+    // Update CSS variables
+    container.style.setProperty('--comfy-widget-min-height', `${finalHeight}px`);
+    container.style.setProperty('--comfy-widget-height', `${finalHeight}px`);
+    
+    // Force node to update size after a short delay to ensure DOM is updated
+    if (node) {
+      setTimeout(() => {
+        node.setDirtyCanvas(true, true);
+      }, 10);
+    }
   };
 
   // Helper function to update tag style based on active state
   function updateTagStyle(tagEl, active) {
     const baseStyles = {
-      padding: "4px 12px",    // 垂直内边距从6px减小到4px
-      borderRadius: "6px",    // Matching container radius
-      maxWidth: "200px",      // Increased max width
+      padding: "4px 10px", // Slightly reduced horizontal padding
+      borderRadius: "6px",
+      maxWidth: "200px",
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
-      fontSize: "13px",       // Slightly larger font
+      fontSize: "13px",
       cursor: "pointer",
-      transition: "all 0.2s ease",  // Smoother transition
+      transition: "all 0.2s ease",
       border: "1px solid transparent",
-      display: "inline-block",
+      display: "inline-flex", // Changed to inline-flex for better text alignment
+      alignItems: "center", // Center text vertically
+      justifyContent: "center", // Center text horizontally
       boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
-      margin: "2px",          // 从4px减小到2px
-      userSelect: "none",     // Add this line to prevent text selection
-      WebkitUserSelect: "none",  // For Safari support
-      MozUserSelect: "none",     // For Firefox support
-      msUserSelect: "none",      // For IE/Edge support
+      margin: "1px", // Reduced margin
+      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
     };
 
     if (active) {
       Object.assign(tagEl.style, {
         ...baseStyles,
-        backgroundColor: "rgba(66, 153, 225, 0.9)",  // Modern blue
+        backgroundColor: "rgba(66, 153, 225, 0.9)",
         color: "white",
         borderColor: "rgba(66, 153, 225, 0.9)",
       });
     } else {
       Object.assign(tagEl.style, {
         ...baseStyles,
-        backgroundColor: "rgba(45, 55, 72, 0.7)",    // Darker inactive state
-        color: "rgba(226, 232, 240, 0.8)",          // Lighter text for contrast
+        backgroundColor: "rgba(45, 55, 72, 0.7)",
+        color: "rgba(226, 232, 240, 0.8)",
         borderColor: "rgba(226, 232, 240, 0.2)",
       });
     }
@@ -122,72 +186,48 @@ export function addTagsWidget(node, name, opts, callback) {
   // Store the value as array
   let widgetValue = initialTagsData;
 
-  // Create widget with initial properties
-  const widget = node.addDOMWidget(name, "tags", container, {
+  // Create widget with new DOM Widget API
+  const widget = node.addDOMWidget(name, "custom", container, {
     getValue: function() {
       return widgetValue;
     },
     setValue: function(v) {
       widgetValue = v;
       renderTags(widgetValue, widget);
-
-      // Update container height after rendering
-      requestAnimationFrame(() => {
-        const minHeight = this.getMinHeight();
-        container.style.height = `${minHeight}px`;
-        
-        // Force node to update size
-        node.setSize([node.size[0], node.computeSize()[1]]);
-        node.setDirtyCanvas(true, true);
-      });
     },
     getMinHeight: function() {
-      const minHeight = 150;
-      // If no tags or only showing the empty message, return a minimum height
-      if (widgetValue.length === 0) {
-        return minHeight; // Height for empty state with message
-      }
-      
-      // Get all tag elements
-      const tagElements = container.querySelectorAll('.comfy-tag');
-      
-      if (tagElements.length === 0) {
-        return minHeight; // Fallback if elements aren't rendered yet
-      }
-      
-      // Calculate the actual height based on tag positions
-      let maxBottom = 0;
-      
-      tagElements.forEach(tag => {
-        const rect = tag.getBoundingClientRect();
-        const tagBottom = rect.bottom - container.getBoundingClientRect().top;
-        maxBottom = Math.max(maxBottom, tagBottom);
-      });
-      
-      // Add padding (top and bottom padding of container)
-      const computedStyle = window.getComputedStyle(container);
-      const paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
-      const paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
-      
-      // Add extra buffer for potential wrapping issues and to ensure no clipping
-      const extraBuffer = 20;
-      
-      // Round up to nearest 5px for clean sizing and ensure minimum height
-      return Math.max(minHeight, Math.ceil((maxBottom + paddingBottom + extraBuffer) / 5) * 5);
+      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 parseInt(container.style.getPropertyValue('--comfy-widget-height')) || defaultHeight;
+    },
+    hideOnZoom: true,
+    selectOn: ['click', 'focus'],
+    afterResize: function(node) {
+      // Re-render tags after node resize
+      if (this.value && this.value.length > 0) {
+        renderTags(this.value, this);
+      }
+    }
   });
 
+  // Set initial value
   widget.value = initialTagsData;
 
+  // Set callback
   widget.callback = callback;
 
+  // Add serialization method to avoid ComfyUI serialization issues
   widget.serializeValue = () => {
-    // Add dummy items to avoid the 2-element serialization issue, a bug in comfyui
+    // Add dummy items to avoid the 2-element serialization issue
     return [...widgetValue, 
         { text: "__dummy_item__", active: false, _isDummy: true },
         { text: "__dummy_item__", active: false, _isDummy: true }
       ];
   };
 
-  return { minWidth: 300, minHeight: 150, widget };
-}
+  return { minWidth: 300, minHeight: defaultHeight, widget };
+} 

web/comfyui/trigger_word_toggle.js

@@ -1,8 +1,11 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js";
-import { addTagsWidget } from "./tags_widget.js";
+import { CONVERTED_TYPE, dynamicImportByVersion } from "./utils.js";
 
-const CONVERTED_TYPE = 'converted-widget'
+// Function to get the appropriate tags widget based on ComfyUI version
+async function getTagsWidgetModule() {
+    return await dynamicImportByVersion("./tags_widget.js", "./legacy_tags_widget.js");
+}
 
 // TriggerWordToggle extension for ComfyUI
 app.registerExtension({
@@ -26,7 +29,11 @@ app.registerExtension({
             });
 
             // Wait for node to be properly initialized
-            requestAnimationFrame(() => {        
+            requestAnimationFrame(async () => {
+                // Dynamically import the appropriate tags widget module
+                const tagsModule = await getTagsWidgetModule();
+                const { addTagsWidget } = tagsModule;
+                
                 // Get the widget object directly from the returned object
                 const result = addTagsWidget(node, "toggle_trigger_words", {
                     defaultVal: []

web/comfyui/utils.js

@@ -1,5 +1,32 @@
 export const CONVERTED_TYPE = 'converted-widget';
 
+export function getComfyUIFrontendVersion() {
+  return window['__COMFYUI_FRONTEND_VERSION__'] || "0.0.0";
+}
+
+// Dynamically import the appropriate widget based on app version
+export async function dynamicImportByVersion(latestModulePath, legacyModulePath) {
+  // Parse app version and compare with 1.12.6 (version when tags widget API changed)
+  const currentVersion = getComfyUIFrontendVersion();
+  const versionParts = currentVersion.split('.').map(part => parseInt(part, 10));
+  const requiredVersion = [1, 12, 6];
+  
+  // Compare version numbers
+  for (let i = 0; i < 3; i++) {
+    if (versionParts[i] > requiredVersion[i]) {
+      console.log(`Using latest widget: ${latestModulePath}`);
+      return import(latestModulePath);
+    } else if (versionParts[i] < requiredVersion[i]) {
+      console.log(`Using legacy widget: ${legacyModulePath}`);
+      return import(legacyModulePath);
+    }
+  }
+  
+  // If we get here, versions are equal, use the latest module
+  console.log(`Using latest widget: ${latestModulePath}`);
+  return import(latestModulePath);
+}
+
 export function hideWidgetForGood(node, widget, suffix = "") {
   widget.origType = widget.type;
   widget.origComputeSize = widget.computeSize;