add filename in model preview popup

for #1003

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.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_name != modelDef.value.title ||
       modelDef.value.description ||
       modelDef.value.usage_hint ||
       modelDef.value.trigger_phrase ||

src/stores/modelStore.ts

@@ -22,6 +22,8 @@ export class ComfyModelDef {
   name: string = ''
   /** Directory containing the model, eg 'checkpoints' */
   directory: string = ''
+  /** Simplified copy of name, used as a default title */
+  simplified_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' */
@@ -49,10 +51,14 @@ export class ComfyModelDef {
 
   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.simplified_name = name.replaceAll('\\', '/').split('/').pop()
+    if (this.simplified_name.endsWith('.safetensors')) {
+      this.simplified_name = this.simplified_name.slice(
+        0,
+        -'.safetensors'.length
+      )
     }
+    this.title = this.simplified_name
     this.directory = directory
   }