feat(i18n): add model name display option and improve localization, fixes #440

- Add new model name display setting with options to show model name or file name
- Implement helper function to determine display name based on user preference
- Update model card footer to use dynamic display name
- Include model name display setting in settings modal and state management
- Remove redundant labels from display density descriptions in multiple locales
- Simplify card info display descriptions by removing duplicate text

The changes provide cleaner UI text and add flexibility for users to choose between displaying model names or file names in card footers.

static/js/components/shared/ModelCard.js

@@ -11,6 +11,17 @@ import { showDeleteModal } from '../../utils/modalUtils.js';
 import { translate } from '../../utils/i18nHelpers.js';
 import { eventManager } from '../../utils/EventManager.js';
 
+// Helper function to get display name based on settings
+function getDisplayName(model) {
+    const displayNameSetting = state.global.settings.model_name_display || 'model_name';
+    
+    if (displayNameSetting === 'file_name') {
+        return model.file_name || model.model_name || 'Unknown Model';
+    }
+    
+    return model.model_name || model.file_name || 'Unknown Model';
+}
+
 // Add global event delegation handlers using event manager
 export function setupModelCardEventDelegation(modelType) {
     // Remove any existing handler first
@@ -510,7 +521,7 @@ export function createModelCard(model, modelType) {
             ` : ''}
             <div class="card-footer">
                 <div class="model-info">
-                    <span class="model-name">${model.model_name}</span>
+                    <span class="model-name">${getDisplayName(model)}</span>
                     ${model.civitai?.name ? `<span class="version-name">${model.civitai.name}</span>` : ''}
                 </div>
                 <div class="card-actions">

static/js/managers/SettingsManager.js

@@ -290,6 +290,12 @@ export class SettingsManager {
             cardInfoDisplaySelect.value = state.global.settings.card_info_display || 'always';
         }
 
+        // Set model name display setting
+        const modelNameDisplaySelect = document.getElementById('modelNameDisplay');
+        if (modelNameDisplaySelect) {
+            modelNameDisplaySelect.value = state.global.settings.model_name_display || 'model_name';
+        }
+
         // Set optimize example images setting
         const optimizeExampleImagesCheckbox = document.getElementById('optimizeExampleImages');
         if (optimizeExampleImagesCheckbox) {
@@ -1211,6 +1217,10 @@ export class SettingsManager {
             }
             
             showToast('toast.settings.settingsUpdated', { setting: settingKey.replace(/_/g, ' ') }, 'success');
+
+            if (settingKey === 'model_name_display') {
+                this.reloadContent();
+            }
         } catch (error) {
             showToast('toast.settings.settingSaveFailed', { message: error.message }, 'error');
         }

static/js/state/index.js

@@ -26,6 +26,7 @@ const DEFAULT_SETTINGS_BASE = Object.freeze({
     autoplay_on_hover: false,
     display_density: 'default',
     card_info_display: 'always',
+    model_name_display: 'model_name',
     include_trigger_words: false,
     compact_mode: false,
     priority_tags: { ...DEFAULT_PRIORITY_TAG_CONFIG },