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 ||