Bump version to 0.7.39

README.md

@@ -13,6 +13,13 @@ Watch this quick tutorial to learn how to use the new one-click LoRA integration
 
 ## Release Notes
 
+### v0.7.37
+* Added NSFW content control settings (blur mature content and SFW-only filter)
+* Implemented intelligent blur effects for previews and showcase media
+* Added manual content rating option through context menu
+* Enhanced user experience with configurable content visibility
+* Fixed various bugs and improved stability
+
 ### v0.7.36
 * Enhanced LoRA details view with model descriptions and tags display
 * Added tag filtering system for improved model discovery

py/nodes/lora_loader.py

@@ -26,8 +26,8 @@ class LoraManagerLoader:
             "optional": FlexibleOptionalInputType(any_type),
         }
 
-    RETURN_TYPES = ("MODEL", "CLIP", IO.STRING)
-    RETURN_NAMES = ("MODEL", "CLIP", "trigger_words")
+    RETURN_TYPES = ("MODEL", "CLIP", IO.STRING, IO.STRING)
+    RETURN_NAMES = ("MODEL", "CLIP", "trigger_words", "loaded_loras")
     FUNCTION = "load_loras"
 
     async def get_lora_info(self, lora_name):
@@ -95,5 +95,9 @@ class LoraManagerLoader:
         
         # use ',, ' to separate trigger words for group mode
         trigger_words_text = ",, ".join(all_trigger_words) if all_trigger_words else ""
+        
+        # Format loaded_loras as <lora:lora_name:strength> separated by spaces
+        formatted_loras = " ".join([f"<lora:{name.split(':')[0].strip()}:{str(strength).strip()}>" 
+                                  for name, strength in [item.split(':') for item in loaded_loras]])
 
-        return (model, clip, trigger_words_text)
+        return (model, clip, trigger_words_text, formatted_loras)

py/nodes/lora_stacker.py

@@ -80,7 +80,8 @@ class LoraStacker:
                 lora_path, trigger_words = asyncio.run(self.get_lora_info(lora_name))
                 
                 # Add to stack without loading
-                stack.append((lora_path, model_strength, clip_strength))
+                # replace '/' with os.sep to avoid different OS path format
+                stack.append((lora_path.replace('/', os.sep), model_strength, clip_strength))
                 
                 # Add trigger words to collection
                 all_trigger_words.extend(trigger_words)

py/nodes/trigger_word_toggle.py

@@ -25,7 +25,6 @@ class TriggerWordToggle:
     FUNCTION = "process_trigger_words"
 
     def process_trigger_words(self, id, group_mode, **kwargs):
-        print("process_trigger_words kwargs: ", kwargs)
         trigger_words = kwargs.get("trigger_words", "")
         # Send trigger words to frontend
         PromptServer.instance.send_sync("trigger_word_update", {

py/routes/api_routes.py

@@ -4,6 +4,8 @@ import logging
 from aiohttp import web
 from typing import Dict, List
 
+from ..utils.model_utils import determine_base_model
+
 from ..services.file_monitor import LoraFileMonitor
 from ..services.download_manager import DownloadManager
 from ..services.civitai_client import CivitaiClient
@@ -200,6 +202,7 @@ class ApiRoutes:
             "model_name": lora["model_name"],
             "file_name": lora["file_name"],
             "preview_url": config.get_preview_static_url(lora["preview_url"]),
+            "preview_nsfw_level": lora.get("preview_nsfw_level", 0),
             "base_model": lora["base_model"],
             "folder": lora["folder"],
             "sha256": lora["sha256"],
@@ -350,19 +353,19 @@ class ApiRoutes:
         
         # Update model name if available
         if 'model' in civitai_metadata:
-            local_metadata['model_name'] = civitai_metadata['model'].get('name', 
-                                                                       local_metadata.get('model_name'))
+            if civitai_metadata.get('model', {}).get('name'):
+                local_metadata['model_name'] = civitai_metadata['model']['name']
         
             # Fetch additional model metadata (description and tags) if we have model ID
             model_id = civitai_metadata['modelId']
             if model_id:
-                model_metadata = await client.get_model_metadata(str(model_id))
+                model_metadata, _ = await client.get_model_metadata(str(model_id))
                 if model_metadata:
                     local_metadata['modelDescription'] = model_metadata.get('description', '')
                     local_metadata['tags'] = model_metadata.get('tags', [])
         
         # Update base model
-        local_metadata['base_model'] = civitai_metadata.get('baseModel')
+        local_metadata['base_model'] = determine_base_model(civitai_metadata.get('baseModel'))
         
         # Update preview if needed
         if not local_metadata.get('preview_url') or not os.path.exists(local_metadata['preview_url']):
@@ -375,6 +378,7 @@ class ApiRoutes:
                 
                 if await client.download_preview_image(first_preview['url'], preview_path):
                     local_metadata['preview_url'] = preview_path.replace(os.sep, '/')
+                    local_metadata['preview_nsfw_level'] = first_preview.get('nsfwLevel', 0)
 
         # Save updated metadata
         with open(metadata_path, 'w', encoding='utf-8') as f:
@@ -525,13 +529,24 @@ class ApiRoutes:
             
             # Check local availability for each version
             for version in versions:
-                for file in version.get('files', []):
-                    sha256 = file.get('hashes', {}).get('SHA256')
+                # Find the model file (type="Model") in the files list
+                model_file = next((file for file in version.get('files', []) 
+                                  if file.get('type') == 'Model'), None)
+                
+                if model_file:
+                    sha256 = model_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)
+                        # Set existsLocally and localPath at the version level
+                        version['existsLocally'] = self.scanner.has_lora_hash(sha256)
+                        if version['existsLocally']:
+                            version['localPath'] = self.scanner.get_lora_path_by_hash(sha256)
                         
+                        # Also set the model file size at the version level for easier access
+                        version['modelSizeKB'] = model_file.get('sizeKB')
+                else:
+                    # No model file found in this version
+                    version['existsLocally'] = False
+                    
             return web.json_response(versions)
         except Exception as e:
             logger.error(f"Error fetching model versions: {e}")
@@ -572,6 +587,8 @@ class ApiRoutes:
             # Validate and update settings
             if 'civitai_api_key' in data:
                 settings.set('civitai_api_key', data['civitai_api_key'])
+            if 'show_only_sfw' in data:
+                settings.set('show_only_sfw', data['show_only_sfw'])
             
             return web.json_response({'success': True})
         except Exception as e:
@@ -756,7 +773,7 @@ class ApiRoutes:
             # If description is not in metadata, fetch from CivitAI
             if not description:
                 logger.info(f"Fetching model metadata for model ID: {model_id}")
-                model_metadata = await self.civitai_client.get_model_metadata(model_id)
+                model_metadata, _ = await self.civitai_client.get_model_metadata(model_id)
                 
                 if model_metadata:
                     description = model_metadata.get('description')

py/routes/lora_routes.py

@@ -26,6 +26,7 @@ class LoraRoutes:
             "model_name": lora["model_name"],
             "file_name": lora["file_name"],   
             "preview_url": config.get_preview_static_url(lora["preview_url"]),
+            "preview_nsfw_level": lora.get("preview_nsfw_level", 0),
             "base_model": lora["base_model"],
             "folder": lora["folder"],
             "sha256": lora["sha256"],

py/services/civitai_client.py

@@ -163,50 +163,51 @@ class CivitaiClient:
             logger.error(f"Error fetching model version info: {e}")
             return None
 
-    async def get_model_metadata(self, model_id: str) -> Optional[Dict]:
+    async def get_model_metadata(self, model_id: str) -> Tuple[Optional[Dict], int]:
         """Fetch model metadata (description and tags) from Civitai API
         
         Args:
             model_id: The Civitai model ID
             
         Returns:
-            Optional[Dict]: A dictionary containing model metadata or None if not found
+            Tuple[Optional[Dict], int]: A tuple containing:
+                - A dictionary with model metadata or None if not found
+                - The HTTP status code from the request
         """
         try:
             session = await self.session
             headers = self._get_request_headers()
             url = f"{self.base_url}/models/{model_id}"
             
-            logger.info(f"Fetching model metadata from {url}")
-            
             async with session.get(url, headers=headers) as response:
-                if response.status != 200:
-                    logger.warning(f"Failed to fetch model metadata: Status {response.status}")
-                    return None
+                status_code = response.status
+                
+                if status_code != 200:
+                    logger.warning(f"Failed to fetch model metadata: Status {status_code}")
+                    return None, status_code
                 
                 data = await response.json()
                 
                 # Extract relevant metadata
                 metadata = {
-                    "description": data.get("description", ""),
+                    "description": data.get("description") or "No model description available",
                     "tags": data.get("tags", [])
                 }
                 
                 if metadata["description"] or metadata["tags"]:
-                    logger.info(f"Successfully retrieved metadata for model {model_id}")
-                    return metadata
+                    return metadata, status_code
                 else:
                     logger.warning(f"No metadata found for model {model_id}")
-                    return None
+                    return None, status_code
                 
         except Exception as e:
             logger.error(f"Error fetching model metadata: {e}", exc_info=True)
-            return None
+            return None, 0
 
     # Keep old method for backward compatibility, delegating to the new one
     async def get_model_description(self, model_id: str) -> Optional[str]:
         """Fetch the model description from Civitai API (Legacy method)"""
-        metadata = await self.get_model_metadata(model_id)
+        metadata, _ = await self.get_model_metadata(model_id)
         return metadata.get("description") if metadata else None
 
     async def close(self):

py/services/download_manager.py

@@ -51,6 +51,16 @@ class DownloadManager:
             # 5. 准备元数据
             metadata = LoraMetadata.from_civitai_info(version_info, file_info, save_path)
             
+            # 5.1 获取并更新模型标签和描述信息
+            model_id = version_info.get('modelId')
+            if model_id:
+                model_metadata, _ = await self.civitai_client.get_model_metadata(str(model_id))
+                if model_metadata:
+                    if model_metadata.get("tags"):
+                        metadata.tags = model_metadata.get("tags", [])
+                    if model_metadata.get("description"):
+                        metadata.modelDescription = model_metadata.get("description", "")
+            
             # 6. 开始下载流程
             result = await self._execute_download(
                 download_url=download_url,
@@ -86,6 +96,7 @@ class DownloadManager:
                 preview_path = os.path.splitext(save_path)[0] + '.preview' + preview_ext
                 if await self.civitai_client.download_preview_image(images[0]['url'], preview_path):
                     metadata.preview_url = preview_path.replace(os.sep, '/')
+                    metadata.preview_nsfw_level = images[0].get('nsfwLevel', 0)
                     with open(metadata_path, 'w', encoding='utf-8') as f:
                         json.dump(metadata.to_dict(), f, indent=2, ensure_ascii=False)
 
@@ -125,6 +136,9 @@ class DownloadManager:
             all_folders.add(relative_path)
             cache.folders = sorted(list(all_folders), key=lambda x: x.lower())
 
+            # Update the hash index with the new LoRA entry
+            self.file_monitor.scanner._hash_index.add_entry(metadata_dict['sha256'], metadata_dict['file_path'])
+
             # Report 100% completion
             if progress_callback:
                 await progress_callback(100)

py/services/lora_scanner.py

@@ -11,6 +11,8 @@ 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
+from .settings_manager import settings
+from ..utils.constants import NSFW_LEVELS
 
 logger = logging.getLogger(__name__)
 
@@ -100,7 +102,7 @@ class LoraScanner:
             # Build hash index and tags count
             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'])
+                    self._hash_index.add_entry(lora_data['sha256'].lower(), lora_data['file_path'])
                 
                 # Count tags
                 if 'tags' in lora_data and lora_data['tags']:
@@ -196,6 +198,13 @@ class LoraScanner:
         # Get the base data set
         filtered_data = cache.sorted_by_date if sort_by == 'date' else cache.sorted_by_name
         
+        # Apply SFW filtering if enabled
+        if settings.get('show_only_sfw', False):
+            filtered_data = [
+                item for item in filtered_data
+                if not item.get('preview_nsfw_level') or item.get('preview_nsfw_level') < NSFW_LEVELS['R']
+            ]
+        
         # Apply folder filtering
         if folder is not None:
             if recursive:
@@ -384,6 +393,11 @@ class LoraScanner:
             lora_data: Lora metadata dictionary to update
         """
         try:
+            # Skip if already marked as deleted on Civitai
+            if lora_data.get('civitai_deleted', False):
+                logger.debug(f"Skipping metadata fetch for {file_path}: marked as deleted on Civitai")
+                return
+
             # Check if we need to fetch additional metadata from Civitai
             needs_metadata_update = False
             model_id = None
@@ -405,14 +419,28 @@ class LoraScanner:
             
             # Fetch missing metadata if needed
             if needs_metadata_update and model_id:
-                logger.info(f"Fetching missing metadata for {file_path} with model ID {model_id}")
+                logger.debug(f"Fetching missing metadata for {file_path} with model ID {model_id}")
                 from ..services.civitai_client import CivitaiClient
                 client = CivitaiClient()
-                model_metadata = await client.get_model_metadata(model_id)
+                
+                # Get metadata and status code
+                model_metadata, status_code = await client.get_model_metadata(model_id)
                 await client.close()
                 
-                if (model_metadata):
-                    logger.info(f"Updating metadata for {file_path} with model ID {model_id}")
+                # Handle 404 status (model deleted from Civitai)
+                if status_code == 404:
+                    logger.warning(f"Model {model_id} appears to be deleted from Civitai (404 response)")
+                    # Mark as deleted to avoid future API calls
+                    lora_data['civitai_deleted'] = True
+                    
+                    # Save the updated metadata back to file
+                    metadata_path = os.path.splitext(file_path)[0] + '.metadata.json'
+                    with open(metadata_path, 'w', encoding='utf-8') as f:
+                        json.dump(lora_data, f, indent=2, ensure_ascii=False)
+                
+                # Process valid metadata if available
+                elif model_metadata:
+                    logger.debug(f"Updating metadata for {file_path} with model ID {model_id}")
                     
                     # Update tags if they were missing
                     if model_metadata.get('tags') and (not lora_data.get('tags') or len(lora_data.get('tags', [])) == 0):
@@ -621,15 +649,15 @@ class LoraScanner:
     # 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)
+        return self._hash_index.has_hash(sha256.lower())
         
     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)
+        return self._hash_index.get_path(sha256.lower())
         
     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)
+        return self._hash_index.get_hash(file_path) 
 
     # Add new method to get top tags
     async def get_top_tags(self, limit: int = 20) -> List[Dict[str, any]]:

py/services/settings_manager.py

@@ -37,7 +37,8 @@ class SettingsManager:
     def _get_default_settings(self) -> Dict[str, Any]:
         """Return default settings"""
         return {
-            "civitai_api_key": ""
+            "civitai_api_key": "",
+            "show_only_sfw": False
         }
 
     def get(self, key: str, default: Any = None) -> Any:

py/utils/constants.py

@@ -0,0 +1,8 @@
+NSFW_LEVELS = {
+    "PG": 1,
+    "PG13": 2,
+    "R": 4,
+    "X": 8,
+    "XXX": 16,
+    "Blocked": 32, # Probably not actually visible through the API without being logged in on model owner account?
+}

py/utils/file_utils.py

@@ -4,6 +4,8 @@ import hashlib
 import json
 from typing import Dict, Optional
 
+from .model_utils import determine_base_model
+
 from .lora_metadata import extract_lora_metadata
 from .models import LoraMetadata
 
@@ -105,9 +107,18 @@ async def load_metadata(file_path: str) -> Optional[LoraMetadata]:
                 data = json.load(f)
                 
                 needs_update = False
+
+                # Check and normalize base model name
+                normalized_base_model = determine_base_model(data['base_model'])
+                if data['base_model'] != normalized_base_model:
+                    data['base_model'] = normalized_base_model
+                    needs_update = True
                 
-                if data['file_path'] != normalize_path(data['file_path']):
-                    data['file_path'] = normalize_path(data['file_path'])
+                # Compare paths without extensions
+                stored_path_base = os.path.splitext(data['file_path'])[0]
+                current_path_base = os.path.splitext(normalize_path(file_path))[0]
+                if stored_path_base != current_path_base:
+                    data['file_path'] = normalize_path(file_path)
                     needs_update = True
                 
                 preview_url = data.get('preview_url', '')
@@ -118,11 +129,15 @@ async def load_metadata(file_path: str) -> Optional[LoraMetadata]:
                     if new_preview_url != preview_url:
                         data['preview_url'] = new_preview_url
                         needs_update = True
-                elif preview_url != normalize_path(preview_url):
-                    data['preview_url'] = normalize_path(preview_url)
-                    needs_update = True
+                else:
+                    # Compare preview paths without extensions
+                    stored_preview_base = os.path.splitext(preview_url)[0]
+                    current_preview_base = os.path.splitext(normalize_path(preview_url))[0]
+                    if stored_preview_base != current_preview_base:
+                        data['preview_url'] = normalize_path(preview_url)
+                        needs_update = True
 
-                # Ensure all fields are present, due to updates adding new fields
+                # Ensure all fields are present
                 if 'tags' not in data:
                     data['tags'] = []
                     needs_update = True

py/utils/model_utils.py

@@ -8,7 +8,8 @@ BASE_MODEL_MAPPING = {
     "sd-v2": "SD 2.0",
     "flux1": "Flux.1 D",
     "flux.1 d": "Flux.1 D",
-    "illustrious": "IL",
+    "illustrious": "Illustrious",
+    "il": "Illustrious",
     "pony": "Pony",
     "Hunyuan Video": "Hunyuan Video"
 }

py/utils/models.py

@@ -15,6 +15,7 @@ class LoraMetadata:
     sha256: str                 # SHA256 hash of the file
     base_model: str             # Base model (SD1.5/SD2.1/SDXL/etc.)
     preview_url: str            # Preview image URL
+    preview_nsfw_level: int = 0 # NSFW level of the preview image
     usage_tips: str = "{}"      # Usage tips for the model, json string
     notes: str = ""             # Additional notes
     from_civitai: bool = True   # Whether the lora is from Civitai
@@ -46,9 +47,10 @@ class LoraMetadata:
             file_path=save_path.replace(os.sep, '/'),
             size=file_info.get('sizeKB', 0) * 1024,
             modified=datetime.now().timestamp(),
-            sha256=file_info['hashes'].get('SHA256', ''),
+            sha256=file_info['hashes'].get('SHA256', '').lower(),
             base_model=base_model,
             preview_url=None,  # Will be updated after preview download
+            preview_nsfw_level=0, # Will be updated after preview download, it is decided by the nsfw level of the preview image
             from_civitai=True,
             civitai=version_info
         )

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

static/css/components/bulk.css

@@ -262,6 +262,83 @@
     background: var(--lora-accent);
 }
 
+/* NSFW Level Selector */
+.nsfw-level-selector {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-base);
+    padding: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    z-index: var(--z-modal);
+    width: 300px;
+    display: none;
+}
+
+.nsfw-level-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.nsfw-level-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.close-nsfw-selector {
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--border-radius-xs);
+}
+
+.close-nsfw-selector:hover {
+    background: var(--border-color);
+}
+
+.current-level {
+    margin-bottom: 12px;
+    padding: 8px;
+    background: var(--bg-color);
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+}
+
+.nsfw-level-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.nsfw-level-btn {
+    flex: 1 0 calc(33% - 8px);
+    padding: 8px;
+    border-radius: var(--border-radius-xs);
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.nsfw-level-btn:hover {
+    background: var(--lora-border);
+}
+
+.nsfw-level-btn.active {
+    background: var(--lora-accent);
+    color: white;
+    border-color: var(--lora-accent);
+}
+
 /* Mobile optimizations */
 @media (max-width: 768px) {
     .selected-thumbnails-strip {

static/css/components/card.css

@@ -60,6 +60,96 @@
     object-position: center top; /* Align the top of the image with the top of the container */
 }
 
+/* NSFW Content Blur */
+.card-preview.blurred img,
+.card-preview.blurred video {
+    filter: blur(25px);
+}
+
+.nsfw-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    pointer-events: none;
+}
+
+.nsfw-warning {
+    text-align: center;
+    color: white;
+    background: rgba(0, 0, 0, 0.6);
+    padding: var(--space-2);
+    border-radius: var(--border-radius-base);
+    backdrop-filter: blur(4px);
+    max-width: 80%;
+    pointer-events: auto;
+}
+
+.nsfw-warning p {
+    margin: 0 0 var(--space-1);
+    font-weight: bold;
+    font-size: 1.1em;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+.toggle-blur-btn {
+    position: absolute;
+    left: var(--space-1);
+    top: var(--space-1);
+    background: rgba(0, 0, 0, 0.5);
+    border: none;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    cursor: pointer;
+    z-index: 3;
+    transition: background-color 0.2s, transform 0.2s;
+}
+
+.toggle-blur-btn:hover {
+    background: rgba(0, 0, 0, 0.7);
+    transform: scale(1.1);
+}
+
+.toggle-blur-btn i {
+    font-size: 0.9em;
+}
+
+.show-content-btn {
+    background: var(--lora-accent);
+    color: white;
+    border: none;
+    border-radius: var(--border-radius-xs);
+    padding: 4px var(--space-1);
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: background-color 0.2s, transform 0.2s;
+}
+
+.show-content-btn:hover {
+    background: oklch(58% 0.28 256);
+    transform: scale(1.05);
+}
+
+/* Adjust base model label positioning when toggle button is present */
+.base-model-label.with-toggle {
+    margin-left: 28px; /* Make room for the toggle button */
+}
+
+/* Ensure card actions remain clickable */
+.card-header .card-actions {
+    z-index: 3;
+}
+
 .card-footer {
     position: absolute;
     bottom: 0;

static/css/components/lora-modal.css

@@ -998,4 +998,40 @@
 [data-theme="dark"] .tooltip-tag {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid var(--lora-border);
+}
+
+/* Add styles for blurred showcase content */
+.nsfw-media-wrapper {
+    position: relative;
+}
+
+.media-wrapper img.blurred,
+.media-wrapper video.blurred {
+    filter: blur(25px);
+}
+
+.media-wrapper .nsfw-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    pointer-events: none;
+}
+
+/* Position the toggle button at the top left of showcase media */
+.showcase-toggle-btn {
+    position: absolute;
+    left: var(--space-1);
+    top: var(--space-1);
+    z-index: 3;
+}
+
+/* Make sure media wrapper maintains position: relative for absolute positioning of children */
+.carousel .media-wrapper {
+    position: relative;
 }

static/css/components/modal.css

@@ -323,4 +323,124 @@ body.modal-open {
 [data-theme="dark"] .path-preview {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid var(--lora-border);
+}
+
+/* Settings Styles */
+.settings-section {
+    margin-top: var(--space-3);
+    border-top: 1px solid var(--lora-border);
+    padding-top: var(--space-2);
+}
+
+.settings-section h3 {
+    font-size: 1.1em;
+    margin-bottom: var(--space-2);
+    color: var(--text-color);
+    opacity: 0.9;
+}
+
+.setting-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: var(--space-2);
+    padding: var(--space-1);
+    border-radius: var(--border-radius-xs);
+}
+
+.setting-item:hover {
+    background: rgba(0, 0, 0, 0.02);
+}
+
+[data-theme="dark"] .setting-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.setting-info {
+    flex: 1;
+}
+
+.setting-info label {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: 500;
+}
+
+.setting-control {
+    padding-left: var(--space-2);
+}
+
+/* Toggle Switch */
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggle-slider {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--border-color);
+    transition: .3s;
+    border-radius: 24px;
+}
+
+.toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: .3s;
+    border-radius: 50%;
+}
+
+input:checked + .toggle-slider {
+    background-color: var(--lora-accent);
+}
+
+input:checked + .toggle-slider:before {
+    transform: translateX(26px);
+}
+
+.toggle-label {
+    margin-left: 60px;
+    line-height: 24px;
+}
+
+/* Add small animation for the toggle */
+.toggle-slider:active:before {
+    width: 22px;
+}
+
+/* Update input help styles */
+.input-help {
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.7;
+    margin-top: 4px;
+    line-height: 1.4;
+}
+
+/* Blur effect for NSFW content */
+.nsfw-blur {
+    filter: blur(12px);
+    transition: filter 0.3s ease;
+}
+
+.nsfw-blur:hover {
+    filter: blur(8px);
 }

static/css/components/update-modal.css

@@ -153,56 +153,43 @@
     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;
+    justify-content: flex-start;
+}
+
+/* Override toggle switch styles for update preferences */
+.update-preferences .toggle-switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+    height: 24px;
     cursor: pointer;
-    user-select: none;
 }
 
-.toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-    position: absolute;
-}
-
-.toggle-slider {
+.update-preferences .toggle-slider {
     position: relative;
     display: inline-block;
-    width: 40px;
-    height: 20px;
-    background-color: var(--border-color);
-    border-radius: 20px;
-    transition: .4s;
+    width: 50px;
+    height: 24px;
     flex-shrink: 0;
+    margin-right: 10px;
 }
 
-.toggle-slider:before {
-    position: absolute;
-    content: "";
-    height: 16px;
-    width: 16px;
-    left: 2px;
-    bottom: 2px;
-    background-color: white;
-    border-radius: 50%;
-    transition: .4s;
+.update-preferences .toggle-label {
+    margin-left: 0;
+    white-space: nowrap;
+    line-height: 24px;
 }
 
-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);
+@media (max-width: 480px) {
+    .update-preferences {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    
+    .update-preferences .toggle-label {
+        margin-top: 5px;
+    }
 }

static/js/components/ContextMenu.js

@@ -1,9 +1,12 @@
 import { refreshSingleLoraMetadata } from '../api/loraApi.js';
+import { showToast, getNSFWLevelName } from '../utils/uiHelpers.js';
+import { NSFW_LEVELS } from '../utils/constants.js';
 
 export class LoraContextMenu {
     constructor() {
         this.menu = document.getElementById('loraContextMenu');
         this.currentCard = null;
+        this.nsfwSelector = document.getElementById('nsfwLevelSelector');
         this.init();
     }
 
@@ -58,10 +61,274 @@ export class LoraContextMenu {
                 case 'refresh-metadata':
                     refreshSingleLoraMetadata(this.currentCard.dataset.filepath);
                     break;
+                case 'set-nsfw':
+                    this.showNSFWLevelSelector(null, null, this.currentCard);
+                    break;
             }
             
             this.hideMenu();
         });
+
+        // Initialize NSFW Level Selector events
+        this.initNSFWSelector();
+    }
+
+    initNSFWSelector() {
+        // Close button
+        const closeBtn = this.nsfwSelector.querySelector('.close-nsfw-selector');
+        closeBtn.addEventListener('click', () => {
+            this.nsfwSelector.style.display = 'none';
+        });
+
+        // Level buttons
+        const levelButtons = this.nsfwSelector.querySelectorAll('.nsfw-level-btn');
+        levelButtons.forEach(btn => {
+            btn.addEventListener('click', async () => {
+                const level = parseInt(btn.dataset.level);
+                const filePath = this.nsfwSelector.dataset.cardPath;
+                
+                if (!filePath) return;
+                
+                try {
+                    await this.saveModelMetadata(filePath, { preview_nsfw_level: level });
+                    
+                    // Update card data
+                    const card = document.querySelector(`.lora-card[data-filepath="${filePath}"]`);
+                    if (card) {
+                        let metaData = {};
+                        try {
+                            metaData = JSON.parse(card.dataset.meta || '{}');
+                        } catch (err) {
+                            console.error('Error parsing metadata:', err);
+                        }
+                        
+                        metaData.preview_nsfw_level = level;
+                        card.dataset.meta = JSON.stringify(metaData);
+                        card.dataset.nsfwLevel = level.toString();
+                        
+                        // Apply blur effect immediately
+                        this.updateCardBlurEffect(card, level);
+                    }
+                    
+                    showToast(`Content rating set to ${getNSFWLevelName(level)}`, 'success');
+                    this.nsfwSelector.style.display = 'none';
+                } catch (error) {
+                    showToast(`Failed to set content rating: ${error.message}`, 'error');
+                }
+            });
+        });
+        
+        // Close when clicking outside
+        document.addEventListener('click', (e) => {
+            if (this.nsfwSelector.style.display === 'block' && 
+                !this.nsfwSelector.contains(e.target) && 
+                !e.target.closest('.context-menu-item[data-action="set-nsfw"]')) {
+                this.nsfwSelector.style.display = 'none';
+            }
+        });
+    }
+
+    async saveModelMetadata(filePath, data) {
+        const response = await fetch('/loras/api/save-metadata', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                file_path: filePath,
+                ...data
+            })
+        });
+    
+        if (!response.ok) {
+            throw new Error('Failed to save metadata');
+        }
+        
+        return await response.json();
+    }
+
+    updateCardBlurEffect(card, level) {
+        // Get user settings for blur threshold
+        const blurThreshold = parseInt(localStorage.getItem('nsfwBlurLevel') || '4');
+        
+        // Get card preview container
+        const previewContainer = card.querySelector('.card-preview');
+        if (!previewContainer) return;
+        
+        // Get preview media element
+        const previewMedia = previewContainer.querySelector('img') || previewContainer.querySelector('video');
+        if (!previewMedia) return;
+        
+        // Check if blur should be applied
+        if (level >= blurThreshold) {
+            // Add blur class to the preview container
+            previewContainer.classList.add('blurred');
+            
+            // Get or create the NSFW overlay
+            let nsfwOverlay = previewContainer.querySelector('.nsfw-overlay');
+            if (!nsfwOverlay) {
+                // Create new overlay
+                nsfwOverlay = document.createElement('div');
+                nsfwOverlay.className = 'nsfw-overlay';
+                
+                // Create and configure the warning content
+                const warningContent = document.createElement('div');
+                warningContent.className = 'nsfw-warning';
+                
+                // Determine NSFW warning text based on level
+                let nsfwText = "Mature Content";
+                if (level >= NSFW_LEVELS.XXX) {
+                    nsfwText = "XXX-rated Content";
+                } else if (level >= NSFW_LEVELS.X) {
+                    nsfwText = "X-rated Content";
+                } else if (level >= NSFW_LEVELS.R) {
+                    nsfwText = "R-rated Content";
+                }
+                
+                // Add warning text and show button
+                warningContent.innerHTML = `
+                    <p>${nsfwText}</p>
+                    <button class="show-content-btn">Show</button>
+                `;
+                
+                // Add click event to the show button
+                const showBtn = warningContent.querySelector('.show-content-btn');
+                showBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    previewContainer.classList.remove('blurred');
+                    nsfwOverlay.style.display = 'none';
+                    
+                    // Update toggle button icon if it exists
+                    const toggleBtn = card.querySelector('.toggle-blur-btn');
+                    if (toggleBtn) {
+                        toggleBtn.querySelector('i').className = 'fas fa-eye-slash';
+                    }
+                });
+                
+                nsfwOverlay.appendChild(warningContent);
+                previewContainer.appendChild(nsfwOverlay);
+            } else {
+                // Update existing overlay
+                const warningText = nsfwOverlay.querySelector('p');
+                if (warningText) {
+                    let nsfwText = "Mature Content";
+                    if (level >= NSFW_LEVELS.XXX) {
+                        nsfwText = "XXX-rated Content";
+                    } else if (level >= NSFW_LEVELS.X) {
+                        nsfwText = "X-rated Content";
+                    } else if (level >= NSFW_LEVELS.R) {
+                        nsfwText = "R-rated Content";
+                    }
+                    warningText.textContent = nsfwText;
+                }
+                nsfwOverlay.style.display = 'flex';
+            }
+            
+            // Get or create the toggle button in the header
+            const cardHeader = previewContainer.querySelector('.card-header');
+            if (cardHeader) {
+                let toggleBtn = cardHeader.querySelector('.toggle-blur-btn');
+                
+                if (!toggleBtn) {
+                    toggleBtn = document.createElement('button');
+                    toggleBtn.className = 'toggle-blur-btn';
+                    toggleBtn.title = 'Toggle blur';
+                    toggleBtn.innerHTML = '<i class="fas fa-eye"></i>';
+                    
+                    // Add click event to toggle button
+                    toggleBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        const isBlurred = previewContainer.classList.toggle('blurred');
+                        const icon = toggleBtn.querySelector('i');
+                        
+                        // Update icon and overlay visibility
+                        if (isBlurred) {
+                            icon.className = 'fas fa-eye';
+                            nsfwOverlay.style.display = 'flex';
+                        } else {
+                            icon.className = 'fas fa-eye-slash';
+                            nsfwOverlay.style.display = 'none';
+                        }
+                    });
+                    
+                    // Add to the beginning of header
+                    cardHeader.insertBefore(toggleBtn, cardHeader.firstChild);
+                    
+                    // Update base model label class
+                    const baseModelLabel = cardHeader.querySelector('.base-model-label');
+                    if (baseModelLabel && !baseModelLabel.classList.contains('with-toggle')) {
+                        baseModelLabel.classList.add('with-toggle');
+                    }
+                } else {
+                    // Update existing toggle button
+                    toggleBtn.querySelector('i').className = 'fas fa-eye';
+                }
+            }
+        } else {
+            // Remove blur
+            previewContainer.classList.remove('blurred');
+            
+            // Hide overlay if it exists
+            const overlay = previewContainer.querySelector('.nsfw-overlay');
+            if (overlay) overlay.style.display = 'none';
+            
+            // Update or remove toggle button
+            const toggleBtn = card.querySelector('.toggle-blur-btn');
+            if (toggleBtn) {
+                // We'll leave the button but update the icon
+                toggleBtn.querySelector('i').className = 'fas fa-eye-slash';
+            }
+        }
+    }
+
+    showNSFWLevelSelector(x, y, card) {
+        const selector = document.getElementById('nsfwLevelSelector');
+        const currentLevelEl = document.getElementById('currentNSFWLevel');
+        
+        // Get current NSFW level
+        let currentLevel = 0;
+        try {
+            const metaData = JSON.parse(card.dataset.meta || '{}');
+            currentLevel = metaData.preview_nsfw_level || 0;
+            
+            // Update if we have no recorded level but have a dataset attribute
+            if (!currentLevel && card.dataset.nsfwLevel) {
+                currentLevel = parseInt(card.dataset.nsfwLevel) || 0;
+            }
+        } catch (err) {
+            console.error('Error parsing metadata:', err);
+        }
+        
+        currentLevelEl.textContent = getNSFWLevelName(currentLevel);
+        
+        // Position the selector
+        if (x && y) {
+            const viewportWidth = document.documentElement.clientWidth;
+            const viewportHeight = document.documentElement.clientHeight;
+            const selectorRect = selector.getBoundingClientRect();
+            
+            // Center the selector if no coordinates provided
+            let finalX = (viewportWidth - selectorRect.width) / 2;
+            let finalY = (viewportHeight - selectorRect.height) / 2;
+            
+            selector.style.left = `${finalX}px`;
+            selector.style.top = `${finalY}px`;
+        }
+        
+        // Highlight current level button
+        document.querySelectorAll('.nsfw-level-btn').forEach(btn => {
+            if (parseInt(btn.dataset.level) === currentLevel) {
+                btn.classList.add('active');
+            } else {
+                btn.classList.remove('active');
+            }
+        });
+        
+        // Store reference to current card
+        selector.dataset.cardPath = card.dataset.filepath;
+        
+        // Show selector
+        selector.style.display = 'block';
     }
 
     showMenu(x, y, card) {

static/js/components/LoraCard.js

@@ -2,6 +2,7 @@ import { showToast } from '../utils/uiHelpers.js';
 import { state } from '../state/index.js';
 import { showLoraModal } from './LoraModal.js';
 import { bulkManager } from '../managers/BulkManager.js';
+import { NSFW_LEVELS } from '../utils/constants.js';
 
 export function createLoraCard(lora) {
     const card = document.createElement('div');
@@ -27,6 +28,16 @@ export function createLoraCard(lora) {
         card.dataset.modelDescription = lora.modelDescription;
     }
 
+    // Store NSFW level if available
+    const nsfwLevel = lora.preview_nsfw_level !== undefined ? lora.preview_nsfw_level : 0;
+    card.dataset.nsfwLevel = nsfwLevel;
+    
+    // Determine if the preview should be blurred based on NSFW level and user settings
+    const shouldBlur = state.settings.blurMatureContent && nsfwLevel > NSFW_LEVELS.PG13;
+    if (shouldBlur) {
+        card.classList.add('nsfw-content');
+    }
+
     // 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');
@@ -36,8 +47,18 @@ export function createLoraCard(lora) {
     const previewUrl = lora.preview_url || '/loras_static/images/no-preview.png';
     const versionedPreviewUrl = version ? `${previewUrl}?t=${version}` : previewUrl;
 
+    // Determine NSFW warning text based on level
+    let nsfwText = "Mature Content";
+    if (nsfwLevel >= NSFW_LEVELS.XXX) {
+        nsfwText = "XXX-rated Content";
+    } else if (nsfwLevel >= NSFW_LEVELS.X) {
+        nsfwText = "X-rated Content";
+    } else if (nsfwLevel >= NSFW_LEVELS.R) {
+        nsfwText = "R-rated Content";
+    }
+
     card.innerHTML = `
-        <div class="card-preview">
+        <div class="card-preview ${shouldBlur ? 'blurred' : ''}">
             ${previewUrl.endsWith('.mp4') ? 
                 `<video controls autoplay muted loop>
                     <source src="${versionedPreviewUrl}" type="video/mp4">
@@ -45,7 +66,11 @@ export function createLoraCard(lora) {
                 `<img src="${versionedPreviewUrl}" alt="${lora.model_name}">`
             }
             <div class="card-header">
-                <span class="base-model-label" title="${lora.base_model}">
+                ${shouldBlur ? 
+                  `<button class="toggle-blur-btn" title="Toggle blur">
+                      <i class="fas fa-eye"></i>
+                  </button>` : ''}
+                <span class="base-model-label ${shouldBlur ? 'with-toggle' : ''}" title="${lora.base_model}">
                     ${lora.base_model}
                 </span>
                 <div class="card-actions">
@@ -61,6 +86,14 @@ export function createLoraCard(lora) {
                     </i>
                 </div>
             </div>
+            ${shouldBlur ? `
+                <div class="nsfw-overlay">
+                    <div class="nsfw-warning">
+                        <p>${nsfwText}</p>
+                        <button class="show-content-btn">Show</button>
+                    </div>
+                </div>
+            ` : ''}
             <div class="card-footer">
                 <div class="model-info">
                     <span class="model-name">${lora.model_name}</span>
@@ -111,6 +144,52 @@ export function createLoraCard(lora) {
         }
     });
 
+    // Toggle blur button functionality
+    const toggleBlurBtn = card.querySelector('.toggle-blur-btn');
+    if (toggleBlurBtn) {
+        toggleBlurBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const preview = card.querySelector('.card-preview');
+            const isBlurred = preview.classList.toggle('blurred');
+            const icon = toggleBlurBtn.querySelector('i');
+            
+            // Update the icon based on blur state
+            if (isBlurred) {
+                icon.className = 'fas fa-eye';
+            } else {
+                icon.className = 'fas fa-eye-slash';
+            }
+            
+            // Toggle the overlay visibility
+            const overlay = card.querySelector('.nsfw-overlay');
+            if (overlay) {
+                overlay.style.display = isBlurred ? 'flex' : 'none';
+            }
+        });
+    }
+
+    // Show content button functionality
+    const showContentBtn = card.querySelector('.show-content-btn');
+    if (showContentBtn) {
+        showContentBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const preview = card.querySelector('.card-preview');
+            preview.classList.remove('blurred');
+            
+            // Update the toggle button icon
+            const toggleBtn = card.querySelector('.toggle-blur-btn');
+            if (toggleBtn) {
+                toggleBtn.querySelector('i').className = 'fas fa-eye-slash';
+            }
+            
+            // Hide the overlay
+            const overlay = card.querySelector('.nsfw-overlay');
+            if (overlay) {
+                overlay.style.display = 'none';
+            }
+        });
+    }
+
     // Copy button click event
     card.querySelector('.fa-copy')?.addEventListener('click', async e => {
         e.stopPropagation();

static/js/components/LoraModal.js

@@ -1,5 +1,6 @@
 import { showToast } from '../utils/uiHelpers.js';
 import { state } from '../state/index.js';
+import { NSFW_LEVELS } from '../utils/constants.js';
 
 export function showLoraModal(lora) {
     const escapedWords = lora.civitai?.trainedWords?.length ? 
@@ -132,14 +133,46 @@ export function showLoraModal(lora) {
 function renderShowcaseContent(images) {
     if (!images?.length) return '<div class="no-examples">No example images available</div>';
     
+    // Filter images based on SFW setting
+    const showOnlySFW = state.settings.show_only_sfw;
+    let filteredImages = images;
+    let hiddenCount = 0;
+    
+    if (showOnlySFW) {
+        filteredImages = images.filter(img => {
+            const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
+            const isSfw = nsfwLevel < NSFW_LEVELS.R;
+            if (!isSfw) hiddenCount++;
+            return isSfw;
+        });
+    }
+    
+    // Show message if no images are available after filtering
+    if (filteredImages.length === 0) {
+        return `
+            <div class="no-examples">
+                <p>All example images are filtered due to NSFW content settings</p>
+                <p class="nsfw-filter-info">Your settings are currently set to show only safe-for-work content</p>
+                <p>You can change this in Settings <i class="fas fa-cog"></i></p>
+            </div>
+        `;
+    }
+    
+    // Show hidden content notification if applicable
+    const hiddenNotification = hiddenCount > 0 ? 
+        `<div class="nsfw-filter-notification">
+            <i class="fas fa-eye-slash"></i> ${hiddenCount} ${hiddenCount === 1 ? 'image' : 'images'} hidden due to SFW-only setting
+        </div>` : '';
+    
     return `
         <div class="scroll-indicator" onclick="toggleShowcase(this)">
             <i class="fas fa-chevron-down"></i>
-            <span>Scroll or click to show ${images.length} examples</span>
+            <span>Scroll or click to show ${filteredImages.length} examples</span>
         </div>
         <div class="carousel collapsed">
+            ${hiddenNotification}
             <div class="carousel-container">
-                ${images.map(img => {
+                ${filteredImages.map(img => {
                     // 计算适当的展示高度：
                     // 1. 保持原始宽高比
                     // 2. 限制最大高度为视窗高度的60%
@@ -153,27 +186,67 @@ function renderShowcaseContent(images) {
                         Math.min(maxHeightPercent, aspectRatio)
                     );
                     
+                    // Check if image should be blurred
+                    const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
+                    const shouldBlur = state.settings.blurMatureContent && nsfwLevel > NSFW_LEVELS.PG13;
+                    
+                    // Determine NSFW warning text based on level
+                    let nsfwText = "Mature Content";
+                    if (nsfwLevel >= NSFW_LEVELS.XXX) {
+                        nsfwText = "XXX-rated Content";
+                    } else if (nsfwLevel >= NSFW_LEVELS.X) {
+                        nsfwText = "X-rated Content";
+                    } else if (nsfwLevel >= NSFW_LEVELS.R) {
+                        nsfwText = "R-rated Content";
+                    }
+                    
                     if (img.type === 'video') {
                         return `
-                            <div class="media-wrapper" style="padding-bottom: ${heightPercent}%">
+                            <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%">
+                                ${shouldBlur ? `
+                                    <button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
+                                        <i class="fas fa-eye"></i>
+                                    </button>
+                                ` : ''}
                                 <video controls autoplay muted loop crossorigin="anonymous" 
                                        referrerpolicy="no-referrer" data-src="${img.url}"
-                                       class="lazy">
+                                       class="lazy ${shouldBlur ? 'blurred' : ''}">
                                     <source data-src="${img.url}" type="video/mp4">
                                     Your browser does not support video playback
                                 </video>
+                                ${shouldBlur ? `
+                                    <div class="nsfw-overlay">
+                                        <div class="nsfw-warning">
+                                            <p>${nsfwText}</p>
+                                            <button class="show-content-btn">Show</button>
+                                        </div>
+                                    </div>
+                                ` : ''}
                             </div>
                         `;
                     }
                     return `
-                        <div class="media-wrapper" style="padding-bottom: ${heightPercent}%">
+                        <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%">
+                            ${shouldBlur ? `
+                                <button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                            ` : ''}
                             <img data-src="${img.url}" 
-                                 alt="Preview" 
-                                 crossorigin="anonymous" 
-                                 referrerpolicy="no-referrer"
-                                 width="${img.width}"
-                                 height="${img.height}"
-                                 class="lazy"> 
+                                alt="Preview" 
+                                crossorigin="anonymous" 
+                                referrerpolicy="no-referrer"
+                                width="${img.width}"
+                                height="${img.height}"
+                                class="lazy ${shouldBlur ? 'blurred' : ''}"> 
+                            ${shouldBlur ? `
+                                <div class="nsfw-overlay">
+                                    <div class="nsfw-warning">
+                                        <p>${nsfwText}</p>
+                                        <button class="show-content-btn">Show</button>
+                                    </div>
+                                </div>
+                            ` : ''}
                         </div>
                     `;
                 }).join('')}
@@ -585,6 +658,9 @@ export function toggleShowcase(element) {
         indicator.textContent = `Scroll or click to hide examples`;
         icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
         initLazyLoading(carousel);
+        
+        // Initialize NSFW content blur toggle handlers
+        initNsfwBlurHandlers(carousel);
     } else {
         const count = carousel.querySelectorAll('.media-wrapper').length;
         indicator.textContent = `Scroll or click to show ${count} examples`;
@@ -592,6 +668,57 @@ export function toggleShowcase(element) {
     }
 }
 
+// New function to initialize blur toggle handlers for showcase images/videos
+function initNsfwBlurHandlers(container) {
+    // Handle toggle blur buttons
+    const toggleButtons = container.querySelectorAll('.toggle-blur-btn');
+    toggleButtons.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const wrapper = btn.closest('.media-wrapper');
+            const media = wrapper.querySelector('img, video');
+            const isBlurred = media.classList.toggle('blurred');
+            const icon = btn.querySelector('i');
+            
+            // Update the icon based on blur state
+            if (isBlurred) {
+                icon.className = 'fas fa-eye';
+            } else {
+                icon.className = 'fas fa-eye-slash';
+            }
+            
+            // Toggle the overlay visibility
+            const overlay = wrapper.querySelector('.nsfw-overlay');
+            if (overlay) {
+                overlay.style.display = isBlurred ? 'flex' : 'none';
+            }
+        });
+    });
+    
+    // Handle "Show" buttons in overlays
+    const showButtons = container.querySelectorAll('.show-content-btn');
+    showButtons.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const wrapper = btn.closest('.media-wrapper');
+            const media = wrapper.querySelector('img, video');
+            media.classList.remove('blurred');
+            
+            // Update the toggle button icon
+            const toggleBtn = wrapper.querySelector('.toggle-blur-btn');
+            if (toggleBtn) {
+                toggleBtn.querySelector('i').className = 'fas fa-eye-slash';
+            }
+            
+            // Hide the overlay
+            const overlay = wrapper.querySelector('.nsfw-overlay');
+            if (overlay) {
+                overlay.style.display = 'none';
+            }
+        });
+    });
+}
+
 // Add lazy loading initialization
 function initLazyLoading(container) {
     const lazyElements = container.querySelectorAll('.lazy');

static/js/main.js

@@ -2,7 +2,7 @@ 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 { state, initSettings } from './state/index.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';
@@ -67,6 +67,9 @@ window.bulkManager = bulkManager;
 
 // Initialize everything when DOM is ready
 document.addEventListener('DOMContentLoaded', async () => {
+    // Ensure settings are initialized
+    initSettings();
+    
     state.loadingManager = new LoadingManager();
     modalManager.initialize();  // Initialize modalManager after DOM is loaded
     updateService.initialize(); // Initialize updateService after modalManager

static/js/managers/DownloadManager.js

@@ -120,16 +120,21 @@ export class DownloadManager {
         versionList.innerHTML = this.versions.map(version => {
             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);
             
-            const existsLocally = version.files[0]?.existsLocally;
-            const localPath = version.files[0]?.localPath;
+            // Use version-level size or fallback to first file
+            const fileSize = version.modelSizeKB ? 
+                (version.modelSizeKB / 1024).toFixed(2) : 
+                (version.files[0]?.sizeKB / 1024).toFixed(2);
+            
+            // Use version-level existsLocally flag
+            const existsLocally = version.existsLocally;
+            const localPath = version.localPath;
             
             // 更新本地状态指示器为badge样式
             const localStatus = existsLocally ? 
                 `<div class="local-badge">
                     <i class="fas fa-check"></i> In Library
-                    <div class="local-path">${localPath}</div>
+                    <div class="local-path">${localPath || ''}</div>
                  </div>` : '';
 
             return `
@@ -177,12 +182,12 @@ export class DownloadManager {
         this.updateNextButtonState();
     }
     
-    // Add new method to update Next button state
+    // Update this method to use version-level existsLocally
     updateNextButtonState() {
         const nextButton = document.querySelector('#versionStep .primary-btn');
         if (!nextButton) return;
         
-        const existsLocally = this.currentVersion?.files[0]?.existsLocally;
+        const existsLocally = this.currentVersion?.existsLocally;
         
         if (existsLocally) {
             nextButton.disabled = true;
@@ -202,7 +207,7 @@ export class DownloadManager {
         }
         
         // Double-check if the version exists locally
-        const existsLocally = this.currentVersion.files[0]?.existsLocally;
+        const existsLocally = this.currentVersion.existsLocally;
         if (existsLocally) {
             showToast('This version already exists in your library', 'info');
             return;

static/js/managers/SettingsManager.js

@@ -1,5 +1,7 @@
 import { modalManager } from './ModalManager.js';
 import { showToast } from '../utils/uiHelpers.js';
+import { state, saveSettings } from '../state/index.js';
+import { resetAndReload } from '../api/loraApi.js';
 
 export class SettingsManager {
     constructor() {
@@ -20,6 +22,11 @@ export class SettingsManager {
                 mutations.forEach((mutation) => {
                     if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                         this.isOpen = settingsModal.style.display === 'block';
+                        
+                        // When modal is opened, update checkbox state from current settings
+                        if (this.isOpen) {
+                            this.loadSettingsToUI();
+                        }
                     }
                 });
             });
@@ -30,6 +37,22 @@ export class SettingsManager {
         this.initialized = true;
     }
 
+    loadSettingsToUI() {
+        // Set frontend settings from state
+        const blurMatureContentCheckbox = document.getElementById('blurMatureContent');
+        if (blurMatureContentCheckbox) {
+            blurMatureContentCheckbox.checked = state.settings.blurMatureContent;
+        }
+        
+        const showOnlySFWCheckbox = document.getElementById('showOnlySFW');
+        if (showOnlySFWCheckbox) {
+            // Sync with state (backend will set this via template)
+            state.settings.show_only_sfw = showOnlySFWCheckbox.checked;
+        }
+        
+        // Backend settings are loaded from the template directly
+    }
+
     toggleSettings() {
         if (this.isOpen) {
             modalManager.closeModal('settingsModal');
@@ -40,16 +63,28 @@ export class SettingsManager {
     }
 
     async saveSettings() {
+        // Get frontend settings from UI
+        const blurMatureContent = document.getElementById('blurMatureContent').checked;
+        
+        // Get backend settings
         const apiKey = document.getElementById('civitaiApiKey').value;
+        const showOnlySFW = document.getElementById('showOnlySFW').checked;
+        
+        // Update frontend state and save to localStorage
+        state.settings.blurMatureContent = blurMatureContent;
+        state.settings.show_only_sfw = showOnlySFW;
+        saveSettings();
         
         try {
+            // Save backend settings via API
             const response = await fetch('/api/settings', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    civitai_api_key: apiKey
+                    civitai_api_key: apiKey,
+                    show_only_sfw: showOnlySFW
                 })
             });
 
@@ -59,10 +94,31 @@ export class SettingsManager {
 
             showToast('Settings saved successfully', 'success');
             modalManager.closeModal('settingsModal');
+            
+            // Apply frontend settings immediately
+            this.applyFrontendSettings();
+            
+            // Reload the loras without updating folders
+            await resetAndReload(false);
         } catch (error) {
             showToast('Failed to save settings: ' + error.message, 'error');
         }
     }
+
+    applyFrontendSettings() {
+        // Apply blur setting to existing content
+        const blurSetting = state.settings.blurMatureContent;
+        document.querySelectorAll('.lora-card[data-nsfw="true"] .card-image').forEach(img => {
+            if (blurSetting) {
+                img.classList.add('nsfw-blur');
+            } else {
+                img.classList.remove('nsfw-blur');
+            }
+        });
+        
+        // For show_only_sfw, there's no immediate action needed as it affects content loading
+        // The setting will take effect on next reload
+    }
 }
 
 // Helper function for toggling API key visibility

static/js/managers/UpdateService.js

@@ -28,7 +28,10 @@ export class UpdateService {
         }
         
         // Perform update check if needed
-        this.checkForUpdates();
+        this.checkForUpdates().then(() => {
+            // Ensure badges are updated after checking
+            this.updateBadgeVisibility();
+        });
         
         // Set up event listener for update button
         const updateToggle = document.getElementById('updateToggleBtn');
@@ -43,7 +46,9 @@ export class UpdateService {
     async checkForUpdates() {
         // Check if we should perform an update check
         const now = Date.now();
-        if (now - this.lastCheckTime < this.updateCheckInterval) {
+        const forceCheck = this.lastCheckTime === 0;
+        
+        if (!forceCheck && now - this.lastCheckTime < this.updateCheckInterval) {
             // If we already have update info, just update the UI
             if (this.updateAvailable) {
                 this.updateBadgeVisibility();
@@ -61,8 +66,8 @@ export class UpdateService {
                 this.latestVersion = data.latest_version || "v0.0.0";
                 this.updateInfo = data;
                 
-                // Determine if update is available
-                this.updateAvailable = data.update_available;
+                // Explicitly set update availability based on version comparison
+                this.updateAvailable = this.isNewerVersion(this.latestVersion, this.currentVersion);
                 
                 // Update last check time
                 this.lastCheckTime = now;
@@ -83,6 +88,37 @@ export class UpdateService {
         }
     }
     
+    // Helper method to compare version strings
+    isNewerVersion(latestVersion, currentVersion) {
+        if (!latestVersion || !currentVersion) return false;
+        
+        // Remove 'v' prefix if present
+        const latest = latestVersion.replace(/^v/, '');
+        const current = currentVersion.replace(/^v/, '');
+        
+        // Split version strings into components
+        const latestParts = latest.split(/[-\.]/);
+        const currentParts = current.split(/[-\.]/);
+        
+        // Compare major, minor, patch versions
+        for (let i = 0; i < 3; i++) {
+            const latestNum = parseInt(latestParts[i] || '0', 10);
+            const currentNum = parseInt(currentParts[i] || '0', 10);
+            
+            if (latestNum > currentNum) return true;
+            if (latestNum < currentNum) return false;
+        }
+        
+        // If numeric versions are the same, check for beta/alpha status
+        const latestIsBeta = latest.includes('beta') || latest.includes('alpha');
+        const currentIsBeta = current.includes('beta') || current.includes('alpha');
+        
+        // Release version is newer than beta/alpha
+        if (!latestIsBeta && currentIsBeta) return true;
+        
+        return false;
+    }
+    
     updateBadgeVisibility() {
         const updateToggle = document.querySelector('.update-toggle');
         const updateBadge = document.querySelector('.update-toggle .update-badge');
@@ -94,14 +130,17 @@ export class UpdateService {
                 : "Check Updates";
         }
         
+        // Force updating badges visibility based on current state
+        const shouldShow = this.updateNotificationsEnabled && this.updateAvailable;
+        
         if (updateBadge) {
-            const shouldShow = this.updateNotificationsEnabled && this.updateAvailable;
             updateBadge.classList.toggle('hidden', !shouldShow);
+            console.log("Update badge visibility:", !shouldShow ? "hidden" : "visible");
         }
         
         if (cornerBadge) {
-            const shouldShow = this.updateNotificationsEnabled && this.updateAvailable;
             cornerBadge.classList.toggle('hidden', !shouldShow);
+            console.log("Corner badge visibility:", !shouldShow ? "hidden" : "visible");
         }
     }
     
@@ -194,6 +233,8 @@ export class UpdateService {
     async manualCheckForUpdates() {
         this.lastCheckTime = 0; // Reset last check time to force check
         await this.checkForUpdates();
+        // Ensure badge visibility is updated after manual check
+        this.updateBadgeVisibility();
     }
 }
 

static/js/state/index.js

@@ -20,5 +20,34 @@ export const state = {
     },
     bulkMode: false,
     selectedLoras: new Set(),
-    loraMetadataCache: new Map()
-};
+    loraMetadataCache: new Map(),
+    settings: {
+        blurMatureContent: true,
+        show_only_sfw: false
+    }
+};
+
+// Initialize settings from localStorage if available
+export function initSettings() {
+    try {
+        const savedSettings = localStorage.getItem('loraManagerSettings');
+        if (savedSettings) {
+            const parsedSettings = JSON.parse(savedSettings);
+            state.settings = { ...state.settings, ...parsedSettings };
+        }
+    } catch (error) {
+        console.error('Error loading settings from localStorage:', error);
+    }
+}
+
+// Save settings to localStorage
+export function saveSettings() {
+    try {
+        localStorage.setItem('loraManagerSettings', JSON.stringify(state.settings));
+    } catch (error) {
+        console.error('Error saving settings to localStorage:', error);
+    }
+}
+
+// Initialize settings on load
+initSettings();

static/js/utils/constants.js

@@ -31,7 +31,7 @@ export const BASE_MODELS = {
     LUMINA: "Lumina",
     KOLORS: "Kolors",
     NOOBAI: "NoobAI",
-    IL: "IL",
+    ILLUSTRIOUS: "Illustrious",
     PONY: "Pony",
     
     // Video models
@@ -82,9 +82,19 @@ export const BASE_MODEL_CLASSES = {
     [BASE_MODELS.LUMINA]: "lumina",
     [BASE_MODELS.KOLORS]: "kolors",
     [BASE_MODELS.NOOBAI]: "noobai",
-    [BASE_MODELS.IL]: "il",
+    [BASE_MODELS.ILLUSTRIOUS]: "il",
     [BASE_MODELS.PONY]: "pony",
     
     // Default
     [BASE_MODELS.UNKNOWN]: "unknown"
+};
+
+export const NSFW_LEVELS = {
+    UNKNOWN: 0,
+    PG: 1,
+    PG13: 2,
+    R: 4,
+    X: 8,
+    XXX: 16,
+    BLOCKED: 32
 };

static/js/utils/uiHelpers.js

@@ -151,4 +151,15 @@ export function initBackToTop() {
     
     // Initial check
     toggleBackToTop();
+}
+
+export function getNSFWLevelName(level) {
+    if (level === 0) return 'Unknown';
+    if (level >= 32) return 'Blocked';
+    if (level >= 16) return 'XXX';
+    if (level >= 8) return 'X';
+    if (level >= 4) return 'R';
+    if (level >= 2) return 'PG13';
+    if (level >= 1) return 'PG';
+    return 'Unknown';
 }

templates/components/context_menu.html

@@ -14,6 +14,9 @@
     <div class="context-menu-item" data-action="preview">
         <i class="fas fa-image"></i> Replace Preview
     </div>
+    <div class="context-menu-item" data-action="set-nsfw">
+        <i class="fas fa-exclamation-triangle"></i> Set Content Rating
+    </div>
     <div class="context-menu-separator"></div>
     <div class="context-menu-item" data-action="move">
         <i class="fas fa-folder-open"></i> Move to Folder
@@ -21,4 +24,21 @@
     <div class="context-menu-item delete-item" data-action="delete">
         <i class="fas fa-trash"></i> Delete Model
     </div>
+</div>
+
+<div id="nsfwLevelSelector" class="nsfw-level-selector">
+    <div class="nsfw-level-header">
+        <h3>Set Content Rating</h3>
+        <button class="close-nsfw-selector"><i class="fas fa-times"></i></button>
+    </div>
+    <div class="nsfw-level-content">
+        <div class="current-level">Current: <span id="currentNSFWLevel">Unknown</span></div>
+        <div class="nsfw-level-options">
+            <button class="nsfw-level-btn" data-level="1">PG</button>
+            <button class="nsfw-level-btn" data-level="2">PG13</button>
+            <button class="nsfw-level-btn" data-level="4">R</button>
+            <button class="nsfw-level-btn" data-level="8">X</button>
+            <button class="nsfw-level-btn" data-level="16">XXX</button>
+        </div>
+    </div>
 </div>

templates/components/modals.html

@@ -147,6 +147,40 @@
                     Used for authentication when downloading models from Civitai
                 </div>
             </div>
+            
+            <div class="settings-section">
+                <h3>Content Filtering</h3>
+                
+                <div class="setting-item">
+                    <div class="setting-info">
+                        <label for="blurMatureContent">Blur NSFW Content</label>
+                        <div class="input-help">
+                            Blur mature (NSFW) content preview images
+                        </div>
+                    </div>
+                    <div class="setting-control">
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="blurMatureContent" checked>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                </div>
+                
+                <div class="setting-item">
+                    <div class="setting-info">
+                        <label for="showOnlySFW">Show Only SFW Results</label>
+                        <div class="input-help">
+                            Filter out all NSFW content when browsing and searching
+                        </div>
+                    </div>
+                    <div class="setting-control">
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="showOnlySFW" value="{{ settings.get('show_only_sfw', False) }}" {% if settings.get('show_only_sfw', False) %}checked{% endif %}>
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                </div>
+            </div>
         </div>
         <div class="modal-actions">
             <button class="primary-btn" onclick="settingsManager.saveSettings()">Save</button>