mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-22 05:32:12 -03:00
356 lines
17 KiB
HTML
356 lines
17 KiB
HTML
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Settings Modal -->
|
|
<div id="settingsModal" class="modal">
|
|
<div class="modal-content settings-modal">
|
|
<button class="close" onclick="modalManager.closeModal('settingsModal')">×</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>
|
|
|
|
<!-- 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="density-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>
|
|
</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</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
|
|
</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')">×</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>
|
|
|
|
<!-- 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')">×</button>
|
|
<div class="update-header">
|
|
<i class="fas fa-bell update-icon"></i>
|
|
<h2>Check for Updates</h2>
|
|
</div>
|
|
<div class="update-content">
|
|
<div class="update-info">
|
|
<div class="version-info">
|
|
<div class="current-version">
|
|
<span class="label">Current Version:</span>
|
|
<span class="version-number">v0.0.0</span>
|
|
</div>
|
|
<div class="new-version">
|
|
<span class="label">New Version:</span>
|
|
<span class="version-number">v0.0.0</span>
|
|
</div>
|
|
</div>
|
|
<a href="https://github.com/willmiao/ComfyUI-Lora-Manager" target="_blank" class="update-link">
|
|
<i class="fas fa-external-link-alt"></i> View on GitHub
|
|
</a>
|
|
</div>
|
|
|
|
<div class="changelog-section">
|
|
<h3>Changelog</h3>
|
|
<div class="changelog-content">
|
|
<!-- Dynamic changelog content will be inserted here -->
|
|
<div class="changelog-item">
|
|
<h4>Checking for updates...</h4>
|
|
<p>Please wait while we check for the latest version.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="update-preferences">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="updateNotifications" checked>
|
|
<span class="toggle-slider"></span>
|
|
<span class="toggle-label">Show update notifications</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |