159 python version compatible (#160)

* fix: double quotes nest in f-strings

* prepare release 2.5.3

py/information.py

@@ -1,14 +1,22 @@
 import os
 import re
+import math
 import yaml
 import requests
 import markdownify
 
+import folder_paths
 
+
+from aiohttp import web
 from abc import ABC, abstractmethod
 from urllib.parse import urlparse, parse_qs
+from PIL import Image
+from io import BytesIO
+
 
 from . import utils
+from . import config
 
 
 class ModelSearcher(ABC):
@@ -282,25 +290,6 @@ class HuggingfaceModelSearcher(ModelSearcher):
         return _filter_tree_files
 
 
-def get_model_searcher_by_url(url: str) -> ModelSearcher:
-    parsed_url = urlparse(url)
-    host_name = parsed_url.hostname
-    if host_name == "civitai.com":
-        return CivitaiModelSearcher()
-    elif host_name == "huggingface.co":
-        return HuggingfaceModelSearcher()
-    return UnknownWebsiteSearcher()
-
-
-import folder_paths
-
-
-from . import config
-
-
-from aiohttp import web
-
-
 class Information:
     def add_routes(self, routes):
 
@@ -347,18 +336,30 @@ class Information:
             index = int(request.match_info.get("index", None))
             filename = request.match_info.get("filename", None)
 
+            content_type = utils.resolve_file_content_type(filename)
+
+            if content_type == "video":
+                abs_path = utils.get_full_path(model_type, index, filename)
+                return web.FileResponse(abs_path)
+
             extension_uri = config.extension_uri
 
             try:
                 folders = folder_paths.get_folder_paths(model_type)
                 base_path = folders[index]
                 abs_path = utils.join_path(base_path, filename)
+                preview_name = utils.get_model_preview_name(abs_path)
+                if preview_name:
+                    dir_name = os.path.dirname(abs_path)
+                    abs_path = utils.join_path(dir_name, preview_name)
             except:
                 abs_path = extension_uri
 
             if not os.path.isfile(abs_path):
                 abs_path = utils.join_path(extension_uri, "assets", "no-preview.png")
-            return web.FileResponse(abs_path)
+
+            image_data = self.get_image_preview_data(abs_path)
+            return web.Response(body=image_data.getvalue(), content_type="image/webp")
 
         @routes.get("/model-manager/preview/download/{filename}")
         async def read_download_preview(request):
@@ -373,11 +374,69 @@ class Information:
 
             return web.FileResponse(preview_path)
 
+    def get_image_preview_data(self, filename: str):
+        with Image.open(filename) as img:
+            max_size = 1024
+            original_format = img.format
+
+            exif_data = img.info.get("exif")
+            icc_profile = img.info.get("icc_profile")
+
+            if getattr(img, "is_animated", False) and img.n_frames > 1:
+                total_frames = img.n_frames
+                step = max(1, math.ceil(total_frames / 30))
+
+                frames, durations = [], []
+
+                for frame_idx in range(0, total_frames, step):
+                    img.seek(frame_idx)
+                    frame = img.copy()
+                    frame.thumbnail((max_size, max_size), Image.Resampling.NEAREST)
+
+                    frames.append(frame)
+                    durations.append(img.info.get("duration", 100) * step)
+
+                save_args = {
+                    "format": "WEBP",
+                    "save_all": True,
+                    "append_images": frames[1:],
+                    "duration": durations,
+                    "loop": 0,
+                    "quality": 80,
+                    "method": 0,
+                    "allow_mixed": False,
+                }
+
+                if exif_data:
+                    save_args["exif"] = exif_data
+
+                if icc_profile:
+                    save_args["icc_profile"] = icc_profile
+
+                img_byte_arr = BytesIO()
+                frames[0].save(img_byte_arr, **save_args)
+                img_byte_arr.seek(0)
+                return img_byte_arr
+
+            img.thumbnail((max_size, max_size), Image.Resampling.BICUBIC)
+
+            img_byte_arr = BytesIO()
+            save_args = {"format": "WEBP", "quality": 80}
+
+            if exif_data:
+                save_args["exif"] = exif_data
+            if icc_profile:
+                save_args["icc_profile"] = icc_profile
+
+            img.save(img_byte_arr, **save_args)
+            img_byte_arr.seek(0)
+            return img_byte_arr
+
     def fetch_model_info(self, model_page: str):
         if not model_page:
             return []
 
-        model_searcher = get_model_searcher_by_url(model_page)
+        model_searcher = self.get_model_searcher_by_url(model_page)
         result = model_searcher.search_by_url(model_page)
         return result
 
@@ -435,3 +494,12 @@ class Information:
                         utils.print_error(f"Failed to download model info for {abs_model_path}: {e}")
 
         utils.print_debug("Completed scan model information.")
+
+    def get_model_searcher_by_url(self, url: str) -> ModelSearcher:
+        parsed_url = urlparse(url)
+        host_name = parsed_url.hostname
+        if host_name == "civitai.com":
+            return CivitaiModelSearcher()
+        elif host_name == "huggingface.co":
+            return HuggingfaceModelSearcher()
+        return UnknownWebsiteSearcher()

py/manager.py

@@ -124,27 +124,41 @@ class ModelManager:
             if not prefix_path.endswith("/"):
                 prefix_path = f"{prefix_path}/"
 
+            is_file = entry.is_file()
             relative_path = utils.normalize_path(entry.path).replace(prefix_path, "")
             sub_folder = os.path.dirname(relative_path)
             filename = os.path.basename(relative_path)
-            basename = os.path.splitext(filename)[0]
-            extension = os.path.splitext(filename)[1]
+            basename = os.path.splitext(filename)[0] if is_file else filename
+            extension = os.path.splitext(filename)[1] if is_file else ""
 
-            is_file = entry.is_file()
             if is_file and extension not in folder_paths.supported_pt_extensions:
                 return None
 
-            model_preview = f"/model-manager/preview/{folder}/{path_index}/{relative_path.replace(extension, '.webp')}"
+            preview_type = "image"
+            preview_ext = ".webp"
+            preview_images = utils.get_model_all_images(entry.path)
+            if len(preview_images) > 0:
+                preview_type = "image"
+                preview_ext = ".webp"
+            else:
+                preview_videos = utils.get_model_all_videos(entry.path)
+                if len(preview_videos) > 0:
+                    preview_type = "video"
+                    preview_ext = f".{preview_videos[0].split('.')[-1]}"
+
+            model_preview = f"/model-manager/preview/{folder}/{path_index}/{relative_path.replace(extension, preview_ext)}"
 
             stat = entry.stat()
             return {
-                "type": folder if is_file else "folder",
+                "type": folder,
                 "subFolder": sub_folder,
+                "isFolder": not is_file,
                 "basename": basename,
                 "extension": extension,
                 "pathIndex": path_index,
                 "sizeBytes": stat.st_size if is_file else 0,
                 "preview": model_preview if is_file else None,
+                "previewType": preview_type,
                 "createdAt": round(stat.st_ctime_ns / 1000000),
                 "updatedAt": round(stat.st_mtime_ns / 1000000),
             }

py/utils.py

@@ -8,6 +8,7 @@ import requests
 import traceback
 import configparser
 import functools
+import mimetypes
 
 import comfy.utils
 import folder_paths
@@ -149,6 +150,20 @@ def resolve_model_base_paths() -> dict[str, list[str]]:
     return model_base_paths
 
 
+def resolve_file_content_type(filename: str):
+    extension_mimetypes_cache = folder_paths.extension_mimetypes_cache
+    extension = filename.split(".")[-1]
+    if extension not in extension_mimetypes_cache:
+        mime_type, _ = mimetypes.guess_type(filename, strict=False)
+        if not mime_type:
+            return None
+        content_type = mime_type.split("/")[0]
+        extension_mimetypes_cache[extension] = content_type
+    else:
+        content_type = extension_mimetypes_cache[extension]
+    return content_type
+
+
 def get_full_path(model_type: str, path_index: int, filename: str):
     """
     Get the absolute path in the model type through string concatenation.
@@ -266,6 +281,22 @@ def get_model_preview_name(model_path: str):
     return images[0] if len(images) > 0 else "no-preview.png"
 
 
+def get_model_all_videos(model_path: str):
+    base_dirname = os.path.dirname(model_path)
+    files = search_files(base_dirname)
+    files = folder_paths.filter_files_content_types(files, ["video"])
+
+    basename = os.path.splitext(os.path.basename(model_path))[0]
+    output: list[str] = []
+    for file in files:
+        file_basename = os.path.splitext(file)[0]
+        if file_basename == basename:
+            output.append(file)
+        if file_basename == f"{basename}.preview":
+            output.append(file)
+    return output
+
+
 from PIL import Image
 from io import BytesIO
 

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-model-manager"
 description = "Manage models: browsing, download and delete."
-version = "2.4.0"
+version = "2.5.3"
 license = { file = "LICENSE" }
 dependencies = ["markdownify"]
 

src/components/DialogExplorer.vue

@@ -20,7 +20,6 @@
           v-show="!showToolbar"
           class="h-10 flex-1"
           :items="folderPaths"
-          @item-click="(item, index) => openFolder(index, item.name, item.icon)"
         ></ResponseBreadcrumb>
       </div>
 
@@ -69,13 +68,21 @@
             }"
           >
             <ModelCard
-              :model="rowItem"
               v-for="rowItem in item.row"
+              :model="rowItem"
               :key="genModelKey(rowItem)"
               :style="{
                 width: `${cardSize.width}px`,
                 height: `${cardSize.height}px`,
               }"
+              v-tooltip.top="{
+                value: getFullPath(rowItem),
+                disabled: folderPaths.length < 2,
+                autoHide: false,
+                showDelay: 800,
+                hideDelay: 300,
+                pt: { root: { style: { zIndex: 2100, maxWidth: '32rem' } } },
+              }"
               @dblclick="openItem(rowItem, $event)"
               @contextmenu.stop.prevent="openItemContext(rowItem, $event)"
             ></ModelCard>
@@ -138,8 +145,14 @@ const gutter = {
   y: 32,
 }
 
-const { dataTreeList, folderPaths, findFolder, openFolder, openModelDetail } =
-  useModelExplorer()
+const {
+  dataTreeList,
+  folderPaths,
+  findFolder,
+  openFolder,
+  openModelDetail,
+  getFullPath,
+} = useModelExplorer()
 const { cardSize, cardSizeMap, cardSizeFlag, dialog: settings } = useConfig()
 
 const showToolbar = ref(false)
@@ -180,11 +193,15 @@ const sortOrderOptions = ref(
 const currentDataList = computed(() => {
   let renderedList = dataTreeList.value
   for (const folderItem of folderPaths.value) {
-    const found = findFolder(renderedList, folderItem.name)
+    const found = findFolder(renderedList, {
+      basename: folderItem.name,
+      pathIndex: folderItem.pathIndex,
+    })
     renderedList = found?.children || []
   }
 
-  if (searchContent.value) {
+  const filter = searchContent.value?.toLowerCase().trim() ?? ''
+  if (filter) {
     const filterItems: ModelTreeNode[] = []
 
     const searchList = [...renderedList]
@@ -194,11 +211,10 @@ const currentDataList = computed(() => {
       const children = (item as any).children ?? []
       searchList.push(...children)
 
-      if (
-        item.basename
-          .toLocaleLowerCase()
-          .includes(searchContent.value.toLocaleLowerCase())
-      ) {
+      const matchSubFolder = `${item.subFolder}/`.toLowerCase().includes(filter)
+      const matchName = item.basename.toLowerCase().includes(filter)
+
+      if (matchSubFolder || matchName) {
         filterItems.push(item)
       }
     }
@@ -211,7 +227,7 @@ const currentDataList = computed(() => {
     const modelItems: ModelTreeNode[] = []
 
     for (const item of renderedList) {
-      if (item.type === 'folder') {
+      if (item.isFolder) {
         folderItems.push(item)
       } else {
         modelItems.push(item)
@@ -281,8 +297,9 @@ const confirmName = ref('')
 
 const openItem = (item: ModelTreeNode, e: Event) => {
   menu.value.hide(e)
-  if (item.type === 'folder') {
-    openFolder(folderPaths.value.length, item.basename)
+  if (item.isFolder) {
+    searchContent.value = undefined
+    openFolder(item)
   } else {
     openModelDetail(item)
   }

src/components/DialogManager.vue

@@ -55,7 +55,13 @@
             }"
             class="group/card cursor-pointer !p-0"
             @click="openModelDetail(model)"
-            v-tooltip.top="{ value: model.basename, disabled: showModelName }"
+            v-tooltip.top="{
+              value: getFullPath(model),
+              autoHide: false,
+              showDelay: 800,
+              hideDelay: 300,
+              pt: { root: { style: { zIndex: 2100, maxWidth: '32rem' } } },
+            }"
           >
             <template #name>
               <div
@@ -139,7 +145,7 @@ const {
   dialog: settings,
 } = useConfig()
 
-const { data, folders, openModelDetail } = useModels()
+const { data, folders, openModelDetail, getFullPath } = useModels()
 const { t } = useI18n()
 
 const toolbarContainer = ref<HTMLElement | null>(null)
@@ -216,18 +222,19 @@ const cols = computed(() => {
 const list = computed(() => {
   const mergedList = Object.values(data.value).flat()
   const pureModels = mergedList.filter((item) => {
-    return item.type !== 'folder'
+    return !item.isFolder
   })
 
   const filterList = pureModels.filter((model) => {
     const showAllModel = currentType.value === allType
 
     const matchType = showAllModel || model.type === currentType.value
-    const matchName = model.basename
-      .toLowerCase()
-      .includes(searchContent.value?.toLowerCase() || '')
 
-    return matchType && matchName
+    const filter = searchContent.value?.toLowerCase() ?? ''
+    const matchSubFolder = model.subFolder.toLowerCase().includes(filter)
+    const matchName = model.basename.toLowerCase().includes(filter)
+
+    return matchType && (matchSubFolder || matchName)
   })
 
   let sortStrategy: (a: Model, b: Model) => number = () => 0

src/components/GlobalDialogStack.vue

@@ -1,18 +1,11 @@
 <template>
   <ResponseDialog
     v-for="(item, index) in stack"
-    v-model:visible="item.visible"
     :key="item.key"
-    :keep-alive="item.keepAlive"
-    :default-size="item.defaultSize"
-    :default-mobile-size="item.defaultMobileSize"
-    :resize-allow="item.resizeAllow"
-    :min-width="item.minWidth"
-    :max-width="item.maxWidth"
-    :min-height="item.minHeight"
-    :max-height="item.maxHeight"
+    v-model:visible="item.visible"
+    v-bind="omitProps(item)"
     :auto-z-index="false"
-    :pt:mask:style="{ zIndex: baseZIndex - 100 + index + 1 }"
+    :pt:mask:style="{ zIndex: baseZIndex + index + 1 }"
     :pt:root:onMousedown="() => rise(item)"
     @hide="() => close(item)"
   >
@@ -37,13 +30,16 @@
       <component :is="item.content" v-bind="item.contentProps"></component>
     </template>
   </ResponseDialog>
+  <Dialog :visible="true" :pt:mask:style="{ display: 'none' }"></Dialog>
 </template>
 
 <script setup lang="ts">
 import ResponseDialog from 'components/ResponseDialog.vue'
-import { useDialog } from 'hooks/dialog'
+import { type DialogItem, useDialog } from 'hooks/dialog'
+import { omit } from 'lodash'
 import Button from 'primevue/button'
 import { usePrimeVue } from 'primevue/config'
+import Dialog from 'primevue/dialog'
 import { computed } from 'vue'
 
 const { stack, rise, close } = useDialog()
@@ -53,4 +49,15 @@ const { config } = usePrimeVue()
 const baseZIndex = computed(() => {
   return config.zIndex?.modal ?? 1100
 })
+
+const omitProps = (item: DialogItem) => {
+  return omit(item, [
+    'key',
+    'visible',
+    'title',
+    'headerButtons',
+    'content',
+    'contentProps',
+  ])
+}
 </script>

src/components/ModelBaseInfo.vue

@@ -84,7 +84,17 @@
           <td class="border-r bg-gray-300 px-4 dark:bg-gray-800">
             {{ $t(`info.${item.key}`) }}
           </td>
-          <td class="overflow-hidden text-ellipsis break-all px-4">
+          <td
+            class="overflow-hidden text-ellipsis break-all px-4"
+            v-tooltip.top="{
+              value: item.display,
+              disabled: !['pathIndex', 'basename'].includes(item.key),
+              autoHide: false,
+              showDelay: 800,
+              hideDelay: 300,
+              pt: { root: { style: { zIndex: 2100, maxWidth: '32rem' } } },
+            }"
+          >
             {{ item.display }}
           </td>
         </tr>

src/components/ModelCard.vue

@@ -5,7 +5,7 @@
   >
     <div data-card-main class="flex h-full w-full flex-col">
       <div data-card-preview class="flex-1 overflow-hidden">
-        <div v-if="model.type === 'folder'" class="h-full w-full">
+        <div v-if="model.isFolder" class="h-full w-full">
           <svg
             class="icon"
             viewBox="0 0 1024 1024"
@@ -24,6 +24,21 @@
             ></path>
           </svg>
         </div>
+        <div
+          v-else-if="model.previewType === 'video'"
+          class="h-full w-full p-1 hover:p-0"
+        >
+          <video
+            class="h-full w-full object-cover"
+            playsinline
+            autoplay
+            loop
+            disablepictureinpicture
+            preload="none"
+          >
+            <source :src="preview" />
+          </video>
+        </div>
         <div v-else class="h-full w-full p-1 hover:p-0">
           <img class="h-full w-full rounded-lg object-cover" :src="preview" />
         </div>
@@ -39,7 +54,7 @@
     </div>
 
     <div
-      v-if="model.type !== 'folder'"
+      v-if="!model.isFolder"
       data-draggable-overlay
       class="absolute left-0 top-0 h-full w-full"
       draggable="true"
@@ -47,7 +62,7 @@
     ></div>
 
     <div
-      v-if="model.type !== 'folder'"
+      v-if="!model.isFolder"
       data-mode-type
       class="pointer-events-none absolute left-2 top-2"
       :style="{

src/components/ModelPreview.vue

@@ -5,7 +5,24 @@
         class="relative mx-auto w-full overflow-hidden rounded-lg preview-aspect"
         :style="$sm({ width: `${cardWidth}px` })"
       >
-        <ResponseImage :src="preview" :error="noPreviewContent"></ResponseImage>
+        <div v-if="previewType === 'video'" class="h-full w-full p-1 hover:p-0">
+          <video
+            class="h-full w-full object-cover"
+            playsinline
+            autoplay
+            loop
+            disablepictureinpicture
+            preload="none"
+          >
+            <source :src="preview" />
+          </video>
+        </div>
+
+        <ResponseImage
+          v-else
+          :src="preview"
+          :error="noPreviewContent"
+        ></ResponseImage>
 
         <Carousel
           v-if="defaultContent.length > 1"
@@ -95,6 +112,7 @@ const { cardWidth } = useConfig()
 
 const {
   preview,
+  previewType,
   typeOptions,
   currentType,
   defaultContent,

src/components/ResponseDialog.vue

@@ -3,6 +3,7 @@
     ref="dialogRef"
     :visible="true"
     @update:visible="updateVisible"
+    :modal="modal"
     :close-on-escape="false"
     :maximizable="!isMobile"
     maximizeIcon="pi pi-arrow-up-right-and-arrow-down-left-from-center"
@@ -91,6 +92,7 @@ interface Props {
   minHeight?: number
   maxHeight?: number
   zIndex?: number
+  modal?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {

src/hooks/dialog.ts

@@ -8,7 +8,7 @@ interface HeaderButton {
   command: () => void
 }
 
-interface DialogItem {
+export interface DialogItem {
   key: string
   title: string
   content: Component
@@ -22,6 +22,7 @@ interface DialogItem {
   maxWidth?: number
   minHeight?: number
   maxHeight?: number
+  modal?: boolean
 }
 
 export const useDialog = defineStore('dialog', () => {

src/hooks/explorer.ts

@@ -1,17 +1,17 @@
 import { genModelFullName, useModels } from 'hooks/model'
 import { cloneDeep, filter, find } from 'lodash'
 import { BaseModel, Model, SelectOptions } from 'types/typings'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 export interface FolderPathItem {
   name: string
+  pathIndex: number
   icon?: string
   onClick: () => void
   children: SelectOptions[]
 }
 
 export type ModelFolder = BaseModel & {
-  type: 'folder'
   children: ModelTreeNode[]
 }
 
@@ -27,22 +27,27 @@ export type TreeItemNode = ModelTreeNode & {
 }
 
 export const useModelExplorer = () => {
-  const { data, folders, ...modelRest } = useModels()
+  const { data, folders, initialized, ...modelRest } = useModels()
 
   const folderPaths = ref<FolderPathItem[]>([])
 
-  const genFolderItem = (basename: string, subFolder: string): ModelFolder => {
+  const genFolderItem = (
+    basename: string,
+    folder?: string,
+    subFolder?: string,
+  ): ModelFolder => {
     return {
       id: basename,
       basename: basename,
-      subFolder: subFolder,
+      subFolder: subFolder ?? '',
       pathIndex: 0,
       sizeBytes: 0,
       extension: '',
       description: '',
       metadata: {},
       preview: '',
-      type: 'folder',
+      type: folder ?? '',
+      isFolder: true,
       children: [],
     }
   }
@@ -52,7 +57,7 @@ export const useModelExplorer = () => {
 
     for (const folder in folders.value) {
       if (Object.prototype.hasOwnProperty.call(folders.value, folder)) {
-        const folderItem = genFolderItem(folder, '')
+        const folderItem = genFolderItem(folder)
 
         const folderModels = cloneDeep(data.value[folder]) ?? []
 
@@ -82,58 +87,76 @@ export const useModelExplorer = () => {
       }
     }
 
-    const root: ModelTreeNode = genFolderItem('root', '')
+    const root: ModelTreeNode = genFolderItem('root')
     root.children = rootChildren
     return [root]
   })
 
-  function findFolder(list: ModelTreeNode[], name: string) {
-    return find(list, { type: 'folder', basename: name }) as
-      | ModelFolder
-      | undefined
+  function findFolder(
+    list: ModelTreeNode[],
+    feature: { basename: string; pathIndex: number },
+  ) {
+    return find(list, { ...feature, isFolder: true }) as ModelFolder | undefined
   }
 
   function findFolders(list: ModelTreeNode[]) {
-    return filter(list, { type: 'folder' }) as ModelFolder[]
+    return filter(list, { isFolder: true }) as ModelFolder[]
   }
 
-  async function openFolder(level: number, name: string, icon?: string) {
-    if (folderPaths.value.length >= level) {
-      folderPaths.value.splice(level)
+  async function openFolder(item: BaseModel) {
+    const folderItems: FolderPathItem[] = []
+
+    const folder = item.type
+    const subFolderParts = item.subFolder.split('/').filter(Boolean)
+
+    const pathParts: string[] = []
+    if (folder) {
+      pathParts.push(folder, ...subFolderParts)
+    }
+    pathParts.push(item.basename)
+    if (pathParts[0] !== 'root') {
+      pathParts.unshift('root')
     }
 
-    let currentLevel = dataTreeList.value
-    for (const folderItem of folderPaths.value) {
-      const found = findFolder(currentLevel, folderItem.name)
-      currentLevel = found?.children || []
+    let levelFolders = findFolders(dataTreeList.value)
+    for (const [index, part] of pathParts.entries()) {
+      const pathIndex = index < 2 ? 0 : item.pathIndex
+
+      const currentFolder = findFolder(levelFolders, {
+        basename: part,
+        pathIndex: pathIndex,
+      })
+      if (!currentFolder) {
+        break
+      }
+
+      levelFolders = findFolders(currentFolder.children ?? [])
+      folderItems.push({
+        name: currentFolder.basename,
+        pathIndex: pathIndex,
+        icon: index === 0 ? 'pi pi-desktop' : '',
+        onClick: () => {
+          openFolder(currentFolder)
+        },
+        children: levelFolders.map((child) => {
+          const name = child.basename
+          return {
+            value: name,
+            label: name,
+            command: () => openFolder(child),
+          }
+        }),
+      })
     }
 
-    const folderItem = findFolder(currentLevel, name)
-    const folderItemChildren = folderItem?.children ?? []
-    const subFolders = findFolders(folderItemChildren)
-
-    folderPaths.value.push({
-      name,
-      icon,
-      onClick: () => {
-        openFolder(level, name, icon)
-      },
-      children: subFolders.map((item) => {
-        const name = item.basename
-        return {
-          value: name,
-          label: name,
-          command: () => openFolder(level + 1, name),
-        }
-      }),
-    })
+    folderPaths.value = folderItems
   }
 
-  watchEffect(() => {
-    if (Object.keys(folders.value).length > 0 && folderPaths.value.length < 2) {
-      openFolder(0, 'root', 'pi pi-desktop')
+  watch(initialized, (val) => {
+    if (val) {
+      openFolder(dataTreeList.value[0])
     }
-  }, {})
+  })
 
   return {
     folders,

src/hooks/model.ts

@@ -50,10 +50,12 @@ export const useModels = defineStore('models', (store) => {
   const loading = useLoading()
 
   const folders = ref<ModelFolder>({})
+  const initialized = ref(false)
 
   const refreshFolders = async () => {
     return request('/models').then((resData) => {
       folders.value = resData
+      initialized.value = true
     })
   }
 
@@ -226,13 +228,21 @@ export const useModels = defineStore('models', (store) => {
     })
   }
 
+  function getFullPath(model: BaseModel) {
+    const fullname = genModelFullName(model)
+    const prefixPath = folders.value[model.type]?.[model.pathIndex]
+    return [prefixPath, fullname].filter(Boolean).join('/')
+  }
+
   return {
+    initialized: initialized,
     folders: folders,
     data: models,
     refresh: refreshAllModels,
     remove: deleteModel,
     update: updateModel,
     openModelDetail: openModelDetail,
+    getFullPath: getFullPath,
   }
 })
 
@@ -446,7 +456,7 @@ export const useModelFolder = (
     }
 
     const folderItems = cloneDeep(models.value[type]) ?? []
-    const pureFolders = folderItems.filter((item) => item.type === 'folder')
+    const pureFolders = folderItems.filter((item) => item.isFolder)
     pureFolders.sort((a, b) => a.basename.localeCompare(b.basename))
 
     const folders = modelFolders.value[type] ?? []
@@ -569,6 +579,10 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
     return content
   })
 
+  const previewType = computed(() => {
+    return model.value.previewType
+  })
+
   onMounted(() => {
     registerReset(() => {
       currentType.value = 'default'
@@ -584,6 +598,7 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
 
   const result = {
     preview,
+    previewType,
     typeOptions,
     currentType,
     // default value

src/types/typings.d.ts

@@ -9,7 +9,9 @@ export interface BaseModel {
   type: string
   subFolder: string
   pathIndex: number
+  isFolder: boolean
   preview: string | string[]
+  previewType: string
   description: string
   metadata: Record<string, string>
 }