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

@@ -20,6 +20,24 @@ Watch this quick tutorial to learn how to use the new one-click LoRA integration
 
 ## 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.  
@@ -42,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)
 
 ---
@@ -171,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/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

@@ -132,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'
@@ -146,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"""
@@ -667,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)
             
@@ -815,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)
@@ -962,7 +1005,7 @@ 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)

py/routes/lora_routes.py

@@ -89,7 +89,7 @@ class LoraRoutes:
                         settings=settings,  # Pass settings to template
                         request=request  # Pass the request object to the template
                     )
-                    logger.info(f"Loras page loaded successfully with {len(cache.raw_data)} items")
+                    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}")
                     # 如果获取缓存失败，也显示初始化页面

py/routes/recipe_routes.py

@@ -53,10 +53,16 @@ class RecipeRoutes:
         # 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"""
@@ -95,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:
@@ -110,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
@@ -145,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)
@@ -762,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
@@ -783,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", "")
@@ -880,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
             }
             
@@ -1019,3 +1025,159 @@ class RecipeRoutes:
         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

@@ -234,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
@@ -248,7 +246,6 @@ 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}")

py/services/download_manager.py

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

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

@@ -136,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:
@@ -147,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()
 
@@ -160,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

py/services/recipe_scanner.py

@@ -211,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']):
@@ -261,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
@@ -269,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}")
@@ -286,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}")
@@ -330,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:
@@ -340,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)
@@ -430,6 +450,74 @@ class RecipeScanner:
         }
         
         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

py/utils/exif_utils.py

@@ -1,51 +1,16 @@
 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__)
 
 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"""
-        try:
-            # First try to open as image to check format
-            with Image.open(image_path) as img:
-                if img.format not in ['JPEG', 'TIFF', 'WEBP']:
-                    # For non-JPEG/TIFF/WEBP images, try to get EXIF through PIL
-                    exif = img._getexif()
-                    if exif and piexif.ExifIFD.UserComment in exif:
-                        user_comment = exif[piexif.ExifIFD.UserComment]
-                        if isinstance(user_comment, bytes):
-                            if user_comment.startswith(b'UNICODE\0'):
-                                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)
-                
-                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:
-            return None
-
     @staticmethod
     def extract_image_metadata(image_path: str) -> Optional[str]:
         """Extract metadata from image including UserComment or parameters field
@@ -103,53 +68,6 @@ class ExifUtils:
             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"""
-        try:
-            # Load the image and its EXIF data
-            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')}}
-                    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)
-                
-            return image_path
-        except Exception as e:
-            logger.error(f"Error updating EXIF data in {image_path}: {e}")
-            return image_path
-
     @staticmethod
     def update_image_metadata(image_path: str, metadata: str) -> str:
         """Update metadata in image's EXIF data or parameters fields
@@ -394,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 extract_image_metadata as fallback
-                if not workflow_data:
-                    metadata = ExifUtils.extract_image_metadata(image_path)
-                    if metadata and '{' in metadata and '}' in metadata:
-                        # Try to extract JSON part
-                        json_start = metadata.find('{')
-                        json_end = metadata.rfind('}') + 1
-                        workflow_data = metadata[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/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/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.2"
+version = "0.8.5"
 license = {file = "LICENSE"}
 dependencies = [
     "aiohttp",

refs/jpeg_civitai_exif_userComment_example

@@ -2,13 +2,10 @@ 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)
 

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

@@ -863,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;
@@ -1280,4 +1280,47 @@
     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

@@ -400,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);
@@ -420,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 {
@@ -433,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 {
@@ -584,7 +614,7 @@
     font-size: 0.9em;
 }
 
-/* Deleted badge */
+/* Deleted badge with reconnect functionality */
 .deleted-badge {
     display: inline-flex;
     align-items: center;
@@ -603,6 +633,138 @@
     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);

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/RecipeModal.js

@@ -1,6 +1,7 @@
 // Recipe Modal Component
 import { showToast } from '../utils/uiHelpers.js';
 import { state } from '../state/index.js';
+import { setSessionItem, removeSessionItem } from '../utils/storageHelpers.js';
 
 class RecipeModal {
     constructor() {
@@ -31,6 +32,16 @@ class RecipeModal {
                 !event.target.closest('.edit-icon')) {
                 this.saveTagsEdit();
             }
+
+            // Handle reconnect input
+            const reconnectContainers = document.querySelectorAll('.lora-reconnect-container');
+            reconnectContainers.forEach(container => {
+                if (container.classList.contains('active') && 
+                    !container.contains(event.target) && 
+                    !event.target.closest('.deleted-badge.reconnectable')) {
+                    this.hideReconnectInput(container);
+                }
+            });
         });
     }
     
@@ -284,7 +295,7 @@ class RecipeModal {
         } else {
             // No generation parameters available
             if (promptElement) promptElement.textContent = 'No prompt information available';
-            if (negativePromptElement) negativePromptElement.textContent = 'No negative prompt information available';
+            if (negativePromptElement) promptElement.textContent = 'No negative prompt information available';
             if (otherParamsElement) otherParamsElement.innerHTML = '<div class="no-params">No parameters available</div>';
         }
         
@@ -332,8 +343,15 @@ class RecipeModal {
             
             lorasCountElement.innerHTML = `<i class="fas fa-layer-group"></i> ${totalCount} LoRAs ${statusHTML}`;
             
-            // Add click handler for missing LoRAs status
+            // Add event listeners for buttons and status indicators
             setTimeout(() => {
+                // Set up click handler for View LoRAs button
+                const viewRecipeLorasBtn = document.getElementById('viewRecipeLorasBtn');
+                if (viewRecipeLorasBtn) {
+                    viewRecipeLorasBtn.addEventListener('click', () => this.navigateToLorasPage());
+                }
+                
+                // Add click handler for missing LoRAs status
                 const missingStatus = document.querySelector('.recipe-status.missing');
                 if (missingStatus && missingLorasCount > 0) {
                     missingStatus.classList.add('clickable');
@@ -358,8 +376,9 @@ class RecipeModal {
                         </div>`;
                 } else if (isDeleted) {
                     localStatus = `
-                        <div class="deleted-badge">
-                            <i class="fas fa-trash-alt"></i> Deleted
+                        <div class="deleted-badge reconnectable" data-lora-index="${recipe.loras.indexOf(lora)}">
+                            <span class="badge-text"><i class="fas fa-trash-alt"></i> Deleted</span>
+                            <div class="reconnect-tooltip">Click to reconnect with a local LoRA</div>
                         </div>`;
                 } else {
                     localStatus = `
@@ -387,7 +406,7 @@ class RecipeModal {
                 }
 
                 return `
-                    <div class="${loraItemClass}">
+                    <div class="${loraItemClass}" data-lora-index="${recipe.loras.indexOf(lora)}">
                         <div class="recipe-lora-thumbnail">
                             ${previewMedia}
                         </div>
@@ -401,11 +420,30 @@ class RecipeModal {
                                 <div class="recipe-lora-weight">Weight: ${lora.strength || 1.0}</div>
                                 ${lora.baseModel ? `<div class="base-model">${lora.baseModel}</div>` : ''}
                             </div>
+                            <div class="lora-reconnect-container" data-lora-index="${recipe.loras.indexOf(lora)}">
+                                <div class="reconnect-instructions">
+                                    <p>Enter LoRA Syntax or Name to Reconnect:</p>
+                                    <small>Example: <code>&lt;lora:Boris_Vallejo_BV_flux_D:1&gt;</code> or just <code>Boris_Vallejo_BV_flux_D</code></small>
+                                </div>
+                                <div class="reconnect-form">
+                                    <input type="text" class="reconnect-input" placeholder="Enter LoRA name or syntax">
+                                    <div class="reconnect-actions">
+                                        <button class="reconnect-cancel-btn">Cancel</button>
+                                        <button class="reconnect-confirm-btn">Reconnect</button>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 `;
             }).join('');
             
+            // Add event listeners for reconnect functionality
+            setTimeout(() => {
+                this.setupReconnectButtons();
+                this.setupLoraItemsClickable();
+            }, 100);
+            
             // Generate recipe syntax for copy button (this is now a placeholder, actual syntax will be fetched from the API)
             this.recipeLorasSyntax = '';
             
@@ -829,6 +867,214 @@ class RecipeModal {
             state.loadingManager.hide();
         }
     }
+
+    // New methods for reconnecting LoRAs
+    setupReconnectButtons() {
+        // Add event listeners to all deleted badges
+        const deletedBadges = document.querySelectorAll('.deleted-badge.reconnectable');
+        deletedBadges.forEach(badge => {
+            badge.addEventListener('mouseenter', () => {
+                badge.querySelector('.badge-text').innerHTML = 'Reconnect';
+            });
+            
+            badge.addEventListener('mouseleave', () => {
+                badge.querySelector('.badge-text').innerHTML = '<i class="fas fa-trash-alt"></i> Deleted';
+            });
+            
+            badge.addEventListener('click', (e) => {
+                const loraIndex = badge.getAttribute('data-lora-index');
+                this.showReconnectInput(loraIndex);
+            });
+        });
+        
+        // Add event listeners to reconnect cancel buttons
+        const cancelButtons = document.querySelectorAll('.reconnect-cancel-btn');
+        cancelButtons.forEach(button => {
+            button.addEventListener('click', (e) => {
+                const container = button.closest('.lora-reconnect-container');
+                this.hideReconnectInput(container);
+            });
+        });
+        
+        // Add event listeners to reconnect confirm buttons
+        const confirmButtons = document.querySelectorAll('.reconnect-confirm-btn');
+        confirmButtons.forEach(button => {
+            button.addEventListener('click', (e) => {
+                const container = button.closest('.lora-reconnect-container');
+                const input = container.querySelector('.reconnect-input');
+                const loraIndex = container.getAttribute('data-lora-index');
+                this.reconnectLora(loraIndex, input.value);
+            });
+        });
+        
+        // Add keydown handlers to reconnect inputs
+        const reconnectInputs = document.querySelectorAll('.reconnect-input');
+        reconnectInputs.forEach(input => {
+            input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    const container = input.closest('.lora-reconnect-container');
+                    const loraIndex = container.getAttribute('data-lora-index');
+                    this.reconnectLora(loraIndex, input.value);
+                } else if (e.key === 'Escape') {
+                    const container = input.closest('.lora-reconnect-container');
+                    this.hideReconnectInput(container);
+                }
+            });
+        });
+    }
+    
+    showReconnectInput(loraIndex) {
+        // Hide any currently active reconnect containers
+        document.querySelectorAll('.lora-reconnect-container.active').forEach(active => {
+            active.classList.remove('active');
+        });
+        
+        // Show the reconnect container for this lora
+        const container = document.querySelector(`.lora-reconnect-container[data-lora-index="${loraIndex}"]`);
+        if (container) {
+            container.classList.add('active');
+            const input = container.querySelector('.reconnect-input');
+            input.focus();
+        }
+    }
+    
+    hideReconnectInput(container) {
+        if (container && container.classList.contains('active')) {
+            container.classList.remove('active');
+            const input = container.querySelector('.reconnect-input');
+            if (input) input.value = '';
+        }
+    }
+    
+    async reconnectLora(loraIndex, inputValue) {
+        if (!inputValue || !inputValue.trim()) {
+            showToast('Please enter a LoRA name or syntax', 'error');
+            return;
+        }
+        
+        try {
+            // Parse input value to extract file_name
+            let loraSyntaxMatch = inputValue.match(/<lora:([^:>]+)(?::[^>]+)?>/);
+            let fileName = loraSyntaxMatch ? loraSyntaxMatch[1] : inputValue.trim();
+            
+            // Remove any file extension if present
+            fileName = fileName.replace(/\.\w+$/, '');
+            
+            // Get the deleted lora data
+            const deletedLora = this.currentRecipe.loras[loraIndex];
+            if (!deletedLora) {
+                showToast('Error: Could not find the LoRA in the recipe', 'error');
+                return;
+            }
+            
+            state.loadingManager.showSimpleLoading('Reconnecting LoRA...');
+            
+            // Call API to reconnect the LoRA
+            const response = await fetch('/api/recipe/lora/reconnect', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    recipe_id: this.recipeId,
+                    lora_data: deletedLora,
+                    target_name: fileName
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                // Hide the reconnect input
+                const container = document.querySelector(`.lora-reconnect-container[data-lora-index="${loraIndex}"]`);
+                this.hideReconnectInput(container);
+                
+                // Update the current recipe with the updated lora data
+                this.currentRecipe.loras[loraIndex] = result.updated_lora;
+                
+                // Show success message
+                showToast('LoRA reconnected successfully', 'success');
+                
+                // Refresh modal to show updated content
+                setTimeout(() => {
+                    this.showRecipeDetails(this.currentRecipe);
+                }, 500);
+                
+                // Refresh recipes list
+                if (window.recipeManager && typeof window.recipeManager.loadRecipes === 'function') {
+                    setTimeout(() => {
+                        window.recipeManager.loadRecipes(true);
+                    }, 1000);
+                }
+            } else {
+                showToast(`Error: ${result.error}`, 'error');
+            }
+        } catch (error) {
+            console.error('Error reconnecting LoRA:', error);
+            showToast(`Error reconnecting LoRA: ${error.message}`, 'error');
+        } finally {
+            state.loadingManager.hide();
+        }
+    }
+
+    // New method to navigate to the LoRAs page
+    navigateToLorasPage(specificLoraIndex = null) {
+        // Close the current modal
+        modalManager.closeModal('recipeModal');
+        
+        // Clear any previous filters first
+        removeSessionItem('recipe_to_lora_filterLoraHash');
+        removeSessionItem('recipe_to_lora_filterLoraHashes');
+        removeSessionItem('filterRecipeName');
+        removeSessionItem('viewLoraDetail');
+        
+        if (specificLoraIndex !== null) {
+            // If a specific LoRA index is provided, navigate to view just that one LoRA
+            const lora = this.currentRecipe.loras[specificLoraIndex];
+            if (lora && lora.hash) {
+                // Set session storage to open the LoRA modal directly
+                setSessionItem('recipe_to_lora_filterLoraHash', lora.hash.toLowerCase());
+                setSessionItem('viewLoraDetail', 'true');
+                setSessionItem('filterRecipeName', this.currentRecipe.title);
+            }
+        } else {
+            // If no specific LoRA index is provided, show all LoRAs from this recipe
+            // Collect all hashes from the recipe's LoRAs
+            const loraHashes = this.currentRecipe.loras
+                .filter(lora => lora.hash)
+                .map(lora => lora.hash.toLowerCase());
+                
+            if (loraHashes.length > 0) {
+                // Store the LoRA hashes and recipe name in sessionStorage
+                setSessionItem('recipe_to_lora_filterLoraHashes', JSON.stringify(loraHashes));
+                setSessionItem('filterRecipeName', this.currentRecipe.title);
+            }
+        }
+        
+        // Navigate to the LoRAs page
+        window.location.href = '/loras';
+    }
+
+    // New method to make LoRA items clickable
+    setupLoraItemsClickable() {
+        const loraItems = document.querySelectorAll('.recipe-lora-item');
+        loraItems.forEach(item => {
+            // Get the lora index from the data attribute
+            const loraIndex = parseInt(item.dataset.loraIndex);
+            
+            item.addEventListener('click', (e) => {
+                // If the click is on the reconnect container or badge, don't navigate
+                if (e.target.closest('.lora-reconnect-container') || 
+                    e.target.closest('.deleted-badge') ||
+                    e.target.closest('.reconnect-tooltip')) {
+                    return;
+                }
+                
+                // Navigate to the LoRAs page with the specific LoRA index
+                this.navigateToLorasPage(loraIndex);
+            });
+        });
+    }
 }
 
-export { RecipeModal }; 
+export { RecipeModal };

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() {
@@ -779,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

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

@@ -5,6 +5,7 @@ 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() {
@@ -20,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() {
@@ -29,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();
         
@@ -58,6 +70,100 @@ class RecipeManager {
         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() {
         // Sort select
         const sortSelect = document.getElementById('sortSelect');
@@ -83,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,
@@ -90,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
@@ -139,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/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

@@ -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/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;
@@ -44,7 +49,7 @@ app.registerExtension({
             });
 
             // 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) {
@@ -67,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;