Files
ComfyUI-Lora-Manager/templates/components/modals/settings_modal.html
Will Miao 10f5588e4a feat: add model_name and version_name placeholders to download paths, #552
Add support for {model_name} and {version_name} placeholders in download path templates. These new placeholders allow for more flexible and descriptive file organization by including the actual model name and version name in the download directory structure.

Changes include:
- Updated download_manager.py and utils.py to handle new placeholders
- Added placeholders to constants.js for UI reference
- Updated settings modal template to show available placeholders
- Added comprehensive tests to verify placeholder functionality

This enhancement provides users with more control over how downloaded models are organized on their file system.
2025-10-17 16:01:06 +08:00

707 lines
43 KiB
HTML

<!-- Settings Modal -->
<div id="settingsModal" class="modal">
<div class="modal-content settings-modal">
<button class="close" onclick="modalManager.closeModal('settingsModal')">&times;</button>
<div class="settings-header">
<h2>{{ t('common.actions.settings') }}</h2>
<button
type="button"
class="settings-action-link settings-open-location-trigger"
data-settings-path="{{ settings.settings_file }}"
aria-label="{{ t('settings.openSettingsFileLocation.tooltip') }}"
title="{{ t('settings.openSettingsFileLocation.tooltip') }}">
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
</button>
</div>
<div class="settings-form">
<div class="setting-item api-key-item">
<div class="setting-row">
<div class="setting-info">
<label for="civitaiApiKey">{{ t('settings.civitaiApiKey') }}:</label>
</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', '') }}"
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">
{{ t('settings.civitaiApiKeyHelp') }}
</div>
</div>
<div class="settings-section">
<h3>{{ t('settings.sections.contentFiltering') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="blurMatureContent">{{ t('settings.contentFiltering.blurNsfwContent') }}</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">
{{ t('settings.contentFiltering.blurNsfwContentHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="showOnlySFW">{{ t('settings.contentFiltering.showOnlySfw') }}</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">
{{ t('settings.contentFiltering.showOnlySfwHelp') }}
</div>
</div>
</div>
<!-- Add Video Settings Section -->
<div class="settings-section">
<h3>{{ t('settings.sections.videoSettings') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="autoplayOnHover">{{ t('settings.videoSettings.autoplayOnHover') }}</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">
{{ t('settings.videoSettings.autoplayOnHoverHelp') }}
</div>
</div>
</div>
<!-- Add Layout Settings Section -->
<div class="settings-section">
<h3>{{ t('settings.sections.layoutSettings') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="displayDensity">{{ t('settings.layoutSettings.displayDensity') }}</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">
{{ t('settings.layoutSettings.displayDensityHelp') }}
<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>
<!-- Add Model Name Display setting -->
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="modelNameDisplay">{{ t('settings.layoutSettings.modelNameDisplay') }}</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 class="input-help">
{{ t('settings.layoutSettings.modelNameDisplayHelp') }}
<ul class="list-description">
<li><strong>{{ t('settings.layoutSettings.modelNameDisplayOptions.modelName') }}:</strong> {{ t('settings.layoutSettings.modelNameDisplayDetails.modelName') }}</li>
<li><strong>{{ t('settings.layoutSettings.modelNameDisplayOptions.fileName') }}:</strong> {{ t('settings.layoutSettings.modelNameDisplayDetails.fileName') }}</li>
</ul>
</div>
</div>
<!-- Add Card Info Display setting -->
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="cardInfoDisplay">{{ t('settings.layoutSettings.cardInfoDisplay') }}</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 class="input-help">
{{ t('settings.layoutSettings.cardInfoDisplayHelp') }}
<ul class="list-description">
<li><strong>{{ t('settings.layoutSettings.cardInfoDisplayOptions.always') }}:</strong> {{ t('settings.layoutSettings.cardInfoDisplayDetails.always') }}</li>
<li><strong>{{ t('settings.layoutSettings.cardInfoDisplayOptions.hover') }}:</strong> {{ t('settings.layoutSettings.cardInfoDisplayDetails.hover') }}</li>
</ul>
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="modelCardFooterAction">{{ t('settings.layoutSettings.modelCardFooterAction') }}</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 class="input-help">
{{ t('settings.layoutSettings.modelCardFooterActionHelp') }}
</div>
</div>
<!-- Language Selection -->
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="languageSelect">{{ t('common.language.select') }}</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 class="input-help">
{{ t('common.language.select_help') }}
</div>
</div>
</div>
<!-- Add Folder Settings Section -->
<div class="settings-section">
<h3>{{ t('settings.sections.folderSettings') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="librarySelect">{{ t('settings.folderSettings.activeLibrary') }}</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 class="input-help">
{{ t('settings.folderSettings.activeLibraryHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="defaultLoraRoot">{{ t('settings.folderSettings.defaultLoraRoot') }}</label>
</div>
<div class="setting-control select-control">
<select id="defaultLoraRoot" onchange="settingsManager.saveSelectSetting('defaultLoraRoot', 'default_lora_root')">
<option value="">{{ t('settings.folderSettings.noDefault') }}</option>
<!-- Options will be loaded dynamically -->
</select>
</div>
</div>
<div class="input-help">
{{ t('settings.folderSettings.defaultLoraRootHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="defaultCheckpointRoot">{{ t('settings.folderSettings.defaultCheckpointRoot') }}</label>
</div>
<div class="setting-control select-control">
<select id="defaultCheckpointRoot" onchange="settingsManager.saveSelectSetting('defaultCheckpointRoot', 'default_checkpoint_root')">
<option value="">{{ t('settings.folderSettings.noDefault') }}</option>
<!-- Options will be loaded dynamically -->
</select>
</div>
</div>
<div class="input-help">
{{ t('settings.folderSettings.defaultCheckpointRootHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="defaultEmbeddingRoot">{{ t('settings.folderSettings.defaultEmbeddingRoot') }}</label>
</div>
<div class="setting-control select-control">
<select id="defaultEmbeddingRoot" onchange="settingsManager.saveSelectSetting('defaultEmbeddingRoot', 'default_embedding_root')">
<option value="">{{ t('settings.folderSettings.noDefault') }}</option>
<!-- Options will be loaded dynamically -->
</select>
</div>
</div>
<div class="input-help">
{{ t('settings.folderSettings.defaultEmbeddingRootHelp') }}
</div>
</div>
</div>
<!-- Default Path Customization Section -->
<div class="settings-section">
<h3>{{ t('settings.downloadPathTemplates.title') }}</h3>
<div class="setting-item">
<div class="input-help">
{{ t('settings.downloadPathTemplates.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>
<!-- LoRA Template Configuration -->
<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>
<!-- Checkpoint Template Configuration -->
<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>
<!-- Embedding Template Configuration -->
<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>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label>{{ t('settings.downloadPathTemplates.baseModelPathMappings') }}</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="input-help">
{{ t('settings.downloadPathTemplates.baseModelPathMappingsHelp') }}
</div>
<div class="mappings-container">
<div id="baseModelMappingsContainer">
<!-- Mapping rows will be added dynamically -->
</div>
</div>
</div>
<div class="setting-item priority-tags-item">
<div class="setting-row priority-tags-header">
<div class="setting-info">
<label>{{ t('settings.priorityTags.title') }}</label>
</div>
<div class="setting-control priority-tags-actions">
<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="input-help">{{ t('settings.priorityTags.description') }}</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" aria-labelledby="priority-tags-tab-lora-label">
<textarea id="loraPriorityTagsInput" class="priority-tags-input" rows="3" 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" aria-labelledby="priority-tags-tab-checkpoint-label">
<textarea id="checkpointPriorityTagsInput" class="priority-tags-input" rows="3" 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" aria-labelledby="priority-tags-tab-embedding-label">
<textarea id="embeddingPriorityTagsInput" class="priority-tags-input" rows="3" placeholder="{{ t('settings.priorityTags.placeholder') }}"></textarea>
<div class="settings-input-error-message" id="embeddingPriorityTagsError"></div>
</div>
</div>
</div>
</div>
<!-- Add Example Images Settings Section -->
<div class="settings-section">
<h3>{{ t('settings.sections.exampleImages') }}</h3>
<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 class="input-help">
{{ t('settings.exampleImages.downloadLocationHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="autoDownloadExampleImages">{{ t('settings.exampleImages.autoDownload') }}</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 class="input-help">
{{ t('settings.exampleImages.autoDownloadHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="optimizeExampleImages">{{ t('settings.exampleImages.optimizeImages') }}</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">
{{ t('settings.exampleImages.optimizeImagesHelp') }}
</div>
</div>
</div>
<!-- Metadata Archive Section -->
<div class="settings-section">
<h3>{{ t('settings.sections.metadataArchive') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="enableMetadataArchive">{{ t('settings.metadataArchive.enableArchiveDb') }}:</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 class="input-help">
{{ t('settings.metadataArchive.enableArchiveDbHelp') }}
</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') }}:</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 class="input-help">
{{ t('settings.metadataArchive.managementHelp') }}
</div>
</div>
</div>
<!-- Proxy Settings Section -->
<div class="settings-section">
<h3>{{ t('settings.sections.proxySettings') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="proxyEnabled">{{ t('settings.proxySettings.enableProxy') }}</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 class="input-help">
{{ t('settings.proxySettings.enableProxyHelp') }}
</div>
</div>
<div class="proxy-settings-group" id="proxySettingsGroup" style="display: none;">
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="proxyType">{{ t('settings.proxySettings.proxyType') }}</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 class="input-help">
{{ t('settings.proxySettings.proxyTypeHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="proxyHost">{{ t('settings.proxySettings.proxyHost') }}</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 class="input-help">
{{ t('settings.proxySettings.proxyHostHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="proxyPort">{{ t('settings.proxySettings.proxyPort') }}</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 class="input-help">
{{ t('settings.proxySettings.proxyPortHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="proxyUsername">{{ t('settings.proxySettings.proxyUsername') }}</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 class="input-help">
{{ t('settings.proxySettings.proxyUsernameHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="proxyPassword">{{ t('settings.proxySettings.proxyPassword') }}</label>
</div>
<div class="setting-control">
<div class="api-key-input">
<input type="password" id="proxyPassword"
placeholder="{{ t('settings.proxySettings.proxyPasswordPlaceholder') }}"
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 class="input-help">
{{ t('settings.proxySettings.proxyPasswordHelp') }}
</div>
</div>
</div>
</div>
<!-- Misc. Section -->
<div class="settings-section">
<h3>{{ t('settings.sections.misc') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="includeTriggerWords">{{ t('settings.misc.includeTriggerWords') }}</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 class="input-help">
{{ t('settings.misc.includeTriggerWordsHelp') }}
</div>
</div>
</div>
</div>
</div>
</div>