Merge pull request #388 from willmiao/i18n

I18n

.github/copilot-instructions.md

@@ -0,0 +1 @@
+Always use English for comments.

i18n_migration_summary.md

@@ -0,0 +1,170 @@
+# i18n System Migration Complete
+
+## 概要 (Summary)
+
+成功完成了从JavaScript ES6模块到JSON格式的国际化系统迁移，包含完整的多语言翻译和代码更新。
+
+Successfully completed the migration from JavaScript ES6 modules to JSON format for the internationalization system, including complete multilingual translations and code updates.
+
+## 完成的工作 (Completed Work)
+
+### 1. 文件结构重组 (File Structure Reorganization)
+- **新建目录**: `/locales/` - 集中存放所有JSON翻译文件
+- **移除目录**: `/static/js/i18n/locales/` - 删除了旧的JavaScript文件
+
+### 2. 格式转换 (Format Conversion)
+- **转换前**: ES6模块格式 (`export const en = { ... }`)
+- **转换后**: 标准JSON格式 (`{ ... }`)
+- **支持语言**: 9种语言完全转换
+  - English (en)
+  - 简体中文 (zh-CN)
+  - 繁體中文 (zh-TW)
+  - 日本語 (ja)
+  - Русский (ru)
+  - Deutsch (de)
+  - Français (fr)
+  - Español (es)
+  - 한국어 (ko)
+
+### 3. 翻译完善 (Translation Completion)
+- **翻译条目**: 每种语言386个翻译键值对
+- **覆盖范围**: 完整覆盖所有UI元素
+- **质量保证**: 所有翻译键在各语言间保持一致
+
+### 4. JavaScript代码更新 (JavaScript Code Updates)
+
+#### 主要修改文件: `static/js/i18n/index.js`
+```javascript
+// 旧版本: 静态导入
+import { en } from './locales/en.js';
+
+// 新版本: 动态JSON加载
+async loadLocale(locale) {
+    const response = await fetch(`/locales/${locale}.json`);
+    return await response.json();
+}
+```
+
+#### 核心功能更新:
+- **构造函数**: 从静态导入改为配置驱动
+- **语言加载**: 异步JSON获取机制
+- **初始化**: 支持Promise-based的异步初始化
+- **错误处理**: 增强的回退机制到英语
+- **向后兼容**: 保持现有API接口不变
+
+### 5. Python服务端更新 (Python Server-side Updates)
+
+#### 修改文件: `py/services/server_i18n.py`
+```python
+# 旧版本: 解析JavaScript文件
+def _load_locale_file(self, path, filename, locale_code):
+    # 复杂的JS到JSON转换逻辑
+    
+# 新版本: 直接加载JSON
+def _load_locale_file(self, path, filename, locale_code):
+    with open(file_path, 'r', encoding='utf-8') as f:
+        translations = json.load(f)
+```
+
+#### 路径更新:
+- **旧路径**: `static/js/i18n/locales/*.js`
+- **新路径**: `locales/*.json`
+
+### 6. 服务器路由配置 (Server Route Configuration)
+
+#### 修改文件: `standalone.py`
+```python
+# 新增静态路由服务JSON文件
+app.router.add_static('/locales', locales_path)
+```
+
+## 技术架构 (Technical Architecture)
+
+### 前端 (Frontend)
+```
+Browser → JavaScript i18n Manager → fetch('/locales/{lang}.json') → JSON Response
+```
+
+### 后端 (Backend)
+```
+Python Server → ServerI18nManager → Direct JSON loading → Template Rendering
+```
+
+### 文件组织 (File Organization)
+```
+ComfyUI-Lora-Manager/
+├── locales/                    # 新的JSON翻译文件目录
+│   ├── en.json                 # 英语翻译 (基准)
+│   ├── zh-CN.json             # 简体中文翻译
+│   ├── zh-TW.json             # 繁体中文翻译
+│   ├── ja.json                # 日语翻译
+│   ├── ru.json                # 俄语翻译
+│   ├── de.json                # 德语翻译
+│   ├── fr.json                # 法语翻译
+│   ├── es.json                # 西班牙语翻译
+│   └── ko.json                # 韩语翻译
+├── static/js/i18n/
+│   └── index.js               # 更新的JavaScript i18n管理器
+└── py/services/
+    └── server_i18n.py        # 更新的Python服务端i18n
+```
+
+## 测试验证 (Testing & Validation)
+
+### 测试脚本: `test_i18n.py`
+```bash
+🚀 Testing updated i18n system...
+✅ All JSON locale files are valid (9 languages)
+✅ Server-side i18n system working correctly
+✅ All languages have complete translations (386 keys each)
+🎉 All tests passed!
+```
+
+### 验证内容:
+1. **JSON文件完整性**: 所有文件格式正确，语法有效
+2. **翻译完整性**: 各语言翻译键值一致，无缺失
+3. **服务端功能**: Python i18n服务正常加载和翻译
+4. **参数插值**: 动态参数替换功能正常
+
+## 优势与改进 (Benefits & Improvements)
+
+### 1. 维护性提升
+- **简化格式**: JSON比JavaScript对象更易于编辑和维护
+- **工具支持**: 更好的编辑器语法高亮和验证支持
+- **版本控制**: 更清晰的diff显示，便于追踪更改
+
+### 2. 性能优化
+- **按需加载**: 只加载当前所需语言，减少初始加载时间
+- **缓存友好**: JSON文件可以被浏览器和CDN更好地缓存
+- **压缩效率**: JSON格式压缩率通常更高
+
+### 3. 开发体验
+- **动态切换**: 支持运行时语言切换，无需重新加载页面
+- **易于扩展**: 添加新语言只需增加JSON文件
+- **调试友好**: 更容易定位翻译问题和缺失键
+
+### 4. 部署便利
+- **静态资源**: JSON文件可以作为静态资源部署
+- **CDN支持**: 可以通过CDN分发翻译文件
+- **版本管理**: 更容易管理不同版本的翻译
+
+## 兼容性保证 (Compatibility Assurance)
+
+- **API兼容**: 所有现有的JavaScript API保持不变
+- **调用方式**: 现有代码无需修改即可工作
+- **错误处理**: 增强的回退机制确保用户体验
+- **性能**: 新系统性能与旧系统相当或更好
+
+## 后续建议 (Future Recommendations)
+
+1. **监控**: 部署后监控翻译加载性能和错误率
+2. **优化**: 考虑实施翻译缓存策略以进一步提升性能
+3. **扩展**: 可以考虑添加翻译管理界面，便于非技术人员更新翻译
+4. **自动化**: 实施CI/CD流程自动验证翻译完整性
+
+---
+
+**迁移完成时间**: 2024年
+**影响文件数量**: 21个文件 (9个新JSON + 2个JS更新 + 1个Python更新 + 1个服务器配置)
+**翻译键总数**: 386个 × 9种语言 = 3,474个翻译条目
+**测试状态**: ✅ 全部通过

py/config.py

@@ -18,6 +18,7 @@ class Config:
     def __init__(self):
         self.templates_path = os.path.join(os.path.dirname(os.path.dirname(__file__)), 'templates')
         self.static_path = os.path.join(os.path.dirname(os.path.dirname(__file__)), 'static')
+        self.i18n_path = os.path.join(os.path.dirname(os.path.dirname(__file__)), 'locales')
         # Path mapping dictionary, target to link mapping
         self._path_mappings = {}
         # Static route mapping dictionary, target to route mapping

py/lora_manager.py

@@ -145,7 +145,12 @@ class LoraManager:
                 except Exception as e:
                     logger.warning(f"Failed to add static route on initialization for {target_path}: {e}")
                     continue
-        
+
+        # Add static route for locales JSON files
+        if os.path.exists(config.i18n_path):
+            app.router.add_static('/locales', config.i18n_path)
+            logger.info(f"Added static route for locales: /locales -> {config.i18n_path}")
+
         # Add static route for plugin assets
         app.router.add_static('/loras_static', config.static_path)
         

py/routes/base_model_routes.py

@@ -11,6 +11,7 @@ import jinja2
 from ..utils.routes_common import ModelRouteUtils
 from ..services.websocket_manager import ws_manager
 from ..services.settings_manager import settings
+from ..services.server_i18n import server_i18n
 from ..utils.utils import calculate_relative_path_for_model
 from ..utils.constants import AUTO_ORGANIZE_BATCH_SIZE
 from ..config import config
@@ -113,30 +114,36 @@ class BaseModelRoutes(ABC):
             if not self.template_env or not template_name:
                 return web.Response(text="Template environment or template name not set", status=500)
 
-            if is_initializing:
-                rendered = self.template_env.get_template(template_name).render(
-                    folders=[],
-                    is_initializing=True,
-                    settings=settings,
-                    request=request
-                )
-            else:
+            # 获取用户语言设置
+            user_language = settings.get('language', 'en')
+            
+            # 设置服务端i18n语言
+            server_i18n.set_locale(user_language)
+            
+            # 为模板环境添加i18n过滤器
+            if not hasattr(self.template_env, '_i18n_filter_added'):
+                self.template_env.filters['t'] = server_i18n.create_template_filter()
+                self.template_env._i18n_filter_added = True
+            
+            # 准备模板上下文
+            template_context = {
+                'is_initializing': is_initializing,
+                'settings': settings,
+                'request': request,
+                'folders': [],
+                't': server_i18n.get_translation,
+            }
+
+            if not is_initializing:
                 try:
                     cache = await self.service.scanner.get_cached_data(force_refresh=False)
-                    rendered = self.template_env.get_template(template_name).render(
-                        folders=getattr(cache, "folders", []),
-                        is_initializing=False,
-                        settings=settings,
-                        request=request
-                    )
+                    template_context['folders'] = getattr(cache, "folders", [])
                 except Exception as cache_error:
                     logger.error(f"Error loading cache data: {cache_error}")
-                    rendered = self.template_env.get_template(template_name).render(
-                        folders=[],
-                        is_initializing=True,
-                        settings=settings,
-                        request=request
-                    )
+                    template_context['is_initializing'] = True
+
+            rendered = self.template_env.get_template(template_name).render(**template_context)
+            
             return web.Response(
                 text=rendered,
                 content_type='text/html'

py/routes/recipe_routes.py

@@ -17,6 +17,7 @@ from ..recipes import RecipeParserFactory
 from ..utils.constants import CARD_PREVIEW_WIDTH
 
 from ..services.settings_manager import settings
+from ..services.server_i18n import server_i18n
 from ..config import config
 
 # Check if running in standalone mode
@@ -127,6 +128,17 @@ class RecipeRoutes:
             # Ensure services are initialized
             await self.init_services()
             
+            # 获取用户语言设置
+            user_language = settings.get('language', 'en')
+            
+            # 设置服务端i18n语言
+            server_i18n.set_locale(user_language)
+            
+            # 为模板环境添加i18n过滤器
+            if not hasattr(self.template_env, '_i18n_filter_added'):
+                self.template_env.filters['t'] = server_i18n.create_template_filter()
+                self.template_env._i18n_filter_added = True
+            
             # Skip initialization check and directly try to get cached data
             try:
                 # Recipe scanner will initialize cache if needed
@@ -136,7 +148,9 @@ class RecipeRoutes:
                     recipes=[],  # Frontend will load recipes via API
                     is_initializing=False,
                     settings=settings,
-                    request=request
+                    request=request,
+                    # 添加服务端翻译函数
+                    t=server_i18n.get_translation,
                 )
             except Exception as cache_error:
                 logger.error(f"Error loading recipe cache data: {cache_error}")
@@ -145,7 +159,9 @@ class RecipeRoutes:
                 rendered = template.render(
                     is_initializing=True,
                     settings=settings,
-                    request=request
+                    request=request,
+                    # 添加服务端翻译函数
+                    t=server_i18n.get_translation,
                 )
                 logger.info("Recipe cache error, returning initialization page")
             

py/routes/stats_routes.py

@@ -9,6 +9,7 @@ from typing import Dict, List, Any
 
 from ..config import config
 from ..services.settings_manager import settings
+from ..services.server_i18n import server_i18n
 from ..services.service_registry import ServiceRegistry
 from ..utils.usage_stats import UsageStats
 
@@ -58,11 +59,23 @@ class StatsRoutes:
             
             is_initializing = lora_initializing or checkpoint_initializing or embedding_initializing
 
+            # 获取用户语言设置
+            user_language = settings.get('language', 'en')
+            
+            # 设置服务端i18n语言
+            server_i18n.set_locale(user_language)
+            
+            # 为模板环境添加i18n过滤器
+            if not hasattr(self.template_env, '_i18n_filter_added'):
+                self.template_env.filters['t'] = server_i18n.create_template_filter()
+                self.template_env._i18n_filter_added = True
+
             template = self.template_env.get_template('statistics.html')
             rendered = template.render(
                 is_initializing=is_initializing,
                 settings=settings,
-                request=request
+                request=request,
+                t=server_i18n.get_translation,
             )
             
             return web.Response(

py/services/server_i18n.py

@@ -0,0 +1,114 @@
+import os
+import json
+import logging
+from typing import Dict, Any, Optional
+
+logger = logging.getLogger(__name__)
+
+class ServerI18nManager:
+    """Server-side internationalization manager for template rendering"""
+    
+    def __init__(self):
+        self.translations = {}
+        self.current_locale = 'en'
+        self._load_translations()
+    
+    def _load_translations(self):
+        """Load all translation files from the locales directory"""
+        i18n_path = os.path.join(
+            os.path.dirname(os.path.dirname(os.path.dirname(__file__))), 
+            'locales'
+        )
+        
+        if not os.path.exists(i18n_path):
+            logger.warning(f"I18n directory not found: {i18n_path}")
+            return
+        
+        # Load all available locale files
+        for filename in os.listdir(i18n_path):
+            if filename.endswith('.json'):
+                locale_code = filename[:-5]  # Remove .json extension
+                try:
+                    self._load_locale_file(i18n_path, filename, locale_code)
+                except Exception as e:
+                    logger.error(f"Error loading locale file {filename}: {e}")
+    
+    def _load_locale_file(self, path: str, filename: str, locale_code: str):
+        """Load a single locale JSON file"""
+        file_path = os.path.join(path, filename)
+        
+        try:
+            with open(file_path, 'r', encoding='utf-8') as f:
+                translations = json.load(f)
+                
+            self.translations[locale_code] = translations
+            logger.debug(f"Loaded translations for {locale_code} from {filename}")
+            
+        except Exception as e:
+            logger.error(f"Error parsing locale file {filename}: {e}")
+    
+    def set_locale(self, locale: str):
+        """Set the current locale"""
+        if locale in self.translations:
+            self.current_locale = locale
+        else:
+            logger.warning(f"Locale {locale} not found, using 'en'")
+            self.current_locale = 'en'
+    
+    def get_translation(self, key: str, params: Dict[str, Any] = None, **kwargs) -> str:
+        """Get translation for a key with optional parameters (supports both dict and keyword args)"""
+        # Merge kwargs into params for convenience
+        if params is None:
+            params = {}
+        if kwargs:
+            params = {**params, **kwargs}
+        
+        if self.current_locale not in self.translations:
+            return key
+        
+        # Navigate through nested object using dot notation
+        keys = key.split('.')
+        value = self.translations[self.current_locale]
+        
+        for k in keys:
+            if isinstance(value, dict) and k in value:
+                value = value[k]
+            else:
+                # Fallback to English if current locale doesn't have the key
+                if self.current_locale != 'en' and 'en' in self.translations:
+                    en_value = self.translations['en']
+                    for k in keys:
+                        if isinstance(en_value, dict) and k in en_value:
+                            en_value = en_value[k]
+                        else:
+                            return key
+                    value = en_value
+                else:
+                    return key
+                break
+        
+        if not isinstance(value, str):
+            return key
+        
+        # Replace parameters if provided
+        if params:
+            for param_key, param_value in params.items():
+                placeholder = f"{{{param_key}}}"
+                double_placeholder = f"{{{{{param_key}}}}}"
+                value = value.replace(placeholder, str(param_value))
+                value = value.replace(double_placeholder, str(param_value))
+        
+        return value
+    
+    def get_available_locales(self) -> list:
+        """Get list of available locales"""
+        return list(self.translations.keys())
+    
+    def create_template_filter(self):
+        """Create a Jinja2 filter function for templates"""
+        def t_filter(key: str, **params) -> str:
+            return self.get_translation(key, params)
+        return t_filter
+
+# Create global instance
+server_i18n = ServerI18nManager()

py/services/settings_manager.py

@@ -80,7 +80,8 @@ class SettingsManager:
         """Return default settings"""
         return {
             "civitai_api_key": "",
-            "show_only_sfw": False
+            "show_only_sfw": False,
+            "language": "en"  # 添加默认语言设置
         }
 
     def get(self, key: str, default: Any = None) -> Any:

standalone.py

@@ -339,6 +339,11 @@ class StandaloneLoraManager(LoraManager):
                     logger.warning(f"Failed to add static route on initialization for {target_path}: {e}")
                     continue
         
+        # Add static route for locales JSON files
+        if os.path.exists(config.i18n_path):
+            app.router.add_static('/locales', config.i18n_path)
+            logger.info(f"Added static route for locales: /locales -> {config.i18n_path}")
+            
         # Add static route for plugin assets
         app.router.add_static('/loras_static', config.static_path)
         

static/css/components/statistics.css

@@ -7,6 +7,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: var(--space-2);
+    margin-top: var(--space-2);
     margin-bottom: var(--space-3);
 }
 

static/js/api/baseModelApi.js

@@ -1,5 +1,6 @@
 import { state, getCurrentPageState } from '../state/index.js';
 import { showToast } from '../utils/uiHelpers.js';
+import { translate } from '../utils/i18nHelpers.js';
 import { getStorageItem, getSessionItem, saveMapToStorage } from '../utils/storageHelpers.js';
 import { 
     getCompleteApiConfig, 
@@ -76,7 +77,7 @@ export class BaseModelApiClient {
             
         } catch (error) {
             console.error(`Error fetching ${this.apiConfig.config.displayName}s:`, error);
-            showToast(`Failed to fetch ${this.apiConfig.config.displayName}s: ${error.message}`, 'error');
+            showToast('toast.api.fetchFailed', { type: this.apiConfig.config.displayName, message: error.message }, 'error');
             throw error;
         }
     }
@@ -110,7 +111,7 @@ export class BaseModelApiClient {
             return result;
         } catch (error) {
             console.error(`Error reloading ${this.apiConfig.config.displayName}s:`, error);
-            showToast(`Failed to reload ${this.apiConfig.config.displayName}s: ${error.message}`, 'error');
+            showToast('toast.api.reloadFailed', { type: this.apiConfig.config.displayName, message: error.message }, 'error');
             throw error;
         } finally {
             pageState.isLoading = false;
@@ -138,14 +139,14 @@ export class BaseModelApiClient {
                 if (state.virtualScroller) {
                     state.virtualScroller.removeItemByFilePath(filePath);
                 }
-                showToast(`${this.apiConfig.config.displayName} deleted successfully`, 'success');
+                showToast('toast.api.deleteSuccess', { type: this.apiConfig.config.displayName }, 'success');
                 return true;
             } else {
                 throw new Error(data.error || `Failed to delete ${this.apiConfig.config.singularName}`);
             }
         } catch (error) {
             console.error(`Error deleting ${this.apiConfig.config.singularName}:`, error);
-            showToast(`Failed to delete ${this.apiConfig.config.singularName}: ${error.message}`, 'error');
+            showToast('toast.api.deleteFailed', { type: this.apiConfig.config.singularName, message: error.message }, 'error');
             return false;
         } finally {
             state.loadingManager.hide();
@@ -172,14 +173,14 @@ export class BaseModelApiClient {
                 if (state.virtualScroller) {
                     state.virtualScroller.removeItemByFilePath(filePath);
                 }
-                showToast(`${this.apiConfig.config.displayName} excluded successfully`, 'success');
+                showToast('toast.api.excludeSuccess', { type: this.apiConfig.config.displayName }, 'success');
                 return true;
             } else {
                 throw new Error(data.error || `Failed to exclude ${this.apiConfig.config.singularName}`);
             }
         } catch (error) {
             console.error(`Error excluding ${this.apiConfig.config.singularName}:`, error);
-            showToast(`Failed to exclude ${this.apiConfig.config.singularName}: ${error.message}`, 'error');
+            showToast('toast.api.excludeFailed', { type: this.apiConfig.config.singularName, message: error.message }, 'error');
             return false;
         } finally {
             state.loadingManager.hide();
@@ -208,9 +209,9 @@ export class BaseModelApiClient {
                     preview_url: result.new_preview_path
                 });
     
-                showToast('File name updated successfully', 'success');
+                showToast('toast.api.fileNameUpdated', {}, 'success');
             } else {
-                showToast('Failed to rename file: ' + (result.error || 'Unknown error'), 'error');
+                showToast('toast.api.fileRenameFailed', { error: result.error || 'Unknown error' }, 'error');
             }
 
             return result;
@@ -272,10 +273,10 @@ export class BaseModelApiClient {
             };
 
             state.virtualScroller.updateSingleItem(filePath, updateData);
-            showToast('Preview updated successfully', 'success');
+            showToast('toast.api.previewUpdated', {}, 'success');
         } catch (error) {
             console.error('Error uploading preview:', error);
-            showToast('Failed to upload preview image', 'error');
+            showToast('toast.api.previewUploadFailed', {}, 'error');
         } finally {
             state.loadingManager.hide();
         }
@@ -322,10 +323,10 @@ export class BaseModelApiClient {
 
             resetAndReload(true);
             
-            showToast(`${fullRebuild ? 'Full rebuild' : 'Refresh'} complete`, 'success');
+            showToast('toast.api.refreshComplete', { action: fullRebuild ? 'Full rebuild' : 'Refresh' }, 'success');
         } catch (error) {
             console.error('Refresh failed:', error);
-            showToast(`Failed to ${fullRebuild ? 'rebuild' : 'refresh'} ${this.apiConfig.config.displayName}s`, 'error');
+            showToast('toast.api.refreshFailed', { action: fullRebuild ? 'rebuild' : 'refresh', type: this.apiConfig.config.displayName }, 'error');
         } finally {
             state.loadingManager.hide();
             state.loadingManager.restoreProgressBar();
@@ -353,14 +354,14 @@ export class BaseModelApiClient {
                     state.virtualScroller.updateSingleItem(filePath, data.metadata);
                 }
 
-                showToast('Metadata refreshed successfully', 'success');
+                showToast('toast.api.metadataRefreshed', {}, 'success');
                 return true;
             } else {
                 throw new Error(data.error || 'Failed to refresh metadata');
             }
         } catch (error) {
             console.error('Error refreshing metadata:', error);
-            showToast(error.message, 'error');
+            showToast('toast.api.metadataRefreshFailed', { message: error.message }, 'error');
             return false;
         } finally {
             state.loadingManager.hide();
@@ -432,10 +433,10 @@ export class BaseModelApiClient {
                 await operationComplete;
 
                 resetAndReload(false);
-                showToast('Metadata update complete', 'success');
+                showToast('toast.api.metadataUpdateComplete', {}, 'success');
             } catch (error) {
                 console.error('Error fetching metadata:', error);
-                showToast('Failed to fetch metadata: ' + error.message, 'error');
+                showToast('toast.api.metadataFetchFailed', { message: error.message }, 'error');
             } finally {
                 if (ws) {
                     ws.close();
@@ -503,22 +504,22 @@ export class BaseModelApiClient {
 
             let completionMessage;
             if (successCount === totalItems) {
-                completionMessage = `Successfully refreshed all ${successCount} ${this.apiConfig.config.displayName}s`;
-                showToast(completionMessage, 'success');
+                completionMessage = translate('toast.api.bulkMetadataCompleteAll', { count: successCount, type: this.apiConfig.config.displayName }, `Successfully refreshed all ${successCount} ${this.apiConfig.config.displayName}s`);
+                showToast('toast.api.bulkMetadataCompleteAll', { count: successCount, type: this.apiConfig.config.displayName }, 'success');
             } else if (successCount > 0) {
-                completionMessage = `Refreshed ${successCount} of ${totalItems} ${this.apiConfig.config.displayName}s`;
-                showToast(completionMessage, 'warning');
+                completionMessage = translate('toast.api.bulkMetadataCompletePartial', { success: successCount, total: totalItems, type: this.apiConfig.config.displayName }, `Refreshed ${successCount} of ${totalItems} ${this.apiConfig.config.displayName}s`);
+                showToast('toast.api.bulkMetadataCompletePartial', { success: successCount, total: totalItems, type: this.apiConfig.config.displayName }, 'warning');
                 
                 if (failedItems.length > 0) {
                     const failureMessage = failedItems.length <= 3 
                         ? failedItems.map(item => `${item.fileName}: ${item.error}`).join('\n')
                         : failedItems.slice(0, 3).map(item => `${item.fileName}: ${item.error}`).join('\n') + 
                           `\n(and ${failedItems.length - 3} more)`;
-                    showToast(`Failed refreshes:\n${failureMessage}`, 'warning', 6000);
+                    showToast('toast.api.bulkMetadataFailureDetails', { failures: failureMessage }, 'warning', 6000);
                 }
             } else {
-                completionMessage = `Failed to refresh metadata for any ${this.apiConfig.config.displayName}s`;
-                showToast(completionMessage, 'error');
+                completionMessage = translate('toast.api.bulkMetadataCompleteNone', { type: this.apiConfig.config.displayName }, `Failed to refresh metadata for any ${this.apiConfig.config.displayName}s`);
+                showToast('toast.api.bulkMetadataCompleteNone', { type: this.apiConfig.config.displayName }, 'error');
             }
 
             await progressController.complete(completionMessage);
@@ -534,7 +535,7 @@ export class BaseModelApiClient {
 
         } catch (error) {
             console.error('Error in bulk metadata refresh:', error);
-            showToast(`Failed to refresh metadata: ${error.message}`, 'error');
+            showToast('toast.api.bulkMetadataFailed', { message: error.message }, 'error');
             await progressController.complete('Operation failed');
             throw error;
         }
@@ -708,11 +709,11 @@ export class BaseModelApiClient {
     async moveSingleModel(filePath, targetPath) {
         // Only allow move if supported
         if (!this.apiConfig.config.supportsMove) {
-            showToast(`Moving ${this.apiConfig.config.displayName}s is not supported`, 'warning');
+            showToast('toast.api.moveNotSupported', { type: this.apiConfig.config.displayName }, 'warning');
             return null;
         }
         if (filePath.substring(0, filePath.lastIndexOf('/')) === targetPath) {
-            showToast(`${this.apiConfig.config.displayName} is already in the selected folder`, 'info');
+            showToast('toast.api.alreadyInFolder', { type: this.apiConfig.config.displayName }, 'info');
             return null;
         }
 
@@ -737,9 +738,9 @@ export class BaseModelApiClient {
         }
 
         if (result && result.message) {
-            showToast(result.message, 'info');
+            showToast('toast.api.moveInfo', { message: result.message }, 'info');
         } else {
-            showToast(`${this.apiConfig.config.displayName} moved successfully`, 'success');
+            showToast('toast.api.moveSuccess', { type: this.apiConfig.config.displayName }, 'success');
         }
 
         if (result.success) {
@@ -753,7 +754,7 @@ export class BaseModelApiClient {
 
     async moveBulkModels(filePaths, targetPath) {
         if (!this.apiConfig.config.supportsMove) {
-            showToast(`Moving ${this.apiConfig.config.displayName}s is not supported`, 'warning');
+            showToast('toast.api.bulkMoveNotSupported', { type: this.apiConfig.config.displayName }, 'warning');
             return [];
         }
         const movedPaths = filePaths.filter(path => {
@@ -761,7 +762,7 @@ export class BaseModelApiClient {
         });
 
         if (movedPaths.length === 0) {
-            showToast(`All selected ${this.apiConfig.config.displayName}s are already in the target folder`, 'info');
+            showToast('toast.api.allAlreadyInFolder', { type: this.apiConfig.config.displayName }, 'info');
             return [];
         }
 
@@ -784,7 +785,11 @@ export class BaseModelApiClient {
 
         if (result.success) {
             if (result.failure_count > 0) {
-                showToast(`Moved ${result.success_count} ${this.apiConfig.config.displayName}s, ${result.failure_count} failed`, 'warning');
+                showToast('toast.api.bulkMovePartial', { 
+                    successCount: result.success_count, 
+                    type: this.apiConfig.config.displayName, 
+                    failureCount: result.failure_count 
+                }, 'warning');
                 console.log('Move operation results:', result.results);
                 const failedFiles = result.results
                     .filter(r => !r.success)
@@ -796,10 +801,13 @@ export class BaseModelApiClient {
                     const failureMessage = failedFiles.length <= 3 
                         ? failedFiles.join('\n')
                         : failedFiles.slice(0, 3).join('\n') + `\n(and ${failedFiles.length - 3} more)`;
-                    showToast(`Failed moves:\n${failureMessage}`, 'warning', 6000);
+                    showToast('toast.api.bulkMoveFailures', { failures: failureMessage }, 'warning', 6000);
                 }
             } else {
-                showToast(`Successfully moved ${result.success_count} ${this.apiConfig.config.displayName}s`, 'success');
+                showToast('toast.api.bulkMoveSuccess', { 
+                    successCount: result.success_count, 
+                    type: this.apiConfig.config.displayName 
+                }, 'success');
             }
             
             // Return the results array with original_file_path and new_file_path
@@ -931,12 +939,12 @@ export class BaseModelApiClient {
                 // Wait for the operation to complete via WebSocket
                 await operationComplete;
                 
-                showToast('Successfully downloaded example images!', 'success');
+                showToast('toast.api.exampleImagesDownloadSuccess', {}, 'success');
                 return true;
                 
             } catch (error) {
                 console.error('Error downloading example images:', error);
-                showToast(`Failed to download example images: ${error.message}`, 'error');
+                showToast('toast.api.exampleImagesDownloadFailed', { message: error.message }, 'error');
                 throw error;
             } finally {
                 if (ws) {

static/js/api/checkpointApi.js

@@ -1,5 +1,4 @@
 import { BaseModelApiClient } from './baseModelApi.js';
-import { showToast } from '../utils/uiHelpers.js';
 
 /**
  * Checkpoint-specific API client

static/js/api/embeddingApi.js

@@ -1,5 +1,4 @@
 import { BaseModelApiClient } from './baseModelApi.js';
-import { showToast } from '../utils/uiHelpers.js';
 
 /**
  * Embedding-specific API client

static/js/api/recipeApi.js

@@ -89,7 +89,7 @@ export async function fetchRecipesPage(page = 1, pageSize = 100) {
         };
     } catch (error) {
         console.error('Error fetching recipes:', error);
-        showToast(`Failed to fetch recipes: ${error.message}`, 'error');
+        showToast('toast.recipes.fetchFailed', { message: error.message }, 'error');
         throw error;
     }
 }
@@ -131,7 +131,7 @@ export async function resetAndReloadWithVirtualScroll(options = {}) {
         return result;
     } catch (error) {
         console.error(`Error reloading ${modelType}s:`, error);
-        showToast(`Failed to reload ${modelType}s: ${error.message}`, 'error');
+        showToast('toast.recipes.reloadFailed', { modelType: modelType, message: error.message }, 'error');
         throw error;
     } finally {
         pageState.isLoading = false;
@@ -179,7 +179,7 @@ export async function loadMoreWithVirtualScroll(options = {}) {
         return result;
     } catch (error) {
         console.error(`Error loading ${modelType}s:`, error);
-        showToast(`Failed to load ${modelType}s: ${error.message}`, 'error');
+        showToast('toast.recipes.loadFailed', { modelType: modelType, message: error.message }, 'error');
         throw error;
     } finally {
         pageState.isLoading = false;
@@ -217,10 +217,10 @@ export async function refreshRecipes() {
         // After successful cache rebuild, reload the recipes
         await resetAndReload();
         
-        showToast('Refresh complete', 'success');
+        showToast('toast.recipes.refreshComplete', {}, 'success');
     } catch (error) {
         console.error('Error refreshing recipes:', error);
-        showToast(error.message || 'Failed to refresh recipes', 'error');
+        showToast('toast.recipes.refreshFailed', { message: error.message }, 'error');
     } finally {
         state.loadingManager.hide();
         state.loadingManager.restoreProgressBar();
@@ -285,7 +285,7 @@ export async function updateRecipeMetadata(filePath, updates) {
         const data = await response.json();
 
         if (!data.success) {
-            showToast(`Failed to update recipe: ${data.error}`, 'error');
+            showToast('toast.recipes.updateFailed', { error: data.error }, 'error');
             throw new Error(data.error || 'Failed to update recipe');
         }
 
@@ -294,7 +294,7 @@ export async function updateRecipeMetadata(filePath, updates) {
         return data;
     } catch (error) {
         console.error('Error updating recipe:', error);
-        showToast(`Error updating recipe: ${error.message}`, 'error');
+        showToast('toast.recipes.updateError', { message: error.message }, 'error');
         throw error;
     } finally {
         state.loadingManager.hide();

static/js/components/ContextMenu/ModelContextMenuMixin.js

@@ -25,10 +25,10 @@ export const ModelContextMenuMixin = {
                 try {
                     await this.saveModelMetadata(filePath, { preview_nsfw_level: level });
                     
-                    showToast(`Content rating set to ${getNSFWLevelName(level)}`, 'success');
+                    showToast('toast.contextMenu.contentRatingSet', { level: getNSFWLevelName(level) }, 'success');
                     this.nsfwSelector.style.display = 'none';
                 } catch (error) {
-                    showToast(`Failed to set content rating: ${error.message}`, 'error');
+                    showToast('toast.contextMenu.contentRatingFailed', { message: error.message }, 'error');
                 }
             });
         });
@@ -147,7 +147,7 @@ export const ModelContextMenuMixin = {
                 const data = await response.json();
                 
                 if (data.success) {
-                    showToast('Model successfully re-linked to Civitai', 'success');
+                    showToast('toast.contextMenu.relinkSuccess', {}, 'success');
                     // Reload the current view to show updated data
                     await this.resetAndReload();
                 } else {
@@ -155,7 +155,7 @@ export const ModelContextMenuMixin = {
                 }
             } catch (error) {
                 console.error('Error re-linking model:', error);
-                showToast(`Error: ${error.message}`, 'error');
+                showToast('toast.contextMenu.relinkFailed', { message: error.message }, 'error');
             } finally {
                 state.loadingManager.hide();
             }
@@ -211,10 +211,10 @@ export const ModelContextMenuMixin = {
                     if (this.currentCard.querySelector('.fa-globe')) {
                         this.currentCard.querySelector('.fa-globe').click();
                     } else {
-                        showToast('Please fetch metadata from CivitAI first', 'info');
+                        showToast('toast.contextMenu.fetchMetadataFirst', {}, 'info');
                     }
                 } else {
-                    showToast('No CivitAI information available', 'info');
+                    showToast('toast.contextMenu.noCivitaiInfo', {}, 'info');
                 }
                 return true;
             case 'relink-civitai':
@@ -232,7 +232,7 @@ export const ModelContextMenuMixin = {
     async downloadExampleImages() {
         const modelHash = this.currentCard.dataset.sha256;
         if (!modelHash) {
-            showToast('Model hash not available', 'error');
+            showToast('toast.contextMenu.missingHash', {}, 'error');
             return;
         }
 

static/js/components/ContextMenu/RecipeContextMenu.js

@@ -99,7 +99,7 @@ export class RecipeContextMenu extends BaseContextMenu {
     copyRecipeSyntax() {
         const recipeId = this.currentCard.dataset.id;
         if (!recipeId) {
-            showToast('Cannot copy recipe: Missing recipe ID', 'error');
+            showToast('recipes.contextMenu.copyRecipe.missingId', {}, 'error');
             return;
         }
 
@@ -114,7 +114,7 @@ export class RecipeContextMenu extends BaseContextMenu {
             })
             .catch(err => {
                 console.error('Failed to copy recipe syntax: ', err);
-                showToast('Failed to copy recipe syntax', 'error');
+                showToast('recipes.contextMenu.copyRecipe.failed', {}, 'error');
             });
     }
     
@@ -122,7 +122,7 @@ export class RecipeContextMenu extends BaseContextMenu {
     sendRecipeToWorkflow(replaceMode) {
         const recipeId = this.currentCard.dataset.id;
         if (!recipeId) {
-            showToast('Cannot send recipe: Missing recipe ID', 'error');
+            showToast('recipes.contextMenu.sendRecipe.missingId', {}, 'error');
             return;
         }
 
@@ -137,14 +137,14 @@ export class RecipeContextMenu extends BaseContextMenu {
             })
             .catch(err => {
                 console.error('Failed to send recipe to workflow: ', err);
-                showToast('Failed to send recipe to workflow', 'error');
+                showToast('recipes.contextMenu.sendRecipe.failed', {}, 'error');
             });
     }
     
     // View all LoRAs in the recipe
     viewRecipeLoRAs(recipeId) {
         if (!recipeId) {
-            showToast('Cannot view LoRAs: Missing recipe ID', 'error');
+            showToast('recipes.contextMenu.viewLoras.missingId', {}, 'error');
             return;
         }
         
@@ -171,19 +171,19 @@ export class RecipeContextMenu extends BaseContextMenu {
                     // Navigate to the LoRAs page
                     window.location.href = '/loras';
                 } else {
-                    showToast('No LoRAs found in this recipe', 'info');
+                    showToast('recipes.contextMenu.viewLoras.noLorasFound', {}, 'info');
                 }
             })
             .catch(error => {
                 console.error('Error loading recipe LoRAs:', error);
-                showToast('Error loading recipe LoRAs: ' + error.message, 'error');
+                showToast('recipes.contextMenu.viewLoras.loadError', { message: error.message }, 'error');
             });
     }
     
     // Download missing LoRAs
     async downloadMissingLoRAs(recipeId) {
         if (!recipeId) {
-            showToast('Cannot download LoRAs: Missing recipe ID', 'error');
+            showToast('recipes.contextMenu.downloadMissing.missingId', {}, 'error');
             return;
         }
         
@@ -196,7 +196,7 @@ export class RecipeContextMenu extends BaseContextMenu {
             const missingLoras = recipe.loras.filter(lora => !lora.inLibrary && !lora.isDeleted);
             
             if (missingLoras.length === 0) {
-                showToast('No missing LoRAs to download', 'info');
+                showToast('recipes.contextMenu.downloadMissing.noMissingLoras', {}, 'info');
                 return;
             }
             
@@ -234,7 +234,7 @@ export class RecipeContextMenu extends BaseContextMenu {
             const validLoras = lorasWithVersionInfo.filter(lora => lora !== null);
             
             if (validLoras.length === 0) {
-                showToast('Failed to get information for missing LoRAs', 'error');
+                showToast('recipes.contextMenu.downloadMissing.getInfoFailed', {}, 'error');
                 return;
             }
             
@@ -275,7 +275,7 @@ export class RecipeContextMenu extends BaseContextMenu {
             window.importManager.downloadMissingLoras(recipeData, recipeId);
         } catch (error) {
             console.error('Error downloading missing LoRAs:', error);
-            showToast('Error preparing LoRAs for download: ' + error.message, 'error');
+            showToast('recipes.contextMenu.downloadMissing.prepareError', { message: error.message }, 'error');
         } finally {
             if (state.loadingManager) {
                 state.loadingManager.hide();

static/js/components/DuplicatesManager.js

@@ -26,7 +26,7 @@ export class DuplicatesManager {
             this.duplicateGroups = data.duplicate_groups || [];
             
             if (this.duplicateGroups.length === 0) {
-                showToast('No duplicate recipes found', 'info');
+                showToast('toast.duplicates.noDuplicatesFound', { type: 'recipes' }, 'info');
                 return false;
             }
             
@@ -34,7 +34,7 @@ export class DuplicatesManager {
             return true;
         } catch (error) {
             console.error('Error finding duplicates:', error);
-            showToast('Failed to find duplicates: ' + error.message, 'error');
+            showToast('toast.duplicates.findFailed', { message: error.message }, 'error');
             return false;
         }
     }
@@ -325,7 +325,7 @@ export class DuplicatesManager {
     
     async deleteSelectedDuplicates() {
         if (this.selectedForDeletion.size === 0) {
-            showToast('No recipes selected for deletion', 'info');
+            showToast('toast.duplicates.noItemsSelected', { type: 'recipes' }, 'info');
             return;
         }
         
@@ -340,7 +340,7 @@ export class DuplicatesManager {
             modalManager.showModal('duplicateDeleteModal');
         } catch (error) {
             console.error('Error preparing delete:', error);
-            showToast('Error: ' + error.message, 'error');
+            showToast('toast.duplicates.deleteError', { message: error.message }, 'error');
         }
     }
     
@@ -371,7 +371,7 @@ export class DuplicatesManager {
                 throw new Error(data.error || 'Unknown error deleting recipes');
             }
             
-            showToast(`Successfully deleted ${data.total_deleted} recipes`, 'success');
+            showToast('toast.duplicates.deleteSuccess', { count: data.total_deleted, type: 'recipes' }, 'success');
             
             // Exit duplicate mode if deletions were successful
             if (data.total_deleted > 0) {
@@ -380,7 +380,7 @@ export class DuplicatesManager {
             
         } catch (error) {
             console.error('Error deleting recipes:', error);
-            showToast('Failed to delete recipes: ' + error.message, 'error');
+            showToast('toast.duplicates.deleteFailed', { type: 'recipes', message: error.message }, 'error');
         }
     }
 }

static/js/components/Header.js

@@ -3,6 +3,8 @@ import { toggleTheme } from '../utils/uiHelpers.js';
 import { SearchManager } from '../managers/SearchManager.js';
 import { FilterManager } from '../managers/FilterManager.js';
 import { initPageState } from '../state/index.js';
+import { getStorageItem } from '../utils/storageHelpers.js';
+import { updateElementAttribute } from '../utils/i18nHelpers.js';
 
 /**
  * Header.js - Manages the application header behavior across different pages
@@ -47,21 +49,17 @@ export class HeaderManager {
       // Handle theme toggle
       const themeToggle = document.querySelector('.theme-toggle');
       if (themeToggle) {
-        // Set initial state based on current theme
-        const currentTheme = localStorage.getItem('lm_theme') || 'auto';
+        const currentTheme = getStorageItem('theme') || 'auto';
         themeToggle.classList.add(`theme-${currentTheme}`);
-        
-        themeToggle.addEventListener('click', () => {
+
+        // Use i18nHelpers to update themeToggle's title
+        this.updateThemeTooltip(themeToggle, currentTheme);
+
+        themeToggle.addEventListener('click', async () => {
           if (typeof toggleTheme === 'function') {
             const newTheme = toggleTheme();
-            // Update tooltip based on next toggle action
-            if (newTheme === 'light') {
-              themeToggle.title = "Switch to dark theme";
-            } else if (newTheme === 'dark') {
-              themeToggle.title = "Switch to auto theme";
-            } else {
-              themeToggle.title = "Switch to light theme";
-            }
+            // Use i18nHelpers to update themeToggle's title
+            this.updateThemeTooltip(themeToggle, newTheme);
           }
         });
       }
@@ -125,29 +123,43 @@ export class HeaderManager {
       // Hide search functionality on Statistics page
       this.updateHeaderForPage();
     }
-    
+
     updateHeaderForPage() {
       const headerSearch = document.getElementById('headerSearch');
-      
+      const searchInput = headerSearch?.querySelector('#searchInput');
+      const searchButtons = headerSearch?.querySelectorAll('button');
+      const placeholderKey = 'header.search.placeholders.' + this.currentPage;
+
       if (this.currentPage === 'statistics' && headerSearch) {
         headerSearch.classList.add('disabled');
-        // Disable search functionality
-        const searchInput = headerSearch.querySelector('#searchInput');
-        const searchButtons = headerSearch.querySelectorAll('button');
         if (searchInput) {
           searchInput.disabled = true;
-          searchInput.placeholder = 'Search not available on statistics page';
+          // Use i18nHelpers to update placeholder
+          updateElementAttribute(searchInput, 'placeholder', 'header.search.notAvailable', {}, 'Search not available on statistics page');
         }
-        searchButtons.forEach(btn => btn.disabled = true);
+        searchButtons?.forEach(btn => btn.disabled = true);
       } else if (headerSearch) {
         headerSearch.classList.remove('disabled');
-        // Re-enable search functionality
-        const searchInput = headerSearch.querySelector('#searchInput');
-        const searchButtons = headerSearch.querySelectorAll('button');
         if (searchInput) {
           searchInput.disabled = false;
+          // Use i18nHelpers to update placeholder
+          updateElementAttribute(searchInput, 'placeholder', placeholderKey, {}, '');
         }
-        searchButtons.forEach(btn => btn.disabled = false);
+        searchButtons?.forEach(btn => btn.disabled = false);
       }
     }
+
+    updateThemeTooltip(themeToggle, currentTheme) {
+      if (!themeToggle) return;
+      let key;
+      if (currentTheme === 'light') {
+        key = 'header.theme.switchToDark';
+      } else if (currentTheme === 'dark') {
+        key = 'header.theme.switchToLight';
+      } else {
+        key = 'header.theme.toggle';
+      }
+      // Use i18nHelpers to update title
+      updateElementAttribute(themeToggle, 'title', key, {}, '');
+    }
 }

static/js/components/ModelDuplicatesManager.js

@@ -122,7 +122,7 @@ export class ModelDuplicatesManager {
             this.updateDuplicatesBadge(this.duplicateGroups.length);
             
             if (this.duplicateGroups.length === 0) {
-                showToast('No duplicate models found', 'info');
+                showToast('toast.duplicates.noDuplicatesFound', { type: this.modelType }, 'info');
                 return false;
             }
             
@@ -130,7 +130,7 @@ export class ModelDuplicatesManager {
             return true;
         } catch (error) {
             console.error('Error finding duplicates:', error);
-            showToast('Failed to find duplicates: ' + error.message, 'error');
+            showToast('toast.duplicates.findFailed', { message: error.message }, 'error');
             return false;
         }
     }
@@ -594,7 +594,7 @@ export class ModelDuplicatesManager {
     
     async deleteSelectedDuplicates() {
         if (this.selectedForDeletion.size === 0) {
-            showToast('No models selected for deletion', 'info');
+            showToast('toast.duplicates.noItemsSelected', { type: this.modelType }, 'info');
             return;
         }
         
@@ -609,7 +609,7 @@ export class ModelDuplicatesManager {
             modalManager.showModal('modelDuplicateDeleteModal');
         } catch (error) {
             console.error('Error preparing delete:', error);
-            showToast('Error: ' + error.message, 'error');
+            showToast('toast.duplicates.deleteError', { message: error.message }, 'error');
         }
     }
     
@@ -640,7 +640,7 @@ export class ModelDuplicatesManager {
                 throw new Error(data.error || 'Unknown error deleting models');
             }
             
-            showToast(`Successfully deleted ${data.total_deleted} models`, 'success');
+            showToast('toast.duplicates.deleteSuccess', { count: data.total_deleted, type: this.modelType }, 'success');
             
             // If models were successfully deleted
             if (data.total_deleted > 0) {
@@ -678,7 +678,7 @@ export class ModelDuplicatesManager {
             
         } catch (error) {
             console.error('Error deleting models:', error);
-            showToast('Failed to delete models: ' + error.message, 'error');
+            showToast('toast.duplicates.deleteFailed', { type: this.modelType, message: error.message }, 'error');
         }
     }
     
@@ -745,7 +745,7 @@ export class ModelDuplicatesManager {
             
             // Check if already verified
             if (this.verifiedGroups.has(groupHash)) {
-                showToast('This group has already been verified', 'info');
+                showToast('toast.models.verificationAlreadyDone', {}, 'info');
                 return;
             }
             
@@ -793,14 +793,14 @@ export class ModelDuplicatesManager {
             
             // Show appropriate toast message
             if (mismatchedFiles.length > 0) {
-                showToast(`Verification complete. ${mismatchedFiles.length} file(s) have different actual hashes.`, 'warning');
+                showToast('toast.models.verificationCompleteMismatch', { count: mismatchedFiles.length }, 'warning');
             } else {
-                showToast('Verification complete. All files are confirmed duplicates.', 'success');
+                showToast('toast.models.verificationCompleteSuccess', {}, 'success');
             }
             
         } catch (error) {
             console.error('Error verifying hashes:', error);
-            showToast('Failed to verify hashes: ' + error.message, 'error');
+            showToast('toast.models.verificationFailed', { message: error.message }, 'error');
         } finally {
             // Hide loading state
             state.loadingManager.hide();

static/js/components/RecipeCard.js

@@ -199,7 +199,7 @@ class RecipeCard {
             // Get recipe ID
             const recipeId = this.recipe.id;
             if (!recipeId) {
-                showToast('Cannot send recipe: Missing recipe ID', 'error');
+                showToast('toast.recipes.cannotSend', {}, 'error');
                 return;
             }
 
@@ -214,11 +214,11 @@ class RecipeCard {
                 })
                 .catch(err => {
                     console.error('Failed to send recipe to workflow: ', err);
-                    showToast('Failed to send recipe to workflow', 'error');
+                    showToast('toast.recipes.sendFailed', {}, 'error');
                 });
         } catch (error) {
             console.error('Error sending recipe to workflow:', error);
-            showToast('Error sending recipe to workflow', 'error');
+            showToast('toast.recipes.sendError', {}, 'error');
         }
     }
     
@@ -228,7 +228,7 @@ class RecipeCard {
             const recipeId = this.recipe.id;
             const filePath = this.recipe.file_path;
             if (!recipeId) {
-                showToast('Cannot delete recipe: Missing recipe ID', 'error');
+                showToast('toast.recipes.cannotDelete', {}, 'error');
                 return;
             }
             
@@ -278,7 +278,7 @@ class RecipeCard {
             
         } catch (error) {
             console.error('Error showing delete confirmation:', error);
-            showToast('Error showing delete confirmation', 'error');
+            showToast('toast.recipes.deleteConfirmationError', {}, 'error');
         }
     }
 
@@ -287,7 +287,7 @@ class RecipeCard {
         const recipeId = deleteModal.dataset.recipeId;
         
         if (!recipeId) {
-            showToast('Cannot delete recipe: Missing recipe ID', 'error');
+            showToast('toast.recipes.cannotDelete', {}, 'error');
             modalManager.closeModal('deleteModal');
             return;
         }
@@ -312,7 +312,7 @@ class RecipeCard {
             return response.json();
         })
         .then(data => {
-            showToast('Recipe deleted successfully', 'success');
+            showToast('toast.recipes.deletedSuccessfully', {}, 'success');
             
             state.virtualScroller.removeItemByFilePath(deleteModal.dataset.filePath);
             
@@ -320,7 +320,7 @@ class RecipeCard {
         })
         .catch(error => {
             console.error('Error deleting recipe:', error);
-            showToast('Error deleting recipe: ' + error.message, 'error');
+            showToast('toast.recipes.deleteFailed', { message: error.message }, 'error');
             
             // Reset button state
             deleteBtn.textContent = originalText;
@@ -333,12 +333,12 @@ class RecipeCard {
             // Get recipe ID
             const recipeId = this.recipe.id;
             if (!recipeId) {
-                showToast('Cannot share recipe: Missing recipe ID', 'error');
+                showToast('toast.recipes.cannotShare', {}, 'error');
                 return;
             }
             
             // Show loading toast
-            showToast('Preparing recipe for sharing...', 'info');
+            showToast('toast.recipes.preparingForSharing', {}, 'info');
             
             // Call the API to process the image with metadata
             fetch(`/api/recipe/${recipeId}/share`)
@@ -363,15 +363,15 @@ class RecipeCard {
                     downloadLink.click();
                     document.body.removeChild(downloadLink);
                     
-                    showToast('Recipe download started', 'success');
+                    showToast('toast.recipes.downloadStarted', {}, 'success');
                 })
                 .catch(error => {
                     console.error('Error sharing recipe:', error);
-                    showToast('Error sharing recipe: ' + error.message, 'error');
+                    showToast('toast.recipes.shareError', { message: error.message }, 'error');
                 });
         } catch (error) {
             console.error('Error sharing recipe:', error);
-            showToast('Error preparing recipe for sharing', 'error');
+            showToast('toast.recipes.sharePreparationError', {}, 'error');
         }
     }
 }

static/js/components/RecipeModal.js

@@ -526,7 +526,7 @@ class RecipeModal {
                 updateRecipeMetadata(this.filePath, { title: newTitle })
                     .then(data => {
                         // Show success toast
-                        showToast('Recipe name updated successfully', 'success');
+                        showToast('toast.recipes.nameUpdated', {}, 'success');
                         
                         // Update the current recipe object
                         this.currentRecipe.title = newTitle;
@@ -596,7 +596,7 @@ class RecipeModal {
                 updateRecipeMetadata(this.filePath, { tags: newTags })
                     .then(data => {
                         // Show success toast
-                        showToast('Recipe tags updated successfully', 'success');
+                        showToast('toast.recipes.tagsUpdated', {}, 'success');
                         
                         // Update the current recipe object
                         this.currentRecipe.tags = newTags;
@@ -717,7 +717,7 @@ class RecipeModal {
                 updateRecipeMetadata(this.filePath, { source_path: newSourceUrl })
                     .then(data => {
                         // Show success toast
-                        showToast('Source URL updated successfully', 'success');
+                        showToast('toast.recipes.sourceUrlUpdated', {}, 'success');
                         
                         // Update source URL in the UI
                         sourceUrlText.textContent = newSourceUrl || 'No source URL';
@@ -778,7 +778,7 @@ class RecipeModal {
     // Fetch recipe syntax from backend and copy to clipboard
     async fetchAndCopyRecipeSyntax() {
         if (!this.recipeId) {
-            showToast('No recipe ID available', 'error');
+            showToast('toast.recipes.noRecipeId', {}, 'error');
             return;
         }
         
@@ -800,7 +800,7 @@ class RecipeModal {
             }
         } catch (error) {
             console.error('Error fetching recipe syntax:', error);
-            showToast(`Error copying recipe syntax: ${error.message}`, 'error');
+            showToast('toast.recipes.copyFailed', { message: error.message }, 'error');
         }
     }
     
@@ -817,7 +817,7 @@ class RecipeModal {
         console.log("missingLoras", missingLoras);
         
         if (missingLoras.length === 0) {
-            showToast('No missing LoRAs to download', 'info');
+            showToast('toast.recipes.noMissingLoras', {}, 'info');
             return;
         }
 
@@ -856,7 +856,7 @@ class RecipeModal {
             const validLoras = lorasWithVersionInfo.filter(lora => lora !== null);
             
             if (validLoras.length === 0) {
-                showToast('Failed to get information for missing LoRAs', 'error');
+                showToast('toast.recipes.missingLorasInfoFailed', {}, 'error');
                 return;
             }
             
@@ -902,7 +902,7 @@ class RecipeModal {
             window.importManager.downloadMissingLoras(recipeData, this.currentRecipe.id);
         } catch (error) {
             console.error("Error downloading missing LoRAs:", error);
-            showToast('Error preparing LoRAs for download', 'error');
+            showToast('toast.recipes.preparingForDownloadFailed', {}, 'error');
         } finally {
             state.loadingManager.hide();
         }
@@ -988,7 +988,7 @@ class RecipeModal {
     
     async reconnectLora(loraIndex, inputValue) {
         if (!inputValue || !inputValue.trim()) {
-            showToast('Please enter a LoRA name or syntax', 'error');
+            showToast('toast.recipes.enterLoraName', {}, 'error');
             return;
         }
         
@@ -1026,7 +1026,7 @@ class RecipeModal {
                 this.currentRecipe.loras[loraIndex] = result.updated_lora;
                 
                 // Show success message
-                showToast('LoRA reconnected successfully', 'success');
+                showToast('toast.recipes.reconnectedSuccessfully', {}, 'success');
                 
                 // Refresh modal to show updated content
                 setTimeout(() => {
@@ -1037,11 +1037,11 @@ class RecipeModal {
                     loras: this.currentRecipe.loras
                 });
             } else {
-                showToast(`Error: ${result.error}`, 'error');
+                showToast('toast.recipes.reconnectFailed', { message: result.error }, 'error');
             }
         } catch (error) {
             console.error('Error reconnecting LoRA:', error);
-            showToast(`Error reconnecting LoRA: ${error.message}`, 'error');
+            showToast('toast.recipes.reconnectFailed', { message: error.message }, 'error');
         } finally {
             state.loadingManager.hide();
         }

static/js/components/controls/CheckpointsControls.js

@@ -47,7 +47,7 @@ export class CheckpointsControls extends PageControls {
             // No clearCustomFilter implementation is needed for checkpoints
             // as custom filters are currently only used for LoRAs
             clearCustomFilter: async () => {
-                showToast('No custom filter to clear', 'info');
+                showToast('toast.filters.noCustomFilterToClear', {}, 'info');
             }
         };
         

static/js/components/controls/EmbeddingsControls.js

@@ -47,7 +47,7 @@ export class EmbeddingsControls extends PageControls {
             // No clearCustomFilter implementation is needed for embeddings
             // as custom filters are currently only used for LoRAs
             clearCustomFilter: async () => {
-                showToast('No custom filter to clear', 'info');
+                showToast('toast.filters.noCustomFilterToClear', {}, 'info');
             }
         };
         

static/js/components/controls/PageControls.js

@@ -2,7 +2,6 @@
 import { getCurrentPageState, setCurrentPageType } from '../../state/index.js';
 import { getStorageItem, setStorageItem, getSessionItem, setSessionItem } from '../../utils/storageHelpers.js';
 import { showToast } from '../../utils/uiHelpers.js';
-import { SidebarManager } from '../SidebarManager.js';
 import { sidebarManager } from '../SidebarManager.js';
 
 /**
@@ -294,7 +293,7 @@ export class PageControls {
             }
         } catch (error) {
             console.error(`Error reloading ${this.pageType}:`, error);
-            showToast(`Failed to reload ${this.pageType}: ${error.message}`, 'error');
+            showToast('toast.controls.reloadFailed', { pageType: this.pageType, message: error.message }, 'error');
         }
     }
     
@@ -317,7 +316,7 @@ export class PageControls {
             }
         } catch (error) {
             console.error(`Error ${fullRebuild ? 'rebuilding' : 'refreshing'} ${this.pageType}:`, error);
-            showToast(`Failed to ${fullRebuild ? 'rebuild' : 'refresh'} ${this.pageType}: ${error.message}`, 'error');
+            showToast('toast.controls.refreshFailed', { action: fullRebuild ? 'rebuild' : 'refresh', pageType: this.pageType, message: error.message }, 'error');
         }
 
         if (window.modelDuplicatesManager) {
@@ -339,7 +338,7 @@ export class PageControls {
             await this.api.fetchFromCivitai();
         } catch (error) {
             console.error('Error fetching metadata:', error);
-            showToast('Failed to fetch metadata: ' + error.message, 'error');
+            showToast('toast.controls.fetchMetadataFailed', { message: error.message }, 'error');
         }
     }
     
@@ -375,7 +374,7 @@ export class PageControls {
             await this.api.clearCustomFilter();
         } catch (error) {
             console.error('Error clearing custom filter:', error);
-            showToast('Failed to clear custom filter: ' + error.message, 'error');
+            showToast('toast.controls.clearFilterFailed', { message: error.message }, 'error');
         }
     }
     

static/js/components/shared/ModelCard.js

@@ -8,6 +8,7 @@ import { NSFW_LEVELS } from '../../utils/constants.js';
 import { MODEL_TYPES } from '../../api/apiConfig.js';
 import { getModelApiClient } from '../../api/modelApiFactory.js';
 import { showDeleteModal } from '../../utils/modalUtils.js';
+import { translate } from '../../utils/i18nHelpers.js';
 
 // Add global event delegation handlers
 export function setupModelCardEventDelegation(modelType) {
@@ -142,13 +143,13 @@ async function toggleFavorite(card) {
         });
 
         if (newFavoriteState) {
-            showToast('Added to favorites', 'success');
+            showToast('modelCard.favorites.added', {}, 'success');
         } else {
-            showToast('Removed from favorites', 'success');
+            showToast('modelCard.favorites.removed', {}, 'success');
         }
     } catch (error) {
         console.error('Failed to update favorite status:', error);
-        showToast('Failed to update favorite status', 'error');
+        showToast('modelCard.favorites.updateFailed', {}, 'error');
     }
 }
 
@@ -160,7 +161,7 @@ function handleSendToWorkflow(card, replaceMode, modelType) {
         sendLoraToWorkflow(loraSyntax, replaceMode, 'lora');
     } else {
         // Checkpoint send functionality - to be implemented
-        showToast('Send checkpoint to workflow - feature to be implemented', 'info');
+        showToast('modelCard.sendToWorkflow.checkpointNotImplemented', {}, 'info');
     }
 }
 
@@ -170,7 +171,8 @@ function handleCopyAction(card, modelType) {
     } else if (modelType === MODEL_TYPES.CHECKPOINT) {
         // Checkpoint copy functionality - copy checkpoint name
         const checkpointName = card.dataset.file_name;
-        copyToClipboard(checkpointName, 'Checkpoint name copied');
+        const message = translate('modelCard.actions.checkpointNameCopied', {}, 'Checkpoint name copied');
+        copyToClipboard(checkpointName, message);
     } else if (modelType === MODEL_TYPES.EMBEDDING) {
         const embeddingName = card.dataset.file_name;
         copyToClipboard(embeddingName, 'Embedding name copied');
@@ -195,7 +197,7 @@ async function handleExampleImagesAccess(card, modelType) {
         }
     } catch (error) {
         console.error('Error checking for example images:', error);
-        showToast('Error checking for example images', 'error');
+        showToast('modelCard.exampleImages.checkError', {}, 'error');
     }
 }
 
@@ -277,7 +279,7 @@ function showExampleAccessModal(card, modelType) {
                 // Get the model hash
                 const modelHash = card.dataset.sha256;
                 if (!modelHash) {
-                    showToast('Missing model hash information.', 'error');
+                    showToast('modelCard.exampleImages.missingHash', {}, 'error');
                     return;
                 }
                 
@@ -298,7 +300,8 @@ function showExampleAccessModal(card, modelType) {
             };
         } else {
             downloadBtn.classList.add('disabled');
-            downloadBtn.setAttribute('title', 'No remote example images available for this model on Civitai');
+            const noRemoteImagesTitle = translate('modelCard.exampleImages.noRemoteImagesAvailable', {}, 'No remote example images available for this model on Civitai');
+            downloadBtn.setAttribute('title', noRemoteImagesTitle);
             downloadBtn.onclick = null;
         }
     }
@@ -429,14 +432,14 @@ export function createModelCard(model, modelType) {
     const previewUrl = model.preview_url || '/loras_static/images/no-preview.png';
     const versionedPreviewUrl = version ? `${previewUrl}?t=${version}` : previewUrl;
 
-    // Determine NSFW warning text based on level
-    let nsfwText = "Mature Content";
+    // Determine NSFW warning text based on level with i18n support
+    let nsfwText = translate('modelCard.nsfw.matureContent', {}, 'Mature Content');
     if (nsfwLevel >= NSFW_LEVELS.XXX) {
-        nsfwText = "XXX-rated Content";
+        nsfwText = translate('modelCard.nsfw.xxxRated', {}, 'XXX-rated Content');
     } else if (nsfwLevel >= NSFW_LEVELS.X) {
-        nsfwText = "X-rated Content";
+        nsfwText = translate('modelCard.nsfw.xRated', {}, 'X-rated Content');
     } else if (nsfwLevel >= NSFW_LEVELS.R) {
-        nsfwText = "R-rated Content";
+        nsfwText = translate('modelCard.nsfw.rRated', {}, 'R-rated Content');
     }
 
     // Check if autoplayOnHover is enabled for video previews
@@ -447,22 +450,36 @@ export function createModelCard(model, modelType) {
     // Get favorite status from model data
     const isFavorite = model.favorite === true;
 
-    // Generate action icons based on model type
+    // Generate action icons based on model type with i18n support
+    const favoriteTitle = isFavorite ? 
+        translate('modelCard.actions.removeFromFavorites', {}, 'Remove from favorites') :
+        translate('modelCard.actions.addToFavorites', {}, 'Add to favorites');
+    const globeTitle = model.from_civitai ? 
+        translate('modelCard.actions.viewOnCivitai', {}, 'View on Civitai') :
+        translate('modelCard.actions.notAvailableFromCivitai', {}, 'Not available from Civitai');
+    const sendTitle = translate('modelCard.actions.sendToWorkflow', {}, 'Send to ComfyUI (Click: Append, Shift+Click: Replace)');
+    const copyTitle = translate('modelCard.actions.copyLoRASyntax', {}, 'Copy LoRA Syntax');
+
     const actionIcons = `
         <i class="${isFavorite ? 'fas fa-star favorite-active' : 'far fa-star'}" 
-           title="${isFavorite ? 'Remove from favorites' : 'Add to favorites'}">
+           title="${favoriteTitle}">
         </i>
         <i class="fas fa-globe" 
-           title="${model.from_civitai ? 'View on Civitai' : 'Not available from Civitai'}"
+           title="${globeTitle}"
            ${!model.from_civitai ? 'style="opacity: 0.5; cursor: not-allowed"' : ''}>
         </i>
         <i class="fas fa-paper-plane" 
-           title="Send to ComfyUI (Click: Append, Shift+Click: Replace)">
+           title="${sendTitle}">
         </i>
         <i class="fas fa-copy" 
-           title="Copy LoRA Syntax">
+           title="${copyTitle}">
         </i>`;
 
+    // Generate UI text with i18n support
+    const toggleBlurTitle = translate('modelCard.actions.toggleBlur', {}, 'Toggle blur');
+    const showButtonText = translate('modelCard.actions.show', {}, 'Show');
+    const openExampleImagesTitle = translate('modelCard.actions.openExampleImages', {}, 'Open Example Images Folder');
+
     card.innerHTML = `
         <div class="card-preview ${shouldBlur ? 'blurred' : ''}">
             ${isVideo ? 
@@ -473,7 +490,7 @@ export function createModelCard(model, modelType) {
             }
             <div class="card-header">
                 ${shouldBlur ? 
-                  `<button class="toggle-blur-btn" title="Toggle blur">
+                  `<button class="toggle-blur-btn" title="${toggleBlurTitle}">
                       <i class="fas fa-eye"></i>
                   </button>` : ''}
                 <span class="base-model-label ${shouldBlur ? 'with-toggle' : ''}" title="${model.base_model}">
@@ -487,7 +504,7 @@ export function createModelCard(model, modelType) {
                 <div class="nsfw-overlay">
                     <div class="nsfw-warning">
                         <p>${nsfwText}</p>
-                        <button class="show-content-btn">Show</button>
+                        <button class="show-content-btn">${showButtonText}</button>
                     </div>
                 </div>
             ` : ''}
@@ -498,7 +515,7 @@ export function createModelCard(model, modelType) {
                 </div>
                 <div class="card-actions">
                     <i class="fas fa-folder-open" 
-                       title="Open Example Images Folder">
+                       title="${openExampleImagesTitle}">
                     </i>
                 </div>
             </div>

static/js/components/shared/ModelDescription.js

@@ -1,4 +1,5 @@
 import { showToast } from '../../utils/uiHelpers.js';
+import { translate } from '../../utils/i18nHelpers.js';
 
 /**
  * ModelDescription.js
@@ -62,15 +63,17 @@ async function loadModelDescription() {
         const description = await getModelApiClient().fetchModelDescription(filePath);
         
         // Update content
-        descriptionContent.innerHTML = description || '<div class="no-description">No model description available</div>';
+        const noDescriptionText = translate('modals.model.description.noDescription', {}, 'No model description available');
+        descriptionContent.innerHTML = description || `<div class="no-description">${noDescriptionText}</div>`;
         descriptionContent.dataset.loaded = 'true';
         
         // Set up editing functionality
-        setupModelDescriptionEditing(filePath);
+        await setupModelDescriptionEditing(filePath);
         
     } catch (error) {
         console.error('Error loading model description:', error);
-        descriptionContent.innerHTML = '<div class="no-description">Failed to load model description</div>';
+        const failedText = translate('modals.model.description.failedToLoad', {}, 'Failed to load model description');
+        descriptionContent.innerHTML = `<div class="no-description">${failedText}</div>`;
     } finally {
         // Hide loading state
         descriptionLoading?.classList.add('hidden');
@@ -82,7 +85,7 @@ async function loadModelDescription() {
  * Set up model description editing functionality
  * @param {string} filePath - File path
  */
-export function setupModelDescriptionEditing(filePath) {
+export async function setupModelDescriptionEditing(filePath) {
     const descContent = document.querySelector('.model-description-content');
     const descContainer = document.querySelector('.model-description-container');
     if (!descContent || !descContainer) return;
@@ -92,7 +95,9 @@ export function setupModelDescriptionEditing(filePath) {
     if (!editBtn) {
         editBtn = document.createElement('button');
         editBtn.className = 'edit-model-description-btn';
-        editBtn.title = 'Edit model description';
+        // Set title using i18n
+        const editTitle = translate('modals.model.description.editTitle', {}, 'Edit model description');
+        editBtn.title = editTitle;
         editBtn.innerHTML = '<i class="fas fa-pencil-alt"></i>';
         descContainer.insertBefore(editBtn, descContent);
     }
@@ -149,7 +154,7 @@ export function setupModelDescriptionEditing(filePath) {
         }
         if (!newValue) {
             this.innerHTML = originalValue;
-            showToast('Description cannot be empty', 'error');
+            showToast('modals.model.description.validation.cannotBeEmpty', {}, 'error');
             exitEditMode();
             return;
         }
@@ -157,10 +162,10 @@ export function setupModelDescriptionEditing(filePath) {
             // Save to backend
             const { getModelApiClient } = await import('../../api/modelApiFactory.js');
             await getModelApiClient().saveModelMetadata(filePath, { modelDescription: newValue });
-            showToast('Model description updated', 'success');
+            showToast('modals.model.description.messages.updated', {}, 'success');
         } catch (err) {
             this.innerHTML = originalValue;
-            showToast('Failed to update model description', 'error');
+            showToast('modals.model.description.messages.updateFailed', {}, 'error');
         } finally {
             exitEditMode();
         }

static/js/components/shared/ModelMetadata.js

@@ -5,6 +5,7 @@
 import { showToast } from '../../utils/uiHelpers.js';
 import { BASE_MODELS } from '../../utils/constants.js';
 import { getModelApiClient } from '../../api/modelApiFactory.js';
+import { translate } from '../../utils/i18nHelpers.js';
 
 /**
  * Set up model name editing functionality
@@ -82,7 +83,7 @@ export function setupModelNameEditing(filePath) {
             sel.removeAllRanges();
             sel.addRange(range);
             
-            showToast('Model name is limited to 100 characters', 'warning');
+            showToast('toast.models.nameTooLong', {}, 'warning');
         }
     });
     
@@ -97,7 +98,7 @@ export function setupModelNameEditing(filePath) {
         if (!newModelName) {
             // Restore original value if empty
             this.textContent = originalValue;
-            showToast('Model name cannot be empty', 'error');
+            showToast('toast.models.nameCannotBeEmpty', {}, 'error');
             exitEditMode();
             return;
         }
@@ -114,11 +115,11 @@ export function setupModelNameEditing(filePath) {
             
             await getModelApiClient().saveModelMetadata(filePath, { model_name: newModelName });
             
-            showToast('Model name updated successfully', 'success');
+            showToast('toast.models.nameUpdatedSuccessfully', {}, 'success');
         } catch (error) {
             console.error('Error updating model name:', error);
             this.textContent = originalValue; // Restore original model name
-            showToast('Failed to update model name', 'error');
+            showToast('toast.models.nameUpdateFailed', {}, 'error');
         } finally {
             exitEditMode();
         }
@@ -300,9 +301,9 @@ async function saveBaseModel(filePath, originalValue) {
     try {
         await getModelApiClient().saveModelMetadata(filePath, { base_model: newBaseModel });
         
-        showToast('Base model updated successfully', 'success');
+        showToast('toast.models.baseModelUpdated', {}, 'success');
     } catch (error) {
-        showToast('Failed to update base model', 'error');
+        showToast('toast.models.baseModelUpdateFailed', {}, 'error');
     }
 }
 
@@ -388,7 +389,7 @@ export function setupFileNameEditing(filePath) {
                 sel.addRange(range);
             }
             
-            showToast('Invalid characters removed from filename', 'warning');
+            showToast('toast.models.invalidCharactersRemoved', {}, 'warning');
         }
     });
     
@@ -403,7 +404,7 @@ export function setupFileNameEditing(filePath) {
         if (!newFileName) {
             // Restore original value if empty
             this.textContent = originalValue;
-            showToast('File name cannot be empty', 'error');
+            showToast('toast.models.filenameCannotBeEmpty', {}, 'error');
             exitEditMode();
             return;
         }
@@ -422,7 +423,7 @@ export function setupFileNameEditing(filePath) {
         } catch (error) {
             console.error('Error renaming file:', error);
             this.textContent = originalValue; // Restore original file name
-            showToast(`Failed to rename file: ${error.message}`, 'error');
+            showToast('toast.models.renameFailed', { message: error.message }, 'error');
         } finally {
             exitEditMode();
         }

static/js/components/shared/ModelModal.js

@@ -18,6 +18,7 @@ import { renderCompactTags, setupTagTooltip, formatFileSize } from './utils.js';
 import { renderTriggerWords, setupTriggerWordsEditMode } from './TriggerWords.js';
 import { parsePresets, renderPresetTags } from './PresetTags.js';
 import { loadRecipesForLora } from './RecipeTab.js';
+import { translate } from '../../utils/i18nHelpers.js';
 
 /**
  * Display the model modal with the given model data
@@ -61,24 +62,33 @@ export async function showModelModal(model, modelType) {
     }
 
     // Generate tabs based on model type
+    const examplesText = translate('modals.model.tabs.examples', {}, 'Examples');
+    const descriptionText = translate('modals.model.tabs.description', {}, 'Model Description');
+    const recipesText = translate('modals.model.tabs.recipes', {}, 'Recipes');
+    
     const tabsContent = modelType === 'loras' ? 
-        `<button class="tab-btn active" data-tab="showcase">Examples</button>
-            <button class="tab-btn" data-tab="description">Model Description</button>
-            <button class="tab-btn" data-tab="recipes">Recipes</button>` :
-        `<button class="tab-btn active" data-tab="showcase">Examples</button>
-            <button class="tab-btn" data-tab="description">Model Description</button>`;
+        `<button class="tab-btn active" data-tab="showcase">${examplesText}</button>
+            <button class="tab-btn" data-tab="description">${descriptionText}</button>
+            <button class="tab-btn" data-tab="recipes">${recipesText}</button>` :
+        `<button class="tab-btn active" data-tab="showcase">${examplesText}</button>
+            <button class="tab-btn" data-tab="description">${descriptionText}</button>`;
+    
+    const loadingExampleImagesText = translate('modals.model.loading.exampleImages', {}, 'Loading example images...');
+    const loadingDescriptionText = translate('modals.model.loading.description', {}, 'Loading model description...');
+    const loadingRecipesText = translate('modals.model.loading.recipes', {}, 'Loading recipes...');
+    const loadingExamplesText = translate('modals.model.loading.examples', {}, 'Loading examples...');
     
     const tabPanesContent = modelType === 'loras' ? 
         `<div id="showcase-tab" class="tab-pane active">
             <div class="example-images-loading">
-                <i class="fas fa-spinner fa-spin"></i> Loading example images...
+                <i class="fas fa-spinner fa-spin"></i> ${loadingExampleImagesText}
             </div>
         </div>
         
         <div id="description-tab" class="tab-pane">
             <div class="model-description-container">
                 <div class="model-description-loading">
-                    <i class="fas fa-spinner fa-spin"></i> Loading model description...
+                    <i class="fas fa-spinner fa-spin"></i> ${loadingDescriptionText}
                 </div>
                 <div class="model-description-content hidden">
                 </div>
@@ -87,19 +97,19 @@ export async function showModelModal(model, modelType) {
         
         <div id="recipes-tab" class="tab-pane">
             <div class="recipes-loading">
-                <i class="fas fa-spinner fa-spin"></i> Loading recipes...
+                <i class="fas fa-spinner fa-spin"></i> ${loadingRecipesText}
             </div>
         </div>` :
         `<div id="showcase-tab" class="tab-pane active">
             <div class="recipes-loading">
-                <i class="fas fa-spinner fa-spin"></i> Loading examples...
+                <i class="fas fa-spinner fa-spin"></i> ${loadingExamplesText}
             </div>
         </div>
         
         <div id="description-tab" class="tab-pane">
             <div class="model-description-container">
                 <div class="model-description-loading">
-                    <i class="fas fa-spinner fa-spin"></i> Loading model description...
+                    <i class="fas fa-spinner fa-spin"></i> ${loadingDescriptionText}
                 </div>
                 <div class="model-description-content hidden">
                 </div>
@@ -112,19 +122,19 @@ export async function showModelModal(model, modelType) {
             <header class="modal-header">
                 <div class="model-name-header">
                     <h2 class="model-name-content">${modalTitle}</h2>
-                    <button class="edit-model-name-btn" title="Edit model name">
+                    <button class="edit-model-name-btn" title="${translate('modals.model.actions.editModelName', {}, 'Edit model name')}">
                         <i class="fas fa-pencil-alt"></i>
                     </button>
                 </div>
 
                 <div class="creator-actions">
                     ${modelWithFullData.from_civitai ? `
-                    <div class="civitai-view" title="View on Civitai" data-action="view-civitai" data-filepath="${modelWithFullData.file_path}">
-                        <i class="fas fa-globe"></i> View on Civitai
+                    <div class="civitai-view" title="${translate('modals.model.actions.viewOnCivitai', {}, 'View on Civitai')}" data-action="view-civitai" data-filepath="${modelWithFullData.file_path}">
+                        <i class="fas fa-globe"></i> ${translate('modals.model.actions.viewOnCivitaiText', {}, 'View on Civitai')}
                     </div>` : ''}
 
                     ${modelWithFullData.civitai?.creator ? `
-                    <div class="creator-info" data-username="${modelWithFullData.civitai.creator.username}" data-action="view-creator" title="View Creator Profile">
+                    <div class="creator-info" data-username="${modelWithFullData.civitai.creator.username}" data-action="view-creator" title="${translate('modals.model.actions.viewCreatorProfile', {}, 'View Creator Profile')}">
                         ${modelWithFullData.civitai.creator.image ? 
                             `<div class="creator-avatar">
                                 <img src="${modelWithFullData.civitai.creator.image}" alt="${modelWithFullData.civitai.creator.username}" onerror="this.onerror=null; this.src='static/icons/user-placeholder.png';">
@@ -144,48 +154,48 @@ export async function showModelModal(model, modelType) {
                 <div class="info-section">
                     <div class="info-grid">
                         <div class="info-item">
-                            <label>Version</label>
+                            <label>${translate('modals.model.metadata.version', {}, 'Version')}</label>
                             <span>${modelWithFullData.civitai?.name || 'N/A'}</span>
                         </div>
                         <div class="info-item">
-                            <label>File Name</label>
+                            <label>${translate('modals.model.metadata.fileName', {}, 'File Name')}</label>
                             <div class="file-name-wrapper">
                                 <span id="file-name" class="file-name-content">${modelWithFullData.file_name || 'N/A'}</span>
-                                <button class="edit-file-name-btn" title="Edit file name">
+                                <button class="edit-file-name-btn" title="${translate('modals.model.actions.editFileName', {}, 'Edit file name')}">
                                     <i class="fas fa-pencil-alt"></i>
                                 </button>
                             </div>
                         </div>
                         <div class="info-item location-size">
                             <div class="location-wrapper">
-                                <label>Location</label>
+                                <label>${translate('modals.model.metadata.location', {}, 'Location')}</label>
                                 <span class="file-path">${modelWithFullData.file_path.replace(/[^/]+$/, '') || 'N/A'}</span>
                             </div>
                         </div>
                         <div class="info-item base-size">
                             <div class="base-wrapper">
-                                <label>Base Model</label>
+                                <label>${translate('modals.model.metadata.baseModel', {}, 'Base Model')}</label>
                                 <div class="base-model-display">
-                                    <span class="base-model-content">${modelWithFullData.base_model || 'Unknown'}</span>
-                                    <button class="edit-base-model-btn" title="Edit base model">
+                                    <span class="base-model-content">${modelWithFullData.base_model || translate('modals.model.metadata.unknown', {}, 'Unknown')}</span>
+                                    <button class="edit-base-model-btn" title="${translate('modals.model.actions.editBaseModel', {}, 'Edit base model')}">
                                         <i class="fas fa-pencil-alt"></i>
                                     </button>
                                 </div>
                             </div>
                             <div class="size-wrapper">
-                                <label>Size</label>
+                                <label>${translate('modals.model.metadata.size', {}, 'Size')}</label>
                                 <span>${formatFileSize(modelWithFullData.file_size)}</span>
                             </div>
                         </div>
                         ${typeSpecificContent}
                         <div class="info-item notes">
-                            <label>Additional Notes <i class="fas fa-info-circle notes-hint" title="Press Enter to save, Shift+Enter for new line"></i></label>
+                            <label>${translate('modals.model.metadata.additionalNotes', {}, 'Additional Notes')} <i class="fas fa-info-circle notes-hint" title="${translate('modals.model.metadata.notesHint', {}, 'Press Enter to save, Shift+Enter for new line')}"></i></label>
                             <div class="editable-field">
-                                <div class="notes-content" contenteditable="true" spellcheck="false">${modelWithFullData.notes || 'Add your notes here...'}</div>
+                                <div class="notes-content" contenteditable="true" spellcheck="false">${modelWithFullData.notes || translate('modals.model.metadata.addNotesPlaceholder', {}, 'Add your notes here...')}</div>
                             </div>
                         </div>
                         <div class="info-item full-width">
-                            <label>About this version</label>
+                            <label>${translate('modals.model.metadata.aboutThisVersion', {}, 'About this version')}</label>
                             <div class="description-text">${modelWithFullData.civitai?.description || 'N/A'}</div>
                         </div>
                     </div>
@@ -249,18 +259,18 @@ export async function showModelModal(model, modelType) {
 function renderLoraSpecificContent(lora, escapedWords) {
     return `
         <div class="info-item usage-tips">
-            <label>Usage Tips</label>
+            <label>${translate('modals.model.metadata.usageTips', {}, 'Usage Tips')}</label>
             <div class="editable-field">
                 <div class="preset-controls">
                     <select id="preset-selector">
-                        <option value="">Add preset parameter...</option>
-                        <option value="strength_min">Strength Min</option>
-                        <option value="strength_max">Strength Max</option>
-                        <option value="strength">Strength</option>
-                        <option value="clip_skip">Clip Skip</option>
+                        <option value="">${translate('modals.model.usageTips.addPresetParameter', {}, 'Add preset parameter...')}</option>
+                        <option value="strength_min">${translate('modals.model.usageTips.strengthMin', {}, 'Strength Min')}</option>
+                        <option value="strength_max">${translate('modals.model.usageTips.strengthMax', {}, 'Strength Max')}</option>
+                        <option value="strength">${translate('modals.model.usageTips.strength', {}, 'Strength')}</option>
+                        <option value="clip_skip">${translate('modals.model.usageTips.clipSkip', {}, 'Clip Skip')}</option>
                     </select>
-                    <input type="number" id="preset-value" step="0.01" placeholder="Value" style="display:none;">
-                    <button class="add-preset-btn">Add</button>
+                    <input type="number" id="preset-value" step="0.01" placeholder="${translate('modals.model.usageTips.valuePlaceholder', {}, 'Value')}" style="display:none;">
+                    <button class="add-preset-btn">${translate('modals.model.usageTips.add', {}, 'Add')}</button>
                 </div>
                 <div class="preset-tags">
                     ${renderPresetTags(parsePresets(lora.usage_tips))}
@@ -428,9 +438,9 @@ async function saveNotes(filePath) {
     try {
         await getModelApiClient().saveModelMetadata(filePath, { notes: content });
 
-        showToast('Notes saved successfully', 'success');
+        showToast('modals.model.notes.saved', {}, 'success');
     } catch (error) {
-        showToast('Failed to save notes', 'error');
+        showToast('modals.model.notes.saveFailed', {}, 'error');
     }
 }
 

static/js/components/shared/ModelTags.js

@@ -4,6 +4,7 @@
  */
 import { showToast } from '../../utils/uiHelpers.js';
 import { getModelApiClient } from '../../api/modelApiFactory.js';
+import { translate } from '../../utils/i18nHelpers.js';
 
 // Preset tag suggestions
 const PRESET_TAGS = [
@@ -216,10 +217,10 @@ async function saveTags() {
         // Exit edit mode
         editBtn.click();
         
-        showToast('Tags updated successfully', 'success');
+        showToast('modelTags.messages.updated', {}, 'success');
     } catch (error) {
         console.error('Error saving tags:', error);
-        showToast('Failed to update tags', 'error');
+        showToast('modelTags.messages.updateFailed', {}, 'error');
     }
 }
 
@@ -361,21 +362,21 @@ function addNewTag(tag) {
     
     // Validation: Check length
     if (tag.length > 30) {
-        showToast('Tag should not exceed 30 characters', 'error');
+        showToast('modelTags.validation.maxLength', {}, 'error');
         return;
     }
     
     // Validation: Check total number
     const currentTags = tagsContainer.querySelectorAll('.metadata-item');
     if (currentTags.length >= 30) {
-        showToast('Maximum 30 tags allowed', 'error');
+        showToast('modelTags.validation.maxCount', {}, 'error');
         return;
     }
     
     // Validation: Check for duplicates
     const existingTags = Array.from(currentTags).map(tag => tag.dataset.tag);
     if (existingTags.includes(tag)) {
-        showToast('This tag already exists', 'error');
+        showToast('modelTags.validation.duplicate', {}, 'error');
         return;
     }
     

static/js/components/shared/RecipeTab.js

@@ -162,7 +162,7 @@ function getLoraStatusTitle(totalCount, missingCount) {
  */
 function copyRecipeSyntax(recipeId) {
     if (!recipeId) {
-        showToast('Cannot copy recipe syntax: Missing recipe ID', 'error');
+        showToast('toast.recipes.noRecipeId', {}, 'error');
         return;
     }
 
@@ -177,7 +177,7 @@ function copyRecipeSyntax(recipeId) {
         })
         .catch(err => {
             console.error('Failed to copy: ', err);
-            showToast('Failed to copy recipe syntax', 'error');
+            showToast('toast.recipes.copyFailed', { message: err.message }, 'error');
         });
 }
 

static/js/components/shared/TriggerWords.js

@@ -4,6 +4,7 @@
  * Moved to shared directory for consistency
  */
 import { showToast, copyToClipboard } from '../../utils/uiHelpers.js';
+import { translate } from '../../utils/i18nHelpers.js';
 import { getModelApiClient } from '../../api/modelApiFactory.js';
 
 /**
@@ -26,7 +27,7 @@ async function fetchTrainedWords(filePath) {
         }
     } catch (error) {
         console.error('Error fetching trained words:', error);
-        showToast('Could not load trained words', 'error');
+        showToast('toast.triggerWords.loadFailed', {}, 'error');
         return { trainedWords: [], classTokens: null };
     }
 }
@@ -48,9 +49,9 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
     
     // No suggestions case
     if ((!trainedWords || trainedWords.length === 0) && !classTokens) {
-        header.innerHTML = '<span>No suggestions available</span>';
+        header.innerHTML = `<span>${translate('modals.model.triggerWords.suggestions.noSuggestions')}</span>`;
         dropdown.appendChild(header);
-        dropdown.innerHTML += '<div class="no-suggestions">No trained words or class tokens found in this model. You can manually enter trigger words.</div>';
+        dropdown.innerHTML += `<div class="no-suggestions">${translate('modals.model.triggerWords.suggestions.noTrainedWords')}</div>`;
         return dropdown;
     }
     
@@ -65,8 +66,8 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
         const classTokensHeader = document.createElement('div');
         classTokensHeader.className = 'metadata-suggestions-header';
         classTokensHeader.innerHTML = `
-            <span>Class Token</span>
-            <small>Add to your prompt for best results</small>
+            <span>${translate('modals.model.triggerWords.suggestions.classToken')}</span>
+            <small>${translate('modals.model.triggerWords.suggestions.classTokenDescription')}</small>
         `;
         dropdown.appendChild(classTokensHeader);
         
@@ -77,13 +78,13 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
         // Create a special item for the class token
         const tokenItem = document.createElement('div');
         tokenItem.className = `metadata-suggestion-item class-token-item ${existingWords.includes(classTokens) ? 'already-added' : ''}`;
-        tokenItem.title = `Class token: ${classTokens}`;
+        tokenItem.title = `${translate('modals.model.triggerWords.suggestions.classToken')}: ${classTokens}`;
         tokenItem.innerHTML = `
             <span class="metadata-suggestion-text">${classTokens}</span>
             <div class="metadata-suggestion-meta">
-                <span class="token-badge">Class Token</span>
+                <span class="token-badge">${translate('modals.model.triggerWords.suggestions.classToken')}</span>
                 ${existingWords.includes(classTokens) ? 
-                    '<span class="added-indicator"><i class="fas fa-check"></i></span>' : ''}
+                    `<span class="added-indicator"><i class="fas fa-check"></i></span>` : ''}
             </div>
         `;
         
@@ -119,8 +120,8 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
     // Add trained words header if we have any
     if (trainedWords && trainedWords.length > 0) {
         header.innerHTML = `
-            <span>Word Suggestions</span>
-            <small>${trainedWords.length} words found</small>
+            <span>${translate('modals.model.triggerWords.suggestions.wordSuggestions')}</span>
+            <small>${translate('modals.model.triggerWords.suggestions.wordsFound', { count: trainedWords.length })}</small>
         `;
         dropdown.appendChild(header);
         
@@ -139,7 +140,7 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
                 <span class="metadata-suggestion-text">${word}</span>
                 <div class="metadata-suggestion-meta">
                     <span class="trained-word-freq">${frequency}</span>
-                    ${isAdded ? '<span class="added-indicator"><i class="fas fa-check"></i></span>' : ''}
+                    ${isAdded ? `<span class="added-indicator"><i class="fas fa-check"></i></span>` : ''}
                 </div>
             `;
             
@@ -166,7 +167,7 @@ function createSuggestionDropdown(trainedWords, classTokens, existingWords = [])
         dropdown.appendChild(container);
     } else if (!classTokens) {
         // If we have neither class tokens nor trained words
-        dropdown.innerHTML += '<div class="no-suggestions">No word suggestions found in this model. You can manually enter trigger words.</div>';
+        dropdown.innerHTML += `<div class="no-suggestions">${translate('modals.model.triggerWords.suggestions.noTrainedWords')}</div>`;
     }
     
     return dropdown;
@@ -182,22 +183,22 @@ export function renderTriggerWords(words, filePath) {
     if (!words.length) return `
         <div class="info-item full-width trigger-words">
             <div class="trigger-words-header">
-                <label>Trigger Words</label>
-                <button class="edit-trigger-words-btn metadata-edit-btn" data-file-path="${filePath}" title="Edit trigger words">
+                <label>${translate('modals.model.triggerWords.label')}</label>
+                <button class="edit-trigger-words-btn metadata-edit-btn" data-file-path="${filePath}" title="${translate('modals.model.triggerWords.edit')}">
                     <i class="fas fa-pencil-alt"></i>
                 </button>
             </div>
             <div class="trigger-words-content">
-                <span class="no-trigger-words">No trigger word needed</span>
+                <span class="no-trigger-words">${translate('modals.model.triggerWords.noTriggerWordsNeeded')}</span>
                 <div class="trigger-words-tags" style="display:none;"></div>
             </div>
             <div class="metadata-edit-controls" style="display:none;">
-                <button class="metadata-save-btn" title="Save changes">
-                    <i class="fas fa-save"></i> Save
+                <button class="metadata-save-btn" title="${translate('modals.model.triggerWords.save')}">
+                    <i class="fas fa-save"></i> ${translate('common.actions.save')}
                 </button>
             </div>
             <div class="metadata-add-form" style="display:none;">
-                <input type="text" class="metadata-input" placeholder="Type to add or click suggestions below">
+                <input type="text" class="metadata-input" placeholder="${translate('modals.model.triggerWords.addPlaceholder')}">
             </div>
         </div>
     `;
@@ -205,20 +206,20 @@ export function renderTriggerWords(words, filePath) {
     return `
         <div class="info-item full-width trigger-words">
             <div class="trigger-words-header">
-                <label>Trigger Words</label>
-                <button class="edit-trigger-words-btn metadata-edit-btn" data-file-path="${filePath}" title="Edit trigger words">
+                <label>${translate('modals.model.triggerWords.label')}</label>
+                <button class="edit-trigger-words-btn metadata-edit-btn" data-file-path="${filePath}" title="${translate('modals.model.triggerWords.edit')}">
                     <i class="fas fa-pencil-alt"></i>
                 </button>
             </div>
             <div class="trigger-words-content">
                 <div class="trigger-words-tags">
                     ${words.map(word => `
-                        <div class="trigger-word-tag" data-word="${word}" onclick="copyTriggerWord('${word}')">
+                        <div class="trigger-word-tag" data-word="${word}" onclick="copyTriggerWord('${word}')" title="${translate('modals.model.triggerWords.copyWord')}">
                             <span class="trigger-word-content">${word}</span>
                             <span class="trigger-word-copy">
                                 <i class="fas fa-copy"></i>
                             </span>
-                            <button class="metadata-delete-btn" style="display:none;" onclick="event.stopPropagation();">
+                            <button class="metadata-delete-btn" style="display:none;" onclick="event.stopPropagation();" title="${translate('modals.model.triggerWords.deleteWord')}">
                                 <i class="fas fa-times"></i>
                             </button>
                         </div>
@@ -226,12 +227,12 @@ export function renderTriggerWords(words, filePath) {
                 </div>
             </div>
             <div class="metadata-edit-controls" style="display:none;">
-                <button class="metadata-save-btn" title="Save changes">
-                    <i class="fas fa-save"></i> Save
+                <button class="metadata-save-btn" title="${translate('modals.model.triggerWords.save')}">
+                    <i class="fas fa-save"></i> ${translate('common.actions.save')}
                 </button>
             </div>
             <div class="metadata-add-form" style="display:none;">
-                <input type="text" class="metadata-input" placeholder="Type to add or click suggestions below">
+                <input type="text" class="metadata-input" placeholder="${translate('modals.model.triggerWords.addPlaceholder')}">
             </div>
         </div>
     `;
@@ -265,7 +266,7 @@ export function setupTriggerWordsEditMode() {
         
         if (isEditMode) {
             this.innerHTML = '<i class="fas fa-times"></i>'; // Change to cancel icon
-            this.title = "Cancel editing";
+            this.title = translate('modals.model.triggerWords.cancel');
             
             // Store original trigger words for potential restoration
             originalTriggerWords = Array.from(triggerWordTags).map(tag => tag.dataset.word);
@@ -302,7 +303,7 @@ export function setupTriggerWordsEditMode() {
             // Add loading indicator
             const loadingIndicator = document.createElement('div');
             loadingIndicator.className = 'metadata-loading';
-            loadingIndicator.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading suggestions...';
+            loadingIndicator.innerHTML = `<i class="fas fa-spinner fa-spin"></i> ${translate('modals.model.triggerWords.suggestions.loading')}`;
             addForm.appendChild(loadingIndicator);
             
             // Get currently added trigger words
@@ -329,7 +330,7 @@ export function setupTriggerWordsEditMode() {
             
         } else {
             this.innerHTML = '<i class="fas fa-pencil-alt"></i>'; // Change back to edit icon
-            this.title = "Edit trigger words";
+            this.title = translate('modals.model.triggerWords.edit');
             
             // Hide edit controls and input form
             editControls.style.display = 'none';
@@ -499,21 +500,21 @@ function addNewTriggerWord(word) {
     
     // Validation: Check length
     if (word.split(/\s+/).length > 30) {
-        showToast('Trigger word should not exceed 30 words', 'error');
+        showToast('toast.triggerWords.tooLong', {}, 'error');
         return;
     }
     
     // Validation: Check total number
     const currentTags = tagsContainer.querySelectorAll('.trigger-word-tag');
     if (currentTags.length >= 30) {
-        showToast('Maximum 30 trigger words allowed', 'error');
+        showToast('toast.triggerWords.tooMany', {}, 'error');
         return;
     }
     
     // Validation: Check for duplicates
     const existingWords = Array.from(currentTags).map(tag => tag.dataset.word);
     if (existingWords.includes(word)) {
-        showToast('This trigger word already exists', 'error');
+        showToast('toast.triggerWords.alreadyExists', {}, 'error');
         return;
     }
     
@@ -628,10 +629,10 @@ async function saveTriggerWords() {
             if (tagsContainer) tagsContainer.style.display = 'none';
         }
         
-        showToast('Trigger words updated successfully', 'success');
+        showToast('toast.triggerWords.updateSuccess', {}, 'success');
     } catch (error) {
         console.error('Error saving trigger words:', error);
-        showToast('Failed to update trigger words', 'error');
+        showToast('toast.triggerWords.updateFailed', {}, 'error');
     }
 }
 
@@ -644,6 +645,6 @@ window.copyTriggerWord = async function(word) {
         await copyToClipboard(word, 'Trigger word copied');
     } catch (err) {
         console.error('Copy failed:', err);
-        showToast('Copy failed', 'error');
+        showToast('toast.triggerWords.copyFailed', {}, 'error');
     }
 };

static/js/components/shared/showcase/MediaUtils.js

@@ -278,7 +278,7 @@ export function initMetadataPanelHandlers(container) {
                         await copyToClipboard(promptElement.textContent, 'Prompt copied to clipboard');
                     } catch (err) {
                         console.error('Copy failed:', err);
-                        showToast('Copy failed', 'error');
+                        showToast('toast.triggerWords.copyFailed', {}, 'error');
                     }
                 });
             });
@@ -432,7 +432,7 @@ export function initMediaControlHandlers(container) {
                         }, 600);
                         
                         // Show success toast
-                        showToast('Example image deleted', 'success');
+                        showToast('toast.exampleImages.deleted', {}, 'success');
 
                         // Create an update object with only the necessary properties
                         const updateData = {
@@ -445,7 +445,7 @@ export function initMediaControlHandlers(container) {
                         state.virtualScroller.updateSingleItem(result.model_file_path, updateData);
                     } else {
                         // Show error message
-                        showToast(result.error || 'Failed to delete example image', 'error');
+                        showToast('toast.exampleImages.deleteFailed', { error: result.error }, 'error');
                         
                         // Reset button state
                         this.disabled = false;
@@ -456,7 +456,7 @@ export function initMediaControlHandlers(container) {
                     }
                 } catch (error) {
                     console.error('Error deleting example image:', error);
-                    showToast('Failed to delete example image', 'error');
+                    showToast('toast.exampleImages.deleteFailed', {}, 'error');
                     
                     // Reset button state
                     this.disabled = false;
@@ -536,7 +536,7 @@ function initSetPreviewHandlers(container) {
                 }
             } catch (error) {
                 console.error('Error setting preview:', error);
-                showToast('Failed to set preview image', 'error');
+                showToast('toast.exampleImages.setPreviewFailed', {}, 'error');
             } finally {
                 // Restore button state
                 this.innerHTML = '<i class="fas fa-image"></i>';

static/js/components/shared/showcase/ShowcaseView.js

@@ -412,7 +412,7 @@ async function handleImportFiles(files, modelHash, importContainer) {
             // Initialize the import UI for the new content
             initExampleImport(modelHash, showcaseTab);
             
-            showToast('Example images imported successfully', 'success');
+            showToast('toast.import.imagesImported', {}, 'success');
             
             // Update VirtualScroller if available
             if (state.virtualScroller && result.model_file_path) {
@@ -430,7 +430,7 @@ async function handleImportFiles(files, modelHash, importContainer) {
         }
     } catch (error) {
         console.error('Error importing examples:', error);
-        showToast(`Failed to import example images: ${error.message}`, 'error');
+        showToast('toast.import.importFailed', { message: error.message }, 'error');
     }
 }
 

static/js/core.js

@@ -10,9 +10,10 @@ import { bulkManager } from './managers/BulkManager.js';
 import { exampleImagesManager } from './managers/ExampleImagesManager.js';
 import { helpManager } from './managers/HelpManager.js';
 import { bannerService } from './managers/BannerService.js';
-import { showToast, initTheme, initBackToTop } from './utils/uiHelpers.js';
+import { initTheme, initBackToTop } from './utils/uiHelpers.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { migrateStorageItems } from './utils/storageHelpers.js';
+import { i18n } from './i18n/index.js';
 
 // Core application class
 export class AppCore {
@@ -26,6 +27,13 @@ export class AppCore {
 
         console.log('AppCore: Initializing...');
         
+        // Initialize i18n first
+        window.i18n = i18n;
+        // Wait for i18n to be ready
+        await window.i18n.waitForReady();
+        
+        console.log(`AppCore: Language set: ${i18n.getCurrentLocale()}`);
+        
         // Initialize managers
         state.loadingManager = new LoadingManager();
         modalManager.initialize();
@@ -67,11 +75,6 @@ export class AppCore {
         return body.dataset.page || 'unknown';
     }
     
-    // Show toast messages
-    showToast(message, type = 'info') {
-        showToast(message, type);
-    }
-    
     // Initialize common UI features based on page type
     initializePageFeatures() {
         const pageType = this.getPageType();

static/js/i18n/index.js

@@ -0,0 +1,341 @@
+/**
+ * Internationalization (i18n) system for LoRA Manager
+ * Uses user-selected language from settings with fallback to English
+ * Loads JSON translation files dynamically
+ */
+
+class I18nManager {
+    constructor() {
+        this.locales = {};
+        this.translations = {};
+        this.loadedLocales = new Set();
+        this.ready = false;
+        this.readyPromise = null;
+        
+        // Available locales configuration
+        this.availableLocales = {
+            'en': { name: 'English', nativeName: 'English' },
+            'zh-CN': { name: 'Chinese (Simplified)', nativeName: '简体中文' },
+            'zh-TW': { name: 'Chinese (Traditional)', nativeName: '繁體中文' },
+            'zh': { name: 'Chinese (Simplified)', nativeName: '简体中文' }, // Fallback to zh-CN
+            'ru': { name: 'Russian', nativeName: 'Русский' },
+            'de': { name: 'German', nativeName: 'Deutsch' },
+            'ja': { name: 'Japanese', nativeName: '日本語' },
+            'ko': { name: 'Korean', nativeName: '한국어' },
+            'fr': { name: 'French', nativeName: 'Français' },
+            'es': { name: 'Spanish', nativeName: 'Español' }
+        };
+        
+        this.currentLocale = this.getLanguageFromSettings();
+        
+        // Initialize with current locale and create ready promise
+        this.readyPromise = this.initializeWithLocale(this.currentLocale);
+    }
+    
+    /**
+     * Load translations for a specific locale from JSON file
+     * @param {string} locale - The locale to load
+     * @returns {Promise<Object>} Promise that resolves to the translation data
+     */
+    async loadLocale(locale) {
+        // Handle fallback for 'zh' to 'zh-CN'
+        const normalizedLocale = locale === 'zh' ? 'zh-CN' : locale;
+        
+        if (this.loadedLocales.has(normalizedLocale)) {
+            return this.locales[normalizedLocale];
+        }
+        
+        try {
+            const response = await fetch(`/locales/${normalizedLocale}.json`);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            const translations = await response.json();
+            this.locales[normalizedLocale] = translations;
+            this.loadedLocales.add(normalizedLocale);
+            
+            // Also set for 'zh' alias
+            if (normalizedLocale === 'zh-CN') {
+                this.locales['zh'] = translations;
+                this.loadedLocales.add('zh');
+            }
+            
+            return translations;
+        } catch (error) {
+            console.warn(`Failed to load locale ${normalizedLocale}:`, error);
+            // Fallback to English if current locale fails and it's not English
+            if (normalizedLocale !== 'en') {
+                return this.loadLocale('en');
+            }
+            // Return empty object if even English fails
+            return {};
+        }
+    }
+    
+    /**
+     * Initialize with a specific locale
+     * @param {string} locale - The locale to initialize with
+     */
+    async initializeWithLocale(locale) {
+        try {
+            this.translations = await this.loadLocale(locale);
+            this.currentLocale = locale;
+            this.ready = true;
+            
+            // Dispatch ready event
+            window.dispatchEvent(new CustomEvent('i18nReady', { 
+                detail: { language: locale } 
+            }));
+        } catch (error) {
+            console.warn(`Failed to initialize with locale ${locale}, falling back to English`, error);
+            this.translations = await this.loadLocale('en');
+            this.currentLocale = 'en';
+            this.ready = true;
+            
+            window.dispatchEvent(new CustomEvent('i18nReady', { 
+                detail: { language: 'en' } 
+            }));
+        }
+    }
+    
+    /**
+     * Wait for i18n to be ready
+     * @returns {Promise} Promise that resolves when i18n is ready
+     */
+    async waitForReady() {
+        if (this.ready) {
+            return Promise.resolve();
+        }
+        return this.readyPromise;
+    }
+    
+    /**
+     * Check if i18n is ready
+     * @returns {boolean} True if ready
+     */
+    isReady() {
+        return this.ready && this.translations && Object.keys(this.translations).length > 0;
+    }
+    
+    /**
+     * Get language from user settings with fallback to English
+     * @returns {string} Language code
+     */
+    getLanguageFromSettings() {
+        // Check localStorage for user-selected language
+        const STORAGE_PREFIX = 'lora_manager_';
+        let userLanguage = null;
+        
+        try {
+            const settings = localStorage.getItem(STORAGE_PREFIX + 'settings');
+            if (settings) {
+                const parsedSettings = JSON.parse(settings);
+                userLanguage = parsedSettings.language;
+            }
+        } catch (e) {
+            console.warn('Failed to parse settings from localStorage:', e);
+        }
+        
+        // If user has selected a language, use it
+        if (userLanguage && this.availableLocales[userLanguage]) {
+            return userLanguage;
+        }
+        
+        // Fallback to English
+        return 'en';
+    }
+    
+    /**
+     * Set the current language and save to settings
+     * @param {string} languageCode - The language code to set
+     * @returns {Promise<boolean>} True if language was successfully set
+     */
+    async setLanguage(languageCode) {
+        if (!this.availableLocales[languageCode]) {
+            console.warn(`Language '${languageCode}' is not supported`);
+            return false;
+        }
+        
+        try {
+            // Reset ready state
+            this.ready = false;
+            
+            // Load the new locale
+            this.readyPromise = this.initializeWithLocale(languageCode);
+            await this.readyPromise;
+            
+            // Save to localStorage
+            const STORAGE_PREFIX = 'lora_manager_';
+            const currentSettings = localStorage.getItem(STORAGE_PREFIX + 'settings');
+            let settings = {};
+            
+            if (currentSettings) {
+                settings = JSON.parse(currentSettings);
+            }
+            
+            settings.language = languageCode;
+            localStorage.setItem(STORAGE_PREFIX + 'settings', JSON.stringify(settings));
+            
+            console.log(`Language changed to: ${languageCode}`);
+            
+            // Dispatch event to notify components of language change
+            window.dispatchEvent(new CustomEvent('languageChanged', { 
+                detail: { language: languageCode } 
+            }));
+            
+            return true;
+        } catch (e) {
+            console.error('Failed to set language:', e);
+            return false;
+        }
+    }
+    
+    /**
+     * Get list of available languages with their native names
+     * @returns {Array} Array of language objects
+     */
+    getAvailableLanguages() {
+        return Object.entries(this.availableLocales).map(([code, info]) => ({
+            code,
+            name: info.name,
+            nativeName: info.nativeName
+        }));
+    }
+    
+    /**
+     * Get translation for a key with optional parameters
+     * @param {string} key - Translation key (supports dot notation)
+     * @param {Object} params - Parameters for string interpolation
+     * @returns {string} Translated text
+     */
+    t(key, params = {}) {
+        // If not ready, return key as fallback
+        if (!this.isReady()) {
+            console.warn(`i18n not ready, returning key: ${key}`);
+            return key;
+        }
+        
+        const keys = key.split('.');
+        let value = this.translations;
+        
+        // Navigate through nested object
+        for (const k of keys) {
+            if (value && typeof value === 'object' && k in value) {
+                value = value[k];
+            } else {
+                // Fallback to English if key not found in current locale
+                if (this.currentLocale !== 'en' && this.locales['en']) {
+                    let fallbackValue = this.locales['en'];
+                    for (const fallbackKey of keys) {
+                        if (fallbackValue && typeof fallbackValue === 'object' && fallbackKey in fallbackValue) {
+                            fallbackValue = fallbackValue[fallbackKey];
+                        } else {
+                            console.warn(`Translation key not found: ${key}`);
+                            return key; // Return key as fallback
+                        }
+                    }
+                    value = fallbackValue;
+                } else {
+                    console.warn(`Translation key not found: ${key}`);
+                    return key; // Return key as fallback
+                }
+                break;
+            }
+        }
+        
+        if (typeof value !== 'string') {
+            console.warn(`Translation key is not a string: ${key}`);
+            return key;
+        }
+        
+        // Replace parameters in the string
+        return this.interpolate(value, params);
+    }
+    
+    /**
+     * Interpolate parameters into a string
+     * Supports both {{param}} and {param} syntax
+     * @param {string} str - String with placeholders
+     * @param {Object} params - Parameters to interpolate
+     * @returns {string} Interpolated string
+     */
+    interpolate(str, params) {
+        return str.replace(/\{\{?(\w+)\}?\}/g, (match, key) => {
+            return params[key] !== undefined ? params[key] : match;
+        });
+    }
+    
+    /**
+     * Get current locale
+     * @returns {string} Current locale code
+     */
+    getCurrentLocale() {
+        return this.currentLocale;
+    }
+    
+    /**
+     * Check if current locale is RTL (Right-to-Left)
+     * @returns {boolean} True if RTL
+     */
+    isRTL() {
+        const rtlLocales = ['ar', 'he', 'fa', 'ur'];
+        return rtlLocales.includes(this.currentLocale.split('-')[0]);
+    }
+    
+    /**
+     * Format number according to current locale
+     * @param {number} number - Number to format
+     * @param {Object} options - Intl.NumberFormat options
+     * @returns {string} Formatted number
+     */
+    formatNumber(number, options = {}) {
+        return new Intl.NumberFormat(this.currentLocale, options).format(number);
+    }
+    
+    /**
+     * Format date according to current locale
+     * @param {Date|string|number} date - Date to format
+     * @param {Object} options - Intl.DateTimeFormat options
+     * @returns {string} Formatted date
+     */
+    formatDate(date, options = {}) {
+        const dateObj = date instanceof Date ? date : new Date(date);
+        return new Intl.DateTimeFormat(this.currentLocale, options).format(dateObj);
+    }
+    
+    /**
+     * Format file size with locale-specific formatting
+     * @param {number} bytes - Size in bytes
+     * @param {number} decimals - Number of decimal places
+     * @returns {string} Formatted size
+     */
+    formatFileSize(bytes, decimals = 2) {
+        if (bytes === 0) return this.t('common.fileSize.zero');
+        
+        const k = 1024;
+        const dm = decimals < 0 ? 0 : decimals;
+        const sizes = ['bytes', 'kb', 'mb', 'gb', 'tb'];
+        
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        const size = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+        
+        return `${this.formatNumber(size)} ${this.t(`common.fileSize.${sizes[i]}`)}`;
+    }
+    
+    /**
+     * Initialize i18n from user settings
+     * This prevents language flashing on page load
+     * @deprecated Use waitForReady() instead
+     */
+    async initializeFromSettings() {
+        console.warn('initializeFromSettings() is deprecated, use waitForReady() instead');
+        return this.waitForReady();
+    }
+}
+
+// Create singleton instance
+export const i18n = new I18nManager();
+
+// Export for global access (will be attached to window)
+export default i18n;

static/js/managers/BulkManager.js

@@ -5,6 +5,7 @@ import { modalManager } from './ModalManager.js';
 import { moveManager } from './MoveManager.js';
 import { getModelApiClient } from '../api/modelApiFactory.js';
 import { MODEL_TYPES, MODEL_CONFIG } from '../api/apiConfig.js';
+import { updateElementText } from '../utils/i18nHelpers.js';
 
 export class BulkManager {
     constructor() {
@@ -182,12 +183,11 @@ export class BulkManager {
 
     updateSelectedCount() {
         const countElement = document.getElementById('selectedCount');
-        const currentConfig = MODEL_CONFIG[state.currentPageType];
-        const displayName = currentConfig?.displayName || 'Models';
         
         if (countElement) {
-            countElement.textContent = `${state.selectedModels.size} ${displayName.toLowerCase()}(s) selected `;
-            
+            // Use i18nHelpers.js to update the count text
+            updateElementText(countElement, 'loras.bulkOperations.selected', { count: state.selectedModels.size });
+
             const existingCaret = countElement.querySelector('.dropdown-caret');
             if (existingCaret) {
                 existingCaret.className = `fas fa-caret-${this.isStripVisible ? 'down' : 'up'} dropdown-caret`;
@@ -283,12 +283,12 @@ export class BulkManager {
 
     async copyAllModelsSyntax() {
         if (state.currentPageType !== MODEL_TYPES.LORA) {
-            showToast('Copy syntax is only available for LoRAs', 'warning');
+            showToast('toast.loras.copyOnlyForLoras', {}, 'warning');
             return;
         }
         
         if (state.selectedModels.size === 0) {
-            showToast('No LoRAs selected', 'warning');
+            showToast('toast.loras.noLorasSelected', {}, 'warning');
             return;
         }
         
@@ -310,11 +310,11 @@ export class BulkManager {
         
         if (missingLoras.length > 0) {
             console.warn('Missing metadata for some selected loras:', missingLoras);
-            showToast(`Missing data for ${missingLoras.length} LoRAs`, 'warning');
+            showToast('toast.loras.missingDataForLoras', { count: missingLoras.length }, 'warning');
         }
         
         if (loraSyntaxes.length === 0) {
-            showToast('No valid LoRAs to copy', 'error');
+            showToast('toast.loras.noValidLorasToCopy', {}, 'error');
             return;
         }
         
@@ -323,12 +323,12 @@ export class BulkManager {
     
     async sendAllModelsToWorkflow() {
         if (state.currentPageType !== MODEL_TYPES.LORA) {
-            showToast('Send to workflow is only available for LoRAs', 'warning');
+            showToast('toast.loras.sendOnlyForLoras', {}, 'warning');
             return;
         }
         
         if (state.selectedModels.size === 0) {
-            showToast('No LoRAs selected', 'warning');
+            showToast('toast.loras.noLorasSelected', {}, 'warning');
             return;
         }
         
@@ -350,11 +350,11 @@ export class BulkManager {
         
         if (missingLoras.length > 0) {
             console.warn('Missing metadata for some selected loras:', missingLoras);
-            showToast(`Missing data for ${missingLoras.length} LoRAs`, 'warning');
+            showToast('toast.loras.missingDataForLoras', { count: missingLoras.length }, 'warning');
         }
         
         if (loraSyntaxes.length === 0) {
-            showToast('No valid LoRAs to send', 'error');
+            showToast('toast.loras.noValidLorasToSend', {}, 'error');
             return;
         }
         
@@ -363,7 +363,7 @@ export class BulkManager {
     
     showBulkDeleteModal() {
         if (state.selectedModels.size === 0) {
-            showToast('No models selected', 'warning');
+            showToast('toast.models.noModelsSelected', {}, 'warning');
             return;
         }
         
@@ -377,7 +377,7 @@ export class BulkManager {
     
     async confirmBulkDelete() {
         if (state.selectedModels.size === 0) {
-            showToast('No models selected', 'warning');
+            showToast('toast.models.noModelsSelected', {}, 'warning');
             modalManager.closeModal('bulkDeleteModal');
             return;
         }
@@ -392,7 +392,10 @@ export class BulkManager {
             
             if (result.success) {
                 const currentConfig = MODEL_CONFIG[state.currentPageType];
-                showToast(`Successfully deleted ${result.deleted_count} ${currentConfig.displayName.toLowerCase()}(s)`, 'success');
+                showToast('toast.models.deletedSuccessfully', { 
+                    count: result.deleted_count, 
+                    type: currentConfig.displayName.toLowerCase() 
+                }, 'success');
                 
                 filePaths.forEach(path => {
                     state.virtualScroller.removeItemByFilePath(path);
@@ -403,11 +406,11 @@ export class BulkManager {
                     window.modelDuplicatesManager.updateDuplicatesBadgeAfterRefresh();
                 }
             } else {
-                showToast(`Error: ${result.error || 'Failed to delete models'}`, 'error');
+                showToast('toast.models.deleteFailed', { error: result.error || 'Failed to delete models' }, 'error');
             }
         } catch (error) {
             console.error('Error during bulk delete:', error);
-            showToast('Failed to delete models', 'error');
+            showToast('toast.models.deleteFailedGeneral', {}, 'error');
         }
     }
 
@@ -538,7 +541,7 @@ export class BulkManager {
 
     selectAllVisibleModels() {
         if (!state.virtualScroller || !state.virtualScroller.items) {
-            showToast('Unable to select all items', 'error');
+            showToast('toast.bulk.unableToSelectAll', {}, 'error');
             return;
         }
         
@@ -565,7 +568,10 @@ export class BulkManager {
         
         const newlySelected = state.selectedModels.size - oldCount;
         const currentConfig = MODEL_CONFIG[state.currentPageType];
-        showToast(`Selected ${newlySelected} additional ${currentConfig.displayName.toLowerCase()}(s)`, 'success');
+        showToast('toast.models.selectedAdditional', { 
+            count: newlySelected, 
+            type: currentConfig.displayName.toLowerCase() 
+        }, 'success');
         
         if (this.isStripVisible) {
             this.updateThumbnailStrip();
@@ -574,7 +580,7 @@ export class BulkManager {
 
     async refreshAllMetadata() {
         if (state.selectedModels.size === 0) {
-            showToast('No models selected', 'warning');
+            showToast('toast.models.noModelsSelected', {}, 'warning');
             return;
         }
         
@@ -610,7 +616,7 @@ export class BulkManager {
             
         } catch (error) {
             console.error('Error during bulk metadata refresh:', error);
-            showToast('Failed to refresh metadata', 'error');
+            showToast('toast.models.refreshMetadataFailed', {}, 'error');
         }
     }
 }

static/js/managers/DownloadManager.js

@@ -5,6 +5,7 @@ import { LoadingManager } from './LoadingManager.js';
 import { getModelApiClient, resetAndReload } from '../api/modelApiFactory.js';
 import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js';
 import { FolderTreeManager } from '../components/FolderTreeManager.js';
+import { translate } from '../utils/i18nHelpers.js';
 
 export class DownloadManager {
     constructor() {
@@ -85,26 +86,26 @@ export class DownloadManager {
         const config = this.apiClient.apiConfig.config;
         
         // Update modal title
-        document.getElementById('downloadModalTitle').textContent = `Download ${config.displayName} from URL`;
+        document.getElementById('downloadModalTitle').textContent = translate('modals.download.titleWithType', { type: config.displayName });
         
         // Update URL label
-        document.getElementById('modelUrlLabel').textContent = 'Civitai URL:';
+        document.getElementById('modelUrlLabel').textContent = translate('modals.download.civitaiUrl');
         
         // Update root selection label
-        document.getElementById('modelRootLabel').textContent = `Select ${config.displayName} Root:`;
+        document.getElementById('modelRootLabel').textContent = translate('modals.download.selectTypeRoot', { type: config.displayName });
         
         // Update path preview labels
         const pathLabels = document.querySelectorAll('.path-preview label');
         pathLabels.forEach(label => {
             if (label.textContent.includes('Location Preview')) {
-                label.textContent = 'Download Location Preview:';
+                label.textContent = translate('modals.download.locationPreview') + ':';
             }
         });
         
         // Update initial path text
         const pathText = document.querySelector('#targetPathDisplay .path-text');
         if (pathText) {
-            pathText.textContent = `Select a ${config.displayName} root directory`;
+            pathText.textContent = translate('modals.download.selectTypeRoot', { type: config.displayName });
         }
     }
 
@@ -142,17 +143,17 @@ export class DownloadManager {
         const errorElement = document.getElementById('urlError');
         
         try {
-            this.loadingManager.showSimpleLoading('Fetching model versions...');
+            this.loadingManager.showSimpleLoading(translate('modals.download.fetchingVersions'));
             
             this.modelId = this.extractModelId(url);
             if (!this.modelId) {
-                throw new Error('Invalid Civitai URL format');
+                throw new Error(translate('modals.download.errors.invalidUrl'));
             }
 
             this.versions = await this.apiClient.fetchCivitaiVersions(this.modelId);
             
             if (!this.versions.length) {
-                throw new Error('No versions available for this model');
+                throw new Error(translate('modals.download.errors.noVersions'));
             }
             
             // If we have a version ID from URL, pre-select it
@@ -199,15 +200,15 @@ export class DownloadManager {
             let earlyAccessBadge = '';
             if (isEarlyAccess) {
                 earlyAccessBadge = `
-                    <div class="early-access-badge" title="Early access required">
-                        <i class="fas fa-clock"></i> Early Access
+                    <div class="early-access-badge" title="${translate('modals.download.earlyAccessTooltip')}">
+                        <i class="fas fa-clock"></i> ${translate('modals.download.earlyAccess')}
                     </div>
                 `;
             }
             
             const localStatus = existsLocally ? 
                 `<div class="local-badge">
-                    <i class="fas fa-check"></i> In Library
+                    <i class="fas fa-check"></i> ${translate('modals.download.inLibrary')}
                     <div class="local-path">${localPath || ''}</div>
                  </div>` : '';
 
@@ -217,7 +218,7 @@ export class DownloadManager {
                      ${isEarlyAccess ? 'is-early-access' : ''}"
                      data-version-id="${version.id}">
                     <div class="version-thumbnail">
-                        <img src="${thumbnailUrl}" alt="Version preview">
+                        <img src="${thumbnailUrl}" alt="${translate('modals.download.versionPreview')}">
                     </div>
                     <div class="version-content">
                         <div class="version-header">
@@ -273,23 +274,23 @@ export class DownloadManager {
         if (existsLocally) {
             nextButton.disabled = true;
             nextButton.classList.add('disabled');
-            nextButton.textContent = 'Already in Library';
+            nextButton.textContent = translate('modals.download.alreadyInLibrary');
         } else {
             nextButton.disabled = false;
             nextButton.classList.remove('disabled');
-            nextButton.textContent = 'Next';
+            nextButton.textContent = translate('common.actions.next');
         }
     }
 
     async proceedToLocation() {
         if (!this.currentVersion) {
-            showToast('Please select a version', 'error');
+            showToast('toast.loras.pleaseSelectVersion', {}, 'error');
             return;
         }
         
         const existsLocally = this.currentVersion.existsLocally;
         if (existsLocally) {
-            showToast('This version already exists in your library', 'info');
+            showToast('toast.loras.versionExists', {}, 'info');
             return;
         }
 
@@ -343,7 +344,7 @@ export class DownloadManager {
             
             this.updateTargetPath();
         } catch (error) {
-            showToast(error.message, 'error');
+            showToast('toast.downloads.loadError', { message: error.message }, 'error');
         }
     }
 
@@ -418,7 +419,7 @@ export class DownloadManager {
         const config = this.apiClient.apiConfig.config;
         
         if (!modelRoot) {
-            showToast(`Please select a ${config.displayName} root directory`, 'error');
+            showToast('toast.models.pleaseSelectRoot', { type: config.displayName }, 'error');
             return;
         }
 
@@ -455,13 +456,13 @@ export class DownloadManager {
                     updateProgress(data.progress, 0, this.currentVersion.name);
                     
                     if (data.progress < 3) {
-                        this.loadingManager.setStatus(`Preparing download...`);
+                        this.loadingManager.setStatus(translate('modals.download.status.preparing'));
                     } else if (data.progress === 3) {
-                        this.loadingManager.setStatus(`Downloaded preview image`);
+                        this.loadingManager.setStatus(translate('modals.download.status.downloadedPreview'));
                     } else if (data.progress > 3 && data.progress < 100) {
-                        this.loadingManager.setStatus(`Downloading ${config.singularName} file`);
+                        this.loadingManager.setStatus(translate('modals.download.status.downloadingFile', { type: config.singularName }));
                     } else {
-                        this.loadingManager.setStatus(`Finalizing download...`);
+                        this.loadingManager.setStatus(translate('modals.download.status.finalizing'));
                     }
                 }
             };
@@ -480,7 +481,7 @@ export class DownloadManager {
                 downloadId
             );
 
-            showToast('Download completed successfully', 'success');
+            showToast('toast.loras.downloadCompleted', {}, 'success');
             modalManager.closeModal('downloadModal');
             
             ws.close();
@@ -507,7 +508,7 @@ export class DownloadManager {
             await resetAndReload(true);
 
         } catch (error) {
-            showToast(error.message, 'error');
+            showToast('toast.downloads.downloadError', { message: error.message }, 'error');
         } finally {
             this.loadingManager.hide();
         }
@@ -523,11 +524,11 @@ export class DownloadManager {
                 await this.folderTreeManager.loadTree(treeData.tree);
             } else {
                 console.error('Failed to fetch folder tree:', treeData.error);
-                showToast('Failed to load folder tree', 'error');
+                showToast('toast.import.folderTreeFailed', {}, 'error');
             }
         } catch (error) {
             console.error('Error initializing folder tree:', error);
-            showToast('Error loading folder tree', 'error');
+            showToast('toast.import.folderTreeError', {}, 'error');
         }
     }
 
@@ -586,7 +587,7 @@ export class DownloadManager {
         const modelRoot = document.getElementById('modelRoot').value;
         const config = this.apiClient.apiConfig.config;
         
-        let fullPath = modelRoot || `Select a ${config.displayName} root directory`;
+        let fullPath = modelRoot || translate('modals.download.selectTypeRoot', { type: config.displayName });
         
         if (modelRoot) {
             if (this.useDefaultPath) {
@@ -598,7 +599,7 @@ export class DownloadManager {
                     fullPath += `/${template}`;
                 } catch (error) {
                     console.error('Failed to fetch template:', error);
-                    fullPath += '/[Auto-organized by path template]';
+                    fullPath += '/' + translate('modals.download.autoOrganizedPath');
                 }
             } else {
                 // Show manual path selection

static/js/managers/ExampleImagesManager.js

@@ -142,7 +142,7 @@ class ExampleImagesManager {
                         if (!data.success) {
                             console.error('Failed to update example images path in backend:', data.error);
                         } else {
-                            showToast('Example images path updated successfully', 'success');
+                            showToast('toast.exampleImages.pathUpdated', {}, 'success');
                         }
                     } catch (error) {
                         console.error('Failed to update example images path:', error);
@@ -187,7 +187,7 @@ class ExampleImagesManager {
             this.startDownload();
         } else {
             // If download is in progress, show info toast
-            showToast('Download already in progress', 'info');
+            showToast('toast.exampleImages.downloadInProgress', {}, 'info');
         }
     }
     
@@ -243,7 +243,7 @@ class ExampleImagesManager {
     
     async startDownload() {
         if (this.isDownloading) {
-            showToast('Download already in progress', 'warning');
+            showToast('toast.exampleImages.downloadInProgress', {}, 'warning');
             return;
         }
         
@@ -251,7 +251,7 @@ class ExampleImagesManager {
             const outputDir = document.getElementById('exampleImagesPath').value || '';
             
             if (!outputDir) {
-                showToast('Please enter a download location first', 'warning');
+                showToast('toast.exampleImages.enterLocationFirst', {}, 'warning');
                 return;
             }
             
@@ -280,16 +280,16 @@ class ExampleImagesManager {
                 this.showProgressPanel();
                 this.startProgressUpdates();
                 this.updateDownloadButtonText();
-                showToast('Example images download started', 'success');
+                showToast('toast.exampleImages.downloadStarted', {}, 'success');
                 
                 // Close settings modal
                 modalManager.closeModal('settingsModal');
             } else {
-                showToast(data.error || 'Failed to start download', 'error');
+                showToast('toast.exampleImages.downloadStartFailed', { error: data.error }, 'error');
             }
         } catch (error) {
             console.error('Failed to start download:', error);
-            showToast('Failed to start download', 'error');
+            showToast('toast.exampleImages.downloadStartFailed', {}, 'error');
         }
     }
     
@@ -319,13 +319,13 @@ class ExampleImagesManager {
                 }
                 
                 this.updateDownloadButtonText();
-                showToast('Download paused', 'info');
+                showToast('toast.exampleImages.downloadPaused', {}, 'info');
             } else {
-                showToast(data.error || 'Failed to pause download', 'error');
+                showToast('toast.exampleImages.pauseFailed', { error: data.error }, 'error');
             }
         } catch (error) {
             console.error('Failed to pause download:', error);
-            showToast('Failed to pause download', 'error');
+            showToast('toast.exampleImages.pauseFailed', {}, 'error');
         }
     }
     
@@ -355,13 +355,13 @@ class ExampleImagesManager {
                 }
                 
                 this.updateDownloadButtonText();
-                showToast('Download resumed', 'success');
+                showToast('toast.exampleImages.downloadResumed', {}, 'success');
             } else {
-                showToast(data.error || 'Failed to resume download', 'error');
+                showToast('toast.exampleImages.resumeFailed', { error: data.error }, 'error');
             }
         } catch (error) {
             console.error('Failed to resume download:', error);
-            showToast('Failed to resume download', 'error');
+            showToast('toast.exampleImages.resumeFailed', {}, 'error');
         }
     }
     
@@ -399,7 +399,7 @@ class ExampleImagesManager {
                     
                     if (data.status.status === 'completed' && !this.hasShownCompletionToast) {
                         const actionType = this.isMigrating ? 'migration' : 'download';
-                        showToast(`Example images ${actionType} completed`, 'success');
+                        showToast('toast.downloads.imagesCompleted', { action: actionType }, 'success');
                         // Mark as shown to prevent duplicate toasts
                         this.hasShownCompletionToast = true;
                         // Reset migration flag
@@ -408,7 +408,7 @@ class ExampleImagesManager {
                         setTimeout(() => this.hideProgressPanel(), 5000);
                     } else if (data.status.status === 'error') {
                         const actionType = this.isMigrating ? 'migration' : 'download';
-                        showToast(`Example images ${actionType} failed`, 'error');
+                        showToast('toast.downloads.imagesFailed', { action: actionType }, 'error');
                         this.isMigrating = false;
                     }
                 }

static/js/managers/FilterManager.js

@@ -282,12 +282,12 @@ export class FilterManager {
                     message = `Filtering by ${tagsCount} tag${tagsCount > 1 ? 's' : ''}`;
                 }
                 
-                showToast(message, 'success');
+                showToast('toast.filters.applied', { message }, 'success');
             }
         } else {
             this.filterButton.classList.remove('active');
             if (showToastNotification) {
-                showToast('Filters cleared', 'info');
+                showToast('toast.filters.cleared', {}, 'info');
             }
         }
     }
@@ -321,7 +321,7 @@ export class FilterManager {
             await getModelApiClient().loadMoreWithVirtualScroll(true, true);
         }
         
-        showToast(`Filters cleared`, 'info');
+        showToast('toast.filters.cleared', {}, 'info');
     }
     
     loadFiltersFromStorage() {

static/js/managers/ImportManager.js

@@ -11,6 +11,7 @@ import { getModelApiClient } from '../api/modelApiFactory.js';
 import { state } from '../state/index.js';
 import { MODEL_TYPES } from '../api/apiConfig.js';
 import { showToast } from '../utils/uiHelpers.js';
+import { translate } from '../utils/i18nHelpers.js';
 
 export class ImportManager {
     constructor() {
@@ -110,7 +111,7 @@ export class ImportManager {
         if (recipeName) recipeName.value = '';
         
         const tagsContainer = document.getElementById('tagsContainer');
-        if (tagsContainer) tagsContainer.innerHTML = '<div class="empty-tags">No tags added</div>';
+        if (tagsContainer) tagsContainer.innerHTML = `<div class="empty-tags">${translate('recipes.controls.import.noTagsAdded', {}, 'No tags added')}</div>`;
         
         // Clear folder path input
         const folderPathInput = document.getElementById('importFolderPath');
@@ -261,7 +262,7 @@ export class ImportManager {
             
             this.updateTargetPath();
         } catch (error) {
-            showToast(error.message, 'error');
+            showToast('toast.recipes.importFailed', { message: error.message }, 'error');
         }
     }
 
@@ -350,11 +351,11 @@ export class ImportManager {
                 await this.folderTreeManager.loadTree(treeData.tree);
             } else {
                 console.error('Failed to fetch folder tree:', treeData.error);
-                showToast('Failed to load folder tree', 'error');
+                showToast('toast.recipes.folderTreeFailed', {}, 'error');
             }
         } catch (error) {
             console.error('Error initializing folder tree:', error);
-            showToast('Error loading folder tree', 'error');
+            showToast('toast.recipes.folderTreeError', {}, 'error');
         }
     }
 
@@ -368,9 +369,7 @@ export class ImportManager {
         const pathDisplay = document.getElementById('importTargetPathDisplay');
         const loraRoot = document.getElementById('importLoraRoot').value;
         
-        let fullPath = loraRoot || 'Select a LoRA root directory';
-        
-        if (loraRoot) {
+        let fullPath = loraRoot || translate('recipes.controls.import.selectLoraRoot', {}, 'Select a LoRA root directory');         if (loraRoot) {
             if (this.useDefaultPath) {
                 // Show actual template path
                 try {
@@ -425,11 +424,11 @@ export class ImportManager {
         
         // Update the modal title
         const modalTitle = document.querySelector('#importModal h2');
-        if (modalTitle) modalTitle.textContent = 'Download Missing LoRAs';
+        if (modalTitle) modalTitle.textContent = translate('recipes.controls.import.downloadMissingLoras', {}, 'Download Missing LoRAs');
         
         // Update the save button text
         const saveButton = document.querySelector('#locationStep .primary-btn');
-        if (saveButton) saveButton.textContent = 'Download Missing LoRAs';
+        if (saveButton) saveButton.textContent = translate('recipes.controls.import.downloadMissingLoras', {}, 'Download Missing LoRAs');
         
         // Hide the back button
         const backButton = document.querySelector('#locationStep .secondary-btn');

static/js/managers/MoveManager.js

@@ -45,7 +45,7 @@ class MoveManager {
         if (filePath === 'bulk') {
             const selectedPaths = Array.from(state.selectedModels);
             if (selectedPaths.length === 0) {
-                showToast('No models selected', 'warning');
+                showToast('toast.models.noModelsSelected', {}, 'warning');
                 return;
             }
             this.bulkFilePaths = selectedPaths;
@@ -116,7 +116,7 @@ class MoveManager {
             
         } catch (error) {
             console.error(`Error fetching ${modelConfig.displayName.toLowerCase()} roots or folders:`, error);
-            showToast(error.message, 'error');
+            showToast('toast.models.moveFailed', { message: error.message }, 'error');
         }
     }
 
@@ -131,11 +131,11 @@ class MoveManager {
                 await this.folderTreeManager.loadTree(treeData.tree);
             } else {
                 console.error('Failed to fetch folder tree:', treeData.error);
-                showToast('Failed to load folder tree', 'error');
+                showToast('toast.import.folderTreeFailed', {}, 'error');
             }
         } catch (error) {
             console.error('Error initializing folder tree:', error);
-            showToast('Error loading folder tree', 'error');
+            showToast('toast.import.folderTreeError', {}, 'error');
         }
     }
 
@@ -163,7 +163,7 @@ class MoveManager {
         const config = apiClient.apiConfig.config;
         
         if (!selectedRoot) {
-            showToast(`Please select a ${config.displayName.toLowerCase()} root directory`, 'error');
+            showToast('toast.models.pleaseSelectRoot', { type: config.displayName.toLowerCase() }, 'error');
             return;
         }
 
@@ -236,7 +236,7 @@ class MoveManager {
 
         } catch (error) {
             console.error('Error moving model(s):', error);
-            showToast('Failed to move model(s): ' + error.message, 'error');
+            showToast('toast.models.moveFailed', { message: error.message }, 'error');
         }
     }
 }

static/js/managers/SearchManager.js

@@ -1,4 +1,4 @@
-import { updatePanelPositions } from "../utils/uiHelpers.js";
+import { updatePanelPositions, showToast } from "../utils/uiHelpers.js";
 import { getCurrentPageState } from "../state/index.js";
 import { getModelApiClient } from "../api/modelApiFactory.js";
 import { setStorageItem, getStorageItem } from "../utils/storageHelpers.js";
@@ -97,10 +97,7 @@ export class SearchManager {
             // Check if clicking would deselect the last active option
             const activeOptions = document.querySelectorAll('.search-option-tag.active');
             if (activeOptions.length === 1 && activeOptions[0] === tag) {
-              // Don't allow deselecting the last option
-              if (typeof showToast === 'function') {
-                showToast('At least one search option must be selected', 'info');
-              }
+                showToast('toast.search.atLeastOneOption', {}, 'info');
               return;
             }
             

static/js/managers/SettingsManager.js

@@ -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() {
@@ -270,6 +271,13 @@ export class SettingsManager {
 
         // Load default embedding root
         await this.loadEmbeddingRoots();
+
+        // Load language setting
+        const languageSelect = document.getElementById('languageSelect');
+        if (languageSelect) {
+            const currentLanguage = state.global.settings.language || 'en';
+            languageSelect.value = currentLanguage;
+        }
     }
 
     async loadLoraRoots() {
@@ -307,7 +315,7 @@ export class SettingsManager {
             
         } catch (error) {
             console.error('Error loading LoRA roots:', error);
-            showToast('Failed to load LoRA roots: ' + error.message, 'error');
+            showToast('toast.settings.loraRootsFailed', { message: error.message }, 'error');
         }
     }
 
@@ -346,7 +354,7 @@ export class SettingsManager {
             
         } catch (error) {
             console.error('Error loading checkpoint roots:', error);
-            showToast('Failed to load checkpoint roots: ' + error.message, 'error');
+            showToast('toast.settings.checkpointRootsFailed', { message: error.message }, 'error');
         }
     }
 
@@ -385,7 +393,7 @@ export class SettingsManager {
 
         } catch (error) {
             console.error('Error loading embedding roots:', error);
-            showToast('Failed to load embedding roots: ' + error.message, 'error');
+            showToast('toast.settings.embeddingRootsFailed', { message: error.message }, 'error');
         }
     }
 
@@ -424,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>
@@ -523,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('');
@@ -553,14 +561,17 @@ export class SettingsManager {
             // Show success toast
             const mappingCount = Object.keys(state.global.settings.base_model_path_mappings).length;
             if (mappingCount > 0) {
-                showToast(`Base model path mappings updated (${mappingCount} mapping${mappingCount !== 1 ? 's' : ''})`, 'success');
+                showToast('toast.settings.mappingsUpdated', { 
+                    count: mappingCount,
+                    plural: mappingCount !== 1 ? 's' : ''
+                }, 'success');
             } else {
-                showToast('Base model path mappings cleared', 'success');
+                showToast('toast.settings.mappingsCleared', {}, 'success');
             }
 
         } catch (error) {
             console.error('Error saving base model mappings:', error);
-            showToast('Failed to save base model mappings: ' + error.message, 'error');
+            showToast('toast.settings.mappingSaveFailed', { message: error.message }, 'error');
         }
     }
 
@@ -652,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;
         }
@@ -660,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;
         }
@@ -689,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;
     }
@@ -737,11 +748,11 @@ export class SettingsManager {
                 throw new Error('Failed to save download path templates');
             }
 
-            showToast('Download path templates updated', 'success');
+            showToast('toast.settings.downloadTemplatesUpdated', {}, 'success');
 
         } catch (error) {
             console.error('Error saving download path templates:', error);
-            showToast('Failed to save download path templates: ' + error.message, 'error');
+            showToast('toast.settings.downloadTemplatesFailed', { message: error.message }, 'error');
         }
     }
 
@@ -802,7 +813,7 @@ export class SettingsManager {
                 }
             }
                 
-            showToast(`Settings updated: ${settingKey.replace(/_/g, ' ')}`, 'success');
+            showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
             
             // Apply frontend settings immediately
             this.applyFrontendSettings();
@@ -823,11 +834,13 @@ export class SettingsManager {
             // Recalculate layout when compact mode changes
             if (settingKey === 'compact_mode' && state.virtualScroller) {
                 state.virtualScroller.calculateLayout();
-                showToast(`Compact Mode ${value ? 'enabled' : 'disabled'}`, 'success');
+                showToast('toast.settings.compactModeToggled', { 
+                    state: value ? 'toast.settings.compactModeEnabled' : 'toast.settings.compactModeDisabled' 
+                }, 'success');
             }
             
         } catch (error) {
-            showToast('Failed to save setting: ' + error.message, 'error');
+            showToast('toast.settings.settingSaveFailed', { message: error.message }, 'error');
         }
     }
     
@@ -881,7 +894,7 @@ export class SettingsManager {
                     throw new Error('Failed to save setting');
                 }
                 
-                showToast(`Settings updated: ${settingKey.replace(/_/g, ' ')}`, 'success');
+                showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
             }
             
             // Apply frontend settings immediately
@@ -895,11 +908,11 @@ export class SettingsManager {
                 if (value === 'medium') densityName = "Medium";
                 if (value === 'compact') densityName = "Compact";
                 
-                showToast(`Display Density set to ${densityName}`, 'success');
+                showToast('toast.settings.displayDensitySet', { density: densityName }, 'success');
             }
             
         } catch (error) {
-            showToast('Failed to save setting: ' + error.message, 'error');
+            showToast('toast.settings.settingSaveFailed', { message: error.message }, 'error');
         }
     }
     
@@ -938,10 +951,46 @@ export class SettingsManager {
                 throw new Error('Failed to save setting');
             }
             
-            showToast(`Settings updated: ${settingKey.replace(/_/g, ' ')}`, 'success');
+            showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
             
         } catch (error) {
-            showToast('Failed to save setting: ' + error.message, 'error');
+            showToast('toast.settings.settingSaveFailed', { message: error.message }, 'error');
+        }
+    }
+
+    async saveLanguageSetting() {
+        const element = document.getElementById('languageSelect');
+        if (!element) return;
+        
+        const selectedLanguage = element.value;
+        
+        try {
+            // Update local state
+            state.global.settings.language = selectedLanguage;
+            
+            // Save to localStorage
+            setStorageItem('settings', state.global.settings);
+            
+            // 保存到后端
+            const response = await fetch('/api/settings', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    language: selectedLanguage
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to save language setting to backend');
+            }
+            
+            // Reload the page to apply the new language
+            window.location.reload();
+
+        } catch (error) {
+            showToast('toast.settings.languageChangeFailed', { message: error.message }, 'error');
         }
     }
 
@@ -976,15 +1025,15 @@ export class SettingsManager {
             const result = await response.json();
             
             if (result.success) {
-                showToast('Cache files have been cleared successfully. Cache will rebuild on next action.', 'success');
+                showToast('toast.settings.cacheCleared', {}, 'success');
             } else {
-                showToast(`Failed to clear cache: ${result.error}`, 'error');
+                showToast('toast.settings.cacheClearFailed', { error: result.error }, 'error');
             }
             
             // Close the confirmation modal
             modalManager.closeModal('clearCacheModal');
         } catch (error) {
-            showToast(`Error clearing cache: ${error.message}`, 'error');
+            showToast('toast.settings.cacheClearError', { message: error.message }, 'error');
             modalManager.closeModal('clearCacheModal');
         }
     }

static/js/managers/UpdateService.js

@@ -8,6 +8,7 @@ import {
     resetDismissedBanner
 } from '../utils/storageHelpers.js';
 import { bannerService } from './BannerService.js';
+import { translate } from '../utils/i18nHelpers.js';
 
 export class UpdateService {
     constructor() {
@@ -165,8 +166,8 @@ export class UpdateService {
         
         if (updateToggle) {
             updateToggle.title = this.updateNotificationsEnabled && this.updateAvailable 
-                ? "Update Available" 
-                : "Check Updates";
+                ? translate('update.updateAvailable') 
+                : translate('update.title');
         }
         
         // Force updating badges visibility based on current state
@@ -185,7 +186,9 @@ export class UpdateService {
         // Update title based on update availability
         const headerTitle = modal.querySelector('.update-header h2');
         if (headerTitle) {
-            headerTitle.textContent = this.updateAvailable ? "Update Available" : "Check for Updates";
+            headerTitle.textContent = this.updateAvailable ? 
+                translate('update.updateAvailable') : 
+                translate('update.title');
         }
         
         // Always update version information, even if updateInfo is null
@@ -209,9 +212,9 @@ export class UpdateService {
         const gitInfoEl = modal.querySelector('.git-info');
         if (gitInfoEl && this.gitInfo) {
             if (this.gitInfo.short_hash !== 'unknown') {
-                let gitText = `Commit: ${this.gitInfo.short_hash}`;
+                let gitText = `${translate('update.commit')}: ${this.gitInfo.short_hash}`;
                 if (this.gitInfo.commit_date !== 'unknown') {
-                    gitText += ` - Date: ${this.gitInfo.commit_date}`;
+                    gitText += ` - ${translate('common.status.date', {}, 'Date')}: ${this.gitInfo.commit_date}`;
                 }
                 gitInfoEl.textContent = gitText;
                 gitInfoEl.style.display = 'block';
@@ -231,7 +234,7 @@ export class UpdateService {
                 changelogItem.className = 'changelog-item';
                 
                 const versionHeader = document.createElement('h4');
-                versionHeader.textContent = `Version ${this.latestVersion}`;
+                versionHeader.textContent = `${translate('common.status.version', {}, 'Version')} ${this.latestVersion}`;
                 changelogItem.appendChild(versionHeader);
                 
                 // Create changelog list
@@ -247,7 +250,7 @@ export class UpdateService {
                 } else {
                     // If no changelog items available
                     const listItem = document.createElement('li');
-                    listItem.textContent = "No detailed changelog available. Check GitHub for more information.";
+                    listItem.textContent = translate('update.noChangelogAvailable', {}, 'No detailed changelog available. Check GitHub for more information.');
                     changelogList.appendChild(listItem);
                 }
                 
@@ -271,11 +274,11 @@ export class UpdateService {
         
         try {
             this.isUpdating = true;
-            this.updateUpdateUI('updating', 'Updating...');
+            this.updateUpdateUI('updating', translate('update.status.updating'));
             this.showUpdateProgress(true);
             
             // Update progress
-            this.updateProgress(10, 'Preparing update...');
+            this.updateProgress(10, translate('update.updateProgress.preparing'));
             
             const response = await fetch('/api/perform-update', {
                 method: 'POST',
@@ -287,13 +290,13 @@ export class UpdateService {
                 })
             });
             
-            this.updateProgress(50, 'Installing update...');
+            this.updateProgress(50, translate('update.updateProgress.installing'));
             
             const data = await response.json();
             
             if (data.success) {
-                this.updateProgress(100, 'Update completed successfully!');
-                this.updateUpdateUI('success', 'Updated!');
+                this.updateProgress(100, translate('update.updateProgress.completed'));
+                this.updateUpdateUI('success', translate('update.status.updated'));
                 
                 // Show success message and suggest restart
                 setTimeout(() => {
@@ -301,13 +304,13 @@ export class UpdateService {
                 }, 1000);
                 
             } else {
-                throw new Error(data.error || 'Update failed');
+                throw new Error(data.error || translate('update.status.updateFailed'));
             }
             
         } catch (error) {
             console.error('Update failed:', error);
-            this.updateUpdateUI('error', 'Update Failed');
-            this.updateProgress(0, `Update failed: ${error.message}`);
+            this.updateUpdateUI('error', translate('update.status.updateFailed'));
+            this.updateProgress(0, translate('update.updateProgress.failed', { error: error.message }));
             
             // Hide progress after error
             setTimeout(() => {
@@ -369,11 +372,11 @@ export class UpdateService {
             progressText.innerHTML = `
                 <div style="text-align: center; color: var(--lora-success);">
                     <i class="fas fa-check-circle" style="margin-right: 8px;"></i>
-                    Successfully updated to ${newVersion}!
+                    ${translate('update.completion.successMessage', { version: newVersion })}
                     <br><br>
                     <div style="opacity: 0.95; color: var(--lora-error); font-size: 1em;">
-                        Please restart ComfyUI or LoRA Manager to apply update.<br>
-                        Make sure to reload your browser for both LoRA Manager and ComfyUI.
+                        ${translate('update.completion.restartMessage')}<br>
+                        ${translate('update.completion.reloadMessage')}
                     </div>
                 </div>
             `;
@@ -470,16 +473,19 @@ export class UpdateService {
     
     registerVersionMismatchBanner() {
         // Get stored and current version for display
-        const storedVersion = getStoredVersionInfo() || 'unknown';
-        const currentVersion = this.currentVersionInfo || 'unknown';
+        const storedVersion = getStoredVersionInfo() || translate('common.status.unknown');
+        const currentVersion = this.currentVersionInfo || translate('common.status.unknown');
         
         bannerService.registerBanner('version-mismatch', {
             id: 'version-mismatch',
-            title: 'Application Update Detected',
-            content: `Your browser is running an outdated version of LoRA Manager (${storedVersion}). The server has been updated to version ${currentVersion}. Please refresh to ensure proper functionality.`,
+            title: translate('banners.versionMismatch.title', {}, 'Application Update Detected'),
+            content: translate('banners.versionMismatch.content', { 
+                storedVersion, 
+                currentVersion 
+            }, `Your browser is running an outdated version of LoRA Manager (${storedVersion}). The server has been updated to version ${currentVersion}. Please refresh to ensure proper functionality.`),
             actions: [
                 {
-                    text: 'Refresh Now',
+                    text: translate('banners.versionMismatch.refreshNow', {}, 'Refresh Now'),
                     icon: 'fas fa-sync',
                     action: 'hardRefresh',
                     type: 'primary'
@@ -492,7 +498,7 @@ export class UpdateService {
                 // Add countdown element
                 const countdownEl = document.createElement('div');
                 countdownEl.className = 'banner-countdown';
-                countdownEl.innerHTML = `<span>Refreshing in <strong>15</strong> seconds...</span>`;
+                countdownEl.innerHTML = `<span>${translate('banners.versionMismatch.refreshingIn', {}, 'Refreshing in')} <strong>15</strong> ${translate('banners.versionMismatch.seconds', {}, 'seconds')}...</span>`;
                 bannerElement.querySelector('.banner-content').appendChild(countdownEl);
                 
                 // Start countdown

static/js/managers/import/DownloadManager.js

@@ -1,4 +1,5 @@
 import { showToast } from '../../utils/uiHelpers.js';
+import { translate } from '../../utils/i18nHelpers.js';
 import { getModelApiClient } from '../../api/modelApiFactory.js';
 import { MODEL_TYPES } from '../../api/apiConfig.js';
 import { getStorageItem } from '../../utils/storageHelpers.js';
@@ -13,13 +14,13 @@ export class DownloadManager {
         const isDownloadOnly = !!this.importManager.recipeId;
         
         if (!isDownloadOnly && !this.importManager.recipeName) {
-            showToast('Please enter a recipe name', 'error');
+            showToast('toast.recipes.enterRecipeName', {}, 'error');
             return;
         }
         
         try {
             // Show progress indicator
-            this.importManager.loadingManager.showSimpleLoading(isDownloadOnly ? 'Downloading LoRAs...' : 'Saving recipe...');
+            this.importManager.loadingManager.showSimpleLoading(isDownloadOnly ? translate('recipes.controls.import.downloadingLoras', {}, 'Downloading LoRAs...') : translate('recipes.controls.import.savingRecipe', {}, 'Saving recipe...'));
             
             // Only send the complete recipe to save if not in download-only mode
             if (!isDownloadOnly) {
@@ -77,7 +78,7 @@ export class DownloadManager {
                 if (!result.success) {
                     // Handle save error
                     console.error("Failed to save recipe:", result.error);
-                    showToast(result.error, 'error');
+                    showToast('toast.recipes.recipeSaveFailed', { error: result.error }, 'error');
                     // Close modal
                     modalManager.closeModal('importModal');
                     return;
@@ -93,10 +94,10 @@ export class DownloadManager {
             // Show success message
             if (isDownloadOnly) {
                 if (failedDownloads === 0) {    
-                    showToast('LoRAs downloaded successfully', 'success');
+                    showToast('toast.loras.downloadSuccessful', {}, 'success');
                 }
             } else {
-                showToast(`Recipe "${this.importManager.recipeName}" saved successfully`, 'success');
+                showToast('toast.recipes.nameSaved', { name: this.importManager.recipeName }, 'success');
             }
             
             // Close modal
@@ -107,7 +108,7 @@ export class DownloadManager {
             
         } catch (error) {
             console.error('Error:', error);
-            showToast(error.message, 'error');
+            showToast('toast.recipes.processingError', { message: error.message }, 'error');
         } finally {
             this.importManager.loadingManager.hide();
         }
@@ -117,7 +118,7 @@ export class DownloadManager {
         // For download, we need to validate the target path
         const loraRoot = document.getElementById('importLoraRoot')?.value;
         if (!loraRoot) {
-            throw new Error('Please select a LoRA root directory');
+            throw new Error(translate('recipes.controls.import.errors.selectLoraRoot', {}, 'Please select a LoRA root directory'));
         }
         
         // Build target path
@@ -195,7 +196,7 @@ export class DownloadManager {
             currentLoraProgress = 0;
             
             // Initial status update for new LoRA
-            this.importManager.loadingManager.setStatus(`Starting download for LoRA ${i+1}/${this.importManager.downloadableLoRAs.length}`);
+            this.importManager.loadingManager.setStatus(translate('recipes.controls.import.startingDownload', { current: i+1, total: this.importManager.downloadableLoRAs.length }, `Starting download for LoRA ${i+1}/${this.importManager.downloadableLoRAs.length}`));
             updateProgress(0, completedDownloads, lora.name);
             
             try {
@@ -238,15 +239,19 @@ export class DownloadManager {
         
         // Show appropriate completion message based on results
         if (failedDownloads === 0) {
-            showToast(`All ${completedDownloads} LoRAs downloaded successfully`, 'success');
+            showToast('toast.loras.allDownloadSuccessful', { count: completedDownloads }, 'success');
         } else {
             if (accessFailures > 0) {
-                showToast(
-                    `Downloaded ${completedDownloads} of ${this.importManager.downloadableLoRAs.length} LoRAs. ${accessFailures} failed due to access restrictions. Check your API key in settings or early access status.`,
-                    'error'
-                );
+                showToast('toast.loras.downloadPartialWithAccess', { 
+                    completed: completedDownloads, 
+                    total: this.importManager.downloadableLoRAs.length,
+                    accessFailures: accessFailures
+                }, 'error');
             } else {
-                showToast(`Downloaded ${completedDownloads} of ${this.importManager.downloadableLoRAs.length} LoRAs`, 'error');
+                showToast('toast.loras.downloadPartialSuccess', { 
+                    completed: completedDownloads, 
+                    total: this.importManager.downloadableLoRAs.length 
+                }, 'error');
             }
         }
         

static/js/managers/import/FolderBrowser.js

@@ -1,4 +1,5 @@
 import { showToast } from '../../utils/uiHelpers.js';
+import { translate } from '../../utils/i18nHelpers.js';
 import { getStorageItem } from '../../utils/storageHelpers.js';
 
 export class FolderBrowser {
@@ -136,7 +137,7 @@ export class FolderBrowser {
             this.initializeFolderBrowser();
         } catch (error) {
             console.error('Error in API calls:', error);
-            showToast(error.message, 'error');
+            showToast('toast.recipes.folderBrowserError', { message: error.message }, 'error');
         }
     }
 
@@ -204,7 +205,7 @@ export class FolderBrowser {
         const loraRoot = document.getElementById('importLoraRoot')?.value || '';
         const newFolder = document.getElementById('importNewFolder')?.value?.trim() || '';
         
-        let fullPath = loraRoot || 'Select a LoRA root directory'; 
+        let fullPath = loraRoot || translate('recipes.controls.import.selectLoraRoot', {}, 'Select a LoRA root directory'); 
         
         if (loraRoot) {
             if (this.importManager.selectedFolder) {

static/js/managers/import/ImageProcessor.js

@@ -1,4 +1,5 @@
 import { showToast } from '../../utils/uiHelpers.js';
+import { translate } from '../../utils/i18nHelpers.js';
 
 export class ImageProcessor {
     constructor(importManager) {
@@ -13,7 +14,7 @@ export class ImageProcessor {
         
         // Validate file type
         if (!file.type.match('image.*')) {
-            errorElement.textContent = 'Please select an image file';
+            errorElement.textContent = translate('recipes.controls.import.errors.selectImageFile', {}, 'Please select an image file');
             return;
         }
         
@@ -32,7 +33,7 @@ export class ImageProcessor {
         
         // Validate input
         if (!input) {
-            errorElement.textContent = 'Please enter a URL or file path';
+            errorElement.textContent = translate('recipes.controls.import.errors.enterUrlOrPath', {}, 'Please enter a URL or file path');
             return;
         }
         
@@ -40,7 +41,7 @@ export class ImageProcessor {
         errorElement.textContent = '';
         
         // Show loading indicator
-        this.importManager.loadingManager.showSimpleLoading('Processing input...');
+        this.importManager.loadingManager.showSimpleLoading(translate('recipes.controls.import.processingInput', {}, 'Processing input...'));
         
         try {
             // Check if it's a URL or a local file path
@@ -156,12 +157,12 @@ export class ImageProcessor {
 
     async uploadAndAnalyzeImage() {
         if (!this.importManager.recipeImage) {
-            showToast('Please select an image first', 'error');
+            showToast('toast.recipes.selectImageFirst', {}, 'error');
             return;
         }
         
         try {
-            this.importManager.loadingManager.showSimpleLoading('Analyzing image metadata...');
+            this.importManager.loadingManager.showSimpleLoading(translate('recipes.controls.import.analyzingMetadata', {}, 'Analyzing image metadata...'));
             
             // Create form data for upload
             const formData = new FormData();

static/js/managers/import/RecipeDataManager.js

@@ -1,4 +1,5 @@
 import { showToast } from '../../utils/uiHelpers.js';
+import { translate } from '../../utils/i18nHelpers.js';
 
 export class RecipeDataManager {
     constructor(importManager) {
@@ -62,17 +63,17 @@ export class RecipeDataManager {
                 // For file upload mode
                 const reader = new FileReader();
                 reader.onload = (e) => {
-                    imagePreview.innerHTML = `<img src="${e.target.result}" alt="Recipe preview">`;
+                    imagePreview.innerHTML = `<img src="${e.target.result}" alt="${translate('recipes.controls.import.recipePreviewAlt', {}, 'Recipe preview')}">`;
                 };
                 reader.readAsDataURL(this.importManager.recipeImage);
             } else if (this.importManager.recipeData && this.importManager.recipeData.image_base64) {
                 // For URL mode - use the base64 image data returned from the backend
-                imagePreview.innerHTML = `<img src="data:image/jpeg;base64,${this.importManager.recipeData.image_base64}" alt="Recipe preview">`;
+                imagePreview.innerHTML = `<img src="data:image/jpeg;base64,${this.importManager.recipeData.image_base64}" alt="${translate('recipes.controls.import.recipePreviewAlt', {}, 'Recipe preview')}">`;
             } else if (this.importManager.importMode === 'url') {
                 // Fallback for URL mode if no base64 data
                 const urlInput = document.getElementById('imageUrlInput');
                 if (urlInput && urlInput.value) {
-                    imagePreview.innerHTML = `<img src="${urlInput.value}" alt="Recipe preview" crossorigin="anonymous">`;
+                    imagePreview.innerHTML = `<img src="${urlInput.value}" alt="${translate('recipes.controls.import.recipePreviewAlt', {}, 'Recipe preview')}" crossorigin="anonymous">`;
                 }
             }
         }
@@ -82,7 +83,7 @@ export class RecipeDataManager {
         const existingLoras = this.importManager.recipeData.loras.filter(lora => lora.existsLocally).length;
         const loraCountInfo = document.getElementById('loraCountInfo');
         if (loraCountInfo) {
-            loraCountInfo.textContent = `(${existingLoras}/${totalLoras} in library)`;
+            loraCountInfo.textContent = translate('recipes.controls.import.loraCountInfo', { existing: existingLoras, total: totalLoras }, `(${existingLoras}/${totalLoras} in library)`);
         }
         
         // Display LoRAs list
@@ -98,16 +99,16 @@ export class RecipeDataManager {
                 let statusBadge;
                 if (isDeleted) {
                     statusBadge = `<div class="deleted-badge">
-                        <i class="fas fa-exclamation-circle"></i> Deleted from Civitai
+                        <i class="fas fa-exclamation-circle"></i> ${translate('recipes.controls.import.deletedFromCivitai', {}, 'Deleted from Civitai')}
                     </div>`;
                 } else {
                     statusBadge = existsLocally ? 
                         `<div class="local-badge">
-                            <i class="fas fa-check"></i> In Library
+                            <i class="fas fa-check"></i> ${translate('recipes.controls.import.inLibrary', {}, 'In Library')}
                             <div class="local-path">${localPath}</div>
                         </div>` :
                         `<div class="missing-badge">
-                            <i class="fas fa-exclamation-triangle"></i> Not in Library
+                            <i class="fas fa-exclamation-triangle"></i> ${translate('recipes.controls.import.notInLibrary', {}, 'Not in Library')}
                         </div>`;
                 }
 
@@ -115,20 +116,20 @@ export class RecipeDataManager {
                 let earlyAccessBadge = '';
                 if (isEarlyAccess) {
                     // Format the early access end date if available
-                    let earlyAccessInfo = 'This LoRA requires early access payment to download.';
+                    let earlyAccessInfo = translate('recipes.controls.import.earlyAccessRequired', {}, 'This LoRA requires early access payment to download.');
                     if (lora.earlyAccessEndsAt) {
                         try {
                             const endDate = new Date(lora.earlyAccessEndsAt);
                             const formattedDate = endDate.toLocaleDateString();
-                            earlyAccessInfo += ` Early access ends on ${formattedDate}.`;
+                            earlyAccessInfo += ` ${translate('recipes.controls.import.earlyAccessEnds', { date: formattedDate }, `Early access ends on ${formattedDate}.`)}`;
                         } catch (e) {
                             console.warn('Failed to format early access date', e);
                         }
                     }
                     
                     earlyAccessBadge = `<div class="early-access-badge">
-                        <i class="fas fa-clock"></i> Early Access
-                        <div class="early-access-info">${earlyAccessInfo} Verify that you have purchased early access before downloading.</div>
+                        <i class="fas fa-clock"></i> ${translate('recipes.controls.import.earlyAccess', {}, 'Early Access')}
+                        <div class="early-access-info">${earlyAccessInfo} ${translate('recipes.controls.import.verifyEarlyAccess', {}, 'Verify that you have purchased early access before downloading.')}</div>
                     </div>`;
                 }
 
@@ -139,7 +140,7 @@ export class RecipeDataManager {
                 return `
                     <div class="lora-item ${existsLocally ? 'exists-locally' : isDeleted ? 'is-deleted' : 'missing-locally'} ${isEarlyAccess ? 'is-early-access' : ''}">
                         <div class="lora-thumbnail">
-                            <img src="${lora.thumbnailUrl || '/loras_static/images/no-preview.png'}" alt="LoRA preview">
+                            <img src="${lora.thumbnailUrl || '/loras_static/images/no-preview.png'}" alt="${translate('recipes.controls.import.loraPreviewAlt', {}, 'LoRA preview')}">
                         </div>
                         <div class="lora-content">
                             <div class="lora-header">
@@ -232,12 +233,12 @@ export class RecipeDataManager {
                     <div class="warning-icon"><i class="fas fa-clone"></i></div>
                     <div class="warning-content">
                         <div class="warning-title">
-                            ${this.importManager.duplicateRecipes.length} identical ${this.importManager.duplicateRecipes.length === 1 ? 'recipe' : 'recipes'} found in your library
+                            ${translate('recipes.controls.import.duplicateRecipesFound', { count: this.importManager.duplicateRecipes.length }, `${this.importManager.duplicateRecipes.length} identical ${this.importManager.duplicateRecipes.length === 1 ? 'recipe' : 'recipes'} found in your library`)}
                         </div>
                         <div class="warning-text">
-                            These recipes contain the same LoRAs with identical weights.
+                            ${translate('recipes.controls.import.duplicateRecipesDescription', {}, 'These recipes contain the same LoRAs with identical weights.')}
                             <button id="toggleDuplicatesList" class="toggle-duplicates-btn">
-                                Show duplicates <i class="fas fa-chevron-down"></i>
+                                ${translate('recipes.controls.import.showDuplicates', {}, 'Show duplicates')} <i class="fas fa-chevron-down"></i>
                             </button>
                         </div>
                     </div>
@@ -246,7 +247,7 @@ export class RecipeDataManager {
                     ${this.importManager.duplicateRecipes.map((recipe) => `
                         <div class="duplicate-recipe-card">
                             <div class="duplicate-recipe-preview">
-                                <img src="${recipe.file_url}" alt="Recipe preview">
+                                <img src="${recipe.file_url}" alt="${translate('recipes.controls.import.recipePreviewAlt', {}, 'Recipe preview')}">
                                 <div class="duplicate-recipe-title">${recipe.title}</div>
                             </div>
                             <div class="duplicate-recipe-details">
@@ -254,7 +255,7 @@ export class RecipeDataManager {
                                     <i class="fas fa-calendar-alt"></i> ${formatDate(recipe.modified)}
                                 </div>
                                 <div class="duplicate-recipe-lora-count">
-                                    <i class="fas fa-layer-group"></i> ${recipe.lora_count} LoRAs
+                                    <i class="fas fa-layer-group"></i> ${translate('recipes.controls.import.loraCount', { count: recipe.lora_count }, `${recipe.lora_count} LoRAs`)}
                                 </div>
                             </div>
                         </div>
@@ -275,9 +276,9 @@ export class RecipeDataManager {
                         const icon = toggleButton.querySelector('i');
                         if (icon) {
                             if (list.classList.contains('collapsed')) {
-                                toggleButton.innerHTML = `Show duplicates <i class="fas fa-chevron-down"></i>`;
+                                toggleButton.innerHTML = `${translate('recipes.controls.import.showDuplicates', {}, 'Show duplicates')} <i class="fas fa-chevron-down"></i>`;
                             } else {
-                                toggleButton.innerHTML = `Hide duplicates <i class="fas fa-chevron-up"></i>`;
+                                toggleButton.innerHTML = `${translate('recipes.controls.import.hideDuplicates', {}, 'Hide duplicates')} <i class="fas fa-chevron-up"></i>`;
                             }
                         }
                     }
@@ -362,9 +363,9 @@ export class RecipeDataManager {
         nextButton.classList.remove('warning-btn');
         
         if (missingNotDeleted > 0) {
-            nextButton.textContent = 'Download Missing LoRAs';
+            nextButton.textContent = translate('recipes.controls.import.downloadMissingLoras', {}, 'Download Missing LoRAs');
         } else {
-            nextButton.textContent = 'Save Recipe';
+            nextButton.textContent = translate('recipes.controls.import.saveRecipe', {}, 'Save Recipe');
         }
     }
 
@@ -391,7 +392,7 @@ export class RecipeDataManager {
         const tagsContainer = document.getElementById('tagsContainer');
         
         if (this.importManager.recipeTags.length === 0) {
-            tagsContainer.innerHTML = '<div class="empty-tags">No tags added</div>';
+            tagsContainer.innerHTML = `<div class="empty-tags">${translate('recipes.controls.import.noTagsAdded', {}, 'No tags added')}</div>`;
             return;
         }
         
@@ -406,7 +407,7 @@ export class RecipeDataManager {
     proceedFromDetails() {
         // Validate recipe name
         if (!this.importManager.recipeName) {
-            showToast('Please enter a recipe name', 'error');
+            showToast('toast.recipes.enterRecipeName', {}, 'error');
             return;
         }
         

static/js/recipes.js

@@ -2,7 +2,7 @@
 import { appCore } from './core.js';
 import { ImportManager } from './managers/ImportManager.js';
 import { RecipeModal } from './components/RecipeModal.js';
-import { getCurrentPageState, state } from './state/index.js';
+import { getCurrentPageState } from './state/index.js';
 import { getSessionItem, removeSessionItem } from './utils/storageHelpers.js';
 import { RecipeContextMenu } from './components/ContextMenu/index.js';
 import { DuplicatesManager } from './components/DuplicatesManager.js';

static/js/statistics.js

@@ -85,7 +85,7 @@ class StatisticsManager {
             console.log('Statistics data loaded:', this.data);
         } catch (error) {
             console.error('Error loading statistics data:', error);
-            showToast('Failed to load statistics data', 'error');
+            showToast('toast.general.statisticsLoadFailed', {}, 'error');
         }
     }
 

static/js/test/i18nTest.js

@@ -0,0 +1,156 @@
+/**
+ * i18n System Test
+ * Simple test to verify internationalization functionality
+ */
+
+import { i18n } from '../i18n/index.js';
+import { initializePageI18n, t, formatFileSize, formatDate, formatNumber } from '../utils/i18nHelpers.js';
+import { findUnusedTranslationKeys, findMissingTranslationKeys, extractLeafKeys } from '../i18n/validator.js';
+
+// Mock DOM elements for testing
+function createMockDOM() {
+    // Create a test container
+    const container = document.createElement('div');
+    container.innerHTML = `
+        <div data-i18n="header.appTitle">LoRA Manager</div>
+        <input data-i18n="header.search.placeholder" data-i18n-target="placeholder" placeholder="Search..." />
+        <button data-i18n="common.actions.save">Save</button>
+        <span data-i18n="loras.bulkOperations.selected" data-i18n-params='{"count": 5}'>5 selected</span>
+    `;
+    document.body.appendChild(container);
+    return container;
+}
+
+// Test basic translation functionality
+function testBasicTranslation() {
+    console.log('=== Testing Basic Translation ===');
+    
+    // Test simple translation
+    const saveText = t('common.actions.save');
+    console.log(`Save button text: ${saveText}`);
+    
+    // Test translation with parameters
+    const selectedText = t('loras.bulkOperations.selected', { count: 3 });
+    console.log(`Selection text: ${selectedText}`);
+    
+    // Test non-existent key (should return the key itself)
+    const missingKey = t('non.existent.key');
+    console.log(`Missing key: ${missingKey}`);
+}
+
+// Test DOM translation
+function testDOMTranslation() {
+    console.log('=== Testing DOM Translation ===');
+    
+    const container = createMockDOM();
+    
+    // Apply translations
+    initializePageI18n();
+    
+    // Check if translations were applied
+    const titleElement = container.querySelector('[data-i18n="header.appTitle"]');
+    const inputElement = container.querySelector('input[data-i18n="header.search.placeholder"]');
+    const buttonElement = container.querySelector('[data-i18n="common.actions.save"]');
+    
+    console.log(`Title: ${titleElement.textContent}`);
+    console.log(`Input placeholder: ${inputElement.placeholder}`);
+    console.log(`Button: ${buttonElement.textContent}`);
+    
+    // Clean up
+    document.body.removeChild(container);
+}
+
+// Test formatting functions
+function testFormatting() {
+    console.log('=== Testing Formatting Functions ===');
+    
+    // Test file size formatting
+    const sizes = [0, 1024, 1048576, 1073741824];
+    sizes.forEach(size => {
+        const formatted = formatFileSize(size);
+        console.log(`${size} bytes = ${formatted}`);
+    });
+    
+    // Test date formatting
+    const date = new Date('2024-01-15T10:30:00');
+    const formattedDate = formatDate(date, { 
+        year: 'numeric', 
+        month: 'long', 
+        day: 'numeric' 
+    });
+    console.log(`Date: ${formattedDate}`);
+    
+    // Test number formatting
+    const number = 1234.567;
+    const formattedNumber = formatNumber(number, { 
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+    });
+    console.log(`Number: ${formattedNumber}`);
+}
+
+// Test language detection
+function testLanguageDetection() {
+    console.log('=== Testing Language Detection ===');
+    console.log(`Detected language: ${i18n.getCurrentLocale()}`);
+    console.log(`Is RTL: ${i18n.isRTL()}`);
+    console.log(`Browser language: ${navigator.language}`);
+}
+
+// Test unused translations detection
+function testUnusedTranslationsDetection() {
+    console.log('=== Testing Unused Translations Detection ===');
+    
+    // Mock used keys
+    const mockUsedKeys = [
+        'common.actions.save',
+        'common.actions.cancel',
+        'header.appTitle'
+    ];
+    
+    // Get all translations
+    const allTranslations = i18n.getTranslations();
+    
+    // Find unused keys (only considering leaf nodes)
+    const unusedKeys = findUnusedTranslationKeys(allTranslations, mockUsedKeys);
+    
+    console.log(`Found ${unusedKeys.length} unused translation keys`);
+    console.log('First 5 unused keys:', unusedKeys.slice(0, 5));
+    
+    // Find missing keys
+    const missingKeys = findMissingTranslationKeys(allTranslations, [
+        ...mockUsedKeys,
+        'non.existent.key'
+    ]);
+    
+    console.log(`Found ${missingKeys.length} missing translation keys:`, missingKeys);
+}
+
+// Run all tests
+function runTests() {
+    console.log('Starting i18n System Tests...');
+    console.log('=====================================');
+    
+    testLanguageDetection();
+    testBasicTranslation();
+    testFormatting();
+    
+    // Only test DOM if we're in a browser environment
+    if (typeof document !== 'undefined') {
+        testDOMTranslation();
+    }
+    
+    // Test unused translations detection
+    testUnusedTranslationsDetection();
+    
+    console.log('=====================================');
+    console.log('i18n System Tests Completed!');
+}
+
+// Export for manual testing
+export { runTests };
+
+// Auto-run tests if this module is loaded directly
+if (typeof window !== 'undefined' && window.location.search.includes('test=i18n')) {
+    document.addEventListener('DOMContentLoaded', runTests);
+}

static/js/utils/VirtualScroller.js

@@ -210,7 +210,7 @@ export class VirtualScroller {
             this.scheduleRender();
         } catch (err) {
             console.error('Failed to initialize virtual scroller:', err);
-            showToast('Failed to load items', 'error');
+            showToast('toast.virtual.loadFailed', {}, 'error');
         }
     }
 
@@ -293,7 +293,7 @@ export class VirtualScroller {
             return items;
         } catch (err) {
             console.error('Failed to load more items:', err);
-            showToast('Failed to load more items', 'error');
+            showToast('toast.virtual.loadMoreFailed', {}, 'error');
         } finally {
             this.isLoading = false;
             pageState.isLoading = false;
@@ -571,7 +571,7 @@ export class VirtualScroller {
             }
         } catch (err) {
             console.error('Failed to fetch data window:', err);
-            showToast('Failed to load items at this position', 'error');
+            showToast('toast.virtual.loadPositionFailed', {}, 'error');
         } finally {
             this.fetchingWindow = false;
         }

static/js/utils/i18nHelpers.js

@@ -0,0 +1,109 @@
+/**
+ * i18n utility functions for safe translation handling
+ */
+
+/**
+ * Synchronous translation function.
+ * Assumes window.i18n is ready.
+ * @param {string} key - Translation key
+ * @param {Object} params - Parameters for interpolation
+ * @param {string} fallback - Fallback text if translation fails
+ * @returns {string} Translated text
+ */
+export function translate(key, params = {}, fallback = null) {
+    if (!window.i18n) {
+        console.warn('i18n not available');
+        return fallback || key;
+    }
+    const translation = window.i18n.t(key, params);
+    if (translation === key && fallback) {
+        return fallback;
+    }
+    return translation;
+}
+
+/**
+ * Update element text with translation
+ * @param {HTMLElement|string} element - Element or selector
+ * @param {string} key - Translation key
+ * @param {Object} params - Parameters for interpolation
+ * @param {string} fallback - Fallback text
+ */
+export function updateElementText(element, key, params = {}, fallback = null) {
+    const el = typeof element === 'string' ? document.querySelector(element) : element;
+    if (!el) return;
+    
+    const text = translate(key, params, fallback);
+    el.textContent = text;
+}
+
+/**
+ * Update element attribute with translation
+ * @param {HTMLElement|string} element - Element or selector
+ * @param {string} attribute - Attribute name (e.g., 'title', 'placeholder')
+ * @param {string} key - Translation key
+ * @param {Object} params - Parameters for interpolation
+ * @param {string} fallback - Fallback text
+ */
+export function updateElementAttribute(element, attribute, key, params = {}, fallback = null) {
+    const el = typeof element === 'string' ? document.querySelector(element) : element;
+    if (!el) return;
+    
+    const text = translate(key, params, fallback);
+    el.setAttribute(attribute, text);
+}
+
+/**
+ * Create a reactive translation that updates when language changes
+ * @param {string} key - Translation key
+ * @param {Object} params - Parameters for interpolation
+ * @param {Function} callback - Callback function to call with translated text
+ */
+export function createReactiveTranslation(key, params = {}, callback) {
+    let currentLanguage = null;
+    
+    const updateTranslation = () => {
+        if (!window.i18n) return;
+        
+        const newLanguage = window.i18n.getCurrentLocale();
+        
+        // Only update if language changed or first time
+        if (newLanguage !== currentLanguage) {
+            currentLanguage = newLanguage;
+            const translation = window.i18n.t(key, params);
+            callback(translation);
+        }
+    };
+    
+    // Initial update
+    updateTranslation();
+    
+    // Listen for language changes
+    window.addEventListener('languageChanged', updateTranslation);
+    window.addEventListener('i18nReady', updateTranslation);
+    
+    // Return cleanup function
+    return () => {
+        window.removeEventListener('languageChanged', updateTranslation);
+        window.removeEventListener('i18nReady', updateTranslation);
+    };
+}
+
+/**
+ * Batch update multiple elements with translations
+ * @param {Array} updates - Array of update configurations
+ * Each update should have: { element, key, type: 'text'|'attribute', attribute?, params?, fallback? }
+ */
+export function batchUpdateTranslations(updates) {
+    if (!window.i18n) return;
+    
+    for (const update of updates) {
+        const { element, key, type = 'text', attribute, params = {}, fallback } = update;
+        
+        if (type === 'text') {
+            updateElementText(element, key, params, fallback);
+        } else if (type === 'attribute' && attribute) {
+            updateElementAttribute(element, attribute, key, params, fallback);
+        }
+    }
+}

static/js/utils/infiniteScroll.js

@@ -129,7 +129,7 @@ async function initializeVirtualScroll(pageType) {
         
     } catch (error) {
         console.error(`Error initializing virtual scroller for ${pageType}:`, error);
-        showToast(`Failed to initialize ${pageType} page. Please reload.`, 'error');
+        showToast('toast.general.pageInitFailed', { pageType }, 'error');
         
         // Fallback: show a message in the grid
         grid.innerHTML = `

static/js/utils/uiHelpers.js

@@ -1,14 +1,22 @@
+import { translate } from './i18nHelpers.js';
 import { state, getCurrentPageState } from '../state/index.js';
 import { getStorageItem, setStorageItem } from './storageHelpers.js';
 import { NODE_TYPE_ICONS, DEFAULT_NODE_COLOR } from './constants.js';
 
+/**
+ * Utility function to copy text to clipboard with fallback for older browsers
+ * @param {string} text - The text to copy to clipboard
+ * @param {string} successMessage - Optional success message to show in toast
+ * @returns {Promise<boolean>} - Promise that resolves to true if copy was successful
 /**
  * Utility function to copy text to clipboard with fallback for older browsers
  * @param {string} text - The text to copy to clipboard
  * @param {string} successMessage - Optional success message to show in toast
  * @returns {Promise<boolean>} - Promise that resolves to true if copy was successful
  */
-export async function copyToClipboard(text, successMessage = 'Copied to clipboard') {
+export async function copyToClipboard(text, successMessage = null) {
+    const defaultSuccessMessage = successMessage || translate('uiHelpers.clipboard.copied', {}, 'Copied to clipboard');
+    
     try {
         // Modern clipboard API
         if (navigator.clipboard && window.isSecureContext) {
@@ -25,18 +33,19 @@ export async function copyToClipboard(text, successMessage = 'Copied to clipboar
             document.body.removeChild(textarea);
         }
         
-        if (successMessage) {
-            showToast(successMessage, 'success');
+        if (defaultSuccessMessage) {
+            showToast('uiHelpers.clipboard.copied', {}, 'success');
         }
         return true;
     } catch (err) {
         console.error('Copy failed:', err);
-        showToast('Copy failed', 'error');
+        showToast('uiHelpers.clipboard.copyFailed', {}, 'error');
         return false;
     }
 }
 
-export function showToast(message, type = 'info') {
+export function showToast(key, params = {}, type = 'info') {
+    const message = translate(key, params);
     const toast = document.createElement('div');
     toast.className = `toast toast-${type}`;
     toast.textContent = message;
@@ -294,7 +303,8 @@ export function copyLoraSyntax(card) {
   const includeTriggerWords = state.global.settings.includeTriggerWords;
 
   if (!includeTriggerWords) {
-    copyToClipboard(baseSyntax, "LoRA syntax copied to clipboard");
+    const message = translate('uiHelpers.lora.syntaxCopied', {}, 'LoRA syntax copied to clipboard');
+    copyToClipboard(baseSyntax, message);
     return;
   }
 
@@ -307,10 +317,8 @@ export function copyLoraSyntax(card) {
     !Array.isArray(trainedWords) ||
     trainedWords.length === 0
   ) {
-    copyToClipboard(
-      baseSyntax,
-      "LoRA syntax copied to clipboard (no trigger words found)"
-    );
+    const message = translate('uiHelpers.lora.syntaxCopiedNoTriggerWords', {}, 'LoRA syntax copied to clipboard (no trigger words found)');
+    copyToClipboard(baseSyntax, message);
     return;
   }
 
@@ -325,10 +333,8 @@ export function copyLoraSyntax(card) {
     if (triggers.length > 0) {
       finalSyntax = `${baseSyntax}, ${triggers.join(", ")}`;
     }
-    copyToClipboard(
-      finalSyntax,
-      "LoRA syntax with trigger words copied to clipboard"
-    );
+    const message = translate('uiHelpers.lora.syntaxCopiedWithTriggerWords', {}, 'LoRA syntax with trigger words copied to clipboard');
+    copyToClipboard(finalSyntax, message);
   } else {
     // Multiple groups: format with separators
     const groups = trainedWords
@@ -348,10 +354,8 @@ export function copyLoraSyntax(card) {
         finalSyntax += `\n${"-".repeat(17)}\n${groups[i]}`;
       }
     }
-    copyToClipboard(
-      finalSyntax,
-      "LoRA syntax with trigger word groups copied to clipboard"
-    );
+    const message = translate('uiHelpers.lora.syntaxCopiedWithTriggerWordGroups', {}, 'LoRA syntax with trigger word groups copied to clipboard');
+    copyToClipboard(finalSyntax, message);
   }
 }
 
@@ -372,11 +376,11 @@ export async function sendLoraToWorkflow(loraSyntax, replaceMode = false, syntax
       // Handle specific error cases
       if (registryData.error === 'Standalone Mode Active') {
         // Standalone mode - show warning with specific message
-        showToast(registryData.message || 'Cannot interact with ComfyUI in standalone mode', 'warning');
+        showToast('toast.general.cannotInteractStandalone', {}, 'warning');
         return false;
       } else {
         // Other errors - show error toast
-        showToast(registryData.message || registryData.error || 'Failed to get workflow information', 'error');
+        showToast('toast.general.failedWorkflowInfo', {}, 'error');
         return false;
       }
     }
@@ -384,7 +388,7 @@ export async function sendLoraToWorkflow(loraSyntax, replaceMode = false, syntax
     // Success case - check node count
     if (registryData.data.node_count === 0) {
       // No nodes found - show warning
-      showToast('No supported target nodes found in workflow', 'warning');
+      showToast('uiHelpers.workflow.noSupportedNodes', {}, 'warning');
       return false;
     } else if (registryData.data.node_count > 1) {
       // Multiple nodes - show selector
@@ -397,7 +401,7 @@ export async function sendLoraToWorkflow(loraSyntax, replaceMode = false, syntax
     }
   } catch (error) {
     console.error('Failed to get registry:', error);
-    showToast('Failed to communicate with ComfyUI', 'error');
+    showToast('uiHelpers.workflow.communicationFailed', {}, 'error');
     return false;
   }
 }
@@ -429,18 +433,30 @@ async function sendToSpecificNode(nodeIds, loraSyntax, replaceMode, syntaxType)
     if (result.success) {
       // Use different toast messages based on syntax type
       if (syntaxType === 'recipe') {
-        showToast(`Recipe ${replaceMode ? 'replaced' : 'added'} to workflow`, 'success');
+        const messageKey = replaceMode ? 
+          'uiHelpers.workflow.recipeReplaced' :
+          'uiHelpers.workflow.recipeAdded';
+        showToast(messageKey, {}, 'success');
       } else {
-        showToast(`LoRA ${replaceMode ? 'replaced' : 'added'} to workflow`, 'success');
+        const messageKey = replaceMode ? 
+          'uiHelpers.workflow.loraReplaced' :
+          'uiHelpers.workflow.loraAdded';
+        showToast(messageKey, {}, 'success');
       }
       return true;
     } else {
-      showToast(result.error || `Failed to send ${syntaxType === 'recipe' ? 'recipe' : 'LoRA'} to workflow`, 'error');
+      const messageKey = syntaxType === 'recipe' ? 
+        'uiHelpers.workflow.recipeFailedToSend' :
+        'uiHelpers.workflow.loraFailedToSend';
+      showToast(messageKey, {}, 'error');
       return false;
     }
   } catch (error) {
     console.error('Failed to send to workflow:', error);
-    showToast(`Failed to send ${syntaxType === 'recipe' ? 'recipe' : 'LoRA'} to workflow`, 'error');
+    const messageKey = syntaxType === 'recipe' ? 
+      'uiHelpers.workflow.recipeFailedToSend' :
+      'uiHelpers.workflow.loraFailedToSend';
+    showToast(messageKey, {}, 'error');
     return false;
   }
 }
@@ -482,20 +498,26 @@ function showNodeSelector(nodes, loraSyntax, replaceMode, syntaxType) {
   }).join('');
   
   // Add header with action mode indicator
-  const actionType = syntaxType === 'recipe' ? 'Recipe' : 'LoRA';
-  const actionMode = replaceMode ? 'Replace' : 'Append';
+  const actionType = syntaxType === 'recipe' ? 
+    translate('uiHelpers.nodeSelector.recipe', {}, 'Recipe') :
+    translate('uiHelpers.nodeSelector.lora', {}, 'LoRA');
+  const actionMode = replaceMode ? 
+    translate('uiHelpers.nodeSelector.replace', {}, 'Replace') :
+    translate('uiHelpers.nodeSelector.append', {}, 'Append');
+  const selectTargetNodeText = translate('uiHelpers.nodeSelector.selectTargetNode', {}, 'Select target node');
+  const sendToAllText = translate('uiHelpers.nodeSelector.sendToAll', {}, 'Send to All');
   
   selector.innerHTML = `
     <div class="node-selector-header">
       <span class="selector-action-type">${actionMode} ${actionType}</span>
-      <span class="selector-instruction">Select target node</span>
+      <span class="selector-instruction">${selectTargetNodeText}</span>
     </div>
     ${nodeItems}
     <div class="node-item send-all-item" data-action="send-all">
       <div class="node-icon-indicator all-nodes">
         <i class="fas fa-broadcast-tower"></i>
       </div>
-      <span>Send to All</span>
+      <span>${sendToAllText}</span>
     </div>
   `;
   
@@ -654,15 +676,16 @@ export async function openExampleImagesFolder(modelHash) {
     const result = await response.json();
     
     if (result.success) {
-      showToast('Opening example images folder', 'success');
+      const message = translate('uiHelpers.exampleImages.openingFolder', {}, 'Opening example images folder');
+      showToast('uiHelpers.exampleImages.opened', {}, 'success');
       return true;
     } else {
-      showToast(result.error || 'Failed to open example images folder', 'error');
+      showToast('uiHelpers.exampleImages.failedToOpen', {}, 'error');
       return false;
     }
   } catch (error) {
     console.error('Failed to open example images folder:', error);
-    showToast('Failed to open example images folder', 'error');
+    showToast('uiHelpers.exampleImages.failedToOpen', {}, 'error');
     return false;
   }
 }

templates/base.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>{% block title %}LoRA Manager{% endblock %}</title>
+    <title>{% block title %}{{ t('header.appTitle') }}{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/loras_static/css/style.css">
     {% block page_css %}{% endblock %}
@@ -12,14 +12,6 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/loras_static/images/favicon-16x16.png">
     <link rel="manifest" href="/loras_static/images/site.webmanifest">
 
-    <!-- 预加载关键资源 -->
-    <link rel="preload" href="/loras_static/css/style.css" as="style">
-    {% block preload %}{% endblock %}
-
-    <!-- 优化字体加载 -->
-    <link rel="preload" href="/loras_static/vendor/font-awesome/webfonts/fa-solid-900.woff2"
-        as="font" type="font/woff2" crossorigin>
-
     <!-- 添加性能监控 -->
     <script>
         performance.mark('page-start');
@@ -77,7 +69,7 @@
         {% block additional_components %}{% endblock %}
 
         <!-- Add back-to-top button here -->
-        <button id="backToTopBtn" class="back-to-top" title="Back to top">
+        <button id="backToTopBtn" class="back-to-top" title="{{ t('common.actions.backToTop') }}">
             <i class="fas fa-chevron-up"></i>
         </button>
 

templates/checkpoints.html

@@ -1,30 +1,26 @@
 {% extends "base.html" %}
 
-{% block title %}Checkpoints Manager{% endblock %}
+{% block title %}{{ t('checkpoints.title') }}{% endblock %}
 {% block page_id %}checkpoints{% endblock %}
 
-{% block preload %}
-<link rel="preload" href="/loras_static/js/checkpoints.js" as="script" crossorigin="anonymous">
-{% endblock %}
-
-{% block init_title %}Initializing Checkpoints Manager{% endblock %}
-{% block init_message %}Scanning and building checkpoints cache. This may take a few moments...{% endblock %}
+{% block init_title %}{{ t('initialization.checkpoints.title') }}{% endblock %}
+{% block init_message %}{{ t('initialization.checkpoints.message') }}{% endblock %}
 {% block init_check_url %}/api/checkpoints/list?page=1&page_size=1{% endblock %}
 
 {% block additional_components %}
 
 <div id="checkpointContextMenu" class="context-menu" style="display: none;">
-    <div class="context-menu-item" data-action="refresh-metadata"><i class="fas fa-sync"></i> Refresh Civitai Data</div>
-    <div class="context-menu-item" data-action="relink-civitai"><i class="fas fa-link"></i> Re-link to Civitai</div>
-    <div class="context-menu-item" data-action="copyname"><i class="fas fa-copy"></i> Copy Model Filename</div>
-    <div class="context-menu-item" data-action="preview"><i class="fas fa-folder-open"></i> Open Examples Folder</div>
-    <div class="context-menu-item" data-action="download-examples"><i class="fas fa-download"></i> Download Example Images</div>
-    <div class="context-menu-item" data-action="replace-preview"><i class="fas fa-image"></i> Replace Preview</div>
-    <div class="context-menu-item" data-action="set-nsfw"><i class="fas fa-exclamation-triangle"></i> Set Content Rating</div>
+    <div class="context-menu-item" data-action="refresh-metadata"><i class="fas fa-sync"></i> {{ t('loras.contextMenu.refreshMetadata') }}</div>
+    <div class="context-menu-item" data-action="relink-civitai"><i class="fas fa-link"></i> {{ t('loras.contextMenu.relinkCivitai') }}</div>
+    <div class="context-menu-item" data-action="copyname"><i class="fas fa-copy"></i> {{ t('loras.contextMenu.copyFilename') }}</div>
+    <div class="context-menu-item" data-action="preview"><i class="fas fa-folder-open"></i> {{ t('loras.contextMenu.openExamples') }}</div>
+    <div class="context-menu-item" data-action="download-examples"><i class="fas fa-download"></i> {{ t('loras.contextMenu.downloadExamples') }}</div>
+    <div class="context-menu-item" data-action="replace-preview"><i class="fas fa-image"></i> {{ t('loras.contextMenu.replacePreview') }}</div>
+    <div class="context-menu-item" data-action="set-nsfw"><i class="fas fa-exclamation-triangle"></i> {{ t('loras.contextMenu.setContentRating') }}</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</div>
-    <div class="context-menu-item" data-action="exclude"><i class="fas fa-eye-slash"></i> Exclude Model</div>
-    <div class="context-menu-item delete-item" data-action="delete"><i class="fas fa-trash"></i> Delete Model</div>
+    <div class="context-menu-item" data-action="move"><i class="fas fa-folder-open"></i> {{ t('loras.contextMenu.moveToFolder') }}</div>
+    <div class="context-menu-item" data-action="exclude"><i class="fas fa-eye-slash"></i> {{ t('loras.contextMenu.excludeModel') }}</div>
+    <div class="context-menu-item delete-item" data-action="delete"><i class="fas fa-trash"></i> {{ t('loras.contextMenu.deleteModel') }}</div>
 </div>
 {% endblock %}
 

templates/components/context_menu.html

@@ -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>{{ t('loras.contextMenu.refreshMetadata') }}</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>{{ t('loras.contextMenu.relinkCivitai') }}</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>{{ t('loras.contextMenu.copySyntax') }}</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>{{ t('loras.contextMenu.sendToWorkflowAppend') }}</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>{{ t('loras.contextMenu.sendToWorkflowReplace') }}</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>{{ t('loras.contextMenu.openExamples') }}</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>{{ t('loras.contextMenu.downloadExamples') }}</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>{{ t('loras.contextMenu.replacePreview') }}</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>{{ t('loras.contextMenu.setContentRating') }}</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>{{ t('loras.contextMenu.moveToFolder') }}</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>{{ t('loras.contextMenu.excludeModel') }}</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>{{ t('loras.contextMenu.deleteModel') }}</span>
     </div>
 </div>
 
 <div id="nsfwLevelSelector" class="nsfw-level-selector">
     <div class="nsfw-level-header">
-        <h3>Set Content Rating</h3>
+        <h3>{{ t('modals.contentRating.title') }}</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>{{ t('modals.contentRating.current') }}:</span> <span id="currentNSFWLevel">{{ t('common.status.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">{{ t('modals.contentRating.levels.pg') }}</button>
+            <button class="nsfw-level-btn" data-level="2">{{ t('modals.contentRating.levels.pg13') }}</button>
+            <button class="nsfw-level-btn" data-level="4">{{ t('modals.contentRating.levels.r') }}</button>
+            <button class="nsfw-level-btn" data-level="8">{{ t('modals.contentRating.levels.x') }}</button>
+            <button class="nsfw-level-btn" data-level="16">{{ t('modals.contentRating.levels.xxx') }}</button>
         </div>
     </div>
 </div>

templates/components/controls.html

@@ -1,59 +1,59 @@
 <div class="controls">
     <div class="actions">
         <div class="action-buttons">
-            <div title="Sort models by..." class="control-group">
+            <div title="{{ t('loras.controls.sort.title') }}" class="control-group">
                 <select id="sortSelect">
-                    <optgroup label="Name">
-                        <option value="name:asc">A - Z</option>
-                        <option value="name:desc">Z - A</option>
+                    <optgroup label="{{ t('loras.controls.sort.name') }}">
+                        <option value="name:asc">{{ t('loras.controls.sort.nameAsc') }}</option>
+                        <option value="name:desc">{{ t('loras.controls.sort.nameDesc') }}</option>
                     </optgroup>
-                    <optgroup label="Date Added">
-                        <option value="date:desc">Newest</option>
-                        <option value="date:asc">Oldest</option>
+                    <optgroup label="{{ t('loras.controls.sort.date') }}">
+                        <option value="date:desc">{{ t('loras.controls.sort.dateDesc') }}</option>
+                        <option value="date:asc">{{ t('loras.controls.sort.dateAsc') }}</option>
                     </optgroup>
-                    <optgroup label="File Size">
-                        <option value="size:desc">Largest</option>
-                        <option value="size:asc">Smallest</option>
+                    <optgroup label="{{ t('loras.controls.sort.size') }}">
+                        <option value="size:desc">{{ t('loras.controls.sort.sizeDesc') }}</option>
+                        <option value="size:asc">{{ t('loras.controls.sort.sizeAsc') }}</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 title="{{ t('loras.controls.refresh.title') }}" class="control-group dropdown-group">
+                <button data-action="refresh" class="dropdown-main"><i class="fas fa-sync"></i> <span>{{ t('common.actions.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>{{ t('loras.controls.refresh.quick') }}</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>{{ t('loras.controls.refresh.full') }}</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" title="{{ t('loras.controls.fetch') }}"><i class="fas fa-download"></i> <span>{{ t('loras.controls.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" title="{{ t('loras.controls.download') }}">
+                    <i class="fas fa-cloud-download-alt"></i> <span>{{ t('loras.controls.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" title="{{ t('loras.controls.bulk') }}">
+                    <i class="fas fa-th-large"></i> <span><span>{{ t('loras.controls.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" title="{{ t('loras.controls.duplicates') }}">
+                    <i class="fas fa-clone"></i> <span>{{ t('loras.controls.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" title="{{ t('loras.controls.favorites') }}">
+                    <i class="fas fa-star"></i> <span>{{ t('loras.controls.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>{{ t('keyboard.navigation') }}</span>
                     <table class="keyboard-shortcuts">
                         <tr>
                             <td><span class="key">Page Up</span></td>
-                            <td>Scroll up one page</td>
+                            <td>{{ t('keyboard.shortcuts.pageUp') }}</td>
                         </tr>
                         <tr>
                             <td><span class="key">Page Down</span></td>
-                            <td>Scroll down one page</td>
+                            <td>{{ t('keyboard.shortcuts.pageDown') }}</td>
                         </tr>
                         <tr>
                             <td><span class="key">Home</span></td>
-                            <td>Jump to top</td>
+                            <td>{{ t('keyboard.shortcuts.home') }}</td>
                         </tr>
                         <tr>
                             <td><span class="key">End</span></td>
-                            <td>Jump to bottom</td>
+                            <td>{{ t('keyboard.shortcuts.end') }}</td>
                         </tr>
                     </table>
                 </span>
@@ -103,27 +103,27 @@
 <!-- Add bulk operations panel (initially hidden) -->
 <div id="bulkOperationsPanel" class="bulk-operations-panel hidden">
     <div class="bulk-operations-header">
-        <span id="selectedCount" class="selectable-count" title="Click to view selected items">
-            0 selected <i class="fas fa-caret-down dropdown-caret"></i>
+        <span id="selectedCount" class="selectable-count" title="{{ t('loras.bulkOperations.viewSelected') }}">
+            0 {{ t('loras.bulkOperations.selectedSuffix') }} <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" title="{{ t('loras.bulkOperations.sendToWorkflow') }}">
+                <i class="fas fa-arrow-right"></i> <span>{{ t('loras.bulkOperations.sendToWorkflow') }}</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" title="{{ t('loras.bulkOperations.copyAll') }}">
+                <i class="fas fa-copy"></i> <span>{{ t('loras.bulkOperations.copyAll') }}</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" title="{{ t('loras.bulkOperations.refreshAll') }}">
+                <i class="fas fa-sync-alt"></i> <span>{{ t('loras.bulkOperations.refreshAll') }}</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" title="{{ t('loras.bulkOperations.moveAll') }}">
+                <i class="fas fa-folder-open"></i> <span>{{ t('loras.bulkOperations.moveAll') }}</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" title="{{ t('loras.bulkOperations.deleteAll') }}" class="danger-btn">
+                <i class="fas fa-trash"></i> <span>{{ t('loras.bulkOperations.deleteAll') }}</span>
             </button>
-            <button data-action="clear" title="Clear selection">
-                <i class="fas fa-times"></i> Clear
+            <button data-action="clear" title="{{ t('loras.bulkOperations.clear') }}">
+                <i class="fas fa-times"></i> <span>{{ t('loras.bulkOperations.clear') }}</span>
             </button>
         </div>
     </div>

templates/components/duplicates_banner.html

@@ -2,26 +2,26 @@
 <div id="duplicatesBanner" class="duplicates-banner" style="display: none;">
     <div class="banner-content">
       <i class="fas fa-exclamation-triangle"></i>
-      <span id="duplicatesCount">Found 0 duplicate groups</span>
-      <i class="fas fa-question-circle help-icon" id="duplicatesHelp" aria-label="Help information"></i>
+      <span id="duplicatesCount">{{ t('duplicates.found', count=0) }}</span>
+      <i class="fas fa-question-circle help-icon" id="duplicatesHelp" aria-label="{{ t('common.actions.help') }}"></i>
       <div class="banner-actions">
         <div class="setting-contro" id="badgeToggleControl">
-          <span>Show Duplicates Notification:</span>
+          <span>{{ t('duplicates.showNotification') }}:</span>
           <label class="toggle-switch">
             <input type="checkbox" id="badgeToggleInput">
             <span class="toggle-slider"></span>
           </label>
         </div>
         <button class="btn-delete-selected disabled" onclick="modelDuplicatesManager.deleteSelectedDuplicates()">
-          Delete Selected (<span id="duplicatesSelectedCount">0</span>)
+          {{ t('duplicates.deleteSelected') }} (<span id="duplicatesSelectedCount">0</span>)
         </button>
         <button class="btn-exit-mode" onclick="modelDuplicatesManager.exitDuplicateMode()">
-          <i class="fas fa-times"></i> Exit Mode
+          <i class="fas fa-times"></i> {{ t('duplicates.exitMode') }}
         </button>
       </div>
     </div>
     <div class="help-tooltip" id="duplicatesHelpTooltip">
-      <p>Identical hashes mean identical model files, even if they have different names or previews.</p>
-      <p>Keep only one version (preferably with better metadata/previews) and safely delete the others.</p>
+      <p>{{ t('duplicates.help.identicalHashes') }}</p>
+      <p>{{ t('duplicates.help.keepOne') }}</p>
     </div>
 </div>

templates/components/folder_sidebar.html

@@ -4,12 +4,12 @@
 <!-- Folder Navigation Sidebar -->
 <div class="folder-sidebar" id="folderSidebar">
     <div class="sidebar-header" id="sidebarHeader">
-        <h3><i class="fas fa-home"></i> <span id="sidebarTitle">Model Root</span></h3>
+        <h3><i class="fas fa-home"></i> <span id="sidebarTitle">{{ t('sidebar.modelRoot') }}</span></h3>
         <div class="sidebar-header-actions">
-            <button class="sidebar-action-btn" id="sidebarCollapseAll" title="Collapse All Folders">
+            <button class="sidebar-action-btn" id="sidebarCollapseAll" title="{{ t('sidebar.collapseAll') }}">
                 <i class="fas fa-compress-alt"></i>
             </button>
-            <button class="sidebar-action-btn" id="sidebarPinToggle" title="Pin/Unpin Sidebar">
+            <button class="sidebar-action-btn" id="sidebarPinToggle" title="{{ t('sidebar.pinToggle') }}">
                 <i class="fas fa-thumbtack"></i>
             </button>
         </div>

templates/components/header.html

@@ -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">{{ t('header.appTitle') }}</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>{{ t('header.navigation.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>{{ t('header.navigation.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>{{ t('header.navigation.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>{{ t('header.navigation.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>{{ t('header.navigation.statistics') }}</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" placeholder="{{ t('header.search.placeholder') }}" />
         <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" title="{{ t('header.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" title="{{ t('header.filter.title') }}">
           <i class="fas fa-filter"></i>
           <span class="filter-badge" id="activeFiltersCount" style="display: none">0</span>
         </button>
@@ -42,23 +42,23 @@
     <div class="header-actions">
       <!-- Integrated corner controls -->
       <div class="header-controls">
-        <div class="theme-toggle" title="Toggle theme">
+        <div class="theme-toggle" title="{{ t('header.theme.toggle') }}">
           <i class="fas fa-moon dark-icon"></i>
           <i class="fas fa-sun light-icon"></i>
           <i class="fas fa-adjust auto-icon"></i>
         </div>
-        <div class="settings-toggle" title="Settings">
+        <div class="settings-toggle" title="{{ t('common.actions.settings') }}">
           <i class="fas fa-cog"></i>
         </div>
-        <div class="help-toggle" id="helpToggleBtn" title="Help & Tutorials">
+        <div class="help-toggle" id="helpToggleBtn" title="{{ t('common.actions.help') }}">
           <i class="fas fa-question-circle"></i>
           <span class="update-badge"></span>
         </div>
-        <div class="update-toggle" id="updateToggleBtn" title="Check Updates">
+        <div class="update-toggle" id="updateToggleBtn" title="{{ t('header.actions.checkUpdates') }}">
           <i class="fas fa-bell"></i>
           <span class="update-badge"></span>
         </div>
-        <div class="support-toggle" id="supportToggleBtn" title="Support">
+        <div class="support-toggle" id="supportToggleBtn" title="{{ t('header.actions.support') }}">
           <i class="fas fa-heart"></i>
         </div>
       </div>
@@ -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>{{ t('header.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>{{ t('header.search.searchIn') }}</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">{{ t('header.search.filters.title') }}</div>
+      <div class="search-option-tag active" data-option="tags">{{ t('header.search.filters.tags') }}</div>
+      <div class="search-option-tag active" data-option="loraName">{{ t('header.search.filters.loraName') }}</div>
+      <div class="search-option-tag active" data-option="loraModel">{{ t('header.search.filters.loraModel') }}</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">{{ t('header.search.filters.filename') }}</div>
+      <div class="search-option-tag active" data-option="modelname">{{ t('header.search.filters.modelname') }}</div>
+      <div class="search-option-tag active" data-option="tags">{{ t('header.search.filters.tags') }}</div>
+      <div class="search-option-tag" data-option="creator">{{ t('header.search.filters.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">{{ t('header.search.filters.filename') }}</div>
+      <div class="search-option-tag active" data-option="modelname">{{ t('header.search.filters.modelname') }}</div>
+      <div class="search-option-tag active" data-option="tags">{{ t('header.search.filters.tags') }}</div>
+      <div class="search-option-tag" data-option="creator">{{ t('header.search.filters.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">{{ t('header.search.filters.filename') }}</div>
+      <div class="search-option-tag active" data-option="modelname">{{ t('header.search.filters.modelname') }}</div>
+      <div class="search-option-tag active" data-option="tags">{{ t('header.search.filters.tags') }}</div>
+      <div class="search-option-tag" data-option="creator">{{ t('header.search.filters.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>{{ t('header.filter.title') }}</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>{{ t('header.filter.baseModel') }}</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>{{ t('header.filter.modelTags') }}</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">{{ t('common.status.loading') }}</div>
     </div>
   </div>
   <div class="filter-actions">
     <button class="clear-filters-btn" onclick="filterManager.clearFilters()">
-      Clear All Filters
+      {{ t('header.filter.clearAll') }}
     </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');

templates/components/import_modal.html

@@ -2,29 +2,29 @@
     <div class="modal-content">
         <div class="modal-header">
             <button class="close" onclick="modalManager.closeModal('importModal')">&times;</button>
-            <h2>Import Recipe</h2>
+            <h2>{{ t('recipes.controls.import.action') }}</h2>
         </div>
         
         <!-- Step 1: Upload Image or Input URL -->
         <div class="import-step" id="uploadStep">
             <div class="import-mode-toggle">
                 <button class="toggle-btn active" data-mode="url" onclick="importManager.toggleImportMode('url')">
-                    <i class="fas fa-link"></i> URL / Local Path
+                    <i class="fas fa-link"></i> {{ t('recipes.controls.import.urlLocalPath') }}
                 </button>
                 <button class="toggle-btn" data-mode="upload" onclick="importManager.toggleImportMode('upload')">
-                    <i class="fas fa-upload"></i> Upload Image
+                    <i class="fas fa-upload"></i> {{ t('recipes.controls.import.uploadImage') }}
                 </button>
             </div>
             
             <!-- Input URL/Path Section -->
             <div class="import-section" id="urlSection">
-                <p>Input a Civitai image URL or local file path to import as a recipe.</p>
+                <p>{{ t('recipes.controls.import.urlSectionDescription') }}</p>
                 <div class="input-group">
-                    <label for="imageUrlInput">Image URL or File Path:</label>
+                    <label for="imageUrlInput">{{ t('recipes.controls.import.imageUrlOrPath') }}</label>
                     <div class="input-with-button">
-                        <input type="text" id="imageUrlInput" placeholder="https://civitai.com/images/... or C:/path/to/image.png">
+                        <input type="text" id="imageUrlInput" placeholder="{{ t('recipes.controls.import.urlPlaceholder') }}">
                         <button class="primary-btn" onclick="importManager.handleUrlInput()">
-                            <i class="fas fa-download"></i> Fetch Image
+                            <i class="fas fa-download"></i> {{ t('recipes.controls.import.fetchImage') }}
                         </button>
                     </div>
                     <div class="error-message" id="importUrlError"></div>
@@ -33,13 +33,13 @@
             
             <!-- Upload Image Section -->
             <div class="import-section" id="uploadSection">
-                <p>Upload an image with LoRA metadata to import as a recipe.</p>
+                <p>{{ t('recipes.controls.import.uploadSectionDescription') }}</p>
                 <div class="input-group">
-                    <label for="recipeImageUpload">Select Image:</label>
+                    <label for="recipeImageUpload">{{ t('recipes.controls.import.selectImage') }}</label>
                     <div class="file-input-wrapper">
                         <input type="file" id="recipeImageUpload" accept="image/*" onchange="importManager.handleImageUpload(event)">
                         <div class="file-input-button">
-                            <i class="fas fa-upload"></i> Select Image
+                            <i class="fas fa-upload"></i> {{ t('recipes.controls.import.selectImage') }}
                         </div>
                     </div>
                     <div class="error-message" id="uploadError"></div>
@@ -47,7 +47,7 @@
             </div>
             
             <div class="modal-actions">
-                <button class="secondary-btn" onclick="modalManager.closeModal('importModal')">Cancel</button>
+                <button class="secondary-btn" onclick="modalManager.closeModal('importModal')">{{ t('common.actions.cancel') }}</button>
             </div>
         </div>
         
@@ -60,28 +60,28 @@
                 
                 <div class="recipe-form-container">
                     <div class="input-group">
-                        <label for="recipeName">Recipe Name</label>
-                        <input type="text" id="recipeName" placeholder="Enter recipe name" 
+                        <label for="recipeName">{{ t('recipes.controls.import.recipeName') }}</label>
+                        <input type="text" id="recipeName" placeholder="{{ t('recipes.controls.import.recipeNamePlaceholder') }}" 
                                onchange="importManager.handleRecipeNameChange(event)">
                     </div>
                     
                     <div class="input-group">
-                        <label>Tags (optional)</label>
+                        <label>{{ t('recipes.controls.import.tagsOptional') }}</label>
                         <div class="tag-input-container">
-                            <input type="text" id="tagInput" placeholder="Add a tag">
+                            <input type="text" id="tagInput" placeholder="{{ t('recipes.controls.import.addTagPlaceholder') }}">
                             <button class="secondary-btn" onclick="importManager.addTag()">
-                                <i class="fas fa-plus"></i> Add
+                                <i class="fas fa-plus"></i> {{ t('recipes.controls.import.addTag') }}
                             </button>
                         </div>
                         <div id="tagsContainer" class="tags-container">
-                            <div class="empty-tags">No tags added</div>
+                            <div class="empty-tags">{{ t('recipes.controls.import.noTagsAdded') }}</div>
                         </div>
                     </div>
                 </div>
             </div>
             
             <div class="input-group">
-                <label>LoRAs in this Recipe <span id="loraCountInfo" class="lora-count-info">(0/0 in library)</span></label>
+                <label>{{ t('recipes.controls.import.lorasInRecipe') }} <span id="loraCountInfo" class="lora-count-info">(0/0 in library)</span></label>
                 <div id="lorasList" class="loras-list">
                     <!-- LoRAs will be populated here -->
                 </div>
@@ -93,8 +93,8 @@
             </div>
             
             <div class="modal-actions">
-                <button class="secondary-btn" onclick="importManager.backToUpload()">Back</button>
-                <button class="primary-btn" onclick="importManager.proceedFromDetails()">Next</button>
+                <button class="secondary-btn" onclick="importManager.backToUpload()">{{ t('common.actions.back') }}</button>
+                <button class="primary-btn" onclick="importManager.proceedFromDetails()">{{ t('common.actions.next') }}</button>
             </div>
         </div>
         
@@ -104,9 +104,9 @@
                 <!-- Path preview with inline toggle -->
                 <div class="path-preview">
                     <div class="path-preview-header">
-                        <label>Download Location Preview:</label>
-                        <div class="inline-toggle-container" title="When enabled, files are automatically organized using configured path templates">
-                            <span class="inline-toggle-label">Use Default Path</span>
+                        <label>{{ t('recipes.controls.import.downloadLocationPreview') }}</label>
+                        <div class="inline-toggle-container" title="{{ t('recipes.controls.import.useDefaultPathTooltip') }}">
+                            <span class="inline-toggle-label">{{ t('recipes.controls.import.useDefaultPath') }}</span>
                             <div class="toggle-switch">
                                 <input type="checkbox" id="importUseDefaultPath">
                                 <label for="importUseDefaultPath" class="toggle-slider"></label>
@@ -114,13 +114,13 @@
                         </div>
                     </div>
                     <div class="path-display" id="importTargetPathDisplay">
-                        <span class="path-text">Select a LoRA root directory</span>
+                        <span class="path-text">{{ t('recipes.controls.import.selectLoraRoot') }}</span>
                     </div>
                 </div>
 
                 <!-- Model Root Selection -->
                 <div class="input-group">
-                    <label for="importLoraRoot">Select LoRA Root:</label>
+                    <label for="importLoraRoot">{{ t('recipes.controls.import.selectLoraRoot') }}</label>
                     <select id="importLoraRoot"></select>
                 </div>
 
@@ -128,10 +128,10 @@
                 <div class="manual-path-selection" id="importManualPathSelection">
                     <!-- Path input with autocomplete -->
                     <div class="input-group">
-                        <label for="importFolderPath">Target Folder Path:</label>
+                        <label for="importFolderPath">{{ t('recipes.controls.import.targetFolderPath') }}</label>
                         <div class="path-input-container">
-                            <input type="text" id="importFolderPath" placeholder="Type folder path or select from tree below..." autocomplete="off" />
-                            <button type="button" id="importCreateFolderBtn" class="create-folder-btn" title="Create new folder">
+                            <input type="text" id="importFolderPath" placeholder="{{ t('recipes.controls.import.folderPathPlaceholder') }}" autocomplete="off" />
+                            <button type="button" id="importCreateFolderBtn" class="create-folder-btn" title="{{ t('recipes.controls.import.createNewFolder') }}">
                                 <i class="fas fa-plus"></i>
                             </button>
                         </div>
@@ -141,13 +141,13 @@
                     <!-- Breadcrumb navigation -->
                     <div class="breadcrumb-nav" id="importBreadcrumbNav">
                         <span class="breadcrumb-item root" data-path="">
-                            <i class="fas fa-home"></i> Root
+                            <i class="fas fa-home"></i> {{ t('recipes.controls.import.root') }}
                         </span>
                     </div>
                     
                     <!-- Hierarchical folder tree -->
                     <div class="input-group">
-                        <label>Browse Folders:</label>
+                        <label>{{ t('recipes.controls.import.browseFolders') }}</label>
                         <div class="folder-tree-container">
                             <div class="folder-tree" id="importFolderTree">
                                 <!-- Tree will be loaded dynamically -->
@@ -158,8 +158,8 @@
             </div>
             
             <div class="modal-actions">
-                <button class="secondary-btn" onclick="importManager.backToDetails()">Back</button>
-                <button class="primary-btn" onclick="importManager.saveRecipe()">Download & Save Recipe</button>
+                <button class="secondary-btn" onclick="importManager.backToDetails()">{{ t('common.actions.back') }}</button>
+                <button class="primary-btn" onclick="importManager.saveRecipe()">{{ t('recipes.controls.import.downloadAndSaveRecipe') }}</button>
             </div>
         </div>
     </div>

templates/components/initialization.html

@@ -2,80 +2,79 @@
 <div class="initialization-container" id="initializationContainer">
     <div class="initialization-content">
         <div class="initialization-header">
-            <h2 id="initTitle">{% block init_title %}Initializing{% endblock %}</h2>
-            <p class="init-subtitle" id="initSubtitle">{% block init_message %}Preparing your workspace...{% endblock %}
+            <h2 id="initTitle">{% block init_title %}{{ t('initialization.title') }}{% endblock %}</h2>
+            <p class="init-subtitle" id="initSubtitle">{% block init_message %}{{ t('initialization.message') }}{% endblock %}
             </p>
         </div>
 
         <div class="loading-content">
             <div class="loading-spinner"></div>
-            <div class="loading-status" id="progressStatus">Initializing...</div>
+            <div class="loading-status" id="progressStatus">{{ t('initialization.status') }}</div>
             <!-- Use initialization-specific classes for the progress bar -->
             <div class="init-progress-container">
                 <div class="init-progress-bar" id="initProgressBar"></div>
             </div>
             <div class="progress-details">
                 <span id="progressPercentage">0%</span>
-                <span id="remainingTime">Estimating time...</span>
+                <span id="remainingTime">{{ t('initialization.estimatingTime') }}</span>
             </div>
         </div>
 
         <div class="tips-container">
             <div class="tips-header">
                 <i class="fas fa-lightbulb"></i>
-                <h3>Tips & Tricks</h3>
+                <h3>{{ t('initialization.tips.title') }}</h3>
             </div>
             <div class="tips-content">
                 <div class="tip-carousel" id="tipCarousel">
                     <div class="tip-item active">
                         <div class="tip-image">
-                            <img src="/loras_static/images/tips/civitai-api.png" alt="Civitai API Setup"
+                            <img src="/loras_static/images/tips/civitai-api.png" alt="{{ t('initialization.tips.civitai.alt') }}"
                                 onerror="this.src='/loras_static/images/no-preview.png'">
                         </div>
                         <div class="tip-text">
-                            <h4>Civitai Integration</h4>
-                            <p>Connect your Civitai account: Visit Profile Avatar → Settings → API Keys → Add API Key,
-                                then paste it in Lora Manager settings.</p>
+                            <h4>{{ t('initialization.tips.civitai.title') }}</h4>
+                            <p>{{ t('initialization.tips.civitai.description') }}</p>
                         </div>
                     </div>
                     <div class="tip-item">
                         <div class="tip-image">
-                            <img src="/loras_static/images/tips/civitai-download.png" alt="Civitai Download"
+                            <img src="/loras_static/images/tips/civitai-download.png" alt="{{ t('initialization.tips.download.alt') }}"
                                 onerror="this.src='/loras_static/images/no-preview.png'">
                         </div>
                         <div class="tip-text">
-                            <h4>Easy Download</h4>
-                            <p>Use Civitai URLs to quickly download and install new models.</p>
+                            <h4>{{ t('initialization.tips.download.title') }}</h4>
+                            <p>{{ t('initialization.tips.download.description') }}</p>
                         </div>
                     </div>
                     <div class="tip-item">
                         <div class="tip-image">
-                            <img src="/loras_static/images/tips/recipes.png" alt="Recipes"
+                            <img src="/loras_static/images/tips/recipes.png" alt="{{ t('initialization.tips.recipes.alt') }}"
                                 onerror="this.src='/loras_static/images/no-preview.png'">
                         </div>
                         <div class="tip-text">
-                            <h4>Save Recipes</h4>
-                            <p>Create recipes to save your favorite model combinations for future use.</p>
+                            <h4>{{ t('initialization.tips.recipes.title') }}</h4>
+                            <p>{{ t('initialization.tips.recipes.description') }}</p>
                         </div>
                     </div>
                     <div class="tip-item">
                         <div class="tip-image">
-                            <img src="/loras_static/images/tips/filter.png" alt="Filter Models"
+                            <img src="/loras_static/images/tips/filter.png" alt="{{ t('initialization.tips.filter.alt') }}"
                                 onerror="this.src='/loras_static/images/no-preview.png'">
                         </div>
                         <div class="tip-text">
-                            <h4>Fast Filtering</h4>
-                            <p>Filter models by tags or base model type using the filter button in the header.</p>
+                            <h4>{{ t('initialization.tips.filter.title') }}</h4>
+                            <p>{{ t('initialization.tips.filter.description') }}</p>
                         </div>
                     </div>
                     <div class="tip-item">
                         <div class="tip-image">
-                            <img src="/loras_static/images/tips/search.webp" alt="Quick Search"
+                            <img src="/loras_static/images/tips/search.webp" alt="{{ t('initialization.tips.search.alt') }}"
                                 onerror="this.src='/loras_static/images/no-preview.png'">
                         </div>
                         <div class="tip-text">
-                            <h4>Quick Search</h4>
-                            <p>Press Ctrl+F (Cmd+F on Mac) to quickly search within your current view.</p>
+                            <h4>{{ t('initialization.tips.search.title') }}</h4>
+                            <p>{{ t('initialization.tips.search.description') }}</p>
                         </div>
                     </div>
                 </div>

templates/components/modals/confirm_modals.html

@@ -1,12 +1,12 @@
 <!-- Delete Confirmation Modal -->
 <div id="deleteModal" class="modal delete-modal">
     <div class="modal-content delete-modal-content">
-        <h2>Delete Model</h2>
-        <p class="delete-message">Are you sure you want to delete this model and all associated files?</p>
+        <h2>{{ t('modals.deleteModel.title') }}</h2>
+        <p class="delete-message">{{ t('modals.deleteModel.message') }}</p>
         <div class="delete-model-info"></div>
         <div class="modal-actions">
-            <button class="cancel-btn" onclick="closeDeleteModal()">Cancel</button>
-            <button class="delete-btn" onclick="confirmDelete()">Delete</button>
+            <button class="cancel-btn" onclick="closeDeleteModal()">{{ t('common.actions.cancel') }}</button>
+            <button class="delete-btn" onclick="confirmDelete()">{{ t('common.actions.delete') }}</button>
         </div>
     </div>
 </div>
@@ -14,12 +14,12 @@
 <!-- Exclude Confirmation Modal -->
 <div id="excludeModal" class="modal delete-modal">
     <div class="modal-content delete-modal-content">
-        <h2>Exclude Model</h2>
-        <p class="delete-message">Are you sure you want to exclude this model? Excluded models won't appear in searches or model lists.</p>
+        <h2>{{ t('modals.excludeModel.title') }}</h2>
+        <p class="delete-message">{{ t('modals.excludeModel.message') }}</p>
         <div class="exclude-model-info"></div>
         <div class="modal-actions">
-            <button class="cancel-btn" onclick="closeExcludeModal()">Cancel</button>
-            <button class="exclude-btn" onclick="confirmExclude()">Exclude</button>
+            <button class="cancel-btn" onclick="closeExcludeModal()">{{ t('common.actions.cancel') }}</button>
+            <button class="exclude-btn" onclick="confirmExclude()">{{ t('modals.exclude.confirm') }}</button>
         </div>
     </div>
 </div>
@@ -27,14 +27,14 @@
 <!-- Recipes Duplicate Delete Confirmation Modal -->
 <div id="duplicateDeleteModal" class="modal delete-modal">
     <div class="modal-content delete-modal-content">
-        <h2>Delete Duplicate Recipes</h2>
-        <p class="delete-message">Are you sure you want to delete the selected duplicate recipes?</p>
+        <h2>{{ t('modals.deleteDuplicateRecipes.title') }}</h2>
+        <p class="delete-message">{{ t('modals.deleteDuplicateRecipes.message') }}</p>
         <div class="delete-model-info">
-            <p><span id="duplicateDeleteCount">0</span> recipes will be permanently deleted.</p>
+            <p><span id="duplicateDeleteCount">0</span> {{ t('modals.deleteDuplicateRecipes.countMessage') }}</p>
         </div>
         <div class="modal-actions">
-            <button class="cancel-btn" onclick="modalManager.closeModal('duplicateDeleteModal')">Cancel</button>
-            <button class="delete-btn" onclick="recipeManager.confirmDeleteDuplicates()">Delete</button>
+            <button class="cancel-btn" onclick="modalManager.closeModal('duplicateDeleteModal')">{{ t('common.actions.cancel') }}</button>
+            <button class="delete-btn" onclick="recipeManager.confirmDeleteDuplicates()">{{ t('common.actions.delete') }}</button>
         </div>
     </div>
 </div>
@@ -42,14 +42,14 @@
 <!-- Models Duplicate Delete Confirmation Modal -->
 <div id="modelDuplicateDeleteModal" class="modal delete-modal">
     <div class="modal-content delete-modal-content">
-        <h2>Delete Duplicate Models</h2>
-        <p class="delete-message">Are you sure you want to delete the selected duplicate models?</p>
+        <h2>{{ t('modals.deleteDuplicateModels.title') }}</h2>
+        <p class="delete-message">{{ t('modals.deleteDuplicateModels.message') }}</p>
         <div class="delete-model-info">
-            <p><span id="modelDuplicateDeleteCount">0</span> models will be permanently deleted.</p>
+            <p><span id="modelDuplicateDeleteCount">0</span> {{ t('modals.deleteDuplicateModels.countMessage') }}</p>
         </div>
         <div class="modal-actions">
-            <button class="cancel-btn" onclick="modalManager.closeModal('modelDuplicateDeleteModal')">Cancel</button>
-            <button class="delete-btn" onclick="modelDuplicatesManager.confirmDeleteDuplicates()">Delete</button>
+            <button class="cancel-btn" onclick="modalManager.closeModal('modelDuplicateDeleteModal')">{{ t('common.actions.cancel') }}</button>
+            <button class="delete-btn" onclick="modelDuplicatesManager.confirmDeleteDuplicates()">{{ t('common.actions.delete') }}</button>
         </div>
     </div>
 </div>
@@ -57,14 +57,14 @@
 <!-- Cache Clear Confirmation Modal -->
 <div id="clearCacheModal" class="modal delete-modal">
     <div class="modal-content delete-modal-content">
-        <h2>Clear Cache Files</h2>
-        <p class="delete-message">Are you sure you want to clear all cache files?</p>
+        <h2>{{ t('modals.clearCache.title') }}</h2>
+        <p class="delete-message">{{ t('modals.clearCache.message') }}</p>
         <div class="delete-model-info">
-            <p>This will remove all cached model data. The system will need to rebuild the cache on next startup, which may take some time depending on your model collection size.</p>
+            <p>{{ t('modals.clearCache.description') }}</p>
         </div>
         <div class="modal-actions">
-            <button class="cancel-btn" onclick="modalManager.closeModal('clearCacheModal')">Cancel</button>
-            <button class="delete-btn" onclick="settingsManager.executeClearCache()">Clear Cache</button>
+            <button class="cancel-btn" onclick="modalManager.closeModal('clearCacheModal')">{{ t('common.actions.cancel') }}</button>
+            <button class="delete-btn" onclick="settingsManager.executeClearCache()">{{ t('modals.clearCache.action') }}</button>
         </div>
     </div>
 </div>
@@ -72,14 +72,14 @@
 <!-- Bulk Delete Confirmation Modal -->
 <div id="bulkDeleteModal" class="modal delete-modal">
     <div class="modal-content delete-modal-content">
-        <h2>Delete Multiple Models</h2>
-        <p class="delete-message">Are you sure you want to delete all selected models and their associated files?</p>
+        <h2>{{ t('modals.bulkDelete.title') }}</h2>
+        <p class="delete-message">{{ t('modals.bulkDelete.message') }}</p>
         <div class="delete-model-info">
-            <p><span id="bulkDeleteCount">0</span> models will be permanently deleted.</p>
+            <p><span id="bulkDeleteCount">0</span> {{ t('modals.bulkDelete.countMessage') }}</p>
         </div>
         <div class="modal-actions">
-            <button class="cancel-btn" onclick="modalManager.closeModal('bulkDeleteModal')">Cancel</button>
-            <button class="delete-btn" onclick="bulkManager.confirmBulkDelete()">Delete All</button>
+            <button class="cancel-btn" onclick="modalManager.closeModal('bulkDeleteModal')">{{ t('common.actions.cancel') }}</button>
+            <button class="delete-btn" onclick="bulkManager.confirmBulkDelete()">{{ t('modals.bulkDelete.action') }}</button>
         </div>
     </div>
 </div>

templates/components/modals/download_modal.html

@@ -3,18 +3,18 @@
     <div class="modal-content">
         <div class="modal-header">
             <button class="close" id="closeDownloadModal">&times;</button>
-            <h2 id="downloadModalTitle">Download Model from URL</h2>
+            <h2 id="downloadModalTitle">{{ t('modals.download.title') }}</h2>
         </div>
         
         <!-- Step 1: URL Input -->
         <div class="download-step" id="urlStep">
             <div class="input-group">
-                <label for="modelUrl" id="modelUrlLabel">Civitai URL:</label>
-                <input type="text" id="modelUrl" placeholder="https://civitai.com/models/..." />
+                <label for="modelUrl" id="modelUrlLabel">{{ t('modals.download.url') }}:</label>
+                <input type="text" id="modelUrl" placeholder="{{ t('modals.download.placeholder') }}" />
                 <div class="error-message" id="urlError"></div>
             </div>
             <div class="modal-actions">
-                <button class="primary-btn" id="nextFromUrl">Next</button>
+                <button class="primary-btn" id="nextFromUrl">{{ t('common.actions.next') }}</button>
             </div>
         </div>
 
@@ -24,8 +24,8 @@
                 <!-- Versions will be inserted here dynamically -->
             </div>
             <div class="modal-actions">
-                <button class="secondary-btn" id="backToUrlBtn">Back</button>
-                <button class="primary-btn" id="nextFromVersion">Next</button>
+                <button class="secondary-btn" id="backToUrlBtn">{{ t('common.actions.back') }}</button>
+                <button class="primary-btn" id="nextFromVersion">{{ t('common.actions.next') }}</button>
             </div>
         </div>
 
@@ -35,9 +35,9 @@
                 <!-- Path preview with inline toggle -->
                 <div class="path-preview">
                     <div class="path-preview-header">
-                        <label>Download Location Preview:</label>
-                        <div class="inline-toggle-container" title="When enabled, files are automatically organized using configured path templates">
-                            <span class="inline-toggle-label">Use Default Path</span>
+                        <label>{{ t('modals.download.locationPreview') }}:</label>
+                        <div class="inline-toggle-container" title="{{ t('modals.download.useDefaultPathTooltip') }}">
+                            <span class="inline-toggle-label">{{ t('modals.download.useDefaultPath') }}</span>
                             <div class="toggle-switch">
                                 <input type="checkbox" id="useDefaultPath">
                                 <label for="useDefaultPath" class="toggle-slider"></label>
@@ -45,13 +45,13 @@
                         </div>
                     </div>
                     <div class="path-display" id="targetPathDisplay">
-                        <span class="path-text">Select a root directory</span>
+                        <span class="path-text">{{ t('modals.download.selectRootDirectory') }}</span>
                     </div>
                 </div>
 
                 <!-- Model Root Selection (always visible) -->
                 <div class="input-group">
-                    <label for="modelRoot" id="modelRootLabel">Select Model Root:</label>
+                    <label for="modelRoot" id="modelRootLabel">{{ t('modals.download.selectModelRoot') }}</label>
                     <select id="modelRoot"></select>
                 </div>
 
@@ -59,10 +59,10 @@
                 <div class="manual-path-selection" id="manualPathSelection">
                     <!-- Path input with autocomplete -->
                     <div class="input-group">
-                        <label for="folderPath">Target Folder Path:</label>
+                        <label for="folderPath">{{ t('modals.download.targetFolderPath') }}</label>
                         <div class="path-input-container">
-                            <input type="text" id="folderPath" placeholder="Type folder path or select from tree below..." autocomplete="off" />
-                            <button type="button" id="createFolderBtn" class="create-folder-btn" title="Create new folder">
+                            <input type="text" id="folderPath" placeholder="{{ t('modals.download.pathPlaceholder') }}" autocomplete="off" />
+                            <button type="button" id="createFolderBtn" class="create-folder-btn" title="{{ t('modals.download.createNewFolder') }}">
                                 <i class="fas fa-plus"></i>
                             </button>
                         </div>
@@ -72,13 +72,13 @@
                     <!-- Breadcrumb navigation -->
                     <div class="breadcrumb-nav" id="breadcrumbNav">
                         <span class="breadcrumb-item root" data-path="">
-                            <i class="fas fa-home"></i> Root
+                            <i class="fas fa-home"></i> {{ t('modals.download.root') }}
                         </span>
                     </div>
                     
                     <!-- Hierarchical folder tree -->
                     <div class="input-group">
-                        <label>Browse Folders:</label>
+                        <label>{{ t('modals.download.browseFolders') }}</label>
                         <div class="folder-tree-container">
                             <div class="folder-tree" id="folderTree">
                                 <!-- Tree will be loaded dynamically -->
@@ -88,8 +88,8 @@
                 </div>
             </div>
             <div class="modal-actions">
-                <button class="secondary-btn" id="backToVersionsBtn">Back</button>
-                <button class="primary-btn" id="startDownloadBtn">Download</button>
+                <button class="secondary-btn" id="backToVersionsBtn">{{ t('common.actions.back') }}</button>
+                <button class="primary-btn" id="startDownloadBtn">{{ t('modals.download.download') }}</button>
             </div>
         </div>
     </div>

templates/components/modals/example_access_modal.html

@@ -2,26 +2,26 @@
 <div id="exampleAccessModal" class="modal">
     <div class="modal-content example-access-modal">
         <button class="close" onclick="modalManager.closeModal('exampleAccessModal')">&times;</button>
-        <h2>Local Example Images</h2>
-        <p>No local example images found for this model. View options:</p>
+        <h2>{{ t('modals.exampleAccess.title') }}</h2>
+        <p>{{ t('modals.exampleAccess.message') }}</p>
 
         <div class="example-access-options">
             <button id="downloadExamplesBtn" class="example-option-btn">
                 <i class="fas fa-cloud-download-alt"></i>
-                <span class="option-title">Download from Civitai</span>
-                <span class="option-desc">Save remote examples locally for offline use and faster loading</span>
+                <span class="option-title">{{ t('modals.exampleAccess.downloadOption.title') }}</span>
+                <span class="option-desc">{{ t('modals.exampleAccess.downloadOption.description') }}</span>
             </button>
 
             <button id="importExamplesBtn" class="example-option-btn">
                 <i class="fas fa-file-import"></i>
-                <span class="option-title">Import Your Own</span>
-                <span class="option-desc">Add your own custom examples for this model</span>
+                <span class="option-title">{{ t('modals.exampleAccess.importOption.title') }}</span>
+                <span class="option-desc">{{ t('modals.exampleAccess.importOption.description') }}</span>
             </button>
         </div>
 
         <div class="modal-footer-note">
             <i class="fas fa-info-circle"></i>
-            <span>Remote examples are still viewable in the model details even without local copies</span>
+            <span>{{ t('modals.exampleAccess.footerNote') }}</span>
         </div>
     </div>
 </div>

templates/components/modals/help_modal.html

@@ -3,19 +3,19 @@
     <div class="modal-content help-modal">
         <button class="close" onclick="modalManager.closeModal('helpModal')">&times;</button>
         <div class="help-header">
-            <h2>Help & Tutorials</h2>
+            <h2>{{ t('help.title') }}</h2>
         </div>
         
         <div class="help-tabs">
-            <button class="tab-btn active" data-tab="getting-started">Getting Started</button>
-            <button class="tab-btn" data-tab="update-vlogs">Update Vlogs</button>
-            <button class="tab-btn" data-tab="documentation">Documentation</button>
+            <button class="tab-btn active" data-tab="getting-started">{{ t('help.tabs.gettingStarted') }}</button>
+            <button class="tab-btn" data-tab="update-vlogs">{{ t('help.tabs.updateVlogs') }}</button>
+            <button class="tab-btn" data-tab="documentation">{{ t('help.tabs.documentation') }}</button>
         </div>
         
         <div class="help-content">
             <!-- Getting Started Tab -->
             <div class="tab-pane active" id="getting-started">
-                <h3>Getting Started with LoRA Manager</h3>
+                <h3>{{ t('help.gettingStarted.title') }}</h3>
                 <div class="video-container">
                     <div class="video-thumbnail" data-video-id="hvKw31YpE-U">
                         <img src="/loras_static/images/video-thumbnails/getting-started.jpg" alt="Getting Started with LoRA Manager">
@@ -44,7 +44,7 @@
             <!-- Update Vlogs Tab -->
             <div class="tab-pane" id="update-vlogs">
                 <h3>
-                    Latest Updates
+                    {{ t('help.updateVlogs.title') }}
                     <span class="update-date-badge">
                         <i class="fas fa-calendar-alt"></i>
                         Apr 28, 2025
@@ -58,14 +58,14 @@
                                 <div class="video-play-overlay">
                                     <a href="https://www.youtube.com/playlist?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj" target="_blank" class="external-link-btn">
                                         <i class="fas fa-external-link-alt"></i>
-                                        <span>Watch on YouTube</span>
+                                        <span>{{ t('help.updateVlogs.watchOnYouTube') }}</span>
                                     </a>
                                 </div>
                             </div>
                         </div>
                         <div class="video-info">
-                            <h4>LoRA Manager Updates Playlist</h4>
-                            <p>Watch all update videos showcasing the latest features and improvements.</p>
+                            <h4>{{ t('help.updateVlogs.playlistTitle') }}</h4>
+                            <p>{{ t('help.updateVlogs.playlistDescription') }}</p>
                         </div>
                     </div>
                 </div>
@@ -73,10 +73,10 @@
 
             <!-- Documentation Tab -->
             <div class="tab-pane" id="documentation">
-                <h3>Documentation</h3>
+                <h3>{{ t('help.documentation.title') }}</h3>
                 
                 <div class="docs-section">
-                    <h4><i class="fas fa-book"></i> General</h4>
+                    <h4><i class="fas fa-book"></i> {{ t('help.documentation.general') }}</h4>
                     <ul class="docs-links">
                         <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki" target="_blank">Wiki Home</a></li>
                         <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/blob/main/README.md" target="_blank">README</a></li>
@@ -84,28 +84,28 @@
                 </div>
                 
                 <div class="docs-section">
-                    <h4><i class="fas fa-tools"></i> Troubleshooting</h4>
+                    <h4><i class="fas fa-tools"></i> {{ t('help.documentation.troubleshooting') }}</h4>
                     <ul class="docs-links">
                         <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/FAQ-(Frequently-Asked-Questions)" target="_blank">FAQ (Frequently Asked Questions)</a></li>
                     </ul>
                 </div>
                 
                 <div class="docs-section">
-                    <h4><i class="fas fa-layer-group"></i> Model Management</h4>
+                    <h4><i class="fas fa-layer-group"></i> {{ t('help.documentation.modelManagement') }}</h4>
                     <ul class="docs-links">
                         <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Example-Images" target="_blank">Example Images (WIP)</a></li>
                     </ul>
                 </div>
                 
                 <div class="docs-section">
-                    <h4><i class="fas fa-book-open"></i> Recipes</h4>
+                    <h4><i class="fas fa-book-open"></i> {{ t('help.documentation.recipes') }}</h4>
                     <ul class="docs-links">
                         <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Recipes-Feature-Tutorial-%E2%80%93-ComfyUI-LoRA-Manager" target="_blank">Recipes Tutorial</a></li>
                     </ul>
                 </div>
                 
                 <div class="docs-section">
-                    <h4><i class="fas fa-cog"></i> Settings & Configuration</h4>
+                    <h4><i class="fas fa-cog"></i> {{ t('help.documentation.settings') }}</h4>
                     <ul class="docs-links">
                         <li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Configuration" target="_blank">Configuration Options (WIP)</a></li>
                     </ul>
@@ -113,14 +113,14 @@
                 
                 <div class="docs-section">
                     <h4>
-                        <i class="fas fa-puzzle-piece"></i> Extensions
-                        <span class="new-content-badge">NEW</span>
+                        <i class="fas fa-puzzle-piece"></i> {{ t('help.documentation.extensions') }}
+                        <span class="new-content-badge">{{ t('help.documentation.newBadge') }}</span>
                     </h4>
                     <ul class="docs-links">
                         <li>
                             <a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/LoRA-Manager-Civitai-Extension-(Chrome-Extension)" target="_blank">
                                 LM Civitai Extension
-                                <span class="new-content-badge inline">NEW</span>
+                                <span class="new-content-badge inline">{{ t('help.documentation.newBadge') }}</span>
                             </a>
                         </li>
                     </ul>

templates/components/modals/move_modal.html

@@ -2,29 +2,29 @@
 <div id="moveModal" class="modal">
     <div class="modal-content">
         <div class="modal-header">
-            <h2 id="moveModalTitle">Move Model</h2>
+            <h2 id="moveModalTitle">{{ t('modals.move.title') }}</h2>
             <span class="close" onclick="modalManager.closeModal('moveModal')">&times;</span>
         </div>
         <div class="location-selection">
             <!-- Path preview -->
             <div class="path-preview">
-                <label>Target Location Preview:</label>
+                <label>{{ t('modals.moveModel.targetLocationPreview') }}</label>
                 <div class="path-display" id="moveTargetPathDisplay">
-                    <span class="path-text">Select a model root directory</span>
+                    <span class="path-text">{{ t('modals.download.selectRootDirectory') }}</span>
                 </div>
             </div>
 
             <div class="input-group">
-                <label for="moveModelRoot" id="moveRootLabel">Select Model Root:</label>
+                <label for="moveModelRoot" id="moveRootLabel">{{ t('modals.moveModel.selectModelRoot') }}</label>
                 <select id="moveModelRoot"></select>
             </div>
             
             <!-- Path input with autocomplete -->
             <div class="input-group">
-                <label for="moveFolderPath">Target Folder Path:</label>
+                <label for="moveFolderPath">{{ t('modals.moveModel.targetFolderPath') }}</label>
                 <div class="path-input-container">
-                    <input type="text" id="moveFolderPath" placeholder="Type folder path or select from tree below..." autocomplete="off" />
-                    <button type="button" id="moveCreateFolderBtn" class="create-folder-btn" title="Create new folder">
+                    <input type="text" id="moveFolderPath" placeholder="{{ t('modals.moveModel.pathPlaceholder') }}" autocomplete="off" />
+                    <button type="button" id="moveCreateFolderBtn" class="create-folder-btn" title="{{ t('modals.moveModel.createNewFolder') }}">
                         <i class="fas fa-plus"></i>
                     </button>
                 </div>
@@ -34,13 +34,13 @@
             <!-- Breadcrumb navigation -->
             <div class="breadcrumb-nav" id="moveBreadcrumbNav">
                 <span class="breadcrumb-item root" data-path="">
-                    <i class="fas fa-home"></i> Root
+                    <i class="fas fa-home"></i> {{ t('modals.moveModel.root') }}
                 </span>
             </div>
             
             <!-- Hierarchical folder tree -->
             <div class="input-group">
-                <label>Browse Folders:</label>
+                <label>{{ t('modals.moveModel.browseFolders') }}</label>
                 <div class="folder-tree-container">
                     <div class="folder-tree" id="moveFolderTree">
                         <!-- Tree will be loaded dynamically -->
@@ -49,8 +49,8 @@
             </div>
         </div>
         <div class="modal-actions">
-            <button class="cancel-btn" onclick="modalManager.closeModal('moveModal')">Cancel</button>
-            <button class="primary-btn" onclick="moveManager.moveModel()">Move</button>
+            <button class="cancel-btn" onclick="modalManager.closeModal('moveModal')">{{ t('common.actions.cancel') }}</button>
+            <button class="primary-btn" onclick="moveManager.moveModel()">{{ t('common.actions.move') }}</button>
         </div>
     </div>
 </div>

templates/components/modals/relink_civitai_modal.html

@@ -2,32 +2,32 @@
 <div id="relinkCivitaiModal" class="modal">
     <div class="modal-content">
         <button class="close" onclick="modalManager.closeModal('relinkCivitaiModal')">&times;</button>
-        <h2>Re-link to Civitai</h2>
+        <h2>{{ t('modals.relinkCivitai.title') }}</h2>
         <div class="warning-box">
             <i class="fas fa-exclamation-triangle"></i>
-            <p><strong>Warning:</strong> This is a potentially destructive operation. Re-linking will:</p>
+            <p><strong>{{ t('modals.relinkCivitai.warning') }}</strong> {{ t('modals.relinkCivitai.warningText') }}</p>
             <ul>
-                <li>Override existing metadata</li>
-                <li>Potentially modify the model hash</li>
-                <li>May have other unintended consequences</li>
+                <li>{{ t('modals.relinkCivitai.warningList.overrideMetadata') }}</li>
+                <li>{{ t('modals.relinkCivitai.warningList.modifyHash') }}</li>
+                <li>{{ t('modals.relinkCivitai.warningList.unintendedConsequences') }}</li>
             </ul>
-            <p>Only proceed if you're sure this is what you want.</p>
+            <p>{{ t('modals.relinkCivitai.proceedText') }}</p>
         </div>
         <div class="input-group">
-            <label for="civitaiModelUrl">Civitai Model URL:</label>
-            <input type="text" id="civitaiModelUrl" placeholder="https://civitai.com/models/649516/model-name?modelVersionId=726676" />
+            <label for="civitaiModelUrl">{{ t('modals.relinkCivitai.urlLabel') }}</label>
+            <input type="text" id="civitaiModelUrl" placeholder="{{ t('modals.relinkCivitai.urlPlaceholder') }}" />
             <div class="input-error" id="civitaiModelUrlError"></div>
             <div class="input-help">
-                Paste any Civitai model URL. Supported formats:<br>
-                • https://civitai.com/models/649516<br>
-                • https://civitai.com/models/649516?modelVersionId=726676<br>
-                • https://civitai.com/models/649516/model-name?modelVersionId=726676<br>
-                <em>Note: If no modelVersionId is provided, the latest version will be used.</em>
+                {{ t('modals.relinkCivitai.helpText.title') }}<br>
+                • {{ t('modals.relinkCivitai.helpText.format1') }}<br>
+                • {{ t('modals.relinkCivitai.helpText.format2') }}<br>
+                • {{ t('modals.relinkCivitai.helpText.format3') }}<br>
+                <em>{{ t('modals.relinkCivitai.helpText.note') }}</em>
             </div>
         </div>
         <div class="modal-actions">
-            <button class="cancel-btn" onclick="modalManager.closeModal('relinkCivitaiModal')">Cancel</button>
-            <button class="confirm-btn" id="confirmRelinkBtn">Confirm Re-link</button>
+            <button class="cancel-btn" onclick="modalManager.closeModal('relinkCivitaiModal')">{{ t('common.actions.cancel') }}</button>
+            <button class="confirm-btn" id="confirmRelinkBtn">{{ t('modals.relinkCivitai.confirmAction') }}</button>
         </div>
     </div>
 </div>

templates/components/modals/settings_modal.html

@@ -2,18 +2,18 @@
 <div id="settingsModal" class="modal">
     <div class="modal-content settings-modal">
         <button class="close" onclick="modalManager.closeModal('settingsModal')">&times;</button>
-        <h2>Settings</h2>
+        <h2>{{ t('common.actions.settings') }}</h2>
         <div class="settings-form">
             <div class="setting-item api-key-item">
                 <div class="setting-row">
                     <div class="setting-info">
-                        <label for="civitaiApiKey">Civitai API Key:</label>
+                        <label for="civitaiApiKey">{{ t('settings.civitaiApiKey') }}:</label>
                     </div>
                     <div class="setting-control">
                         <div class="api-key-input">
                             <input type="password" 
                                 id="civitaiApiKey" 
-                                placeholder="Enter your Civitai API key"
+                                placeholder="{{ t('settings.civitaiApiKeyPlaceholder') }}"
                                 value="{{ settings.get('civitai_api_key', '') }}"
                                 onblur="settingsManager.saveInputSetting('civitaiApiKey', 'civitai_api_key')"
                                 onkeydown="if(event.key === 'Enter') { this.blur(); }" />
@@ -24,17 +24,17 @@
                     </div>
                 </div>
                 <div class="input-help">
-                    Used for authentication when downloading models from Civitai
+                    {{ t('settings.civitaiApiKeyHelp') }}
                 </div>
             </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,90 +123,115 @@
                 <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>
+                
+                <!-- 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>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        {{ t('common.language.select_help') }}
+                    </div>
+                </div>
             </div>
             
             <!-- 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>
@@ -218,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>
@@ -244,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>
@@ -270,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>
@@ -296,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">
@@ -317,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">
@@ -350,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">
@@ -368,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">
@@ -390,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>

templates/components/modals/support_modal.html

@@ -4,32 +4,32 @@
         <button class="close" onclick="modalManager.closeModal('supportModal')">&times;</button>
         <div class="support-header">
             <i class="fas fa-heart support-icon"></i>
-            <h2>Support the Project</h2>
+            <h2>{{ t('support.title') }}</h2>
         </div>
         <div class="support-content">
-            <p>If you find LoRA Manager useful, I'd really appreciate your support! 🙌</p>
+            <p>{{ t('support.message') }}</p>
             
             <div class="support-section">
-                <h3><i class="fas fa-comment"></i> Provide Feedback</h3>
-                <p>Your feedback helps shape future updates! Share your thoughts:</p>
+                <h3><i class="fas fa-comment"></i> {{ t('support.feedback.title') }}</h3>
+                <p>{{ t('support.feedback.description') }}</p>
                 <div class="support-links">
                     <a href="https://github.com/willmiao/ComfyUI-Lora-Manager/issues/new" class="social-link" target="_blank">
                         <i class="fab fa-github"></i>
-                        <span>Submit GitHub Issue</span>
+                        <span>{{ t('support.links.submitGithubIssue') }}</span>
                     </a>
                     <a href="https://discord.gg/vcqNrWVFvM" class="social-link" target="_blank">
                         <i class="fab fa-discord"></i>
-                        <span>Join Discord</span>
+                        <span>{{ t('support.links.joinDiscord') }}</span>
                     </a>
                 </div>
             </div>
             
             <div class="support-section">
-                <h3><i class="fas fa-rss"></i> Follow for Updates</h3>
+                <h3><i class="fas fa-rss"></i> {{ t('support.sections.followUpdates') }}</h3>
                 <div class="support-links">
                     <a href="https://www.youtube.com/@pixelpaws-ai" class="social-link" target="_blank">
                         <i class="fab fa-youtube"></i>
-                        <span>YouTube Channel</span>
+                        <span>{{ t('support.links.youtubeChannel') }}</span>
                     </a>
                     <a href="https://civitai.com/user/PixelPawsAI" class="social-link civitai-link" target="_blank">
                         <svg class="civitai-icon" viewBox="0 0 225 225" width="20" height="20">
@@ -45,37 +45,37 @@
                                 95 c91 52 167 94 169 94 2 0 78 -42 168 -92z"/>
                             </g>
                         </svg>
-                        <span>Civitai Profile</span>
+                        <span>{{ t('support.links.civitaiProfile') }}</span>
                     </a>
                 </div>
             </div>
             
             <div class="support-section">
-                <h3><i class="fas fa-coffee"></i> Buy me a coffee</h3>
-                <p>If you'd like to support my work directly:</p>
+                <h3><i class="fas fa-coffee"></i> {{ t('support.sections.buyMeCoffee') }}</h3>
+                <p>{{ t('support.sections.coffeeDescription') }}</p>
                 <a href="https://ko-fi.com/pixelpawsai" class="kofi-button" target="_blank">
                     <i class="fas fa-mug-hot"></i>
-                    <span>Support on Ko-fi</span>
+                    <span>{{ t('support.links.supportKofi') }}</span>
                 </a>
             </div>
 
             <!-- Patreon Support Section -->
             <div class="support-section">
-                <h3><i class="fab fa-patreon"></i> Become a Patron</h3>
-                <p>Support ongoing development with monthly contributions:</p>
+                <h3><i class="fab fa-patreon"></i> {{ t('support.sections.becomePatron') }}</h3>
+                <p>{{ t('support.sections.patronDescription') }}</p>
                 <a href="https://patreon.com/PixelPawsAI" class="patreon-button" target="_blank">
                     <i class="fab fa-patreon"></i>
-                    <span>Support on Patreon</span>
+                    <span>{{ t('support.links.supportPatreon') }}</span>
                 </a>
             </div>
 
             <!-- New section for Chinese payment methods -->
             <div class="support-section">
-                <h3><i class="fas fa-qrcode"></i> WeChat Support</h3>
-                <p>For users in China, you can support via WeChat:</p>
+                <h3><i class="fas fa-qrcode"></i> {{ t('support.sections.wechatSupport') }}</h3>
+                <p>{{ t('support.sections.wechatDescription') }}</p>
                 <button class="secondary-btn qrcode-toggle" id="toggleQRCode">
                     <i class="fas fa-qrcode"></i>
-                    <span class="toggle-text">Show WeChat QR Code</span>
+                    <span class="toggle-text">{{ t('support.sections.showWechatQR') }}</span>
                     <i class="fas fa-chevron-down toggle-icon"></i>
                 </button>
                 <div class="qrcode-container" id="qrCodeContainer">
@@ -84,7 +84,7 @@
             </div>
             
             <div class="support-footer">
-                <p>Thank you for using LoRA Manager! ❤️</p>
+                <p>{{ t('support.footer') }}</p>
             </div>
         </div>
     </div>

templates/components/modals/update_modal.html

@@ -4,29 +4,29 @@
         <button class="close" onclick="modalManager.closeModal('updateModal')">&times;</button>
         <div class="update-header">
             <i class="fas fa-bell update-icon"></i>
-            <h2>Check for Updates</h2>
+            <h2 data-i18n="update.title">{{ t('update.title') }}</h2>
         </div>
         <div class="update-content">
             <div class="update-info">
                 <div class="version-info">
                     <div class="current-version">
-                        <span class="label">Current Version:</span>
+                        <span class="label">{{ t('update.currentVersion') }}:</span>
                         <span class="version-number">v0.0.0</span>
                     </div>
-                    <div class="git-info" style="display:none;">Commit: unknown</div>
+                    <div class="git-info" style="display:none;">{{ t('update.commit') }}: unknown</div>
                     <div class="new-version">
-                        <span class="label">New Version:</span>
+                        <span class="label">{{ t('update.newVersion') }}:</span>
                         <span class="version-number">v0.0.0</span>
                     </div>
                 </div>
                 
                 <div class="update-actions">
                     <a href="https://github.com/willmiao/ComfyUI-Lora-Manager" target="_blank" class="update-link">
-                        <i class="fas fa-external-link-alt"></i> View on GitHub
+                        <i class="fas fa-external-link-alt"></i> {{ t('update.viewOnGitHub') }}
                     </a>
                     <button id="updateBtn" class="primary-btn disabled">
                         <i class="fas fa-download"></i>
-                        <span id="updateBtnText">Update Now</span>
+                        <span id="updateBtnText" data-i18n="update.updateNow">{{ t('update.updateNow') }}</span>
                     </button>
                 </div>
             </div>
@@ -34,7 +34,7 @@
             <!-- Update Progress Section -->
             <div class="update-progress" id="updateProgress" style="display: none;">
                 <div class="progress-info">
-                    <div class="progress-text" id="updateProgressText">Preparing update...</div>
+                    <div class="progress-text" id="updateProgressText" data-i18n="update.preparingUpdate">{{ t('update.preparingUpdate') }}</div>
                     <div class="update-progress-bar">
                         <div class="progress-fill" id="updateProgressFill"></div>
                     </div>
@@ -42,12 +42,12 @@
             </div>
             
             <div class="changelog-section">
-                <h3>Changelog</h3>
+                <h3>{{ t('update.changelog') }}</h3>
                 <div class="changelog-content">
                     <!-- Dynamic changelog content will be inserted here -->
                     <div class="changelog-item">
-                        <h4>Checking for updates...</h4>
-                        <p>Please wait while we check for the latest version.</p>
+                        <h4>{{ t('update.checkingUpdates') }}</h4>
+                        <p>{{ t('update.checkingMessage') }}</p>
                     </div>
                 </div>
             </div>
@@ -56,7 +56,7 @@
                 <label class="toggle-switch">
                     <input type="checkbox" id="updateNotifications" checked>
                     <span class="toggle-slider"></span>
-                    <span class="toggle-label">Show update notifications</span>
+                    <span class="toggle-label">{{ t('update.showNotifications') }}</span>
                 </label>
             </div>
         </div>

templates/embeddings.html

@@ -1,30 +1,26 @@
 {% extends "base.html" %}
 
-{% block title %}Embeddings Manager{% endblock %}
+{% block title %}{{ t('embeddings.title') }}{% endblock %}
 {% block page_id %}embeddings{% endblock %}
 
-{% block preload %}
-<link rel="preload" href="/loras_static/js/embeddings.js" as="script" crossorigin="anonymous">
-{% endblock %}
-
-{% block init_title %}Initializing Embeddings Manager{% endblock %}
-{% block init_message %}Scanning and building embeddings cache. This may take a few moments...{% endblock %}
+{% block init_title %}{{ t('initialization.embeddings.title') }}{% endblock %}
+{% block init_message %}{{ t('initialization.embeddings.message') }}{% endblock %}
 {% block init_check_url %}/api/embeddings/list?page=1&page_size=1{% endblock %}
 
 {% block additional_components %}
 
 <div id="embeddingContextMenu" class="context-menu" style="display: none;">
-    <div class="context-menu-item" data-action="refresh-metadata"><i class="fas fa-sync"></i> Refresh Civitai Data</div>
-    <div class="context-menu-item" data-action="relink-civitai"><i class="fas fa-link"></i> Re-link to Civitai</div>
-    <div class="context-menu-item" data-action="copyname"><i class="fas fa-copy"></i> Copy Model Filename</div>
-    <div class="context-menu-item" data-action="preview"><i class="fas fa-folder-open"></i> Open Examples Folder</div>
-    <div class="context-menu-item" data-action="download-examples"><i class="fas fa-download"></i> Download Example Images</div>
-    <div class="context-menu-item" data-action="replace-preview"><i class="fas fa-image"></i> Replace Preview</div>
-    <div class="context-menu-item" data-action="set-nsfw"><i class="fas fa-exclamation-triangle"></i> Set Content Rating</div>
+    <div class="context-menu-item" data-action="refresh-metadata"><i class="fas fa-sync"></i> {{ t('loras.contextMenu.refreshMetadata') }}</div>
+    <div class="context-menu-item" data-action="relink-civitai"><i class="fas fa-link"></i> {{ t('loras.contextMenu.relinkCivitai') }}</div>
+    <div class="context-menu-item" data-action="copyname"><i class="fas fa-copy"></i> {{ t('loras.contextMenu.copyFilename') }}</div>
+    <div class="context-menu-item" data-action="preview"><i class="fas fa-folder-open"></i> {{ t('loras.contextMenu.openExamples') }}</div>
+    <div class="context-menu-item" data-action="download-examples"><i class="fas fa-download"></i> {{ t('loras.contextMenu.downloadExamples') }}</div>
+    <div class="context-menu-item" data-action="replace-preview"><i class="fas fa-image"></i> {{ t('loras.contextMenu.replacePreview') }}</div>
+    <div class="context-menu-item" data-action="set-nsfw"><i class="fas fa-exclamation-triangle"></i> {{ t('loras.contextMenu.setContentRating') }}</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</div>
-    <div class="context-menu-item" data-action="exclude"><i class="fas fa-eye-slash"></i> Exclude Model</div>
-    <div class="context-menu-item delete-item" data-action="delete"><i class="fas fa-trash"></i> Delete Model</div>
+    <div class="context-menu-item" data-action="move"><i class="fas fa-folder-open"></i> {{ t('loras.contextMenu.moveToFolder') }}</div>
+    <div class="context-menu-item" data-action="exclude"><i class="fas fa-eye-slash"></i> {{ t('loras.contextMenu.excludeModel') }}</div>
+    <div class="context-menu-item delete-item" data-action="delete"><i class="fas fa-trash"></i> {{ t('loras.contextMenu.deleteModel') }}</div>
 </div>
 {% endblock %}
 

templates/loras.html

@@ -1,16 +1,10 @@
 {% extends "base.html" %}
 
-{% block title %}LoRA Manager{% endblock %}
+{% block title %}{{ t('header.appTitle') }}{% endblock %}
 {% block page_id %}loras{% endblock %}
 
-{% block preload %}
-{% if not is_initializing %}
-<link rel="preload" href="/loras_static/js/loras.js" as="script" crossorigin="anonymous">
-{% endif %}
-{% endblock %}
-
-{% block init_title %}Initializing LoRA Manager{% endblock %}
-{% block init_message %}Scanning and building LoRA cache. This may take a few minutes...{% endblock %}
+{% block init_title %}{{ t('initialization.loras.title') }}{% endblock %}
+{% block init_message %}{{ t('initialization.loras.message') }}{% endblock %}
 {% block init_check_url %}/api/loras/list?page=1&page_size=1{% endblock %}
 
 {% block content %}

templates/recipes.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block title %}LoRA Recipes{% endblock %}
+{% block title %}{{ t('recipes.title') }}{% endblock %}
 {% block page_id %}recipes{% endblock %}
 
 {% block page_css %}
@@ -9,52 +9,48 @@
 <link rel="stylesheet" href="/loras_static/css/components/import-modal.css">
 {% endblock %}
 
-{% block preload %}
-<link rel="preload" href="/loras_static/js/recipes.js" as="script" crossorigin="anonymous">
-{% endblock %}
-
 {% block additional_components %}
 {% include 'components/import_modal.html' %}
 {% include 'components/recipe_modal.html' %}
 
 <div id="recipeContextMenu" class="context-menu" style="display: none;">
     <!-- <div class="context-menu-item" data-action="details"><i class="fas fa-info-circle"></i> View Details</div> -->
-    <div class="context-menu-item" data-action="share"><i class="fas fa-share-alt"></i> Share Recipe</div>
-    <div class="context-menu-item" data-action="copy"><i class="fas fa-copy"></i> Copy Recipe Syntax</div>
-    <div class="context-menu-item" data-action="sendappend"><i class="fas fa-paper-plane"></i> Send to Workflow (Append)</div>
-    <div class="context-menu-item" data-action="sendreplace"><i class="fas fa-exchange-alt"></i> Send to Workflow (Replace)</div>
-    <div class="context-menu-item" data-action="viewloras"><i class="fas fa-layer-group"></i> View All LoRAs</div>
-    <div class="context-menu-item download-missing-item" data-action="download-missing"><i class="fas fa-download"></i> Download Missing LoRAs</div>
+    <div class="context-menu-item" data-action="share"><i class="fas fa-share-alt"></i> {{ t('loras.contextMenu.shareRecipe') }}</div>
+    <div class="context-menu-item" data-action="copy"><i class="fas fa-copy"></i> {{ t('loras.contextMenu.copyRecipeSyntax') }}</div>
+    <div class="context-menu-item" data-action="sendappend"><i class="fas fa-paper-plane"></i> {{ t('loras.contextMenu.sendToWorkflowAppend') }}</div>
+    <div class="context-menu-item" data-action="sendreplace"><i class="fas fa-exchange-alt"></i> {{ t('loras.contextMenu.sendToWorkflowReplace') }}</div>
+    <div class="context-menu-item" data-action="viewloras"><i class="fas fa-layer-group"></i> {{ t('loras.contextMenu.viewAllLoras') }}</div>
+    <div class="context-menu-item download-missing-item" data-action="download-missing"><i class="fas fa-download"></i> {{ t('loras.contextMenu.downloadMissingLoras') }}</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> {{ t('loras.contextMenu.setContentRating') }}
     </div>
     <div class="context-menu-separator"></div>
-    <div class="context-menu-item delete-item" data-action="delete"><i class="fas fa-trash"></i> Delete Recipe</div>
+    <div class="context-menu-item delete-item" data-action="delete"><i class="fas fa-trash"></i> {{ t('loras.contextMenu.deleteRecipe') }}</div>
 </div>
 {% endblock %}
 
-{% block init_title %}Initializing Recipe Manager{% endblock %}
-{% block init_message %}Scanning and building recipe cache. This may take a few moments...{% endblock %}
+{% block init_title %}{{ t('initialization.recipes.title') }}{% endblock %}
+{% block init_message %}{{ t('initialization.recipes.message') }}{% endblock %}
 {% block init_check_url %}/api/recipes?page=1&page_size=1{% endblock %}
 
 {% block content %}
     <!-- Recipe controls -->
     <div class="controls">
         <div class="action-buttons">
-            <div title="Refresh recipe list" class="control-group">
-                <button onclick="recipeManager.refreshRecipes()"><i class="fas fa-sync"></i> Refresh</button>
+            <div title="{{ t('recipes.controls.refresh.title') }}" class="control-group">
+                <button onclick="recipeManager.refreshRecipes()"><i class="fas fa-sync"></i> {{ t('common.actions.refresh') }}</button>
             </div>
-            <div title="Import recipes" class="control-group">
-                <button onclick="importManager.showImportModal()"><i class="fas fa-file-import"></i> Import</button>
+            <div title="{{ t('recipes.controls.import.title') }}" class="control-group">
+                <button onclick="importManager.showImportModal()"><i class="fas fa-file-import"></i> {{ t('recipes.controls.import.action') }}</button>
             </div>
             <!-- Add duplicate detection button -->
-            <div title="Find duplicate recipes" class="control-group">
-                <button onclick="recipeManager.findDuplicateRecipes()"><i class="fas fa-clone"></i> Duplicates</button>
+            <div title="{{ t('loras.controls.duplicates') }}" class="control-group">
+                <button onclick="recipeManager.findDuplicateRecipes()"><i class="fas fa-clone"></i> {{ t('loras.controls.duplicates') }}</button>
             </div>
             <!-- Custom filter indicator button (hidden by default) -->
             <div id="customFilterIndicator" class="control-group hidden">
                 <div class="filter-active">
-                    <i class="fas fa-filter"></i> <span id="customFilterText">Filtered by LoRA</span>
+                    <i class="fas fa-filter"></i> <span id="customFilterText">{{ t('recipes.controls.filteredByLora') }}</span>
                     <i class="fas fa-times-circle clear-filter"></i>
                 </div>
             </div>
@@ -65,13 +61,13 @@
     <div id="duplicatesBanner" class="duplicates-banner" style="display: none;">
         <div class="banner-content">
           <i class="fas fa-exclamation-triangle"></i>
-          <span id="duplicatesCount">Found 0 duplicate groups</span>
+          <span id="duplicatesCount">{{ t('recipes.duplicates.found', count=0) }}</span>
           <div class="banner-actions">
             <button class="btn-select-latest" onclick="recipeManager.selectLatestDuplicates()">
-              Keep Latest Versions
+              {{ t('recipes.duplicates.keepLatest') }}
             </button>
             <button class="btn-delete-selected disabled" onclick="recipeManager.deleteSelectedDuplicates()">
-              Delete Selected (<span id="duplicatesSelectedCount">0</span>)
+              {{ t('recipes.duplicates.deleteSelected') }} (<span id="duplicatesSelectedCount">0</span>)
             </button>
             <button class="btn-exit" onclick="recipeManager.exitDuplicateMode()">
               <i class="fas fa-times"></i>

templates/statistics.html

@@ -1,21 +1,15 @@
 {% extends "base.html" %}
 
-{% block title %}Statistics - LoRA Manager{% endblock %}
+{% block title %}{{ t('statistics.title') }} - {{ t('header.appTitle') }}{% endblock %}
 {% block page_id %}statistics{% endblock %}
 
-{% block preload %}
-{% if not is_initializing %}
-<link rel="preload" href="/loras_static/js/statistics.js" as="script" crossorigin="anonymous">
-{% endif %}
-{% endblock %}
-
 {% block head_scripts %}
 <!-- Add Chart.js for statistics page -->
 <script src="/loras_static/vendor/chart.js/chart.umd.js"></script>
 {% endblock %}
 
-{% block init_title %}Initializing Statistics{% endblock %}
-{% block init_message %}Loading model data and usage statistics. This may take a moment...{% endblock %}
+{% block init_title %}{{ t('initialization.statistics.title') }}{% endblock %}
+{% block init_message %}{{ t('initialization.statistics.message') }}{% endblock %}
 {% block init_check_url %}/api/stats/collection-overview{% endblock %}
 
 {% block content %}
@@ -32,19 +26,19 @@
         <!-- Navigation Tabs -->
         <div class="dashboard-tabs">
             <button class="tab-button active" data-tab="overview">
-                <i class="fas fa-chart-bar"></i> Overview
+                <i class="fas fa-chart-bar"></i> {{ t('statistics.tabs.overview') }}
             </button>
             <button class="tab-button" data-tab="usage">
-                <i class="fas fa-chart-line"></i> Usage Analysis
+                <i class="fas fa-chart-line"></i> {{ t('statistics.tabs.usage') }}
             </button>
             <button class="tab-button" data-tab="collection">
-                <i class="fas fa-layer-group"></i> Collection
+                <i class="fas fa-layer-group"></i> {{ t('statistics.tabs.collection') }}
             </button>
             <button class="tab-button" data-tab="storage">
-                <i class="fas fa-hdd"></i> Storage
+                <i class="fas fa-hdd"></i> {{ t('statistics.tabs.storage') }}
             </button>
             <button class="tab-button" data-tab="insights">
-                <i class="fas fa-lightbulb"></i> Insights
+                <i class="fas fa-lightbulb"></i> {{ t('statistics.tabs.insights') }}
             </button>
         </div>
 
@@ -55,7 +49,7 @@
                 <div class="panel-grid">
                     <!-- Collection Overview Chart -->
                     <div class="chart-container">
-                        <h3><i class="fas fa-pie-chart"></i> Collection Overview</h3>
+                        <h3><i class="fas fa-pie-chart"></i> {{ t('statistics.charts.collectionOverview') }}</h3>
                         <div class="chart-wrapper">
                             <canvas id="collectionPieChart"></canvas>
                         </div>
@@ -63,7 +57,7 @@
 
                     <!-- Base Model Distribution -->
                     <div class="chart-container">
-                        <h3><i class="fas fa-layer-group"></i> Base Model Distribution</h3>
+                        <h3><i class="fas fa-layer-group"></i> {{ t('statistics.charts.baseModelDistribution') }}</h3>
                         <div class="chart-wrapper">
                             <canvas id="baseModelChart"></canvas>
                         </div>
@@ -71,7 +65,7 @@
 
                     <!-- Usage Timeline -->
                     <div class="chart-container full-width">
-                        <h3><i class="fas fa-chart-line"></i> Usage Trends (Last 30 Days)</h3>
+                        <h3><i class="fas fa-chart-line"></i> {{ t('statistics.charts.usageTrends') }}</h3>
                         <div class="chart-wrapper">
                             <canvas id="usageTimelineChart"></canvas>
                         </div>
@@ -84,7 +78,7 @@
                 <div class="panel-grid">
                     <!-- Top Used LoRAs -->
                     <div class="list-container">
-                        <h3><i class="fas fa-star"></i> Most Used LoRAs</h3>
+                        <h3><i class="fas fa-star"></i> {{ t('statistics.usage.mostUsedLoras') }}</h3>
                         <div class="model-list" id="topLorasList">
                             <!-- List will be populated by JavaScript -->
                         </div>
@@ -92,7 +86,7 @@
 
                     <!-- Top Used Checkpoints -->
                     <div class="list-container">
-                        <h3><i class="fas fa-check-circle"></i> Most Used Checkpoints</h3>
+                        <h3><i class="fas fa-check-circle"></i> {{ t('statistics.usage.mostUsedCheckpoints') }}</h3>
                         <div class="model-list" id="topCheckpointsList">
                             <!-- List will be populated by JavaScript -->
                         </div>
@@ -100,7 +94,7 @@
 
                     <!-- Top Used Embeddings -->
                     <div class="list-container">
-                        <h3><i class="fas fa-code"></i> Most Used Embeddings</h3>
+                        <h3><i class="fas fa-code"></i> {{ t('statistics.usage.mostUsedEmbeddings') }}</h3>
                         <div class="model-list" id="topEmbeddingsList">
                             <!-- List will be populated by JavaScript -->
                         </div>
@@ -108,7 +102,7 @@
 
                     <!-- Usage Distribution Chart -->
                     <div class="chart-container full-width">
-                        <h3><i class="fas fa-chart-bar"></i> Usage Distribution</h3>
+                        <h3><i class="fas fa-chart-bar"></i> {{ t('statistics.charts.usageDistribution') }}</h3>
                         <div class="chart-wrapper">
                             <canvas id="usageDistributionChart"></canvas>
                         </div>
@@ -121,7 +115,7 @@
                 <div class="panel-grid">
                     <!-- Tag Cloud -->
                     <div class="chart-container">
-                        <h3><i class="fas fa-tags"></i> Popular Tags</h3>
+                        <h3><i class="fas fa-tags"></i> {{ t('statistics.collection.popularTags') }}</h3>
                         <div class="tag-cloud" id="tagCloud">
                             <!-- Tag cloud will be populated by JavaScript -->
                         </div>
@@ -129,7 +123,7 @@
 
                     <!-- Base Model Timeline -->
                     <div class="chart-container">
-                        <h3><i class="fas fa-history"></i> Model Types</h3>
+                        <h3><i class="fas fa-history"></i> {{ t('statistics.collection.modelTypes') }}</h3>
                         <div class="chart-wrapper">
                             <canvas id="modelTypesChart"></canvas>
                         </div>
@@ -137,7 +131,7 @@
 
                     <!-- Collection Growth -->
                     <div class="chart-container full-width">
-                        <h3><i class="fas fa-chart-area"></i> Collection Analysis</h3>
+                        <h3><i class="fas fa-chart-area"></i> {{ t('statistics.collection.collectionAnalysis') }}</h3>
                         <div class="analysis-cards" id="collectionAnalysis">
                             <!-- Analysis cards will be populated by JavaScript -->
                         </div>
@@ -150,7 +144,7 @@
                 <div class="panel-grid">
                     <!-- Storage by Model Type -->
                     <div class="chart-container">
-                        <h3><i class="fas fa-database"></i> Storage Usage</h3>
+                        <h3><i class="fas fa-database"></i> {{ t('statistics.storage.storageUsage') }}</h3>
                         <div class="chart-wrapper">
                             <canvas id="storageChart"></canvas>
                         </div>
@@ -158,7 +152,7 @@
 
                     <!-- Largest Models -->
                     <div class="list-container">
-                        <h3><i class="fas fa-weight-hanging"></i> Largest Models</h3>
+                        <h3><i class="fas fa-weight-hanging"></i> {{ t('statistics.storage.largestModels') }}</h3>
                         <div class="model-list" id="largestModelsList">
                             <!-- List will be populated by JavaScript -->
                         </div>
@@ -166,7 +160,7 @@
 
                     <!-- Storage Efficiency -->
                     <div class="chart-container full-width">
-                        <h3><i class="fas fa-chart-scatter"></i> Storage vs Usage Efficiency</h3>
+                        <h3><i class="fas fa-chart-scatter"></i> {{ t('statistics.storage.storageEfficiency') }}</h3>
                         <div class="chart-wrapper">
                             <canvas id="storageEfficiencyChart"></canvas>
                         </div>
@@ -177,14 +171,14 @@
             <!-- Insights Tab -->
             <div class="tab-panel" id="insights-panel">
                 <div class="insights-container">
-                    <h3><i class="fas fa-lightbulb"></i> Smart Insights</h3>
+                    <h3><i class="fas fa-lightbulb"></i> {{ t('statistics.insights.smartInsights') }}</h3>
                     <div class="insights-list" id="insightsList">
                         <!-- Insights will be populated by JavaScript -->
                     </div>
 
                     <!-- Recommendations -->
                     <div class="recommendations-section">
-                        <h4><i class="fas fa-tasks"></i> Recommendations</h4>
+                        <h4><i class="fas fa-tasks"></i> {{ t('statistics.insights.recommendations') }}</h4>
                         <div class="recommendations-list" id="recommendationsList">
                             <!-- Recommendations will be populated by JavaScript -->
                         </div>

test_i18n.py

@@ -0,0 +1,470 @@
+#!/usr/bin/env python3
+"""
+Test script to verify the updated i18n system works correctly.
+This tests both JavaScript loading and Python server-side functionality.
+"""
+
+import os
+import sys
+import json
+import re
+import asyncio
+import glob
+from typing import Set, List, Dict
+
+# Add the parent directory to the path so we can import the modules
+sys.path.insert(0, os.path.dirname(os.path.dirname(__file__)))
+
+def test_json_files_exist():
+    """Test that all JSON locale files exist and are valid JSON."""
+    print("Testing JSON locale files...")
+    return test_json_structure_validation()
+
+def test_server_i18n():
+    """Test the Python server-side i18n system."""
+    print("\nTesting Python server-side i18n...")
+    
+    try:
+        from py.services.server_i18n import ServerI18nManager
+        
+        # Create a new instance to test
+        i18n = ServerI18nManager()
+        
+        # Test that translations loaded
+        available_locales = i18n.get_available_locales()
+        if not available_locales:
+            print("❌ No locales loaded in server i18n!")
+            return False
+        
+        print(f"✅ Loaded {len(available_locales)} locales: {', '.join(available_locales)}")
+        
+        # Test English translations
+        i18n.set_locale('en')
+        test_key = 'common.status.loading'
+        translation = i18n.get_translation(test_key)
+        if translation == test_key:
+            print(f"❌ Translation not found for key '{test_key}'")
+            return False
+        
+        print(f"✅ English translation for '{test_key}': '{translation}'")
+        
+        # Test Chinese translations
+        i18n.set_locale('zh-CN')
+        translation_cn = i18n.get_translation(test_key)
+        if translation_cn == test_key:
+            print(f"❌ Chinese translation not found for key '{test_key}'")
+            return False
+        
+        print(f"✅ Chinese translation for '{test_key}': '{translation_cn}'")
+        
+        # Test parameter interpolation
+        param_key = 'common.itemCount'
+        translation_with_params = i18n.get_translation(param_key, count=42)
+        if '{count}' in translation_with_params:
+            print(f"❌ Parameter interpolation failed for key '{param_key}'")
+            return False
+        
+        print(f"✅ Parameter interpolation for '{param_key}': '{translation_with_params}'")
+        
+        print("✅ Server-side i18n system working correctly")
+        return True
+        
+    except Exception as e:
+        print(f"❌ Error testing server i18n: {e}")
+        import traceback
+        traceback.print_exc()
+        return False
+
+def test_translation_completeness():
+    """Test that all languages have the same translation keys."""
+    print("\nTesting translation completeness...")
+    
+    locales_dir = os.path.join(os.path.dirname(__file__), 'locales')
+    
+    # Load English as reference
+    with open(os.path.join(locales_dir, 'en.json'), 'r', encoding='utf-8') as f:
+        en_data = json.load(f)
+    
+    en_keys = get_all_translation_keys(en_data)
+    print(f"English has {len(en_keys)} translation keys")
+    
+    # Check other languages
+    locales = ['zh-CN', 'zh-TW', 'ja', 'ru', 'de', 'fr', 'es', 'ko']
+    
+    for locale in locales:
+        with open(os.path.join(locales_dir, f'{locale}.json'), 'r', encoding='utf-8') as f:
+            locale_data = json.load(f)
+        
+        locale_keys = get_all_translation_keys(locale_data)
+        
+        missing_keys = en_keys - locale_keys
+        extra_keys = locale_keys - en_keys
+        
+        if missing_keys:
+            print(f"❌ {locale} missing keys: {len(missing_keys)}")
+            # Print first few missing keys
+            for key in sorted(missing_keys)[:5]:
+                print(f"   - {key}")
+            if len(missing_keys) > 5:
+                print(f"   ... and {len(missing_keys) - 5} more")
+        
+        if extra_keys:
+            print(f"⚠️  {locale} has extra keys: {len(extra_keys)}")
+        
+        if not missing_keys and not extra_keys:
+            print(f"✅ {locale} has complete translations ({len(locale_keys)} keys)")
+    
+    return True
+
+
+def extract_i18n_keys_from_js(file_path: str) -> Set[str]:
+    """Extract translation keys from JavaScript files."""
+    keys = set()
+    
+    try:
+        with open(file_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+        
+        # Remove comments to avoid false positives
+        # Remove single-line comments
+        content = re.sub(r'//.*$', '', content, flags=re.MULTILINE)
+        # Remove multi-line comments
+        content = re.sub(r'/\*.*?\*/', '', content, flags=re.DOTALL)
+        
+        # Pattern for translate() function calls - more specific
+        # Matches: translate('key.name', ...) or translate("key.name", ...)
+        # Must have opening parenthesis immediately after translate
+        translate_pattern = r"\btranslate\s*\(\s*['\"]([a-zA-Z0-9._-]+)['\"]"
+        translate_matches = re.findall(translate_pattern, content)
+        
+        # Filter out single words that are likely not translation keys
+        # Translation keys should typically have dots or be in specific namespaces
+        filtered_translate = [key for key in translate_matches if '.' in key or key in [
+            'loading', 'error', 'success', 'warning', 'info', 'cancel', 'save', 'delete'
+        ]]
+        keys.update(filtered_translate)
+        
+        # Pattern for showToast() function calls - more specific
+        # Matches: showToast('key.name', ...) or showToast("key.name", ...)
+        showtoast_pattern = r"\bshowToast\s*\(\s*['\"]([a-zA-Z0-9._-]+)['\"]"
+        showtoast_matches = re.findall(showtoast_pattern, content)
+        
+        # Filter showToast matches as well
+        filtered_showtoast = [key for key in showtoast_matches if '.' in key or key in [
+            'loading', 'error', 'success', 'warning', 'info', 'cancel', 'save', 'delete'
+        ]]
+        keys.update(filtered_showtoast)
+        
+        # Additional patterns for other i18n function calls you might have
+        # Pattern for t() function calls (if used in JavaScript)
+        t_pattern = r"\bt\s*\(\s*['\"]([a-zA-Z0-9._-]+)['\"]"
+        t_matches = re.findall(t_pattern, content)
+        filtered_t = [key for key in t_matches if '.' in key or key in [
+            'loading', 'error', 'success', 'warning', 'info', 'cancel', 'save', 'delete'
+        ]]
+        keys.update(filtered_t)
+        
+    except Exception as e:
+        print(f"⚠️  Error reading {file_path}: {e}")
+    
+    return keys
+
+
+def extract_i18n_keys_from_html(file_path: str) -> Set[str]:
+    """Extract translation keys from HTML template files."""
+    keys = set()
+    
+    try:
+        with open(file_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+        
+        # Remove HTML comments to avoid false positives
+        content = re.sub(r'<!--.*?-->', '', content, flags=re.DOTALL)
+        
+        # Pattern for t() function calls in Jinja2 templates
+        # Matches: {{ t('key.name') }} or {% ... t('key.name') ... %}
+        # More specific pattern that ensures we're in template context
+        t_pattern = r"(?:\{\{|\{%)[^}]*\bt\s*\(\s*['\"]([a-zA-Z0-9._-]+)['\"][^}]*(?:\}\}|%\})"
+        t_matches = re.findall(t_pattern, content)
+        
+        # Filter HTML matches
+        filtered_t = [key for key in t_matches if '.' in key or key in [
+            'loading', 'error', 'success', 'warning', 'info', 'cancel', 'save', 'delete'
+        ]]
+        keys.update(filtered_t)
+        
+        # Also check for translate() calls in script tags within HTML
+        script_pattern = r'<script[^>]*>(.*?)</script>'
+        script_matches = re.findall(script_pattern, content, flags=re.DOTALL)
+        for script_content in script_matches:
+            # Apply JavaScript extraction to script content
+            translate_pattern = r"\btranslate\s*\(\s*['\"]([a-zA-Z0-9._-]+)['\"]"
+            script_translate_matches = re.findall(translate_pattern, script_content)
+            filtered_script = [key for key in script_translate_matches if '.' in key]
+            keys.update(filtered_script)
+        
+    except Exception as e:
+        print(f"⚠️  Error reading {file_path}: {e}")
+    
+    return keys
+
+
+def get_all_translation_keys(data: dict, prefix: str = '', include_containers: bool = False) -> Set[str]:
+    """
+    Recursively collect translation keys.
+    By default only leaf keys (where the value is NOT a dict) are returned so that
+    structural/container nodes (e.g. 'common', 'common.actions') are not treated
+    as real translation entries and won't appear in the 'unused' list.
+    
+    Set include_containers=True to also include container/object nodes.
+    """
+    keys: Set[str] = set()
+    if not isinstance(data, dict):
+        return keys
+    for key, value in data.items():
+        full_key = f"{prefix}.{key}" if prefix else key
+        if isinstance(value, dict):
+            # Recurse first
+            keys.update(get_all_translation_keys(value, full_key, include_containers))
+            # Optionally include container nodes
+            if include_containers:
+                keys.add(full_key)
+        else:
+            # Leaf node: actual translatable value
+            keys.add(full_key)
+    return keys
+
+
+def test_static_code_analysis():
+    """Test static code analysis to detect missing translation keys."""
+    print("\nTesting static code analysis for translation keys...")
+    
+    # Load English translations as reference
+    locales_dir = os.path.join(os.path.dirname(__file__), 'locales')
+    with open(os.path.join(locales_dir, 'en.json'), 'r', encoding='utf-8') as f:
+        en_data = json.load(f)
+    
+    available_keys = get_all_translation_keys(en_data)
+    print(f"Available translation keys in en.json: {len(available_keys)}")
+    
+    # Known false positives to exclude from analysis
+    # These are typically HTML attributes, CSS classes, or other non-translation strings
+    false_positives = {
+        'checkpoint', 'civitai_api_key', 'div', 'embedding', 'lora', 'show_only_sfw',
+        'model', 'type', 'name', 'value', 'id', 'class', 'style', 'src', 'href',
+        'data', 'width', 'height', 'size', 'format', 'version', 'url', 'path',
+        'file', 'folder', 'image', 'text', 'number', 'boolean', 'array', 'object', 'non.existent.key'
+    }
+    
+    # Extract keys from JavaScript files
+    js_dir = os.path.join(os.path.dirname(__file__), 'static', 'js')
+    js_files = []
+    if os.path.exists(js_dir):
+        # Recursively find all JS files
+        for root, dirs, files in os.walk(js_dir):
+            for file in files:
+                if file.endswith('.js'):
+                    js_files.append(os.path.join(root, file))
+    
+    js_keys = set()
+    js_files_with_keys = []
+    for js_file in js_files:
+        file_keys = extract_i18n_keys_from_js(js_file)
+        # Filter out false positives
+        file_keys = file_keys - false_positives
+        js_keys.update(file_keys)
+        if file_keys:
+            rel_path = os.path.relpath(js_file, os.path.dirname(__file__))
+            js_files_with_keys.append((rel_path, len(file_keys)))
+            print(f"  Found {len(file_keys)} keys in {rel_path}")
+    
+    print(f"Total unique keys found in JavaScript files: {len(js_keys)}")
+    
+    # Extract keys from HTML template files
+    templates_dir = os.path.join(os.path.dirname(__file__), 'templates')
+    html_files = []
+    if os.path.exists(templates_dir):
+        html_files = glob.glob(os.path.join(templates_dir, '*.html'))
+        # Also check for HTML files in subdirectories
+        html_files.extend(glob.glob(os.path.join(templates_dir, '**', '*.html'), recursive=True))
+    
+    html_keys = set()
+    html_files_with_keys = []
+    for html_file in html_files:
+        file_keys = extract_i18n_keys_from_html(html_file)
+        # Filter out false positives
+        file_keys = file_keys - false_positives
+        html_keys.update(file_keys)
+        if file_keys:
+            rel_path = os.path.relpath(html_file, os.path.dirname(__file__))
+            html_files_with_keys.append((rel_path, len(file_keys)))
+            print(f"  Found {len(file_keys)} keys in {rel_path}")
+    
+    print(f"Total unique keys found in HTML templates: {len(html_keys)}")
+    
+    # Combine all used keys
+    all_used_keys = js_keys.union(html_keys)
+    print(f"Total unique keys used in code: {len(all_used_keys)}")
+    
+    # Check for missing keys
+    missing_keys = all_used_keys - available_keys
+    unused_keys = available_keys - all_used_keys
+    
+    success = True
+    
+    if missing_keys:
+        print(f"\n❌ Found {len(missing_keys)} missing translation keys:")
+        for key in sorted(missing_keys):
+            print(f"   - {key}")
+        success = False
+        
+        # Group missing keys by category for better analysis
+        key_categories = {}
+        for key in missing_keys:
+            category = key.split('.')[0] if '.' in key else 'root'
+            if category not in key_categories:
+                key_categories[category] = []
+            key_categories[category].append(key)
+        
+        print(f"\n   Missing keys by category:")
+        for category, keys in sorted(key_categories.items()):
+            print(f"     {category}: {len(keys)} keys")
+            
+        # Provide helpful suggestion
+        print(f"\n💡 If these are false positives, add them to the false_positives set in test_static_code_analysis()")
+    else:
+        print("\n✅ All translation keys used in code are available in en.json")
+    
+    if unused_keys:
+        print(f"\n⚠️  Found {len(unused_keys)} unused translation keys in en.json:")
+        # Only show first 20 to avoid cluttering output
+        for key in sorted(unused_keys)[:20]:
+            print(f"   - {key}")
+        if len(unused_keys) > 20:
+            print(f"   ... and {len(unused_keys) - 20} more")
+
+        # Group unused keys by category for better analysis
+        unused_categories = {}
+        for key in unused_keys:
+            category = key.split('.')[0] if '.' in key else 'root'
+            if category not in unused_categories:
+                unused_categories[category] = []
+            unused_categories[category].append(key)
+        
+        print(f"\n   Unused keys by category:")
+        for category, keys in sorted(unused_categories.items()):
+            print(f"     {category}: {len(keys)} keys")
+    
+    # Summary statistics
+    print(f"\n📊 Static Code Analysis Summary:")
+    print(f"   JavaScript files analyzed: {len(js_files)}")
+    print(f"   JavaScript files with translations: {len(js_files_with_keys)}")
+    print(f"   HTML template files analyzed: {len(html_files)}")
+    print(f"   HTML template files with translations: {len(html_files_with_keys)}")
+    print(f"   Translation keys in en.json: {len(available_keys)}")
+    print(f"   Translation keys used in code: {len(all_used_keys)}")
+    print(f"   Usage coverage: {len(all_used_keys)/len(available_keys)*100:.1f}%")
+    
+    return success
+
+
+def test_json_structure_validation():
+    """Test JSON file structure and syntax validation."""
+    print("\nTesting JSON file structure and syntax validation...")
+    
+    locales_dir = os.path.join(os.path.dirname(__file__), 'locales')
+    if not os.path.exists(locales_dir):
+        print("❌ Locales directory does not exist!")
+        return False
+    
+    expected_locales = ['en', 'zh-CN', 'zh-TW', 'ja', 'ru', 'de', 'fr', 'es', 'ko']
+    success = True
+    
+    for locale in expected_locales:
+        file_path = os.path.join(locales_dir, f'{locale}.json')
+        if not os.path.exists(file_path):
+            print(f"❌ {locale}.json does not exist!")
+            success = False
+            continue
+        
+        try:
+            with open(file_path, 'r', encoding='utf-8') as f:
+                data = json.load(f)
+            
+            # Check for valid JSON structure
+            if not isinstance(data, dict):
+                print(f"❌ {locale}.json root must be an object/dictionary")
+                success = False
+                continue
+            
+            # Check that required sections exist
+            required_sections = ['common', 'header', 'loras', 'recipes', 'modals']
+            missing_sections = []
+            for section in required_sections:
+                if section not in data:
+                    missing_sections.append(section)
+            
+            if missing_sections:
+                print(f"❌ {locale}.json missing required sections: {', '.join(missing_sections)}")
+                success = False
+            
+            # Check for empty values
+            empty_values = []
+            def check_empty_values(obj, path=''):
+                if isinstance(obj, dict):
+                    for key, value in obj.items():
+                        current_path = f"{path}.{key}" if path else key
+                        if isinstance(value, dict):
+                            check_empty_values(value, current_path)
+                        elif isinstance(value, str) and not value.strip():
+                            empty_values.append(current_path)
+                        elif value is None:
+                            empty_values.append(current_path)
+            
+            check_empty_values(data)
+            
+            if empty_values:
+                print(f"⚠️  {locale}.json has {len(empty_values)} empty translation values:")
+                for path in empty_values[:5]:  # Show first 5
+                    print(f"   - {path}")
+                if len(empty_values) > 5:
+                    print(f"   ... and {len(empty_values) - 5} more")
+            
+            print(f"✅ {locale}.json structure is valid")
+            
+        except json.JSONDecodeError as e:
+            print(f"❌ {locale}.json has invalid JSON syntax: {e}")
+            success = False
+        except Exception as e:
+            print(f"❌ Error validating {locale}.json: {e}")
+            success = False
+    
+    return success
+
+def main():
+    """Run all tests."""
+    print("🚀 Testing updated i18n system...\n")
+    
+    success = True
+    
+    # Test JSON files structure and syntax
+    if not test_json_files_exist():
+        success = False
+    
+    # Test server i18n
+    if not test_server_i18n():
+        success = False
+    
+    # Test translation completeness
+    if not test_translation_completeness():
+        success = False
+    
+    # Test static code analysis
+    if not test_static_code_analysis():
+        success = False
+    
+    print(f"\n{'🎉 All tests passed!' if success else '❌ Some tests failed!'}")
+    return success
+
+if __name__ == '__main__':
+    main()