Add localization support for new features and update existing translations

- Added "unknown" status to model states in English and Chinese locales.
- Introduced new actions for checking updates and support in both locales.
- Added settings for Civitai API key with help text in both locales.
- Updated context menus and control components to use localized strings.
- Enhanced help and support modals with localization.
- Updated update modal to reflect current and new version information in localized format.
- Refactored various templates to utilize the translation function for better internationalization.

locales/en.json

@@ -57,7 +57,8 @@
             "failed": "Failed",
             "cancelled": "Cancelled",
             "pending": "Pending",
-            "ready": "Ready"
+            "ready": "Ready",
+            "unknown": "Unknown"
         },
         "language": {
             "current": "Language",
@@ -115,8 +116,17 @@
             "switchToLight": "Switch to light theme",
             "switchToDark": "Switch to dark theme",
             "switchToAuto": "Switch to auto theme"
+        },
+        "actions": {
+            "checkUpdates": "Check Updates",
+            "support": "Support"
         }
     },
+    "settings": {
+        "civitaiApiKey": "Civitai API Key",
+        "civitaiApiKeyPlaceholder": "Enter your Civitai API key",
+        "civitaiApiKeyHelp": "Used for authentication when downloading models from Civitai"
+    },
     "loras": {
         "title": "LoRA Models",
         "controls": {
@@ -141,11 +151,14 @@
             "download": "Download from URL",
             "bulk": "Bulk Operations",
             "duplicates": "Find Duplicates",
-            "favorites": "Show Favorites Only"
+            "favorites": "Show Favorites Only",
+            "filterActive": "Filter Active"
         },
         "bulkOperations": {
             "title": "Bulk Operations",
             "selected": "{count} selected",
+            "selectedSuffix": "selected",
+            "viewSelected": "Click to view selected items",
             "sendToWorkflow": "Send all selected LoRAs to workflow",
             "copyAll": "Copy all selected LoRAs syntax",
             "refreshAll": "Refresh CivitAI metadata for selected models",
@@ -161,7 +174,7 @@
             "copyRecipeSyntax": "Copy Recipe Syntax",
             "sendToWorkflowAppend": "Send to Workflow (Append)",
             "sendToWorkflowReplace": "Send to Workflow (Replace)",
-            "openExamplesFolder": "Open Examples Folder",
+            "openExamples": "Open Examples Folder",
             "downloadExamples": "Download Example Images",
             "replacePreview": "Replace Preview",
             "setContentRating": "Set Content Rating",
@@ -448,6 +461,31 @@
         "search": "Search models by name, tags, or other criteria",
         "filter": "Filter models by various criteria",
         "sort": "Sort models by different attributes",
-        "backToTop": "Scroll back to top of page"
+                "tooltiptext": "Scroll back to top of page"
+    },
+    "help": {
+        "title": "Help & Tutorials",
+        "tabs": {
+            "gettingStarted": "Getting Started",
+            "updateVlogs": "Update Vlogs",
+            "documentation": "Documentation"
+        },
+        "gettingStarted": {
+            "title": "Getting Started with LoRA Manager"
+        }
+    },
+    "update": {
+        "title": "Check for Updates",
+        "currentVersion": "Current Version",
+        "newVersion": "New Version",
+        "commit": "Commit"
+    },
+    "support": {
+        "title": "Support the Project",
+        "message": "If you find LoRA Manager useful, I'd really appreciate your support! 🙌",
+        "feedback": {
+            "title": "Provide Feedback",
+            "description": "Your feedback helps shape future updates! Share your thoughts:"
+        }
     }
 }

locales/zh-CN.json

@@ -57,7 +57,8 @@
             "failed": "失败",
             "cancelled": "已取消",
             "pending": "等待中",
-            "ready": "就绪"
+            "ready": "就绪",
+            "unknown": "未知"
         },
         "language": {
             "current": "语言",
@@ -115,8 +116,17 @@
             "switchToLight": "切换到浅色主题",
             "switchToDark": "切换到深色主题",
             "switchToAuto": "切换到自动主题"
+        },
+        "actions": {
+            "checkUpdates": "检查更新",
+            "support": "支持"
         }
     },
+    "settings": {
+        "civitaiApiKey": "Civitai API 密钥",
+        "civitaiApiKeyPlaceholder": "输入您的 Civitai API 密钥",
+        "civitaiApiKeyHelp": "用于从 Civitai 下载模型时的身份验证"
+    },
     "loras": {
         "title": "LoRA",
         "controls": {
@@ -141,16 +151,19 @@
             "download": "从 URL 下载",
             "bulk": "批量操作",
             "duplicates": "查找重复项",
-            "favorites": "仅显示收藏"
+            "favorites": "仅显示收藏",
+            "filterActive": "筛选器已激活"
         },
         "bulkOperations": {
             "title": "批量操作",
             "selected": "已选择{count}项",
+            "selectedSuffix": "已选择",
+            "viewSelected": "点击查看选中项目",
             "sendToWorkflow": "发送到工作流",
-            "copyAll": "复制LoRA语法",
+            "copyAll": "复制所有选中的LoRA语法",
-            "refreshAll": "刷新元数据",
+            "refreshAll": "刷新选中模型的Civitai元数据",
-            "moveAll": "移动",
+            "moveAll": "移动选中模型到文件夹",
-            "deleteAll": "删除",
+            "deleteAll": "删除选中模型",
             "clear": "清除选择"
         },
         "contextMenu": {
@@ -161,7 +174,7 @@
             "copyRecipeSyntax": "复制配方语法",
             "sendToWorkflowAppend": "发送到工作流（追加）",
             "sendToWorkflowReplace": "发送到工作流（替换）",
-            "openExamplesFolder": "打开示例文件夹",
+            "openExamples": "打开示例文件夹",
             "downloadExamples": "下载示例图片",
             "replacePreview": "替换预览图",
             "setContentRating": "设置内容评级",
@@ -449,5 +462,30 @@
         "filter": "按各种条件筛选模型",
         "sort": "按不同属性排序模型",
         "backToTop": "滚动回页面顶部"
+    },
+    "help": {
+        "title": "帮助与教程",
+        "tabs": {
+            "gettingStarted": "快速入门",
+            "updateVlogs": "更新日志",
+            "documentation": "文档"
+        },
+        "gettingStarted": {
+            "title": "LoRA 管理器快速入门"
+        }
+    },
+    "update": {
+        "title": "检查更新",
+        "currentVersion": "当前版本",
+        "newVersion": "新版本",
+        "commit": "提交"
+    },
+    "support": {
+        "title": "支持项目",
+        "message": "如果您觉得 LoRA 管理器有用，我会非常感谢您的支持！🙌",
+        "feedback": {
+            "title": "提供反馈",
+            "description": "您的反馈有助于塑造未来的更新！分享您的想法："
+        }
     }
 }

templates/checkpoints.html

@@ -14,17 +14,17 @@
 {% 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> {{ t('contextMenu.refreshMetadata') }}</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('contextMenu.relinkCivitai') }}</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('contextMenu.copyFilename') }}</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('contextMenu.openExamplesFolder') }}</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('contextMenu.downloadExamples') }}</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('contextMenu.replacePreview') }}</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('contextMenu.setContentRating') }}</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> {{ t('contextMenu.moveToFolder') }}</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('contextMenu.excludeModel') }}</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('contextMenu.deleteModel') }}</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> <span data-i18n="loras.contextMenu.refreshMetadata">Refresh Civitai Data</span>
+        <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> <span data-i18n="loras.contextMenu.relinkCivitai">Re-link to Civitai</span>
+        <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> <span data-i18n="loras.contextMenu.copySyntax">Copy LoRA Syntax</span>
+        <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> <span data-i18n="loras.contextMenu.sendToWorkflowAppend">Send to Workflow (Append)</span>
+        <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> <span data-i18n="loras.contextMenu.sendToWorkflowReplace">Send to Workflow (Replace)</span>
+        <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> <span data-i18n="loras.contextMenu.openExamples">Open Examples Folder</span>
+        <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> <span data-i18n="loras.contextMenu.downloadExamples">Download Example Images</span>
+        <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> <span data-i18n="loras.contextMenu.replacePreview">Replace Preview</span>
+        <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> <span data-i18n="loras.contextMenu.setContentRating">Set Content Rating</span>
+        <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> <span data-i18n="loras.contextMenu.moveToFolder">Move to Folder</span>
+        <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> <span data-i18n="loras.contextMenu.excludeModel">Exclude Model</span>
+        <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> <span data-i18n="loras.contextMenu.deleteModel">Delete Model</span>
+        <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 data-i18n="modals.contentRating.title">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"><span data-i18n="modals.contentRating.current">Current:</span> <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" data-i18n="modals.contentRating.levels.pg">PG</button>
+            <button class="nsfw-level-btn" data-level="1">{{ t('modals.contentRating.levels.pg') }}</button>
-            <button class="nsfw-level-btn" data-level="2" data-i18n="modals.contentRating.levels.pg13">PG13</button>
+            <button class="nsfw-level-btn" data-level="2">{{ t('modals.contentRating.levels.pg13') }}</button>
-            <button class="nsfw-level-btn" data-level="4" data-i18n="modals.contentRating.levels.r">R</button>
+            <button class="nsfw-level-btn" data-level="4">{{ t('modals.contentRating.levels.r') }}</button>
-            <button class="nsfw-level-btn" data-level="8" data-i18n="modals.contentRating.levels.x">X</button>
+            <button class="nsfw-level-btn" data-level="8">{{ t('modals.contentRating.levels.x') }}</button>
-            <button class="nsfw-level-btn" data-level="16" data-i18n="modals.contentRating.levels.xxx">XXX</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 data-i18n="loras.controls.sort.title" data-i18n-target="title" title="Sort models by..." class="control-group">
+            <div title="{{ t('loras.controls.sort.title') }}" class="control-group">
                 <select id="sortSelect">
-                    <optgroup data-i18n="loras.controls.sort.name" data-i18n-target="label" label="Name">
+                    <optgroup label="{{ t('loras.controls.sort.name') }}">
-                        <option value="name:asc" data-i18n="loras.controls.sort.nameAsc">A - Z</option>
+                        <option value="name:asc">{{ t('loras.controls.sort.nameAsc') }}</option>
-                        <option value="name:desc" data-i18n="loras.controls.sort.nameDesc">Z - A</option>
+                        <option value="name:desc">{{ t('loras.controls.sort.nameDesc') }}</option>
                     </optgroup>
-                    <optgroup data-i18n="loras.controls.sort.date" data-i18n-target="label" label="Date Added">
+                    <optgroup label="{{ t('loras.controls.sort.date') }}">
-                        <option value="date:desc" data-i18n="loras.controls.sort.dateDesc">Newest</option>
+                        <option value="date:desc">{{ t('loras.controls.sort.dateDesc') }}</option>
-                        <option value="date:asc" data-i18n="loras.controls.sort.dateAsc">Oldest</option>
+                        <option value="date:asc">{{ t('loras.controls.sort.dateAsc') }}</option>
                     </optgroup>
-                    <optgroup data-i18n="loras.controls.sort.size" data-i18n-target="label" label="File Size">
+                    <optgroup label="{{ t('loras.controls.sort.size') }}">
-                        <option value="size:desc" data-i18n="loras.controls.sort.sizeDesc">Largest</option>
+                        <option value="size:desc">{{ t('loras.controls.sort.sizeDesc') }}</option>
-                        <option value="size:asc" data-i18n="loras.controls.sort.sizeAsc">Smallest</option>
+                        <option value="size:asc">{{ t('loras.controls.sort.sizeAsc') }}</option>
                     </optgroup>
                 </select>
             </div>
-            <div data-i18n="loras.controls.refresh.title" data-i18n-target="title" title="Refresh model list" class="control-group dropdown-group">
+            <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 data-i18n="common.actions.refresh">Refresh</span></button>
+                <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> <span data-i18n="loras.controls.refresh.quick">Quick Refresh (incremental)</span>
+                        <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> <span data-i18n="loras.controls.refresh.full">Full Rebuild (complete)</span>
+                        <i class="fas fa-tools"></i> <span>{{ t('loras.controls.refresh.full') }}</span>
                     </div>
                 </div>
             </div>
             
             <div class="control-group">
-                <button data-action="fetch" data-i18n="loras.controls.fetch" data-i18n-target="title" title="Fetch from Civitai"><i class="fas fa-download"></i> <span data-i18n="loras.controls.fetch">Fetch</span></button>
+                <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" data-i18n="loras.controls.download" data-i18n-target="title" title="Download from URL">
+                <button data-action="download" title="{{ t('loras.controls.download') }}">
-                    <i class="fas fa-cloud-download-alt"></i> <span data-i18n="loras.controls.download">Download</span>
+                    <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" data-i18n="loras.controls.bulk" data-i18n-target="title" title="Bulk Operations (Press B)">
+                <button id="bulkOperationsBtn" data-action="bulk" title="{{ t('loras.controls.bulk') }}">
-                    <i class="fas fa-th-large"></i> <span><span data-i18n="loras.controls.bulk">Bulk</span> <div class="shortcut-key">B</div></span>
+                    <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" data-i18n="loras.controls.duplicates" data-i18n-target="title" title="Find duplicate models">
+                <button id="findDuplicatesBtn" data-action="find-duplicates" title="{{ t('loras.controls.duplicates') }}">
-                    <i class="fas fa-clone"></i> <span data-i18n="loras.controls.duplicates">Duplicates</span>
+                    <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" data-i18n="loras.controls.favorites" data-i18n-target="title" title="Show favorites only">
+                <button id="favoriteFilterBtn" data-action="toggle-favorites" class="favorite-filter" title="{{ t('loras.controls.favorites') }}">
-                    <i class="fas fa-star"></i> <span data-i18n="loras.controls.favorites">Favorites</span>
+                    <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">
-                    <span data-i18n="keyboard.navigation">Keyboard Navigation:</span>
+                    <span>{{ t('keyboard.navigation') }}</span>
                     <table class="keyboard-shortcuts">
                         <tr>
                             <td><span class="key">Page Up</span></td>
-                            <td data-i18n="keyboard.shortcuts.pageUp">Scroll up one page</td>
+                            <td>{{ t('keyboard.shortcuts.pageUp') }}</td>
                         </tr>
                         <tr>
                             <td><span class="key">Page Down</span></td>
-                            <td data-i18n="keyboard.shortcuts.pageDown">Scroll down one page</td>
+                            <td>{{ t('keyboard.shortcuts.pageDown') }}</td>
                         </tr>
                         <tr>
                             <td><span class="key">Home</span></td>
-                            <td data-i18n="keyboard.shortcuts.home">Jump to top</td>
+                            <td>{{ t('keyboard.shortcuts.home') }}</td>
                         </tr>
                         <tr>
                             <td><span class="key">End</span></td>
-                            <td data-i18n="keyboard.shortcuts.end">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">
+        <span id="selectedCount" class="selectable-count" title="{{ t('loras.bulkOperations.viewSelected') }}">
-            0 selected <i class="fas fa-caret-down dropdown-caret"></i>
+            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" data-i18n="loras.bulkOperations.sendToWorkflow" data-i18n-target="title" title="Send all selected LoRAs to workflow">
+            <button data-action="send-to-workflow" title="{{ t('loras.bulkOperations.sendToWorkflow') }}">
-                <i class="fas fa-arrow-right"></i> <span data-i18n="loras.bulkOperations.sendToWorkflow">Send to Workflow</span>
+                <i class="fas fa-arrow-right"></i> <span>{{ t('loras.bulkOperations.sendToWorkflow') }}</span>
             </button>
-            <button data-action="copy-all" data-i18n="loras.bulkOperations.copyAll" data-i18n-target="title" title="Copy all selected LoRAs syntax">
+            <button data-action="copy-all" title="{{ t('loras.bulkOperations.copyAll') }}">
-                <i class="fas fa-copy"></i> <span data-i18n="loras.bulkOperations.copyAll">Copy All</span>
+                <i class="fas fa-copy"></i> <span>{{ t('loras.bulkOperations.copyAll') }}</span>
             </button>
-            <button data-action="refresh-all" data-i18n="loras.bulkOperations.refreshAll" data-i18n-target="title" title="Refresh CivitAI metadata for selected models">
+            <button data-action="refresh-all" title="{{ t('loras.bulkOperations.refreshAll') }}">
-                <i class="fas fa-sync-alt"></i> <span data-i18n="loras.bulkOperations.refreshAll">Refresh All</span>
+                <i class="fas fa-sync-alt"></i> <span>{{ t('loras.bulkOperations.refreshAll') }}</span>
             </button>
-            <button data-action="move-all" data-i18n="loras.bulkOperations.moveAll" data-i18n-target="title" title="Move selected models to folder">
+            <button data-action="move-all" title="{{ t('loras.bulkOperations.moveAll') }}">
-                <i class="fas fa-folder-open"></i> <span data-i18n="loras.bulkOperations.moveAll">Move All</span>
+                <i class="fas fa-folder-open"></i> <span>{{ t('loras.bulkOperations.moveAll') }}</span>
             </button>
-            <button data-action="delete-all" data-i18n="loras.bulkOperations.deleteAll" data-i18n-target="title" title="Delete selected models" class="danger-btn">
+            <button data-action="delete-all" title="{{ t('loras.bulkOperations.deleteAll') }}" class="danger-btn">
-                <i class="fas fa-trash"></i> <span data-i18n="loras.bulkOperations.deleteAll">Delete All</span>
+                <i class="fas fa-trash"></i> <span>{{ t('loras.bulkOperations.deleteAll') }}</span>
             </button>
-            <button data-action="clear" data-i18n="loras.bulkOperations.clear" data-i18n-target="title" title="Clear selection">
+            <button data-action="clear" title="{{ t('loras.bulkOperations.clear') }}">
-                <i class="fas fa-times"></i> <span data-i18n="loras.bulkOperations.clear">Clear</span>
+                <i class="fas fa-times"></i> <span>{{ t('loras.bulkOperations.clear') }}</span>
             </button>
         </div>
     </div>

templates/components/header.html

@@ -42,23 +42,23 @@
     <div class="header-actions">
       <!-- Integrated corner controls -->
       <div class="header-controls">
-        <div class="theme-toggle" data-i18n="header.theme.toggle" data-i18n-target="title" 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>

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 active" data-tab="getting-started">{{ t('help.tabs.gettingStarted') }}</button>
-            <button class="tab-btn" data-tab="update-vlogs">Update Vlogs</button>
+            <button class="tab-btn" data-tab="update-vlogs">{{ t('help.tabs.updateVlogs') }}</button>
-            <button class="tab-btn" data-tab="documentation">Documentation</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">

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,7 +24,7 @@
                     </div>
                 </div>
                 <div class="input-help">
-                    Used for authentication when downloading models from Civitai
+                    {{ t('settings.civitaiApiKeyHelp') }}
                 </div>
             </div>
             
@@ -145,24 +145,24 @@
                 <div class="setting-item">
                     <div class="setting-row">
                         <div class="setting-info">
-                            <label for="languageSelect" data-translate="common.language.select">Select Language</label>
+                            <label for="languageSelect">{{ t('common.language.select') }}</label>
                         </div>
                         <div class="setting-control select-control">
                             <select id="languageSelect" onchange="settingsManager.saveLanguageSetting()">
-                                <option value="en" data-translate="common.language.english">English</option>
+                                <option value="en">{{ t('common.language.english') }}</option>
-                                <option value="zh-CN" data-translate="common.language.chinese_simplified">中文（简体）</option>
+                                <option value="zh-CN">{{ t('common.language.chinese_simplified') }}</option>
-                                <option value="zh-TW" data-translate="common.language.chinese_traditional">中文（繁體）</option>
+                                <option value="zh-TW">{{ t('common.language.chinese_traditional') }}</option>
-                                <option value="ru" data-translate="common.language.russian">Русский</option>
+                                <option value="ru">{{ t('common.language.russian') }}</option>
-                                <option value="de" data-translate="common.language.german">Deutsch</option>
+                                <option value="de">{{ t('common.language.german') }}</option>
-                                <option value="ja" data-translate="common.language.japanese">日本語</option>
+                                <option value="ja">{{ t('common.language.japanese') }}</option>
-                                <option value="ko" data-translate="common.language.korean">한국어</option>
+                                <option value="ko">{{ t('common.language.korean') }}</option>
-                                <option value="fr" data-translate="common.language.french">Français</option>
+                                <option value="fr">{{ t('common.language.french') }}</option>
-                                <option value="es" data-translate="common.language.spanish">Español</option>
+                                <option value="es">{{ t('common.language.spanish') }}</option>
                             </select>
                         </div>
                     </div>
-                    <div class="input-help" data-translate="common.language.select_help">
+                    <div class="input-help">
-                        Choose your preferred language for the interface
+                        {{ t('common.language.select_help') }}
                     </div>
                 </div>
             </div>

templates/components/modals/support_modal.html

@@ -4,14 +4,14 @@
         <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>
+                <h3><i class="fas fa-comment"></i> {{ t('support.feedback.title') }}</h3>
-                <p>Your feedback helps shape future updates! Share your thoughts:</p>
+                <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>

templates/components/modals/update_modal.html

@@ -4,18 +4,18 @@
         <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>{{ 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>

templates/embeddings.html

@@ -14,17 +14,17 @@
 {% 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> {{ t('contextMenu.refreshMetadata') }}</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('contextMenu.relinkCivitai') }}</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('contextMenu.copyFilename') }}</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('contextMenu.openExamplesFolder') }}</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('contextMenu.downloadExamples') }}</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('contextMenu.replacePreview') }}</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('contextMenu.setContentRating') }}</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> {{ t('contextMenu.moveToFolder') }}</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('contextMenu.excludeModel') }}</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('contextMenu.deleteModel') }}</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/recipes.html

@@ -19,17 +19,17 @@
 
 <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> {{ t('contextMenu.shareRecipe') }}</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('contextMenu.copyRecipeSyntax') }}</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('contextMenu.sendToWorkflowAppend') }}</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('contextMenu.sendToWorkflowReplace') }}</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('contextMenu.viewAllLoras') }}</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('contextMenu.downloadMissingLoras') }}</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> {{ t('contextMenu.setContentRating') }}
+        <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> {{ t('contextMenu.deleteRecipe') }}</div>
+    <div class="context-menu-item delete-item" data-action="delete"><i class="fas fa-trash"></i> {{ t('loras.contextMenu.deleteRecipe') }}</div>
 </div>
 {% endblock %}