fix: Model type is not match comfyui

src/components/DialogManager.vue

@@ -86,7 +86,7 @@ import { chunk } from 'lodash'
 import { defineResizeCallback } from 'hooks/resize'
 import { genModelKey } from 'utils/model'
 
-const { isMobile, cardWidth, gutter, aspect } = useConfig()
+const { isMobile, cardWidth, gutter, aspect, modelFolders } = useConfig()
 
 const { data } = useModels()
 const { t } = useI18n()
@@ -94,32 +94,17 @@ const { t } = useI18n()
 const searchContent = ref<string>()
 
 const currentType = ref('all')
-const typeOptions = ref(
-  [
-    { label: 'ALL', value: 'all' },
-    { label: 'Checkpoint', value: 'checkpoints' },
-    { label: 'embedding', value: 'embeddings' },
-    { label: 'Hypernetwork', value: 'hypernetworks' },
-    { label: 'Lora', value: 'loras' },
-    { label: 'VAE', value: 'vae' },
-    { label: 'VAE approx', value: 'vae_approx' },
-    { label: 'Controlnet', value: 'controlnet' },
-    { label: 'Clip', value: 'clip' },
-    { label: 'Clip Vision', value: 'clip_vision' },
-    { label: 'Diffusers', value: 'diffusers' },
-    { label: 'Gligen', value: 'gligen' },
-    { label: 'Photomaker', value: 'photomaker' },
-    { label: 'Style Models', value: 'style_models' },
-    { label: 'Unet', value: 'unet' },
-  ].map((item) => {
+const typeOptions = computed(() => {
+  return ['all', ...Object.keys(modelFolders.value)].map((type) => {
     return {
-      ...item,
+      label: type,
+      value: type,
       command: () => {
-        currentType.value = item.value
+        currentType.value = type
       },
     }
-  }),
-)
+  })
+})
 
 const sortOrder = ref('name')
 const sortOrderOptions = ref(

src/components/ModelBaseInfo.vue

@@ -45,7 +45,6 @@ import ResponseInput from 'components/ResponseInput.vue'
 import ResponseSelect from 'components/ResponseSelect.vue'
 import { useConfig } from 'hooks/config'
 import { useModelBaseInfo } from 'hooks/model'
-import { resolveModelType } from 'utils/model'
 import { computed } from 'vue'
 
 const editable = defineModel<boolean>('editable')
@@ -58,7 +57,7 @@ const typeOptions = computed(() => {
   return Object.keys(modelFolders.value).map((curr) => {
     return {
       value: curr,
-      label: resolveModelType(curr).display,
+      label: curr,
       command: () => {
         type.value = curr
         pathIndex.value = 0

src/components/ModelCard.vue

@@ -30,7 +30,7 @@
           <div class="flex flex-row items-start justify-between">
             <div class="flex items-center rounded-full bg-black/30 px-3 py-2">
               <div class="font-bold @lg:text-xs">
-                {{ displayType }}
+                {{ model.type }}
               </div>
             </div>
 
@@ -67,7 +67,7 @@
 <script setup lang="ts">
 import DialogModelDetail from 'components/DialogModelDetail.vue'
 import Button from 'primevue/button'
-import { genModelKey, resolveModelType } from 'utils/model'
+import { genModelKey } from 'utils/model'
 import { computed } from 'vue'
 import { useModelNodeAction } from 'hooks/model'
 import { useDialog } from 'hooks/dialog'
@@ -92,7 +92,6 @@ const openDetailDialog = () => {
   })
 }
 
-const displayType = computed(() => resolveModelType(props.model.type).display)
 const preview = computed(() =>
   Array.isArray(props.model.preview)
     ? props.model.preview[0]

src/hooks/model.ts

@@ -7,7 +7,7 @@ import { cloneDeep } from 'lodash'
 import { app } from 'scripts/comfyAPI'
 import { bytesToSize, formatDate, previewUrlToFile } from 'utils/common'
 import { ModelGrid } from 'utils/legacy'
-import { resolveModelType } from 'utils/model'
+import { resolveModelTypeLoader } from 'utils/model'
 import {
   computed,
   inject,
@@ -237,7 +237,7 @@ export const useModelBaseInfoEditor = (formInstance: ModelFormInstance) => {
     const fields: FieldsItem[] = [
       {
         key: 'type',
-        formatter: () => resolveModelType(modelData.value.type).display,
+        formatter: () => modelData.value.type,
       },
       {
         key: 'fullname',
@@ -463,7 +463,7 @@ export const useModelNodeAction = (model: BaseModel) => {
   const { toast, wrapperToastError } = useToast()
 
   const createNode = (options: Record<string, any> = {}) => {
-    const nodeType = resolveModelType(model.type).loader
+    const nodeType = resolveModelTypeLoader(model.type)
     if (!nodeType) {
       throw new Error(t('unSupportedModelType', [model.type]))
     }

src/utils/model.ts

@@ -1,47 +1,25 @@
 const loader = {
   checkpoints: 'CheckpointLoaderSimple',
+  loras: 'LoraLoader',
+  vae: 'VAELoader',
   clip: 'CLIPLoader',
+  diffusion_models: 'UNETLoader',
+  unet: 'UNETLoader',
   clip_vision: 'CLIPVisionLoader',
-  controlnet: 'ControlNetLoader',
+  style_models: 'StyleModelLoader',
+  embeddings: undefined,
   diffusers: 'DiffusersLoader',
-  diffusion_models: 'DiffusersLoader',
-  embeddings: 'Embedding',
+  vae_approx: undefined,
+  controlnet: 'ControlNetLoader',
   gligen: 'GLIGENLoader',
+  upscale_models: 'UpscaleModelLoader',
   hypernetworks: 'HypernetworkLoader',
   photomaker: 'PhotoMakerLoader',
-  loras: 'LoraLoader',
-  style_models: 'StyleModelLoader',
-  unet: 'UNETLoader',
-  upscale_models: 'UpscaleModelLoader',
-  vae: 'VAELoader',
-  vae_approx: undefined,
+  classifiers: undefined,
 }
 
-const display = {
-  all: 'ALL',
-  checkpoints: 'Checkpoint',
-  clip: 'Clip',
-  clip_vision: 'Clip Vision',
-  controlnet: 'Controlnet',
-  diffusers: 'Diffusers',
-  diffusion_models: 'Diffusers',
-  embeddings: 'embedding',
-  gligen: 'Gligen',
-  hypernetworks: 'Hypernetwork',
-  photomaker: 'Photomaker',
-  loras: 'LoRA',
-  style_models: 'Style Model',
-  unet: 'Unet',
-  upscale_models: 'Upscale Model',
-  vae: 'VAE',
-  vae_approx: 'VAE approx',
-}
-
-export const resolveModelType = (type: string) => {
-  return {
-    display: display[type],
-    loader: loader[type],
-  }
+export const resolveModelTypeLoader = (type: string) => {
+  return loader[type]
 }
 
 export const genModelKey = (model: BaseModel) => {