From 206c1bd69f0d7e87ba4559006c6c5e34b390d3e9 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Fri, 25 Jul 2025 16:10:16 +0800
Subject: [PATCH] Refactor modals.html into modular components

---
 py/utils/routes_common.py                     |   2 -
 static/js/components/alphabet/AlphabetBar.js  |   2 +-
 templates/components/modals.html              | 722 +-----------------
 .../components/modals/confirm_modals.html     |  85 +++
 .../modals/example_access_modal.html          |  27 +
 templates/components/modals/help_modal.html   | 131 ++++
 .../modals/relink_civitai_modal.html          |  33 +
 .../components/modals/settings_modal.html     | 278 +++++++
 .../components/modals/support_modal.html      |  91 +++
 templates/components/modals/update_modal.html |  64 ++
 10 files changed, 717 insertions(+), 718 deletions(-)
 create mode 100644 templates/components/modals/confirm_modals.html
 create mode 100644 templates/components/modals/example_access_modal.html
 create mode 100644 templates/components/modals/help_modal.html
 create mode 100644 templates/components/modals/relink_civitai_modal.html
 create mode 100644 templates/components/modals/settings_modal.html
 create mode 100644 templates/components/modals/support_modal.html
 create mode 100644 templates/components/modals/update_modal.html

diff --git a/py/utils/routes_common.py b/py/utils/routes_common.py
index 8f00106b..40b02cb5 100644
--- a/py/utils/routes_common.py
+++ b/py/utils/routes_common.py
@@ -551,8 +551,6 @@ class ModelRouteUtils:
             
             # Add to excluded models list
             scanner._excluded_models.append(file_path)
-
-            await scanner._save_cache_to_disk()
             
             return web.json_response({
                 'success': True,
diff --git a/static/js/components/alphabet/AlphabetBar.js b/static/js/components/alphabet/AlphabetBar.js
index c56a2d5b..723e3089 100644
--- a/static/js/components/alphabet/AlphabetBar.js
+++ b/static/js/components/alphabet/AlphabetBar.js
@@ -227,7 +227,7 @@ export class AlphabetBar {
         this.updateToggleIndicator();
         
         // Trigger a reload with the new filter
-        resetAndReload(true);
+        resetAndReload(false);
     }
     
     /**
diff --git a/templates/components/modals.html b/templates/components/modals.html
index 7f152c90..8d163336 100644
--- a/templates/components/modals.html
+++ b/templates/components/modals.html
@@ -1,715 +1,7 @@
-<!-- Delete Confirmation Modal -->
-<div id="deleteModal" class="modal delete-modal">
-    <div class="modal-content delete-modal-content">
-        <h2>Delete Model</h2>
-        <p class="delete-message">Are you sure you want to delete this model and all associated files?</p>
-        <div class="delete-model-info"></div>
-        <div class="modal-actions">
-            <button class="cancel-btn" onclick="closeDeleteModal()">Cancel</button>
-            <button class="delete-btn" onclick="confirmDelete()">Delete</button>
-        </div>
-    </div>
-</div>
-
-<!-- Exclude Confirmation Modal -->
-<div id="excludeModal" class="modal delete-modal">
-    <div class="modal-content delete-modal-content">
-        <h2>Exclude Model</h2>
-        <p class="delete-message">Are you sure you want to exclude this model? Excluded models won't appear in searches or model lists.</p>
-        <div class="exclude-model-info"></div>
-        <div class="modal-actions">
-            <button class="cancel-btn" onclick="closeExcludeModal()">Cancel</button>
-            <button class="exclude-btn" onclick="confirmExclude()">Exclude</button>
-        </div>
-    </div>
-</div>
-
-<!-- Recipes Duplicate Delete Confirmation Modal -->
-<div id="duplicateDeleteModal" class="modal delete-modal">
-    <div class="modal-content delete-modal-content">
-        <h2>Delete Duplicate Recipes</h2>
-        <p class="delete-message">Are you sure you want to delete the selected duplicate recipes?</p>
-        <div class="delete-model-info">
-            <p><span id="duplicateDeleteCount">0</span> recipes will be permanently deleted.</p>
-        </div>
-        <div class="modal-actions">
-            <button class="cancel-btn" onclick="modalManager.closeModal('duplicateDeleteModal')">Cancel</button>
-            <button class="delete-btn" onclick="recipeManager.confirmDeleteDuplicates()">Delete</button>
-        </div>
-    </div>
-</div>
-
-<!-- Models Duplicate Delete Confirmation Modal -->
-<div id="modelDuplicateDeleteModal" class="modal delete-modal">
-    <div class="modal-content delete-modal-content">
-        <h2>Delete Duplicate Models</h2>
-        <p class="delete-message">Are you sure you want to delete the selected duplicate models?</p>
-        <div class="delete-model-info">
-            <p><span id="modelDuplicateDeleteCount">0</span> models will be permanently deleted.</p>
-        </div>
-        <div class="modal-actions">
-            <button class="cancel-btn" onclick="modalManager.closeModal('modelDuplicateDeleteModal')">Cancel</button>
-            <button class="delete-btn" onclick="modelDuplicatesManager.confirmDeleteDuplicates()">Delete</button>
-        </div>
-    </div>
-</div>
-
-<!-- Cache Clear Confirmation Modal -->
-<div id="clearCacheModal" class="modal delete-modal">
-    <div class="modal-content delete-modal-content">
-        <h2>Clear Cache Files</h2>
-        <p class="delete-message">Are you sure you want to clear all cache files?</p>
-        <div class="delete-model-info">
-            <p>This will remove all cached model data. The system will need to rebuild the cache on next startup, which may take some time depending on your model collection size.</p>
-        </div>
-        <div class="modal-actions">
-            <button class="cancel-btn" onclick="modalManager.closeModal('clearCacheModal')">Cancel</button>
-            <button class="delete-btn" onclick="settingsManager.executeClearCache()">Clear Cache</button>
-        </div>
-    </div>
-</div>
-
-<!-- Bulk Delete Confirmation Modal -->
-<div id="bulkDeleteModal" class="modal delete-modal">
-    <div class="modal-content delete-modal-content">
-        <h2>Delete Multiple Models</h2>
-        <p class="delete-message">Are you sure you want to delete all selected models and their associated files?</p>
-        <div class="delete-model-info">
-            <p><span id="bulkDeleteCount">0</span> models will be permanently deleted.</p>
-        </div>
-        <div class="modal-actions">
-            <button class="cancel-btn" onclick="modalManager.closeModal('bulkDeleteModal')">Cancel</button>
-            <button class="delete-btn" onclick="bulkManager.confirmBulkDelete()">Delete All</button>
-        </div>
-    </div>
-</div>
-
-<!-- Settings Modal -->
-<div id="settingsModal" class="modal">
-    <div class="modal-content settings-modal">
-        <button class="close" onclick="modalManager.closeModal('settingsModal')">&times;</button>
-        <h2>Settings</h2>
-        <div class="settings-form">
-            <div class="setting-item api-key-item">
-                <div class="setting-row">
-                    <div class="setting-info">
-                        <label for="civitaiApiKey">Civitai API Key:</label>
-                    </div>
-                    <div class="setting-control">
-                        <div class="api-key-input">
-                            <input type="password" 
-                                id="civitaiApiKey" 
-                                placeholder="Enter your Civitai API key"
-                                value="{{ settings.get('civitai_api_key', '') }}"
-                                onblur="settingsManager.saveInputSetting('civitaiApiKey', 'civitai_api_key')"
-                                onkeydown="if(event.key === 'Enter') { this.blur(); }" />
-                            <button class="toggle-visibility">
-                                <i class="fas fa-eye"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <div class="input-help">
-                    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-row">
-                        <div class="setting-info">
-                            <label for="blurMatureContent">Blur NSFW Content</label>
-                        </div>
-                        <div class="setting-control">
-                            <label class="toggle-switch">
-                                <input type="checkbox" id="blurMatureContent" checked 
-                                       onchange="settingsManager.saveToggleSetting('blurMatureContent', 'blur_mature_content')">
-                                <span class="toggle-slider"></span>
-                            </label>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Blur mature (NSFW) content preview images
-                    </div>
-                </div>
-                
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="showOnlySFW">Show Only SFW Results</label>
-                        </div>
-                        <div class="setting-control">
-                            <label class="toggle-switch">
-                                <input type="checkbox" id="showOnlySFW" value="{{ settings.get('show_only_sfw', False) }}" {% if settings.get('show_only_sfw', False) %}checked{% endif %}
-                                       onchange="settingsManager.saveToggleSetting('showOnlySFW', 'show_only_sfw')">
-                                <span class="toggle-slider"></span>
-                            </label>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Filter out all NSFW content when browsing and searching
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Add Video Settings Section -->
-            <div class="settings-section">
-                <h3>Video Settings</h3>
-                
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="autoplayOnHover">Autoplay Videos on Hover</label>
-                        </div>
-                        <div class="setting-control">
-                            <label class="toggle-switch">
-                                <input type="checkbox" id="autoplayOnHover" 
-                                       onchange="settingsManager.saveToggleSetting('autoplayOnHover', 'autoplay_on_hover')">
-                                <span class="toggle-slider"></span>
-                            </label>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Only play video previews when hovering over them
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Add Folder Settings Section -->
-            <div class="settings-section">
-                <h3>Folder Settings</h3>
-                
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="defaultLoraRoot">Default LoRA Root</label>
-                        </div>
-                        <div class="setting-control select-control">
-                            <select id="defaultLoraRoot" onchange="settingsManager.saveSelectSetting('defaultLoraRoot', 'default_lora_root')">
-                                <option value="">No Default</option>
-                                <!-- Options will be loaded dynamically -->
-                            </select>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Set the default LoRA root directory for downloads, imports and moves
-                    </div>
-                </div>
-                
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="defaultCheckpointRoot">Default Checkpoint Root</label>
-                        </div>
-                        <div class="setting-control select-control">
-                            <select id="defaultCheckpointRoot" onchange="settingsManager.saveSelectSetting('defaultCheckpointRoot', 'default_checkpoint_root')">
-                                <option value="">No Default</option>
-                                <!-- Options will be loaded dynamically -->
-                            </select>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Set the default checkpoint root directory for downloads, imports and moves
-                    </div>
-                </div>
-            </div>
-
-            <!-- Default Path Customization Section -->
-            <div class="settings-section">
-                <h3>Default Path Customization</h3>
-                
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="downloadPathTemplate">Download Path Template</label>
-                        </div>
-                        <div class="setting-control select-control">
-                            <select id="downloadPathTemplate" onchange="settingsManager.saveSelectSetting('downloadPathTemplate', 'download_path_template')">
-                                <option value="">Flat Structure</option>
-                                <option value="{base_model}">By Base Model</option>
-                                <option value="{first_tag}">By First Tag</option>
-                                <option value="{base_model}/{first_tag}">Base Model + First Tag</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Configure path structure for default download locations
-                        <ul class="list-description">
-                            <li><strong>Flat:</strong> All models in root folder</li>
-                            <li><strong>Base Model:</strong> Organized by model type (e.g., Flux.1 D, SDXL)</li>
-                            <li><strong>First Tag:</strong> Organized by primary tag (e.g., style, character)</li>
-                            <li><strong>Base Model + Tag:</strong> Two-level organization for better structure</li>
-                        </ul>
-                    </div>
-                    <div id="pathTemplatePreview" class="template-preview"></div>
-                </div>
-
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label>Base Model Path Mappings</label>
-                        </div>
-                        <div class="setting-control">
-                            <button type="button" class="add-mapping-btn" onclick="settingsManager.addMappingRow()">
-                                <i class="fas fa-plus"></i>
-                                <span>Add Mapping</span>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Customize folder names for specific base models (e.g., "Flux.1 D" → "flux")
-                    </div>
-                    <div class="mappings-container">
-                        <div id="baseModelMappingsContainer">
-                            <!-- Mapping rows will be added dynamically -->
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Add Layout Settings Section -->
-            <div class="settings-section">
-                <h3>Layout Settings</h3>
-                
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="displayDensity">Display Density</label>
-                        </div>
-                        <div class="setting-control select-control">
-                            <select id="displayDensity" onchange="settingsManager.saveSelectSetting('displayDensity', 'display_density')">
-                                <option value="default">Default</option>
-                                <option value="medium">Medium</option>
-                                <option value="compact">Compact</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Choose how many cards to display per row:
-                        <ul class="list-description">
-                            <li><strong>Default:</strong> 5 (1080p), 6 (2K), 8 (4K)</li>
-                            <li><strong>Medium:</strong> 6 (1080p), 7 (2K), 9 (4K)</li>
-                            <li><strong>Compact:</strong> 7 (1080p), 8 (2K), 10 (4K)</li>
-                        </ul>
-                        <span class="warning-text">Warning: Higher densities may cause performance issues on systems with limited resources.</span>
-                    </div>
-                </div>
-                
-                <!-- Add Card Info Display setting -->
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="cardInfoDisplay">Card Info Display</label>
-                        </div>
-                        <div class="setting-control select-control">
-                            <select id="cardInfoDisplay" onchange="settingsManager.saveSelectSetting('cardInfoDisplay', 'card_info_display')">
-                                <option value="always">Always Visible</option>
-                                <option value="hover">Reveal on Hover</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Choose when to display model information and action buttons:
-                        <ul class="list-description">
-                            <li><strong>Always Visible:</strong> Headers and footers are always visible</li>
-                            <li><strong>Reveal on Hover:</strong> Headers and footers only appear when hovering over a card</li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Add Example Images Settings Section -->
-            <div class="settings-section">
-                <h3>Example Images</h3>
-                
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="exampleImagesPath">Download Location <i class="fas fa-sync-alt restart-required-icon" title="Requires restart"></i></label>
-                        </div>
-                        <div class="setting-control path-control">
-                            <input type="text" id="exampleImagesPath" placeholder="Enter folder path for example images" />
-                            <button id="exampleImagesDownloadBtn" class="primary-btn">
-                                <i class="fas fa-download"></i> <span id="exampleDownloadBtnText">Download</span>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Enter the folder path where example images from Civitai will be saved
-                    </div>
-                </div>
-                
-                <div class="setting-item">
-                    <div class="setting-row">
-                        <div class="setting-info">
-                            <label for="optimizeExampleImages">Optimize Downloaded Images</label>
-                        </div>
-                        <div class="setting-control">
-                            <label class="toggle-switch">
-                                <input type="checkbox" id="optimizeExampleImages" checked 
-                                       onchange="settingsManager.saveToggleSetting('optimizeExampleImages', 'optimize_example_images')">
-                                <span class="toggle-slider"></span>
-                            </label>
-                        </div>
-                    </div>
-                    <div class="input-help">
-                        Optimize example images to reduce file size and improve loading speed (metadata will be preserved)
-                    </div>
-                </div>
-            </div>
-        </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/vcqNrWVFvM" 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>
-
-            <!-- Patreon Support Section -->
-            <div class="support-section">
-                <h3><i class="fab fa-patreon"></i> Become a Patron</h3>
-                <p>Support ongoing development with monthly contributions:</p>
-                <a href="https://patreon.com/PixelPawsAI" class="patreon-button" target="_blank">
-                    <i class="fab fa-patreon"></i>
-                    <span>Support on Patreon</span>
-                </a>
-            </div>
-
-            <!-- New section for Chinese payment methods -->
-            <div class="support-section">
-                <h3><i class="fas fa-qrcode"></i> WeChat Support</h3>
-                <p>For users in China, you can support via WeChat:</p>
-                <button class="secondary-btn qrcode-toggle" id="toggleQRCode">
-                    <i class="fas fa-qrcode"></i>
-                    <span class="toggle-text">Show WeChat QR Code</span>
-                    <i class="fas fa-chevron-down toggle-icon"></i>
-                </button>
-                <div class="qrcode-container" id="qrCodeContainer">
-                    <img src="/loras_static/images/wechat-qr.webp" alt="WeChat Pay QR Code" class="qrcode-image">
-                </div>
-            </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="git-info" style="display:none;">Commit: unknown</div>
-                    <div class="new-version">
-                        <span class="label">New Version:</span>
-                        <span class="version-number">v0.0.0</span>
-                    </div>
-                </div>
-                
-                <div class="update-actions">
-                    <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>
-                    <button id="updateBtn" class="primary-btn disabled">
-                        <i class="fas fa-download"></i>
-                        <span id="updateBtnText">Update Now</span>
-                    </button>
-                </div>
-            </div>
-            
-            <!-- Update Progress Section -->
-            <div class="update-progress" id="updateProgress" style="display: none;">
-                <div class="progress-info">
-                    <div class="progress-text" id="updateProgressText">Preparing update...</div>
-                    <div class="progress-bar">
-                        <div class="progress-fill" id="updateProgressFill"></div>
-                    </div>
-                </div>
-            </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>
-
-<!-- Help Modal -->
-<div id="helpModal" class="modal">
-    <div class="modal-content help-modal">
-        <button class="close" onclick="modalManager.closeModal('helpModal')">&times;</button>
-        <div class="help-header">
-            <h2>Help & Tutorials</h2>
-        </div>
-        
-        <div class="help-tabs">
-            <button class="tab-btn active" data-tab="getting-started">Getting Started</button>
-            <button class="tab-btn" data-tab="update-vlogs">Update Vlogs</button>
-            <button class="tab-btn" data-tab="documentation">Documentation</button>
-        </div>
-        
-        <div class="help-content">
-            <!-- Getting Started Tab -->
-            <div class="tab-pane active" id="getting-started">
-                <h3>Getting Started with LoRA Manager</h3>
-                <div class="video-container">
-                    <div class="video-thumbnail" data-video-id="hvKw31YpE-U">
-                        <img src="/loras_static/images/video-thumbnails/getting-started.jpg" alt="Getting Started with LoRA Manager">
-                        <div class="video-play-overlay">
-                            <a href="https://www.youtube.com/watch?v=hvKw31YpE-U" target="_blank" class="external-link-btn">
-                                <i class="fas fa-external-link-alt"></i>
-                                <span>Watch on YouTube</span>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="help-text">
-                    <h4>Key Features:</h4>
-                    <ul>
-                        <li><strong>Seamless Integration:</strong> One-click workflow integration with ComfyUI</li>
-                        <li><strong>Visual Management:</strong> Organize and manage all your LoRA models with an intuitive interface</li>
-                        <li><strong>Automatic Metadata:</strong> Fetch previews, trigger words, and details automatically</li>
-                        <li><strong>Civitai Integration:</strong> Direct downloads with full API support</li>
-                        <li><strong>Offline Preview Storage:</strong> Store and manage model examples locally</li>
-                        <li><strong>Advanced Controls:</strong> Trigger word toggles and customizable loader node</li>
-                        <li><strong>Recipe System:</strong> Create, save and share your perfect combinations</li>
-                    </ul>
-                </div>
-            </div>
-            
-            <!-- Update Vlogs Tab -->
-            <div class="tab-pane" id="update-vlogs">
-                <h3>
-                    Latest Updates
-                    <span class="update-date-badge">
-                        <i class="fas fa-calendar-alt"></i>
-                        Apr 28, 2025
-                    </span>
-                </h3>
-                <div class="video-list">
-                    <div class="video-item">
-                        <div class="video-container">
-                            <div class="video-thumbnail" data-video-id="videoseries?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj">
-                                <img src="/loras_static/images/video-thumbnails/updates-playlist.jpg" alt="LoRA Manager Updates Playlist">
-                                <div class="video-play-overlay">
-                                    <a href="https://www.youtube.com/playlist?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj" target="_blank" class="external-link-btn">
-                                        <i class="fas fa-external-link-alt"></i>
-                                        <span>Watch on YouTube</span>
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="video-info">
-                            <h4>LoRA Manager Updates Playlist</h4>
-                            <p>Watch all update videos showcasing the latest features and improvements.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Documentation Tab -->
-            <div class="tab-pane" id="documentation">
-                <h3>Documentation</h3>
-                
-                <div class="docs-section">
-                    <h4><i class="fas fa-book"></i> General</h4>
-                    <ul class="docs-links">
-                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki" target="_blank">Wiki Home</a></li>
-                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/blob/main/README.md" target="_blank">README</a></li>
-                    </ul>
-                </div>
-                
-                <div class="docs-section">
-                    <h4><i class="fas fa-tools"></i> Troubleshooting</h4>
-                    <ul class="docs-links">
-                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/FAQ-(Frequently-Asked-Questions)" target="_blank">FAQ (Frequently Asked Questions)</a></li>
-                    </ul>
-                </div>
-                
-                <div class="docs-section">
-                    <h4><i class="fas fa-layer-group"></i> Model Management</h4>
-                    <ul class="docs-links">
-                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Example-Images" target="_blank">Example Images (WIP)</a></li>
-                    </ul>
-                </div>
-                
-                <div class="docs-section">
-                    <h4><i class="fas fa-book-open"></i> Recipes</h4>
-                    <ul class="docs-links">
-                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Recipes-Feature-Tutorial-%E2%80%93-ComfyUI-LoRA-Manager" target="_blank">Recipes Tutorial</a></li>
-                    </ul>
-                </div>
-                
-                <div class="docs-section">
-                    <h4><i class="fas fa-cog"></i> Settings & Configuration</h4>
-                    <ul class="docs-links">
-                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Configuration" target="_blank">Configuration Options (WIP)</a></li>
-                    </ul>
-                </div>
-                
-                <div class="docs-section">
-                    <h4>
-                        <i class="fas fa-puzzle-piece"></i> Extensions
-                        <span class="new-content-badge">NEW</span>
-                    </h4>
-                    <ul class="docs-links">
-                        <li>
-                            <a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/LoRA-Manager-Civitai-Extension-(Chrome-Extension)" target="_blank">
-                                LM Civitai Extension
-                                <span class="new-content-badge inline">NEW</span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Re-link to Civitai Modal -->
-<div id="relinkCivitaiModal" class="modal">
-    <div class="modal-content">
-        <button class="close" onclick="modalManager.closeModal('relinkCivitaiModal')">&times;</button>
-        <h2>Re-link to Civitai</h2>
-        <div class="warning-box">
-            <i class="fas fa-exclamation-triangle"></i>
-            <p><strong>Warning:</strong> This is a potentially destructive operation. Re-linking will:</p>
-            <ul>
-                <li>Override existing metadata</li>
-                <li>Potentially modify the model hash</li>
-                <li>May have other unintended consequences</li>
-            </ul>
-            <p>Only proceed if you're sure this is what you want.</p>
-        </div>
-        <div class="input-group">
-            <label for="civitaiModelUrl">Civitai Model URL:</label>
-            <input type="text" id="civitaiModelUrl" placeholder="https://civitai.com/models/649516/model-name?modelVersionId=726676" />
-            <div class="input-error" id="civitaiModelUrlError"></div>
-            <div class="input-help">
-                Paste any Civitai model URL. Supported formats:<br>
-                • https://civitai.com/models/649516<br>
-                • https://civitai.com/models/649516?modelVersionId=726676<br>
-                • https://civitai.com/models/649516/model-name?modelVersionId=726676<br>
-                <em>Note: If no modelVersionId is provided, the latest version will be used.</em>
-            </div>
-        </div>
-        <div class="modal-actions">
-            <button class="cancel-btn" onclick="modalManager.closeModal('relinkCivitaiModal')">Cancel</button>
-            <button class="confirm-btn" id="confirmRelinkBtn">Confirm Re-link</button>
-        </div>
-    </div>
-</div>
-
-<!-- Example Images Access Modal -->
-<div id="exampleAccessModal" class="modal">
-    <div class="modal-content example-access-modal">
-        <button class="close" onclick="modalManager.closeModal('exampleAccessModal')">&times;</button>
-        <h2>Local Example Images</h2>
-        <p>No local example images found for this model. View options:</p>
-
-        <div class="example-access-options">
-            <button id="downloadExamplesBtn" class="example-option-btn">
-                <i class="fas fa-cloud-download-alt"></i>
-                <span class="option-title">Download from Civitai</span>
-                <span class="option-desc">Save remote examples locally for offline use and faster loading</span>
-            </button>
-
-            <button id="importExamplesBtn" class="example-option-btn">
-                <i class="fas fa-file-import"></i>
-                <span class="option-title">Import Your Own</span>
-                <span class="option-desc">Add your own custom examples for this model</span>
-            </button>
-        </div>
-
-        <div class="modal-footer-note">
-            <i class="fas fa-info-circle"></i>
-            <span>Remote examples are still viewable in the model details even without local copies</span>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+{% include 'components/modals/confirm_modals.html' %}
+{% include 'components/modals/settings_modal.html' %}
+{% include 'components/modals/support_modal.html' %}
+{% include 'components/modals/update_modal.html' %}
+{% include 'components/modals/help_modal.html' %}
+{% include 'components/modals/relink_civitai_modal.html' %}
+{% include 'components/modals/example_access_modal.html' %}
\ No newline at end of file
diff --git a/templates/components/modals/confirm_modals.html b/templates/components/modals/confirm_modals.html
new file mode 100644
index 00000000..ba03493f
--- /dev/null
+++ b/templates/components/modals/confirm_modals.html
@@ -0,0 +1,85 @@
+<!-- Delete Confirmation Modal -->
+<div id="deleteModal" class="modal delete-modal">
+    <div class="modal-content delete-modal-content">
+        <h2>Delete Model</h2>
+        <p class="delete-message">Are you sure you want to delete this model and all associated files?</p>
+        <div class="delete-model-info"></div>
+        <div class="modal-actions">
+            <button class="cancel-btn" onclick="closeDeleteModal()">Cancel</button>
+            <button class="delete-btn" onclick="confirmDelete()">Delete</button>
+        </div>
+    </div>
+</div>
+
+<!-- Exclude Confirmation Modal -->
+<div id="excludeModal" class="modal delete-modal">
+    <div class="modal-content delete-modal-content">
+        <h2>Exclude Model</h2>
+        <p class="delete-message">Are you sure you want to exclude this model? Excluded models won't appear in searches or model lists.</p>
+        <div class="exclude-model-info"></div>
+        <div class="modal-actions">
+            <button class="cancel-btn" onclick="closeExcludeModal()">Cancel</button>
+            <button class="exclude-btn" onclick="confirmExclude()">Exclude</button>
+        </div>
+    </div>
+</div>
+
+<!-- Recipes Duplicate Delete Confirmation Modal -->
+<div id="duplicateDeleteModal" class="modal delete-modal">
+    <div class="modal-content delete-modal-content">
+        <h2>Delete Duplicate Recipes</h2>
+        <p class="delete-message">Are you sure you want to delete the selected duplicate recipes?</p>
+        <div class="delete-model-info">
+            <p><span id="duplicateDeleteCount">0</span> recipes will be permanently deleted.</p>
+        </div>
+        <div class="modal-actions">
+            <button class="cancel-btn" onclick="modalManager.closeModal('duplicateDeleteModal')">Cancel</button>
+            <button class="delete-btn" onclick="recipeManager.confirmDeleteDuplicates()">Delete</button>
+        </div>
+    </div>
+</div>
+
+<!-- Models Duplicate Delete Confirmation Modal -->
+<div id="modelDuplicateDeleteModal" class="modal delete-modal">
+    <div class="modal-content delete-modal-content">
+        <h2>Delete Duplicate Models</h2>
+        <p class="delete-message">Are you sure you want to delete the selected duplicate models?</p>
+        <div class="delete-model-info">
+            <p><span id="modelDuplicateDeleteCount">0</span> models will be permanently deleted.</p>
+        </div>
+        <div class="modal-actions">
+            <button class="cancel-btn" onclick="modalManager.closeModal('modelDuplicateDeleteModal')">Cancel</button>
+            <button class="delete-btn" onclick="modelDuplicatesManager.confirmDeleteDuplicates()">Delete</button>
+        </div>
+    </div>
+</div>
+
+<!-- Cache Clear Confirmation Modal -->
+<div id="clearCacheModal" class="modal delete-modal">
+    <div class="modal-content delete-modal-content">
+        <h2>Clear Cache Files</h2>
+        <p class="delete-message">Are you sure you want to clear all cache files?</p>
+        <div class="delete-model-info">
+            <p>This will remove all cached model data. The system will need to rebuild the cache on next startup, which may take some time depending on your model collection size.</p>
+        </div>
+        <div class="modal-actions">
+            <button class="cancel-btn" onclick="modalManager.closeModal('clearCacheModal')">Cancel</button>
+            <button class="delete-btn" onclick="settingsManager.executeClearCache()">Clear Cache</button>
+        </div>
+    </div>
+</div>
+
+<!-- Bulk Delete Confirmation Modal -->
+<div id="bulkDeleteModal" class="modal delete-modal">
+    <div class="modal-content delete-modal-content">
+        <h2>Delete Multiple Models</h2>
+        <p class="delete-message">Are you sure you want to delete all selected models and their associated files?</p>
+        <div class="delete-model-info">
+            <p><span id="bulkDeleteCount">0</span> models will be permanently deleted.</p>
+        </div>
+        <div class="modal-actions">
+            <button class="cancel-btn" onclick="modalManager.closeModal('bulkDeleteModal')">Cancel</button>
+            <button class="delete-btn" onclick="bulkManager.confirmBulkDelete()">Delete All</button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/components/modals/example_access_modal.html b/templates/components/modals/example_access_modal.html
new file mode 100644
index 00000000..bfd56fb7
--- /dev/null
+++ b/templates/components/modals/example_access_modal.html
@@ -0,0 +1,27 @@
+<!-- Example Images Access Modal -->
+<div id="exampleAccessModal" class="modal">
+    <div class="modal-content example-access-modal">
+        <button class="close" onclick="modalManager.closeModal('exampleAccessModal')">&times;</button>
+        <h2>Local Example Images</h2>
+        <p>No local example images found for this model. View options:</p>
+
+        <div class="example-access-options">
+            <button id="downloadExamplesBtn" class="example-option-btn">
+                <i class="fas fa-cloud-download-alt"></i>
+                <span class="option-title">Download from Civitai</span>
+                <span class="option-desc">Save remote examples locally for offline use and faster loading</span>
+            </button>
+
+            <button id="importExamplesBtn" class="example-option-btn">
+                <i class="fas fa-file-import"></i>
+                <span class="option-title">Import Your Own</span>
+                <span class="option-desc">Add your own custom examples for this model</span>
+            </button>
+        </div>
+
+        <div class="modal-footer-note">
+            <i class="fas fa-info-circle"></i>
+            <span>Remote examples are still viewable in the model details even without local copies</span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/components/modals/help_modal.html b/templates/components/modals/help_modal.html
new file mode 100644
index 00000000..0c1d1566
--- /dev/null
+++ b/templates/components/modals/help_modal.html
@@ -0,0 +1,131 @@
+<!-- Help Modal -->
+<div id="helpModal" class="modal">
+    <div class="modal-content help-modal">
+        <button class="close" onclick="modalManager.closeModal('helpModal')">&times;</button>
+        <div class="help-header">
+            <h2>Help & Tutorials</h2>
+        </div>
+        
+        <div class="help-tabs">
+            <button class="tab-btn active" data-tab="getting-started">Getting Started</button>
+            <button class="tab-btn" data-tab="update-vlogs">Update Vlogs</button>
+            <button class="tab-btn" data-tab="documentation">Documentation</button>
+        </div>
+        
+        <div class="help-content">
+            <!-- Getting Started Tab -->
+            <div class="tab-pane active" id="getting-started">
+                <h3>Getting Started with LoRA Manager</h3>
+                <div class="video-container">
+                    <div class="video-thumbnail" data-video-id="hvKw31YpE-U">
+                        <img src="/loras_static/images/video-thumbnails/getting-started.jpg" alt="Getting Started with LoRA Manager">
+                        <div class="video-play-overlay">
+                            <a href="https://www.youtube.com/watch?v=hvKw31YpE-U" target="_blank" class="external-link-btn">
+                                <i class="fas fa-external-link-alt"></i>
+                                <span>Watch on YouTube</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="help-text">
+                    <h4>Key Features:</h4>
+                    <ul>
+                        <li><strong>Seamless Integration:</strong> One-click workflow integration with ComfyUI</li>
+                        <li><strong>Visual Management:</strong> Organize and manage all your LoRA models with an intuitive interface</li>
+                        <li><strong>Automatic Metadata:</strong> Fetch previews, trigger words, and details automatically</li>
+                        <li><strong>Civitai Integration:</strong> Direct downloads with full API support</li>
+                        <li><strong>Offline Preview Storage:</strong> Store and manage model examples locally</li>
+                        <li><strong>Advanced Controls:</strong> Trigger word toggles and customizable loader node</li>
+                        <li><strong>Recipe System:</strong> Create, save and share your perfect combinations</li>
+                    </ul>
+                </div>
+            </div>
+            
+            <!-- Update Vlogs Tab -->
+            <div class="tab-pane" id="update-vlogs">
+                <h3>
+                    Latest Updates
+                    <span class="update-date-badge">
+                        <i class="fas fa-calendar-alt"></i>
+                        Apr 28, 2025
+                    </span>
+                </h3>
+                <div class="video-list">
+                    <div class="video-item">
+                        <div class="video-container">
+                            <div class="video-thumbnail" data-video-id="videoseries?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj">
+                                <img src="/loras_static/images/video-thumbnails/updates-playlist.jpg" alt="LoRA Manager Updates Playlist">
+                                <div class="video-play-overlay">
+                                    <a href="https://www.youtube.com/playlist?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj" target="_blank" class="external-link-btn">
+                                        <i class="fas fa-external-link-alt"></i>
+                                        <span>Watch on YouTube</span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="video-info">
+                            <h4>LoRA Manager Updates Playlist</h4>
+                            <p>Watch all update videos showcasing the latest features and improvements.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Documentation Tab -->
+            <div class="tab-pane" id="documentation">
+                <h3>Documentation</h3>
+                
+                <div class="docs-section">
+                    <h4><i class="fas fa-book"></i> General</h4>
+                    <ul class="docs-links">
+                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki" target="_blank">Wiki Home</a></li>
+                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/blob/main/README.md" target="_blank">README</a></li>
+                    </ul>
+                </div>
+                
+                <div class="docs-section">
+                    <h4><i class="fas fa-tools"></i> Troubleshooting</h4>
+                    <ul class="docs-links">
+                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/FAQ-(Frequently-Asked-Questions)" target="_blank">FAQ (Frequently Asked Questions)</a></li>
+                    </ul>
+                </div>
+                
+                <div class="docs-section">
+                    <h4><i class="fas fa-layer-group"></i> Model Management</h4>
+                    <ul class="docs-links">
+                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Example-Images" target="_blank">Example Images (WIP)</a></li>
+                    </ul>
+                </div>
+                
+                <div class="docs-section">
+                    <h4><i class="fas fa-book-open"></i> Recipes</h4>
+                    <ul class="docs-links">
+                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Recipes-Feature-Tutorial-%E2%80%93-ComfyUI-LoRA-Manager" target="_blank">Recipes Tutorial</a></li>
+                    </ul>
+                </div>
+                
+                <div class="docs-section">
+                    <h4><i class="fas fa-cog"></i> Settings & Configuration</h4>
+                    <ul class="docs-links">
+                        <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Configuration" target="_blank">Configuration Options (WIP)</a></li>
+                    </ul>
+                </div>
+                
+                <div class="docs-section">
+                    <h4>
+                        <i class="fas fa-puzzle-piece"></i> Extensions
+                        <span class="new-content-badge">NEW</span>
+                    </h4>
+                    <ul class="docs-links">
+                        <li>
+                            <a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/LoRA-Manager-Civitai-Extension-(Chrome-Extension)" target="_blank">
+                                LM Civitai Extension
+                                <span class="new-content-badge inline">NEW</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/components/modals/relink_civitai_modal.html b/templates/components/modals/relink_civitai_modal.html
new file mode 100644
index 00000000..b8358bcb
--- /dev/null
+++ b/templates/components/modals/relink_civitai_modal.html
@@ -0,0 +1,33 @@
+<!-- Re-link to Civitai Modal -->
+<div id="relinkCivitaiModal" class="modal">
+    <div class="modal-content">
+        <button class="close" onclick="modalManager.closeModal('relinkCivitaiModal')">&times;</button>
+        <h2>Re-link to Civitai</h2>
+        <div class="warning-box">
+            <i class="fas fa-exclamation-triangle"></i>
+            <p><strong>Warning:</strong> This is a potentially destructive operation. Re-linking will:</p>
+            <ul>
+                <li>Override existing metadata</li>
+                <li>Potentially modify the model hash</li>
+                <li>May have other unintended consequences</li>
+            </ul>
+            <p>Only proceed if you're sure this is what you want.</p>
+        </div>
+        <div class="input-group">
+            <label for="civitaiModelUrl">Civitai Model URL:</label>
+            <input type="text" id="civitaiModelUrl" placeholder="https://civitai.com/models/649516/model-name?modelVersionId=726676" />
+            <div class="input-error" id="civitaiModelUrlError"></div>
+            <div class="input-help">
+                Paste any Civitai model URL. Supported formats:<br>
+                • https://civitai.com/models/649516<br>
+                • https://civitai.com/models/649516?modelVersionId=726676<br>
+                • https://civitai.com/models/649516/model-name?modelVersionId=726676<br>
+                <em>Note: If no modelVersionId is provided, the latest version will be used.</em>
+            </div>
+        </div>
+        <div class="modal-actions">
+            <button class="cancel-btn" onclick="modalManager.closeModal('relinkCivitaiModal')">Cancel</button>
+            <button class="confirm-btn" id="confirmRelinkBtn">Confirm Re-link</button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/components/modals/settings_modal.html b/templates/components/modals/settings_modal.html
new file mode 100644
index 00000000..a475a568
--- /dev/null
+++ b/templates/components/modals/settings_modal.html
@@ -0,0 +1,278 @@
+<!-- Settings Modal -->
+<div id="settingsModal" class="modal">
+    <div class="modal-content settings-modal">
+        <button class="close" onclick="modalManager.closeModal('settingsModal')">&times;</button>
+        <h2>Settings</h2>
+        <div class="settings-form">
+            <div class="setting-item api-key-item">
+                <div class="setting-row">
+                    <div class="setting-info">
+                        <label for="civitaiApiKey">Civitai API Key:</label>
+                    </div>
+                    <div class="setting-control">
+                        <div class="api-key-input">
+                            <input type="password" 
+                                id="civitaiApiKey" 
+                                placeholder="Enter your Civitai API key"
+                                value="{{ settings.get('civitai_api_key', '') }}"
+                                onblur="settingsManager.saveInputSetting('civitaiApiKey', 'civitai_api_key')"
+                                onkeydown="if(event.key === 'Enter') { this.blur(); }" />
+                            <button class="toggle-visibility">
+                                <i class="fas fa-eye"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="input-help">
+                    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-row">
+                        <div class="setting-info">
+                            <label for="blurMatureContent">Blur NSFW Content</label>
+                        </div>
+                        <div class="setting-control">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="blurMatureContent" checked 
+                                       onchange="settingsManager.saveToggleSetting('blurMatureContent', 'blur_mature_content')">
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Blur mature (NSFW) content preview images
+                    </div>
+                </div>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="showOnlySFW">Show Only SFW Results</label>
+                        </div>
+                        <div class="setting-control">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="showOnlySFW" value="{{ settings.get('show_only_sfw', False) }}" {% if settings.get('show_only_sfw', False) %}checked{% endif %}
+                                       onchange="settingsManager.saveToggleSetting('showOnlySFW', 'show_only_sfw')">
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Filter out all NSFW content when browsing and searching
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Add Video Settings Section -->
+            <div class="settings-section">
+                <h3>Video Settings</h3>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="autoplayOnHover">Autoplay Videos on Hover</label>
+                        </div>
+                        <div class="setting-control">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="autoplayOnHover" 
+                                       onchange="settingsManager.saveToggleSetting('autoplayOnHover', 'autoplay_on_hover')">
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Only play video previews when hovering over them
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Add Folder Settings Section -->
+            <div class="settings-section">
+                <h3>Folder Settings</h3>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="defaultLoraRoot">Default LoRA Root</label>
+                        </div>
+                        <div class="setting-control select-control">
+                            <select id="defaultLoraRoot" onchange="settingsManager.saveSelectSetting('defaultLoraRoot', 'default_lora_root')">
+                                <option value="">No Default</option>
+                                <!-- Options will be loaded dynamically -->
+                            </select>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Set the default LoRA root directory for downloads, imports and moves
+                    </div>
+                </div>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="defaultCheckpointRoot">Default Checkpoint Root</label>
+                        </div>
+                        <div class="setting-control select-control">
+                            <select id="defaultCheckpointRoot" onchange="settingsManager.saveSelectSetting('defaultCheckpointRoot', 'default_checkpoint_root')">
+                                <option value="">No Default</option>
+                                <!-- Options will be loaded dynamically -->
+                            </select>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Set the default checkpoint root directory for downloads, imports and moves
+                    </div>
+                </div>
+            </div>
+
+            <!-- Default Path Customization Section -->
+            <div class="settings-section">
+                <h3>Default Path Customization</h3>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="downloadPathTemplate">Download Path Template</label>
+                        </div>
+                        <div class="setting-control select-control">
+                            <select id="downloadPathTemplate" onchange="settingsManager.saveSelectSetting('downloadPathTemplate', 'download_path_template')">
+                                <option value="">Flat Structure</option>
+                                <option value="{base_model}">By Base Model</option>
+                                <option value="{first_tag}">By First Tag</option>
+                                <option value="{base_model}/{first_tag}">Base Model + First Tag</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Configure path structure for default download locations
+                        <ul class="list-description">
+                            <li><strong>Flat:</strong> All models in root folder</li>
+                            <li><strong>Base Model:</strong> Organized by model type (e.g., Flux.1 D, SDXL)</li>
+                            <li><strong>First Tag:</strong> Organized by primary tag (e.g., style, character)</li>
+                            <li><strong>Base Model + Tag:</strong> Two-level organization for better structure</li>
+                        </ul>
+                    </div>
+                    <div id="pathTemplatePreview" class="template-preview"></div>
+                </div>
+
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label>Base Model Path Mappings</label>
+                        </div>
+                        <div class="setting-control">
+                            <button type="button" class="add-mapping-btn" onclick="settingsManager.addMappingRow()">
+                                <i class="fas fa-plus"></i>
+                                <span>Add Mapping</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Customize folder names for specific base models (e.g., "Flux.1 D" → "flux")
+                    </div>
+                    <div class="mappings-container">
+                        <div id="baseModelMappingsContainer">
+                            <!-- Mapping rows will be added dynamically -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Add Layout Settings Section -->
+            <div class="settings-section">
+                <h3>Layout Settings</h3>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="displayDensity">Display Density</label>
+                        </div>
+                        <div class="setting-control select-control">
+                            <select id="displayDensity" onchange="settingsManager.saveSelectSetting('displayDensity', 'display_density')">
+                                <option value="default">Default</option>
+                                <option value="medium">Medium</option>
+                                <option value="compact">Compact</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Choose how many cards to display per row:
+                        <ul class="list-description">
+                            <li><strong>Default:</strong> 5 (1080p), 6 (2K), 8 (4K)</li>
+                            <li><strong>Medium:</strong> 6 (1080p), 7 (2K), 9 (4K)</li>
+                            <li><strong>Compact:</strong> 7 (1080p), 8 (2K), 10 (4K)</li>
+                        </ul>
+                        <span class="warning-text">Warning: Higher densities may cause performance issues on systems with limited resources.</span>
+                    </div>
+                </div>
+                
+                <!-- Add Card Info Display setting -->
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="cardInfoDisplay">Card Info Display</label>
+                        </div>
+                        <div class="setting-control select-control">
+                            <select id="cardInfoDisplay" onchange="settingsManager.saveSelectSetting('cardInfoDisplay', 'card_info_display')">
+                                <option value="always">Always Visible</option>
+                                <option value="hover">Reveal on Hover</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Choose when to display model information and action buttons:
+                        <ul class="list-description">
+                            <li><strong>Always Visible:</strong> Headers and footers are always visible</li>
+                            <li><strong>Reveal on Hover:</strong> Headers and footers only appear when hovering over a card</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Add Example Images Settings Section -->
+            <div class="settings-section">
+                <h3>Example Images</h3>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="exampleImagesPath">Download Location <i class="fas fa-sync-alt restart-required-icon" title="Requires restart"></i></label>
+                        </div>
+                        <div class="setting-control path-control">
+                            <input type="text" id="exampleImagesPath" placeholder="Enter folder path for example images" />
+                            <button id="exampleImagesDownloadBtn" class="primary-btn">
+                                <i class="fas fa-download"></i> <span id="exampleDownloadBtnText">Download</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Enter the folder path where example images from Civitai will be saved
+                    </div>
+                </div>
+                
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="optimizeExampleImages">Optimize Downloaded Images</label>
+                        </div>
+                        <div class="setting-control">
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="optimizeExampleImages" checked 
+                                       onchange="settingsManager.saveToggleSetting('optimizeExampleImages', 'optimize_example_images')">
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Optimize example images to reduce file size and improve loading speed (metadata will be preserved)
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/components/modals/support_modal.html b/templates/components/modals/support_modal.html
new file mode 100644
index 00000000..c2a3ab63
--- /dev/null
+++ b/templates/components/modals/support_modal.html
@@ -0,0 +1,91 @@
+<!-- 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/vcqNrWVFvM" 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>
+
+            <!-- Patreon Support Section -->
+            <div class="support-section">
+                <h3><i class="fab fa-patreon"></i> Become a Patron</h3>
+                <p>Support ongoing development with monthly contributions:</p>
+                <a href="https://patreon.com/PixelPawsAI" class="patreon-button" target="_blank">
+                    <i class="fab fa-patreon"></i>
+                    <span>Support on Patreon</span>
+                </a>
+            </div>
+
+            <!-- New section for Chinese payment methods -->
+            <div class="support-section">
+                <h3><i class="fas fa-qrcode"></i> WeChat Support</h3>
+                <p>For users in China, you can support via WeChat:</p>
+                <button class="secondary-btn qrcode-toggle" id="toggleQRCode">
+                    <i class="fas fa-qrcode"></i>
+                    <span class="toggle-text">Show WeChat QR Code</span>
+                    <i class="fas fa-chevron-down toggle-icon"></i>
+                </button>
+                <div class="qrcode-container" id="qrCodeContainer">
+                    <img src="/loras_static/images/wechat-qr.webp" alt="WeChat Pay QR Code" class="qrcode-image">
+                </div>
+            </div>
+            
+            <div class="support-footer">
+                <p>Thank you for using LoRA Manager! ❤️</p>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/components/modals/update_modal.html b/templates/components/modals/update_modal.html
new file mode 100644
index 00000000..e6e162ae
--- /dev/null
+++ b/templates/components/modals/update_modal.html
@@ -0,0 +1,64 @@
+<!-- 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="git-info" style="display:none;">Commit: unknown</div>
+                    <div class="new-version">
+                        <span class="label">New Version:</span>
+                        <span class="version-number">v0.0.0</span>
+                    </div>
+                </div>
+                
+                <div class="update-actions">
+                    <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>
+                    <button id="updateBtn" class="primary-btn disabled">
+                        <i class="fas fa-download"></i>
+                        <span id="updateBtnText">Update Now</span>
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Update Progress Section -->
+            <div class="update-progress" id="updateProgress" style="display: none;">
+                <div class="progress-info">
+                    <div class="progress-text" id="updateProgressText">Preparing update...</div>
+                    <div class="progress-bar">
+                        <div class="progress-fill" id="updateProgressFill"></div>
+                    </div>
+                </div>
+            </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>
\ No newline at end of file