alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-24 22:52:12 -03:00
Code Issues Packages Projects Releases Wiki Activity

Implement internationalization (i18n) system for LoRA Manager

Browse Source 
- Added i18n support with automatic language detection based on browser settings.
- Implemented translations for English (en) and Simplified Chinese (zh-CN).
- Created utility functions for text replacement in HTML templates and JavaScript.
- Developed a comprehensive translation key structure for various application components.
- Added formatting functions for numbers, dates, and file sizes according to locale.
- Included RTL language support and dynamic updates for DOM elements.
- Created tests to verify the functionality of the i18n system.
This commit is contained in:
Will Miao
2025-08-28 22:22:26 +08:00
parent 4246908f2e
commit f82908221c
18 changed files with 1786 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
templates/components/context_menu.html
View File

@@ -6,57 +6,57 @@
<i class="fas fa-external-link-alt"></i> View on Civitai
</div> -->
<div class="context-menu-item" data-action="refresh-metadata">
<i class="fas fa-sync"></i> Refresh Civitai Data
<i class="fas fa-sync"></i> <span data-i18n="loras.contextMenu.refreshMetadata">Refresh Civitai Data</span>
</div>
<div class="context-menu-item" data-action="relink-civitai">
<i class="fas fa-link"></i> Re-link to Civitai
<i class="fas fa-link"></i> <span data-i18n="loras.contextMenu.relinkCivitai">Re-link to Civitai</span>
</div>
<div class="context-menu-item" data-action="copyname">
<i class="fas fa-copy"></i> Copy LoRA Syntax
<i class="fas fa-copy"></i> <span data-i18n="loras.contextMenu.copySyntax">Copy LoRA Syntax</span>
</div>
<div class="context-menu-item" data-action="sendappend">
<i class="fas fa-paper-plane"></i> Send to Workflow (Append)
<i class="fas fa-paper-plane"></i> <span data-i18n="loras.contextMenu.sendToWorkflowAppend">Send to Workflow (Append)</span>
</div>
<div class="context-menu-item" data-action="sendreplace">
<i class="fas fa-exchange-alt"></i> Send to Workflow (Replace)
<i class="fas fa-exchange-alt"></i> <span data-i18n="loras.contextMenu.sendToWorkflowReplace">Send to Workflow (Replace)</span>
</div>
<div class="context-menu-item" data-action="preview">
<i class="fas fa-folder-open"></i> Open Examples Folder
<i class="fas fa-folder-open"></i> <span data-i18n="loras.contextMenu.openExamples">Open Examples Folder</span>
</div>
<div class="context-menu-item" data-action="download-examples">
<i class="fas fa-download"></i> Download Example Images
<i class="fas fa-download"></i> <span data-i18n="loras.contextMenu.downloadExamples">Download Example Images</span>
</div>
<div class="context-menu-item" data-action="replace-preview">
<i class="fas fa-image"></i> Replace Preview
<i class="fas fa-image"></i> <span data-i18n="loras.contextMenu.replacePreview">Replace Preview</span>
</div>
<div class="context-menu-item" data-action="set-nsfw">
<i class="fas fa-exclamation-triangle"></i> Set Content Rating
<i class="fas fa-exclamation-triangle"></i> <span data-i18n="loras.contextMenu.setContentRating">Set Content Rating</span>
</div>
<div class="context-menu-separator"></div>
<div class="context-menu-item" data-action="move">
<i class="fas fa-folder-open"></i> Move to Folder
<i class="fas fa-folder-open"></i> <span data-i18n="loras.contextMenu.moveToFolder">Move to Folder</span>
</div>
<div class="context-menu-item" data-action="exclude">
<i class="fas fa-eye-slash"></i> Exclude Model
<i class="fas fa-eye-slash"></i> <span data-i18n="loras.contextMenu.excludeModel">Exclude Model</span>
</div>
<div class="context-menu-item delete-item" data-action="delete">
<i class="fas fa-trash"></i> Delete Model
<i class="fas fa-trash"></i> <span data-i18n="loras.contextMenu.deleteModel">Delete Model</span>
</div>
</div>
<div id="nsfwLevelSelector" class="nsfw-level-selector">
<div class="nsfw-level-header">
<h3>Set Content Rating</h3>
<h3 data-i18n="modals.contentRating.title">Set Content Rating</h3>
<button class="close-nsfw-selector"><i class="fas fa-times"></i></button>
</div>
<div class="nsfw-level-content">
<div class="current-level">Current: <span id="currentNSFWLevel">Unknown</span></div>
<div class="current-level"><span data-i18n="modals.contentRating.current">Current:</span> <span id="currentNSFWLevel">Unknown</span></div>
<div class="nsfw-level-options">
<button class="nsfw-level-btn" data-level="1">PG</button>
<button class="nsfw-level-btn" data-level="2">PG13</button>
<button class="nsfw-level-btn" data-level="4">R</button>
<button class="nsfw-level-btn" data-level="8">X</button>
<button class="nsfw-level-btn" data-level="16">XXX</button>
<button class="nsfw-level-btn" data-level="1" data-i18n="modals.contentRating.levels.pg">PG</button>
<button class="nsfw-level-btn" data-level="2" data-i18n="modals.contentRating.levels.pg13">PG13</button>
<button class="nsfw-level-btn" data-level="4" data-i18n="modals.contentRating.levels.r">R</button>
<button class="nsfw-level-btn" data-level="8" data-i18n="modals.contentRating.levels.x">X</button>
<button class="nsfw-level-btn" data-level="16" data-i18n="modals.contentRating.levels.xxx">XXX</button>
</div>
</div>
</div>

80
templates/components/controls.html
View File

@@ -1,59 +1,59 @@
<div class="controls">
<div class="actions">
<div class="action-buttons">
<div title="Sort models by..." class="control-group">
<div data-i18n="loras.controls.sort.title" data-i18n-target="title" title="Sort models by..." class="control-group">
<select id="sortSelect">
<optgroup label="Name">
<option value="name:asc">A - Z</option>
<option value="name:desc">Z - A</option>
<optgroup data-i18n="loras.controls.sort.name" label="Name">
<option value="name:asc" data-i18n="loras.controls.sort.nameAsc">A - Z</option>
<option value="name:desc" data-i18n="loras.controls.sort.nameDesc">Z - A</option>
</optgroup>
<optgroup label="Date Added">
<option value="date:desc">Newest</option>
<option value="date:asc">Oldest</option>
<optgroup data-i18n="loras.controls.sort.date" label="Date Added">
<option value="date:desc" data-i18n="loras.controls.sort.dateDesc">Newest</option>
<option value="date:asc" data-i18n="loras.controls.sort.dateAsc">Oldest</option>
</optgroup>
<optgroup label="File Size">
<option value="size:desc">Largest</option>
<option value="size:asc">Smallest</option>
<optgroup data-i18n="loras.controls.sort.size" label="File Size">
<option value="size:desc" data-i18n="loras.controls.sort.sizeDesc">Largest</option>
<option value="size:asc" data-i18n="loras.controls.sort.sizeAsc">Smallest</option>
</optgroup>
</select>
</div>
<div title="Refresh model list" class="control-group dropdown-group">
<button data-action="refresh" class="dropdown-main"><i class="fas fa-sync"></i> Refresh</button>
<div data-i18n="loras.controls.refresh.title" data-i18n-target="title" title="Refresh model list" class="control-group dropdown-group">
<button data-action="refresh" class="dropdown-main"><i class="fas fa-sync"></i> <span data-i18n="common.actions.refresh">Refresh</span></button>
<button class="dropdown-toggle" aria-label="Show refresh options">
<i class="fas fa-caret-down"></i>
</button>
<div class="dropdown-menu">
<div class="dropdown-item" data-action="quick-refresh">
<i class="fas fa-bolt"></i> Quick Refresh (incremental)
<i class="fas fa-bolt"></i> <span data-i18n="loras.controls.refresh.quick">Quick Refresh (incremental)</span>
</div>
<div class="dropdown-item" data-action="full-rebuild">
<i class="fas fa-tools"></i> Full Rebuild (complete)
<i class="fas fa-tools"></i> <span data-i18n="loras.controls.refresh.full">Full Rebuild (complete)</span>
</div>
</div>
</div>
<div class="control-group">
<button data-action="fetch" title="Fetch from Civitai"><i class="fas fa-download"></i> Fetch</button>
<button data-action="fetch" data-i18n="loras.controls.fetch" data-i18n-target="title" title="Fetch from Civitai"><i class="fas fa-download"></i> <span data-i18n="loras.controls.fetch">Fetch</span></button>
</div>
<div class="control-group">
<button data-action="download" title="Download from URL">
<i class="fas fa-cloud-download-alt"></i> Download
<button data-action="download" data-i18n="loras.controls.download" data-i18n-target="title" title="Download from URL">
<i class="fas fa-cloud-download-alt"></i> <span data-i18n="loras.controls.download">Download</span>
</button>
</div>
<div class="control-group">
<button id="bulkOperationsBtn" data-action="bulk" title="Bulk Operations (Press B)">
<i class="fas fa-th-large"></i> <span>Bulk <div class="shortcut-key">B</div></span>
<button id="bulkOperationsBtn" data-action="bulk" data-i18n="loras.controls.bulk" data-i18n-target="title" title="Bulk Operations (Press B)">
<i class="fas fa-th-large"></i> <span><span data-i18n="loras.controls.bulk">Bulk</span> <div class="shortcut-key">B</div></span>
</button>
</div>
<div class="control-group">
<button id="findDuplicatesBtn" data-action="find-duplicates" title="Find duplicate models">
<i class="fas fa-clone"></i> Duplicates
<button id="findDuplicatesBtn" data-action="find-duplicates" data-i18n="loras.controls.duplicates" data-i18n-target="title" title="Find duplicate models">
<i class="fas fa-clone"></i> <span data-i18n="loras.controls.duplicates">Duplicates</span>
<span id="duplicatesBadge" class="badge"></span>
</button>
</div>
<div class="control-group">
<button id="favoriteFilterBtn" data-action="toggle-favorites" class="favorite-filter" title="Show favorites only">
<i class="fas fa-star"></i> Favorites
<button id="favoriteFilterBtn" data-action="toggle-favorites" class="favorite-filter" data-i18n="loras.controls.favorites" data-i18n-target="title" title="Show favorites only">
<i class="fas fa-star"></i> <span data-i18n="loras.controls.favorites">Favorites</span>
</button>
</div>
<div id="customFilterIndicator" class="control-group hidden">
@@ -68,23 +68,23 @@
<div class="keyboard-nav-hint tooltip">
<i class="fas fa-keyboard"></i>
<span class="tooltiptext">
Keyboard Navigation:
<span data-i18n="keyboard.navigation">Keyboard Navigation:</span>
<table class="keyboard-shortcuts">
<tr>
<td><span class="key">Page Up</span></td>
<td>Scroll up one page</td>
<td data-i18n="keyboard.shortcuts.pageUp">Scroll up one page</td>
</tr>
<tr>
<td><span class="key">Page Down</span></td>
<td>Scroll down one page</td>
<td data-i18n="keyboard.shortcuts.pageDown">Scroll down one page</td>
</tr>
<tr>
<td><span class="key">Home</span></td>
<td>Jump to top</td>
<td data-i18n="keyboard.shortcuts.home">Jump to top</td>
</tr>
<tr>
<td><span class="key">End</span></td>
<td>Jump to bottom</td>
<td data-i18n="keyboard.shortcuts.end">Jump to bottom</td>
</tr>
</table>
</span>
@@ -107,23 +107,23 @@
0 selected <i class="fas fa-caret-down dropdown-caret"></i>
</span>
<div class="bulk-operations-actions">
<button data-action="send-to-workflow" title="Send all selected LoRAs to workflow">
<i class="fas fa-arrow-right"></i> Send to Workflow
<button data-action="send-to-workflow" data-i18n="loras.bulkOperations.sendToWorkflow" data-i18n-target="title" title="Send all selected LoRAs to workflow">
<i class="fas fa-arrow-right"></i> <span data-i18n="loras.bulkOperations.sendToWorkflow">Send to Workflow</span>
</button>
<button data-action="copy-all" title="Copy all selected LoRAs syntax">
<i class="fas fa-copy"></i> Copy All
<button data-action="copy-all" data-i18n="loras.bulkOperations.copyAll" data-i18n-target="title" title="Copy all selected LoRAs syntax">
<i class="fas fa-copy"></i> <span data-i18n="loras.bulkOperations.copyAll">Copy All</span>
</button>
<button data-action="refresh-all" title="Refresh CivitAI metadata for selected models">
<i class="fas fa-sync-alt"></i> Refresh All
<button data-action="refresh-all" data-i18n="loras.bulkOperations.refreshAll" data-i18n-target="title" title="Refresh CivitAI metadata for selected models">
<i class="fas fa-sync-alt"></i> <span data-i18n="loras.bulkOperations.refreshAll">Refresh All</span>
</button>
<button data-action="move-all" title="Move selected models to folder">
<i class="fas fa-folder-open"></i> Move All
<button data-action="move-all" data-i18n="loras.bulkOperations.moveAll" data-i18n-target="title" title="Move selected models to folder">
<i class="fas fa-folder-open"></i> <span data-i18n="loras.bulkOperations.moveAll">Move All</span>
</button>
<button data-action="delete-all" title="Delete selected models" class="danger-btn">
<i class="fas fa-trash"></i> Delete All
<button data-action="delete-all" data-i18n="loras.bulkOperations.deleteAll" data-i18n-target="title" title="Delete selected models" class="danger-btn">
<i class="fas fa-trash"></i> <span data-i18n="loras.bulkOperations.deleteAll">Delete All</span>
</button>
<button data-action="clear" title="Clear selection">
<i class="fas fa-times"></i> Clear
<button data-action="clear" data-i18n="loras.bulkOperations.clear" data-i18n-target="title" title="Clear selection">
<i class="fas fa-times"></i> <span data-i18n="loras.bulkOperations.clear">Clear</span>
</button>
</div>
</div>

86
templates/components/header.html
View File

@@ -3,36 +3,36 @@
<div class="header-branding">
<a href="/loras" class="logo-link">
<img src="/loras_static/images/favicon-32x32.png" alt="LoRA Manager" class="app-logo">
<span class="app-title">oRA Manager</span>
<span class="app-title" data-i18n="header.appTitle">LoRA Manager</span>
</a>
</div>
<nav class="main-nav">
<a href="/loras" class="nav-item" id="lorasNavItem">
<i class="fas fa-layer-group"></i> LoRAs
<i class="fas fa-layer-group"></i> <span data-i18n="header.navigation.loras">LoRAs</span>
</a>
<a href="/loras/recipes" class="nav-item" id="recipesNavItem">
<i class="fas fa-book-open"></i> Recipes
<i class="fas fa-book-open"></i> <span data-i18n="header.navigation.recipes">Recipes</span>
</a>
<a href="/checkpoints" class="nav-item" id="checkpointsNavItem">
<i class="fas fa-check-circle"></i> Checkpoints
<i class="fas fa-check-circle"></i> <span data-i18n="header.navigation.checkpoints">Checkpoints</span>
</a>
<a href="/embeddings" class="nav-item" id="embeddingsNavItem">
<i class="fas fa-code"></i> Embeddings
<i class="fas fa-code"></i> <span data-i18n="header.navigation.embeddings">Embeddings</span>
</a>
<a href="/statistics" class="nav-item" id="statisticsNavItem">
<i class="fas fa-chart-bar"></i> Stats
<i class="fas fa-chart-bar"></i> <span data-i18n="header.navigation.statistics">Stats</span>
</a>
</nav>
<!-- Context-aware search container -->
<div class="header-search" id="headerSearch">
<div class="search-container">
<input type="text" id="searchInput" placeholder="Search..." />
<input type="text" id="searchInput" data-i18n="header.search.placeholder" data-i18n-target="placeholder" placeholder="Search..." />
<i class="fas fa-search search-icon"></i>
<button class="search-options-toggle" id="searchOptionsToggle" title="Search Options">
<button class="search-options-toggle" id="searchOptionsToggle" data-i18n="header.search.options" data-i18n-target="title" title="Search Options">
<i class="fas fa-sliders-h"></i>
</button>
<button class="search-filter-toggle" id="filterButton" title="Filter models">
<button class="search-filter-toggle" id="filterButton" data-i18n="header.filter.title" data-i18n-target="title" title="Filter models">
<i class="fas fa-filter"></i>
<span class="filter-badge" id="activeFiltersCount" style="display: none">0</span>
</button>
@@ -42,7 +42,7 @@
<div class="header-actions">
<!-- Integrated corner controls -->
<div class="header-controls">
<div class="theme-toggle" title="Toggle theme">
<div class="theme-toggle" data-i18n="header.theme.toggle" data-i18n-target="title" title="Toggle theme">
<i class="fas fa-moon dark-icon"></i>
<i class="fas fa-sun light-icon"></i>
<i class="fas fa-adjust auto-icon"></i>
@@ -69,35 +69,35 @@
<!-- Add search options panel with context-aware options -->
<div id="searchOptionsPanel" class="search-options-panel hidden">
<div class="options-header">
<h3>Search Options</h3>
<h3 data-i18n="header.search.options">Search Options</h3>
<button class="close-options-btn" id="closeSearchOptions">
<i class="fas fa-times"></i>
</button>
</div>
<div class="options-section">
<h4>Search In:</h4>
<h4 data-i18n="header.search.searchIn">Search In:</h4>
<div class="search-option-tags">
{% if request.path == '/loras/recipes' %}
<div class="search-option-tag active" data-option="title">Recipe Title</div>
<div class="search-option-tag active" data-option="tags">Tags</div>
<div class="search-option-tag active" data-option="loraName">LoRA Filename</div>
<div class="search-option-tag active" data-option="loraModel">LoRA Model Name</div>
<div class="search-option-tag active" data-option="title" data-i18n="header.search.filters.title">Recipe Title</div>
<div class="search-option-tag active" data-option="tags" data-i18n="header.search.filters.tags">Tags</div>
<div class="search-option-tag active" data-option="loraName" data-i18n="header.search.filters.loraName">LoRA Filename</div>
<div class="search-option-tag active" data-option="loraModel" data-i18n="header.search.filters.loraModel">LoRA Model Name</div>
{% elif request.path == '/checkpoints' %}
<div class="search-option-tag active" data-option="filename">Filename</div>
<div class="search-option-tag active" data-option="modelname">Checkpoint Name</div>
<div class="search-option-tag active" data-option="tags">Tags</div>
<div class="search-option-tag" data-option="creator">Creator</div>
<div class="search-option-tag active" data-option="filename" data-i18n="header.search.filters.filename">Filename</div>
<div class="search-option-tag active" data-option="modelname" data-i18n="header.search.filters.modelname">Checkpoint Name</div>
<div class="search-option-tag active" data-option="tags" data-i18n="header.search.filters.tags">Tags</div>
<div class="search-option-tag" data-option="creator" data-i18n="header.search.filters.creator">Creator</div>
{% elif request.path == '/embeddings' %}
<div class="search-option-tag active" data-option="filename">Filename</div>
<div class="search-option-tag active" data-option="modelname">Embedding Name</div>
<div class="search-option-tag active" data-option="tags">Tags</div>
<div class="search-option-tag" data-option="creator">Creator</div>
<div class="search-option-tag active" data-option="filename" data-i18n="header.search.filters.filename">Filename</div>
<div class="search-option-tag active" data-option="modelname" data-i18n="header.search.filters.modelname">Embedding Name</div>
<div class="search-option-tag active" data-option="tags" data-i18n="header.search.filters.tags">Tags</div>
<div class="search-option-tag" data-option="creator" data-i18n="header.search.filters.creator">Creator</div>
{% else %}
<!-- Default options for LoRAs page -->
<div class="search-option-tag active" data-option="filename">Filename</div>
<div class="search-option-tag active" data-option="modelname">Model Name</div>
<div class="search-option-tag active" data-option="tags">Tags</div>
<div class="search-option-tag" data-option="creator">Creator</div>
<div class="search-option-tag active" data-option="filename" data-i18n="header.search.filters.filename">Filename</div>
<div class="search-option-tag active" data-option="modelname" data-i18n="header.search.filters.modelname">Model Name</div>
<div class="search-option-tag active" data-option="tags" data-i18n="header.search.filters.tags">Tags</div>
<div class="search-option-tag" data-option="creator" data-i18n="header.search.filters.creator">Creator</div>
{% endif %}
</div>
</div>
@@ -106,54 +106,38 @@
<!-- Add filter panel -->
<div id="filterPanel" class="filter-panel hidden">
<div class="filter-header">
<h3>Filter Models</h3>
<h3 data-i18n="header.filter.title">Filter Models</h3>
<button class="close-filter-btn" onclick="filterManager.closeFilterPanel()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="filter-section">
<h4>Base Model</h4>
<h4 data-i18n="header.filter.baseModel">Base Model</h4>
<div class="filter-tags" id="baseModelTags">
<!-- Tags will be dynamically inserted here -->
</div>
</div>
<div class="filter-section">
<h4>Tags (Top 20)</h4>
<h4 data-i18n="header.filter.modelTags">Tags (Top 20)</h4>
<div class="filter-tags" id="modelTagsFilter">
<!-- Top tags will be dynamically inserted here -->
<div class="tags-loading">Loading tags...</div>
<div class="tags-loading" data-i18n="common.status.loading">Loading tags...</div>
</div>
</div>
<div class="filter-actions">
<button class="clear-filters-btn" onclick="filterManager.clearFilters()">
<button class="clear-filters-btn" onclick="filterManager.clearFilters()" data-i18n="header.filter.clearAll">
Clear All Filters
</button>
</div>
</div>
<!-- Add this script at the end of the header component -->
<!-- Header JavaScript will be handled by the HeaderManager in Header.js -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get the current path from the URL
const currentPath = window.location.pathname;
// Update search placeholder based on current path
const searchInput = document.getElementById('searchInput');
if (searchInput) {
if (currentPath === '/loras') {
searchInput.placeholder = 'Search LoRAs...';
} else if (currentPath === '/loras/recipes') {
searchInput.placeholder = 'Search recipes...';
} else if (currentPath === '/checkpoints') {
searchInput.placeholder = 'Search checkpoints...';
} else if (currentPath === '/embeddings') {
searchInput.placeholder = 'Search embeddings...';
} else {
searchInput.placeholder = 'Search...';
}
}
// Update active nav item
// Update active nav item (i18n is handled by the HeaderManager)
const lorasNavItem = document.getElementById('lorasNavItem');
const recipesNavItem = document.getElementById('recipesNavItem');
const checkpointsNavItem = document.getElementById('checkpointsNavItem');