feat(ui): add setting to toggle version name display on model cards (#916)

shouldBypassAutocompleteWidgetMigration only matched inputs by widget name,
but ComfyUI's migrateWidgetsValues also matches forceInput inputs (like "seed").
This discrepancy meant the bypass never triggered for TextLM/PromptLM nodes,
causing migrateWidgetsValues to filter out real widget values by incorrectly
mapping forceInput flags onto saved autocomplete values.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

locales/de.json

@@ -428,6 +428,8 @@
                 "hover": "Bei Hover anzeigen"
             },
             "cardInfoDisplayHelp": "Wählen Sie, wann Modellinformationen und Aktionsschaltflächen angezeigt werden sollen",
+            "showVersionOnCard": "Version auf Karte anzeigen",
+            "showVersionOnCardHelp": "Den Versionsnamen auf Modellkarten ein- oder ausblenden",
             "modelCardFooterAction": "Aktion der Modellkarten-Schaltfläche",
             "modelCardFooterActionOptions": {
                 "exampleImages": "Beispielbilder öffnen",

locales/en.json

@@ -428,6 +428,8 @@
                 "hover": "Reveal on Hover"
             },
             "cardInfoDisplayHelp": "Choose when to display model information and action buttons",
+            "showVersionOnCard": "Show Version on Card",
+            "showVersionOnCardHelp": "Show or hide the version name on model cards",
             "modelCardFooterAction": "Model Card Button Action",
             "modelCardFooterActionOptions": {
                 "exampleImages": "Open Example Images",

locales/es.json

@@ -428,6 +428,8 @@
                 "hover": "Mostrar al pasar el ratón"
             },
             "cardInfoDisplayHelp": "Elige cuándo mostrar información del modelo y botones de acción",
+            "showVersionOnCard": "Mostrar versión en la tarjeta",
+            "showVersionOnCardHelp": "Mostrar u ocultar el nombre de versión en las tarjetas de modelo",
             "modelCardFooterAction": "Acción del botón de tarjeta de modelo",
             "modelCardFooterActionOptions": {
                 "exampleImages": "Abrir imágenes de ejemplo",

locales/fr.json

@@ -428,6 +428,8 @@
                 "hover": "Révéler au survol"
             },
             "cardInfoDisplayHelp": "Choisissez quand afficher les informations du modèle et les boutons d'action",
+            "showVersionOnCard": "Afficher la version sur la carte",
+            "showVersionOnCardHelp": "Afficher ou masquer le nom de version sur les cartes de modèle",
             "modelCardFooterAction": "Action du bouton de carte de modèle",
             "modelCardFooterActionOptions": {
                 "exampleImages": "Ouvrir les images d'exemple",

locales/he.json

@@ -428,6 +428,8 @@
                 "hover": "חשוף בריחוף"
             },
             "cardInfoDisplayHelp": "בחר מתי להציג מידע על המודל וכפתורי פעולה",
+            "showVersionOnCard": "הצג גרסה בכרטיס",
+            "showVersionOnCardHelp": "הצג או הסתר את שם הגרסה בכרטיסי המודל",
             "modelCardFooterAction": "פעולת כפתור כרטיס מודל",
             "modelCardFooterActionOptions": {
                 "exampleImages": "פתח תמונות דוגמה",

locales/ja.json

@@ -428,6 +428,8 @@
                 "hover": "ホバー時に表示"
             },
             "cardInfoDisplayHelp": "モデル情報とアクションボタンの表示タイミングを選択",
+            "showVersionOnCard": "カードにバージョンを表示",
+            "showVersionOnCardHelp": "モデルカード上のバージョン名の表示/非表示を切り替えます",
             "modelCardFooterAction": "モデルカードボタンのアクション",
             "modelCardFooterActionOptions": {
                 "exampleImages": "例画像を開く",

locales/ko.json

@@ -428,6 +428,8 @@
                 "hover": "호버 시 표시"
             },
             "cardInfoDisplayHelp": "모델 정보 및 액션 버튼을 언제 표시할지 선택하세요",
+            "showVersionOnCard": "카드에 버전 표시",
+            "showVersionOnCardHelp": "모델 카드에 버전 이름 표시 여부를 전환합니다",
             "modelCardFooterAction": "모델 카드 버튼 동작",
             "modelCardFooterActionOptions": {
                 "exampleImages": "예시 이미지 열기",

locales/ru.json

@@ -428,6 +428,8 @@
                 "hover": "Показать при наведении"
             },
             "cardInfoDisplayHelp": "Выберите когда отображать информацию о модели и кнопки действий",
+            "showVersionOnCard": "Показывать версию на карточке",
+            "showVersionOnCardHelp": "Показать или скрыть название версии на карточках моделей",
             "modelCardFooterAction": "Действие кнопки карточки модели",
             "modelCardFooterActionOptions": {
                 "exampleImages": "Открыть примеры изображений",

locales/zh-CN.json

@@ -428,6 +428,8 @@
                 "hover": "悬停时显示"
             },
             "cardInfoDisplayHelp": "选择何时显示模型信息和操作按钮",
+            "showVersionOnCard": "在卡片上显示版本",
+            "showVersionOnCardHelp": "在模型卡片上显示或隐藏版本名称",
             "modelCardFooterAction": "模型卡片按钮操作",
             "modelCardFooterActionOptions": {
                 "exampleImages": "打开示例图片",

locales/zh-TW.json

@@ -428,6 +428,8 @@
                 "hover": "滑鼠懸停顯示"
             },
             "cardInfoDisplayHelp": "選擇何時顯示模型資訊與操作按鈕",
+            "showVersionOnCard": "在卡片上顯示版本",
+            "showVersionOnCardHelp": "在模型卡片上顯示或隱藏版本名稱",
             "modelCardFooterAction": "模型卡片按鈕操作",
             "modelCardFooterActionOptions": {
                 "exampleImages": "開啟範例圖片",

py/services/settings_manager.py

@@ -97,6 +97,7 @@ DEFAULT_SETTINGS: Dict[str, Any] = {
     "priority_tags": DEFAULT_PRIORITY_TAG_CONFIG.copy(),
     "model_name_display": "model_name",
     "model_card_footer_action": "replace_preview",
+    "show_version_on_card": True,
     "update_flag_strategy": "same_base",
     "auto_organize_exclusions": [],
     "metadata_refresh_skip_paths": [],

static/css/components/card.css

@@ -507,6 +507,11 @@
     font-size: 0.75em;
 }
 
+/* Hide civitai version name when setting is disabled */
+body.hide-card-version .civitai-version {
+    display: none;
+}
+
 /* Prevent text selection on cards and interactive elements */
 .model-card,
 .model-card *,

static/js/components/shared/ModelCard.js

@@ -645,7 +645,7 @@ export function createModelCard(model, modelType) {
                 <div class="model-info">
                     <span class="model-name" title="${getDisplayName(model).replace(/"/g, '&quot;')}">${getDisplayName(model)}</span>
                     <div>
-                        ${model.civitai?.name ? `<span class="version-name">${model.civitai.name}</span>` : ''}
+                        ${model.civitai?.name ? `<span class="version-name civitai-version">${model.civitai.name}</span>` : ''}
                         ${hasUsageCount ? `<span class="version-name" title="${translate('modelCard.usage.timesUsed', {}, 'Times used')}">${model.usage_count}×</span>` : ''}
                     </div>
                 </div>

static/js/managers/SettingsManager.js

@@ -879,6 +879,12 @@ export class SettingsManager {
             modelCardFooterActionSelect.value = state.global.settings.model_card_footer_action || 'example_images';
         }
 
+        // Set show version on card
+        const showVersionOnCardCheckbox = document.getElementById('showVersionOnCard');
+        if (showVersionOnCardCheckbox) {
+            showVersionOnCardCheckbox.checked = state.global.settings.show_version_on_card !== false;
+        }
+
         // Set model name display setting
         const modelNameDisplaySelect = document.getElementById('modelNameDisplay');
         if (modelNameDisplaySelect) {
@@ -2890,6 +2896,10 @@ export class SettingsManager {
         const cardInfoDisplay = state.global.settings.card_info_display || 'always';
         document.body.classList.toggle('hover-reveal', cardInfoDisplay === 'hover');
 
+        // Apply show version on card setting
+        const showVersionOnCard = state.global.settings.show_version_on_card !== false;
+        document.body.classList.toggle('hide-card-version', !showVersionOnCard);
+
         const shouldShowSidebar = state.global.settings.show_folder_sidebar !== false;
         if (sidebarManager && typeof sidebarManager.setSidebarEnabled === 'function') {
             sidebarManager.setSidebarEnabled(shouldShowSidebar).catch((error) => {

static/js/state/index.js

@@ -38,6 +38,7 @@ const DEFAULT_SETTINGS_BASE = Object.freeze({
     show_folder_sidebar: true,
     model_name_display: 'model_name',
     model_card_footer_action: 'example_images',
+    show_version_on_card: true,
     include_trigger_words: false,
     compact_mode: false,
     priority_tags: { ...DEFAULT_PRIORITY_TAG_CONFIG },

templates/components/modals/settings_modal.html

@@ -554,6 +554,24 @@
                                 </div>
                             </div>
 
+                            <div class="setting-item">
+                                <div class="setting-row">
+                                    <div class="setting-info">
+                                        <label for="showVersionOnCard">
+                                        {{ t('settings.layoutSettings.showVersionOnCard') }}
+                                        <i class="fas fa-info-circle info-icon" data-tooltip="{{ t('settings.layoutSettings.showVersionOnCardHelp') }}"></i>
+                                    </label>
+                                    </div>
+                                    <div class="setting-control">
+                                        <label class="toggle-switch">
+                                            <input type="checkbox" id="showVersionOnCard"
+                                                   onchange="settingsManager.saveToggleSetting('showVersionOnCard', 'show_version_on_card')">
+                                            <span class="toggle-slider"></span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+
                             <div class="setting-item">
                                 <div class="setting-row">
                                     <div class="setting-info">

vue-widgets/src/components/AutocompleteTextWidget.vue

@@ -186,8 +186,22 @@ onMounted(() => {
       (container as any).__widgetInputEl.inputEl = textareaRef.value
     }
 
-    // Initialize hasText state
+    // Apply pending value from setValue if exists (workflow loading before Vue mount)
-    hasText.value = textareaRef.value.value.length > 0
+    const pendingValue = (props.widget as any)._pendingValue
+    if (pendingValue !== undefined) {
+      textareaRef.value.value = pendingValue
+      hasText.value = pendingValue.length > 0
+      delete (props.widget as any)._pendingValue
+      // Dispatch event to notify autocomplete of value change
+      textareaRef.value.dispatchEvent(new CustomEvent('lora-manager:autocomplete-value-changed', {
+        detail: { value: pendingValue }
+      }))
+    }
+
+    // Initialize hasText state (already done if pendingValue was applied, but safe to re-check)
+    if (pendingValue === undefined) {
+      hasText.value = textareaRef.value.value.length > 0
+    }
 
     // Listen for external value change events from setValue
     textareaRef.value.addEventListener('lora-manager:autocomplete-value-changed', onExternalValueChange as EventListener)

vue-widgets/src/main.ts

@@ -432,7 +432,7 @@ function shouldBypassAutocompleteWidgetMigration(
   }
 
   const originalWidgetsInputs = Object.values(inputDefs).filter((input: any) =>
-    widgetNames.has(input.name)
+    widgetNames.has(input.name) || input.forceInput
   )
 
   const widgetIndexHasForceInput = originalWidgetsInputs.flatMap((input: any) =>
@@ -441,10 +441,12 @@ function shouldBypassAutocompleteWidgetMigration(
       : [!!input.forceInput]
   )
 
-  return (
+  const result = (
     widgetIndexHasForceInput.some(Boolean) &&
     widgetIndexHasForceInput.length === widgetValues.length
   )
+
+  return result
 }
 
 function remapWidgetValuesByName(
@@ -459,6 +461,7 @@ function remapWidgetValuesByName(
     }
   })
 
+  const currentWidgetNameSet = new Set(currentWidgetNames)
   const remappedValues: unknown[] = []
   for (const name of currentWidgetNames) {
     if (valueByName.has(name)) {
@@ -466,6 +469,18 @@ function remapWidgetValuesByName(
     }
   }
 
+  // Append values for saved widget names that are NOT in the current widget
+  // list (e.g. forceInput widgets like "seed" that haven't been converted
+  // back to DOM widgets yet at configure time).  Without these, the
+  // resulting array may accidentally match the length of ComfyUI's
+  // widgetIndexHasForceInput array, causing migrateWidgetsValues to
+  // incorrectly filter out the wrong values and drop real widget content.
+  for (const name of savedWidgetNames) {
+    if (!currentWidgetNameSet.has(name) && valueByName.has(name)) {
+      remappedValues.push(valueByName.get(name))
+    }
+  }
+
   return remappedValues
 }
 
@@ -498,6 +513,7 @@ function normalizeAutocompleteWidgetValues(node: any, info: any) {
   }
 
   const currentWidgetNames = getSerializableWidgetNames(node)
+
   if (currentWidgetNames.length === 0) {
     return
   }
@@ -615,6 +631,8 @@ function createAutocompleteTextWidgetFactory(
           inputEl.dispatchEvent(new CustomEvent('lora-manager:autocomplete-value-changed', {
             detail: { value: v ?? '' }
           }))
+        } else {
+          ;(widget as any)._pendingValue = v ?? ''
         }
         // Also call onSetValue if defined (for Vue component integration)
         if (typeof widget.onSetValue === 'function') {
@@ -751,10 +769,16 @@ app.registerExtension({
 
       nodeType.prototype.configure = function (info: any) {
         normalizeAutocompleteWidgetValues(this, info)
-        if (shouldBypassAutocompleteWidgetMigration(this, info?.widgets_values ?? [])) {
+
+        const bypassResult = shouldBypassAutocompleteWidgetMigration(this, info?.widgets_values ?? [])
+
+        if (bypassResult) {
           info.widgets_values = [...(info.widgets_values ?? []), null]
         }
-        return originalConfigure?.apply(this, arguments)
+
+        const result = originalConfigure?.apply(this, arguments)
+
+        return result
       }
     }
 

web/comfyui/vue-widgets/lora-manager-widgets.js

@@ -2118,14 +2118,14 @@ to { transform: rotate(360deg);
   padding: 20px 0;
 }
 
-.autocomplete-text-widget[data-v-76ce0f19] {
+.autocomplete-text-widget[data-v-5514bf46] {
   background: transparent;
   height: 100%;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
 }
-.input-wrapper[data-v-76ce0f19] {
+.input-wrapper[data-v-5514bf46] {
   position: relative;
   flex: 1;
   display: flex;
@@ -2133,7 +2133,7 @@ to { transform: rotate(360deg);
 }
 
 /* Canvas mode styles (default) - matches built-in comfy-multiline-input */
-.text-input[data-v-76ce0f19] {
+.text-input[data-v-5514bf46] {
   flex: 1;
   width: 100%;
   background-color: var(--comfy-input-bg, #222);
@@ -2150,7 +2150,7 @@ to { transform: rotate(360deg);
 }
 
 /* Vue DOM mode styles - matches built-in p-textarea in Vue DOM mode */
-.text-input.vue-dom-mode[data-v-76ce0f19] {
+.text-input.vue-dom-mode[data-v-5514bf46] {
   background-color: var(--color-charcoal-400, #313235);
   color: #fff;
   padding: 8px 12px 30px 12px;  /* Reserve bottom space for clear button */
@@ -2159,12 +2159,12 @@ to { transform: rotate(360deg);
   font-size: 12px;
   font-family: inherit;
 }
-.text-input[data-v-76ce0f19]:focus {
+.text-input[data-v-5514bf46]:focus {
   outline: none;
 }
 
 /* Clear button styles */
-.clear-button[data-v-76ce0f19] {
+.clear-button[data-v-5514bf46] {
   position: absolute;
   right: 6px;
   bottom: 6px;  /* Changed from top to bottom */
@@ -2187,31 +2187,31 @@ to { transform: rotate(360deg);
 }
 
 /* Show clear button when hovering over input wrapper */
-.input-wrapper:hover .clear-button[data-v-76ce0f19] {
+.input-wrapper:hover .clear-button[data-v-5514bf46] {
   opacity: 0.7;
   pointer-events: auto;
 }
-.clear-button[data-v-76ce0f19]:hover {
+.clear-button[data-v-5514bf46]:hover {
   opacity: 1;
   background: rgba(255, 100, 100, 0.8);
 }
-.clear-button svg[data-v-76ce0f19] {
+.clear-button svg[data-v-5514bf46] {
   width: 12px;
   height: 12px;
 }
 
 /* Vue DOM mode adjustments for clear button */
-.text-input.vue-dom-mode ~ .clear-button[data-v-76ce0f19] {
+.text-input.vue-dom-mode ~ .clear-button[data-v-5514bf46] {
   right: 8px;
   bottom: 10px;  /* Changed from top to bottom, adjusted for Vue DOM padding */
   width: 20px;
   height: 20px;
   background: rgba(107, 114, 128, 0.6);
 }
-.text-input.vue-dom-mode ~ .clear-button[data-v-76ce0f19]:hover {
+.text-input.vue-dom-mode ~ .clear-button[data-v-5514bf46]:hover {
   background: oklch(62% 0.18 25);
 }
-.text-input.vue-dom-mode ~ .clear-button svg[data-v-76ce0f19] {
+.text-input.vue-dom-mode ~ .clear-button svg[data-v-5514bf46] {
   width: 14px;
   height: 14px;
 }`));
@@ -14864,7 +14864,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (container && container.__widgetInputEl) {
           container.__widgetInputEl.inputEl = textareaRef.value;
         }
-        hasText.value = textareaRef.value.value.length > 0;
+        const pendingValue = props.widget._pendingValue;
+        if (pendingValue !== void 0) {
+          textareaRef.value.value = pendingValue;
+          hasText.value = pendingValue.length > 0;
+          delete props.widget._pendingValue;
+          textareaRef.value.dispatchEvent(new CustomEvent("lora-manager:autocomplete-value-changed", {
+            detail: { value: pendingValue }
+          }));
+        }
+        if (pendingValue === void 0) {
+          hasText.value = textareaRef.value.value.length > 0;
+        }
         textareaRef.value.addEventListener("lora-manager:autocomplete-value-changed", onExternalValueChange);
       }
       if (textareaRef.value && typeof props.widget.callback === "function") {
@@ -14932,7 +14943,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AutocompleteTextWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-76ce0f19"]]);
+const AutocompleteTextWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5514bf46"]]);
 function createVueWidgetCleanup(vueApp, onCleanup) {
   let didUnmount = false;
   return () => {
@@ -15573,12 +15584,13 @@ function shouldBypassAutocompleteWidgetMigration(node, widgetValues) {
     return false;
   }
   const originalWidgetsInputs = Object.values(inputDefs).filter(
-    (input) => widgetNames.has(input.name)
+    (input) => widgetNames.has(input.name) || input.forceInput
   );
   const widgetIndexHasForceInput = originalWidgetsInputs.flatMap(
     (input) => input.control_after_generate ? [!!input.forceInput, false] : [!!input.forceInput]
   );
-  return widgetIndexHasForceInput.some(Boolean) && widgetIndexHasForceInput.length === widgetValues.length;
+  const result = widgetIndexHasForceInput.some(Boolean) && widgetIndexHasForceInput.length === widgetValues.length;
+  return result;
 }
 function remapWidgetValuesByName(widgetValues, savedWidgetNames, currentWidgetNames) {
   const valueByName = /* @__PURE__ */ new Map();
@@ -15587,12 +15599,18 @@ function remapWidgetValuesByName(widgetValues, savedWidgetNames, currentWidgetNa
       valueByName.set(name, widgetValues[index]);
     }
   });
+  const currentWidgetNameSet = new Set(currentWidgetNames);
   const remappedValues = [];
   for (const name of currentWidgetNames) {
     if (valueByName.has(name)) {
       remappedValues.push(valueByName.get(name));
     }
   }
+  for (const name of savedWidgetNames) {
+    if (!currentWidgetNameSet.has(name) && valueByName.has(name)) {
+      remappedValues.push(valueByName.get(name));
+    }
+  }
   return remappedValues;
 }
 function injectDefaultAutocompleteMetadataValues(widgetValues, currentWidgetNames) {
@@ -15707,6 +15725,8 @@ function createAutocompleteTextWidgetFactory(node, widgetName, modelType, inputO
           inputEl.dispatchEvent(new CustomEvent("lora-manager:autocomplete-value-changed", {
             detail: { value: v2 ?? "" }
           }));
+        } else {
+          widget._pendingValue = v2 ?? "";
         }
         if (typeof widget.onSetValue === "function") {
           widget.onSetValue(v2 ?? "");
@@ -15823,10 +15843,12 @@ app$1.registerExtension({
       };
       nodeType.prototype.configure = function(info) {
         normalizeAutocompleteWidgetValues(this, info);
-        if (shouldBypassAutocompleteWidgetMigration(this, (info == null ? void 0 : info.widgets_values) ?? [])) {
+        const bypassResult = shouldBypassAutocompleteWidgetMigration(this, (info == null ? void 0 : info.widgets_values) ?? []);
+        if (bypassResult) {
           info.widgets_values = [...info.widgets_values ?? [], null];
         }
-        return originalConfigure == null ? void 0 : originalConfigure.apply(this, arguments);
+        const result = originalConfigure == null ? void 0 : originalConfigure.apply(this, arguments);
+        return result;
       };
     }
     if (LORA_CHAIN_NODE_TYPES$1.includes(comfyClass)) {