Enhance localization and UI for model management features

- Added new localization keys for usage statistics, collection analysis, storage efficiency, and insights in English and Chinese.
- Updated modal templates to utilize localization for delete, exclude, and bulk delete confirmations.
- Improved download modal with localized labels and placeholders.
- Enhanced example access modal with localized titles and descriptions.
- Updated help modal to include localized content for update vlogs and documentation sections.
- Refactored move modal to use localization for labels and buttons.
- Implemented localization in relink Civitai modal for warnings and help text.
- Updated update modal to reflect localized text for actions and progress messages.
- Enhanced statistics template with localized titles for charts and lists.

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>