feat: add configurable mature blur threshold setting

Add new setting 'mature_blur_level' with options PG13/R/X/XXX to control
which NSFW rating level triggers blur filtering when NSFW blur is enabled.

- Backend: update preview selection logic to respect threshold
- Frontend: update UI components to use configurable threshold
- Settings: add validation and normalization for mature_blur_level
- Tests: add coverage for new threshold behavior
- Translations: add keys for all supported languages

Fixes #867

static/js/components/RecipeCard.js

@@ -6,7 +6,7 @@ import { modalManager } from '../managers/ModalManager.js';
 import { getCurrentPageState } from '../state/index.js';
 import { state } from '../state/index.js';
 import { bulkManager } from '../managers/BulkManager.js';
-import { NSFW_LEVELS, getBaseModelAbbreviation } from '../utils/constants.js';
+import { NSFW_LEVELS, getBaseModelAbbreviation, getMatureBlurThreshold } from '../utils/constants.js';
 
 class RecipeCard {
     constructor(recipe, clickHandler) {
@@ -74,7 +74,8 @@ class RecipeCard {
 
         // NSFW blur logic - similar to LoraCard
         const nsfwLevel = this.recipe.preview_nsfw_level !== undefined ? this.recipe.preview_nsfw_level : 0;
-        const shouldBlur = state.settings.blur_mature_content && nsfwLevel > NSFW_LEVELS.PG13;
+        const matureBlurThreshold = getMatureBlurThreshold(state.settings);
+        const shouldBlur = state.settings.blur_mature_content && nsfwLevel >= matureBlurThreshold;
 
         if (shouldBlur) {
             card.classList.add('nsfw-content');

static/js/components/shared/ModelCard.js

@@ -4,7 +4,7 @@ import { showModelModal } from './ModelModal.js';
 import { toggleShowcase } from './showcase/ShowcaseView.js';
 import { bulkManager } from '../../managers/BulkManager.js';
 import { modalManager } from '../../managers/ModalManager.js';
-import { NSFW_LEVELS, getBaseModelAbbreviation, getSubTypeAbbreviation, MODEL_SUBTYPE_DISPLAY_NAMES } from '../../utils/constants.js';
+import { NSFW_LEVELS, getBaseModelAbbreviation, getSubTypeAbbreviation, getMatureBlurThreshold, MODEL_SUBTYPE_DISPLAY_NAMES } from '../../utils/constants.js';
 import { MODEL_TYPES } from '../../api/apiConfig.js';
 import { getModelApiClient } from '../../api/modelApiFactory.js';
 import { showDeleteModal } from '../../utils/modalUtils.js';
@@ -478,7 +478,8 @@ export function createModelCard(model, modelType) {
     card.dataset.nsfwLevel = nsfwLevel;
 
     // Determine if the preview should be blurred based on NSFW level and user settings
-    const shouldBlur = state.settings.blur_mature_content && nsfwLevel > NSFW_LEVELS.PG13;
+    const matureBlurThreshold = getMatureBlurThreshold(state.settings);
+    const shouldBlur = state.settings.blur_mature_content && nsfwLevel >= matureBlurThreshold;
     if (shouldBlur) {
         card.classList.add('nsfw-content');
     }

static/js/components/shared/showcase/MediaUtils.js

@@ -6,7 +6,7 @@
 import { showToast, copyToClipboard, getNSFWLevelName } from '../../../utils/uiHelpers.js';
 import { state } from '../../../state/index.js';
 import { getModelApiClient } from '../../../api/modelApiFactory.js';
-import { NSFW_LEVELS } from '../../../utils/constants.js';
+import { NSFW_LEVELS, getMatureBlurThreshold } from '../../../utils/constants.js';
 import { getNsfwLevelSelector } from '../NsfwLevelSelector.js';
 
 /**
@@ -607,7 +607,8 @@ function applyNsfwLevelChange(mediaWrapper, nsfwLevel) {
     }
     mediaWrapper.dataset.nsfwLevel = String(nsfwLevel);
 
-    const shouldBlur = state.settings.blur_mature_content && nsfwLevel > NSFW_LEVELS.PG13;
+    const matureBlurThreshold = getMatureBlurThreshold(state.settings);
+    const shouldBlur = state.settings.blur_mature_content && nsfwLevel >= matureBlurThreshold;
     let overlay = mediaWrapper.querySelector('.nsfw-overlay');
     let toggleBtn = mediaWrapper.querySelector('.toggle-blur-btn');
 

static/js/components/shared/showcase/ShowcaseView.js

@@ -6,7 +6,7 @@ import { showToast } from '../../../utils/uiHelpers.js';
 import { state } from '../../../state/index.js';
 import { modalManager } from '../../../managers/ModalManager.js';
 import { translate } from '../../../utils/i18nHelpers.js';
-import { NSFW_LEVELS } from '../../../utils/constants.js';
+import { NSFW_LEVELS, getMatureBlurThreshold } from '../../../utils/constants.js';
 import { 
     initLazyLoading,
     initNsfwBlurHandlers, 
@@ -184,7 +184,8 @@ function renderMediaItem(img, index, exampleFiles) {
     
     // Check if media should be blurred
     const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
-    const shouldBlur = state.settings.blur_mature_content && nsfwLevel > NSFW_LEVELS.PG13;
+    const matureBlurThreshold = getMatureBlurThreshold(state.settings);
+    const shouldBlur = state.settings.blur_mature_content && nsfwLevel >= matureBlurThreshold;
     
     // Determine NSFW warning text based on level
     let nsfwText = "Mature Content";

static/js/managers/SettingsManager.js

@@ -10,6 +10,8 @@ import { validatePriorityTagString, getPriorityTagSuggestionsMap, invalidatePrio
 import { bannerService } from './BannerService.js';
 import { sidebarManager } from '../components/SidebarManager.js';
 
+const VALID_MATURE_BLUR_LEVELS = new Set(['PG13', 'R', 'X', 'XXX']);
+
 export class SettingsManager {
     constructor() {
         this.initialized = false;
@@ -137,11 +139,25 @@ export class SettingsManager {
             backendSettings?.metadata_refresh_skip_paths ?? defaults.metadata_refresh_skip_paths
         );
 
+        merged.mature_blur_level = this.normalizeMatureBlurLevel(
+            backendSettings?.mature_blur_level ?? defaults.mature_blur_level
+        );
+
         Object.keys(merged).forEach(key => this.backendSettingKeys.add(key));
 
         return merged;
     }
 
+    normalizeMatureBlurLevel(value) {
+        if (typeof value === 'string') {
+            const normalized = value.trim().toUpperCase();
+            if (VALID_MATURE_BLUR_LEVELS.has(normalized)) {
+                return normalized;
+            }
+        }
+        return 'R';
+    }
+
     normalizePatternList(value) {
         if (Array.isArray(value)) {
             const sanitized = value
@@ -682,6 +698,13 @@ export class SettingsManager {
             showOnlySFWCheckbox.checked = state.global.settings.show_only_sfw ?? false;
         }
 
+        const matureBlurLevelSelect = document.getElementById('matureBlurLevel');
+        if (matureBlurLevelSelect) {
+            matureBlurLevelSelect.value = this.normalizeMatureBlurLevel(
+                state.global.settings.mature_blur_level
+            );
+        }
+
         const usePortableCheckbox = document.getElementById('usePortableSettings');
         if (usePortableCheckbox) {
             usePortableCheckbox.checked = !!state.global.settings.use_portable_settings;
@@ -1811,7 +1834,9 @@ export class SettingsManager {
         const element = document.getElementById(elementId);
         if (!element) return;
 
-        const value = element.value;
+        const value = settingKey === 'mature_blur_level'
+            ? this.normalizeMatureBlurLevel(element.value)
+            : element.value;
 
         try {
             // Update frontend state with mapped keys
@@ -1834,7 +1859,12 @@ export class SettingsManager {
 
             showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
 
-            if (settingKey === 'model_name_display' || settingKey === 'model_card_footer_action' || settingKey === 'update_flag_strategy') {
+            if (
+                settingKey === 'model_name_display'
+                || settingKey === 'model_card_footer_action'
+                || settingKey === 'update_flag_strategy'
+                || settingKey === 'mature_blur_level'
+            ) {
                 this.reloadContent();
             }
         } catch (error) {

static/js/state/index.js

@@ -24,6 +24,7 @@ const DEFAULT_SETTINGS_BASE = Object.freeze({
     optimize_example_images: true,
     auto_download_example_images: false,
     blur_mature_content: true,
+    mature_blur_level: 'R',
     autoplay_on_hover: false,
     display_density: 'default',
     card_info_display: 'always',

static/js/utils/constants.js

@@ -309,6 +309,15 @@ export const NSFW_LEVELS = {
     BLOCKED: 32
 };
 
+export const VALID_MATURE_BLUR_LEVELS = ['PG13', 'R', 'X', 'XXX'];
+
+export function getMatureBlurThreshold(settings = {}) {
+    const rawValue = settings?.mature_blur_level;
+    const normalizedValue = typeof rawValue === 'string' ? rawValue.trim().toUpperCase() : '';
+    const levelName = VALID_MATURE_BLUR_LEVELS.includes(normalizedValue) ? normalizedValue : 'R';
+    return NSFW_LEVELS[levelName] ?? NSFW_LEVELS.R;
+}
+
 // Node type constants
 export const NODE_TYPES = {
     LORA_LOADER: 1,