Update release notes and version to v0.7.35-beta

README.md

@@ -11,43 +11,38 @@ Watch this quick tutorial to learn how to use the new one-click LoRA integration
 
 ---
 
-## [Update 0.7.33] Enhanced UI Controls & Trigger Word Management
-- 🎛️ **Enhanced LoRA Loader Node**:
-  - New visual widgets for easier LoRA strength adjustment
-  - Toggle switches for quick LoRA enable/disable
-  - Image tooltips for quick LoRA preview identification
-  - Improved UI for managing multiple LoRAs
+## Release Notes
 
-- 🏷️ **New TriggerWord Toggle Node**:
-  - Visual display of applicable trigger words
-  - Click-to-toggle individual trigger words
-  - Easy exclusion of unwanted trigger words
-  - Connects directly after LoRA Loader node
+### v0.7.35-beta
+* Added base model filtering
+* Implemented bulk operations (copy syntax, move multiple LoRAs)
+* Added ability to edit LoRA model names in details view
+* Added update checker with notification system
+* Added support modal for user feedback and community links
 
-- 🐛 **Bug Fixes and Stability Improvements**
+### v0.7.33
+* Enhanced LoRA Loader node with visual strength adjustment widgets
+* Added toggle switches for LoRA enable/disable
+* Implemented image tooltips for LoRA preview
+* Added TriggerWord Toggle node with visual word selection
+* Fixed various bugs and improved stability
 
-## [Update 0.7.3] One-Click Integration & Workflow Automation
-- ✨ **One-Click LoRA Integration**:
-  - Use "Lora Loader (LoraManager)" custom node in workflows
-  - Copy LoRA syntax directly from manager interface
-  - Auto-applies preset strength values
-  - Auto-loads trigger words when available
-  - Example workflow included
+### v0.7.3
+* Added "Lora Loader (LoraManager)" custom node for workflows
+* Implemented one-click LoRA integration
+* Added direct copying of LoRA syntax from manager interface
+* Added automatic preset strength value application
+* Added automatic trigger word loading
 
-## [Update 0.7.0] Major Features Enhancement
-
-- 🚀 **Direct CivitAI Integration**:
-  - Download LoRAs directly from CivitAI URLs
-  - Version selection support for model downloads
-  - Choose target folder for downloads
-- 📋 **New Context Menu Features**:
-  - Right-click menu for quick actions
-  - Force refresh CivitAI data
-  - Move LoRAs between folders
-- 📝 **Enhanced Model Details**:
-  - Save personal usage tips
-  - Add custom notes for each LoRA
-  - Improved performance for details window
+### v0.7.0
+* Added direct CivitAI integration for downloading LoRAs
+* Implemented version selection for model downloads
+* Added target folder selection for downloads
+* Added context menu with quick actions
+* Added force refresh for CivitAI data
+* Implemented LoRA movement between folders
+* Added personal usage tips and notes for LoRAs
+* Improved performance for details window
 
 [View Update History](./update_logs.md)
 

py/routes/api_routes.py

@@ -13,6 +13,7 @@ from operator import itemgetter
 from ..services.websocket_manager import ws_manager
 from ..services.settings_manager import settings
 import asyncio
+from .update_routes import UpdateRoutes
 
 logger = logging.getLogger(__name__)
 
@@ -42,6 +43,10 @@ class ApiRoutes:
         app.router.add_post('/api/move_model', routes.move_model)
         app.router.add_post('/loras/api/save-metadata', routes.save_metadata)
         app.router.add_get('/api/lora-preview-url', routes.get_lora_preview_url)  # Add new route
+        app.router.add_post('/api/move_models_bulk', routes.move_models_bulk)
+
+        # Add update check routes
+        UpdateRoutes.setup_routes(app)
 
     async def delete_model(self, request: web.Request) -> web.Response:
         """Handle model deletion request"""
@@ -121,6 +126,10 @@ class ApiRoutes:
             fuzzy = request.query.get('fuzzy', 'false').lower() == 'true'
             recursive = request.query.get('recursive', 'false').lower() == 'true'
             
+            # Parse base models filter parameter
+            base_models = request.query.get('base_models', '').split(',')
+            base_models = [model.strip() for model in base_models if model.strip()]
+            
             # Validate parameters
             if page < 1 or page_size < 1 or page_size > 100:
                 return web.json_response({
@@ -132,7 +141,7 @@ class ApiRoutes:
                     'error': 'Invalid sort parameter'
                 }, status=400)
             
-            # Get paginated data with search
+            # Get paginated data with search and filters
             result = await self.scanner.get_paginated_data(
                 page=page,
                 page_size=page_size,
@@ -140,7 +149,8 @@ class ApiRoutes:
                 folder=folder,
                 search=search,
                 fuzzy=fuzzy,
-                recursive=recursive  # 添加递归参数
+                recursive=recursive,
+                base_models=base_models  # Pass base models filter
             )
             
             # Format the response data
@@ -479,12 +489,22 @@ class ApiRoutes:
         })
 
     async def get_civitai_versions(self, request: web.Request) -> web.Response:
-        """Get available versions for a Civitai model"""
+        """Get available versions for a Civitai model with local availability info"""
         try:
             model_id = request.match_info['model_id']
             versions = await self.civitai_client.get_model_versions(model_id)
             if not versions:
                 return web.Response(status=404, text="Model not found")
+            
+            # Check local availability for each version
+            for version in versions:
+                for file in version.get('files', []):
+                    sha256 = file.get('hashes', {}).get('SHA256')
+                    if sha256:
+                        file['existsLocally'] = self.scanner.has_lora_hash(sha256)
+                        if file['existsLocally']:
+                            file['localPath'] = self.scanner.get_lora_path_by_hash(sha256)
+                        
             return web.json_response(versions)
         except Exception as e:
             logger.error(f"Error fetching model versions: {e}")
@@ -590,6 +610,11 @@ class ApiRoutes:
             # Update cache
             await self.scanner.update_single_lora_cache(file_path, file_path, metadata)
 
+            # If model_name was updated, resort the cache
+            if 'model_name' in metadata_updates:
+                cache = await self.scanner.get_cached_data()
+                await cache.resort(name_only=True)
+
             return web.json_response({'success': True})
 
         except Exception as e:
@@ -630,3 +655,39 @@ class ApiRoutes:
         except Exception as e:
             logger.error(f"Error getting lora preview URL: {e}", exc_info=True)
             return web.Response(text=str(e), status=500)
+
+    async def move_models_bulk(self, request: web.Request) -> web.Response:
+        """Handle bulk model move request"""
+        try:
+            data = await request.json()
+            file_paths = data.get('file_paths', [])
+            target_path = data.get('target_path')
+            
+            if not file_paths or not target_path:
+                return web.Response(text='File paths and target path are required', status=400)
+
+            results = []
+            for file_path in file_paths:
+                success = await self.scanner.move_model(file_path, target_path)
+                results.append({"path": file_path, "success": success})
+            
+            # Count successes
+            success_count = sum(1 for r in results if r["success"])
+            
+            if success_count == len(file_paths):
+                return web.json_response({
+                    'success': True,
+                    'message': f'Successfully moved {success_count} models'
+                })
+            elif success_count > 0:
+                return web.json_response({
+                    'success': True,
+                    'message': f'Moved {success_count} of {len(file_paths)} models',
+                    'results': results
+                })
+            else:
+                return web.Response(text='Failed to move any models', status=500)
+                
+        except Exception as e:
+            logger.error(f"Error moving models in bulk: {e}", exc_info=True)
+            return web.Response(text=str(e), status=500)

py/routes/update_routes.py

@@ -0,0 +1,180 @@
+import os
+import aiohttp
+import logging
+import toml
+from aiohttp import web
+from typing import Dict, Any, List
+
+logger = logging.getLogger(__name__)
+
+class UpdateRoutes:
+    """Routes for handling plugin update checks"""
+    
+    @staticmethod
+    def setup_routes(app):
+        """Register update check routes"""
+        app.router.add_get('/loras/api/check-updates', UpdateRoutes.check_updates)
+    
+    @staticmethod
+    async def check_updates(request):
+        """
+        Check for plugin updates by comparing local version with GitHub
+        Returns update status and version information
+        """
+        try:
+            # Read local version from pyproject.toml
+            local_version = UpdateRoutes._get_local_version()
+            logger.info(f"Local version: {local_version}")
+            
+            # Fetch remote version from GitHub
+            remote_version, changelog = await UpdateRoutes._get_remote_version()
+            logger.info(f"Remote version: {remote_version}")
+            
+            # Compare versions
+            update_available = UpdateRoutes._compare_versions(
+                local_version.replace('v', ''), 
+                remote_version.replace('v', '')
+            )
+            
+            logger.info(f"Update available: {update_available}")
+            
+            return web.json_response({
+                'success': True,
+                'current_version': local_version,
+                'latest_version': remote_version,
+                'update_available': update_available,
+                'changelog': changelog
+            })
+            
+        except Exception as e:
+            logger.error(f"Failed to check for updates: {e}", exc_info=True)
+            return web.json_response({
+                'success': False,
+                'error': str(e)
+            })
+    
+    @staticmethod
+    def _get_local_version() -> str:
+        """Get local plugin version from pyproject.toml"""
+        try:
+            # Find the plugin's pyproject.toml file
+            current_dir = os.path.dirname(os.path.abspath(__file__))
+            plugin_root = os.path.dirname(os.path.dirname(current_dir))
+            pyproject_path = os.path.join(plugin_root, 'pyproject.toml')
+            
+            # Read and parse the toml file
+            if os.path.exists(pyproject_path):
+                with open(pyproject_path, 'r', encoding='utf-8') as f:
+                    project_data = toml.load(f)
+                    version = project_data.get('project', {}).get('version', '0.0.0')
+                    return f"v{version}"
+            else:
+                logger.warning(f"pyproject.toml not found at {pyproject_path}")
+                return "v0.0.0"
+        
+        except Exception as e:
+            logger.error(f"Failed to get local version: {e}", exc_info=True)
+            return "v0.0.0"
+    
+    @staticmethod
+    async def _get_remote_version() -> tuple[str, List[str]]:
+        """
+        Fetch remote version from GitHub
+        Returns:
+            tuple: (version string, changelog list)
+        """
+        repo_owner = "willmiao"
+        repo_name = "ComfyUI-Lora-Manager"
+        
+        # Use GitHub API to fetch the latest release
+        github_url = f"https://api.github.com/repos/{repo_owner}/{repo_name}/releases/latest"
+        
+        try:
+            async with aiohttp.ClientSession() as session:
+                async with session.get(github_url, headers={'Accept': 'application/vnd.github+json'}) as response:
+                    if response.status != 200:
+                        logger.warning(f"Failed to fetch GitHub release: {response.status}")
+                        return "v0.0.0", []
+                    
+                    data = await response.json()
+                    version = data.get('tag_name', '')
+                    if not version.startswith('v'):
+                        version = f"v{version}"
+                    
+                    # Extract changelog from release notes
+                    body = data.get('body', '')
+                    changelog = UpdateRoutes._parse_changelog(body)
+                    
+                    return version, changelog
+        
+        except Exception as e:
+            logger.error(f"Error fetching remote version: {e}", exc_info=True)
+            return "v0.0.0", []
+    
+    @staticmethod
+    def _parse_changelog(release_notes: str) -> List[str]:
+        """
+        Parse GitHub release notes to extract changelog items
+        
+        Args:
+            release_notes: GitHub release notes markdown text
+            
+        Returns:
+            List of changelog items
+        """
+        changelog = []
+        
+        # Simple parsing - extract bullet points
+        lines = release_notes.split('\n')
+        for line in lines:
+            line = line.strip()
+            # Look for bullet points or numbered items
+            if line.startswith('- ') or line.startswith('* '):
+                item = line[2:].strip()
+                if item:
+                    changelog.append(item)
+            # Match numbered items like "1. Item"
+            elif len(line) > 2 and line[0].isdigit() and line[1:].startswith('. '):
+                item = line[line.index('. ')+2:].strip()
+                if item:
+                    changelog.append(item)
+        
+        # If we couldn't parse specific items, use the whole text (limited)
+        if not changelog and release_notes:
+            # Limit to first 500 chars and add ellipsis
+            summary = release_notes.strip()[:500]
+            if len(release_notes) > 500:
+                summary += "..."
+            changelog.append(summary)
+            
+        return changelog
+    
+    @staticmethod
+    def _compare_versions(version1: str, version2: str) -> bool:
+        """
+        Compare two semantic version strings
+        Returns True if version2 is newer than version1
+        """
+        try:
+            # Split versions into components
+            v1_parts = [int(x) for x in version1.split('.')]
+            v2_parts = [int(x) for x in version2.split('.')]
+            
+            # Ensure both have 3 components (major.minor.patch)
+            while len(v1_parts) < 3:
+                v1_parts.append(0)
+            while len(v2_parts) < 3:
+                v2_parts.append(0)
+            
+            # Compare version components
+            for i in range(3):
+                if v2_parts[i] > v1_parts[i]:
+                    return True
+                elif v2_parts[i] < v1_parts[i]:
+                    return False
+            
+            # Versions are equal
+            return False
+        except Exception as e:
+            logger.error(f"Error comparing versions: {e}", exc_info=True)
+            return False

py/services/civitai_client.py

@@ -4,7 +4,7 @@ import os
 import json
 import logging
 from email.parser import Parser
-from typing import Optional, Dict, Tuple
+from typing import Optional, Dict, Tuple, List
 from urllib.parse import unquote
 from ..utils.models import LoraMetadata
 
@@ -135,16 +135,15 @@ class CivitaiClient:
             print(f"Download Error: {str(e)}")
             return False
             
-    async def get_model_versions(self, model_id: str) -> Optional[Dict]:
-        """Fetch all versions of a model"""
+    async def get_model_versions(self, model_id: str) -> List[Dict]:
+        """Get all versions of a model with local availability info"""
         try:
-            session = await self.session
-            url = f"{self.base_url}/models/{model_id}"
-            async with session.get(url, headers=self.headers) as response:
-                if response.status == 200:
-                    data = await response.json()
-                    return data.get('modelVersions', [])
-                return None
+            session = await self.session  # 等待获取 session
+            async with session.get(f"{self.base_url}/models/{model_id}") as response:
+                if response.status != 200:
+                    return None
+                data = await response.json()
+                return data.get('modelVersions', [])
         except Exception as e:
             logger.error(f"Error fetching model versions: {e}")
             return None

py/services/file_monitor.py

@@ -86,26 +86,32 @@ class LoraFileHandler(FileSystemEventHandler):
             if not changes:
                 return
             
-            
             logger.info(f"Processing {len(changes)} file changes")
 
-            cache = await self.scanner.get_cached_data()  # 先完成可能的初始化
+            cache = await self.scanner.get_cached_data()
             needs_resort = False
-            new_folders = set()  # 用于收集新的文件夹
+            new_folders = set()
             
             for action, file_path in changes:
                 try:
                     if action == 'add':
-                        # 扫描新文件
+                        # Scan new file
                         lora_data = await self.scanner.scan_single_lora(file_path)
                         if lora_data:
                             cache.raw_data.append(lora_data)
-                            new_folders.add(lora_data['folder'])  # 收集新文件夹
+                            new_folders.add(lora_data['folder'])
+                            # Update hash index
+                            if 'sha256' in lora_data:
+                                self.scanner._hash_index.add_entry(
+                                    lora_data['sha256'], 
+                                    lora_data['file_path']
+                                )
                             needs_resort = True
                             
                     elif action == 'remove':
-                        # 从缓存中移除
+                        # Remove from cache and hash index
                         logger.info(f"Removing {file_path} from cache")
+                        self.scanner._hash_index.remove_by_path(file_path)
                         cache.raw_data = [
                             item for item in cache.raw_data 
                             if item['file_path'] != file_path
@@ -118,7 +124,7 @@ class LoraFileHandler(FileSystemEventHandler):
             if needs_resort:
                 await cache.resort()
                 
-                # 更新文件夹列表，包括新添加的文件夹
+                # Update folder list
                 all_folders = set(cache.folders) | new_folders
                 cache.folders = sorted(list(all_folders), key=lambda x: x.lower())
                 

py/services/lora_hash_index.py

@@ -0,0 +1,48 @@
+from typing import Dict, Optional
+import logging
+from dataclasses import dataclass
+
+logger = logging.getLogger(__name__)
+
+@dataclass
+class LoraHashIndex:
+    """Index for mapping LoRA file hashes to their file paths"""
+    
+    def __init__(self):
+        self._hash_to_path: Dict[str, str] = {}
+        
+    def add_entry(self, sha256: str, file_path: str) -> None:
+        """Add or update a hash -> path mapping"""
+        if not sha256 or not file_path:
+            return
+        self._hash_to_path[sha256] = file_path
+        
+    def remove_entry(self, sha256: str) -> None:
+        """Remove a hash entry"""
+        self._hash_to_path.pop(sha256, None)
+        
+    def remove_by_path(self, file_path: str) -> None:
+        """Remove entry by file path"""
+        for sha256, path in list(self._hash_to_path.items()):
+            if path == file_path:
+                del self._hash_to_path[sha256]
+                break
+                
+    def get_path(self, sha256: str) -> Optional[str]:
+        """Get file path for a given hash"""
+        return self._hash_to_path.get(sha256)
+        
+    def get_hash(self, file_path: str) -> Optional[str]:
+        """Get hash for a given file path"""
+        for sha256, path in self._hash_to_path.items():
+            if path == file_path:
+                return sha256
+        return None
+        
+    def has_hash(self, sha256: str) -> bool:
+        """Check if hash exists in index"""
+        return sha256 in self._hash_to_path
+        
+    def clear(self) -> None:
+        """Clear all entries"""
+        self._hash_to_path.clear() 

py/services/lora_scanner.py

@@ -10,6 +10,7 @@ from ..config import config
 from ..utils.file_utils import load_metadata, get_file_info
 from .lora_cache import LoraCache
 from difflib import SequenceMatcher
+from .lora_hash_index import LoraHashIndex
 
 logger = logging.getLogger(__name__)
 
@@ -28,6 +29,7 @@ class LoraScanner:
         # 确保初始化只执行一次
         if not hasattr(self, '_initialized'):
             self._cache: Optional[LoraCache] = None
+            self._hash_index = LoraHashIndex()
             self._initialization_lock = asyncio.Lock()
             self._initialization_task: Optional[asyncio.Task] = None
             self._initialized = True
@@ -85,9 +87,17 @@ class LoraScanner:
     async def _initialize_cache(self) -> None:
         """Initialize or refresh the cache"""
         try:
+            # Clear existing hash index
+            self._hash_index.clear()
+            
             # Scan for new data
             raw_data = await self.scan_all_loras()
             
+            # Build hash index
+            for lora_data in raw_data:
+                if 'sha256' in lora_data and 'file_path' in lora_data:
+                    self._hash_index.add_entry(lora_data['sha256'], lora_data['file_path'])
+            
             # Update cache
             self._cache = LoraCache(
                 raw_data=raw_data,
@@ -148,7 +158,7 @@ class LoraScanner:
 
     async def get_paginated_data(self, page: int, page_size: int, sort_by: str = 'name', 
                                folder: str = None, search: str = None, fuzzy: bool = False,
-                               recursive: bool = False):
+                               recursive: bool = False, base_models: list = None):
         """Get paginated and filtered lora data
         
         Args:
@@ -159,6 +169,7 @@ class LoraScanner:
             search: Search term
             fuzzy: Use fuzzy matching for search
             recursive: Include subfolders when folder filter is applied
+            base_models: List of base models to filter by
         """
         cache = await self.get_cached_data()
 
@@ -180,6 +191,13 @@ class LoraScanner:
                     if item['folder'] == folder
                 ]
         
+        # Apply base model filtering
+        if base_models and len(base_models) > 0:
+            filtered_data = [
+                item for item in filtered_data
+                if item.get('base_model') in base_models
+            ]
+        
         # 应用搜索过滤
         if search:
             if fuzzy:
@@ -408,20 +426,45 @@ class LoraScanner:
         
     async def update_single_lora_cache(self, original_path: str, new_path: str, metadata: Dict) -> bool:
         cache = await self.get_cached_data()
+        
+        # Remove old path from hash index if exists
+        self._hash_index.remove_by_path(original_path)
+        
+        # Remove the old entry from raw_data
         cache.raw_data = [
-                        item for item in cache.raw_data 
-                        if item['file_path'] != original_path
-                    ]
+            item for item in cache.raw_data 
+            if item['file_path'] != original_path
+        ]
+        
         if metadata:
-            metadata['folder'] = self._calculate_folder(new_path)
+            # If this is an update to an existing path (not a move), ensure folder is preserved
+            if original_path == new_path:
+                # Find the folder from existing entries or calculate it
+                existing_folder = next((item['folder'] for item in cache.raw_data 
+                                      if item['file_path'] == original_path), None)
+                if existing_folder:
+                    metadata['folder'] = existing_folder
+                else:
+                    metadata['folder'] = self._calculate_folder(new_path)
+            else:
+                # For moved files, recalculate the folder
+                metadata['folder'] = self._calculate_folder(new_path)
+            
+            # Add the updated metadata to raw_data
             cache.raw_data.append(metadata)
-            all_folders = set(cache.folders)
-            all_folders.add(metadata['folder'])
+            
+            # Update hash index with new path
+            if 'sha256' in metadata:
+                self._hash_index.add_entry(metadata['sha256'], new_path)
+            
+            # Update folders list
+            all_folders = set(item['folder'] for item in cache.raw_data)
             cache.folders = sorted(list(all_folders), key=lambda x: x.lower())
         
         # Resort cache
         await cache.resort()
-
+        
+        return True
 
     async def _update_metadata_paths(self, metadata_path: str, lora_path: str) -> Dict:
         """Update file paths in metadata file"""
@@ -449,3 +492,16 @@ class LoraScanner:
         except Exception as e:
             logger.error(f"Error updating metadata paths: {e}", exc_info=True)
 
+    # Add new methods for hash index functionality
+    def has_lora_hash(self, sha256: str) -> bool:
+        """Check if a LoRA with given hash exists"""
+        return self._hash_index.has_hash(sha256)
+        
+    def get_lora_path_by_hash(self, sha256: str) -> Optional[str]:
+        """Get file path for a LoRA by its hash"""
+        return self._hash_index.get_path(sha256)
+        
+    def get_lora_hash_by_path(self, file_path: str) -> Optional[str]:
+        """Get hash for a LoRA by its file path"""
+        return self._hash_index.get_hash(file_path)
+

py/utils/model_utils.py

@@ -2,14 +2,15 @@ from typing import Optional
 
 # Base model mapping based on version string
 BASE_MODEL_MAPPING = {
-    "sd-v1-5": "SD1.5",
-    "sd-v2-1": "SD2.1",
-    "sdxl": "SDXL",
-    "sd-v2": "SD2.0",
+    "sd-v1-5": "SD 1.5",
+    "sd-v2-1": "SD 2.1",
+    "sdxl": "SDXL 1.0",
+    "sd-v2": "SD 2.0",
     "flux1": "Flux.1 D",
     "flux.1 d": "Flux.1 D",
     "illustrious": "IL",
-    "pony": "Pony"
+    "pony": "Pony",
+    "Hunyuan Video": "Hunyuan Video"
 }
 
 def determine_base_model(version_string: Optional[str]) -> str:
@@ -22,4 +23,5 @@ def determine_base_model(version_string: Optional[str]) -> str:
         if key in version_lower:
             return value
     
-    return "Unknown" 
+    # TODO: Add more base model mappings
+    return version_string 

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

static/css/components/bulk.css

@@ -0,0 +1,283 @@
+/* Bulk Operations Styles */
+.bulk-operations-panel {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateY(100px) translateX(-50%);
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-base);
+    padding: 12px 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: var(--z-overlay);
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    opacity: 0;
+}
+
+.bulk-operations-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    gap: 20px; /* Increase space between count and buttons */
+}
+
+#selectedCount {
+    font-weight: 500;
+    background: var(--bg-color);
+    padding: 6px 12px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+    min-width: 80px;
+    text-align: center;
+}
+
+.bulk-operations-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.bulk-operations-actions button {
+    padding: 6px 12px;
+    border-radius: var(--border-radius-xs);
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.2s ease;
+}
+
+.bulk-operations-actions button:hover {
+    background: var(--lora-accent);
+    color: white;
+    border-color: var(--lora-accent);
+}
+
+/* Style for selected cards */
+.lora-card.selected {
+    box-shadow: 0 0 0 2px var(--lora-accent);
+    position: relative;
+}
+
+.lora-card.selected::after {
+    content: "✓";
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 24px;
+    height: 24px;
+    background: var(--lora-accent);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    z-index: 1;
+}
+
+/* Update bulk operations button to match others when active */
+#bulkOperationsBtn.active {
+    background: var(--lora-accent);
+    color: white;
+    border-color: var(--lora-accent);
+}
+
+@media (max-width: 768px) {
+    .bulk-operations-panel {
+        width: calc(100% - 40px);
+        left: 20px;
+        transform: none;
+        border-radius: var(--border-radius-sm);
+    }
+    
+    .bulk-operations-actions {
+        flex-wrap: wrap;
+    }
+}
+
+.bulk-operations-panel.visible {
+    transform: translateY(0) translateX(-50%);
+    opacity: 1;
+}
+
+/* Thumbnail Strip Styles */
+.selected-thumbnails-strip {
+    position: fixed;
+    bottom: 80px; /* Position above the bulk operations panel */
+    left: 50%;
+    transform: translateX(-50%) translateY(20px);
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-base);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    z-index: calc(var(--z-overlay) - 1); /* Just below the bulk panel z-index */
+    padding: 16px;
+    max-width: 80%;
+    width: auto;
+    transition: all 0.3s ease;
+    opacity: 0;
+    overflow: hidden;
+}
+
+.selected-thumbnails-strip.visible {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
+.thumbnails-container {
+    display: flex;
+    gap: 12px;
+    overflow-x: auto;
+    padding-bottom: 8px; /* Space for scrollbar */
+    max-width: 100%;
+    align-items: flex-start;
+}
+
+.selected-thumbnail {
+    position: relative;
+    width: 80px;
+    min-width: 80px; /* Prevent shrinking */
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+    overflow: hidden;
+    cursor: pointer;
+    background: var(--bg-color);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.selected-thumbnail:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.selected-thumbnail img,
+.selected-thumbnail video {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    display: block;
+}
+
+.thumbnail-name {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    font-size: 10px;
+    padding: 3px 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.thumbnail-remove {
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 10px;
+    opacity: 0.7;
+    transition: opacity 0.2s ease, background-color 0.2s ease;
+}
+
+.thumbnail-remove:hover {
+    opacity: 1;
+    background: var(--lora-error);
+}
+
+.strip-close-btn {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    width: 20px;
+    height: 20px;
+    background: none;
+    border: none;
+    color: var(--text-color);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+}
+
+.strip-close-btn:hover {
+    opacity: 1;
+}
+
+/* Style the selectedCount to indicate it's clickable */
+.selectable-count {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.selectable-count:hover {
+    background: var(--lora-border);
+}
+
+.dropdown-caret {
+    font-size: 12px;
+    visibility: hidden; /* Will be shown via JS when items are selected */
+}
+
+/* Scrollbar styling for the thumbnails container */
+.thumbnails-container::-webkit-scrollbar {
+    height: 6px;
+}
+
+.thumbnails-container::-webkit-scrollbar-track {
+    background: var(--bg-color);
+    border-radius: 3px;
+}
+
+.thumbnails-container::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 3px;
+}
+
+.thumbnails-container::-webkit-scrollbar-thumb:hover {
+    background: var(--lora-accent);
+}
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+    .selected-thumbnails-strip {
+        width: calc(100% - 40px);
+        max-width: none;
+        left: 20px;
+        transform: translateY(20px);
+        border-radius: var(--border-radius-sm);
+    }
+    
+    .selected-thumbnails-strip.visible {
+        transform: translateY(0);
+    }
+    
+    .selected-thumbnail {
+        width: 70px;
+        min-width: 70px;
+    }
+}

static/css/components/card.css

@@ -4,6 +4,8 @@
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Adjusted from 320px */
     gap: 12px; /* Reduced from var(--space-2) for tighter horizontal spacing */
     margin-top: var(--space-2);
+    padding-top: 4px; /* 添加顶部内边距，为悬停动画提供空间 */
+    padding-bottom: 4px; /* 添加底部内边距，为悬停动画提供空间 */
     max-width: 1400px; /* Container width control */
     margin-left: auto;
     margin-right: auto;

static/css/components/download-modal.css

@@ -0,0 +1,297 @@
+/* Download Modal Styles */
+.download-step {
+    margin: var(--space-2) 0;
+}
+
+.input-group {
+    margin-bottom: var(--space-2);
+}
+
+.input-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-color);
+}
+
+.input-group input,
+.input-group select {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    background: var(--bg-color);
+    color: var(--text-color);
+}
+
+.error-message {
+    color: var(--lora-error);
+    font-size: 0.9em;
+    margin-top: 4px;
+}
+
+/* Version List Styles */
+.version-list {
+    max-height: 400px;
+    overflow-y: auto;
+    margin: var(--space-2) 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 1px;
+}
+
+.version-item {
+    display: flex;
+    gap: var(--space-2);
+    padding: var(--space-2);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    background: var(--bg-color);
+    margin: 1px;
+    position: relative;
+}
+
+.version-item:hover {
+    border-color: var(--lora-accent);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+}
+
+.version-item.selected {
+    border: 2px solid var(--lora-accent);
+    background: oklch(var(--lora-accent) / 0.05);
+}
+
+.version-thumbnail {
+    width: 80px;
+    height: 80px;
+    flex-shrink: 0;
+    border-radius: var(--border-radius-xs);
+    overflow: hidden;
+    background: var(--bg-color);
+}
+
+.version-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.version-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+}
+
+.version-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-2);
+}
+
+.version-content h3 {
+    margin: 0;
+    font-size: 1.1em;
+    color: var(--text-color);
+    flex: 1;
+}
+
+.version-info {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    font-size: 0.9em;
+}
+
+.version-info .base-model {
+    background: oklch(var(--lora-accent) / 0.1);
+    color: var(--lora-accent);
+    padding: 2px 8px;
+    border-radius: var(--border-radius-xs);
+}
+
+.version-meta {
+    display: flex;
+    gap: 12px;
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.7;
+}
+
+.version-meta span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* Local Version Badge */
+.local-badge {
+    display: inline-flex;
+    align-items: center;
+    background: var(--lora-accent);
+    color: var(--lora-text);
+    padding: 4px 8px;
+    border-radius: var(--border-radius-xs);
+    font-size: 0.8em;
+    font-weight: 500;
+    white-space: nowrap;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.local-badge i {
+    margin-right: 4px;
+    font-size: 0.9em;
+}
+
+.local-path {
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    padding: var(--space-1);
+    margin-top: 4px;
+    font-size: 0.9em;
+    color: var(--text-color);
+    white-space: normal;
+    word-break: break-all;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+    min-width: 200px;
+    max-width: 300px;
+}
+
+.local-badge:hover .local-path {
+    display: block;
+}
+
+/* Folder Browser Styles */
+.folder-browser {
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    padding: var(--space-1);
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.folder-item {
+    padding: 8px;
+    cursor: pointer;
+    border-radius: var(--border-radius-xs);
+    transition: background-color 0.2s;
+}
+
+.folder-item:hover {
+    background: var(--lora-surface);
+}
+
+.folder-item.selected {
+    background: oklch(var(--lora-accent) / 0.1);
+    border: 1px solid var(--lora-accent);
+}
+
+/* Path Preview Styles */
+.path-preview {
+    margin-bottom: var(--space-3);
+    padding: var(--space-2);
+    background: var(--bg-color);
+    border-radius: var(--border-radius-sm);
+    border: 1px dashed var(--border-color);
+}
+
+.path-preview label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-color);
+    font-size: 0.9em;
+    opacity: 0.8;
+}
+
+.path-display {
+    padding: var(--space-1);
+    color: var(--text-color);
+    font-family: monospace;
+    font-size: 0.9em;
+    line-height: 1.4;
+    white-space: pre-wrap;
+    word-break: break-all;
+    opacity: 0.85;
+    background: var(--lora-surface);
+    border-radius: var(--border-radius-xs);
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .version-item {
+    background: var(--lora-surface);
+}
+
+[data-theme="dark"] .local-path {
+    background: var(--lora-surface);
+    border-color: var(--lora-border);
+}
+
+/* Add disabled button styles */
+.primary-btn.disabled {
+    background-color: var(--border-color);
+    color: var(--text-color);
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+/* Enhance the local badge to make it more noticeable */
+.version-item.exists-locally {
+    background: oklch(var(--lora-accent) / 0.05);
+    border-left: 4px solid var(--lora-accent);
+}
+
+.local-badge {
+    display: inline-flex;
+    align-items: center;
+    background: var(--lora-accent);
+    color: var(--lora-text);
+    padding: 4px 8px;
+    border-radius: var(--border-radius-xs);
+    font-size: 0.8em;
+    font-weight: 500;
+    white-space: nowrap;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.local-badge i {
+    margin-right: 4px;
+    font-size: 0.9em;
+}
+
+.local-path {
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    padding: var(--space-1);
+    margin-top: 4px;
+    font-size: 0.9em;
+    color: var(--text-color);
+    white-space: normal;
+    word-break: break-all;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+    min-width: 200px;
+    max-width: 300px;
+}
+
+.local-badge:hover .local-path {
+    display: block;
+} 

static/css/components/lora-modal.css

@@ -0,0 +1,482 @@
+/* Lora Modal Header */
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-3);
+    padding-bottom: var(--space-2);
+    border-bottom: 1px solid var(--lora-border);
+}
+
+/* Info Grid */
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-2);
+    margin-bottom: var(--space-3);
+}
+
+.info-item {
+    padding: var(--space-2);
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-sm);
+}
+
+/* 调整深色主题下的样式 */
+[data-theme="dark"] .info-item {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
+.info-item.full-width {
+    grid-column: 1 / -1;
+}
+
+.info-item label {
+    display: block;
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.8;
+    margin-bottom: 4px;
+}
+
+.info-item span {
+    color: var(--text-color);
+    word-break: break-word;
+}
+
+.info-item.usage-tips,
+.info-item.notes {
+    grid-column: 1 / -1 !important; /* Make notes section full width */
+}
+
+/* Add specific styles for notes content */
+.info-item.notes .editable-field [contenteditable] {
+    min-height: 60px; /* Increase height for multiple lines */
+    max-height: 150px; /* Limit maximum height */
+    overflow-y: auto; /* Add scrolling for long content */
+    white-space: pre-wrap; /* Preserve line breaks */
+    line-height: 1.5; /* Improve readability */
+    padding: 8px 12px; /* Slightly increase padding */
+}
+
+.file-path {
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
+.description-text {
+    line-height: 1.5;
+    max-height: 100px;
+    overflow-y: auto;
+}
+
+/* Showcase Section */
+.showcase-section {
+    position: relative;
+    margin-top: var(--space-4);
+}
+
+.carousel {
+    transition: max-height 0.3s ease-in-out;
+    overflow: hidden;
+}
+
+.carousel.collapsed {
+    max-height: 0;
+}
+
+.carousel-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.media-wrapper {
+    position: relative;
+    width: 100%;
+    background: var(--lora-surface);
+    margin-bottom: var(--space-2);
+}
+
+.media-wrapper:last-child {
+    margin-bottom: 0;
+}
+
+.media-wrapper img,
+.media-wrapper video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+/* Scroll Indicator */
+.scroll-indicator {
+    cursor: pointer;
+    padding: var(--space-2);
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: var(--space-2);
+    transition: background-color 0.2s, transform 0.2s;
+}
+
+.scroll-indicator:hover {
+    background: oklch(var(--lora-accent) / 0.1);
+    transform: translateY(-1px);
+}
+
+.scroll-indicator span {
+    font-size: 0.9em;
+    color: var(--text-color);
+}
+
+.lazy {
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.lazy[src] {
+    opacity: 1;
+}
+
+/* Update Trigger Words styles */
+.info-item.trigger-words {
+    padding: var(--space-2);
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-sm);
+}
+
+/* 调整 trigger words 样式 */
+[data-theme="dark"] .info-item.trigger-words {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
+.trigger-words-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: flex-start;
+    margin-top: var(--space-1);
+}
+
+/* Update Trigger Words styles */
+.trigger-word-tag {
+    display: inline-flex;
+    align-items: center;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    padding: 4px 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    gap: 6px;
+}
+
+/* Update trigger word content color to use theme accent */
+.trigger-word-content {
+    color: var(--lora-accent) !important; /* Override general span color */
+    font-size: 0.85em;
+    line-height: 1.4;
+    word-break: break-word;
+}
+
+/* Keep the hover effect using accent color */
+.trigger-word-tag:hover {
+    background: oklch(var(--lora-accent) / 0.1);
+    border-color: var(--lora-accent);
+}
+
+.trigger-word-copy {
+    display: flex;
+    align-items: center;
+    color: var(--text-color);
+    opacity: 0.5;
+    flex-shrink: 0;
+    transition: opacity 0.2s;
+}
+
+/* Editable Fields */
+.editable-field {
+    position: relative;
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.editable-field [contenteditable] {
+    flex: 1;
+    min-height: 24px;
+    padding: 4px 8px;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    font-size: 0.9em;
+    line-height: 1.4;
+    color: var(--text-color);
+    transition: border-color 0.2s;
+    word-break: break-word;
+}
+
+.editable-field [contenteditable]:focus {
+    outline: none;
+    border-color: var(--lora-accent);
+    background: var(--bg-color);
+}
+
+.editable-field [contenteditable]:empty::before {
+    content: attr(data-placeholder);
+    color: var(--text-color);
+    opacity: 0.5;
+}
+
+.save-btn {
+    padding: 4px 8px;
+    background: var(--lora-accent);
+    border: none;
+    border-radius: var(--border-radius-xs);
+    color: white;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.save-btn:hover {
+    opacity: 0.9;
+}
+
+.save-btn i {
+    font-size: 0.9em;
+}
+
+@media (max-width: 640px) {
+    .info-item.usage-tips,
+    .info-item.notes {
+        grid-column: 1 / -1;
+    }
+}
+
+/* 修改 back-to-top 按钮样式，使其固定在 modal 内部 */
+.modal-content .back-to-top {
+    position: sticky; /* 改用 sticky 定位 */
+    float: right; /* 使用 float 确保按钮在右侧 */
+    bottom: 20px; /* 距离底部的距离 */
+    margin-right: 20px; /* 右侧间距 */
+    margin-top: -56px; /* 负边距确保不占用额外空间 */
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    transition: all 0.3s ease;
+    z-index: 10;
+}
+
+.modal-content .back-to-top.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.modal-content .back-to-top:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* Update Preset Controls styles */
+.preset-controls {
+    display: flex;
+    gap: var(--space-2);
+    margin-bottom: var(--space-2);
+}
+
+.preset-controls select,
+.preset-controls input {
+    padding: var(--space-1);
+    background: var(--bg-color);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-xs);
+    color: var(--text-color);
+}
+
+.preset-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1);
+}
+
+.preset-tag {
+    display: flex;
+    align-items: center;
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-xs);
+    padding: calc(var(--space-1) * 0.5) var(--space-1);
+    gap: var(--space-1);
+    transition: all 0.2s ease;
+}
+
+.preset-tag span {
+    color: var(--lora-accent);
+    font-size: 0.9em;
+}
+
+.preset-tag i {
+    color: var(--text-color);
+    opacity: 0.5;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.preset-tag:hover {
+    background: oklch(var(--lora-accent) / 0.1);
+    border-color: var(--lora-accent);
+}
+
+.preset-tag i:hover {
+    color: var(--lora-error);
+    opacity: 1;
+}
+
+.add-preset-btn {
+    padding: calc(var(--space-1) * 0.5) var(--space-2);
+    background: var(--lora-accent);
+    color: var(--lora-text);
+    border: none;
+    border-radius: var(--border-radius-xs);
+    cursor: pointer;
+    transition: opacity 0.2s;
+}
+
+.add-preset-btn:hover {
+    opacity: 0.9;
+}
+
+/* File name copy styles */
+.file-name-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--border-radius-xs);
+    transition: background-color 0.2s;
+}
+
+.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-wrapper:hover i {
+    opacity: 1;
+    color: var(--lora-accent);
+}
+
+/* Base Model and Size combined styles */
+.info-item.base-size {
+    display: flex;
+    gap: var(--space-3);
+}
+
+.base-wrapper {
+    flex: 2;  /* 分配更多空间给base model */
+}
+
+.size-wrapper {
+    flex: 1;
+    border-left: 1px solid var(--lora-border);
+    padding-left: var(--space-3);
+}
+
+.base-wrapper label,
+.size-wrapper label {
+    display: block;
+    margin-bottom: 4px;
+}
+
+.size-wrapper span {
+    font-family: monospace;
+    font-size: 0.9em;
+    opacity: 0.9;
+}
+
+/* Model name field styles - complete replacement */
+.model-name-field {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: calc(100% - 40px); /* Reduce width to avoid overlap with close button */
+    position: relative; /* Add position relative for absolute positioning of save button */
+}
+
+.model-name-field h2 {
+    margin: 0;
+    padding: var(--space-1);
+    border-radius: var(--border-radius-xs);
+    transition: background-color 0.2s;
+    flex: 1;
+    font-size: 1.5em !important; /* Increased and forced size */
+    font-weight: 600; /* Make it bolder */
+    min-height: 1.5em;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    line-height: 1.2;
+    color: var(--text-color); /* Ensure correct color */
+}
+
+.model-name-field h2:hover {
+    background: oklch(var(--lora-accent) / 0.1);
+    cursor: text;
+}
+
+.model-name-field h2:focus {
+    outline: none;
+    background: var(--bg-color);
+    border: 1px solid var(--lora-accent);
+}
+
+.model-name-field .save-btn {
+    position: absolute;
+    right: 10px; /* Position closer to the end of the field */
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.model-name-field:hover .save-btn,
+.model-name-field h2:focus ~ .save-btn {
+    opacity: 1;
+}
+
+/* Ensure close button is accessible */
+.modal-content .close {
+    z-index: 10; /* Ensure close button is above other elements */
+}

static/css/components/modal.css

@@ -6,7 +6,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.2); /* 调整为更淡的半透明黑色 */
     z-index: var(--z-modal);
     overflow: hidden; /* 改为 hidden，防止双滚动条 */
 }
@@ -29,7 +29,10 @@ body.modal-open {
     border-radius: var(--border-radius-base);
     padding: var(--space-3);
     border: 1px solid var(--lora-border);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    box-shadow: 
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06),
+        0 10px 15px -3px rgba(0, 0, 0, 0.05);
     overflow-y: auto;
     overflow-x: hidden; /* 防止水平滚动条 */
 }
@@ -154,71 +157,6 @@ body.modal-open {
     font-size: 1.5em;
 }
 
-/* Download Modal Styles */
-.download-step {
-    margin: var(--space-2) 0;
-}
-
-.input-group {
-    margin-bottom: var(--space-2);
-}
-
-.input-group label {
-    display: block;
-    margin-bottom: 8px;
-    color: var(--text-color);
-}
-
-.input-group input,
-.input-group select {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-xs);
-    background: var(--bg-color);
-    color: var(--text-color);
-}
-
-.error-message {
-    color: var(--lora-error);
-    font-size: 0.9em;
-    margin-top: 4px;
-}
-
-.version-list {
-    max-height: 400px;
-    overflow-y: auto;
-    margin: var(--space-2) 0;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding: 1px;
-}
-
-.version-item {
-    display: flex;
-    gap: var(--space-2);
-    padding: var(--space-2);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    background: var(--bg-color);
-    margin: 1px;
-    position: relative;
-}
-
-.version-item:hover {
-    border-color: var(--lora-accent);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    z-index: 1;
-}
-
-.version-item.selected {
-    border-color: var(--lora-accent);
-    background: oklch(var(--lora-accent) / 0.1);
-}
-
 .close {
     position: absolute;
     top: var(--space-2);
@@ -236,108 +174,6 @@ body.modal-open {
     opacity: 1;
 }
 
-.version-list {
-    max-height: 400px;
-    overflow-y: auto;
-    margin: var(--space-2) 0;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding: 1px;  /* Add padding to prevent border clipping */
-}
-
-.version-item { 
-    display: flex;
-    gap: var(--space-2);
-    padding: var(--space-2);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    background: var(--bg-color);  /* Add background color */
-    margin: 1px;  /* Add margin to ensure hover effect visibility */
-    position: relative;  /* Add position context */
-}
-
-.version-item:hover {
-    border-color: var(--lora-accent);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* Replace transform with shadow */
-    z-index: 1;  /* Ensure hover state appears above other items */
-}
-
-.version-item.selected {
-    border-color: var(--lora-accent);
-    background: oklch(var(--lora-accent) / 0.1);
-}
-
-.version-thumbnail {
-    width: 80px;
-    height: 80px;
-    flex-shrink: 0;
-    border-radius: var(--border-radius-xs);
-    overflow: hidden;
-    background: var(--bg-color);
-}
-
-.version-thumbnail img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.version-content {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.version-content h3 {
-    margin: 0;
-    font-size: 1.1em;
-    color: var(--text-color);
-}
-
-.version-info {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: center;
-    font-size: 0.9em;
-    color: var(--text-color);
-    opacity: 0.8;
-}
-
-.version-info .base-model {
-    background: oklch(var(--lora-accent) / 0.1);
-    color: var(--lora-accent);
-    padding: 2px 8px;
-    border-radius: var(--border-radius-xs);
-}
-
-.version-meta {
-    display: flex;
-    gap: 12px;
-    font-size: 0.85em;
-    color: var(--text-color);
-    opacity: 0.7;
-}
-
-.version-meta span {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.folder-browser {
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-xs);
-    padding: var(--space-1);
-    max-height: 200px;
-    overflow-y: auto;
-}
-
 /* Settings styles */
 .settings-toggle {
     width: 36px;
@@ -462,514 +298,29 @@ body.modal-open {
     margin-top: 4px;
 }
 
-.folder-item {
-    padding: 8px;
-    cursor: pointer;
-    border-radius: var(--border-radius-xs);
-    transition: background-color 0.2s;
-}
-
-.folder-item:hover {
-    background: var(--lora-surface);
-}
-
-.folder-item.selected {
-    background: oklch(var(--lora-accent) / 0.1);
-    border: 1px solid var(--lora-accent);
-}
-
-/* Path Preview Styles */
+/* 统一各个 section 的样式 */
+.support-section,
+.changelog-section,
+.update-info,
+.info-item,
 .path-preview {
-    margin-bottom: var(--space-3);
-    padding: var(--space-2);
-    background: var(--bg-color);
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: var(--border-radius-sm);
-    border: 1px dashed var(--border-color);
-}
-
-.path-preview label {
-    display: block;
-    margin-bottom: 8px;
-    color: var(--text-color);
-    font-size: 0.9em;
-    opacity: 0.8;
-}
-
-.path-display {
-    padding: var(--space-1);
-    color: var(--text-color);
-    font-family: monospace;
-    font-size: 0.9em;
-    line-height: 1.4;
-    white-space: pre-wrap;
-    word-break: break-all;
-    opacity: 0.85;
-    background: var(--lora-surface);
-    border-radius: var(--border-radius-xs);
-}
-
-.path-text {
-    color: var(--text-color);
-}
-
-.path-preview {
-    margin-top: var(--space-2);
     padding: var(--space-2);
+}
+
+/* 深色主题统一样式 */
+[data-theme="dark"] .modal-content {
     background: var(--lora-surface);
     border: 1px solid var(--lora-border);
-    border-radius: var(--border-radius-sm);
 }
 
-.path-preview label {
-    display: block;
-    margin-bottom: 8px;
-    color: var(--text-color);
-    font-size: 0.9em;
-}
-
-.path-display {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: var(--space-1);
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-xs);
-    color: var(--text-color);
-    font-family: monospace;
-    font-size: 0.9em;
-    overflow-x: auto;
-    white-space: nowrap;
-}
-
-.path-display i {
-    color: var(--lora-accent);
-    opacity: 0.8;
-}
-
-.path-text {
-    color: var(--text-color);
-    opacity: 0.9;
-}
-
-/* Lora Modal Header */
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--space-3);
-    padding-bottom: var(--space-2);
-    border-bottom: 1px solid var(--lora-border);
-}
-
-/* Info Grid */
-.info-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-2);
-    margin-bottom: var(--space-3);
-}
-
-.info-item {
-    padding: var(--space-2);
-    background: var(--lora-surface);
+[data-theme="dark"] .support-section,
+[data-theme="dark"] .changelog-section,
+[data-theme="dark"] .update-info,
+[data-theme="dark"] .info-item,
+[data-theme="dark"] .path-preview {
+    background: rgba(255, 255, 255, 0.03);
     border: 1px solid var(--lora-border);
-    border-radius: var(--border-radius-sm);
-}
-
-.info-item.full-width {
-    grid-column: 1 / -1;
-}
-
-.info-item label {
-    display: block;
-    font-size: 0.85em;
-    color: var(--text-color);
-    opacity: 0.8;
-    margin-bottom: 4px;
-}
-
-.info-item span {
-    color: var(--text-color);
-    word-break: break-word;
-}
-
-.info-item.usage-tips,
-.info-item.notes {
-    grid-column: 1 / -1 !important; /* Make notes section full width */
-}
-
-/* Add specific styles for notes content */
-.info-item.notes .editable-field [contenteditable] {
-    min-height: 60px; /* Increase height for multiple lines */
-    max-height: 150px; /* Limit maximum height */
-    overflow-y: auto; /* Add scrolling for long content */
-    white-space: pre-wrap; /* Preserve line breaks */
-    line-height: 1.5; /* Improve readability */
-    padding: 8px 12px; /* Slightly increase padding */
-}
-
-.file-path {
-    font-family: monospace;
-    font-size: 0.9em;
-}
-
-.description-text {
-    line-height: 1.5;
-    max-height: 100px;
-    overflow-y: auto;
-}
-
-/* Showcase Section */
-.showcase-section {
-    position: relative;
-    margin-top: var(--space-4);
-}
-
-.carousel {
-    transition: max-height 0.3s ease-in-out;
-    overflow: hidden;
-}
-
-.carousel.collapsed {
-    max-height: 0;
-}
-
-.carousel-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-}
-
-.media-wrapper {
-    position: relative;
-    width: 100%;
-    background: var(--lora-surface);
-    margin-bottom: var(--space-2);
-}
-
-.media-wrapper:last-child {
-    margin-bottom: 0;
-}
-
-.media-wrapper img,
-.media-wrapper video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-}
-
-/* Scroll Indicator */
-.scroll-indicator {
-    cursor: pointer;
-    padding: var(--space-2);
-    background: var(--lora-surface);
-    border: 1px solid var(--lora-border);
-    border-radius: var(--border-radius-sm);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    margin-bottom: var(--space-2);
-    transition: background-color 0.2s, transform 0.2s;
-}
-
-.scroll-indicator:hover {
-    background: oklch(var(--lora-accent) / 0.1);
-    transform: translateY(-1px);
-}
-
-.scroll-indicator span {
-    font-size: 0.9em;
-    color: var(--text-color);
-}
-
-.lazy {
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.lazy[src] {
-    opacity: 1;
-}
-
-/* Update Trigger Words styles */
-.info-item.trigger-words {
-    padding: var(--space-2);
-    background: var(--lora-surface);
-    border: 1px solid var(--lora-border);
-    border-radius: var(--border-radius-sm);
-}
-
-.trigger-words-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: flex-start;
-    margin-top: var(--space-1);
-}
-
-/* Update Trigger Words styles */
-.trigger-word-tag {
-    display: inline-flex;
-    align-items: center;
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-xs);
-    padding: 4px 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    gap: 6px;
-}
-
-/* Update trigger word content color to use theme accent */
-.trigger-word-content {
-    color: var(--lora-accent) !important; /* Override general span color */
-    font-size: 0.85em;
-    line-height: 1.4;
-    word-break: break-word;
-}
-
-/* Keep the hover effect using accent color */
-.trigger-word-tag:hover {
-    background: oklch(var(--lora-accent) / 0.1);
-    border-color: var(--lora-accent);
-}
-
-.trigger-word-copy {
-    display: flex;
-    align-items: center;
-    color: var(--text-color);
-    opacity: 0.5;
-    flex-shrink: 0;
-    transition: opacity 0.2s;
-}
-
-/* Editable Fields */
-.editable-field {
-    position: relative;
-    display: flex;
-    gap: 8px;
-    align-items: flex-start;
-}
-
-.editable-field [contenteditable] {
-    flex: 1;
-    min-height: 24px;
-    padding: 4px 8px;
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-xs);
-    font-size: 0.9em;
-    line-height: 1.4;
-    color: var(--text-color);
-    transition: border-color 0.2s;
-    word-break: break-word;
-}
-
-.editable-field [contenteditable]:focus {
-    outline: none;
-    border-color: var(--lora-accent);
-    background: var(--bg-color);
-}
-
-.editable-field [contenteditable]:empty::before {
-    content: attr(data-placeholder);
-    color: var(--text-color);
-    opacity: 0.5;
-}
-
-.save-btn {
-    padding: 4px 8px;
-    background: var(--lora-accent);
-    border: none;
-    border-radius: var(--border-radius-xs);
-    color: white;
-    cursor: pointer;
-    transition: opacity 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.save-btn:hover {
-    opacity: 0.9;
-}
-
-.save-btn i {
-    font-size: 0.9em;
-}
-
-@media (max-width: 640px) {
-    .info-item.usage-tips,
-    .info-item.notes {
-        grid-column: 1 / -1;
-    }
-}
-
-/* 修改 back-to-top 按钮样式，使其固定在 modal 内部 */
-.modal-content .back-to-top {
-    position: sticky; /* 改用 sticky 定位 */
-    float: right; /* 使用 float 确保按钮在右侧 */
-    bottom: 20px; /* 距离底部的距离 */
-    margin-right: 20px; /* 右侧间距 */
-    margin-top: -56px; /* 负边距确保不占用额外空间 */
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    color: var(--text-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(10px);
-    transition: all 0.3s ease;
-    z-index: 10;
-}
-
-.modal-content .back-to-top.visible {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-}
-
-.modal-content .back-to-top:hover {
-    background: var(--lora-accent);
-    color: white;
-    transform: translateY(-2px);
-}
-
-/* Update Preset Controls styles */
-.preset-controls {
-    display: flex;
-    gap: var(--space-2);
-    margin-bottom: var(--space-2);
-}
-
-.preset-controls select,
-.preset-controls input {
-    padding: var(--space-1);
-    background: var(--bg-color);
-    border: 1px solid var(--lora-border);
-    border-radius: var(--border-radius-xs);
-    color: var(--text-color);
-}
-
-.preset-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-1);
-}
-
-.preset-tag {
-    display: flex;
-    align-items: center;
-    background: var(--lora-surface);
-    border: 1px solid var(--lora-border);
-    border-radius: var(--border-radius-xs);
-    padding: calc(var(--space-1) * 0.5) var(--space-1);
-    gap: var(--space-1);
-    transition: all 0.2s ease;
-}
-
-.preset-tag span {
-    color: var(--lora-accent);
-    font-size: 0.9em;
-}
-
-.preset-tag i {
-    color: var(--text-color);
-    opacity: 0.5;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.preset-tag:hover {
-    background: oklch(var(--lora-accent) / 0.1);
-    border-color: var(--lora-accent);
-}
-
-.preset-tag i:hover {
-    color: var(--lora-error);
-    opacity: 1;
-}
-
-.add-preset-btn {
-    padding: calc(var(--space-1) * 0.5) var(--space-2);
-    background: var(--lora-accent);
-    color: var(--lora-text);
-    border: none;
-    border-radius: var(--border-radius-xs);
-    cursor: pointer;
-    transition: opacity 0.2s;
-}
-
-.add-preset-btn:hover {
-    opacity: 0.9;
-}
-
-/* File name copy styles */
-.file-name-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    padding: 4px;
-    border-radius: var(--border-radius-xs);
-    transition: background-color 0.2s;
-}
-
-.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-wrapper:hover i {
-    opacity: 1;
-    color: var(--lora-accent);
-}
-
-/* Location and Size combined styles */
-.info-item.location-size {
-    display: block;
-}
-
-/* Base Model and Size combined styles */
-.info-item.base-size {
-    display: flex;
-    gap: var(--space-3);
-}
-
-.base-wrapper {
-    flex: 2;  /* 分配更多空间给base model */
-}
-
-.size-wrapper {
-    flex: 1;
-    border-left: 1px solid var(--lora-border);
-    padding-left: var(--space-3);
-}
-
-.base-wrapper label,
-.size-wrapper label {
-    display: block;
-    margin-bottom: 4px;
-}
-
-.size-wrapper span {
-    font-family: monospace;
-    font-size: 0.9em;
-    opacity: 0.9;
 }

static/css/components/search-filter.css

@@ -0,0 +1,279 @@
+/* Search Container Styles */
+.search-container {
+    position: relative;
+    width: 250px;
+    margin-left: auto;
+    flex-shrink: 0; /* 防止搜索框被压缩 */
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* 调整搜索框样式以匹配其他控件 */
+.search-container input {
+    width: 100%;
+    padding: 6px 75px 6px 12px; /* Increased right padding to accommodate both buttons */
+    border: 1px solid oklch(65% 0.02 256); /* 更深的边框颜色，提高对比度 */
+    border-radius: var(--border-radius-sm);
+    background: var(--lora-surface);
+    color: var(--text-color);
+    font-size: 0.9em;
+    height: 32px;
+    box-sizing: border-box; /* 确保padding不会增加总宽度 */
+}
+
+.search-container input:focus {
+    outline: none;
+    border-color: var(--lora-accent);
+}
+
+.search-icon {
+    position: absolute;
+    right: 80px; /* Adjusted to make space for both toggle buttons */
+    top: 50%;
+    transform: translateY(-50%);
+    color: oklch(var(--text-color) / 0.5);
+    pointer-events: none;
+    line-height: 1; /* 防止图标影响容器高度 */
+}
+
+/* 修改清空按钮样式 */
+.search-clear {
+    position: absolute;
+    right: 105px; /* Adjusted further left to avoid overlapping */
+    top: 50%;
+    transform: translateY(-50%);
+    color: oklch(var(--text-color) / 0.5);
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 4px 8px; /* 增加点击区域 */
+    display: none; /* 默认隐藏 */
+    line-height: 1;
+    transition: color 0.2s ease;
+}
+
+.search-clear:hover {
+    color: var(--lora-accent);
+}
+
+.search-clear.visible {
+    display: block;
+}
+
+.search-mode-toggle {
+    background: var(--lora-surface);
+    border: 1px solid oklch(65% 0.02 256);
+    border-radius: var(--border-radius-sm);
+    color: var(--text-color);
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.search-mode-toggle:hover {
+    background-color: var(--lora-surface-hover, oklch(95% 0.02 256));
+    color: var(--lora-accent);
+    border-color: var(--lora-accent);
+}
+
+.search-mode-toggle.active {
+    background-color: oklch(95% 0.05 256); /* Lighter background that's more consistent */
+    color: var(--lora-accent);
+    border-color: var(--lora-accent);
+}
+
+.search-mode-toggle i {
+    font-size: 0.9em;
+}
+
+.search-filter-toggle {
+    background: var(--lora-surface);
+    border: 1px solid oklch(65% 0.02 256);
+    border-radius: var(--border-radius-sm);
+    color: var(--text-color);
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.search-filter-toggle:hover {
+    background-color: var(--lora-surface-hover, oklch(95% 0.02 256));
+    color: var(--lora-accent);
+    border-color: var(--lora-accent);
+}
+
+.search-filter-toggle.active {
+    background-color: oklch(95% 0.05 256); /* Lighter background that's more consistent */
+    color: var(--lora-accent);
+    border-color: var(--lora-accent);
+}
+
+.search-filter-toggle i {
+    font-size: 0.9em;
+}
+
+.filter-badge {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    background-color: var(--lora-accent);
+    color: white;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    font-size: 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+}
+
+/* Filter Panel Styles */
+.filter-panel {
+    position: absolute;
+    top: 140px; /* Adjust to be closer to the filter button */
+    right: 20px;
+    width: 300px;
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-base);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    z-index: var(--z-overlay); /* Increase z-index to be above cards */
+    padding: 16px;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    transform-origin: top right;
+    max-height: calc(100vh - 160px);
+    overflow-y: auto;
+}
+
+.filter-panel.hidden {
+    opacity: 0;
+    transform: scale(0.95);
+    pointer-events: none;
+}
+
+.filter-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.filter-header h3 {
+    margin: 0;
+    font-size: 18px;
+    color: var(--text-color);
+}
+
+.close-filter-btn {
+    background: none;
+    border: none;
+    color: var(--text-color);
+    cursor: pointer;
+    font-size: 16px;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.close-filter-btn:hover {
+    color: var(--lora-accent);
+}
+
+.filter-section {
+    margin-bottom: 16px;
+}
+
+.filter-section h4 {
+    margin: 0 0 8px 0;
+    font-size: 14px;
+    color: var(--text-color);
+    opacity: 0.8;
+}
+
+.filter-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.filter-tag {
+    padding: 4px 10px;
+    border-radius: var(--border-radius-sm);
+    background-color: var(--lora-surface);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    user-select: none; /* Prevent text selection */
+    -webkit-user-select: none; /* For Safari */
+    -moz-user-select: none; /* For Firefox */
+    -ms-user-select: none; /* For IE/Edge */
+}
+
+.filter-tag:hover {
+    background-color: var(--lora-surface-hover);
+}
+
+.filter-tag.active {
+    background-color: var(--lora-accent);
+    color: white;
+    border-color: var(--lora-accent);
+}
+
+/* Filter actions */
+.filter-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 16px;
+    gap: 8px;
+}
+
+.clear-filters-btn {
+    background-color: transparent;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    padding: 6px 12px;
+    border-radius: var(--border-radius-sm);
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    width: 100%;
+}
+
+.clear-filters-btn:hover {
+    background-color: var(--lora-surface-hover);
+}
+
+/* Mobile Responsive Styles */
+@media (max-width: 768px) {
+    .search-container {
+        width: 100%;
+        order: -1;
+        margin-left: 0;
+        margin-right: 0;
+    }
+    
+    .filter-panel {
+        width: calc(100% - 40px);
+        left: 20px;
+        right: 20px;
+        top: 140px;
+    }
+} 

static/css/components/support-modal.css

@@ -0,0 +1,184 @@
+/* Support Modal Styles */
+.support-modal {
+    max-width: 550px;
+}
+
+.support-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-3);
+    padding-bottom: var(--space-2);
+    border-bottom: 1px solid var(--lora-border);
+}
+
+.support-icon {
+    font-size: 1.8em;
+    color: var(--lora-error);
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.support-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.support-content > p {
+    font-size: 1.1em;
+    text-align: center;
+    margin-bottom: var(--space-1);
+}
+
+.support-section {
+    background: rgba(0, 0, 0, 0.02);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: var(--border-radius-sm);
+    padding: var(--space-2);
+    margin-bottom: var(--space-2);
+}
+
+.support-section h3 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 0;
+    margin-bottom: var(--space-1);
+    font-size: 1.1em;
+    color: var(--lora-accent);
+}
+
+.support-section h3 i {
+    opacity: 0.8;
+}
+
+.support-section p {
+    margin-top: 4px;
+    margin-bottom: var(--space-1);
+    color: var(--text-color);
+    opacity: 0.9;
+}
+
+.support-links {
+    display: flex;
+    gap: var(--space-2);
+    margin-top: var(--space-1);
+}
+
+.social-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-sm);
+    text-decoration: none;
+    color: var(--text-color);
+    transition: all 0.2s ease;
+}
+
+.social-link:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+.kofi-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 10px 20px;
+    background: #FF5E5B;
+    color: white;
+    border-radius: var(--border-radius-sm);
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    margin-top: var(--space-1);
+}
+
+.kofi-button:hover {
+    background: #E04946;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.support-footer {
+    text-align: center;
+    margin-top: var(--space-1);
+    font-style: italic;
+    color: var(--text-color);
+}
+
+/* Add support toggle button style */
+.support-toggle {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    color: var(--lora-error);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.support-toggle:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+.support-toggle i {
+    font-size: 1.1em;
+    position: relative;
+    top: 1px;
+    left: -0.5px;
+}
+
+@media (max-width: 480px) {
+    .support-links {
+        flex-direction: column;
+    }
+}
+
+/* Civitai link styles */
+.civitai-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.civitai-icon {
+    width: 20px;
+    height: 20px;
+    color: #1b98e4; /* Civitai brand blue color */
+}
+
+.social-link:hover .civitai-icon {
+    color: white; /* Icon color changes to white on hover */
+}
+
+/* 增强hover状态的视觉反馈 */
+.social-link:hover,
+.update-link:hover,
+.folder-item:hover {
+    border-color: var(--lora-accent);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}

static/css/components/update-modal.css

@@ -0,0 +1,208 @@
+/* Update Modal Styles */
+.update-modal {
+    max-width: 600px;
+}
+
+.update-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-3);
+    padding-bottom: var(--space-2);
+    border-bottom: 1px solid var(--lora-border);
+}
+
+.update-icon {
+    font-size: 1.8em;
+    color: var(--lora-accent);
+    animation: bounce 1.5s infinite;
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-5px);
+    }
+}
+
+.update-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+}
+
+.update-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.02); /* 轻微的灰色背景 */
+    border: 1px solid rgba(0, 0, 0, 0.08); /* 更明显的边框 */
+    border-radius: var(--border-radius-sm);
+    padding: var(--space-3);
+}
+
+.version-info {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.current-version, .new-version {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.label {
+    font-size: 0.9em;
+    color: var(--text-color);
+    opacity: 0.8;
+}
+
+.version-number {
+    font-family: monospace;
+    font-weight: 600;
+}
+
+.new-version .version-number {
+    color: var(--lora-accent);
+}
+
+.update-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-sm);
+    text-decoration: none;
+    color: var(--text-color);
+    transition: all 0.2s ease;
+}
+
+.update-link:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+.changelog-section {
+    background: rgba(0, 0, 0, 0.02); /* 轻微的灰色背景 */
+    border: 1px solid rgba(0, 0, 0, 0.08); /* 更明显的边框 */
+    border-radius: var(--border-radius-sm);
+    padding: var(--space-3);
+}
+
+.changelog-section h3 {
+    margin-top: 0;
+    margin-bottom: var(--space-2);
+    color: var(--lora-accent);
+    font-size: 1.1em;
+}
+
+.changelog-content {
+    max-height: 300px; /* Increased height since we removed instructions */
+    overflow-y: auto;
+}
+
+.changelog-item {
+    margin-bottom: var(--space-2);
+    padding-bottom: var(--space-2);
+    border-bottom: 1px solid var(--lora-border);
+}
+
+.changelog-item:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.changelog-item h4 {
+    margin-top: 0;
+    margin-bottom: 8px;
+    font-size: 1em;
+    color: var(--text-color);
+}
+
+.changelog-item ul {
+    margin: 0;
+    padding-left: 20px;
+}
+
+.changelog-item li {
+    margin-bottom: 4px;
+    color: var(--text-color);
+}
+
+@media (max-width: 480px) {
+    .update-info {
+        flex-direction: column;
+        gap: var(--space-2);
+    }
+    
+    .version-info {
+        width: 100%;
+    }
+}
+
+/* Update preferences section */
+.update-preferences {
+    border-top: 1px solid var(--lora-border);
+    margin-top: var(--space-2);
+    padding-top: var(--space-2);
+}
+
+/* Toggle switch styles */
+.toggle-switch {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+}
+
+.toggle-slider {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+    background-color: var(--border-color);
+    border-radius: 20px;
+    transition: .4s;
+    flex-shrink: 0;
+}
+
+.toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    border-radius: 50%;
+    transition: .4s;
+}
+
+input:checked + .toggle-slider {
+    background-color: var(--lora-accent);
+}
+
+input:checked + .toggle-slider:before {
+    transform: translateX(20px);
+}
+
+.toggle-label {
+    font-size: 0.9em;
+    color: var(--text-color);
+}

static/css/layout.css

@@ -19,108 +19,111 @@
     width: 100%;
 }
 
-.search-container {
-    position: relative;
-    width: 250px;
-    margin-left: auto;
-    flex-shrink: 0; /* 防止搜索框被压缩 */
+/* Search and filter styles moved to components/search-filter.css */
+
+/* Update corner-controls for collapsible behavior */
+.corner-controls {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: var(--z-overlay);
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 4px;
+    transition: all 0.3s ease;
 }
 
-/* 调整搜索框样式以匹配其他控件 */
-.search-container input {
-    width: 100%;
-    padding: 6px 40px 6px 12px; /* 减小右侧padding */
-    border: 1px solid oklch(65% 0.02 256); /* 更深的边框颜色，提高对比度 */
-    border-radius: var(--border-radius-sm);
-    background: var(--lora-surface);
+.corner-controls-toggle {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
     color: var(--text-color);
-    font-size: 0.9em;
-    height: 32px;
-    box-sizing: border-box; /* 确保padding不会增加总宽度 */
-}
-
-.search-container input:focus {
-    outline: none;
-    border-color: var(--lora-accent);
-}
-
-.search-icon {
-    position: absolute;
-    right: 40px; /* 调整到toggle按钮左侧 */
-    top: 50%;
-    transform: translateY(-50%);
-    color: oklch(var(--text-color) / 0.5);
-    pointer-events: none;
-    line-height: 1; /* 防止图标影响容器高度 */
-}
-
-/* 修改清空按钮样式 */
-.search-clear {
-    position: absolute;
-    right: 65px; /* 放到search-icon左侧 */
-    top: 50%;
-    transform: translateY(-50%);
-    color: oklch(var(--text-color) / 0.5);
-    cursor: pointer;
-    border: none;
-    background: none;
-    padding: 4px 8px; /* 增加点击区域 */
-    display: none; /* 默认隐藏 */
-    line-height: 1;
-    transition: color 0.2s ease;
-}
-
-.search-clear:hover {
-    color: var(--lora-accent);
-}
-
-.search-clear.visible {
-    display: block;
-}
-
-.search-mode-toggle {
-    background: var(--lora-surface);
-    border: 1px solid oklch(65% 0.02 256);
-    border-radius: var(--border-radius-sm);
-    color: var(--text-color);
-    width: 32px;
-    height: 32px;
-    padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.2s ease;
-    flex-shrink: 0;
+    z-index: 2;
+    margin-bottom: 10px;
 }
 
-.search-mode-toggle:hover {
+.corner-controls-toggle:hover {
     background: var(--lora-accent);
     color: white;
+    transform: translateY(-2px);
 }
 
-.search-mode-toggle.active {
-    background: var(--lora-accent);
-    color: white;
-}
-
-.search-mode-toggle i {
-    font-size: 0.9em;
-}
-
-.corner-controls {
-    position: fixed;
-    top: 20px;
-    right: 20px;
+.corner-controls-items {
     display: flex;
+    flex-direction: column;
     gap: 10px;
-    z-index: var(--z-overlay);
+    opacity: 0;
+    transform: translateY(-10px) scale(0.9);
+    transition: all 0.3s ease;
+    pointer-events: none;
+}
+
+/* Expanded state */
+.corner-controls.expanded .corner-controls-items {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: all;
+}
+
+/* Expanded state - only expand on hover if not already expanded by click */
+.corner-controls:hover:not(.expanded) .corner-controls-items {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: all;
+}
+
+/* Ensure hidden class works properly */
+.hidden {
+    display: none !important;
+}
+
+/* Update toggle button styles */
+.update-toggle {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color); /* Changed from var(--lora-accent) to match other toggles */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.update-toggle:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* Update badge styles */
+.update-badge {
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    background-color: var(--lora-error);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px var(--card-bg);
+}
+
+/* Badge on corner toggle */
+.corner-badge {
+    top: 0;
+    right: 0;
 }
 
-/* Folder Tags Container */
 .folder-tags-container {
     position: relative;
     width: 100%;
@@ -280,6 +283,33 @@
     transform: translateY(-2px);
 }
 
+.support-toggle {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    color: var(--lora-error);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.support-toggle:hover {
+    background: var(--lora-error);
+    color: white;
+    transform: translateY(-2px);
+}
+
+.support-toggle i {
+    font-size: 1.1em;
+    position: relative;
+    top: 1px;
+    left: -0.5px;
+}
+
 .theme-toggle img {
     width: 20px;
     height: 20px;
@@ -319,12 +349,6 @@
         gap: 15px;
     }
     
-    .search-container {
-        width: 100%;
-        order: -1;
-        margin-left: 0;
-    }
-    
     .folder-tags-container {
         order: -1;
     }
@@ -346,13 +370,28 @@
     }
 
     .corner-controls {
-        /* Keep the fixed positioning even on mobile */
-        position: fixed;
-        top: 20px;
-        right: 20px;
+        top: 10px;
+        right: 10px;
+    }
+    
+    .corner-controls-items {
+        display: none;
+    }
+    
+    .corner-controls.expanded .corner-controls-items {
+        display: flex;
     }
 
     .back-to-top {
         bottom: 60px; /* Give some extra space from bottom on mobile */
     }
-}
+}
+
+/* Standardize button widths in controls */
+.control-group button {
+    min-width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}

static/css/style.css

@@ -7,9 +7,15 @@
 /* Import Components */
 @import 'components/card.css';
 @import 'components/modal.css';
+@import 'components/download-modal.css';
 @import 'components/toast.css';
 @import 'components/loading.css';
 @import 'components/menu.css';
+@import 'components/update-modal.css';
+@import 'components/lora-modal.css';
+@import 'components/support-modal.css';
+@import 'components/search-filter.css';
+@import 'components/bulk.css';
 
 .initialization-notice {
     display: flex;

static/js/api/loraApi.js

@@ -30,6 +30,12 @@ export async function loadMoreLoras(boolUpdateFolders = false) {
             params.append('search', searchInput.value.trim());
             params.append('fuzzy', 'true');
         }
+        
+        // Add filter parameters if active
+        if (state.filters && state.filters.baseModel && state.filters.baseModel.length > 0) {
+            // Convert the array of base models to a comma-separated string
+            params.append('base_models', state.filters.baseModel.join(','));
+        }
 
         console.log('Loading loras with params:', params.toString());
 

static/js/components/LoraCard.js

@@ -1,6 +1,7 @@
 import { showToast } from '../utils/uiHelpers.js';
-import { modalManager } from '../managers/ModalManager.js';
 import { state } from '../state/index.js';
+import { showLoraModal } from './LoraModal.js';
+import { bulkManager } from '../managers/BulkManager.js';
 
 export function createLoraCard(lora) {
     const card = document.createElement('div');
@@ -18,6 +19,11 @@ export function createLoraCard(lora) {
     card.dataset.notes = lora.notes;
     card.dataset.meta = JSON.stringify(lora.civitai || {});
 
+    // Apply selection state if in bulk mode and this card is in the selected set
+    if (state.bulkMode && state.selectedLoras.has(lora.file_path)) {
+        card.classList.add('selected');
+    }
+
     const version = state.previewVersions.get(lora.file_path);
     const previewUrl = lora.preview_url || '/loras_static/images/no-preview.png';
     const versionedPreviewUrl = version ? `${previewUrl}?t=${version}` : previewUrl;
@@ -60,23 +66,30 @@ export function createLoraCard(lora) {
         </div>
     `;
 
-    // Main card click event
+    // Main card click event - modified to handle bulk mode
     card.addEventListener('click', () => {
-        const loraMeta = {
-            sha256: card.dataset.sha256,
-            file_path: card.dataset.filepath,
-            model_name: card.dataset.name,
-            file_name: card.dataset.file_name,
-            folder: card.dataset.folder,
-            modified: card.dataset.modified,
-            file_size: card.dataset.file_size,
-            from_civitai: card.dataset.from_civitai === 'true',
-            base_model: card.dataset.base_model,
-            usage_tips: card.dataset.usage_tips,
-            notes: card.dataset.notes,
-            civitai: JSON.parse(card.dataset.meta || '{}')
-        };
-        showLoraModal(loraMeta);
+        // Check if we're in bulk mode
+        if (state.bulkMode) {
+            // Toggle selection using the bulk manager
+            bulkManager.toggleCardSelection(card);
+        } else {
+            // Normal behavior - show modal
+            const loraMeta = {
+                sha256: card.dataset.sha256,
+                file_path: card.dataset.filepath,
+                model_name: card.dataset.name,
+                file_name: card.dataset.file_name,
+                folder: card.dataset.folder,
+                modified: card.dataset.modified,
+                file_size: card.dataset.file_size,
+                from_civitai: card.dataset.from_civitai === 'true',
+                base_model: card.dataset.base_model,
+                usage_tips: card.dataset.usage_tips,
+                notes: card.dataset.notes,
+                civitai: JSON.parse(card.dataset.meta || '{}')
+            };
+            showLoraModal(loraMeta);
+        }
     });
 
     // Copy button click event
@@ -127,477 +140,34 @@ export function createLoraCard(lora) {
         e.stopPropagation();
         replacePreview(lora.file_path);
     });
+    
+    // Apply bulk mode styling if currently in bulk mode
+    if (state.bulkMode) {
+        const actions = card.querySelectorAll('.card-actions');
+        actions.forEach(actionGroup => {
+            actionGroup.style.display = 'none';
+        });
+    }
 
     return card;
 }
 
-export function showLoraModal(lora) {
-    const escapedWords = lora.civitai?.trainedWords?.length ? 
-        lora.civitai.trainedWords.map(word => word.replace(/'/g, '\\\'')) : [];
-
-    const content = `
-        <div class="modal-content">
-            <button class="close" onclick="modalManager.closeModal('loraModal')">&times;</button>
-            <header class="modal-header">
-                <h2>${lora.model_name}</h2>
-            </header>
-
-            <div class="modal-body">
-                <div class="info-section">
-                    <div class="info-grid">
-                        <div class="info-item">
-                            <label>Version</label>
-                            <span>${lora.civitai.name || 'N/A'}</span>
-                        </div>
-                        <div class="info-item">
-                            <label>File Name</label>
-                            <div class="file-name-wrapper" 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>
-                        </div>
-                        <div class="info-item location-size">
-                            <div class="location-wrapper">
-                                <label>Location</label>
-                                <span class="file-path">${lora.file_path.replace(/[^/]+$/, '') || 'N/A'}</span>
-                            </div>
-                        </div>
-                        <div class="info-item base-size">
-                            <div class="base-wrapper">
-                                <label>Base Model</label>
-                                <span>${lora.base_model || 'N/A'}</span>
-                            </div>
-                            <div class="size-wrapper">
-                                <label>Size</label>
-                                <span>${formatFileSize(lora.file_size)}</span>
-                            </div>
-                        </div>
-                        <div class="info-item usage-tips">
-                            <label>Usage Tips</label>
-                            <div class="editable-field">
-                                <div class="preset-controls">
-                                    <select id="preset-selector">
-                                        <option value="">Add preset parameter...</option>
-                                        <option value="strength_min">Strength Min</option>
-                                        <option value="strength_max">Strength Max</option>
-                                        <option value="strength">Strength</option>
-                                        <option value="clip_skip">Clip Skip</option>
-                                    </select>
-                                    <input type="number" id="preset-value" step="0.01" placeholder="Value" style="display:none;">
-                                    <button class="add-preset-btn">Add</button>
-                                </div>
-                                <div class="preset-tags">
-                                    ${renderPresetTags(parsePresets(lora.usage_tips))}
-                                </div>
-                            </div>
-                        </div>
-                        ${renderTriggerWords(escapedWords)}
-                        <div class="info-item notes">
-                            <label>Additional Notes</label>
-                            <div class="editable-field">
-                                <div class="notes-content" contenteditable="true" spellcheck="false">${lora.notes || 'Add your notes here...'}</div>
-                                <button class="save-btn" onclick="saveNotes('${lora.file_path}')">
-                                    <i class="fas fa-save"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <div class="info-item full-width">
-                            <label>About this version</label>
-                            <div class="description-text">${lora.description || 'N/A'}</div>
-                        </div>
-                    </div>
-
-                </div>
-
-                ${renderShowcaseImages(lora.civitai.images)}
-            </div>
-        </div>
-    `;
+// Add a method to update card appearance based on bulk mode
+export function updateCardsForBulkMode(isBulkMode) {
+    // Update the state
+    state.bulkMode = isBulkMode;
     
-    modalManager.showModal('loraModal', content);
-    setupEditableFields();
-    setupShowcaseScroll(); // Add this line
-}
-
-// 添加复制文件名的函数
-window.copyFileName = async function(fileName) {
-    try {
-        await navigator.clipboard.writeText(fileName);
-        showToast('File name copied', 'success');
-    } catch (err) {
-        console.error('Copy failed:', err);
-        showToast('Copy failed', 'error');
-    }
-};
-
-function setupEditableFields() {
-    const editableFields = document.querySelectorAll('.editable-field [contenteditable]');
+    document.body.classList.toggle('bulk-mode', isBulkMode);
     
-    editableFields.forEach(field => {
-        field.addEventListener('focus', function() {
-            if (this.textContent === 'Add your notes here...' || 
-                this.textContent === 'Save usage tips here..') {
-                this.textContent = '';
-            }
-        });
-
-        field.addEventListener('blur', function() {
-            if (this.textContent.trim() === '') {
-                this.textContent = this.classList.contains('usage-tips-content') 
-                    ? 'Save usage tips here..' 
-                    : 'Add your notes here...';
-            }
+    document.querySelectorAll('.lora-card').forEach(card => {
+        const actions = card.querySelectorAll('.card-actions');
+        actions.forEach(actionGroup => {
+            actionGroup.style.display = isBulkMode ? 'none' : 'flex';
         });
     });
-
-    const presetSelector = document.getElementById('preset-selector');
-    const presetValue = document.getElementById('preset-value');
-    const addPresetBtn = document.querySelector('.add-preset-btn');
-    const presetTags = document.querySelector('.preset-tags');
-
-    presetSelector.addEventListener('change', function() {
-        const selected = this.value;
-        if (selected) {
-            presetValue.style.display = 'inline-block';
-            presetValue.min = selected.includes('strength') ? 0 : 1;
-            presetValue.max = selected.includes('strength') ? 1 : 12;
-            presetValue.step = selected.includes('strength') ? 0.01 : 1;
-            if (selected === 'clip_skip') {
-                presetValue.type = 'number';
-                presetValue.step = 1;
-            }
-            // Add auto-focus
-            setTimeout(() => presetValue.focus(), 0);
-        } else {
-            presetValue.style.display = 'none';
-        }
-    });
-
-    addPresetBtn.addEventListener('click', async function() {
-        const key = presetSelector.value;
-        const value = presetValue.value;
-        
-        if (!key || !value) return;
-
-        const filePath = document.querySelector('.modal-content')
-            .querySelector('.file-path').textContent + 
-            document.querySelector('.modal-content')
-            .querySelector('#file-name').textContent + '.safetensors';
-
-        const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-        const currentPresets = parsePresets(loraCard.dataset.usage_tips);
-        
-        currentPresets[key] = parseFloat(value);
-        const newPresetsJson = JSON.stringify(currentPresets);
-
-        await saveModelMetadata(filePath, { 
-            usage_tips: newPresetsJson
-        });
-
-        loraCard.dataset.usage_tips = newPresetsJson;
-        presetTags.innerHTML = renderPresetTags(currentPresets);
-        
-        presetSelector.value = '';
-        presetValue.value = '';
-        presetValue.style.display = 'none';
-    });
-
-    // Add keydown event listeners for notes
-    const notesContent = document.querySelector('.notes-content');
-    if (notesContent) {
-        notesContent.addEventListener('keydown', async function(e) {
-            if (e.key === 'Enter') {
-                if (e.shiftKey) {
-                    // Allow shift+enter for new line
-                    return;
-                }
-                e.preventDefault();
-                const filePath = document.querySelector('.modal-content')
-                    .querySelector('.file-path').textContent + 
-                    document.querySelector('.modal-content')
-                    .querySelector('#file-name').textContent + '.safetensors';
-                await saveNotes(filePath);
-            }
-        });
+    
+    // Apply selection state to cards if entering bulk mode
+    if (isBulkMode) {
+        bulkManager.applySelectionState();
     }
-
-    // Add keydown event for preset value
-    presetValue.addEventListener('keydown', function(e) {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            addPresetBtn.click();
-        }
-    });
-}
-
-window.saveNotes = async function(filePath) {
-    const content = document.querySelector('.notes-content').textContent;
-    try {
-        await saveModelMetadata(filePath, { notes: content });
-
-        // Update the corresponding lora card's dataset
-        const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-        if (loraCard) {
-            loraCard.dataset.notes = content;
-        }
-
-        showToast('Notes saved successfully', 'success');
-    } catch (error) {
-        showToast('Failed to save notes', 'error');
-    }
-};
-
-async function saveModelMetadata(filePath, data) {
-    const response = await fetch('/loras/api/save-metadata', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            file_path: filePath,
-            ...data
-        })
-    });
-
-    if (!response.ok) {
-        throw new Error('Failed to save metadata');
-    }
-}
-
-function renderTriggerWords(words) {
-    if (!words.length) return `
-        <div class="info-item full-width trigger-words">
-            <label>Trigger Words</label>
-            <span>No trigger word needed</span>
-        </div>
-    `;
-    
-    return `
-        <div class="info-item full-width trigger-words">
-            <label>Trigger Words</label>
-            <div class="trigger-words-tags">
-                ${words.map(word => `
-                    <div class="trigger-word-tag" onclick="copyTriggerWord('${word}')">
-                        <span class="trigger-word-content">${word}</span>
-                        <span class="trigger-word-copy">
-                            <i class="fas fa-copy"></i>
-                        </span>
-                    </div>
-                `).join('')}
-            </div>
-        </div>
-    `;
-}
-
-function renderShowcaseImages(images) {
-    if (!images?.length) return '';
-    
-    return `
-        <div class="showcase-section">
-            <div class="scroll-indicator" onclick="toggleShowcase(this)">
-                <i class="fas fa-chevron-down"></i>
-                <span>Scroll or click to show ${images.length} examples</span>
-            </div>
-            <div class="carousel collapsed">
-                <div class="carousel-container">
-                    ${images.map(img => {
-                        // 计算适当的展示高度：
-                        // 1. 保持原始宽高比
-                        // 2. 限制最大高度为视窗高度的60%
-                        // 3. 确保最小高度为容器宽度的40%
-                        const aspectRatio = (img.height / img.width) * 100;
-                        const containerWidth = 800; // modal content的最大宽度
-                        const minHeightPercent = 40; // 最小高度为容器宽度的40%
-                        const maxHeightPercent = (window.innerHeight * 0.6 / containerWidth) * 100;
-                        const heightPercent = Math.max(
-                            minHeightPercent,
-                            Math.min(maxHeightPercent, aspectRatio)
-                        );
-                        
-                        if (img.type === 'video') {
-                            return `
-                                <div class="media-wrapper" style="padding-bottom: ${heightPercent}%">
-                                    <video controls autoplay muted loop crossorigin="anonymous" 
-                                           referrerpolicy="no-referrer" data-src="${img.url}"
-                                           class="lazy">
-                                        <source data-src="${img.url}" type="video/mp4">
-                                        Your browser does not support video playback
-                                    </video>
-                                </div>
-                            `;
-                        }
-                        return `
-                            <div class="media-wrapper" style="padding-bottom: ${heightPercent}%">
-                                <img data-src="${img.url}" 
-                                     alt="Preview" 
-                                     crossorigin="anonymous" 
-                                     referrerpolicy="no-referrer"
-                                     width="${img.width}"
-                                     height="${img.height}"
-                                     class="lazy"> 
-                            </div>
-                        `;
-                    }).join('')}
-                </div>
-            </div>
-            <button class="back-to-top" onclick="scrollToTop(this)">
-                <i class="fas fa-arrow-up"></i>
-            </button>
-        </div>
-    `;
-}
-
-// Add this to the window object for global access
-export function toggleShowcase(element) {
-    const carousel = element.nextElementSibling;
-    const isCollapsed = carousel.classList.contains('collapsed');
-    const indicator = element.querySelector('span');
-    const icon = element.querySelector('i');
-    
-    carousel.classList.toggle('collapsed');
-    
-    if (isCollapsed) {
-        const count = carousel.querySelectorAll('.media-wrapper').length;
-        indicator.textContent = `Scroll or click to hide examples`;
-        icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
-        initLazyLoading(carousel);
-    } else {
-        const count = carousel.querySelectorAll('.media-wrapper').length;
-        indicator.textContent = `Scroll or click to show ${count} examples`;
-        icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
-    }
-};
-
-// Add lazy loading initialization
-function initLazyLoading(container) {
-    const lazyElements = container.querySelectorAll('.lazy');
-    
-    const lazyLoad = (element) => {
-        if (element.tagName.toLowerCase() === 'video') {
-            element.src = element.dataset.src;
-            element.querySelector('source').src = element.dataset.src;
-            element.load();
-        } else {
-            element.src = element.dataset.src;
-        }
-        element.classList.remove('lazy');
-    };
-
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                lazyLoad(entry.target);
-                observer.unobserve(entry.target);
-            }
-        });
-    });
-
-    lazyElements.forEach(element => observer.observe(element));
-}
-
-export function setupShowcaseScroll() {
-    // Change from modal-content to window/document level
-    document.addEventListener('wheel', (event) => {
-        const modalContent = document.querySelector('.modal-content');
-        if (!modalContent) return;
-
-        const showcase = modalContent.querySelector('.showcase-section');
-        if (!showcase) return;
-        
-        const carousel = showcase.querySelector('.carousel');
-        const scrollIndicator = showcase.querySelector('.scroll-indicator');
-        
-        if (carousel?.classList.contains('collapsed') && event.deltaY > 0) {
-            const isNearBottom = modalContent.scrollHeight - modalContent.scrollTop - modalContent.clientHeight < 100;
-            
-            if (isNearBottom) {
-                toggleShowcase(scrollIndicator);
-                event.preventDefault();
-            }
-        }
-    }, { passive: false }); // Add passive: false option here
-
-    // Keep the existing scroll tracking code
-    const modalContent = document.querySelector('.modal-content');
-    if (modalContent) {
-        modalContent.addEventListener('scroll', () => {
-            const backToTopBtn = modalContent.querySelector('.back-to-top');
-            if (backToTopBtn) {
-                if (modalContent.scrollTop > 300) {
-                    backToTopBtn.classList.add('visible');
-                } else {
-                    backToTopBtn.classList.remove('visible');
-                }
-            }
-        });
-    }
-}
-
-export function scrollToTop(button) {
-    const modalContent = button.closest('.modal-content');
-    if (modalContent) {
-        modalContent.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-        });
-    }
-}
-
-function parsePresets(usageTips) {
-    if (!usageTips || usageTips === 'Save usage tips here..') return {};
-    try {
-        return JSON.parse(usageTips);
-    } catch {
-        return {};
-    }
-}
-
-function renderPresetTags(presets) {
-    return Object.entries(presets).map(([key, value]) => `
-        <div class="preset-tag" data-key="${key}">
-            <span>${formatPresetKey(key)}: ${value}</span>
-            <i class="fas fa-times" onclick="removePreset('${key}')"></i>
-        </div>
-    `).join('');
-}
-
-function formatPresetKey(key) {
-    return key.split('_').map(word => 
-        word.charAt(0).toUpperCase() + word.slice(1)
-    ).join(' ');
-}
-
-window.removePreset = async function(key) {
-    const filePath = document.querySelector('.modal-content')
-            .querySelector('.file-path').textContent + 
-            document.querySelector('.modal-content')
-            .querySelector('#file-name').textContent + '.safetensors';
-    const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
-    const currentPresets = parsePresets(loraCard.dataset.usage_tips);
-    
-    delete currentPresets[key];
-    const newPresetsJson = JSON.stringify(currentPresets);
-
-    await saveModelMetadata(filePath, { 
-        usage_tips: newPresetsJson 
-    });
-    
-    loraCard.dataset.usage_tips = newPresetsJson;
-    document.querySelector('.preset-tags').innerHTML = renderPresetTags(currentPresets);
-};
-
-// 添加文件大小格式化函数
-function formatFileSize(bytes) {
-    console.log('formatFileSize: ', bytes);
-    if (!bytes) return 'N/A';
-    const units = ['B', 'KB', 'MB', 'GB'];
-    let size = bytes;
-    let unitIndex = 0;
-    
-    while (size >= 1024 && unitIndex < units.length - 1) {
-        size /= 1024;
-        unitIndex++;
-    }
-    
-    return `${size.toFixed(1)} ${units[unitIndex]}`;
 }

static/js/components/LoraModal.js

@@ -0,0 +1,561 @@
+import { showToast } from '../utils/uiHelpers.js';
+import { state } from '../state/index.js';
+
+export function showLoraModal(lora) {
+    const escapedWords = lora.civitai?.trainedWords?.length ? 
+        lora.civitai.trainedWords.map(word => word.replace(/'/g, '\\\'')) : [];
+
+    const content = `
+        <div class="modal-content">
+            <button class="close" onclick="modalManager.closeModal('loraModal')">&times;</button>
+            <header class="modal-header">
+                <div class="editable-field model-name-field">
+                    <h2 class="model-name-content" contenteditable="true" spellcheck="false">${lora.model_name}</h2>
+                    <button class="save-btn" onclick="saveModelName('${lora.file_path}')">
+                        <i class="fas fa-save"></i>
+                    </button>
+                </div>
+            </header>
+
+            <div class="modal-body">
+                <div class="info-section">
+                    <div class="info-grid">
+                        <div class="info-item">
+                            <label>Version</label>
+                            <span>${lora.civitai.name || 'N/A'}</span>
+                        </div>
+                        <div class="info-item">
+                            <label>File Name</label>
+                            <div class="file-name-wrapper" 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>
+                        </div>
+                        <div class="info-item location-size">
+                            <div class="location-wrapper">
+                                <label>Location</label>
+                                <span class="file-path">${lora.file_path.replace(/[^/]+$/, '') || 'N/A'}</span>
+                            </div>
+                        </div>
+                        <div class="info-item base-size">
+                            <div class="base-wrapper">
+                                <label>Base Model</label>
+                                <span>${lora.base_model || 'N/A'}</span>
+                            </div>
+                            <div class="size-wrapper">
+                                <label>Size</label>
+                                <span>${formatFileSize(lora.file_size)}</span>
+                            </div>
+                        </div>
+                        <div class="info-item usage-tips">
+                            <label>Usage Tips</label>
+                            <div class="editable-field">
+                                <div class="preset-controls">
+                                    <select id="preset-selector">
+                                        <option value="">Add preset parameter...</option>
+                                        <option value="strength_min">Strength Min</option>
+                                        <option value="strength_max">Strength Max</option>
+                                        <option value="strength">Strength</option>
+                                        <option value="clip_skip">Clip Skip</option>
+                                    </select>
+                                    <input type="number" id="preset-value" step="0.01" placeholder="Value" style="display:none;">
+                                    <button class="add-preset-btn">Add</button>
+                                </div>
+                                <div class="preset-tags">
+                                    ${renderPresetTags(parsePresets(lora.usage_tips))}
+                                </div>
+                            </div>
+                        </div>
+                        ${renderTriggerWords(escapedWords)}
+                        <div class="info-item notes">
+                            <label>Additional Notes</label>
+                            <div class="editable-field">
+                                <div class="notes-content" contenteditable="true" spellcheck="false">${lora.notes || 'Add your notes here...'}</div>
+                                <button class="save-btn" onclick="saveNotes('${lora.file_path}')">
+                                    <i class="fas fa-save"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="info-item full-width">
+                            <label>About this version</label>
+                            <div class="description-text">${lora.description || 'N/A'}</div>
+                        </div>
+                    </div>
+
+                </div>
+
+                ${renderShowcaseImages(lora.civitai.images)}
+            </div>
+        </div>
+    `;
+    
+    modalManager.showModal('loraModal', content);
+    setupEditableFields();
+    setupShowcaseScroll();
+}
+
+// 添加复制文件名的函数
+window.copyFileName = async function(fileName) {
+    try {
+        await navigator.clipboard.writeText(fileName);
+        showToast('File name copied', 'success');
+    } catch (err) {
+        console.error('Copy failed:', err);
+        showToast('Copy failed', 'error');
+    }
+};
+
+// Add function to save model name
+window.saveModelName = async function(filePath) {
+    const modelNameElement = document.querySelector('.model-name-content');
+    const newModelName = modelNameElement.textContent.trim();
+    
+    // Validate model name
+    if (!newModelName) {
+        showToast('Model name cannot be empty', 'error');
+        return;
+    }
+    
+    // Check if model name is too long (limit to 100 characters)
+    if (newModelName.length > 100) {
+        showToast('Model name is too long (maximum 100 characters)', 'error');
+        // Truncate the displayed text
+        modelNameElement.textContent = newModelName.substring(0, 100);
+        return;
+    }
+    
+    try {
+        await saveModelMetadata(filePath, { model_name: newModelName });
+        
+        // Update the corresponding lora card's dataset and display
+        const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+        if (loraCard) {
+            loraCard.dataset.model_name = newModelName;
+            const titleElement = loraCard.querySelector('.card-title');
+            if (titleElement) {
+                titleElement.textContent = newModelName;
+            }
+        }
+        
+        showToast('Model name updated successfully', 'success');
+        
+        // Reload the page to reflect the sorted order
+        setTimeout(() => {
+            window.location.reload();
+        }, 1500);
+    } catch (error) {
+        showToast('Failed to update model name', 'error');
+    }
+};
+
+function setupEditableFields() {
+    const editableFields = document.querySelectorAll('.editable-field [contenteditable]');
+    
+    editableFields.forEach(field => {
+        field.addEventListener('focus', function() {
+            if (this.textContent === 'Add your notes here...' || 
+                this.textContent === 'Save usage tips here..') {
+                this.textContent = '';
+            }
+        });
+
+        field.addEventListener('blur', function() {
+            if (this.textContent.trim() === '') {
+                if (this.classList.contains('model-name-content')) {
+                    // Restore original model name if empty
+                    const filePath = document.querySelector('.modal-content')
+                        .querySelector('.file-path').textContent + 
+                        document.querySelector('.modal-content')
+                        .querySelector('#file-name').textContent + '.safetensors';
+                    const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+                    if (loraCard) {
+                        this.textContent = loraCard.dataset.model_name;
+                    }
+                } else if (this.classList.contains('usage-tips-content')) {
+                    this.textContent = 'Save usage tips here..';
+                } else {
+                    this.textContent = 'Add your notes here...';
+                }
+            }
+        });
+        
+        // Add input validation for model name
+        if (field.classList.contains('model-name-content')) {
+            field.addEventListener('input', function() {
+                // Limit model name length
+                if (this.textContent.length > 100) {
+                    this.textContent = this.textContent.substring(0, 100);
+                    // Place cursor at the end
+                    const range = document.createRange();
+                    const sel = window.getSelection();
+                    range.setStart(this.childNodes[0], 100);
+                    range.collapse(true);
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                    
+                    showToast('Model name is limited to 100 characters', 'warning');
+                }
+            });
+            
+            field.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    const filePath = document.querySelector('.modal-content')
+                        .querySelector('.file-path').textContent + 
+                        document.querySelector('.modal-content')
+                        .querySelector('#file-name').textContent + '.safetensors';
+                    saveModelName(filePath);
+                }
+            });
+        }
+    });
+
+    const presetSelector = document.getElementById('preset-selector');
+    const presetValue = document.getElementById('preset-value');
+    const addPresetBtn = document.querySelector('.add-preset-btn');
+    const presetTags = document.querySelector('.preset-tags');
+
+    presetSelector.addEventListener('change', function() {
+        const selected = this.value;
+        if (selected) {
+            presetValue.style.display = 'inline-block';
+            presetValue.min = selected.includes('strength') ? 0 : 1;
+            presetValue.max = selected.includes('strength') ? 1 : 12;
+            presetValue.step = selected.includes('strength') ? 0.01 : 1;
+            if (selected === 'clip_skip') {
+                presetValue.type = 'number';
+                presetValue.step = 1;
+            }
+            // Add auto-focus
+            setTimeout(() => presetValue.focus(), 0);
+        } else {
+            presetValue.style.display = 'none';
+        }
+    });
+
+    addPresetBtn.addEventListener('click', async function() {
+        const key = presetSelector.value;
+        const value = presetValue.value;
+        
+        if (!key || !value) return;
+
+        const filePath = document.querySelector('.modal-content')
+            .querySelector('.file-path').textContent + 
+            document.querySelector('.modal-content')
+            .querySelector('#file-name').textContent + '.safetensors';
+
+        const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+        const currentPresets = parsePresets(loraCard.dataset.usage_tips);
+        
+        currentPresets[key] = parseFloat(value);
+        const newPresetsJson = JSON.stringify(currentPresets);
+
+        await saveModelMetadata(filePath, { 
+            usage_tips: newPresetsJson
+        });
+
+        loraCard.dataset.usage_tips = newPresetsJson;
+        presetTags.innerHTML = renderPresetTags(currentPresets);
+        
+        presetSelector.value = '';
+        presetValue.value = '';
+        presetValue.style.display = 'none';
+    });
+
+    // Add keydown event listeners for notes
+    const notesContent = document.querySelector('.notes-content');
+    if (notesContent) {
+        notesContent.addEventListener('keydown', async function(e) {
+            if (e.key === 'Enter') {
+                if (e.shiftKey) {
+                    // Allow shift+enter for new line
+                    return;
+                }
+                e.preventDefault();
+                const filePath = document.querySelector('.modal-content')
+                    .querySelector('.file-path').textContent + 
+                    document.querySelector('.modal-content')
+                    .querySelector('#file-name').textContent + '.safetensors';
+                await saveNotes(filePath);
+            }
+        });
+    }
+
+    // Add keydown event for preset value
+    presetValue.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            addPresetBtn.click();
+        }
+    });
+}
+
+window.saveNotes = async function(filePath) {
+    const content = document.querySelector('.notes-content').textContent;
+    try {
+        await saveModelMetadata(filePath, { notes: content });
+
+        // Update the corresponding lora card's dataset
+        const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+        if (loraCard) {
+            loraCard.dataset.notes = content;
+        }
+
+        showToast('Notes saved successfully', 'success');
+    } catch (error) {
+        showToast('Failed to save notes', 'error');
+    }
+};
+
+async function saveModelMetadata(filePath, data) {
+    const response = await fetch('/loras/api/save-metadata', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            file_path: filePath,
+            ...data
+        })
+    });
+
+    if (!response.ok) {
+        throw new Error('Failed to save metadata');
+    }
+}
+
+function renderTriggerWords(words) {
+    if (!words.length) return `
+        <div class="info-item full-width trigger-words">
+            <label>Trigger Words</label>
+            <span>No trigger word needed</span>
+        </div>
+    `;
+    
+    return `
+        <div class="info-item full-width trigger-words">
+            <label>Trigger Words</label>
+            <div class="trigger-words-tags">
+                ${words.map(word => `
+                    <div class="trigger-word-tag" onclick="copyTriggerWord('${word}')">
+                        <span class="trigger-word-content">${word}</span>
+                        <span class="trigger-word-copy">
+                            <i class="fas fa-copy"></i>
+                        </span>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+    `;
+}
+
+function renderShowcaseImages(images) {
+    if (!images?.length) return '';
+    
+    return `
+        <div class="showcase-section">
+            <div class="scroll-indicator" onclick="toggleShowcase(this)">
+                <i class="fas fa-chevron-down"></i>
+                <span>Scroll or click to show ${images.length} examples</span>
+            </div>
+            <div class="carousel collapsed">
+                <div class="carousel-container">
+                    ${images.map(img => {
+                        // 计算适当的展示高度：
+                        // 1. 保持原始宽高比
+                        // 2. 限制最大高度为视窗高度的60%
+                        // 3. 确保最小高度为容器宽度的40%
+                        const aspectRatio = (img.height / img.width) * 100;
+                        const containerWidth = 800; // modal content的最大宽度
+                        const minHeightPercent = 40; // 最小高度为容器宽度的40%
+                        const maxHeightPercent = (window.innerHeight * 0.6 / containerWidth) * 100;
+                        const heightPercent = Math.max(
+                            minHeightPercent,
+                            Math.min(maxHeightPercent, aspectRatio)
+                        );
+                        
+                        if (img.type === 'video') {
+                            return `
+                                <div class="media-wrapper" style="padding-bottom: ${heightPercent}%">
+                                    <video controls autoplay muted loop crossorigin="anonymous" 
+                                           referrerpolicy="no-referrer" data-src="${img.url}"
+                                           class="lazy">
+                                        <source data-src="${img.url}" type="video/mp4">
+                                        Your browser does not support video playback
+                                    </video>
+                                </div>
+                            `;
+                        }
+                        return `
+                            <div class="media-wrapper" style="padding-bottom: ${heightPercent}%">
+                                <img data-src="${img.url}" 
+                                     alt="Preview" 
+                                     crossorigin="anonymous" 
+                                     referrerpolicy="no-referrer"
+                                     width="${img.width}"
+                                     height="${img.height}"
+                                     class="lazy"> 
+                            </div>
+                        `;
+                    }).join('')}
+                </div>
+            </div>
+            <button class="back-to-top" onclick="scrollToTop(this)">
+                <i class="fas fa-arrow-up"></i>
+            </button>
+        </div>
+    `;
+}
+
+export function toggleShowcase(element) {
+    const carousel = element.nextElementSibling;
+    const isCollapsed = carousel.classList.contains('collapsed');
+    const indicator = element.querySelector('span');
+    const icon = element.querySelector('i');
+    
+    carousel.classList.toggle('collapsed');
+    
+    if (isCollapsed) {
+        const count = carousel.querySelectorAll('.media-wrapper').length;
+        indicator.textContent = `Scroll or click to hide examples`;
+        icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
+        initLazyLoading(carousel);
+    } else {
+        const count = carousel.querySelectorAll('.media-wrapper').length;
+        indicator.textContent = `Scroll or click to show ${count} examples`;
+        icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
+    }
+}
+
+// Add lazy loading initialization
+function initLazyLoading(container) {
+    const lazyElements = container.querySelectorAll('.lazy');
+    
+    const lazyLoad = (element) => {
+        if (element.tagName.toLowerCase() === 'video') {
+            element.src = element.dataset.src;
+            element.querySelector('source').src = element.dataset.src;
+            element.load();
+        } else {
+            element.src = element.dataset.src;
+        }
+        element.classList.remove('lazy');
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                lazyLoad(entry.target);
+                observer.unobserve(entry.target);
+            }
+        });
+    });
+
+    lazyElements.forEach(element => observer.observe(element));
+}
+
+export function setupShowcaseScroll() {
+    // Change from modal-content to window/document level
+    document.addEventListener('wheel', (event) => {
+        const modalContent = document.querySelector('.modal-content');
+        if (!modalContent) return;
+
+        const showcase = modalContent.querySelector('.showcase-section');
+        if (!showcase) return;
+        
+        const carousel = showcase.querySelector('.carousel');
+        const scrollIndicator = showcase.querySelector('.scroll-indicator');
+        
+        if (carousel?.classList.contains('collapsed') && event.deltaY > 0) {
+            const isNearBottom = modalContent.scrollHeight - modalContent.scrollTop - modalContent.clientHeight < 100;
+            
+            if (isNearBottom) {
+                toggleShowcase(scrollIndicator);
+                event.preventDefault();
+            }
+        }
+    }, { passive: false }); // Add passive: false option here
+
+    // Keep the existing scroll tracking code
+    const modalContent = document.querySelector('.modal-content');
+    if (modalContent) {
+        modalContent.addEventListener('scroll', () => {
+            const backToTopBtn = modalContent.querySelector('.back-to-top');
+            if (backToTopBtn) {
+                if (modalContent.scrollTop > 300) {
+                    backToTopBtn.classList.add('visible');
+                } else {
+                    backToTopBtn.classList.remove('visible');
+                }
+            }
+        });
+    }
+}
+
+export function scrollToTop(button) {
+    const modalContent = button.closest('.modal-content');
+    if (modalContent) {
+        modalContent.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }
+}
+
+function parsePresets(usageTips) {
+    if (!usageTips || usageTips === 'Save usage tips here..') return {};
+    try {
+        return JSON.parse(usageTips);
+    } catch {
+        return {};
+    }
+}
+
+function renderPresetTags(presets) {
+    return Object.entries(presets).map(([key, value]) => `
+        <div class="preset-tag" data-key="${key}">
+            <span>${formatPresetKey(key)}: ${value}</span>
+            <i class="fas fa-times" onclick="removePreset('${key}')"></i>
+        </div>
+    `).join('');
+}
+
+function formatPresetKey(key) {
+    return key.split('_').map(word => 
+        word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+}
+
+window.removePreset = async function(key) {
+    const filePath = document.querySelector('.modal-content')
+            .querySelector('.file-path').textContent + 
+            document.querySelector('.modal-content')
+            .querySelector('#file-name').textContent + '.safetensors';
+    const loraCard = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+    const currentPresets = parsePresets(loraCard.dataset.usage_tips);
+    
+    delete currentPresets[key];
+    const newPresetsJson = JSON.stringify(currentPresets);
+
+    await saveModelMetadata(filePath, { 
+        usage_tips: newPresetsJson 
+    });
+    
+    loraCard.dataset.usage_tips = newPresetsJson;
+    document.querySelector('.preset-tags').innerHTML = renderPresetTags(currentPresets);
+};
+
+// 添加文件大小格式化函数
+function formatFileSize(bytes) {
+    if (!bytes) return 'N/A';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let size = bytes;
+    let unitIndex = 0;
+    
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex++;
+    }
+    
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+} 

static/js/main.js

@@ -1,8 +1,10 @@
 import { debounce } from './utils/debounce.js';
 import { LoadingManager } from './managers/LoadingManager.js';
 import { modalManager } from './managers/ModalManager.js';
+import { updateService } from './managers/UpdateService.js';
 import { state } from './state/index.js';
-import { showLoraModal, toggleShowcase, scrollToTop } from './components/LoraCard.js';
+import { showLoraModal } from './components/LoraModal.js';
+import { toggleShowcase, scrollToTop } from './components/LoraModal.js';
 import { loadMoreLoras, fetchCivitai, deleteModel, replacePreview, resetAndReload, refreshLoras } from './api/loraApi.js';
 import { 
     showToast, 
@@ -24,8 +26,15 @@ import { DownloadManager } from './managers/DownloadManager.js';
 import { SettingsManager, toggleApiKeyVisibility } from './managers/SettingsManager.js';
 import { LoraContextMenu } from './components/ContextMenu.js';
 import { moveManager } from './managers/MoveManager.js';
+import { FilterManager } from './managers/FilterManager.js';
+import { createLoraCard, updateCardsForBulkMode } from './components/LoraCard.js';
+import { bulkManager } from './managers/BulkManager.js';
 
-// Export all functions that need global access
+// Add bulk mode to state
+state.bulkMode = false;
+state.selectedLoras = new Set();
+
+// Export functions to global window object
 window.loadMoreLoras = loadMoreLoras;
 window.fetchCivitai = fetchCivitai;
 window.deleteModel = deleteModel;
@@ -48,11 +57,27 @@ window.moveManager = moveManager;
 window.toggleShowcase = toggleShowcase;
 window.scrollToTop = scrollToTop;
 
+// Export bulk manager methods to window
+window.toggleBulkMode = () => bulkManager.toggleBulkMode();
+window.clearSelection = () => bulkManager.clearSelection();
+window.toggleCardSelection = (card) => bulkManager.toggleCardSelection(card);
+window.copyAllLorasSyntax = () => bulkManager.copyAllLorasSyntax();
+window.updateSelectedCount = () => bulkManager.updateSelectedCount();
+window.bulkManager = bulkManager;
+
 // Initialize everything when DOM is ready
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
     state.loadingManager = new LoadingManager();
     modalManager.initialize();  // Initialize modalManager after DOM is loaded
+    updateService.initialize(); // Initialize updateService after modalManager
     window.downloadManager = new DownloadManager();  // Move this after modalManager initialization
+    window.filterManager = new FilterManager(); // Initialize filter manager
+    
+    // Initialize state filters from filterManager if available
+    if (window.filterManager && window.filterManager.filters) {
+        state.filters = { ...window.filterManager.filters };
+    }
+    
     initializeInfiniteScroll();
     initializeEventListeners();
     lazyLoadImages();
@@ -62,6 +87,12 @@ document.addEventListener('DOMContentLoaded', () => {
     initBackToTop();
     window.searchManager = new SearchManager();
     new LoraContextMenu();
+    
+    // Initialize cards for current bulk mode state (should be false initially)
+    updateCardsForBulkMode(state.bulkMode);
+    
+    // Initialize the bulk manager
+    bulkManager.initialize();
 });
 
 // Initialize event listeners

static/js/managers/BulkManager.js

@@ -0,0 +1,335 @@
+import { state } from '../state/index.js';
+import { showToast } from '../utils/uiHelpers.js';
+import { updateCardsForBulkMode } from '../components/LoraCard.js';
+
+export class BulkManager {
+    constructor() {
+        this.bulkBtn = document.getElementById('bulkOperationsBtn');
+        this.bulkPanel = document.getElementById('bulkOperationsPanel');
+        this.isStripVisible = false; // Track strip visibility state
+        
+        // Initialize selected loras set in state if not already there
+        if (!state.selectedLoras) {
+            state.selectedLoras = new Set();
+        }
+        
+        // Cache for lora metadata to handle non-visible selected loras
+        if (!state.loraMetadataCache) {
+            state.loraMetadataCache = new Map();
+        }
+    }
+
+    initialize() {
+        // Add event listeners if needed
+        // (Already handled via onclick attributes in HTML, but could be moved here)
+        
+        // Add event listeners for the selected count to toggle thumbnail strip
+        const selectedCount = document.getElementById('selectedCount');
+        if (selectedCount) {
+            selectedCount.addEventListener('click', () => this.toggleThumbnailStrip());
+        }
+    }
+
+    toggleBulkMode() {
+        // Toggle the state
+        state.bulkMode = !state.bulkMode;
+        
+        // Update UI
+        this.bulkBtn.classList.toggle('active', state.bulkMode);
+        
+        // Important: Remove the hidden class when entering bulk mode
+        if (state.bulkMode) {
+            this.bulkPanel.classList.remove('hidden');
+            // Use setTimeout to ensure the DOM updates before adding visible class
+            // This helps with the transition animation
+            setTimeout(() => {
+                this.bulkPanel.classList.add('visible');
+            }, 10);
+        } else {
+            this.bulkPanel.classList.remove('visible');
+            // Add hidden class back after transition completes
+            setTimeout(() => {
+                this.bulkPanel.classList.add('hidden');
+            }, 400); // Match this with the transition duration in CSS
+            
+            // Hide thumbnail strip if it's visible
+            this.hideThumbnailStrip();
+        }
+        
+        // Update all cards
+        updateCardsForBulkMode(state.bulkMode);
+        
+        // Clear selection if exiting bulk mode
+        if (!state.bulkMode) {
+            this.clearSelection();
+        }
+    }
+
+    clearSelection() {
+        document.querySelectorAll('.lora-card.selected').forEach(card => {
+            card.classList.remove('selected');
+        });
+        state.selectedLoras.clear();
+        this.updateSelectedCount();
+        
+        // Hide thumbnail strip if it's visible
+        this.hideThumbnailStrip();
+    }
+
+    updateSelectedCount() {
+        const countElement = document.getElementById('selectedCount');
+        
+        if (countElement) {
+            // Set text content without the icon
+            countElement.textContent = `${state.selectedLoras.size} selected `;
+            
+            // Re-add the caret icon with proper direction
+            const caretIcon = document.createElement('i');
+            // Use down arrow if strip is visible, up arrow if not
+            caretIcon.className = `fas fa-caret-${this.isStripVisible ? 'down' : 'up'} dropdown-caret`;
+            caretIcon.style.visibility = state.selectedLoras.size > 0 ? 'visible' : 'hidden';
+            countElement.appendChild(caretIcon);
+            
+            // If there are no selections, hide the thumbnail strip
+            if (state.selectedLoras.size === 0) {
+                this.hideThumbnailStrip();
+            }
+        }
+    }
+
+    toggleCardSelection(card) {
+        const filepath = card.dataset.filepath;
+        
+        if (card.classList.contains('selected')) {
+            card.classList.remove('selected');
+            state.selectedLoras.delete(filepath);
+        } else {
+            card.classList.add('selected');
+            state.selectedLoras.add(filepath);
+            
+            // Cache the metadata for this lora
+            state.loraMetadataCache.set(filepath, {
+                fileName: card.dataset.file_name,
+                usageTips: card.dataset.usage_tips,
+                previewUrl: this.getCardPreviewUrl(card),
+                isVideo: this.isCardPreviewVideo(card),
+                modelName: card.dataset.name
+            });
+        }
+        
+        this.updateSelectedCount();
+        
+        // Update thumbnail strip if it's visible
+        if (this.isStripVisible) {
+            this.updateThumbnailStrip();
+        }
+    }
+    
+    // Helper method to get preview URL from a card
+    getCardPreviewUrl(card) {
+        const img = card.querySelector('img');
+        const video = card.querySelector('video source');
+        return img ? img.src : (video ? video.src : '/loras_static/images/no-preview.png');
+    }
+    
+    // Helper method to check if preview is a video
+    isCardPreviewVideo(card) {
+        return card.querySelector('video') !== null;
+    }
+
+    // Apply selection state to cards after they are refreshed
+    applySelectionState() {
+        if (!state.bulkMode) return;
+        
+        document.querySelectorAll('.lora-card').forEach(card => {
+            const filepath = card.dataset.filepath;
+            if (state.selectedLoras.has(filepath)) {
+                card.classList.add('selected');
+                
+                // Update the cache with latest data
+                state.loraMetadataCache.set(filepath, {
+                    fileName: card.dataset.file_name,
+                    usageTips: card.dataset.usage_tips,
+                    previewUrl: this.getCardPreviewUrl(card),
+                    isVideo: this.isCardPreviewVideo(card),
+                    modelName: card.dataset.name
+                });
+            } else {
+                card.classList.remove('selected');
+            }
+        });
+        
+        this.updateSelectedCount();
+    }
+
+    async copyAllLorasSyntax() {
+        if (state.selectedLoras.size === 0) {
+            showToast('No LoRAs selected', 'warning');
+            return;
+        }
+        
+        const loraSyntaxes = [];
+        const missingLoras = [];
+        
+        // Process all selected loras using our metadata cache
+        for (const filepath of state.selectedLoras) {
+            const metadata = state.loraMetadataCache.get(filepath);
+            
+            if (metadata) {
+                const usageTips = JSON.parse(metadata.usageTips || '{}');
+                const strength = usageTips.strength || 1;
+                loraSyntaxes.push(`<lora:${metadata.fileName}:${strength}>`);
+            } else {
+                // If we don't have metadata, this is an error case
+                missingLoras.push(filepath);
+            }
+        }
+        
+        // Handle any loras with missing metadata
+        if (missingLoras.length > 0) {
+            console.warn('Missing metadata for some selected loras:', missingLoras);
+            showToast(`Missing data for ${missingLoras.length} LoRAs`, 'warning');
+        }
+        
+        if (loraSyntaxes.length === 0) {
+            showToast('No valid LoRAs to copy', 'error');
+            return;
+        }
+        
+        try {
+            await navigator.clipboard.writeText(loraSyntaxes.join(', '));
+            showToast(`Copied ${loraSyntaxes.length} LoRA syntaxes to clipboard`, 'success');
+        } catch (err) {
+            console.error('Copy failed:', err);
+            showToast('Copy failed', 'error');
+        }
+    }
+    
+    // Create and show the thumbnail strip of selected LoRAs
+    toggleThumbnailStrip() {
+        // If no items are selected, do nothing
+        if (state.selectedLoras.size === 0) return;
+        
+        const existing = document.querySelector('.selected-thumbnails-strip');
+        if (existing) {
+            this.hideThumbnailStrip();
+        } else {
+            this.showThumbnailStrip();
+        }
+    }
+    
+    showThumbnailStrip() {
+        // Create the thumbnail strip container
+        const strip = document.createElement('div');
+        strip.className = 'selected-thumbnails-strip';
+        
+        // Create a container for the thumbnails (for scrolling)
+        const thumbnailContainer = document.createElement('div');
+        thumbnailContainer.className = 'thumbnails-container';
+        strip.appendChild(thumbnailContainer);
+        
+        // Position the strip above the bulk operations panel
+        this.bulkPanel.parentNode.insertBefore(strip, this.bulkPanel);
+        
+        // Populate the thumbnails
+        this.updateThumbnailStrip();
+        
+        // Update strip visibility state and caret direction
+        this.isStripVisible = true;
+        this.updateSelectedCount(); // Update caret
+        
+        // Add animation class after a short delay to trigger transition
+        setTimeout(() => strip.classList.add('visible'), 10);
+    }
+    
+    hideThumbnailStrip() {
+        const strip = document.querySelector('.selected-thumbnails-strip');
+        if (strip) {
+            strip.classList.remove('visible');
+            
+            // Update strip visibility state and caret direction
+            this.isStripVisible = false;
+            this.updateSelectedCount(); // Update caret
+            
+            // Wait for animation to complete before removing
+            setTimeout(() => {
+                if (strip.parentNode) {
+                    strip.parentNode.removeChild(strip);
+                }
+            }, 300);
+        }
+    }
+    
+    updateThumbnailStrip() {
+        const container = document.querySelector('.thumbnails-container');
+        if (!container) return;
+        
+        // Clear existing thumbnails
+        container.innerHTML = '';
+        
+        // Add a thumbnail for each selected LoRA
+        for (const filepath of state.selectedLoras) {
+            const metadata = state.loraMetadataCache.get(filepath);
+            if (!metadata) continue;
+            
+            const thumbnail = document.createElement('div');
+            thumbnail.className = 'selected-thumbnail';
+            thumbnail.dataset.filepath = filepath;
+            
+            // Create the visual element (image or video)
+            if (metadata.isVideo) {
+                thumbnail.innerHTML = `
+                    <video autoplay loop muted playsinline>
+                        <source src="${metadata.previewUrl}" type="video/mp4">
+                    </video>
+                    <span class="thumbnail-name" title="${metadata.modelName}">${metadata.modelName}</span>
+                    <button class="thumbnail-remove"><i class="fas fa-times"></i></button>
+                `;
+            } else {
+                thumbnail.innerHTML = `
+                    <img src="${metadata.previewUrl}" alt="${metadata.modelName}">
+                    <span class="thumbnail-name" title="${metadata.modelName}">${metadata.modelName}</span>
+                    <button class="thumbnail-remove"><i class="fas fa-times"></i></button>
+                `;
+            }
+            
+            // Add click handler for deselection
+            thumbnail.addEventListener('click', (e) => {
+                if (!e.target.closest('.thumbnail-remove')) {
+                    this.deselectItem(filepath);
+                }
+            });
+            
+            // Add click handler for the remove button
+            thumbnail.querySelector('.thumbnail-remove').addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.deselectItem(filepath);
+            });
+            
+            container.appendChild(thumbnail);
+        }
+    }
+    
+    deselectItem(filepath) {
+        // Find and deselect the corresponding card if it's in the DOM
+        const card = document.querySelector(`.lora-card[data-filepath="${filepath}"]`);
+        if (card) {
+            card.classList.remove('selected');
+        }
+        
+        // Remove from the selection set
+        state.selectedLoras.delete(filepath);
+        
+        // Update UI
+        this.updateSelectedCount();
+        this.updateThumbnailStrip();
+        
+        // Hide the strip if no more selections
+        if (state.selectedLoras.size === 0) {
+            this.hideThumbnailStrip();
+        }
+    }
+}
+
+// Create a singleton instance
+export const bulkManager = new BulkManager(); 

static/js/managers/DownloadManager.js

@@ -71,7 +71,6 @@ export class DownloadManager {
         const errorElement = document.getElementById('urlError');
         
         try {
-            // Show loading while fetching versions
             this.loadingManager.showSimpleLoading('Fetching model versions...');
             
             const modelId = this.extractModelId(url);
@@ -98,7 +97,6 @@ export class DownloadManager {
         } catch (error) {
             errorElement.textContent = error.message;
         } finally {
-            // Hide loading when done
             this.loadingManager.hide();
         }
     }
@@ -120,19 +118,31 @@ export class DownloadManager {
         
         const versionList = document.getElementById('versionList');
         versionList.innerHTML = this.versions.map(version => {
-            // Find first image (skip videos)
             const firstImage = version.images?.find(img => !img.url.endsWith('.mp4'));
             const thumbnailUrl = firstImage ? firstImage.url : '/loras_static/images/no-preview.png';
-            const fileSize = (version.files[0]?.sizeKB / 1024).toFixed(2); // Convert to MB
+            const fileSize = (version.files[0]?.sizeKB / 1024).toFixed(2);
+            
+            const existsLocally = version.files[0]?.existsLocally;
+            const localPath = version.files[0]?.localPath;
+            
+            // 更新本地状态指示器为badge样式
+            const localStatus = existsLocally ? 
+                `<div class="local-badge">
+                    <i class="fas fa-check"></i> In Library
+                    <div class="local-path">${localPath}</div>
+                 </div>` : '';
 
             return `
-                <div class="version-item ${this.currentVersion?.id === version.id ? 'selected' : ''}"
+                <div class="version-item ${this.currentVersion?.id === version.id ? 'selected' : ''} ${existsLocally ? 'exists-locally' : ''}"
                      onclick="downloadManager.selectVersion('${version.id}')">
                     <div class="version-thumbnail">
                         <img src="${thumbnailUrl}" alt="Version preview">
                     </div>
                     <div class="version-content">
-                        <h3>${version.name}</h3>
+                        <div class="version-header">
+                            <h3>${version.name}</h3>
+                            ${localStatus}
+                        </div>
                         <div class="version-info">
                             ${version.baseModel ? `<div class="base-model">${version.baseModel}</div>` : ''}
                         </div>
@@ -144,15 +154,45 @@ export class DownloadManager {
                 </div>
             `;
         }).join('');
+        
+        // Update Next button state based on initial selection
+        this.updateNextButtonState();
     }
 
     selectVersion(versionId) {
         this.currentVersion = this.versions.find(v => v.id.toString() === versionId.toString());
         if (!this.currentVersion) return;
 
+        // Remove the toast notification - it's redundant with the visual indicator
+        // const existsLocally = this.currentVersion.files[0]?.existsLocally;
+        // if (existsLocally) {
+        //     showToast('This version already exists in your library', 'info');
+        // }
+
         document.querySelectorAll('.version-item').forEach(item => {
             item.classList.toggle('selected', item.querySelector('h3').textContent === this.currentVersion.name);
         });
+        
+        // Update Next button state after selection
+        this.updateNextButtonState();
+    }
+    
+    // Add new method to update Next button state
+    updateNextButtonState() {
+        const nextButton = document.querySelector('#versionStep .primary-btn');
+        if (!nextButton) return;
+        
+        const existsLocally = this.currentVersion?.files[0]?.existsLocally;
+        
+        if (existsLocally) {
+            nextButton.disabled = true;
+            nextButton.classList.add('disabled');
+            nextButton.textContent = 'Already in Library';
+        } else {
+            nextButton.disabled = false;
+            nextButton.classList.remove('disabled');
+            nextButton.textContent = 'Next';
+        }
     }
 
     async proceedToLocation() {
@@ -160,6 +200,13 @@ export class DownloadManager {
             showToast('Please select a version', 'error');
             return;
         }
+        
+        // Double-check if the version exists locally
+        const existsLocally = this.currentVersion.files[0]?.existsLocally;
+        if (existsLocally) {
+            showToast('This version already exists in your library', 'info');
+            return;
+        }
 
         document.getElementById('versionStep').style.display = 'none';
         document.getElementById('locationStep').style.display = 'block';

static/js/managers/FilterManager.js

@@ -0,0 +1,173 @@
+import { BASE_MODELS, BASE_MODEL_CLASSES } from '../utils/constants.js';
+import { state } from '../state/index.js';
+import { showToast } from '../utils/uiHelpers.js';
+import { resetAndReload } from '../api/loraApi.js';
+
+export class FilterManager {
+    constructor() {
+        this.filters = {
+            baseModel: []
+        };
+        
+        this.filterPanel = document.getElementById('filterPanel');
+        this.filterButton = document.getElementById('filterButton');
+        this.activeFiltersCount = document.getElementById('activeFiltersCount');
+        
+        this.initialize();
+    }
+    
+    initialize() {
+        // Create base model filter tags
+        this.createBaseModelTags();
+        
+        // Close filter panel when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!this.filterPanel.contains(e.target) && 
+                e.target !== this.filterButton &&
+                !this.filterButton.contains(e.target) &&
+                !this.filterPanel.classList.contains('hidden')) {
+                this.closeFilterPanel();
+            }
+        });
+        
+        // Initialize active filters from localStorage if available
+        this.loadFiltersFromStorage();
+    }
+    
+    createBaseModelTags() {
+        const baseModelTagsContainer = document.getElementById('baseModelTags');
+        if (!baseModelTagsContainer) return;
+        
+        baseModelTagsContainer.innerHTML = '';
+        
+        Object.entries(BASE_MODELS).forEach(([key, value]) => {
+            const tag = document.createElement('div');
+            tag.className = `filter-tag base-model-tag ${BASE_MODEL_CLASSES[value]}`;
+            tag.dataset.baseModel = value;
+            tag.innerHTML = value;
+            
+            // Add click handler to toggle selection and automatically apply
+            tag.addEventListener('click', async () => {
+                tag.classList.toggle('active');
+                
+                if (tag.classList.contains('active')) {
+                    if (!this.filters.baseModel.includes(value)) {
+                        this.filters.baseModel.push(value);
+                    }
+                } else {
+                    this.filters.baseModel = this.filters.baseModel.filter(model => model !== value);
+                }
+                
+                this.updateActiveFiltersCount();
+                
+                // Auto-apply filter when tag is clicked
+                await this.applyFilters(false);
+            });
+            
+            baseModelTagsContainer.appendChild(tag);
+        });
+    }
+    
+    toggleFilterPanel() {
+        this.filterPanel.classList.toggle('hidden');
+        
+        // Mark selected filters
+        if (!this.filterPanel.classList.contains('hidden')) {
+            this.updateTagSelections();
+        }
+    }
+    
+    closeFilterPanel() {
+        this.filterPanel.classList.add('hidden');
+    }
+    
+    updateTagSelections() {
+        // Update base model tags
+        const baseModelTags = document.querySelectorAll('.base-model-tag');
+        baseModelTags.forEach(tag => {
+            const baseModel = tag.dataset.baseModel;
+            if (this.filters.baseModel.includes(baseModel)) {
+                tag.classList.add('active');
+            } else {
+                tag.classList.remove('active');
+            }
+        });
+    }
+    
+    updateActiveFiltersCount() {
+        const totalActiveFilters = this.filters.baseModel.length;
+        
+        if (totalActiveFilters > 0) {
+            this.activeFiltersCount.textContent = totalActiveFilters;
+            this.activeFiltersCount.style.display = 'inline-flex';
+        } else {
+            this.activeFiltersCount.style.display = 'none';
+        }
+    }
+    
+    async applyFilters(showToastNotification = true) {
+        // Save filters to localStorage
+        localStorage.setItem('loraFilters', JSON.stringify(this.filters));
+        
+        // Update state with current filters
+        state.filters = { ...this.filters };
+        
+        // Reload loras with filters applied
+        await resetAndReload();
+        
+        // Update filter button to show active state
+        if (this.hasActiveFilters()) {
+            this.filterButton.classList.add('active');
+            if (showToastNotification) {
+                showToast(`Filtering by ${this.filters.baseModel.length} base models`, 'success');
+            }
+        } else {
+            this.filterButton.classList.remove('active');
+            if (showToastNotification) {
+                showToast('Filters cleared', 'info');
+            }
+        }
+    }
+    
+    async clearFilters() {
+        // Clear all filters
+        this.filters = {
+            baseModel: []
+        };
+        
+        // Update state
+        state.filters = { ...this.filters };
+        
+        // Update UI
+        this.updateTagSelections();
+        this.updateActiveFiltersCount();
+        
+        // Remove from localStorage
+        localStorage.removeItem('loraFilters');
+        
+        // Update UI and reload data
+        this.filterButton.classList.remove('active');
+        await resetAndReload();
+    }
+    
+    loadFiltersFromStorage() {
+        const savedFilters = localStorage.getItem('loraFilters');
+        if (savedFilters) {
+            try {
+                this.filters = JSON.parse(savedFilters);
+                this.updateTagSelections();
+                this.updateActiveFiltersCount();
+                
+                if (this.hasActiveFilters()) {
+                    this.filterButton.classList.add('active');
+                }
+            } catch (error) {
+                console.error('Error loading filters from storage:', error);
+            }
+        }
+    }
+    
+    hasActiveFilters() {
+        return this.filters.baseModel.length > 0;
+    }
+}

static/js/managers/ModalManager.js

@@ -2,6 +2,7 @@ export class ModalManager {
     constructor() {
         this.modals = new Map();
         this.scrollPosition = 0;
+        this.currentOpenModal = null; // Track currently open modal
     }
 
     initialize() {
@@ -52,6 +53,30 @@ export class ModalManager {
                 document.body.classList.remove('modal-open');
             }
         });
+        
+        // Add supportModal registration
+        this.registerModal('supportModal', {
+            element: document.getElementById('supportModal'),
+            onClose: () => {
+                this.getModal('supportModal').element.style.display = 'none';
+                document.body.classList.remove('modal-open');
+            }
+        });
+
+        // Add updateModal registration
+        this.registerModal('updateModal', {
+            element: document.getElementById('updateModal'),
+            onClose: () => {
+                this.getModal('updateModal').element.style.display = 'none';
+                document.body.classList.remove('modal-open');
+            }
+        });
+
+        // Set up event listeners for modal toggles
+        const supportToggle = document.getElementById('supportToggleBtn');
+        if (supportToggle) {
+            supportToggle.addEventListener('click', () => this.toggleModal('supportModal'));
+        }
 
         document.addEventListener('keydown', this.boundHandleEscape);
         this.initialized = true;
@@ -78,10 +103,26 @@ export class ModalManager {
         return this.modals.get(id);
     }
 
+    // Check if any modal is currently open
+    isAnyModalOpen() {
+        for (const [id, modal] of this.modals) {
+            if (modal.isOpen) {
+                return id;
+            }
+        }
+        return null;
+    }
+
     showModal(id, content = null, onCloseCallback = null) {
         const modal = this.getModal(id);
         if (!modal) return;
 
+        // Close any open modal before showing the new one
+        const openModalId = this.isAnyModalOpen();
+        if (openModalId && openModalId !== id) {
+            this.closeModal(openModalId);
+        }
+
         if (content) {
             modal.element.innerHTML = content;
         }
@@ -101,6 +142,7 @@ export class ModalManager {
         }
 
         modal.isOpen = true;
+        this.currentOpenModal = id; // Update currently open modal
         document.body.style.top = `-${this.scrollPosition}px`;
         document.body.classList.add('modal-open');
     }
@@ -112,6 +154,11 @@ export class ModalManager {
         modal.onClose();
         modal.isOpen = false;
 
+        // Clear current open modal if this is the one being closed
+        if (this.currentOpenModal === id) {
+            this.currentOpenModal = null;
+        }
+
         // Remove fixed positioning and restore scroll position
         document.body.classList.remove('modal-open');
         document.body.style.top = '';
@@ -126,15 +173,26 @@ export class ModalManager {
 
     handleEscape(e) {
         if (e.key === 'Escape') {
-            // Close the last opened modal
-            for (const [id, modal] of this.modals) {
-                if (modal.isOpen) {
-                    this.closeModal(id);
-                    break;
-                }
+            // Close the current open modal if it exists
+            if (this.currentOpenModal) {
+                this.closeModal(this.currentOpenModal);
             }
         }
     }
+
+    toggleModal(id, content = null, onCloseCallback = null) {
+        const modal = this.getModal(id);
+        if (!modal) return;
+        
+        // If this modal is already open, close it
+        if (modal.isOpen) {
+            this.closeModal(id);
+            return;
+        }
+        
+        // Otherwise, show the modal
+        this.showModal(id, content, onCloseCallback);
+    }
 }
 
 // Create and export a singleton instance

static/js/managers/MoveManager.js

@@ -5,11 +5,13 @@ import { modalManager } from './ModalManager.js';
 class MoveManager {
     constructor() {
         this.currentFilePath = null;
+        this.bulkFilePaths = null;
         this.modal = document.getElementById('moveModal');
         this.loraRootSelect = document.getElementById('moveLoraRoot');
         this.folderBrowser = document.getElementById('moveFolderBrowser');
         this.newFolderInput = document.getElementById('moveNewFolder');
         this.pathDisplay = document.getElementById('moveTargetPathDisplay');
+        this.modalTitle = document.getElementById('moveModalTitle');
 
         this.initializeEventListeners();
     }
@@ -43,7 +45,24 @@ class MoveManager {
     }
 
     async showMoveModal(filePath) {
-        this.currentFilePath = filePath;
+        // Reset state
+        this.currentFilePath = null;
+        this.bulkFilePaths = null;
+        
+        // Handle bulk mode
+        if (filePath === 'bulk') {
+            const selectedPaths = Array.from(state.selectedLoras);
+            if (selectedPaths.length === 0) {
+                showToast('No LoRAs selected', 'warning');
+                return;
+            }
+            this.bulkFilePaths = selectedPaths;
+            this.modalTitle.textContent = `Move ${selectedPaths.length} LoRAs`;
+        } else {
+            // Single file mode
+            this.currentFilePath = filePath;
+            this.modalTitle.textContent = "Move Model";
+        }
         
         // 清除之前的选择
         this.folderBrowser.querySelectorAll('.folder-item').forEach(item => {
@@ -105,36 +124,81 @@ class MoveManager {
             targetPath = `${targetPath}/${newFolder}`;
         }
 
+        try {
+            if (this.bulkFilePaths) {
+                // Bulk move mode
+                await this.moveBulkModels(this.bulkFilePaths, targetPath);
+            } else {
+                // Single move mode
+                await this.moveSingleModel(this.currentFilePath, targetPath);
+            }
+
+            modalManager.closeModal('moveModal');
+            await resetAndReload(true);
+            
+            // If we were in bulk mode, exit it after successful move
+            if (this.bulkFilePaths && state.bulkMode) {
+                toggleBulkMode();
+            }
+
+        } catch (error) {
+            console.error('Error moving model(s):', error);
+            showToast('Failed to move model(s): ' + error.message, 'error');
+        }
+    }
+    
+    async moveSingleModel(filePath, targetPath) {
         // show toast if current path is same as target path
-        if (this.currentFilePath.substring(0, this.currentFilePath.lastIndexOf('/')) === targetPath) {
+        if (filePath.substring(0, filePath.lastIndexOf('/')) === targetPath) {
             showToast('Model is already in the selected folder', 'info');
             return;
         }
 
-        try {
-            const response = await fetch('/api/move_model', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    file_path: this.currentFilePath,
-                    target_path: targetPath
-                })
-            });
+        const response = await fetch('/api/move_model', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                file_path: filePath,
+                target_path: targetPath
+            })
+        });
 
-            if (!response.ok) {
-                throw new Error('Failed to move model');
-            }
-
-            showToast('Model moved successfully', 'success');
-            modalManager.closeModal('moveModal');
-            await resetAndReload(true);
-
-        } catch (error) {
-            console.error('Error moving model:', error);
-            showToast('Failed to move model: ' + error.message, 'error');
+        if (!response.ok) {
+            throw new Error('Failed to move model');
         }
+
+        showToast('Model moved successfully', 'success');
+    }
+    
+    async moveBulkModels(filePaths, targetPath) {
+        // Filter out models already in the target path
+        const movedPaths = filePaths.filter(path => {
+            return path.substring(0, path.lastIndexOf('/')) !== targetPath;
+        });
+        
+        if (movedPaths.length === 0) {
+            showToast('All selected models are already in the target folder', 'info');
+            return;
+        }
+
+        const response = await fetch('/api/move_models_bulk', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                file_paths: movedPaths,
+                target_path: targetPath
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to move models');
+        }
+
+        showToast(`Successfully moved ${movedPaths.length} models`, 'success');
     }
 }
 

static/js/managers/SettingsManager.js

@@ -5,6 +5,29 @@ export class SettingsManager {
     constructor() {
         this.initialized = false;
         this.isOpen = false;
+        
+        // Add initialization to sync with modal state
+        this.initialize();
+    }
+
+    initialize() {
+        if (this.initialized) return;
+        
+        // Add event listener to sync state when modal is closed via other means (like Escape key)
+        const settingsModal = document.getElementById('settingsModal');
+        if (settingsModal) {
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+                        this.isOpen = settingsModal.style.display === 'block';
+                    }
+                });
+            });
+            
+            observer.observe(settingsModal, { attributes: true });
+        }
+        
+        this.initialized = true;
     }
 
     toggleSettings() {
@@ -16,13 +39,6 @@ export class SettingsManager {
         this.isOpen = !this.isOpen;
     }
 
-    /*
-    showSettings() {
-        console.log('Opening settings modal...'); // Debug log
-        modalManager.showModal('settingsModal');
-    }
-    */
-
     async saveSettings() {
         const apiKey = document.getElementById('civitaiApiKey').value;
         

static/js/managers/UpdateService.js

@@ -0,0 +1,201 @@
+import { modalManager } from './ModalManager.js';
+
+export class UpdateService {
+    constructor() {
+        this.updateCheckInterval = 24 * 60 * 60 * 1000; // 24 hours
+        this.currentVersion = "v0.0.0";  // Initialize with default values
+        this.latestVersion = "v0.0.0";   // Initialize with default values
+        this.updateInfo = null;
+        this.updateAvailable = false;
+        this.updateNotificationsEnabled = localStorage.getItem('show_update_notifications') !== 'false';
+        this.lastCheckTime = parseInt(localStorage.getItem('last_update_check') || '0');
+    }
+
+    initialize() {
+        // Initialize update preferences from localStorage
+        const showUpdates = localStorage.getItem('show_update_notifications');
+        this.updateNotificationsEnabled = showUpdates === null || showUpdates === 'true';
+        
+        // Register event listener for update notification toggle
+        const updateCheckbox = document.getElementById('updateNotifications');
+        if (updateCheckbox) {
+            updateCheckbox.checked = this.updateNotificationsEnabled;
+            updateCheckbox.addEventListener('change', (e) => {
+                this.updateNotificationsEnabled = e.target.checked;
+                localStorage.setItem('show_update_notifications', e.target.checked);
+                this.updateBadgeVisibility();
+            });
+        }
+        
+        // Perform update check if needed
+        this.checkForUpdates();
+        
+        // Set up event listener for update button
+        const updateToggle = document.getElementById('updateToggleBtn');
+        if (updateToggle) {
+            updateToggle.addEventListener('click', () => this.toggleUpdateModal());
+        }
+
+        // Immediately update modal content with current values (even if from default)
+        this.updateModalContent();
+    }
+    
+    async checkForUpdates() {
+        // Check if we should perform an update check
+        const now = Date.now();
+        if (now - this.lastCheckTime < this.updateCheckInterval) {
+            // If we already have update info, just update the UI
+            if (this.updateAvailable) {
+                this.updateBadgeVisibility();
+            }
+            return;
+        }
+        
+        try {
+            // Call backend API to check for updates
+            const response = await fetch('/loras/api/check-updates');
+            const data = await response.json();
+            
+            if (data.success) {
+                this.currentVersion = data.current_version || "v0.0.0";
+                this.latestVersion = data.latest_version || "v0.0.0";
+                this.updateInfo = data;
+                
+                // Determine if update is available
+                this.updateAvailable = data.update_available;
+                
+                // Update last check time
+                this.lastCheckTime = now;
+                localStorage.setItem('last_update_check', now.toString());
+                
+                // Update UI
+                this.updateBadgeVisibility();
+                this.updateModalContent();
+
+                console.log("Update check complete:", {
+                    currentVersion: this.currentVersion,
+                    latestVersion: this.latestVersion,
+                    updateAvailable: this.updateAvailable
+                });
+            }
+        } catch (error) {
+            console.error('Failed to check for updates:', error);
+        }
+    }
+    
+    updateBadgeVisibility() {
+        const updateToggle = document.querySelector('.update-toggle');
+        const updateBadge = document.querySelector('.update-toggle .update-badge');
+        const cornerBadge = document.querySelector('.corner-badge');
+        
+        if (updateToggle) {
+            updateToggle.title = this.updateNotificationsEnabled && this.updateAvailable 
+                ? "Update Available" 
+                : "Check Updates";
+        }
+        
+        if (updateBadge) {
+            const shouldShow = this.updateNotificationsEnabled && this.updateAvailable;
+            updateBadge.classList.toggle('hidden', !shouldShow);
+        }
+        
+        if (cornerBadge) {
+            const shouldShow = this.updateNotificationsEnabled && this.updateAvailable;
+            cornerBadge.classList.toggle('hidden', !shouldShow);
+        }
+    }
+    
+    updateModalContent() {
+        const modal = document.getElementById('updateModal');
+        if (!modal) return;
+        
+        // Update title based on update availability
+        const headerTitle = modal.querySelector('.update-header h2');
+        if (headerTitle) {
+            headerTitle.textContent = this.updateAvailable ? "Update Available" : "Check for Updates";
+        }
+        
+        // Always update version information, even if updateInfo is null
+        const currentVersionEl = modal.querySelector('.current-version .version-number');
+        const newVersionEl = modal.querySelector('.new-version .version-number');
+        
+        if (currentVersionEl) currentVersionEl.textContent = this.currentVersion;
+        if (newVersionEl) newVersionEl.textContent = this.latestVersion;
+        
+        // Update changelog content if available
+        if (this.updateInfo && this.updateInfo.changelog) {
+            const changelogContent = modal.querySelector('.changelog-content');
+            if (changelogContent) {
+                changelogContent.innerHTML = ''; // Clear existing content
+                
+                // Create changelog item
+                const changelogItem = document.createElement('div');
+                changelogItem.className = 'changelog-item';
+                
+                const versionHeader = document.createElement('h4');
+                versionHeader.textContent = `Version ${this.latestVersion}`;
+                changelogItem.appendChild(versionHeader);
+                
+                // Create changelog list
+                const changelogList = document.createElement('ul');
+                
+                if (this.updateInfo.changelog && this.updateInfo.changelog.length > 0) {
+                    this.updateInfo.changelog.forEach(item => {
+                        const listItem = document.createElement('li');
+                        listItem.textContent = item;
+                        changelogList.appendChild(listItem);
+                    });
+                } else {
+                    // If no changelog items available
+                    const listItem = document.createElement('li');
+                    listItem.textContent = "No detailed changelog available. Check GitHub for more information.";
+                    changelogList.appendChild(listItem);
+                }
+                
+                changelogItem.appendChild(changelogList);
+                changelogContent.appendChild(changelogItem);
+            }
+        }
+        
+        // Update GitHub link to point to the specific release if available
+        const githubLink = modal.querySelector('.update-link');
+        if (githubLink && this.latestVersion) {
+            const versionTag = this.latestVersion.replace(/^v/, '');
+            githubLink.href = `https://github.com/willmiao/ComfyUI-Lora-Manager/releases/tag/v${versionTag}`;
+        }
+    }
+    
+    toggleUpdateModal() {
+        const updateModal = modalManager.getModal('updateModal');
+        
+        // If modal is already open, just close it
+        if (updateModal && updateModal.isOpen) {
+            modalManager.closeModal('updateModal');
+            return;
+        }
+        
+        // Update the modal content immediately with current data
+        this.updateModalContent();
+        
+        // Show the modal with current data
+        modalManager.showModal('updateModal');
+        
+        // Then check for updates in the background
+        this.manualCheckForUpdates().then(() => {
+            // Update the modal content again after the check completes
+            this.updateModalContent();
+        });
+    }
+    
+    showUpdateModal() {
+        this.toggleUpdateModal();
+    }
+    
+    async manualCheckForUpdates() {
+        this.lastCheckTime = 0; // Reset last check time to force check
+        await this.checkForUpdates();
+    }
+}
+
+// Create and export singleton instance
+export const updateService = new UpdateService();

static/js/state/index.js

@@ -7,5 +7,11 @@ export const state = {
     loadingManager: null,
     observer: null,
     previewVersions: new Map(),
-    searchManager: null  // 添加 searchManager
+    searchManager: null,
+    filters: {
+        baseModel: []
+    },
+    bulkMode: false,
+    selectedLoras: new Set(),
+    loraMetadataCache: new Map()
 };

static/js/utils/constants.js

@@ -0,0 +1,90 @@
+export const BASE_MODELS = {
+    // Stable Diffusion 1.x models
+    SD_1_4: "SD 1.4",
+    SD_1_5: "SD 1.5",
+    SD_1_5_LCM: "SD 1.5 LCM",
+    SD_1_5_HYPER: "SD 1.5 Hyper",
+    
+    // Stable Diffusion 2.x models
+    SD_2_0: "SD 2.0",
+    SD_2_1: "SD 2.1",
+    
+    // Stable Diffusion 3.x models
+    SD_3: "SD 3",
+    SD_3_5: "SD 3.5",
+    SD_3_5_MEDIUM: "SD 3.5 Medium",
+    SD_3_5_LARGE: "SD 3.5 Large",
+    SD_3_5_LARGE_TURBO: "SD 3.5 Large Turbo",
+    
+    // SDXL models
+    SDXL: "SDXL 1.0",
+    SDXL_LIGHTNING: "SDXL Lightning",
+    SDXL_HYPER: "SDXL Hyper",
+
+    // Other models
+    FLUX_1_D: "Flux.1 D",
+    FLUX_1_S: "Flux.1 S",
+    AURAFLOW: "AuraFlow",
+    PIXART_A: "PixArt a",
+    PIXART_E: "PixArt E",
+    HUNYUAN_1: "Hunyuan 1",
+    LUMINA: "Lumina",
+    KOLORS: "Kolors",
+    NOOBAI: "NoobAI",
+    IL: "IL",
+    PONY: "Pony",
+    
+    // Video models
+    SVD: "SVD",
+    WAN_VIDEO: "Wan Video",
+    HUNYUAN_VIDEO: "Hunyuan Video",
+    
+    // Default
+    UNKNOWN: "Unknown"
+};
+
+// Base model display names and their corresponding class names (for styling)
+export const BASE_MODEL_CLASSES = {
+    // Stable Diffusion 1.x models
+    [BASE_MODELS.SD_1_4]: "sd-1-4",
+    [BASE_MODELS.SD_1_5]: "sd-1-5",
+    [BASE_MODELS.SD_1_5_LCM]: "sd-1-5-lcm",
+    [BASE_MODELS.SD_1_5_HYPER]: "sd-1-5-hyper",
+    
+    // Stable Diffusion 2.x models
+    [BASE_MODELS.SD_2_0]: "sd-2-0",
+    [BASE_MODELS.SD_2_1]: "sd-2-1",
+    
+    // Stable Diffusion 3.x models
+    [BASE_MODELS.SD_3]: "sd-3",
+    [BASE_MODELS.SD_3_5]: "sd-3-5",
+    [BASE_MODELS.SD_3_5_MEDIUM]: "sd-3-5-medium",
+    [BASE_MODELS.SD_3_5_LARGE]: "sd-3-5-large",
+    [BASE_MODELS.SD_3_5_LARGE_TURBO]: "sd-3-5-large-turbo",
+    
+    // SDXL models
+    [BASE_MODELS.SDXL]: "sdxl",
+    [BASE_MODELS.SDXL_LIGHTNING]: "sdxl-lightning",
+    [BASE_MODELS.SDXL_HYPER]: "sdxl-hyper",
+    
+    // Video models
+    [BASE_MODELS.SVD]: "svd",
+    [BASE_MODELS.WAN_VIDEO]: "wan-video",
+    [BASE_MODELS.HUNYUAN_VIDEO]: "hunyuan-video",
+    
+    // Other models
+    [BASE_MODELS.FLUX_1_D]: "flux-d",
+    [BASE_MODELS.FLUX_1_S]: "flux-s",
+    [BASE_MODELS.AURAFLOW]: "auraflow",
+    [BASE_MODELS.PIXART_A]: "pixart-a",
+    [BASE_MODELS.PIXART_E]: "pixart-e",
+    [BASE_MODELS.HUNYUAN_1]: "hunyuan-1",
+    [BASE_MODELS.LUMINA]: "lumina",
+    [BASE_MODELS.KOLORS]: "kolors",
+    [BASE_MODELS.NOOBAI]: "noobai",
+    [BASE_MODELS.IL]: "il",
+    [BASE_MODELS.PONY]: "pony",
+    
+    // Default
+    [BASE_MODELS.UNKNOWN]: "unknown"
+};

static/js/utils/infiniteScroll.js

@@ -22,8 +22,15 @@ export function initializeInfiniteScroll() {
     } else {
         const sentinel = document.createElement('div');
         sentinel.id = 'scroll-sentinel';
-        sentinel.style.height = '10px';
+        sentinel.style.height = '20px'; // Increase height a bit
+        sentinel.style.width = '100%';  // Ensure full width
+        sentinel.style.position = 'relative'; // Ensure it's in the normal flow
         document.getElementById('loraGrid').appendChild(sentinel);
         state.observer.observe(sentinel);
     }
-} 
+
+    // Force layout recalculation
+    setTimeout(() => {
+        window.dispatchEvent(new Event('resize'));
+    }, 100);
+}

templates/components/controls.html

@@ -28,6 +28,11 @@
                 <i class="fas fa-cloud-download-alt"></i> Download
             </button>
         </div>
+        <div class="control-group">
+            <button id="bulkOperationsBtn" onclick="bulkManager.toggleBulkMode()" title="Bulk Operations">
+                <i class="fas fa-th-large"></i> Bulk
+            </button>
+        </div>
         <div class="search-container">
             <input type="text" id="searchInput" placeholder="Search models..." />
             <!-- 清空按钮将由JavaScript动态添加到这里 -->
@@ -35,6 +40,51 @@
             <button class="search-mode-toggle" id="searchModeToggle" title="Toggle recursive search in folders">
                 <i class="fas fa-folder"></i>
             </button>
+             <button class="search-filter-toggle" id="filterButton" onclick="filterManager.toggleFilterPanel()" title="Filter models">
+                <i class="fas fa-filter"></i>
+                <span class="filter-badge" id="activeFiltersCount" style="display: none">0</span>
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- Add filter panel -->
+<div id="filterPanel" class="filter-panel hidden">
+    <div class="filter-header">
+        <h3>Filter Models</h3>
+        <button class="close-filter-btn" onclick="filterManager.closeFilterPanel()">
+            <i class="fas fa-times"></i>
+        </button>
+    </div>
+    <div class="filter-section">
+        <h4>Base Model</h4>
+        <div class="filter-tags" id="baseModelTags">
+            <!-- Tags will be dynamically inserted here -->
+        </div>
+    </div>
+    <div class="filter-actions">
+        <button class="clear-filters-btn" onclick="filterManager.clearFilters()">
+            Clear All Filters
+        </button>
+    </div>
+</div>
+
+<!-- Add bulk operations panel (initially hidden) -->
+<div id="bulkOperationsPanel" class="bulk-operations-panel hidden">
+    <div class="bulk-operations-header">
+        <span id="selectedCount" class="selectable-count" title="Click to view selected items">
+            0 selected <i class="fas fa-caret-down dropdown-caret"></i>
+        </span>
+        <div class="bulk-operations-actions">
+            <button onclick="bulkManager.copyAllLorasSyntax()" title="Copy all selected LoRAs syntax">
+                <i class="fas fa-copy"></i> Copy All
+            </button>
+            <button onclick="moveManager.showMoveModal('bulk')" title="Move selected LoRAs to folder">
+                <i class="fas fa-folder-open"></i> Move All
+            </button>
+            <button onclick="bulkManager.clearSelection()" title="Clear selection">
+                <i class="fas fa-times"></i> Clear
+            </button>
         </div>
     </div>
 </div>

templates/components/modals.html

@@ -86,8 +86,10 @@
 <!-- Move Model Modal -->
 <div id="moveModal" class="modal">
     <div class="modal-content">
-        <button class="close" onclick="modalManager.closeModal('moveModal')">&times;</button>
-        <h2>Move Model</h2>
+        <div class="modal-header">
+            <h2 id="moveModalTitle">Move Model</h2>
+            <span class="close" onclick="modalManager.closeModal('moveModal')">&times;</span>
+        </div>
         <div class="location-selection">
             <div class="path-preview">
                 <label>Target Location Preview:</label>
@@ -159,4 +161,119 @@
             </a>
         </div>
     </div>
+</div>
+
+<!-- Support Modal -->
+<div id="supportModal" class="modal">
+    <div class="modal-content support-modal">
+        <button class="close" onclick="modalManager.closeModal('supportModal')">&times;</button>
+        <div class="support-header">
+            <i class="fas fa-heart support-icon"></i>
+            <h2>Support the Project</h2>
+        </div>
+        <div class="support-content">
+            <p>If you find LoRA Manager useful, I'd really appreciate your support! 🙌</p>
+            
+            <div class="support-section">
+                <h3><i class="fas fa-comment"></i> Provide Feedback</h3>
+                <p>Your feedback helps shape future updates! Share your thoughts:</p>
+                <div class="support-links">
+                    <a href="https://github.com/willmiao/ComfyUI-Lora-Manager/issues/new" class="social-link" target="_blank">
+                        <i class="fab fa-github"></i>
+                        <span>Submit GitHub Issue</span>
+                    </a>
+                    <a href="https://discord.gg/KK3dn4Jx" class="social-link" target="_blank">
+                        <i class="fab fa-discord"></i>
+                        <span>Join Discord</span>
+                    </a>
+                </div>
+            </div>
+            
+            <div class="support-section">
+                <h3><i class="fas fa-rss"></i> Follow for Updates</h3>
+                <div class="support-links">
+                    <a href="https://www.youtube.com/@pixelpaws-ai" class="social-link" target="_blank">
+                        <i class="fab fa-youtube"></i>
+                        <span>YouTube Channel</span>
+                    </a>
+                    <a href="https://civitai.com/user/PixelPawsAI" class="social-link civitai-link" target="_blank">
+                        <svg class="civitai-icon" viewBox="0 0 225 225" width="20" height="20">
+                            <g transform="translate(0,225) scale(0.1,-0.1)" fill="currentColor">
+                                <path d="M950 1899 c-96 -55 -262 -150 -367 -210 -106 -61 -200 -117 -208
+                                -125 -13 -13 -15 -76 -15 -443 0 -395 1 -429 18 -443 9 -9 116 -73 237 -143
+                                121 -70 283 -163 359 -208 76 -45 146 -80 155 -80 9 1 183 98 386 215 l370
+                                215 2 444 3 444 -376 215 c-206 118 -378 216 -382 217 -4 1 -86 -43 -182 -98z
+                                m346 -481 l163 -93 1 -57 0 -58 -89 0 c-87 0 -91 1 -166 44 l-78 45 -51 -30
+                                c-28 -17 -61 -35 -73 -41 -21 -10 -23 -18 -23 -99 l0 -87 71 -41 c39 -23 73
+                                -41 76 -41 3 0 37 18 75 40 68 39 72 40 164 40 l94 0 0 -53 c0 -60 23 -41
+                                -198 -168 l-133 -77 -92 52 c-51 29 -126 73 -167 97 l-75 45 0 193 0 192 164
+                                95 c91 52 167 94 169 94 2 0 78 -42 168 -92z"/>
+                            </g>
+                        </svg>
+                        <span>Civitai Profile</span>
+                    </a>
+                </div>
+            </div>
+            
+            <div class="support-section">
+                <h3><i class="fas fa-coffee"></i> Buy me a coffee</h3>
+                <p>If you'd like to support my work directly:</p>
+                <a href="https://ko-fi.com/pixelpawsai" class="kofi-button" target="_blank">
+                    <i class="fas fa-mug-hot"></i>
+                    <span>Support on Ko-fi</span>
+                </a>
+            </div>
+            
+            <div class="support-footer">
+                <p>Thank you for using LoRA Manager! ❤️</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Update Modal -->
+<div id="updateModal" class="modal">
+    <div class="modal-content update-modal">
+        <button class="close" onclick="modalManager.closeModal('updateModal')">&times;</button>
+        <div class="update-header">
+            <i class="fas fa-bell update-icon"></i>
+            <h2>Check for Updates</h2>
+        </div>
+        <div class="update-content">
+            <div class="update-info">
+                <div class="version-info">
+                    <div class="current-version">
+                        <span class="label">Current Version:</span>
+                        <span class="version-number">v0.0.0</span>
+                    </div>
+                    <div class="new-version">
+                        <span class="label">New Version:</span>
+                        <span class="version-number">v0.0.0</span>
+                    </div>
+                </div>
+                <a href="https://github.com/willmiao/ComfyUI-Lora-Manager" target="_blank" class="update-link">
+                    <i class="fas fa-external-link-alt"></i> View on GitHub
+                </a>
+            </div>
+            
+            <div class="changelog-section">
+                <h3>Changelog</h3>
+                <div class="changelog-content">
+                    <!-- Dynamic changelog content will be inserted here -->
+                    <div class="changelog-item">
+                        <h4>Checking for updates...</h4>
+                        <p>Please wait while we check for the latest version.</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="update-preferences">
+                <label class="toggle-switch">
+                    <input type="checkbox" id="updateNotifications" checked>
+                    <span class="toggle-slider"></span>
+                    <span class="toggle-label">Show update notifications</span>
+                </label>
+            </div>
+        </div>
+    </div>
 </div>

templates/loras.html

@@ -47,12 +47,25 @@
 </head>
 <body>
     <div class="corner-controls">
-        <div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
-            <img src="/loras_static/images/theme-toggle-light.svg" alt="Theme" class="theme-icon light-icon">
-            <img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">
+        <div class="corner-controls-toggle">
+            <i class="fas fa-ellipsis-v"></i>
+            <span class="update-badge corner-badge hidden"></span>
         </div>
-        <div class="settings-toggle" onclick="settingsManager.toggleSettings()" title="Settings">
-            <i class="fas fa-cog"></i>
+        <div class="corner-controls-items">
+            <div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
+                <img src="/loras_static/images/theme-toggle-light.svg" alt="Theme" class="theme-icon light-icon">
+                <img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">
+            </div>
+            <div class="update-toggle" id="updateToggleBtn" title="Check Updates">
+                <i class="fas fa-bell"></i>
+                <span class="update-badge hidden"></span>
+            </div>
+            <div class="support-toggle" id="supportToggleBtn" title="Support">
+                <i class="fas fa-heart"></i>
+            </div>
+            <div class="settings-toggle" onclick="settingsManager.toggleSettings()" title="Settings">
+                <i class="fas fa-cog"></i>
+            </div>
         </div>
     </div>
     
@@ -72,12 +85,16 @@
         {% else %}
             {% include 'components/controls.html' %}
             <!-- Lora卡片容器 -->
-            <div class="card-grid" id="loraGrid">
+            <div class="card-grid" id="loraGrid" style="height: calc(100vh - [header-height]px); overflow-y: auto;">
                 <!-- Cards will be dynamically inserted here -->
             </div>
+            <!-- Bulk operations panel will be inserted here by JavaScript -->
         {% endif %}
     </div>
 
+    <!-- Add after the container div -->
+    <div class="bulk-mode-overlay"></div>
+
     <script type="module" src="/loras_static/js/main.js"></script>
     {% if is_initializing %}
     <script>