feat(localization): enhance settings modal with new sections and translations for improved user experience

This commit is contained in:
Will Miao
2025-08-31 21:27:59 +08:00
parent b56fe4ca68
commit 84d801cf14
4 changed files with 307 additions and 100 deletions

View File

@@ -121,7 +121,110 @@
"settings": {
"civitaiApiKey": "Civitai API Key",
"civitaiApiKeyPlaceholder": "Enter your Civitai API key",
"civitaiApiKeyHelp": "Used for authentication when downloading models from Civitai"
"civitaiApiKeyHelp": "Used for authentication when downloading models from Civitai",
"sections": {
"contentFiltering": "Content Filtering",
"videoSettings": "Video Settings",
"layoutSettings": "Layout Settings",
"folderSettings": "Folder Settings",
"downloadPathTemplates": "Download Path Templates",
"exampleImages": "Example Images",
"misc": "Misc."
},
"contentFiltering": {
"blurNsfwContent": "Blur NSFW Content",
"blurNsfwContentHelp": "Blur mature (NSFW) content preview images",
"showOnlySfw": "Show Only SFW Results",
"showOnlySfwHelp": "Filter out all NSFW content when browsing and searching"
},
"videoSettings": {
"autoplayOnHover": "Autoplay Videos on Hover",
"autoplayOnHoverHelp": "Only play video previews when hovering over them"
},
"layoutSettings": {
"displayDensity": "Display Density",
"displayDensityOptions": {
"default": "Default",
"medium": "Medium",
"compact": "Compact"
},
"displayDensityHelp": "Choose how many cards to display per row:",
"displayDensityDetails": {
"default": "Default: 5 (1080p), 6 (2K), 8 (4K)",
"medium": "Medium: 6 (1080p), 7 (2K), 9 (4K)",
"compact": "Compact: 7 (1080p), 8 (2K), 10 (4K)"
},
"displayDensityWarning": "Warning: Higher densities may cause performance issues on systems with limited resources.",
"cardInfoDisplay": "Card Info Display",
"cardInfoDisplayOptions": {
"always": "Always Visible",
"hover": "Reveal on Hover"
},
"cardInfoDisplayHelp": "Choose when to display model information and action buttons:",
"cardInfoDisplayDetails": {
"always": "Always Visible: Headers and footers are always visible",
"hover": "Reveal on Hover: Headers and footers only appear when hovering over a card"
}
},
"folderSettings": {
"defaultLoraRoot": "Default LoRA Root",
"defaultLoraRootHelp": "Set the default LoRA root directory for downloads, imports and moves",
"defaultCheckpointRoot": "Default Checkpoint Root",
"defaultCheckpointRootHelp": "Set the default checkpoint root directory for downloads, imports and moves",
"defaultEmbeddingRoot": "Default Embedding Root",
"defaultEmbeddingRootHelp": "Set the default embedding root directory for downloads, imports and moves",
"noDefault": "No Default"
},
"downloadPathTemplates": {
"title": "Download Path Templates",
"help": "Configure folder structures for different model types when downloading from Civitai.",
"availablePlaceholders": "Available placeholders:",
"templateOptions": {
"flatStructure": "Flat Structure",
"byBaseModel": "By Base Model",
"byAuthor": "By Author",
"byFirstTag": "By First Tag",
"baseModelFirstTag": "Base Model + First Tag",
"baseModelAuthor": "Base Model + Author",
"authorFirstTag": "Author + First Tag",
"customTemplate": "Custom Template"
},
"customTemplatePlaceholder": "Enter custom template (e.g., {base_model}/{author}/{first_tag})",
"modelTypes": {
"lora": "LoRA",
"checkpoint": "Checkpoint",
"embedding": "Embedding"
},
"baseModelPathMappings": "Base Model Path Mappings",
"baseModelPathMappingsHelp": "Customize folder names for specific base models (e.g., \"Flux.1 D\" → \"flux\")",
"addMapping": "Add Mapping",
"selectBaseModel": "Select Base Model",
"customPathPlaceholder": "Custom path (e.g., flux)",
"removeMapping": "Remove mapping",
"validation": {
"validFlat": "Valid (flat structure)",
"invalidChars": "Invalid characters detected",
"doubleSlashes": "Double slashes not allowed",
"leadingTrailingSlash": "Cannot start or end with slash",
"invalidPlaceholder": "Invalid placeholder: {placeholder}",
"validTemplate": "Valid template"
}
},
"exampleImages": {
"downloadLocation": "Download Location",
"downloadLocationPlaceholder": "Enter folder path for example images",
"downloadLocationHelp": "Enter the folder path where example images from Civitai will be saved",
"autoDownload": "Auto Download Example Images",
"autoDownloadHelp": "Automatically download example images for models that don't have them (requires download location to be set)",
"optimizeImages": "Optimize Downloaded Images",
"optimizeImagesHelp": "Optimize example images to reduce file size and improve loading speed (metadata will be preserved)",
"download": "Download",
"restartRequired": "Requires restart"
},
"misc": {
"includeTriggerWords": "Include Trigger Words in LoRA Syntax",
"includeTriggerWordsHelp": "Include trained trigger words when copying LoRA syntax to clipboard"
}
},
"loras": {
"controls": {

View File

@@ -22,12 +22,12 @@
"english": "English",
"chinese_simplified": "中文(简体)",
"chinese_traditional": "中文(繁体)",
"russian": "Русский",
"german": "Deutsch",
"japanese": "日本語",
"korean": "한국어",
"french": "Français",
"spanish": "Español"
"russian": "俄语",
"german": "德语",
"japanese": "日",
"korean": "韩语",
"french": "法语",
"spanish": "西班牙语"
},
"fileSize": {
"zero": "0 字节",
@@ -121,7 +121,110 @@
"settings": {
"civitaiApiKey": "Civitai API 密钥",
"civitaiApiKeyPlaceholder": "请输入你的 Civitai API 密钥",
"civitaiApiKeyHelp": "用于从 Civitai 下载模型时的身份验证"
"civitaiApiKeyHelp": "用于从 Civitai 下载模型时的身份验证",
"sections": {
"contentFiltering": "内容过滤",
"videoSettings": "视频设置",
"layoutSettings": "布局设置",
"folderSettings": "文件夹设置",
"downloadPathTemplates": "下载路径模板",
"exampleImages": "示例图片",
"misc": "其他"
},
"contentFiltering": {
"blurNsfwContent": "模糊 NSFW 内容",
"blurNsfwContentHelp": "模糊成熟NSFW内容预览图片",
"showOnlySfw": "仅显示 SFW 结果",
"showOnlySfwHelp": "浏览和搜索时过滤所有 NSFW 内容"
},
"videoSettings": {
"autoplayOnHover": "悬停时自动播放视频",
"autoplayOnHoverHelp": "仅在悬停时播放视频预览"
},
"layoutSettings": {
"displayDensity": "显示密度",
"displayDensityOptions": {
"default": "默认",
"medium": "中等",
"compact": "紧凑"
},
"displayDensityHelp": "选择每行显示卡片数量:",
"displayDensityDetails": {
"default": "默认51080p62K84K",
"medium": "中等61080p72K94K",
"compact": "紧凑71080p82K104K"
},
"displayDensityWarning": "警告:高密度可能导致资源有限的系统性能下降。",
"cardInfoDisplay": "卡片信息显示",
"cardInfoDisplayOptions": {
"always": "始终可见",
"hover": "悬停时显示"
},
"cardInfoDisplayHelp": "选择何时显示模型信息和操作按钮:",
"cardInfoDisplayDetails": {
"always": "始终可见:标题和底部始终显示",
"hover": "悬停时显示:仅在悬停卡片时显示标题和底部"
}
},
"folderSettings": {
"defaultLoraRoot": "默认 LoRA 根目录",
"defaultLoraRootHelp": "设置下载、导入和移动时的默认 LoRA 根目录",
"defaultCheckpointRoot": "默认 Checkpoint 根目录",
"defaultCheckpointRootHelp": "设置下载、导入和移动时的默认 Checkpoint 根目录",
"defaultEmbeddingRoot": "默认 Embedding 根目录",
"defaultEmbeddingRootHelp": "设置下载、导入和移动时的默认 Embedding 根目录",
"noDefault": "无默认"
},
"downloadPathTemplates": {
"title": "下载路径模板",
"help": "配置从 Civitai 下载不同模型类型的文件夹结构。",
"availablePlaceholders": "可用占位符:",
"templateOptions": {
"flatStructure": "扁平结构",
"byBaseModel": "按基础模型",
"byAuthor": "按作者",
"byFirstTag": "按首标签",
"baseModelFirstTag": "基础模型 + 首标签",
"baseModelAuthor": "基础模型 + 作者",
"authorFirstTag": "作者 + 首标签",
"customTemplate": "自定义模板"
},
"customTemplatePlaceholder": "输入自定义模板(如:{base_model}/{author}/{first_tag}",
"modelTypes": {
"lora": "LoRA",
"checkpoint": "Checkpoint",
"embedding": "Embedding"
},
"baseModelPathMappings": "基础模型路径映射",
"baseModelPathMappingsHelp": "为特定基础模型自定义文件夹名称如“Flux.1 D”→“flux”",
"addMapping": "添加映射",
"selectBaseModel": "选择基础模型",
"customPathPlaceholder": "自定义路径flux",
"removeMapping": "移除映射",
"validation": {
"validFlat": "有效(扁平结构)",
"invalidChars": "检测到无效字符",
"doubleSlashes": "不允许双斜杠",
"leadingTrailingSlash": "不能以斜杠开始或结束",
"invalidPlaceholder": "无效占位符:{placeholder}",
"validTemplate": "有效模板"
}
},
"exampleImages": {
"downloadLocation": "下载位置",
"downloadLocationPlaceholder": "输入示例图片文件夹路径",
"downloadLocationHelp": "输入保存从 Civitai 下载的示例图片的文件夹路径",
"autoDownload": "自动下载示例图片",
"autoDownloadHelp": "自动为没有示例图片的模型下载示例图片(需设置下载位置)",
"optimizeImages": "优化下载图片",
"optimizeImagesHelp": "优化示例图片以减少文件大小并提升加载速度(保留元数据)",
"download": "下载",
"restartRequired": "需要重启"
},
"misc": {
"includeTriggerWords": "复制 LoRA 语法时包含触发词",
"includeTriggerWordsHelp": "复制 LoRA 语法到剪贴板时包含训练触发词"
}
},
"loras": {
"controls": {

View File

@@ -4,6 +4,7 @@ import { state } from '../state/index.js';
import { resetAndReload } from '../api/modelApiFactory.js';
import { setStorageItem, getStorageItem } from '../utils/storageHelpers.js';
import { DOWNLOAD_PATH_TEMPLATES, MAPPABLE_BASE_MODELS, PATH_TEMPLATE_PLACEHOLDERS, DEFAULT_PATH_TEMPLATES } from '../utils/constants.js';
import { translate } from '../utils/i18nHelpers.js';
export class SettingsManager {
constructor() {
@@ -431,13 +432,13 @@ export class SettingsManager {
row.innerHTML = `
<div class="mapping-controls">
<select class="base-model-select">
<option value="">Select Base Model</option>
<option value="">${translate('settings.downloadPathTemplates.selectBaseModel', {}, 'Select Base Model')}</option>
${availableModels.map(model =>
`<option value="${model}" ${model === baseModel ? 'selected' : ''}>${model}</option>`
).join('')}
</select>
<input type="text" class="path-value-input" placeholder="Custom path (e.g., flux)" value="${pathValue}">
<button type="button" class="remove-mapping-btn" title="Remove mapping">
<input type="text" class="path-value-input" placeholder="${translate('settings.downloadPathTemplates.customPathPlaceholder', {}, 'Custom path (e.g., flux)')}" value="${pathValue}">
<button type="button" class="remove-mapping-btn" title="${translate('settings.downloadPathTemplates.removeMapping', {}, 'Remove mapping')}">
<i class="fas fa-times"></i>
</button>
</div>
@@ -530,7 +531,7 @@ export class SettingsManager {
);
// Rebuild options
select.innerHTML = '<option value="">Select Base Model</option>' +
select.innerHTML = `<option value="">${translate('settings.downloadPathTemplates.selectBaseModel', {}, 'Select Base Model')}</option>` +
availableModels.map(model =>
`<option value="${model}" ${model === currentValue ? 'selected' : ''}>${model}</option>`
).join('');
@@ -662,7 +663,7 @@ export class SettingsManager {
validationElement.className = 'template-validation';
if (!template) {
validationElement.innerHTML = '<i class="fas fa-check"></i> Valid (flat structure)';
validationElement.innerHTML = `<i class="fas fa-check"></i> ${translate('settings.downloadPathTemplates.validation.validFlat', {}, 'Valid (flat structure)')}`;
validationElement.classList.add('valid');
return true;
}
@@ -670,21 +671,21 @@ export class SettingsManager {
// Check for invalid characters
const invalidChars = /[<>:"|?*]/;
if (invalidChars.test(template)) {
validationElement.innerHTML = '<i class="fas fa-times"></i> Invalid characters detected';
validationElement.innerHTML = `<i class="fas fa-times"></i> ${translate('settings.downloadPathTemplates.validation.invalidChars', {}, 'Invalid characters detected')}`;
validationElement.classList.add('invalid');
return false;
}
// Check for double slashes
if (template.includes('//')) {
validationElement.innerHTML = '<i class="fas fa-times"></i> Double slashes not allowed';
validationElement.innerHTML = `<i class="fas fa-times"></i> ${translate('settings.downloadPathTemplates.validation.doubleSlashes', {}, 'Double slashes not allowed')}`;
validationElement.classList.add('invalid');
return false;
}
// Check if it starts or ends with slash
if (template.startsWith('/') || template.endsWith('/')) {
validationElement.innerHTML = '<i class="fas fa-times"></i> Cannot start or end with slash';
validationElement.innerHTML = `<i class="fas fa-times"></i> ${translate('settings.downloadPathTemplates.validation.leadingTrailingSlash', {}, 'Cannot start or end with slash')}`;
validationElement.classList.add('invalid');
return false;
}
@@ -699,13 +700,13 @@ export class SettingsManager {
);
if (invalidPlaceholders.length > 0) {
validationElement.innerHTML = `<i class="fas fa-times"></i> Invalid placeholder: ${invalidPlaceholders[0]}`;
validationElement.innerHTML = `<i class="fas fa-times"></i> ${translate('settings.downloadPathTemplates.validation.invalidPlaceholder', { placeholder: invalidPlaceholders[0] }, `Invalid placeholder: ${invalidPlaceholders[0]}`)}`;
validationElement.classList.add('invalid');
return false;
}
// Template is valid
validationElement.innerHTML = '<i class="fas fa-check"></i> Valid template';
validationElement.innerHTML = `<i class="fas fa-check"></i> ${translate('settings.downloadPathTemplates.validation.validTemplate', {}, 'Valid template')}`;
validationElement.classList.add('valid');
return true;
}

View File

@@ -29,12 +29,12 @@
</div>
<div class="settings-section">
<h3>Content Filtering</h3>
<h3>{{ t('settings.sections.contentFiltering') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="blurMatureContent">Blur NSFW Content</label>
<label for="blurMatureContent">{{ t('settings.contentFiltering.blurNsfwContent') }}</label>
</div>
<div class="setting-control">
<label class="toggle-switch">
@@ -45,14 +45,14 @@
</div>
</div>
<div class="input-help">
Blur mature (NSFW) content preview images
{{ t('settings.contentFiltering.blurNsfwContentHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="showOnlySFW">Show Only SFW Results</label>
<label for="showOnlySFW">{{ t('settings.contentFiltering.showOnlySfw') }}</label>
</div>
<div class="setting-control">
<label class="toggle-switch">
@@ -63,19 +63,19 @@
</div>
</div>
<div class="input-help">
Filter out all NSFW content when browsing and searching
{{ t('settings.contentFiltering.showOnlySfwHelp') }}
</div>
</div>
</div>
<!-- Add Video Settings Section -->
<div class="settings-section">
<h3>Video Settings</h3>
<h3>{{ t('settings.sections.videoSettings') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="autoplayOnHover">Autoplay Videos on Hover</label>
<label for="autoplayOnHover">{{ t('settings.videoSettings.autoplayOnHover') }}</label>
</div>
<div class="setting-control">
<label class="toggle-switch">
@@ -86,36 +86,36 @@
</div>
</div>
<div class="input-help">
Only play video previews when hovering over them
{{ t('settings.videoSettings.autoplayOnHoverHelp') }}
</div>
</div>
</div>
<!-- Add Layout Settings Section -->
<div class="settings-section">
<h3>Layout Settings</h3>
<h3>{{ t('settings.sections.layoutSettings') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="displayDensity">Display Density</label>
<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">Default</option>
<option value="medium">Medium</option>
<option value="compact">Compact</option>
<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">
Choose how many cards to display per row:
{{ t('settings.layoutSettings.displayDensityHelp') }}
<ul class="list-description">
<li><strong>Default:</strong> 5 (1080p), 6 (2K), 8 (4K)</li>
<li><strong>Medium:</strong> 6 (1080p), 7 (2K), 9 (4K)</li>
<li><strong>Compact:</strong> 7 (1080p), 8 (2K), 10 (4K)</li>
<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">Warning: Higher densities may cause performance issues on systems with limited resources.</span>
<span class="warning-text">{{ t('settings.layoutSettings.displayDensityWarning') }}</span>
</div>
</div>
@@ -123,20 +123,20 @@
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="cardInfoDisplay">Card Info Display</label>
<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">Always Visible</option>
<option value="hover">Reveal on Hover</option>
<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">
Choose when to display model information and action buttons:
{{ t('settings.layoutSettings.cardInfoDisplayHelp') }}
<ul class="list-description">
<li><strong>Always Visible:</strong> Headers and footers are always visible</li>
<li><strong>Reveal on Hover:</strong> Headers and footers only appear when hovering over a card</li>
<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>
@@ -169,69 +169,69 @@
<!-- Add Folder Settings Section -->
<div class="settings-section">
<h3>Folder Settings</h3>
<h3>{{ t('settings.sections.folderSettings') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="defaultLoraRoot">Default LoRA Root</label>
<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="">No Default</option>
<option value="">{{ t('settings.folderSettings.noDefault') }}</option>
<!-- Options will be loaded dynamically -->
</select>
</div>
</div>
<div class="input-help">
Set the default LoRA root directory for downloads, imports and moves
{{ t('settings.folderSettings.defaultLoraRootHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="defaultCheckpointRoot">Default Checkpoint Root</label>
<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="">No Default</option>
<option value="">{{ t('settings.folderSettings.noDefault') }}</option>
<!-- Options will be loaded dynamically -->
</select>
</div>
</div>
<div class="input-help">
Set the default checkpoint root directory for downloads, imports and moves
{{ t('settings.folderSettings.defaultCheckpointRootHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="defaultEmbeddingRoot">Default Embedding Root</label>
<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="">No Default</option>
<option value="">{{ t('settings.folderSettings.noDefault') }}</option>
<!-- Options will be loaded dynamically -->
</select>
</div>
</div>
<div class="input-help">
Set the default embedding root directory for downloads, imports and moves
{{ t('settings.folderSettings.defaultEmbeddingRootHelp') }}
</div>
</div>
</div>
<!-- Default Path Customization Section -->
<div class="settings-section">
<h3>Download Path Templates</h3>
<h3>{{ t('settings.downloadPathTemplates.title') }}</h3>
<div class="setting-item">
<div class="input-help">
Configure folder structures for different model types when downloading from Civitai.
{{ t('settings.downloadPathTemplates.help') }}
<div class="placeholder-info">
<strong>Available placeholders:</strong>
<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>
@@ -243,23 +243,23 @@
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="loraTemplatePreset">LoRA</label>
<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="">Flat Structure</option>
<option value="{base_model}">By Base Model</option>
<option value="{author}">By Author</option>
<option value="{first_tag}">By First Tag</option>
<option value="{base_model}/{first_tag}">Base Model + First Tag</option>
<option value="{base_model}/{author}">Base Model + Author</option>
<option value="{author}/{first_tag}">Author + First Tag</option>
<option value="custom">Custom Template</option>
<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="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="Enter custom template (e.g., {base_model}/{author}/{first_tag})" />
<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>
@@ -269,23 +269,23 @@
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="checkpointTemplatePreset">Checkpoint</label>
<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="">Flat Structure</option>
<option value="{base_model}">By Base Model</option>
<option value="{author}">By Author</option>
<option value="{first_tag}">By First Tag</option>
<option value="{base_model}/{first_tag}">Base Model + First Tag</option>
<option value="{base_model}/{author}">Base Model + Author</option>
<option value="{author}/{first_tag}">Author + First Tag</option>
<option value="custom">Custom Template</option>
<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="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="Enter custom template (e.g., {base_model}/{author}/{first_tag})" />
<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>
@@ -295,23 +295,23 @@
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="embeddingTemplatePreset">Embedding</label>
<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="">Flat Structure</option>
<option value="{base_model}">By Base Model</option>
<option value="{author}">By Author</option>
<option value="{first_tag}">By First Tag</option>
<option value="{base_model}/{first_tag}">Base Model + First Tag</option>
<option value="{base_model}/{author}">Base Model + Author</option>
<option value="{author}/{first_tag}">Author + First Tag</option>
<option value="custom">Custom Template</option>
<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="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="Enter custom template (e.g., {base_model}/{author}/{first_tag})" />
<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>
@@ -321,17 +321,17 @@
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label>Base Model Path Mappings</label>
<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>Add Mapping</span>
<span>{{ t('settings.downloadPathTemplates.addMapping') }}</span>
</button>
</div>
</div>
<div class="input-help">
Customize folder names for specific base models (e.g., "Flux.1 D" → "flux")
{{ t('settings.downloadPathTemplates.baseModelPathMappingsHelp') }}
</div>
<div class="mappings-container">
<div id="baseModelMappingsContainer">
@@ -342,29 +342,29 @@
<!-- Add Example Images Settings Section -->
<div class="settings-section">
<h3>Example Images</h3>
<h3>{{ t('settings.sections.exampleImages') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="exampleImagesPath">Download Location <i class="fas fa-sync-alt restart-required-icon" title="Requires restart"></i></label>
<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="Enter folder path for example images" />
<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">Download</span>
<i class="fas fa-download"></i> <span id="exampleDownloadBtnText">{{ t('settings.exampleImages.download') }}</span>
</button>
</div>
</div>
<div class="input-help">
Enter the folder path where example images from Civitai will be saved
{{ t('settings.exampleImages.downloadLocationHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="autoDownloadExampleImages">Auto Download Example Images</label>
<label for="autoDownloadExampleImages">{{ t('settings.exampleImages.autoDownload') }}</label>
</div>
<div class="setting-control">
<label class="toggle-switch">
@@ -375,14 +375,14 @@
</div>
</div>
<div class="input-help">
Automatically download example images for models that don't have them (requires download location to be set)
{{ t('settings.exampleImages.autoDownloadHelp') }}
</div>
</div>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="optimizeExampleImages">Optimize Downloaded Images</label>
<label for="optimizeExampleImages">{{ t('settings.exampleImages.optimizeImages') }}</label>
</div>
<div class="setting-control">
<label class="toggle-switch">
@@ -393,18 +393,18 @@
</div>
</div>
<div class="input-help">
Optimize example images to reduce file size and improve loading speed (metadata will be preserved)
{{ t('settings.exampleImages.optimizeImagesHelp') }}
</div>
</div>
</div>
<!-- Misc. Section -->
<div class="settings-section">
<h3>Misc.</h3>
<h3>{{ t('settings.sections.misc') }}</h3>
<div class="setting-item">
<div class="setting-row">
<div class="setting-info">
<label for="includeTriggerWords">Include Trigger Words in LoRA Syntax</label>
<label for="includeTriggerWords">{{ t('settings.misc.includeTriggerWords') }}</label>
</div>
<div class="setting-control">
<label class="toggle-switch">
@@ -415,7 +415,7 @@
</div>
</div>
<div class="input-help">
Include trained trigger words when copying LoRA syntax to clipboard
{{ t('settings.misc.includeTriggerWordsHelp') }}
</div>
</div>
</div>