mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-21 21:22:11 -03:00
412f1e62a1
- Add new model name display setting with options to show model name or file name - Implement helper function to determine display name based on user preference - Update model card footer to use dynamic display name - Include model name display setting in settings modal and state management - Remove redundant labels from display density descriptions in multiple locales - Simplify card info display descriptions by removing duplicate text The changes provide cleaner UI text and add flexibility for users to choose between displaying model names or file names in card footers.
688 lines
42 KiB
HTML
688 lines
42 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"
|
|
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>
|
|
|
|
<!-- 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>
|
|
</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>
|