Bump version to v0.8.2

- Introduced new API endpoints for fetching Civitai model details by model version ID or hash.
- Enhanced the download manager to support downloading LoRAs using model version ID or hash, improving flexibility.
- Updated RecipeModal to handle missing LoRAs, allowing users to download them directly from the recipe interface.
- Added tooltip and click functionality for missing LoRAs status, enhancing user experience.
- Improved error handling for missing LoRAs download process, providing clearer feedback to users.

README.md

@@ -20,6 +20,13 @@ Watch this quick tutorial to learn how to use the new one-click LoRA integration
 
 ## Release Notes
 
+### v0.8.2  
+* **Faster Initialization for Forge Users** - Improved first-run efficiency by utilizing existing `.json` and `.civitai.info` files from Forge’s CivitAI helper extension, making migration smoother.  
+* **LoRA Filename Editing** - Added support for renaming LoRA files directly within LoRA Manager.  
+* **Recipe Editing** - Users can now edit recipe names and tags.  
+* **Retain Deleted LoRAs in Recipes** - Deleted LoRAs will remain listed in recipes, allowing future functionality to reconnect them once re-obtained.  
+* **Download Missing LoRAs from Recipes** - Easily fetch missing LoRAs associated with a recipe.
+
 ### v0.8.1
 * **Base Model Correction** - Added support for modifying base model associations to fix incorrect metadata for non-CivitAI LoRAs
 * **LoRA Loader Flexibility** - Made CLIP input optional for model-only workflows like Hunyuan video generation

py/routes/api_routes.py

@@ -42,6 +42,8 @@ class ApiRoutes:
         app.router.add_get('/api/lora-roots', routes.get_lora_roots)
         app.router.add_get('/api/folders', routes.get_folders)
         app.router.add_get('/api/civitai/versions/{model_id}', routes.get_civitai_versions)
+        app.router.add_get('/api/civitai/model/{modelVersionId}', routes.get_civitai_model)
+        app.router.add_get('/api/civitai/model/{hash}', routes.get_civitai_model)
         app.router.add_post('/api/download-lora', routes.download_lora)
         app.router.add_post('/api/settings', routes.update_settings)
         app.router.add_post('/api/move_model', routes.move_model)
@@ -52,6 +54,7 @@ class ApiRoutes:
         app.router.add_get('/api/loras/top-tags', routes.get_top_tags)  # Add new route for top tags
         app.router.add_get('/api/loras/base-models', routes.get_base_models)  # Add new route for base models
         app.router.add_get('/api/lora-civitai-url', routes.get_lora_civitai_url)  # Add new route for Civitai URL
+        app.router.add_post('/api/rename_lora', routes.rename_lora)  # Add new route for renaming LoRA files
 
         # Add update check routes
         UpdateRoutes.setup_routes(app)
@@ -565,6 +568,23 @@ class ApiRoutes:
         except Exception as e:
             logger.error(f"Error fetching model versions: {e}")
             return web.Response(status=500, text=str(e))
+        
+    async def get_civitai_model(self, request: web.Request) -> web.Response:
+        """Get CivitAI model details by model version ID or hash"""
+        try:
+            model_version_id = request.match_info['modelVersionId']
+            if not model_version_id:
+                hash = request.match_info['hash']
+                model = await self.civitai_client.get_model_by_hash(hash)
+                return web.json_response(model)
+            
+            # Get model details from Civitai API    
+            model = await self.civitai_client.get_model_version_info(model_version_id)
+            return web.json_response(model)
+        except Exception as e:
+            logger.error(f"Error fetching model details: {e}")
+            return web.Response(status=500, text=str(e))
+    
 
     async def download_lora(self, request: web.Request) -> web.Response:
         async with self._download_lock:
@@ -578,8 +598,22 @@ class ApiRoutes:
                         'progress': progress
                     })
                 
+                # Check which identifier is provided
+                download_url = data.get('download_url')
+                model_hash = data.get('model_hash')
+                model_version_id = data.get('model_version_id')
+                
+                # Validate that at least one identifier is provided
+                if not any([download_url, model_hash, model_version_id]):
+                    return web.Response(
+                        status=400, 
+                        text="Missing required parameter: Please provide either 'download_url', 'hash', or 'modelVersionId'"
+                    )
+                
                 result = await self.download_manager.download_from_civitai(
-                    download_url=data.get('download_url'),
+                    download_url=download_url,
+                    model_hash=model_hash,
+                    model_version_id=model_version_id,
                     save_dir=data.get('lora_root'),
                     relative_path=data.get('relative_path'),
                     progress_callback=progress_callback
@@ -929,6 +963,149 @@ class ApiRoutes:
             })
         except Exception as e:
             logger.error(f"Error retrieving base models: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            }, status=500)
+
+    def get_multipart_ext(self, filename):
+        parts = filename.split(".")
+        if len(parts) > 2:  # 如果包含多级扩展名
+            return "." + ".".join(parts[-2:])  # 取最后两部分，如 ".metadata.json"
+        return os.path.splitext(filename)[1]  # 否则取普通扩展名，如 ".safetensors"
+
+    async def rename_lora(self, request: web.Request) -> web.Response:
+        """Handle renaming a LoRA file and its associated files"""
+        try:
+            data = await request.json()
+            file_path = data.get('file_path')
+            new_file_name = data.get('new_file_name')
+            
+            if not file_path or not new_file_name:
+                return web.json_response({
+                    'success': False,
+                    'error': 'File path and new file name are required'
+                }, status=400)
+            
+            # Validate the new file name (no path separators or invalid characters)
+            invalid_chars = ['/', '\\', ':', '*', '?', '"', '<', '>', '|']
+            if any(char in new_file_name for char in invalid_chars):
+                return web.json_response({
+                    'success': False,
+                    'error': 'Invalid characters in file name'
+                }, status=400)
+            
+            # Get the directory and current file name
+            target_dir = os.path.dirname(file_path)
+            old_file_name = os.path.splitext(os.path.basename(file_path))[0]
+            
+            # Check if the target file already exists
+            new_file_path = os.path.join(target_dir, f"{new_file_name}.safetensors").replace(os.sep, '/')
+            if os.path.exists(new_file_path):
+                return web.json_response({
+                    'success': False,
+                    'error': 'A file with this name already exists'
+                }, status=400)
+            
+            # Define the patterns for associated files
+            patterns = [
+                f"{old_file_name}.safetensors",  # Required
+                f"{old_file_name}.metadata.json",
+                f"{old_file_name}.preview.png",
+                f"{old_file_name}.preview.jpg",
+                f"{old_file_name}.preview.jpeg",
+                f"{old_file_name}.preview.webp",
+                f"{old_file_name}.preview.mp4",
+                f"{old_file_name}.png",
+                f"{old_file_name}.jpg",
+                f"{old_file_name}.jpeg",
+                f"{old_file_name}.webp",
+                f"{old_file_name}.mp4"
+            ]
+            
+            # Find all matching files
+            existing_files = []
+            for pattern in patterns:
+                path = os.path.join(target_dir, pattern)
+                if os.path.exists(path):
+                    existing_files.append((path, pattern))
+            
+            # Get the hash from the main file to update hash index
+            hash_value = None
+            metadata = None
+            metadata_path = os.path.join(target_dir, f"{old_file_name}.metadata.json")
+            
+            if os.path.exists(metadata_path):
+                try:
+                    with open(metadata_path, 'r', encoding='utf-8') as f:
+                        metadata = json.load(f)
+                        hash_value = metadata.get('sha256')
+                except Exception as e:
+                    logger.error(f"Error loading metadata for rename: {e}")
+            
+            # Rename all files
+            renamed_files = []
+            new_metadata_path = None
+            
+            # Notify file monitor to ignore these events
+            main_file_path = os.path.join(target_dir, f"{old_file_name}.safetensors")
+            if os.path.exists(main_file_path) and self.download_manager.file_monitor:
+                # Add old and new paths to ignore list
+                file_size = os.path.getsize(main_file_path)
+                self.download_manager.file_monitor.handler.add_ignore_path(main_file_path, file_size)
+                self.download_manager.file_monitor.handler.add_ignore_path(new_file_path, file_size)
+            
+            for old_path, pattern in existing_files:
+                # Get the file extension like .safetensors or .metadata.json
+                ext = self.get_multipart_ext(pattern)
+
+                # Create the new path
+                new_path = os.path.join(target_dir, f"{new_file_name}{ext}").replace(os.sep, '/')
+                
+                # Rename the file
+                os.rename(old_path, new_path)
+                renamed_files.append(new_path)
+                
+                # Keep track of metadata path for later update
+                if ext == '.metadata.json':
+                    new_metadata_path = new_path
+            
+            # Update the metadata file with new file name and paths
+            if new_metadata_path and metadata:
+                # Update file_name, file_path and preview_url in metadata
+                metadata['file_name'] = new_file_name
+                metadata['file_path'] = new_file_path
+                
+                # Update preview_url if it exists
+                if 'preview_url' in metadata and metadata['preview_url']:
+                    old_preview = metadata['preview_url']
+                    ext = self.get_multipart_ext(old_preview)
+                    new_preview = os.path.join(target_dir, f"{new_file_name}{ext}").replace(os.sep, '/')
+                    metadata['preview_url'] = new_preview
+                
+                # Save updated metadata
+                with open(new_metadata_path, 'w', encoding='utf-8') as f:
+                    json.dump(metadata, f, indent=2, ensure_ascii=False)
+            
+            # Update the scanner cache
+            if metadata:
+                await self.scanner.update_single_lora_cache(file_path, new_file_path, metadata)
+                
+                # Update recipe files and cache if hash is available
+                if hash_value:
+                    recipe_scanner = RecipeScanner(self.scanner)
+                    recipes_updated, cache_updated = await recipe_scanner.update_lora_filename_by_hash(hash_value, new_file_name)
+                    logger.info(f"Updated {recipes_updated} recipe files and {cache_updated} cache entries for renamed LoRA")
+            
+            return web.json_response({
+                'success': True,
+                'new_file_path': new_file_path,
+                'renamed_files': renamed_files,
+                'reload_required': False
+            })
+            
+        except Exception as e:
+            logger.error(f"Error renaming LoRA: {e}", exc_info=True)
             return web.json_response({
                 'success': False,
                 'error': str(e)

py/routes/lora_routes.py

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

py/routes/recipe_routes.py

@@ -47,6 +47,12 @@ class RecipeRoutes:
         app.router.add_get('/api/recipe/{recipe_id}/share', routes.share_recipe)
         app.router.add_get('/api/recipe/{recipe_id}/share/download', routes.download_shared_recipe)
         
+        # Add new endpoint for getting recipe syntax
+        app.router.add_get('/api/recipe/{recipe_id}/syntax', routes.get_recipe_syntax)
+        
+        # Add new endpoint for updating recipe metadata (name and tags)
+        app.router.add_put('/api/recipe/{recipe_id}/update', routes.update_recipe)
+        
         # Start cache initialization
         app.on_startup.append(routes._init_cache)
         
@@ -432,19 +438,20 @@ class RecipeRoutes:
             # Format loras data according to the recipe.json format
             loras_data = []
             for lora in metadata.get("loras", []):
-                # Skip deleted LoRAs if they're marked to be excluded
-                if lora.get("isDeleted", False) and lora.get("exclude", False):
-                    continue
+                # Modified: Always include deleted LoRAs in the recipe metadata
+                # Even if they're marked to be excluded, we still keep their identifying information
+                # The exclude flag will only be used to determine if they should be included in recipe syntax
                 
                 # Convert frontend lora format to recipe format
                 lora_entry = {
-                    "file_name": lora.get("file_name", "") or os.path.splitext(os.path.basename(lora.get("localPath", "")))[0],
+                    "file_name": lora.get("file_name", "") or os.path.splitext(os.path.basename(lora.get("localPath", "")))[0] if lora.get("localPath") else "",
                     "hash": lora.get("hash", "").lower() if lora.get("hash") else "",
                     "strength": float(lora.get("weight", 1.0)),
                     "modelVersionId": lora.get("id", ""),
                     "modelName": lora.get("name", ""),
                     "modelVersionName": lora.get("version", ""),
-                    "isDeleted": lora.get("isDeleted", False)  # Preserve deletion status in saved recipe
+                    "isDeleted": lora.get("isDeleted", False),  # Preserve deletion status in saved recipe
+                    "exclude": lora.get("exclude", False)  # Add exclude flag to the recipe
                 }
                 loras_data.append(lora_entry)
             
@@ -905,3 +912,110 @@ class RecipeRoutes:
         except Exception as e:
             logger.error(f"Error saving recipe from widget: {e}", exc_info=True)
             return web.json_response({"error": str(e)}, status=500)
+
+    async def get_recipe_syntax(self, request: web.Request) -> web.Response:
+        """Generate recipe syntax for LoRAs in the recipe, looking up proper file names using hash_index"""
+        try:
+            recipe_id = request.match_info['recipe_id']
+            
+            # Get all recipes from cache
+            cache = await self.recipe_scanner.get_cached_data()
+            
+            # Find the specific recipe
+            recipe = next((r for r in cache.raw_data if str(r.get('id', '')) == recipe_id), None)
+            
+            if not recipe:
+                return web.json_response({"error": "Recipe not found"}, status=404)
+            
+            # Get the loras from the recipe
+            loras = recipe.get('loras', [])
+            
+            if not loras:
+                return web.json_response({"error": "No LoRAs found in this recipe"}, status=400)
+            
+            # Generate recipe syntax for all LoRAs that:
+            # 1. Are in the library (not deleted) OR
+            # 2. Are deleted but not marked for exclusion
+            lora_syntax_parts = []
+            
+            # Access the hash_index from lora_scanner
+            hash_index = self.recipe_scanner._lora_scanner._hash_index
+            
+            for lora in loras:
+                # Skip loras that are deleted AND marked for exclusion
+                if lora.get("isDeleted", False):
+                    continue
+
+                if not self.recipe_scanner._lora_scanner.has_lora_hash(lora.get("hash", "")):
+                    continue
+                
+                # Get the strength
+                strength = lora.get("strength", 1.0)
+                
+                # Try to find the actual file name for this lora
+                file_name = None
+                hash_value = lora.get("hash", "").lower()
+                
+                if hash_value and hasattr(hash_index, "_hash_to_path"):
+                    # Look up the file path from the hash
+                    file_path = hash_index._hash_to_path.get(hash_value)
+                    
+                    if file_path:
+                        # Extract the file name without extension from the path
+                        file_name = os.path.splitext(os.path.basename(file_path))[0]
+                
+                # If hash lookup failed, fall back to modelVersionId lookup
+                if not file_name and lora.get("modelVersionId"):
+                    # Search for files with matching modelVersionId
+                    all_loras = await self.recipe_scanner._lora_scanner.get_cached_data()
+                    for cached_lora in all_loras.raw_data:
+                        if not cached_lora.get("civitai"):
+                            continue
+                        if cached_lora.get("civitai", {}).get("id") == lora.get("modelVersionId"):
+                            file_name = os.path.splitext(os.path.basename(cached_lora["path"]))[0]
+                            break
+                
+                # If all lookups failed, use the file_name from the recipe
+                if not file_name:
+                    file_name = lora.get("file_name", "unknown-lora")
+                
+                # Add to syntax parts
+                lora_syntax_parts.append(f"<lora:{file_name}:{strength}>")
+            
+            # Join the LoRA syntax parts
+            lora_syntax = " ".join(lora_syntax_parts)
+            
+            return web.json_response({
+                'success': True,
+                'syntax': lora_syntax
+            })
+        except Exception as e:
+            logger.error(f"Error generating recipe syntax: {e}", exc_info=True)
+            return web.json_response({"error": str(e)}, status=500)
+
+    async def update_recipe(self, request: web.Request) -> web.Response:
+        """Update recipe metadata (name and tags)"""
+        try:
+            recipe_id = request.match_info['recipe_id']
+            data = await request.json()
+            
+            # Validate required fields
+            if 'title' not in data and 'tags' not in data:
+                return web.json_response({
+                    "error": "At least one field to update must be provided (title or tags)"
+                }, status=400)
+            
+            # Use the recipe scanner's update method
+            success = await self.recipe_scanner.update_recipe_metadata(recipe_id, data)
+            
+            if not success:
+                return web.json_response({"error": "Recipe not found or update failed"}, status=404)
+            
+            return web.json_response({
+                "success": True,
+                "recipe_id": recipe_id,
+                "updates": data
+            })
+        except Exception as e:
+            logger.error(f"Error updating recipe: {e}", exc_info=True)
+            return web.json_response({"error": str(e)}, status=500)

py/services/civitai_client.py

@@ -80,12 +80,7 @@ class CivitaiClient:
                     if response.status == 401:
                         logger.warning(f"Unauthorized access to resource: {url} (Status 401)")
                         
-                        # Check if this is an API key issue (has Set-Cookie headers)
-                        if 'Set-Cookie' in response.headers:
-                            return False, "Invalid or missing CivitAI API key. Please check your API key in settings."
-                        
-                        # Otherwise it's an early access restriction
-                        return False, "Early access restriction: You must purchase early access to download this LoRA."
+                        return False, "Invalid or missing CivitAI API key, or early access restriction."
                     
                     # Handle other client errors that might be permission-related
                     if response.status == 403:

py/services/download_manager.py

@@ -13,8 +13,9 @@ class DownloadManager:
         self.civitai_client = CivitaiClient()
         self.file_monitor = file_monitor
 
-    async def download_from_civitai(self, download_url: str, save_dir: str, relative_path: str = '', 
-                                  progress_callback=None) -> Dict:
+    async def download_from_civitai(self, download_url: str = None, model_hash: str = None, 
+                                  model_version_id: str = None, save_dir: str = None, 
+                                  relative_path: str = '', progress_callback=None) -> Dict:
         try:
             # Update save directory with relative path if provided
             if relative_path:
@@ -22,9 +23,21 @@ class DownloadManager:
                 # Create directory if it doesn't exist
                 os.makedirs(save_dir, exist_ok=True)
 
-            # Get version info
-            version_id = download_url.split('/')[-1]
-            version_info = await self.civitai_client.get_model_version_info(version_id)
+            # Get version info based on the provided identifier
+            version_info = None
+            
+            if download_url:
+                # Extract version ID from download URL
+                version_id = download_url.split('/')[-1]
+                version_info = await self.civitai_client.get_model_version_info(version_id)
+            elif model_version_id:
+                # Use model version ID directly
+                version_info = await self.civitai_client.get_model_version_info(model_version_id)
+            elif model_hash:
+                # Get model by hash
+                version_info = await self.civitai_client.get_model_by_hash(model_hash)
+
+            
             if not version_info:
                 return {'success': False, 'error': 'Failed to fetch model metadata'}
 
@@ -89,7 +102,7 @@ class DownloadManager:
             
             # 6. 开始下载流程
             result = await self._execute_download(
-                download_url=download_url,
+                download_url=file_info.get('downloadUrl', ''),
                 save_dir=save_dir,
                 metadata=metadata,
                 version_info=version_info,

py/services/lora_scanner.py

@@ -3,11 +3,13 @@ import os
 import logging
 import asyncio
 import shutil
+import time
 from typing import List, Dict, Optional
-from dataclasses import dataclass
-from operator import itemgetter
+
+from ..utils.models import LoraMetadata
 from ..config import config
-from ..utils.file_utils import load_metadata, get_file_info
+from ..utils.file_utils import load_metadata, get_file_info, normalize_path, find_preview_file, save_metadata
+from ..utils.lora_metadata import extract_lora_metadata
 from .lora_cache import LoraCache
 from .lora_hash_index import LoraHashIndex
 from .settings_manager import settings
@@ -91,6 +93,7 @@ class LoraScanner:
     async def _initialize_cache(self) -> None:
         """Initialize or refresh the cache"""
         try:
+            start_time = time.time()
             # Clear existing hash index
             self._hash_index.clear()
             
@@ -122,7 +125,7 @@ class LoraScanner:
             await self._cache.resort()
 
             self._initialization_task = None
-            logger.info("LoRA Manager: Cache initialization completed")
+            logger.info(f"LoRA Manager: Cache initialization completed in {time.time() - start_time:.2f} seconds, found {len(raw_data)} loras")
         except Exception as e:
             logger.error(f"LoRA Manager: Error initializing cache: {e}")
             self._cache = LoraCache(
@@ -330,8 +333,30 @@ class LoraScanner:
         metadata = await load_metadata(file_path)
         
         if metadata is None:
-            # Create new metadata if none exists
-            metadata = await get_file_info(file_path)
+            # Try to find and use .civitai.info file first
+            civitai_info_path = f"{os.path.splitext(file_path)[0]}.civitai.info"
+            if os.path.exists(civitai_info_path):
+                try:
+                    with open(civitai_info_path, 'r', encoding='utf-8') as f:
+                        version_info = json.load(f)
+                    
+                    file_info = next((f for f in version_info.get('files', []) if f.get('primary')), None)
+                    if file_info:
+                        # Create a minimal file_info with the required fields
+                        file_name = os.path.splitext(os.path.basename(file_path))[0]
+                        file_info['name'] = file_name
+                    
+                        # Use from_civitai_info to create metadata
+                        metadata = LoraMetadata.from_civitai_info(version_info, file_info, file_path)
+                        metadata.preview_url = find_preview_file(file_name, os.path.dirname(file_path))
+                        await save_metadata(file_path, metadata)
+                        logger.debug(f"Created metadata from .civitai.info for {file_path}")
+                except Exception as e:
+                    logger.error(f"Error creating metadata from .civitai.info for {file_path}: {e}")
+            
+            # If still no metadata, create new metadata using get_file_info
+            if metadata is None:
+                metadata = await get_file_info(file_path)
         
         # Convert to dict and add folder info
         lora_data = metadata.to_dict()
@@ -342,7 +367,7 @@ class LoraScanner:
         lora_data['folder'] = folder.replace(os.path.sep, '/')
         
         return lora_data
-
+            
     async def _fetch_missing_metadata(self, file_path: str, lora_data: Dict) -> None:
         """Fetch missing description and tags from Civitai if needed
         

py/services/recipe_cache.py

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

py/services/recipe_scanner.py

@@ -2,7 +2,7 @@ import os
 import logging
 import asyncio
 import json
-from typing import List, Dict, Optional, Any
+from typing import List, Dict, Optional, Any, Tuple
 from ..config import config
 from .recipe_cache import RecipeCache
 from .lora_scanner import LoraScanner
@@ -430,3 +430,135 @@ class RecipeScanner:
         }
         
         return result
+
+    async def update_recipe_metadata(self, recipe_id: str, metadata: dict) -> bool:
+        """Update recipe metadata (like title and tags) in both file system and cache
+        
+        Args:
+            recipe_id: The ID of the recipe to update
+            metadata: Dictionary containing metadata fields to update (title, tags, etc.)
+            
+        Returns:
+            bool: True if successful, False otherwise
+        """
+        import os
+        import json
+        
+        # First, find the recipe JSON file path
+        recipe_json_path = os.path.join(self.recipes_dir, f"{recipe_id}.recipe.json")
+        
+        if not os.path.exists(recipe_json_path):
+            return False
+            
+        try:
+            # Load existing recipe data
+            with open(recipe_json_path, 'r', encoding='utf-8') as f:
+                recipe_data = json.load(f)
+                
+            # Update fields
+            for key, value in metadata.items():
+                recipe_data[key] = value
+                
+            # Save updated recipe
+            with open(recipe_json_path, 'w', encoding='utf-8') as f:
+                json.dump(recipe_data, f, indent=4, ensure_ascii=False)
+                
+            # Update the cache if it exists
+            if self._cache is not None:
+                await self._cache.update_recipe_metadata(recipe_id, metadata)
+                
+            # If the recipe has an image, update its EXIF metadata
+            from ..utils.exif_utils import ExifUtils
+            image_path = recipe_data.get('file_path')
+            if image_path and os.path.exists(image_path):
+                ExifUtils.append_recipe_metadata(image_path, recipe_data)
+                
+            return True
+        except Exception as e:
+            import logging
+            logging.getLogger(__name__).error(f"Error updating recipe metadata: {e}", exc_info=True)
+            return False
+
+    async def update_lora_filename_by_hash(self, hash_value: str, new_file_name: str) -> Tuple[int, int]:
+        """Update file_name in all recipes that contain a LoRA with the specified hash.
+        
+        Args:
+            hash_value: The SHA256 hash value of the LoRA
+            new_file_name: The new file_name to set
+            
+        Returns:
+            Tuple[int, int]: (number of recipes updated in files, number of recipes updated in cache)
+        """
+        if not hash_value or not new_file_name:
+            return 0, 0
+            
+        # Always use lowercase hash for consistency
+        hash_value = hash_value.lower()
+        
+        # Get recipes directory
+        recipes_dir = self.recipes_dir
+        if not recipes_dir or not os.path.exists(recipes_dir):
+            logger.warning(f"Recipes directory not found: {recipes_dir}")
+            return 0, 0
+            
+        # Check if cache is initialized
+        cache_initialized = self._cache is not None
+        cache_updated_count = 0
+        file_updated_count = 0
+        
+        # Get all recipe JSON files in the recipes directory
+        recipe_files = []
+        for root, _, files in os.walk(recipes_dir):
+            for file in files:
+                if file.lower().endswith('.recipe.json'):
+                    recipe_files.append(os.path.join(root, file))
+        
+        # Process each recipe file
+        for recipe_path in recipe_files:
+            try:
+                # Load the recipe data
+                with open(recipe_path, 'r', encoding='utf-8') as f:
+                    recipe_data = json.load(f)
+                
+                # Skip if no loras or invalid structure
+                if not recipe_data or not isinstance(recipe_data, dict) or 'loras' not in recipe_data:
+                    continue
+                
+                # Check if any lora has matching hash
+                file_updated = False
+                for lora in recipe_data.get('loras', []):
+                    if 'hash' in lora and lora['hash'].lower() == hash_value:
+                        # Update file_name
+                        old_file_name = lora.get('file_name', '')
+                        lora['file_name'] = new_file_name
+                        file_updated = True
+                        logger.info(f"Updated file_name in recipe {recipe_path}: {old_file_name} -> {new_file_name}")
+                
+                # If updated, save the file
+                if file_updated:
+                    with open(recipe_path, 'w', encoding='utf-8') as f:
+                        json.dump(recipe_data, f, indent=4, ensure_ascii=False)
+                    file_updated_count += 1
+                    
+                    # Also update in cache if it exists
+                    if cache_initialized:
+                        recipe_id = recipe_data.get('id')
+                        if recipe_id:
+                            for cache_item in self._cache.raw_data:
+                                if cache_item.get('id') == recipe_id:
+                                    # Replace loras array with updated version
+                                    cache_item['loras'] = recipe_data['loras']
+                                    cache_updated_count += 1
+                                    break
+            
+            except Exception as e:
+                logger.error(f"Error updating recipe file {recipe_path}: {e}")
+                import traceback
+                traceback.print_exc(file=sys.stderr)
+        
+        # Resort cache if updates were made
+        if cache_initialized and cache_updated_count > 0:
+            await self._cache.resort()
+            logger.info(f"Resorted recipe cache after updating {cache_updated_count} items")
+            
+        return file_updated_count, cache_updated_count

py/utils/file_utils.py

@@ -19,7 +19,7 @@ async def calculate_sha256(file_path: str) -> str:
             sha256_hash.update(byte_block)
     return sha256_hash.hexdigest()
 
-def _find_preview_file(base_name: str, dir_path: str) -> str:
+def find_preview_file(base_name: str, dir_path: str) -> str:
     """Find preview file for given base name in directory"""
     preview_patterns = [
         f"{base_name}.preview.png",
@@ -56,16 +56,33 @@ async def get_file_info(file_path: str) -> Optional[LoraMetadata]:
     base_name = os.path.splitext(os.path.basename(file_path))[0]
     dir_path = os.path.dirname(file_path)
     
-    preview_url = _find_preview_file(base_name, dir_path)
+    preview_url = find_preview_file(base_name, dir_path)
+    
+    # Check if a .json file exists with SHA256 hash to avoid recalculation
+    json_path = f"{os.path.splitext(file_path)[0]}.json"
+    sha256 = None
+    if os.path.exists(json_path):
+        try:
+            with open(json_path, 'r', encoding='utf-8') as f:
+                json_data = json.load(f)
+                if 'sha256' in json_data:
+                    sha256 = json_data['sha256'].lower()
+                    logger.debug(f"Using SHA256 from .json file for {file_path}")
+        except Exception as e:
+            logger.error(f"Error reading .json file for {file_path}: {e}")
 
     try:
+        # If we didn't get SHA256 from the .json file, calculate it
+        if not sha256:
+            sha256 = await calculate_sha256(real_path)
+            
         metadata = LoraMetadata(
             file_name=base_name,
             model_name=base_name,
             file_path=normalize_path(file_path),
             size=os.path.getsize(real_path),
             modified=os.path.getmtime(real_path),
-            sha256=await calculate_sha256(real_path),
+            sha256=sha256,
             base_model="Unknown",  # Will be updated later
             usage_tips="",
             notes="",
@@ -125,7 +142,7 @@ async def load_metadata(file_path: str) -> Optional[LoraMetadata]:
                 if not preview_url or not os.path.exists(preview_url):
                     base_name = os.path.splitext(os.path.basename(file_path))[0]
                     dir_path = os.path.dirname(file_path)
-                    new_preview_url = normalize_path(_find_preview_file(base_name, dir_path))
+                    new_preview_url = normalize_path(find_preview_file(base_name, dir_path))
                     if new_preview_url != preview_url:
                         data['preview_url'] = new_preview_url
                         needs_update = True

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

static/css/components/lora-modal.css

@@ -543,25 +543,53 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    cursor: pointer;
     padding: 4px;
     border-radius: var(--border-radius-xs);
     transition: background-color 0.2s;
+    position: relative;
 }
 
 .file-name-wrapper:hover {
     background: oklch(var(--lora-accent) / 0.1);
 }
 
-.file-name-wrapper i {
-    color: var(--text-color);
-    opacity: 0.5;
-    transition: opacity 0.2s;
+.file-name-content {
+    padding: 2px 4px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid transparent;
+    flex: 1;
 }
 
-.file-name-wrapper:hover i {
-    opacity: 1;
-    color: var(--lora-accent);
+.file-name-wrapper.editing .file-name-content {
+    border: 1px solid var(--lora-accent);
+    background: var(--bg-color);
+    outline: none;
+}
+
+.edit-file-name-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    opacity: 0;
+    cursor: pointer;
+    padding: 2px 5px;
+    border-radius: var(--border-radius-xs);
+    transition: all 0.2s ease;
+    margin-left: var(--space-1);
+}
+
+.edit-file-name-btn.visible,
+.file-name-wrapper:hover .edit-file-name-btn {
+    opacity: 0.5;
+}
+
+.edit-file-name-btn:hover {
+    opacity: 0.8 !important;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .edit-file-name-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
 }
 
 /* Base Model and Size combined styles */

static/css/components/recipe-modal.css

@@ -18,6 +18,110 @@
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
+    width: calc(100% - 20px);
+}
+
+/* Editable content styles */
+.editable-content {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.editable-content.hide {
+    display: none;
+}
+
+.editable-content .content-text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.edit-icon {
+    background: none;
+    border: none;
+    color: var(--text-color);
+    opacity: 0;
+    cursor: pointer;
+    padding: 4px 8px;
+    margin-left: 8px;
+    border-radius: var(--border-radius-xs);
+    transition: all 0.2s;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.editable-content:hover .edit-icon {
+    opacity: 0.6;
+}
+
+.edit-icon:hover {
+    opacity: 1 !important;
+    background: var(--lora-surface);
+}
+
+/* Content editor styles */
+.content-editor {
+    display: none;
+    width: 100%;
+    padding: 4px 0;
+}
+
+.content-editor.active {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.content-editor input {
+    flex: 1;
+    background: var(--bg-color);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-xs);
+    padding: 6px 8px;
+    font-size: 1em;
+    color: var(--text-color);
+    min-width: 0;
+}
+
+.content-editor.tags-editor input {
+    font-size: 0.9em;
+}
+
+/* 删除不再需要的按钮样式 */
+.editor-actions {
+    display: none;
+}
+
+/* Special styling for tags content */
+.tags-content {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 8px;
+}
+
+.tags-display {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 6px;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.no-tags {
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.6;
+    font-style: italic;
 }
 
 /* Recipe Tags styles */
@@ -340,6 +444,12 @@
     border-left: 4px solid var(--lora-error);
 }
 
+.recipe-lora-item.is-deleted {
+    background: rgba(127, 127, 127, 0.05);
+    border-left: 4px solid #777;
+    opacity: 0.8;
+}
+
 .recipe-lora-thumbnail {
     width: 46px;
     height: 46px;
@@ -474,6 +584,38 @@
     font-size: 0.9em;
 }
 
+/* Deleted badge */
+.deleted-badge {
+    display: inline-flex;
+    align-items: center;
+    background: #777;
+    color: white;
+    padding: 3px 6px;
+    border-radius: var(--border-radius-xs);
+    font-size: 0.75em;
+    font-weight: 500;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.deleted-badge i {
+    margin-right: 4px;
+    font-size: 0.9em;
+}
+
+/* Recipe status partial state */
+.recipe-status.partial {
+    background: rgba(127, 127, 127, 0.1);
+    color: #777;
+}
+
+/* 标题输入框特定的样式 */
+.title-input {
+    font-size: 1.2em !important; /* 调整为更合适的大小 */
+    line-height: 1.2;
+    font-weight: 500;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .recipe-top-section {
@@ -502,7 +644,8 @@
 
 /* Update the local-badge and missing-badge to be positioned within the badge-container */
 .badge-container .local-badge, 
-.badge-container .missing-badge {
+.badge-container .missing-badge,
+.badge-container .deleted-badge {
     position: static; /* Override absolute positioning */
     transform: none; /* Remove the transform */
 }
@@ -512,3 +655,46 @@
     position: fixed; /* Keep as fixed for Chrome */
     z-index: 100;
 }
+
+/* Add styles for missing LoRAs download feature */
+.recipe-status.missing {
+    position: relative;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.recipe-status.missing:hover {
+    background-color: rgba(var(--lora-warning-rgb, 255, 165, 0), 0.2);
+}
+
+.recipe-status.missing .missing-tooltip {
+    position: absolute;
+    display: none;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    padding: 8px 12px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: var(--z-overlay);
+    width: max-content;
+    max-width: 200px;
+    font-size: 0.85rem;
+    font-weight: normal;
+    margin-left: -100px;
+    margin-top: -65px;
+}
+
+.recipe-status.missing:hover .missing-tooltip {
+    display: block;
+}
+
+.recipe-status.clickable {
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: var(--border-radius-xs);
+}
+
+.recipe-status.clickable:hover {
+    background-color: rgba(var(--lora-warning-rgb, 255, 165, 0), 0.2);
+}

static/js/components/LoraModal.js

@@ -29,9 +29,11 @@ export function showLoraModal(lora) {
                         </div>
                         <div class="info-item">
                             <label>File Name</label>
-                            <div class="file-name-wrapper" onclick="copyFileName('${lora.file_name}')">
-                                <span id="file-name">${lora.file_name || 'N/A'}</span>
-                                <i class="fas fa-copy" title="Copy file name"></i>
+                            <div class="file-name-wrapper">
+                                <span id="file-name" class="file-name-content">${lora.file_name || 'N/A'}</span>
+                                <button class="edit-file-name-btn" title="Edit file name">
+                                    <i class="fas fa-pencil-alt"></i>
+                                </button>
                             </div>
                         </div>
                         <div class="info-item location-size">
@@ -130,6 +132,7 @@ export function showLoraModal(lora) {
     setupTriggerWordsEditMode();
     setupModelNameEditing();
     setupBaseModelEditing();
+    setupFileNameEditing();
     
     // If we have a model ID but no description, fetch it
     if (lora.civitai?.modelId && !lora.modelDescription) {
@@ -1562,3 +1565,169 @@ function setupBaseModelEditing() {
         });
     });
 }
+
+// New function to handle file name editing
+function setupFileNameEditing() {
+    const fileNameContent = document.querySelector('.file-name-content');
+    const editBtn = document.querySelector('.edit-file-name-btn');
+    
+    if (!fileNameContent || !editBtn) return;
+    
+    // Show edit button on hover
+    const fileNameWrapper = document.querySelector('.file-name-wrapper');
+    fileNameWrapper.addEventListener('mouseenter', () => {
+        editBtn.classList.add('visible');
+    });
+    
+    fileNameWrapper.addEventListener('mouseleave', () => {
+        if (!fileNameWrapper.classList.contains('editing')) {
+            editBtn.classList.remove('visible');
+        }
+    });
+    
+    // Handle edit button click
+    editBtn.addEventListener('click', () => {
+        fileNameWrapper.classList.add('editing');
+        fileNameContent.setAttribute('contenteditable', 'true');
+        fileNameContent.focus();
+        
+        // Store original value for comparison later
+        fileNameContent.dataset.originalValue = fileNameContent.textContent.trim();
+        
+        // Place cursor at the end
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.selectNodeContents(fileNameContent);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        
+        editBtn.classList.add('visible');
+    });
+    
+    // Handle keyboard events in edit mode
+    fileNameContent.addEventListener('keydown', function(e) {
+        if (!this.getAttribute('contenteditable')) return;
+        
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.blur(); // Trigger save on Enter
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            // Restore original value
+            this.textContent = this.dataset.originalValue;
+            exitEditMode();
+        }
+    });
+    
+    // Handle input validation
+    fileNameContent.addEventListener('input', function() {
+        if (!this.getAttribute('contenteditable')) return;
+        
+        // Replace invalid characters for filenames
+        const invalidChars = /[\\/:*?"<>|]/g;
+        if (invalidChars.test(this.textContent)) {
+            const cursorPos = window.getSelection().getRangeAt(0).startOffset;
+            this.textContent = this.textContent.replace(invalidChars, '');
+            
+            // Restore cursor position
+            const range = document.createRange();
+            const sel = window.getSelection();
+            const newPos = Math.min(cursorPos, this.textContent.length);
+            
+            if (this.firstChild) {
+                range.setStart(this.firstChild, newPos);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+            
+            showToast('Invalid characters removed from filename', 'warning');
+        }
+    });
+    
+    // Handle focus out - save changes
+    fileNameContent.addEventListener('blur', async function() {
+        if (!this.getAttribute('contenteditable')) return;
+        
+        const newFileName = this.textContent.trim();
+        const originalValue = this.dataset.originalValue;
+        
+        // Basic validation
+        if (!newFileName) {
+            // Restore original value if empty
+            this.textContent = originalValue;
+            showToast('File name cannot be empty', 'error');
+            exitEditMode();
+            return;
+        }
+        
+        if (newFileName === originalValue) {
+            // No changes, just exit edit mode
+            exitEditMode();
+            return;
+        }
+        
+        try {
+            // Get the full file path
+            const filePath = document.querySelector('#loraModal .modal-content')
+                .querySelector('.file-path').textContent + originalValue + '.safetensors';
+                
+            // Call API to rename the file
+            const response = await fetch('/api/rename_lora', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    file_path: filePath,
+                    new_file_name: newFileName
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                showToast('File name updated successfully', 'success');
+                
+                // Update card in the gallery
+                const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+                if (loraCard) {
+                    // Update the card's filepath attribute to the new path
+                    loraCard.dataset.filepath = result.new_file_path;
+                    loraCard.dataset.file_name = newFileName;
+                    
+                    // Update the filename display in the card
+                    const cardFileName = loraCard.querySelector('.card-filename');
+                    if (cardFileName) {
+                        cardFileName.textContent = newFileName;
+                    }
+                }
+                
+                // Handle the case where we need to reload the page
+                if (result.reload_required) {
+                    showToast('Reloading page to apply changes...', 'info');
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1500);
+                }
+            } else {
+                // Show error and restore original filename
+                showToast(result.error || 'Failed to update file name', 'error');
+                this.textContent = originalValue;
+            }
+        } catch (error) {
+            console.error('Error saving filename:', error);
+            showToast('Failed to update file name', 'error');
+            this.textContent = originalValue;
+        } finally {
+            exitEditMode();
+        }
+    });
+    
+    function exitEditMode() {
+        fileNameContent.removeAttribute('contenteditable');
+        fileNameWrapper.classList.remove('editing');
+        editBtn.classList.remove('visible');
+    }
+}

static/js/components/RecipeCard.js

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

static/js/components/RecipeModal.js

@@ -1,5 +1,6 @@
 // Recipe Modal Component
 import { showToast } from '../utils/uiHelpers.js';
+import { state } from '../state/index.js';
 
 class RecipeModal {
     constructor() {
@@ -12,6 +13,25 @@ class RecipeModal {
         document.addEventListener('DOMContentLoaded', () => {
             this.setupTooltipPositioning();
         });
+        
+        // Set up document click handler to close edit fields
+        document.addEventListener('click', (event) => {
+            // Handle title edit
+            const titleEditor = document.getElementById('recipeTitleEditor');
+            if (titleEditor && titleEditor.classList.contains('active') && 
+                !titleEditor.contains(event.target) && 
+                !event.target.closest('.edit-icon')) {
+                this.saveTitleEdit();
+            }
+            
+            // Handle tags edit
+            const tagsEditor = document.getElementById('recipeTagsEditor');
+            if (tagsEditor && tagsEditor.classList.contains('active') && 
+                !tagsEditor.contains(event.target) && 
+                !event.target.closest('.edit-icon')) {
+                this.saveTagsEdit();
+            }
+        });
     }
     
     // Add tooltip positioning handler to ensure correct positioning of fixed tooltips
@@ -31,73 +51,153 @@ class RecipeModal {
                     tooltip.style.left = (badgeRect.right - tooltip.offsetWidth) + 'px';
                 }
             }
+            
+            // Add tooltip positioning for missing badge
+            if (event.target.closest('.recipe-status.missing')) {
+                const badge = event.target.closest('.recipe-status.missing');
+                const tooltip = badge.querySelector('.missing-tooltip');
+                
+                if (tooltip) {
+                    // Get badge position
+                    const badgeRect = badge.getBoundingClientRect();
+                    
+                    // Position the tooltip
+                    tooltip.style.top = (badgeRect.bottom + 4) + 'px';
+                    tooltip.style.left = (badgeRect.left) + 'px';
+                }
+            }
         }, true);
     }
     
     showRecipeDetails(recipe) {
-        // Set modal title
+        // Store the full recipe for editing
+        this.currentRecipe = JSON.parse(JSON.stringify(recipe)); // 深拷贝以避免对原始对象的修改
+        
+        // Set modal title with edit icon
         const modalTitle = document.getElementById('recipeModalTitle');
         if (modalTitle) {
-            modalTitle.textContent = recipe.title || 'Recipe Details';
+            modalTitle.innerHTML = `
+                <div class="editable-content">
+                    <span class="content-text">${recipe.title || 'Recipe Details'}</span>
+                    <button class="edit-icon" title="Edit recipe name"><i class="fas fa-pencil-alt"></i></button>
+                </div>
+                <div id="recipeTitleEditor" class="content-editor">
+                    <input type="text" class="title-input" value="${recipe.title || ''}">
+                </div>
+            `;
+            
+            // Add event listener for title editing
+            const editIcon = modalTitle.querySelector('.edit-icon');
+            editIcon.addEventListener('click', () => this.showTitleEditor());
+            
+            // Add key event listener for Enter key
+            const titleInput = modalTitle.querySelector('.title-input');
+            titleInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    this.saveTitleEdit();
+                } else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    this.cancelTitleEdit();
+                }
+            });
         }
         
+        // Store the recipe ID for copy syntax API call
+        this.recipeId = recipe.id;
+        
         // Set recipe tags if they exist
         const tagsCompactElement = document.getElementById('recipeTagsCompact');
         const tagsTooltipContent = document.getElementById('recipeTagsTooltipContent');
         
-        if (tagsCompactElement && tagsTooltipContent && recipe.tags && recipe.tags.length > 0) {
-            // Clear previous tags
-            tagsCompactElement.innerHTML = '';
-            tagsTooltipContent.innerHTML = '';
+        if (tagsCompactElement) {
+            // Add tags container with edit functionality
+            tagsCompactElement.innerHTML = `
+                <div class="editable-content tags-content">
+                    <div class="tags-display"></div>
+                    <button class="edit-icon" title="Edit tags"><i class="fas fa-pencil-alt"></i></button>
+                </div>
+                <div id="recipeTagsEditor" class="content-editor tags-editor">
+                    <input type="text" class="tags-input" placeholder="Enter tags separated by commas">
+                </div>
+            `;
             
-            // Limit displayed tags to 5, show a "+X more" button if needed
-            const maxVisibleTags = 5;
-            const visibleTags = recipe.tags.slice(0, maxVisibleTags);
-            const remainingTags = recipe.tags.length > maxVisibleTags ? recipe.tags.slice(maxVisibleTags) : [];
+            const tagsDisplay = tagsCompactElement.querySelector('.tags-display');
             
-            // Add visible tags
-            visibleTags.forEach(tag => {
-                const tagElement = document.createElement('div');
-                tagElement.className = 'recipe-tag-compact';
-                tagElement.textContent = tag;
-                tagsCompactElement.appendChild(tagElement);
-            });
-            
-            // Add "more" button if needed
-            if (remainingTags.length > 0) {
-                const moreButton = document.createElement('div');
-                moreButton.className = 'recipe-tag-more';
-                moreButton.textContent = `+${remainingTags.length} more`;
-                tagsCompactElement.appendChild(moreButton);
+            if (recipe.tags && recipe.tags.length > 0) {
+                // Limit displayed tags to 5, show a "+X more" button if needed
+                const maxVisibleTags = 5;
+                const visibleTags = recipe.tags.slice(0, maxVisibleTags);
+                const remainingTags = recipe.tags.length > maxVisibleTags ? recipe.tags.slice(maxVisibleTags) : [];
                 
-                // Add tooltip functionality
-                moreButton.addEventListener('mouseenter', () => {
-                    document.getElementById('recipeTagsTooltip').classList.add('visible');
+                // Add visible tags
+                visibleTags.forEach(tag => {
+                    const tagElement = document.createElement('div');
+                    tagElement.className = 'recipe-tag-compact';
+                    tagElement.textContent = tag;
+                    tagsDisplay.appendChild(tagElement);
                 });
                 
-                moreButton.addEventListener('mouseleave', () => {
-                    setTimeout(() => {
-                        if (!document.getElementById('recipeTagsTooltip').matches(':hover')) {
-                            document.getElementById('recipeTagsTooltip').classList.remove('visible');
-                        }
-                    }, 300);
-                });
-                
-                document.getElementById('recipeTagsTooltip').addEventListener('mouseleave', () => {
-                    document.getElementById('recipeTagsTooltip').classList.remove('visible');
-                });
-                
-                // Add all tags to tooltip
-                recipe.tags.forEach(tag => {
-                    const tooltipTag = document.createElement('div');
-                    tooltipTag.className = 'tooltip-tag';
-                    tooltipTag.textContent = tag;
-                    tagsTooltipContent.appendChild(tooltipTag);
-                });
+                // Add "more" button if needed
+                if (remainingTags.length > 0) {
+                    const moreButton = document.createElement('div');
+                    moreButton.className = 'recipe-tag-more';
+                    moreButton.textContent = `+${remainingTags.length} more`;
+                    tagsDisplay.appendChild(moreButton);
+                    
+                    // Add tooltip functionality
+                    moreButton.addEventListener('mouseenter', () => {
+                        document.getElementById('recipeTagsTooltip').classList.add('visible');
+                    });
+                    
+                    moreButton.addEventListener('mouseleave', () => {
+                        setTimeout(() => {
+                            if (!document.getElementById('recipeTagsTooltip').matches(':hover')) {
+                                document.getElementById('recipeTagsTooltip').classList.remove('visible');
+                            }
+                        }, 300);
+                    });
+                    
+                    document.getElementById('recipeTagsTooltip').addEventListener('mouseleave', () => {
+                        document.getElementById('recipeTagsTooltip').classList.remove('visible');
+                    });
+                    
+                    // Add all tags to tooltip
+                    if (tagsTooltipContent) {
+                        tagsTooltipContent.innerHTML = '';
+                        recipe.tags.forEach(tag => {
+                            const tooltipTag = document.createElement('div');
+                            tooltipTag.className = 'tooltip-tag';
+                            tooltipTag.textContent = tag;
+                            tagsTooltipContent.appendChild(tooltipTag);
+                        });
+                    }
+                }
+            } else {
+                tagsDisplay.innerHTML = '<div class="no-tags">No tags</div>';
             }
-        } else if (tagsCompactElement) {
-            // No tags to display
-            tagsCompactElement.innerHTML = '';
+            
+            // Add event listeners for tags editing
+            const editTagsIcon = tagsCompactElement.querySelector('.edit-icon');
+            const tagsInput = tagsCompactElement.querySelector('.tags-input');
+            
+            // Set current tags in the input
+            if (recipe.tags && recipe.tags.length > 0) {
+                tagsInput.value = recipe.tags.join(', ');
+            }
+            
+            editTagsIcon.addEventListener('click', () => this.showTagsEditor());
+            
+            // Add key event listener for Enter key
+            tagsInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    this.saveTagsEdit();
+                } else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    this.cancelTagsEdit();
+                }
+            });
         }
         
         // Set recipe image
@@ -192,50 +292,81 @@ class RecipeModal {
         const lorasListElement = document.getElementById('recipeLorasList');
         const lorasCountElement = document.getElementById('recipeLorasCount');
         
-        // 检查所有 LoRAs 是否都在库中
+        // Check all LoRAs status
         let allLorasAvailable = true;
         let missingLorasCount = 0;
+        let deletedLorasCount = 0;
         
         if (recipe.loras && recipe.loras.length > 0) {
             recipe.loras.forEach(lora => {
-                if (!lora.inLibrary) {
+                if (lora.isDeleted) {
+                    deletedLorasCount++;
+                } else if (!lora.inLibrary) {
                     allLorasAvailable = false;
                     missingLorasCount++;
                 }
             });
         }
         
-        // 设置 LoRAs 计数和状态
+        // Set LoRAs count and status
         if (lorasCountElement && recipe.loras) {
             const totalCount = recipe.loras.length;
             
-            // 创建状态指示器
+            // Create status indicator based on LoRA states
             let statusHTML = '';
             if (totalCount > 0) {
-                if (allLorasAvailable) {
+                if (allLorasAvailable && deletedLorasCount === 0) {
+                    // All LoRAs are available
                     statusHTML = `<div class="recipe-status ready"><i class="fas fa-check-circle"></i> Ready to use</div>`;
-                } else {
-                    statusHTML = `<div class="recipe-status missing"><i class="fas fa-exclamation-triangle"></i> ${missingLorasCount} missing</div>`;
+                } else if (missingLorasCount > 0) {
+                    // Some LoRAs are missing (prioritize showing missing over deleted)
+                    statusHTML = `<div class="recipe-status missing">
+                        <i class="fas fa-exclamation-triangle"></i> ${missingLorasCount} missing
+                        <div class="missing-tooltip">Click to download missing LoRAs</div>
+                    </div>`;
+                } else if (deletedLorasCount > 0 && missingLorasCount === 0) {
+                    // Some LoRAs are deleted but none are missing
+                    statusHTML = `<div class="recipe-status partial"><i class="fas fa-info-circle"></i> ${deletedLorasCount} deleted</div>`;
                 }
             }
             
             lorasCountElement.innerHTML = `<i class="fas fa-layer-group"></i> ${totalCount} LoRAs ${statusHTML}`;
+            
+            // Add click handler for missing LoRAs status
+            setTimeout(() => {
+                const missingStatus = document.querySelector('.recipe-status.missing');
+                if (missingStatus && missingLorasCount > 0) {
+                    missingStatus.classList.add('clickable');
+                    missingStatus.addEventListener('click', () => this.showDownloadMissingLorasModal());
+                }
+            }, 100);
         }
         
         if (lorasListElement && recipe.loras && recipe.loras.length > 0) {
             lorasListElement.innerHTML = recipe.loras.map(lora => {
                 const existsLocally = lora.inLibrary;
+                const isDeleted = lora.isDeleted;
                 const localPath = lora.localPath || '';
                 
-                // Create local status badge with a more stable structure
-                const localStatus = existsLocally ? 
-                    `<div class="local-badge">
-                        <i class="fas fa-check"></i> In Library
-                        <div class="local-path">${localPath}</div>
-                     </div>` : 
-                    `<div class="missing-badge">
-                        <i class="fas fa-exclamation-triangle"></i> Not in Library
-                     </div>`;
+                // Create status badge based on LoRA state
+                let localStatus;
+                if (existsLocally) {
+                    localStatus = `
+                        <div class="local-badge">
+                            <i class="fas fa-check"></i> In Library
+                            <div class="local-path">${localPath}</div>
+                        </div>`;
+                } else if (isDeleted) {
+                    localStatus = `
+                        <div class="deleted-badge">
+                            <i class="fas fa-trash-alt"></i> Deleted
+                        </div>`;
+                } else {
+                    localStatus = `
+                        <div class="missing-badge">
+                            <i class="fas fa-exclamation-triangle"></i> Not in Library
+                        </div>`;
+                }
 
                 // Check if preview is a video
                 const isPreviewVideo = lora.preview_url && lora.preview_url.toLowerCase().endsWith('.mp4');
@@ -245,8 +376,18 @@ class RecipeModal {
                      </video>` :
                     `<img src="${lora.preview_url || '/loras_static/images/no-preview.png'}" alt="LoRA preview">`;
 
+                // Determine CSS class based on LoRA state
+                let loraItemClass = 'recipe-lora-item';
+                if (existsLocally) {
+                    loraItemClass += ' exists-locally';
+                } else if (isDeleted) {
+                    loraItemClass += ' is-deleted';
+                } else {
+                    loraItemClass += ' missing-locally';
+                }
+
                 return `
-                    <div class="recipe-lora-item ${existsLocally ? 'exists-locally' : 'missing-locally'}">
+                    <div class="${loraItemClass}">
                         <div class="recipe-lora-thumbnail">
                             ${previewMedia}
                         </div>
@@ -265,20 +406,263 @@ class RecipeModal {
                 `;
             }).join('');
             
-            // Generate recipe syntax for copy button
-            this.recipeLorasSyntax = recipe.loras.map(lora => 
-                `<lora:${lora.file_name}:${lora.strength || 1.0}>`
-            ).join(' ');
+            // Generate recipe syntax for copy button (this is now a placeholder, actual syntax will be fetched from the API)
+            this.recipeLorasSyntax = '';
             
         } else if (lorasListElement) {
             lorasListElement.innerHTML = '<div class="no-loras">No LoRAs associated with this recipe</div>';
             this.recipeLorasSyntax = '';
         }
+
+        console.log(this.currentRecipe.loras);
         
         // Show the modal
         modalManager.showModal('recipeModal');
     }
     
+    // Title editing methods
+    showTitleEditor() {
+        const titleContainer = document.getElementById('recipeModalTitle');
+        if (titleContainer) {
+            titleContainer.querySelector('.editable-content').classList.add('hide');
+            const editor = titleContainer.querySelector('#recipeTitleEditor');
+            editor.classList.add('active');
+            const input = editor.querySelector('input');
+            input.focus();
+            input.select();
+        }
+    }
+    
+    saveTitleEdit() {
+        const titleContainer = document.getElementById('recipeModalTitle');
+        if (titleContainer) {
+            const editor = titleContainer.querySelector('#recipeTitleEditor');
+            const input = editor.querySelector('input');
+            const newTitle = input.value.trim();
+            
+            // Check if title changed
+            if (newTitle && newTitle !== this.currentRecipe.title) {
+                // Update title in the UI
+                titleContainer.querySelector('.content-text').textContent = newTitle;
+                
+                // Update the recipe on the server
+                this.updateRecipeMetadata({ title: newTitle });
+            }
+            
+            // Hide editor
+            editor.classList.remove('active');
+            titleContainer.querySelector('.editable-content').classList.remove('hide');
+        }
+    }
+    
+    cancelTitleEdit() {
+        const titleContainer = document.getElementById('recipeModalTitle');
+        if (titleContainer) {
+            // Reset input value
+            const editor = titleContainer.querySelector('#recipeTitleEditor');
+            const input = editor.querySelector('input');
+            input.value = this.currentRecipe.title || '';
+            
+            // Hide editor
+            editor.classList.remove('active');
+            titleContainer.querySelector('.editable-content').classList.remove('hide');
+        }
+    }
+    
+    // Tags editing methods
+    showTagsEditor() {
+        const tagsContainer = document.getElementById('recipeTagsCompact');
+        if (tagsContainer) {
+            tagsContainer.querySelector('.editable-content').classList.add('hide');
+            const editor = tagsContainer.querySelector('#recipeTagsEditor');
+            editor.classList.add('active');
+            const input = editor.querySelector('input');
+            input.focus();
+        }
+    }
+    
+    saveTagsEdit() {
+        const tagsContainer = document.getElementById('recipeTagsCompact');
+        if (tagsContainer) {
+            const editor = tagsContainer.querySelector('#recipeTagsEditor');
+            const input = editor.querySelector('input');
+            const tagsText = input.value.trim();
+            
+            // Parse tags
+            let newTags = [];
+            if (tagsText) {
+                newTags = tagsText.split(',')
+                    .map(tag => tag.trim())
+                    .filter(tag => tag.length > 0);
+            }
+            
+            // Check if tags changed
+            const oldTags = this.currentRecipe.tags || [];
+            const tagsChanged = 
+                newTags.length !== oldTags.length || 
+                newTags.some((tag, index) => tag !== oldTags[index]);
+            
+            if (tagsChanged) {
+                // Update the recipe on the server
+                this.updateRecipeMetadata({ tags: newTags });
+                
+                // Update tags in the UI
+                const tagsDisplay = tagsContainer.querySelector('.tags-display');
+                tagsDisplay.innerHTML = '';
+                
+                if (newTags.length > 0) {
+                    // Limit displayed tags to 5, show a "+X more" button if needed
+                    const maxVisibleTags = 5;
+                    const visibleTags = newTags.slice(0, maxVisibleTags);
+                    const remainingTags = newTags.length > maxVisibleTags ? newTags.slice(maxVisibleTags) : [];
+                    
+                    // Add visible tags
+                    visibleTags.forEach(tag => {
+                        const tagElement = document.createElement('div');
+                        tagElement.className = 'recipe-tag-compact';
+                        tagElement.textContent = tag;
+                        tagsDisplay.appendChild(tagElement);
+                    });
+                    
+                    // Add "more" button if needed
+                    if (remainingTags.length > 0) {
+                        const moreButton = document.createElement('div');
+                        moreButton.className = 'recipe-tag-more';
+                        moreButton.textContent = `+${remainingTags.length} more`;
+                        tagsDisplay.appendChild(moreButton);
+                        
+                        // Update tooltip content
+                        const tooltipContent = document.getElementById('recipeTagsTooltipContent');
+                        if (tooltipContent) {
+                            tooltipContent.innerHTML = '';
+                            newTags.forEach(tag => {
+                                const tooltipTag = document.createElement('div');
+                                tooltipTag.className = 'tooltip-tag';
+                                tooltipTag.textContent = tag;
+                                tooltipContent.appendChild(tooltipTag);
+                            });
+                        }
+                        
+                        // Re-add tooltip functionality
+                        moreButton.addEventListener('mouseenter', () => {
+                            document.getElementById('recipeTagsTooltip').classList.add('visible');
+                        });
+                        
+                        moreButton.addEventListener('mouseleave', () => {
+                            setTimeout(() => {
+                                if (!document.getElementById('recipeTagsTooltip').matches(':hover')) {
+                                    document.getElementById('recipeTagsTooltip').classList.remove('visible');
+                                }
+                            }, 300);
+                        });
+                    }
+                } else {
+                    tagsDisplay.innerHTML = '<div class="no-tags">No tags</div>';
+                }
+                
+                // Update the current recipe object
+                this.currentRecipe.tags = newTags;
+            }
+            
+            // Hide editor
+            editor.classList.remove('active');
+            tagsContainer.querySelector('.editable-content').classList.remove('hide');
+        }
+    }
+    
+    cancelTagsEdit() {
+        const tagsContainer = document.getElementById('recipeTagsCompact');
+        if (tagsContainer) {
+            // Reset input value
+            const editor = tagsContainer.querySelector('#recipeTagsEditor');
+            const input = editor.querySelector('input');
+            input.value = this.currentRecipe.tags ? this.currentRecipe.tags.join(', ') : '';
+            
+            // Hide editor
+            editor.classList.remove('active');
+            tagsContainer.querySelector('.editable-content').classList.remove('hide');
+        }
+    }
+    
+    // Update recipe metadata on the server
+    async updateRecipeMetadata(updates) {
+        try {
+            const response = await fetch(`/api/recipe/${this.recipeId}/update`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(updates)
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                // 显示保存成功的提示
+                if (updates.title) {
+                    showToast('Recipe name updated successfully', 'success');
+                } else if (updates.tags) {
+                    showToast('Recipe tags updated successfully', 'success');
+                } else {
+                    showToast('Recipe updated successfully', 'success');
+                }
+                
+                // 更新当前recipe对象的属性
+                Object.assign(this.currentRecipe, updates);
+                
+                // 确保这个更新也传播到卡片视图
+                // 尝试找到可能显示这个recipe的卡片并更新它
+                try {
+                    const recipeCards = document.querySelectorAll('.recipe-card');
+                    recipeCards.forEach(card => {
+                        if (card.dataset.recipeId === this.recipeId) {
+                            // 更新卡片标题
+                            if (updates.title) {
+                                const titleElement = card.querySelector('.recipe-title');
+                                if (titleElement) {
+                                    titleElement.textContent = updates.title;
+                                }
+                            }
+                            
+                            // 更新卡片标签
+                            if (updates.tags) {
+                                const tagsElement = card.querySelector('.recipe-tags');
+                                if (tagsElement) {
+                                    if (updates.tags.length > 0) {
+                                        tagsElement.innerHTML = updates.tags.map(
+                                            tag => `<div class="recipe-tag">${tag}</div>`
+                                        ).join('');
+                                    } else {
+                                        tagsElement.innerHTML = '';
+                                    }
+                                }
+                            }
+                        }
+                    });
+                } catch (err) {
+                    console.log("Non-critical error updating recipe cards:", err);
+                }
+                
+                // 重要：强制刷新recipes列表，确保从服务器获取最新数据
+                try {
+                    if (window.recipeManager && typeof window.recipeManager.loadRecipes === 'function') {
+                        // 异步刷新recipes列表，不阻塞用户界面
+                        setTimeout(() => {
+                            window.recipeManager.loadRecipes(true);
+                        }, 500);
+                    }
+                } catch (err) {
+                    console.log("Error refreshing recipes list:", err);
+                }
+            } else {
+                showToast(`Failed to update recipe: ${data.error}`, 'error');
+            }
+        } catch (error) {
+            console.error('Error updating recipe:', error);
+            showToast(`Error updating recipe: ${error.message}`, 'error');
+        }
+    }
+    
     // Setup copy buttons for prompts and recipe syntax
     setupCopyButtons() {
         const copyPromptBtn = document.getElementById('copyPromptBtn');
@@ -301,11 +685,42 @@ class RecipeModal {
         
         if (copyRecipeSyntaxBtn) {
             copyRecipeSyntaxBtn.addEventListener('click', () => {
-                this.copyToClipboard(this.recipeLorasSyntax, 'Recipe syntax copied to clipboard');
+                // Use backend API to get recipe syntax
+                this.fetchAndCopyRecipeSyntax();
             });
         }
     }
     
+    // Fetch recipe syntax from backend and copy to clipboard
+    async fetchAndCopyRecipeSyntax() {
+        if (!this.recipeId) {
+            showToast('No recipe ID available', 'error');
+            return;
+        }
+        
+        try {
+            // Fetch recipe syntax from backend
+            const response = await fetch(`/api/recipe/${this.recipeId}/syntax`);
+            
+            if (!response.ok) {
+                throw new Error(`Failed to get recipe syntax: ${response.statusText}`);
+            }
+            
+            const data = await response.json();
+            
+            if (data.success && data.syntax) {
+                // Copy to clipboard
+                await navigator.clipboard.writeText(data.syntax);
+                showToast('Recipe syntax copied to clipboard', 'success');
+            } else {
+                throw new Error(data.error || 'No syntax returned from server');
+            }
+        } catch (error) {
+            console.error('Error fetching recipe syntax:', error);
+            showToast(`Error copying recipe syntax: ${error.message}`, 'error');
+        }
+    }
+    
     // Helper method to copy text to clipboard
     copyToClipboard(text, successMessage) {
         navigator.clipboard.writeText(text).then(() => {
@@ -315,6 +730,105 @@ class RecipeModal {
             showToast('Failed to copy text', 'error');
         });
     }
+
+    // Add new method to handle downloading missing LoRAs
+    async showDownloadMissingLorasModal() {
+        console.log("currentRecipe", this.currentRecipe);
+        // Get missing LoRAs from the current recipe
+        const missingLoras = this.currentRecipe.loras.filter(lora => !lora.inLibrary);
+        console.log("missingLoras", missingLoras);
+        
+        if (missingLoras.length === 0) {
+            showToast('No missing LoRAs to download', 'info');
+            return;
+        }
+
+        try {
+            state.loadingManager.showSimpleLoading('Getting version info for missing LoRAs...');
+
+            // Get version info for each missing LoRA by calling the appropriate API endpoint
+            const missingLorasWithVersionInfoPromises = missingLoras.map(async lora => {
+                let endpoint;
+                
+                // Determine which endpoint to use based on available data
+                if (lora.modelVersionId) {
+                    endpoint = `/api/civitai/model/${lora.modelVersionId}`;
+                } else if (lora.hash) {
+                    endpoint = `/api/civitai/model/${lora.hash}`;
+                } else {
+                    console.error("Missing both hash and modelVersionId for lora:", lora);
+                    return null;
+                }
+                
+                const response = await fetch(endpoint);
+                const versionInfo = await response.json();
+                
+                // Return original lora data combined with version info
+                return {
+                    ...lora,
+                    civitaiInfo: versionInfo
+                };
+            });
+            
+            // Wait for all API calls to complete
+            const lorasWithVersionInfo = await Promise.all(missingLorasWithVersionInfoPromises);
+            console.log("Loras with version info:", lorasWithVersionInfo);
+            
+            // Filter out null values (failed requests)
+            const validLoras = lorasWithVersionInfo.filter(lora => lora !== null);
+            
+            if (validLoras.length === 0) {
+                showToast('Failed to get information for missing LoRAs', 'error');
+                return;
+            }
+            
+            // Close the recipe modal first
+            modalManager.closeModal('recipeModal');
+            
+            // Prepare data for import manager using the retrieved information
+            const recipeData = {
+                loras: validLoras.map(lora => {
+                    const civitaiInfo = lora.civitaiInfo;
+                    const modelFile = civitaiInfo.files ? 
+                        civitaiInfo.files.find(file => file.type === 'Model') : null;
+                    
+                    return {
+                        // Basic lora info
+                        name: civitaiInfo.model?.name || lora.name,
+                        version: civitaiInfo.name || '',
+                        strength: lora.strength || 1.0,
+                        
+                        // Model identifiers
+                        hash: modelFile?.hashes?.SHA256?.toLowerCase() || lora.hash,
+                        modelVersionId: civitaiInfo.id || lora.modelVersionId,
+                        
+                        // Metadata
+                        thumbnailUrl: civitaiInfo.images?.[0]?.url || '',
+                        baseModel: civitaiInfo.baseModel || '',
+                        downloadUrl: civitaiInfo.downloadUrl || '',
+                        size: modelFile ? (modelFile.sizeKB * 1024) : 0,
+                        file_name: modelFile ? modelFile.name.split('.')[0] : '',
+                        
+                        // Status flags
+                        existsLocally: false,
+                        isDeleted: civitaiInfo.error === "Model not found",
+                        isEarlyAccess: !!civitaiInfo.earlyAccessEndsAt,
+                        earlyAccessEndsAt: civitaiInfo.earlyAccessEndsAt || ''
+                    };
+                })
+            };
+            
+            console.log("recipeData for import:", recipeData);
+            
+            // Call ImportManager's download missing LoRAs method
+            window.importManager.downloadMissingLoras(recipeData, this.currentRecipe.id);
+        } catch (error) {
+            console.error("Error downloading missing LoRAs:", error);
+            showToast('Error preparing LoRAs for download', 'error');
+        } finally {
+            state.loadingManager.hide();
+        }
+    }
 }
 
 export { RecipeModal }; 

static/js/managers/ImportManager.js

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

static/js/recipes.js

@@ -4,6 +4,7 @@ import { ImportManager } from './managers/ImportManager.js';
 import { RecipeCard } from './components/RecipeCard.js';
 import { RecipeModal } from './components/RecipeModal.js';
 import { getCurrentPageState } from './state/index.js';
+import { toggleApiKeyVisibility } from './managers/SettingsManager.js';
 
 class RecipeManager {
     constructor() {
@@ -54,6 +55,7 @@ class RecipeManager {
         // Only expose what's needed for the page
         window.recipeManager = this;
         window.importManager = this.importManager;
+        window.toggleApiKeyVisibility = toggleApiKeyVisibility;
     }
     
     initEventListeners() {

templates/base.html

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

templates/loras.html

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