mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-06-10 04:49:24 -03:00
7cbddd9cf7
When CivitAI API returns meta=null and the optimized CDN image has no embedded generation parameters (e.g. PNG tEXt chunks stripped by Cloudflare Images), download the original image as fallback to recover full recipe metadata (prompt, seed, LoRAs, etc.). Also fixes Chrome password manager popping up on recipe save by adding autocomplete="new-password" to the settings API key and proxy password fields.
1291 lines
91 KiB
HTML
1291 lines
91 KiB
HTML
<!-- Settings Modal -->
|
|
<div id="settingsModal" class="modal">
|
|
<div class="modal-content settings-modal">
|
|
<button class="close" onclick="modalManager.closeModal('settingsModal')">×</button>
|
|
<div class="settings-header">
|
|
<h2>{{ t('common.actions.settings') }}</h2>
|
|
<button
|
|
type="button"
|
|
class="settings-action-link settings-open-location-trigger"
|
|
aria-label="{{ t('settings.openSettingsFileLocation.tooltip') }}"
|
|
title="{{ t('settings.openSettingsFileLocation.tooltip') }}">
|
|
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
</button>
|
|
<div class="settings-search-wrapper">
|
|
<i class="fas fa-search settings-search-icon" aria-hidden="true"></i>
|
|
<input type="text"
|
|
id="settingsSearchInput"
|
|
class="settings-search-input"
|
|
placeholder="{{ t('settings.search.placeholder') }}"
|
|
aria-label="{{ t('settings.search.placeholder') }}"
|
|
autocomplete="off">
|
|
<button type="button"
|
|
id="settingsSearchClear"
|
|
class="settings-search-clear"
|
|
aria-label="{{ t('settings.search.clear') }}"
|
|
style="display: none;">
|
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Navigation Sidebar -->
|
|
<nav class="settings-nav" role="navigation" aria-label="Settings sections">
|
|
<ul class="settings-nav-list">
|
|
<li class="settings-nav-group">
|
|
<button type="button" class="settings-nav-item active" data-section="general">{{ t('settings.nav.general') }}</button>
|
|
<button type="button" class="settings-nav-item" data-section="interface">{{ t('settings.nav.interface') }}</button>
|
|
<button type="button" class="settings-nav-item" data-section="library">{{ t('settings.nav.library') }}</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Content Area -->
|
|
<div class="settings-content">
|
|
<div class="settings-form">
|
|
|
|
<!-- Section 1: General -->
|
|
<div id="section-general" class="settings-section active" data-section="general">
|
|
<!-- Language -->
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="languageSelect">
|
|
{{ t('common.language.select') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('common.language.select_help') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="languageSelect" onchange="settingsManager.saveLanguageSetting()">
|
|
<option value="en">{{ t('common.language.english') }}</option>
|
|
<option value="zh-CN">{{ t('common.language.chinese_simplified') }}</option>
|
|
<option value="zh-TW">{{ t('common.language.chinese_traditional') }}</option>
|
|
<option value="ru">{{ t('common.language.russian') }}</option>
|
|
<option value="de">{{ t('common.language.german') }}</option>
|
|
<option value="ja">{{ t('common.language.japanese') }}</option>
|
|
<option value="ko">{{ t('common.language.korean') }}</option>
|
|
<option value="fr">{{ t('common.language.french') }}</option>
|
|
<option value="es">{{ t('common.language.spanish') }}</option>
|
|
<option value="he">{{ t('common.language.Hebrew') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Storage Location -->
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="usePortableSettings">
|
|
{{ t('settings.storage.locationLabel') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.storage.locationHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="usePortableSettings" {% if settings.get('use_portable_settings', False) %}checked{% endif %}
|
|
onchange="settingsManager.saveToggleSetting('usePortableSettings', 'use_portable_settings')">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Configuration -->
|
|
<div class="setting-item api-key-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="civitaiApiKey">{{ t('settings.civitaiApiKey') }}</label>
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.civitaiApiKeyHelp') }}"></i>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="api-key-input">
|
|
<input type="password"
|
|
id="civitaiApiKey"
|
|
placeholder="{{ t('settings.civitaiApiKeyPlaceholder') }}"
|
|
value="{{ settings.get('civitai_api_key', '') }}"
|
|
autocomplete="new-password"
|
|
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>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="civitaiHost">{{ t('settings.civitaiHost.label') }}</label>
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.civitaiHost.help') }}"></i>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="civitaiHost" onchange="settingsManager.saveSelectSetting('civitaiHost', 'civitai_host')">
|
|
<option value="civitai.com">{{ t('settings.civitaiHost.options.com') }}</option>
|
|
<option value="civitai.red">{{ t('settings.civitaiHost.options.red') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.downloads') }}</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="downloadBackend">{{ t('settings.downloadBackend.label') }}</label>
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.downloadBackend.help') }}"></i>
|
|
<a class="settings-action-link" href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Aria2-Download-Backend-(Experimental)" target="_blank" rel="noopener" aria-label="{{ t('settings.aria2HelpLink') }}" title="{{ t('settings.aria2HelpLink') }}">
|
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
</a>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="downloadBackend" onchange="settingsManager.saveSelectSetting('downloadBackend', 'download_backend')">
|
|
<option value="python">{{ t('settings.downloadBackend.options.python') }}</option>
|
|
<option value="aria2">{{ t('settings.downloadBackend.options.aria2') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="setting-item" id="aria2PathSetting" style="display: none;">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="aria2cPath">{{ t('settings.aria2cPath.label') }}</label>
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.aria2cPath.help') }}"></i>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="text-input-wrapper">
|
|
<input type="text"
|
|
id="aria2cPath"
|
|
placeholder="{{ t('settings.aria2cPath.placeholder') }}"
|
|
onblur="settingsManager.saveInputSetting('aria2cPath', 'aria2c_path')"
|
|
onkeydown="if(event.key === 'Enter') { this.blur(); }" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backup -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.backup') }}</h4>
|
|
</div>
|
|
<div class="settings-help-text subtle">
|
|
{{ t('settings.backup.scopeHelp') }}
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="backupAutoEnabled">
|
|
{{ t('settings.backup.autoEnabled') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.backup.autoEnabledHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="backupAutoEnabled"
|
|
onchange="settingsManager.saveToggleSetting('backupAutoEnabled', 'backup_auto_enabled')">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="backupRetentionCount">
|
|
{{ t('settings.backup.retention') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.backup.retentionHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="text-input-wrapper">
|
|
<input
|
|
type="number"
|
|
id="backupRetentionCount"
|
|
min="1"
|
|
step="1"
|
|
onblur="settingsManager.saveInputSetting('backupRetentionCount', 'backup_retention_count')"
|
|
onkeydown="if(event.key === 'Enter') { this.blur(); }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label>
|
|
{{ t('settings.backup.management') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.backup.managementHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<button type="button" class="secondary-btn" onclick="settingsManager.exportBackup()">
|
|
{{ t('settings.backup.exportButton') }}
|
|
</button>
|
|
<button type="button" class="secondary-btn" onclick="settingsManager.triggerBackupImport()" style="margin-left: 10px;">
|
|
{{ t('settings.backup.importButton') }}
|
|
</button>
|
|
<input
|
|
type="file"
|
|
id="backupImportInput"
|
|
accept=".zip,application/zip"
|
|
style="display: none;"
|
|
onchange="settingsManager.handleBackupImportFile(this)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<details class="backup-location-details">
|
|
<summary>{{ t('settings.backup.locationSummary') }}</summary>
|
|
<div class="backup-location-panel">
|
|
<code id="backupLocationPath" class="backup-location-path"></code>
|
|
<button type="button" class="secondary-btn" id="backupOpenLocationBtn">
|
|
{{ t('settings.backup.openFolderButton') }}
|
|
</button>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="backup-status" id="backupStatus">
|
|
<!-- Status will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Proxy Settings -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.proxySettings') }}</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="proxyEnabled">
|
|
{{ t('settings.proxySettings.enableProxy') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.proxySettings.enableProxyHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="proxyEnabled"
|
|
onchange="settingsManager.saveToggleSetting('proxyEnabled', 'proxy_enabled')">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="proxySettingsGroup" class="proxy-settings-group" style="display: none;">
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="proxyType">
|
|
{{ t('settings.proxySettings.proxyType') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.proxySettings.proxyTypeHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="proxyType" onchange="settingsManager.saveSelectSetting('proxyType', 'proxy_type')">
|
|
<option value="http">HTTP</option>
|
|
<option value="https">HTTPS</option>
|
|
<option value="socks4">SOCKS4</option>
|
|
<option value="socks5">SOCKS5</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="proxyHost">
|
|
{{ t('settings.proxySettings.proxyHost') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.proxySettings.proxyHostHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="text-input-wrapper">
|
|
<input type="text" id="proxyHost"
|
|
placeholder="{{ t('settings.proxySettings.proxyHostPlaceholder') }}"
|
|
onblur="settingsManager.saveInputSetting('proxyHost', 'proxy_host')"
|
|
onkeydown="if(event.key === 'Enter') { this.blur(); }" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="proxyPort">
|
|
{{ t('settings.proxySettings.proxyPort') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.proxySettings.proxyPortHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="text-input-wrapper">
|
|
<input type="text" id="proxyPort"
|
|
placeholder="{{ t('settings.proxySettings.proxyPortPlaceholder') }}"
|
|
onblur="settingsManager.saveInputSetting('proxyPort', 'proxy_port')"
|
|
onkeydown="if(event.key === 'Enter') { this.blur(); }" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="proxyUsername">
|
|
{{ t('settings.proxySettings.proxyUsername') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.proxySettings.proxyUsernameHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="text-input-wrapper">
|
|
<input type="text" id="proxyUsername"
|
|
placeholder="{{ t('settings.proxySettings.proxyUsernamePlaceholder') }}"
|
|
onblur="settingsManager.saveInputSetting('proxyUsername', 'proxy_username')"
|
|
onkeydown="if(event.key === 'Enter') { this.blur(); }" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="proxyPassword">
|
|
{{ t('settings.proxySettings.proxyPassword') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.proxySettings.proxyPasswordHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="api-key-input">
|
|
<input type="password" id="proxyPassword"
|
|
placeholder="{{ t('settings.proxySettings.proxyPasswordPlaceholder') }}"
|
|
autocomplete="new-password"
|
|
onblur="settingsManager.saveInputSetting('proxyPassword', 'proxy_password')"
|
|
onkeydown="if(event.key === 'Enter') { this.blur(); }" />
|
|
<button class="toggle-visibility">
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2: Interface -->
|
|
<div id="section-interface" class="settings-section" data-section="interface">
|
|
<!-- Content Filtering -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.contentFiltering') }}</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="blurMatureContent">
|
|
{{ t('settings.contentFiltering.blurNsfwContent') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.contentFiltering.blurNsfwContentHelp') }}"></i>
|
|
</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>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="showOnlySFW">
|
|
{{ t('settings.contentFiltering.showOnlySfw') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.contentFiltering.showOnlySfwHelp') }}"></i>
|
|
</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>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="matureBlurLevel">
|
|
{{ t('settings.contentFiltering.matureBlurThreshold') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.contentFiltering.matureBlurThresholdHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="matureBlurLevel"
|
|
onchange="settingsManager.saveSelectSetting('matureBlurLevel', 'mature_blur_level')">
|
|
<option value="PG13">{{ t('settings.contentFiltering.matureBlurThresholdOptions.pg13') }}</option>
|
|
<option value="R">{{ t('settings.contentFiltering.matureBlurThresholdOptions.r') }}</option>
|
|
<option value="X">{{ t('settings.contentFiltering.matureBlurThresholdOptions.x') }}</option>
|
|
<option value="XXX">{{ t('settings.contentFiltering.matureBlurThresholdOptions.xxx') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video Settings -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.videoSettings') }}</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="autoplayOnHover">
|
|
{{ t('settings.videoSettings.autoplayOnHover') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.videoSettings.autoplayOnHoverHelp') }}"></i>
|
|
</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>
|
|
</div>
|
|
|
|
<!-- Layout Settings -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.layoutSettings') }}</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="showFolderSidebar">
|
|
{{ t('settings.layoutSettings.showFolderSidebar') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.layoutSettings.showFolderSidebarHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="showFolderSidebar"
|
|
onchange="settingsManager.saveToggleSetting('showFolderSidebar', 'show_folder_sidebar')">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="displayDensity">
|
|
{{ t('settings.layoutSettings.displayDensity') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.layoutSettings.displayDensityHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="displayDensity" onchange="settingsManager.saveSelectSetting('displayDensity', 'display_density')">
|
|
<option value="default">{{ t('settings.layoutSettings.displayDensityOptions.default') }}</option>
|
|
<option value="medium">{{ t('settings.layoutSettings.displayDensityOptions.medium') }}</option>
|
|
<option value="compact">{{ t('settings.layoutSettings.displayDensityOptions.compact') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="input-help"><ul class="list-description">
|
|
<li><strong>{{ t('settings.layoutSettings.displayDensityOptions.default') }}:</strong> {{ t('settings.layoutSettings.displayDensityDetails.default') }}</li>
|
|
<li><strong>{{ t('settings.layoutSettings.displayDensityOptions.medium') }}:</strong> {{ t('settings.layoutSettings.displayDensityDetails.medium') }}</li>
|
|
<li><strong>{{ t('settings.layoutSettings.displayDensityOptions.compact') }}:</strong> {{ t('settings.layoutSettings.displayDensityDetails.compact') }}</li>
|
|
</ul>
|
|
<span class="warning-text">{{ t('settings.layoutSettings.displayDensityWarning') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="modelNameDisplay">
|
|
{{ t('settings.layoutSettings.modelNameDisplay') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.layoutSettings.modelNameDisplayHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="modelNameDisplay" onchange="settingsManager.saveSelectSetting('modelNameDisplay', 'model_name_display')">
|
|
<option value="model_name">{{ t('settings.layoutSettings.modelNameDisplayOptions.modelName') }}</option>
|
|
<option value="file_name">{{ t('settings.layoutSettings.modelNameDisplayOptions.fileName') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="cardInfoDisplay">
|
|
{{ t('settings.layoutSettings.cardInfoDisplay') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.layoutSettings.cardInfoDisplayHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="cardInfoDisplay" onchange="settingsManager.saveSelectSetting('cardInfoDisplay', 'card_info_display')">
|
|
<option value="always">{{ t('settings.layoutSettings.cardInfoDisplayOptions.always') }}</option>
|
|
<option value="hover">{{ t('settings.layoutSettings.cardInfoDisplayOptions.hover') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="showVersionOnCard">
|
|
{{ t('settings.layoutSettings.showVersionOnCard') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.layoutSettings.showVersionOnCardHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="showVersionOnCard"
|
|
onchange="settingsManager.saveToggleSetting('showVersionOnCard', 'show_version_on_card')">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="modelCardFooterAction">
|
|
{{ t('settings.layoutSettings.modelCardFooterAction') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.layoutSettings.modelCardFooterActionHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="modelCardFooterAction" onchange="settingsManager.saveSelectSetting('modelCardFooterAction', 'model_card_footer_action')">
|
|
<option value="example_images">{{ t('settings.layoutSettings.modelCardFooterActionOptions.exampleImages') }}</option>
|
|
<option value="replace_preview">{{ t('settings.layoutSettings.modelCardFooterActionOptions.replacePreview') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Miscellaneous -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.misc') }}</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="loraSyntaxFormat">
|
|
{{ t('settings.misc.loraSyntaxFormat') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.misc.loraSyntaxFormatHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="loraSyntaxFormat" onchange="settingsManager.saveSelectSetting('loraSyntaxFormat', 'lora_syntax_format')">
|
|
<option value="full">{{ t('settings.misc.loraSyntaxFormatOptions.full') }}</option>
|
|
<option value="legacy">{{ t('settings.misc.loraSyntaxFormatOptions.legacy') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="includeTriggerWords">
|
|
{{ t('settings.misc.includeTriggerWords') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.misc.includeTriggerWordsHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="includeTriggerWords"
|
|
onchange="settingsManager.saveToggleSetting('includeTriggerWords', 'include_trigger_words')">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Section 3: Library -->
|
|
<div id="section-library" class="settings-section" data-section="library">
|
|
<!-- Folder Settings -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.folderSettings') }}</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="librarySelect">
|
|
{{ t('settings.folderSettings.activeLibrary') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.folderSettings.activeLibraryHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="librarySelect" onchange="settingsManager.handleLibraryChange()">
|
|
<option value="">{{ t('settings.folderSettings.loadingLibraries') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="defaultLoraRoot">
|
|
{{ t('settings.folderSettings.defaultLoraRoot') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.folderSettings.defaultLoraRootHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="defaultLoraRoot" onchange="settingsManager.saveSelectSetting('defaultLoraRoot', 'default_lora_root')"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="defaultCheckpointRoot">
|
|
{{ t('settings.folderSettings.defaultCheckpointRoot') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.folderSettings.defaultCheckpointRootHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="defaultCheckpointRoot" onchange="settingsManager.saveSelectSetting('defaultCheckpointRoot', 'default_checkpoint_root')"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="defaultUnetRoot">
|
|
{{ t('settings.folderSettings.defaultUnetRoot') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.folderSettings.defaultUnetRootHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="defaultUnetRoot" onchange="settingsManager.saveSelectSetting('defaultUnetRoot', 'default_unet_root')"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="defaultEmbeddingRoot">
|
|
{{ t('settings.folderSettings.defaultEmbeddingRoot') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.folderSettings.defaultEmbeddingRootHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="defaultEmbeddingRoot" onchange="settingsManager.saveSelectSetting('defaultEmbeddingRoot', 'default_embedding_root')"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Recipe Settings -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.recipeSettings') }}</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="recipesPath">
|
|
{{ t('settings.folderSettings.recipesPath') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.folderSettings.recipesPathHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<div class="text-input-wrapper">
|
|
<input type="text" id="recipesPath"
|
|
placeholder="{{ t('settings.folderSettings.recipesPathPlaceholder') }}"
|
|
onblur="settingsManager.saveInputSetting('recipesPath', 'recipes_path')"
|
|
onkeydown="if(event.key === 'Enter') { this.blur(); }" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Extra Folder Paths -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>
|
|
{{ t('settings.extraFolderPaths.title') }}
|
|
<i class="fas fa-sync-alt restart-required-icon" title="{{ t('settings.extraFolderPaths.restartRequired') }}"></i>
|
|
</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="input-help">
|
|
{{ t('settings.extraFolderPaths.description') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LoRA Paths -->
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label>{{ t('settings.extraFolderPaths.modelTypes.lora') }}</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<button type="button" class="add-mapping-btn" onclick="settingsManager.addExtraFolderPathRow('loras')">
|
|
<i class="fas fa-plus"></i>
|
|
<span>{{ t('common.actions.add') }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="extra-folder-paths-container" id="extraFolderPaths-loras">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Checkpoint Paths -->
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label>{{ t('settings.extraFolderPaths.modelTypes.checkpoint') }}</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<button type="button" class="add-mapping-btn" onclick="settingsManager.addExtraFolderPathRow('checkpoints')">
|
|
<i class="fas fa-plus"></i>
|
|
<span>{{ t('common.actions.add') }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="extra-folder-paths-container" id="extraFolderPaths-checkpoints">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Diffusion Model (Unet) Paths -->
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label>{{ t('settings.extraFolderPaths.modelTypes.unet') }}</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<button type="button" class="add-mapping-btn" onclick="settingsManager.addExtraFolderPathRow('unet')">
|
|
<i class="fas fa-plus"></i>
|
|
<span>{{ t('common.actions.add') }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="extra-folder-paths-container" id="extraFolderPaths-unet">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Embedding Paths -->
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label>{{ t('settings.extraFolderPaths.modelTypes.embedding') }}</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<button type="button" class="add-mapping-btn" onclick="settingsManager.addExtraFolderPathRow('embeddings')">
|
|
<i class="fas fa-plus"></i>
|
|
<span>{{ t('common.actions.add') }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="extra-folder-paths-container" id="extraFolderPaths-embeddings">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download Path Templates -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>
|
|
{{ t('settings.downloadPathTemplates.title') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.downloadPathTemplates.help') }}"></i>
|
|
</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="input-help">
|
|
<div class="placeholder-info">
|
|
<strong>{{ t('settings.downloadPathTemplates.availablePlaceholders') }}</strong>
|
|
<span class="placeholder-tag">{base_model}</span>
|
|
<span class="placeholder-tag">{author}</span>
|
|
<span class="placeholder-tag">{first_tag}</span>
|
|
<span class="placeholder-tag">{model_name}</span>
|
|
<span class="placeholder-tag">{version_name}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="loraTemplatePreset">{{ t('settings.downloadPathTemplates.modelTypes.lora') }}</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="loraTemplatePreset" onchange="settingsManager.updateTemplatePreset('lora', this.value)">
|
|
<option value="">{{ t('settings.downloadPathTemplates.templateOptions.flatStructure') }}</option>
|
|
<option value="{base_model}">{{ t('settings.downloadPathTemplates.templateOptions.byBaseModel') }}</option>
|
|
<option value="{author}">{{ t('settings.downloadPathTemplates.templateOptions.byAuthor') }}</option>
|
|
<option value="{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.byFirstTag') }}</option>
|
|
<option value="{base_model}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelFirstTag') }}</option>
|
|
<option value="{base_model}/{author}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthor') }}</option>
|
|
<option value="{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.authorFirstTag') }}</option>
|
|
<option value="{base_model}/{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthorFirstTag') }}</option>
|
|
<option value="custom">{{ t('settings.downloadPathTemplates.templateOptions.customTemplate') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="template-custom-row" id="loraCustomRow" style="display: none;">
|
|
<input type="text" id="loraCustomTemplate" class="template-custom-input" placeholder="{{ t('settings.downloadPathTemplates.customTemplatePlaceholder') }}" />
|
|
<div class="template-validation" id="loraValidation"></div>
|
|
</div>
|
|
<div class="template-preview" id="loraPreview"></div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="checkpointTemplatePreset">{{ t('settings.downloadPathTemplates.modelTypes.checkpoint') }}</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="checkpointTemplatePreset" onchange="settingsManager.updateTemplatePreset('checkpoint', this.value)">
|
|
<option value="">{{ t('settings.downloadPathTemplates.templateOptions.flatStructure') }}</option>
|
|
<option value="{base_model}">{{ t('settings.downloadPathTemplates.templateOptions.byBaseModel') }}</option>
|
|
<option value="{author}">{{ t('settings.downloadPathTemplates.templateOptions.byAuthor') }}</option>
|
|
<option value="{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.byFirstTag') }}</option>
|
|
<option value="{base_model}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelFirstTag') }}</option>
|
|
<option value="{base_model}/{author}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthor') }}</option>
|
|
<option value="{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.authorFirstTag') }}</option>
|
|
<option value="{base_model}/{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthorFirstTag') }}</option>
|
|
<option value="custom">{{ t('settings.downloadPathTemplates.templateOptions.customTemplate') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="template-custom-row" id="checkpointCustomRow" style="display: none;">
|
|
<input type="text" id="checkpointCustomTemplate" class="template-custom-input" placeholder="{{ t('settings.downloadPathTemplates.customTemplatePlaceholder') }}" />
|
|
<div class="template-validation" id="checkpointValidation"></div>
|
|
</div>
|
|
<div class="template-preview" id="checkpointPreview"></div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="embeddingTemplatePreset">{{ t('settings.downloadPathTemplates.modelTypes.embedding') }}</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="embeddingTemplatePreset" onchange="settingsManager.updateTemplatePreset('embedding', this.value)">
|
|
<option value="">{{ t('settings.downloadPathTemplates.templateOptions.flatStructure') }}</option>
|
|
<option value="{base_model}">{{ t('settings.downloadPathTemplates.templateOptions.byBaseModel') }}</option>
|
|
<option value="{author}">{{ t('settings.downloadPathTemplates.templateOptions.byAuthor') }}</option>
|
|
<option value="{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.byFirstTag') }}</option>
|
|
<option value="{base_model}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelFirstTag') }}</option>
|
|
<option value="{base_model}/{author}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthor') }}</option>
|
|
<option value="{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.authorFirstTag') }}</option>
|
|
<option value="{base_model}/{author}/{first_tag}">{{ t('settings.downloadPathTemplates.templateOptions.baseModelAuthorFirstTag') }}</option>
|
|
<option value="custom">{{ t('settings.downloadPathTemplates.templateOptions.customTemplate') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="template-custom-row" id="embeddingCustomRow" style="display: none;">
|
|
<input type="text" id="embeddingCustomTemplate" class="template-custom-input" placeholder="{{ t('settings.downloadPathTemplates.customTemplatePlaceholder') }}" />
|
|
<div class="template-validation" id="embeddingValidation"></div>
|
|
</div>
|
|
<div class="template-preview" id="embeddingPreview"></div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label>
|
|
{{ t('settings.downloadPathTemplates.baseModelPathMappings') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.downloadPathTemplates.baseModelPathMappingsHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<button type="button" class="add-mapping-btn" onclick="settingsManager.addMappingRow()">
|
|
<i class="fas fa-plus"></i>
|
|
<span>{{ t('settings.downloadPathTemplates.addMapping') }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="mappings-container">
|
|
<div id="baseModelMappingsContainer">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="skipPreviouslyDownloadedModelVersions">
|
|
{{ t('settings.skipPreviouslyDownloadedModelVersions.label') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.skipPreviouslyDownloadedModelVersions.help') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="skipPreviouslyDownloadedModelVersions"
|
|
onchange="settingsManager.saveToggleSetting('skipPreviouslyDownloadedModelVersions', 'skip_previously_downloaded_model_versions')">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="downloadSkipBaseModelsToggle">
|
|
{{ t('settings.downloadSkipBaseModels.label') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.downloadSkipBaseModels.help') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<button
|
|
type="button"
|
|
id="downloadSkipBaseModelsToggle"
|
|
class="secondary-btn base-model-skip-toggle"
|
|
aria-expanded="false"
|
|
>
|
|
<span id="downloadSkipBaseModelsSummary">{{ t('settings.downloadSkipBaseModels.summary.none') }}</span>
|
|
<span class="base-model-skip-toggle-label">{{ t('settings.downloadSkipBaseModels.actions.edit') }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="downloadSkipBaseModelsPanel" class="base-model-skip-panel" hidden>
|
|
<div class="base-model-skip-toolbar">
|
|
<input
|
|
type="text"
|
|
id="downloadSkipBaseModelsSearch"
|
|
class="base-model-skip-search"
|
|
placeholder="{{ t('settings.downloadSkipBaseModels.searchPlaceholder') }}"
|
|
/>
|
|
<button type="button" class="text-btn base-model-skip-clear" id="downloadSkipBaseModelsClear">
|
|
{{ t('settings.downloadSkipBaseModels.actions.clear') }}
|
|
</button>
|
|
</div>
|
|
<div id="downloadSkipBaseModelsContainer" class="base-model-skip-list"></div>
|
|
<div id="downloadSkipBaseModelsEmpty" class="base-model-skip-empty" hidden>
|
|
{{ t('settings.downloadSkipBaseModels.empty') }}
|
|
</div>
|
|
</div>
|
|
<div class="settings-input-error-message" id="downloadSkipBaseModelsError"></div>
|
|
</div>
|
|
|
|
<!-- Priority Tags -->
|
|
<div class="setting-item priority-tags-item">
|
|
<div class="setting-row priority-tags-header-row">
|
|
<div class="setting-info priority-tags-header">
|
|
<label>
|
|
{{ t('settings.priorityTags.title') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.priorityTags.description') }}"></i>
|
|
</label>
|
|
<a class="settings-action-link priority-tags-help-link" href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Priority-Tags-Configuration-Guide" target="_blank" rel="noopener" aria-label="{{ t('settings.priorityTags.helpLinkLabel') }}" title="{{ t('settings.priorityTags.helpLinkLabel') }}">
|
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="priority-tags-tabs">
|
|
<input type="radio" id="priority-tags-tab-lora" name="priority-tags-tab" class="priority-tags-tab-input" checked>
|
|
<input type="radio" id="priority-tags-tab-checkpoint" name="priority-tags-tab" class="priority-tags-tab-input">
|
|
<input type="radio" id="priority-tags-tab-embedding" name="priority-tags-tab" class="priority-tags-tab-input">
|
|
|
|
<div class="priority-tags-tablist">
|
|
<label class="priority-tags-tab-label" for="priority-tags-tab-lora" id="priority-tags-tab-lora-label">{{ t('settings.priorityTags.modelTypes.lora') }}</label>
|
|
<label class="priority-tags-tab-label" for="priority-tags-tab-checkpoint" id="priority-tags-tab-checkpoint-label">{{ t('settings.priorityTags.modelTypes.checkpoint') }}</label>
|
|
<label class="priority-tags-tab-label" for="priority-tags-tab-embedding" id="priority-tags-tab-embedding-label">{{ t('settings.priorityTags.modelTypes.embedding') }}</label>
|
|
</div>
|
|
|
|
<div class="priority-tags-panels">
|
|
<div class="priority-tags-panel" id="priority-tags-panel-lora">
|
|
<textarea id="loraPriorityTagsInput" class="priority-tags-input" placeholder="{{ t('settings.priorityTags.placeholder') }}"></textarea>
|
|
<div class="settings-input-error-message" id="loraPriorityTagsError"></div>
|
|
</div>
|
|
<div class="priority-tags-panel" id="priority-tags-panel-checkpoint">
|
|
<textarea id="checkpointPriorityTagsInput" class="priority-tags-input" placeholder="{{ t('settings.priorityTags.placeholder') }}"></textarea>
|
|
<div class="settings-input-error-message" id="checkpointPriorityTagsError"></div>
|
|
</div>
|
|
<div class="priority-tags-panel" id="priority-tags-panel-embedding">
|
|
<textarea id="embeddingPriorityTagsInput" class="priority-tags-input" placeholder="{{ t('settings.priorityTags.placeholder') }}"></textarea>
|
|
<div class="settings-input-error-message" id="embeddingPriorityTagsError"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Update Flags -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.updateFlags') }}</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="updateFlagStrategy">
|
|
{{ t('settings.updateFlagStrategy.label') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.updateFlagStrategy.help') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="updateFlagStrategy" onchange="settingsManager.saveSelectSetting('updateFlagStrategy', 'update_flag_strategy')">
|
|
<option value="same_base">{{ t('settings.updateFlagStrategy.options.sameBase') }}</option>
|
|
<option value="any">{{ t('settings.updateFlagStrategy.options.any') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="hideEarlyAccessUpdates">
|
|
{{ t('settings.hideEarlyAccessUpdates.label') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.hideEarlyAccessUpdates.help') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="hideEarlyAccessUpdates"
|
|
onchange="settingsManager.saveToggleSetting('hideEarlyAccessUpdates', 'hide_early_access_updates')">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Example Images -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.exampleImages') }}</h4>
|
|
</div>
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="exampleImagesPath">{{ t('settings.exampleImages.downloadLocation') }} <i class="fas fa-sync-alt restart-required-icon" title="{{ t('settings.exampleImages.restartRequired') }}"></i></label>
|
|
</div>
|
|
<div class="setting-control path-control">
|
|
<input type="text" id="exampleImagesPath" placeholder="{{ t('settings.exampleImages.downloadLocationPlaceholder') }}" />
|
|
<button id="exampleImagesDownloadBtn" class="primary-btn">
|
|
<i class="fas fa-download"></i> <span id="exampleDownloadBtnText">{{ t('settings.exampleImages.download') }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="autoDownloadExampleImages">
|
|
{{ t('settings.exampleImages.autoDownload') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.exampleImages.autoDownloadHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="autoDownloadExampleImages" checked
|
|
onchange="settingsManager.saveToggleSetting('autoDownloadExampleImages', 'auto_download_example_images')">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="optimizeExampleImages">
|
|
{{ t('settings.exampleImages.optimizeImages') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.exampleImages.optimizeImagesHelp') }}"></i>
|
|
</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>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="exampleImagesOpenMode">
|
|
{{ t('settings.exampleImages.openMode') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.exampleImages.openModeHelp') }}"></i>
|
|
<a class="settings-action-link" href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Remote-Open-for-Example-Images" target="_blank" rel="noopener" title="{{ t('settings.exampleImages.openModeWikiLink') }}">
|
|
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
</a>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control select-control">
|
|
<select id="exampleImagesOpenMode" onchange="settingsManager.handleExampleImagesOpenModeChange()">
|
|
<option value="system">{{ t('settings.exampleImages.openModeOptions.system') }}</option>
|
|
<option value="clipboard">{{ t('settings.exampleImages.openModeOptions.clipboard') }}</option>
|
|
<option value="uri_template">{{ t('settings.exampleImages.openModeOptions.uriTemplate') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item" id="exampleImagesLocalRootSetting" style="display: none;">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="exampleImagesLocalRoot">
|
|
{{ t('settings.exampleImages.localRoot') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.exampleImages.localRootHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control path-control">
|
|
<input
|
|
type="text"
|
|
id="exampleImagesLocalRoot"
|
|
placeholder="{{ t('settings.exampleImages.localRootPlaceholder') }}"
|
|
onchange="settingsManager.saveInputSetting('exampleImagesLocalRoot', 'example_images_local_root')" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item" id="exampleImagesUriTemplateSetting" style="display: none;">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="exampleImagesOpenUriTemplate">
|
|
{{ t('settings.exampleImages.uriTemplate') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.exampleImages.uriTemplateHelp') }} {{ t('settings.exampleImages.uriTemplatePlaceholders') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control path-control">
|
|
<input
|
|
type="text"
|
|
id="exampleImagesOpenUriTemplate"
|
|
placeholder="{{ t('settings.exampleImages.uriTemplatePlaceholder') }}"
|
|
onchange="settingsManager.saveInputSetting('exampleImagesOpenUriTemplate', 'example_images_open_uri_template')" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Auto-organize -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.autoOrganize') }}</h4>
|
|
</div>
|
|
|
|
<!-- Auto-organize Exclusions -->
|
|
<div class="setting-item auto-organize-exclusions-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="autoOrganizeExclusions">
|
|
{{ t('settings.autoOrganizeExclusions.label') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.autoOrganizeExclusions.help') }}"></i>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<textarea id="autoOrganizeExclusions" class="priority-tags-input auto-organize-exclusions-input" placeholder="{{ t('settings.autoOrganizeExclusions.placeholder') }}"></textarea>
|
|
<div class="settings-input-error-message" id="autoOrganizeExclusionsError"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metadata -->
|
|
<div class="settings-subsection">
|
|
<div class="settings-subsection-header">
|
|
<h4>{{ t('settings.sections.metadata') }}</h4>
|
|
</div>
|
|
|
|
<!-- Metadata Refresh Skip Paths -->
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="metadataRefreshSkipPaths">
|
|
{{ t('settings.metadataRefreshSkipPaths.label') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.metadataRefreshSkipPaths.help') }}"></i>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<textarea id="metadataRefreshSkipPaths" class="priority-tags-input auto-organize-exclusions-input" placeholder="{{ t('settings.metadataRefreshSkipPaths.placeholder') }}"></textarea>
|
|
<div class="settings-input-error-message" id="metadataRefreshSkipPathsError"></div>
|
|
</div>
|
|
|
|
<!-- Metadata Archive -->
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label for="enableMetadataArchive">
|
|
{{ t('settings.metadataArchive.enableArchiveDb') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.metadataArchive.enableArchiveDbHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="enableMetadataArchive"
|
|
onchange="settingsManager.saveToggleSetting('enableMetadataArchive', 'enable_metadata_archive_db')">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="metadata-archive-status" id="metadataArchiveStatus">
|
|
<!-- Status will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-row">
|
|
<div class="setting-info">
|
|
<label>
|
|
{{ t('settings.metadataArchive.management') }}
|
|
<i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.metadataArchive.managementHelp') }}"></i>
|
|
</label>
|
|
</div>
|
|
<div class="setting-control">
|
|
<button type="button" id="downloadMetadataArchiveBtn" class="primary-btn" onclick="settingsManager.downloadMetadataArchive()">
|
|
{{ t('settings.metadataArchive.downloadButton') }}
|
|
</button>
|
|
<button type="button" id="removeMetadataArchiveBtn" class="danger-btn" onclick="settingsManager.removeMetadataArchive()" style="margin-left: 10px;">
|
|
{{ t('settings.metadataArchive.removeButton') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|