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/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)
     }
   }
 }