mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-24 14:42:11 -03:00
Implement internationalization (i18n) system for LoRA Manager
- 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
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user