add filename in model preview popup (#1005)

* add filename in model preview popup

for #1003

* user setting for model name fomat in the tree

* add a tooltip for the setting to explain what things mean

* more explicit file_name naming

* touch of additional text in the tooltip

src/components/graph/GraphCanvas.vue

@@ -171,7 +171,7 @@ onMounted(async () => {
               (widget) => widget.name === provider.key
             )
             if (widget) {
-              widget.value = model.name
+              widget.value = model.file_name
             }
           }
         }

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -84,22 +84,26 @@ const root: ComputedRef<TreeNode> = computed(() => {
   if (searchQuery.value) {
     const search = searchQuery.value.toLocaleLowerCase()
     modelList = modelList.filter((model: ComfyModelDef) => {
-      return model.name.toLocaleLowerCase().includes(search)
+      return model.file_name.toLocaleLowerCase().includes(search)
     })
   }
   const tree: TreeNode = buildTree(modelList, (model: ComfyModelDef) => {
-    return [model.directory, ...model.name.replaceAll('\\', '/').split('/')]
+    return [
+      model.directory,
+      ...model.file_name.replaceAll('\\', '/').split('/')
+    ]
   })
   return tree
 })
 
 const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
+  const nameFormat = settingStore.get('Comfy.ModelLibrary.NameFormat')
   const fillNodeInfo = (node: TreeNode): TreeExplorerNode<ComfyModelDef> => {
     const children = node.children?.map(fillNodeInfo)
     const model: ComfyModelDef | null =
       node.leaf && node.data ? node.data : null
     if (model?.is_fake_object) {
-      if (model.name === '(No Content)') {
+      if (model.file_name === '(No Content)') {
         return {
           key: node.key,
           label: t('noContent'),
@@ -126,7 +130,11 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
 
     return {
       key: node.key,
-      label: model ? model.title : node.label,
+      label: model
+        ? nameFormat === 'title'
+          ? model.title
+          : model.simplified_file_name
+        : node.label,
       leaf: node.leaf,
       data: node.data,
       getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
@@ -144,9 +152,9 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
         if (node.children?.length === 1) {
           const onlyChild = node.children[0]
           if (onlyChild.data?.is_fake_object) {
-            if (onlyChild.data.name === '(No Content)') {
+            if (onlyChild.data.file_name === '(No Content)') {
               return '0'
-            } else if (onlyChild.data.name === 'Loading') {
+            } else if (onlyChild.data.file_name === 'Loading') {
               return '?'
             }
           }
@@ -169,7 +177,7 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
               (widget) => widget.name === provider.key
             )
             if (widget) {
-              widget.value = model.name
+              widget.value = model.file_name
             }
           }
         }

src/components/sidebar/tabs/modelLibrary/ModelPreview.vue

@@ -4,6 +4,9 @@
       {{ modelDef.title }}
     </div>
     <div class="model_preview_top_container">
+      <div class="model_preview_filename">
+        {{ modelDef.file_name }}
+      </div>
       <div class="model_preview_architecture" v-if="modelDef.architecture_id">
         <span class="model_preview_prefix">Architecture: </span>
         {{ modelDef.architecture_id }}
@@ -75,7 +78,9 @@ const modelDef = props.modelDef
 }
 .model_preview_top_container {
   text-align: center;
+  line-height: 0.5;
 }
+.model_preview_filename,
 .model_preview_author,
 .model_preview_architecture {
   display: inline-block;

src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue

@@ -90,6 +90,7 @@ const showPreview = computed(() => {
     !modelDef.value.is_fake_object &&
     modelDef.value.has_loaded_metadata &&
     (modelDef.value.author ||
+      modelDef.value.simplified_file_name != modelDef.value.title ||
       modelDef.value.description ||
       modelDef.value.usage_hint ||
       modelDef.value.trigger_phrase ||

src/stores/coreSettings.ts

@@ -249,6 +249,15 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'boolean',
     defaultValue: false
   },
+  {
+    id: 'Comfy.ModelLibrary.NameFormat',
+    name: 'What name to display in the model library tree view',
+    tooltip:
+      'Select "filename" to render a simplified view of the raw filename (without directory or ".safetensors" extension) in the model list. Select "title" to display the configurable model metadata title.',
+    type: 'combo',
+    options: ['filename', 'title'],
+    defaultValue: 'title'
+  },
   {
     id: 'Comfy.Locale',
     name: 'Locale',

src/stores/modelStore.ts

@@ -19,9 +19,11 @@ function _findInMetadata(metadata: any, ...keys: string[]): string | null {
 /** Defines and holds metadata for a model */
 export class ComfyModelDef {
   /** Proper filename of the model */
-  name: string = ''
+  file_name: string = ''
   /** Directory containing the model, eg 'checkpoints' */
   directory: string = ''
+  /** Simplified copy of name, used as a default title. Excludes the directory and the '.safetensors' file extension */
+  simplified_file_name: string = ''
   /** Title / display name of the model, sometimes same as the name but not always */
   title: string = ''
   /** Metadata: architecture ID for the model, such as 'stable-diffusion-xl-v1-base' */
@@ -48,11 +50,15 @@ export class ComfyModelDef {
   is_fake_object: boolean = false
 
   constructor(name: string, directory: string) {
-    this.name = name
-    this.title = name.replaceAll('\\', '/').split('/').pop()
-    if (this.title.endsWith('.safetensors')) {
-      this.title = this.title.slice(0, -'.safetensors'.length)
+    this.file_name = name
+    this.simplified_file_name = name.replaceAll('\\', '/').split('/').pop()
+    if (this.simplified_file_name.endsWith('.safetensors')) {
+      this.simplified_file_name = this.simplified_file_name.slice(
+        0,
+        -'.safetensors'.length
+      )
     }
+    this.title = this.simplified_file_name
     this.directory = directory
   }
 
@@ -63,7 +69,7 @@ export class ComfyModelDef {
     }
     this.is_load_requested = true
     try {
-      const metadata = await api.viewMetadata(this.directory, this.name)
+      const metadata = await api.viewMetadata(this.directory, this.file_name)
       if (!metadata) {
         return
       }
@@ -105,7 +111,7 @@ export class ComfyModelDef {
       this.tags = tagsCommaSeparated.split(',').map((tag) => tag.trim())
       this.has_loaded_metadata = true
     } catch (error) {
-      console.error('Error loading model metadata', this.name, this, error)
+      console.error('Error loading model metadata', this.file_name, this, error)
     }
   }
 }

tests-ui/tests/store/modelStore.test.ts

@@ -69,7 +69,7 @@ describe('useModelStore', () => {
     const folderStore = await store.getModelsInFolderCached('checkpoints')
     const model = folderStore.models['noinfo.safetensors']
     await model.load()
-    expect(model.name).toBe('noinfo.safetensors')
+    expect(model.file_name).toBe('noinfo.safetensors')
     expect(model.title).toBe('noinfo')
     expect(model.architecture_id).toBe('')
     expect(model.author).toBe('')