prepare release 2.4.0

* feat: add close all dialog

* feat: add new ui toggle setting

* feat: add tree display ui

* feat: add search and sort

* feat: change model data structure

* pref: Optimize model data structure

* feat: set sub folder by choose

.github/workflows/publish.yml

@@ -60,7 +60,7 @@ jobs:
         run: |
           pnpm install
           pnpm run build
-          tar -czf dist.tar.gz py/ web/ __init__.py LICENSE pyproject.toml
+          tar -czf dist.tar.gz py/ web/ __init__.py LICENSE pyproject.toml requirements.txt
 
       - name: Create release draft
         uses: softprops/action-gh-release@v2

__init__.py

@@ -1,10 +1,10 @@
 import os
-import folder_paths
 from .py import config
 from .py import utils
 
 extension_uri = utils.normalize_path(os.path.dirname(__file__))
 
+# Install requirements
 requirements_path = utils.join_path(extension_uri, "requirements.txt")
 
 with open(requirements_path, "r", encoding="utf-8") as f:
@@ -24,276 +24,21 @@ if len(uninstalled_package) > 0:
 # Init config settings
 config.extension_uri = extension_uri
 
+# Try to download web distribution
 version = utils.get_current_version()
 utils.download_web_distribution(version)
 
 
-from aiohttp import web
+# Add api routes
-from .py import services
+from .py import manager
-
+from .py import download
+from .py import information
 
 routes = config.routes
 
-
+manager.ModelManager().add_routes(routes)
-@routes.get("/model-manager/download/task")
+download.ModelDownload().add_routes(routes)
-async def scan_download_tasks(request):
+information.Information().add_routes(routes)
-    """
-    Read download task list.
-    """
-    try:
-        result = await services.scan_model_download_task_list()
-        return web.json_response({"success": True, "data": result})
-    except Exception as e:
-        error_msg = f"Read download task list failed: {e}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
-@routes.put("/model-manager/download/{task_id}")
-async def resume_download_task(request):
-    """
-    Toggle download task status.
-    """
-    try:
-        task_id = request.match_info.get("task_id", None)
-        if task_id is None:
-            raise web.HTTPBadRequest(reason="Invalid task id")
-        json_data = await request.json()
-        status = json_data.get("status", None)
-        if status == "pause":
-            await services.pause_model_download_task(task_id)
-        elif status == "resume":
-            await services.resume_model_download_task(task_id, request)
-        else:
-            raise web.HTTPBadRequest(reason="Invalid status")
-
-        return web.json_response({"success": True})
-    except Exception as e:
-        error_msg = f"Resume download task failed: {str(e)}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
-@routes.delete("/model-manager/download/{task_id}")
-async def delete_model_download_task(request):
-    """
-    Delete download task.
-    """
-    task_id = request.match_info.get("task_id", None)
-    try:
-        await services.delete_model_download_task(task_id)
-        return web.json_response({"success": True})
-    except Exception as e:
-        error_msg = f"Delete download task failed: {str(e)}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
-# @deprecated
-@routes.get("/model-manager/base-folders")
-async def get_model_paths(request):
-    """
-    Returns the base folders for models.
-    """
-    model_base_paths = utils.resolve_model_base_paths()
-    return web.json_response({"success": True, "data": model_base_paths})
-
-
-@routes.post("/model-manager/model")
-async def create_model(request):
-    """
-    Create a new model.
-
-    request body: x-www-form-urlencoded
-    - type: model type.
-    - pathIndex: index of the model folders.
-    - fullname: filename that relative to the model folder.
-    - previewFile: preview file.
-    - description: description.
-    - downloadPlatform: download platform.
-    - downloadUrl: download url.
-    - hash: a JSON string containing the hash value of the downloaded model.
-    """
-    task_data = await request.post()
-    task_data = dict(task_data)
-    try:
-        task_id = await services.create_model_download_task(task_data, request)
-        return web.json_response({"success": True, "data": {"taskId": task_id}})
-    except Exception as e:
-        error_msg = f"Create model download task failed: {str(e)}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
-@routes.get("/model-manager/models")
-async def list_model_types(request):
-    """
-    Scan all models and read their information.
-    """
-    try:
-        result = utils.resolve_model_base_paths()
-        return web.json_response({"success": True, "data": result})
-    except Exception as e:
-        error_msg = f"Read models failed: {str(e)}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
-@routes.get("/model-manager/models/{folder}")
-async def read_models(request):
-    try:
-        folder = request.match_info.get("folder", None)
-        results = services.scan_models(folder, request)
-        return web.json_response({"success": True, "data": results})
-    except Exception as e:
-        error_msg = f"Read models failed: {str(e)}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
-@routes.get("/model-manager/model/{type}/{index}/{filename:.*}")
-async def read_model_info(request):
-    """
-    Get the information of the specified model.
-    """
-    model_type = request.match_info.get("type", None)
-    index = int(request.match_info.get("index", None))
-    filename = request.match_info.get("filename", None)
-
-    try:
-        model_path = utils.get_valid_full_path(model_type, index, filename)
-        result = services.get_model_info(model_path)
-        return web.json_response({"success": True, "data": result})
-    except Exception as e:
-        error_msg = f"Read model info failed: {str(e)}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
-@routes.put("/model-manager/model/{type}/{index}/{filename:.*}")
-async def update_model(request):
-    """
-    Update model information.
-
-    request body: x-www-form-urlencoded
-    - previewFile: preview file.
-    - description: description.
-    - type: model type.
-    - pathIndex: index of the model folders.
-    - fullname: filename that relative to the model folder.
-    All fields are optional, but type, pathIndex and fullname must appear together.
-    """
-    model_type = request.match_info.get("type", None)
-    index = int(request.match_info.get("index", None))
-    filename = request.match_info.get("filename", None)
-
-    model_data = await request.post()
-    model_data = dict(model_data)
-
-    try:
-        model_path = utils.get_valid_full_path(model_type, index, filename)
-        if model_path is None:
-            raise RuntimeError(f"File {filename} not found")
-        services.update_model(model_path, model_data)
-        return web.json_response({"success": True})
-    except Exception as e:
-        error_msg = f"Update model failed: {str(e)}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
-@routes.delete("/model-manager/model/{type}/{index}/{filename:.*}")
-async def delete_model(request):
-    """
-    Delete model.
-    """
-    model_type = request.match_info.get("type", None)
-    index = int(request.match_info.get("index", None))
-    filename = request.match_info.get("filename", None)
-
-    try:
-        model_path = utils.get_valid_full_path(model_type, index, filename)
-        if model_path is None:
-            raise RuntimeError(f"File {filename} not found")
-        services.remove_model(model_path)
-        return web.json_response({"success": True})
-    except Exception as e:
-        error_msg = f"Delete model failed: {str(e)}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
-@routes.get("/model-manager/model-info")
-async def fetch_model_info(request):
-    """
-    Fetch model information from network with model page.
-    """
-    try:
-        model_page = request.query.get("model-page", None)
-        result = services.fetch_model_info(model_page)
-        return web.json_response({"success": True, "data": result})
-    except Exception as e:
-        error_msg = f"Fetch model info failed: {str(e)}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
-@routes.post("/model-manager/model-info/scan")
-async def download_model_info(request):
-    """
-    Create a task to download model information.
-    """
-    post = await utils.get_request_body(request)
-    try:
-        scan_mode = post.get("scanMode", "diff")
-        await services.download_model_info(scan_mode, request)
-        return web.json_response({"success": True})
-    except Exception as e:
-        error_msg = f"Download model info failed: {str(e)}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
-@routes.get("/model-manager/preview/{type}/{index}/{filename:.*}")
-async def read_model_preview(request):
-    """
-    Get the file stream of the specified image.
-    If the file does not exist, no-preview.png is returned.
-
-    :param type: The type of the model. eg.checkpoints, loras, vae, etc.
-    :param index: The index of the model folders.
-    :param filename: The filename of the image.
-    """
-    model_type = request.match_info.get("type", None)
-    index = int(request.match_info.get("index", None))
-    filename = request.match_info.get("filename", None)
-
-    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)
-    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)
-
-
-@routes.get("/model-manager/preview/download/{filename}")
-async def read_download_preview(request):
-    filename = request.match_info.get("filename", None)
-    extension_uri = config.extension_uri
-
-    download_path = utils.get_download_path()
-    preview_path = utils.join_path(download_path, filename)
-
-    if not os.path.isfile(preview_path):
-        preview_path = utils.join_path(extension_uri, "assets", "no-preview.png")
-
-    return web.FileResponse(preview_path)
 
 
 WEB_DIRECTORY = "web"

package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@primevue/themes": "^4.0.7",
+    "@vueuse/core": "^11.3.0",
     "dayjs": "^1.11.13",
     "lodash": "^4.17.21",
     "markdown-it": "^14.1.0",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@primevue/themes':
         specifier: ^4.0.7
         version: 4.0.7
+      '@vueuse/core':
+        specifier: ^11.3.0
+        version: 11.3.0(vue@3.5.6(typescript@5.6.2))
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -485,6 +488,9 @@ packages:
   '@types/node@22.5.5':
     resolution: {integrity: sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==}
 
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
   '@typescript-eslint/eslint-plugin@8.13.0':
     resolution: {integrity: sha512-nQtBLiZYMUPkclSeC3id+x4uVd1SGtHuElTxL++SfP47jR0zfkZBJHc+gL4qPsgTuypz0k8Y2GheaDYn6Gy3rg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -601,6 +607,15 @@ packages:
   '@vue/shared@3.5.6':
     resolution: {integrity: sha512-eidH0HInnL39z6wAt6SFIwBrvGOpDWsDxlw3rCgo1B+CQ1781WzQUSU3YjxgdkcJo9Q8S6LmXTkvI+cLHGkQfA==}
 
+  '@vueuse/core@11.3.0':
+    resolution: {integrity: sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==}
+
+  '@vueuse/metadata@11.3.0':
+    resolution: {integrity: sha512-pwDnDspTqtTo2HwfLw4Rp6yywuuBdYnPYDq+mO38ZYKGebCUQC/nVj/PXSiK9HX5otxLz8Fn7ECPbjiRz2CC3g==}
+
+  '@vueuse/shared@11.3.0':
+    resolution: {integrity: sha512-P8gSSWQeucH5821ek2mn/ciCk+MS/zoRKqdQIM3bHq6p7GXDAJLmnRRKmF5F65sAVJIfzQlwR3aDzwCn10s8hA==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1668,6 +1683,17 @@ packages:
   vscode-uri@3.0.8:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-eslint-parser@9.4.3:
     resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -2009,6 +2035,8 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
+  '@types/web-bluetooth@0.0.20': {}
+
   '@typescript-eslint/eslint-plugin@8.13.0(@typescript-eslint/parser@8.13.0(eslint@9.10.0(jiti@1.21.6))(typescript@5.6.2))(eslint@9.10.0(jiti@1.21.6))(typescript@5.6.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -2181,6 +2209,25 @@ snapshots:
 
   '@vue/shared@3.5.6': {}
 
+  '@vueuse/core@11.3.0(vue@3.5.6(typescript@5.6.2))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 11.3.0
+      '@vueuse/shared': 11.3.0(vue@3.5.6(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.6(typescript@5.6.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@11.3.0': {}
+
+  '@vueuse/shared@11.3.0(vue@3.5.6(typescript@5.6.2))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.6(typescript@5.6.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   acorn-jsx@5.3.2(acorn@8.12.1):
     dependencies:
       acorn: 8.12.1
@@ -3180,6 +3227,10 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
+  vue-demi@0.14.10(vue@3.5.6(typescript@5.6.2)):
+    dependencies:
+      vue: 3.5.6(typescript@5.6.2)
+
   vue-eslint-parser@9.4.3(eslint@9.10.0(jiti@1.21.6)):
     dependencies:
       debug: 4.3.7

py/download.py

@@ -3,8 +3,13 @@ import uuid
 import time
 import requests
 import folder_paths
+
+
 from typing import Callable, Awaitable, Any, Literal, Union, Optional
 from dataclasses import dataclass
+from aiohttp import web
+
+
 from . import config
 from . import utils
 from . import thread
@@ -61,7 +66,7 @@ class TaskContent:
     description: str
     downloadPlatform: str
     downloadUrl: str
-    sizeBytes: int
+    sizeBytes: float
     hashes: Optional[dict[str, str]] = None
 
     def __init__(self, **kwargs):
@@ -71,7 +76,7 @@ class TaskContent:
         self.description = kwargs.get("description", None)
         self.downloadPlatform = kwargs.get("downloadPlatform", None)
         self.downloadUrl = kwargs.get("downloadUrl", None)
-        self.sizeBytes = int(kwargs.get("sizeBytes", 0))
+        self.sizeBytes = float(kwargs.get("sizeBytes", 0))
         self.hashes = kwargs.get("hashes", None)
 
     def to_dict(self):
@@ -87,185 +92,272 @@ class TaskContent:
         }
 
 
-download_model_task_status: dict[str, TaskStatus] = {}
+class ModelDownload:
-download_thread_pool = thread.DownloadThreadPool()
+    def add_routes(self, routes):
 
+        @routes.get("/model-manager/download/task")
+        async def scan_download_tasks(request):
+            """
+            Read download task list.
+            """
+            try:
+                result = await self.scan_model_download_task_list()
+                return web.json_response({"success": True, "data": result})
+            except Exception as e:
+                error_msg = f"Read download task list failed: {e}"
+                utils.print_error(error_msg)
+                return web.json_response({"success": False, "error": error_msg})
 
-def set_task_content(task_id: str, task_content: Union[TaskContent, dict]):
+        @routes.put("/model-manager/download/{task_id}")
-    download_path = utils.get_download_path()
+        async def resume_download_task(request):
-    task_file_path = utils.join_path(download_path, f"{task_id}.task")
+            """
-    utils.save_dict_pickle_file(task_file_path, task_content)
+            Toggle download task status.
+            """
+            try:
+                task_id = request.match_info.get("task_id", None)
+                if task_id is None:
+                    raise web.HTTPBadRequest(reason="Invalid task id")
+                json_data = await request.json()
+                status = json_data.get("status", None)
+                if status == "pause":
+                    await self.pause_model_download_task(task_id)
+                elif status == "resume":
+                    await self.download_model(task_id, request)
+                else:
+                    raise web.HTTPBadRequest(reason="Invalid status")
 
+                return web.json_response({"success": True})
+            except Exception as e:
+                error_msg = f"Resume download task failed: {str(e)}"
+                utils.print_error(error_msg)
+                return web.json_response({"success": False, "error": error_msg})
 
-def get_task_content(task_id: str):
+        @routes.delete("/model-manager/download/{task_id}")
-    download_path = utils.get_download_path()
+        async def delete_model_download_task(request):
-    task_file = utils.join_path(download_path, f"{task_id}.task")
+            """
-    if not os.path.isfile(task_file):
+            Delete download task.
-        raise RuntimeError(f"Task {task_id} not found")
+            """
-    task_content = utils.load_dict_pickle_file(task_file)
+            task_id = request.match_info.get("task_id", None)
-    return TaskContent(**task_content)
+            try:
+                await self.delete_model_download_task(task_id)
+                return web.json_response({"success": True})
+            except Exception as e:
+                error_msg = f"Delete download task failed: {str(e)}"
+                utils.print_error(error_msg)
+                return web.json_response({"success": False, "error": error_msg})
 
+        @routes.post("/model-manager/model")
+        async def create_model(request):
+            """
+            Create a new model.
 
-def get_task_status(task_id: str):
+            request body: x-www-form-urlencoded
-    task_status = download_model_task_status.get(task_id, None)
+            - type: model type.
+            - pathIndex: index of the model folders.
+            - fullname: filename that relative to the model folder.
+            - previewFile: preview file.
+            - description: description.
+            - downloadPlatform: download platform.
+            - downloadUrl: download url.
+            - hash: a JSON string containing the hash value of the downloaded model.
+            """
+            task_data = await request.post()
+            task_data = dict(task_data)
+            try:
+                task_id = await self.create_model_download_task(task_data, request)
+                return web.json_response({"success": True, "data": {"taskId": task_id}})
+            except Exception as e:
+                error_msg = f"Create model download task failed: {str(e)}"
+                utils.print_error(error_msg)
+                return web.json_response({"success": False, "error": error_msg})
 
-    if task_status is None:
+    download_model_task_status: dict[str, TaskStatus] = {}
+
+    download_thread_pool = thread.DownloadThreadPool()
+
+    def set_task_content(self, task_id: str, task_content: Union[TaskContent, dict]):
         download_path = utils.get_download_path()
-        task_content = get_task_content(task_id)
+        task_file_path = utils.join_path(download_path, f"{task_id}.task")
-        download_file = utils.join_path(download_path, f"{task_id}.download")
+        utils.save_dict_pickle_file(task_file_path, task_content)
-        download_size = 0
-        if os.path.exists(download_file):
-            download_size = os.path.getsize(download_file)
 
-        total_size = task_content.sizeBytes
+    def get_task_content(self, task_id: str):
-        task_status = TaskStatus(
+        download_path = utils.get_download_path()
-            taskId=task_id,
+        task_file = utils.join_path(download_path, f"{task_id}.task")
-            type=task_content.type,
+        if not os.path.isfile(task_file):
-            fullname=task_content.fullname,
+            raise RuntimeError(f"Task {task_id} not found")
-            preview=utils.get_model_preview_name(download_file),
+        task_content = utils.load_dict_pickle_file(task_file)
-            platform=task_content.downloadPlatform,
+        if isinstance(task_content, TaskContent):
-            downloadedSize=download_size,
+            return task_content
-            totalSize=task_content.sizeBytes,
+        return TaskContent(**task_content)
-            progress=download_size / total_size * 100 if total_size > 0 else 0,
+
+    def get_task_status(self, task_id: str):
+        task_status = self.download_model_task_status.get(task_id, None)
+
+        if task_status is None:
+            download_path = utils.get_download_path()
+            task_content = self.get_task_content(task_id)
+            download_file = utils.join_path(download_path, f"{task_id}.download")
+            download_size = 0
+            if os.path.exists(download_file):
+                download_size = os.path.getsize(download_file)
+
+            total_size = task_content.sizeBytes
+            task_status = TaskStatus(
+                taskId=task_id,
+                type=task_content.type,
+                fullname=task_content.fullname,
+                preview=utils.get_model_preview_name(download_file),
+                platform=task_content.downloadPlatform,
+                downloadedSize=download_size,
+                totalSize=task_content.sizeBytes,
+                progress=download_size / total_size * 100 if total_size > 0 else 0,
+            )
+
+            self.download_model_task_status[task_id] = task_status
+
+        return task_status
+
+    def delete_task_status(self, task_id: str):
+        self.download_model_task_status.pop(task_id, None)
+
+    async def scan_model_download_task_list(self):
+        """
+        Scan the download directory and send the task list to the client.
+        """
+        download_dir = utils.get_download_path()
+        task_files = utils.search_files(download_dir)
+        task_files = folder_paths.filter_files_extensions(task_files, [".task"])
+        task_files = sorted(
+            task_files,
+            key=lambda x: os.stat(utils.join_path(download_dir, x)).st_ctime,
+            reverse=True,
         )
+        task_list: list[dict] = []
+        for task_file in task_files:
+            task_id = task_file.replace(".task", "")
+            task_status = self.get_task_status(task_id)
+            task_list.append(task_status.to_dict())
 
-        download_model_task_status[task_id] = task_status
+        return task_list
 
-    return task_status
+    async def create_model_download_task(self, task_data: dict, request):
+        """
+        Creates a download task for the given data.
+        """
+        model_type = task_data.get("type", None)
+        path_index = int(task_data.get("pathIndex", None))
+        fullname = task_data.get("fullname", None)
 
+        model_path = utils.get_full_path(model_type, path_index, fullname)
+        # Check if the model path is valid
+        if os.path.exists(model_path):
+            raise RuntimeError(f"File already exists: {model_path}")
 
-def delete_task_status(task_id: str):
+        download_path = utils.get_download_path()
-    download_model_task_status.pop(task_id, None)
 
+        task_id = uuid.uuid4().hex
+        task_path = utils.join_path(download_path, f"{task_id}.task")
+        if os.path.exists(task_path):
+            raise RuntimeError(f"Task {task_id} already exists")
+        download_platform = task_data.get("downloadPlatform", None)
 
-async def scan_model_download_task_list():
+        try:
-    """
+            preview_file = task_data.pop("previewFile", None)
-    Scan the download directory and send the task list to the client.
+            utils.save_model_preview_image(task_path, preview_file, download_platform)
-    """
+            self.set_task_content(task_id, task_data)
-    download_dir = utils.get_download_path()
+            task_status = TaskStatus(
-    task_files = utils.search_files(download_dir)
+                taskId=task_id,
-    task_files = folder_paths.filter_files_extensions(task_files, [".task"])
+                type=model_type,
-    task_files = sorted(
+                fullname=fullname,
-        task_files,
+                preview=utils.get_model_preview_name(task_path),
-        key=lambda x: os.stat(utils.join_path(download_dir, x)).st_ctime,
+                platform=download_platform,
-        reverse=True,
+                totalSize=float(task_data.get("sizeBytes", 0)),
-    )
+            )
-    task_list: list[dict] = []
+            self.download_model_task_status[task_id] = task_status
-    for task_file in task_files:
+            await utils.send_json("create_download_task", task_status.to_dict())
-        task_id = task_file.replace(".task", "")
+        except Exception as e:
-        task_status = get_task_status(task_id)
+            await self.delete_model_download_task(task_id)
-        task_list.append(task_status.to_dict())
+            raise RuntimeError(str(e)) from e
 
-    return task_list
+        await self.download_model(task_id, request)
+        return task_id
 
-
+    async def pause_model_download_task(self, task_id: str):
-async def create_model_download_task(task_data: dict, request):
+        task_status = self.get_task_status(task_id=task_id)
-    """
-    Creates a download task for the given data.
-    """
-    model_type = task_data.get("type", None)
-    path_index = int(task_data.get("pathIndex", None))
-    fullname = task_data.get("fullname", None)
-
-    model_path = utils.get_full_path(model_type, path_index, fullname)
-    # Check if the model path is valid
-    if os.path.exists(model_path):
-        raise RuntimeError(f"File already exists: {model_path}")
-
-    download_path = utils.get_download_path()
-
-    task_id = uuid.uuid4().hex
-    task_path = utils.join_path(download_path, f"{task_id}.task")
-    if os.path.exists(task_path):
-        raise RuntimeError(f"Task {task_id} already exists")
-
-    try:
-        previewFile = task_data.pop("previewFile", None)
-        utils.save_model_preview_image(task_path, previewFile)
-        set_task_content(task_id, task_data)
-        task_status = TaskStatus(
-            taskId=task_id,
-            type=model_type,
-            fullname=fullname,
-            preview=utils.get_model_preview_name(task_path),
-            platform=task_data.get("downloadPlatform", None),
-            totalSize=float(task_data.get("sizeBytes", 0)),
-        )
-        download_model_task_status[task_id] = task_status
-        await utils.send_json("create_download_task", task_status.to_dict())
-    except Exception as e:
-        await delete_model_download_task(task_id)
-        raise RuntimeError(str(e)) from e
-
-    await download_model(task_id, request)
-    return task_id
-
-
-async def pause_model_download_task(task_id: str):
-    task_status = get_task_status(task_id=task_id)
-    task_status.status = "pause"
-
-
-async def delete_model_download_task(task_id: str):
-    task_status = get_task_status(task_id)
-    is_running = task_status.status == "doing"
-    task_status.status = "waiting"
-    await utils.send_json("delete_download_task", task_id)
-
-    # Pause the task
-    if is_running:
         task_status.status = "pause"
-        time.sleep(1)
 
-    download_dir = utils.get_download_path()
+    async def delete_model_download_task(self, task_id: str):
-    task_file_list = os.listdir(download_dir)
+        task_status = self.get_task_status(task_id)
-    for task_file in task_file_list:
+        is_running = task_status.status == "doing"
-        task_file_target = os.path.splitext(task_file)[0]
+        task_status.status = "waiting"
-        if task_file_target == task_id:
+        await utils.send_json("delete_download_task", task_id)
-            delete_task_status(task_id)
-            os.remove(utils.join_path(download_dir, task_file))
 
-    await utils.send_json("delete_download_task", task_id)
+        # Pause the task
+        if is_running:
+            task_status.status = "pause"
+            time.sleep(1)
 
+        download_dir = utils.get_download_path()
+        task_file_list = os.listdir(download_dir)
+        for task_file in task_file_list:
+            task_file_target = os.path.splitext(task_file)[0]
+            if task_file_target == task_id:
+                self.delete_task_status(task_id)
+                os.remove(utils.join_path(download_dir, task_file))
 
-async def download_model(task_id: str, request):
+        await utils.send_json("delete_download_task", task_id)
-    async def download_task(task_id: str):
+
-        async def report_progress(task_status: TaskStatus):
+    async def download_model(self, task_id: str, request):
+        async def download_task(task_id: str):
+            async def report_progress(task_status: TaskStatus):
+                await utils.send_json("update_download_task", task_status.to_dict())
+
+            try:
+                # When starting a task from the queue, the task may not exist
+                task_status = self.get_task_status(task_id)
+            except:
+                return
+
+            # Update task status
+            task_status.status = "doing"
             await utils.send_json("update_download_task", task_status.to_dict())
 
-        try:
+            try:
-            # When starting a task from the queue, the task may not exist
-            task_status = get_task_status(task_id)
-        except:
-            return
 
-        # Update task status
+                # Set download request headers
-        task_status.status = "doing"
+                headers = {"User-Agent": config.user_agent}
-        await utils.send_json("update_download_task", task_status.to_dict())
+
+                download_platform = task_status.platform
+                if download_platform == "civitai":
+                    api_key = utils.get_setting_value(request, "api_key.civitai")
+                    if api_key:
+                        headers["Authorization"] = f"Bearer {api_key}"
+
+                elif download_platform == "huggingface":
+                    api_key = utils.get_setting_value(request, "api_key.huggingface")
+                    if api_key:
+                        headers["Authorization"] = f"Bearer {api_key}"
+
+                progress_interval = 1.0
+                await self.download_model_file(
+                    task_id=task_id,
+                    headers=headers,
+                    progress_callback=report_progress,
+                    interval=progress_interval,
+                )
+            except Exception as e:
+                task_status.status = "pause"
+                task_status.error = str(e)
+                await utils.send_json("update_download_task", task_status.to_dict())
+                task_status.error = None
+                utils.print_error(str(e))
 
         try:
-
+            status = self.download_thread_pool.submit(download_task, task_id)
-            # Set download request headers
+            if status == "Waiting":
-            headers = {"User-Agent": config.user_agent}
+                task_status = self.get_task_status(task_id)
-
+                task_status.status = "waiting"
-            download_platform = task_status.platform
+                await utils.send_json("update_download_task", task_status.to_dict())
-            if download_platform == "civitai":
-                api_key = utils.get_setting_value(request, "api_key.civitai")
-                if api_key:
-                    headers["Authorization"] = f"Bearer {api_key}"
-
-            elif download_platform == "huggingface":
-                api_key = utils.get_setting_value(request, "api_key.huggingface")
-                if api_key:
-                    headers["Authorization"] = f"Bearer {api_key}"
-
-            progress_interval = 1.0
-            await download_model_file(
-                task_id=task_id,
-                headers=headers,
-                progress_callback=report_progress,
-                interval=progress_interval,
-            )
         except Exception as e:
             task_status.status = "pause"
             task_status.error = str(e)
@@ -273,133 +365,120 @@ async def download_model(task_id: str, request):
             task_status.error = None
             utils.print_error(str(e))
 
-    try:
+    async def download_model_file(
-        status = download_thread_pool.submit(download_task, task_id)
+        self,
-        if status == "Waiting":
+        task_id: str,
-            task_status = get_task_status(task_id)
+        headers: dict,
-            task_status.status = "waiting"
+        progress_callback: Callable[[TaskStatus], Awaitable[Any]],
-            await utils.send_json("update_download_task", task_status.to_dict())
+        interval: float = 1.0,
-    except Exception as e:
+    ):
-        task_status.status = "pause"
-        task_status.error = str(e)
-        await utils.send_json("update_download_task", task_status.to_dict())
-        task_status.error = None
-        utils.print_error(str(e))
 
+        async def download_complete():
+            """
+            Restore the model information from the task file
+            and move the model file to the target directory.
+            """
+            model_type = task_content.type
+            path_index = task_content.pathIndex
+            fullname = task_content.fullname
+            # Write description file
+            description = task_content.description
+            description_file = utils.join_path(download_path, f"{task_id}.md")
+            with open(description_file, "w", encoding="utf-8", newline="") as f:
+                f.write(description)
 
-async def download_model_file(
+            model_path = utils.get_full_path(model_type, path_index, fullname)
-    task_id: str,
-    headers: dict,
-    progress_callback: Callable[[TaskStatus], Awaitable[Any]],
-    interval: float = 1.0,
-):
 
-    async def download_complete():
+            utils.rename_model(download_tmp_file, model_path)
-        """
-        Restore the model information from the task file
-        and move the model file to the target directory.
-        """
-        model_type = task_content.type
-        path_index = task_content.pathIndex
-        fullname = task_content.fullname
-        # Write description file
-        description = task_content.description
-        description_file = utils.join_path(download_path, f"{task_id}.md")
-        with open(description_file, "w", encoding="utf-8", newline="") as f:
-            f.write(description)
 
-        model_path = utils.get_full_path(model_type, path_index, fullname)
+            time.sleep(1)
+            task_file = utils.join_path(download_path, f"{task_id}.task")
+            os.remove(task_file)
+            await utils.send_json("complete_download_task", task_id)
 
-        utils.rename_model(download_tmp_file, model_path)
+        async def update_progress():
+            nonlocal last_update_time
+            nonlocal last_downloaded_size
+            progress = (downloaded_size / total_size) * 100 if total_size > 0 else 0
+            task_status.downloadedSize = downloaded_size
+            task_status.progress = progress
+            task_status.bps = downloaded_size - last_downloaded_size
+            await progress_callback(task_status)
+            last_update_time = time.time()
+            last_downloaded_size = downloaded_size
 
-        time.sleep(1)
+        task_status = self.get_task_status(task_id)
-        task_file = utils.join_path(download_path, f"{task_id}.task")
+        task_content = self.get_task_content(task_id)
-        os.remove(task_file)
+
-        await utils.send_json("complete_download_task", task_id)
+        # Check download uri
+        model_url = task_content.downloadUrl
+        if not model_url:
+            raise RuntimeError("No downloadUrl found")
+
+        download_path = utils.get_download_path()
+        download_tmp_file = utils.join_path(download_path, f"{task_id}.download")
+
+        downloaded_size = 0
+        if os.path.isfile(download_tmp_file):
+            downloaded_size = os.path.getsize(download_tmp_file)
+            headers["Range"] = f"bytes={downloaded_size}-"
+
+        total_size = task_content.sizeBytes
+
+        if total_size > 0 and downloaded_size == total_size:
+            await download_complete()
+            return
 
-    async def update_progress():
-        nonlocal last_update_time
-        nonlocal last_downloaded_size
-        progress = (downloaded_size / total_size) * 100 if total_size > 0 else 0
-        task_status.downloadedSize = downloaded_size
-        task_status.progress = progress
-        task_status.bps = downloaded_size - last_downloaded_size
-        await progress_callback(task_status)
         last_update_time = time.time()
         last_downloaded_size = downloaded_size
 
-    task_status = get_task_status(task_id)
+        response = requests.get(
-    task_content = get_task_content(task_id)
+            url=model_url,
+            headers=headers,
+            stream=True,
+            allow_redirects=True,
+        )
 
-    # Check download uri
+        if response.status_code not in (200, 206):
-    model_url = task_content.downloadUrl
+            raise RuntimeError(f"Failed to download {task_content.fullname}, status code: {response.status_code}")
-    if not model_url:
-        raise RuntimeError("No downloadUrl found")
 
-    download_path = utils.get_download_path()
+        # Some models require logging in before they can be downloaded.
-    download_tmp_file = utils.join_path(download_path, f"{task_id}.download")
+        # If no token is carried, it will be redirected to the login page.
+        content_type = response.headers.get("content-type")
+        if content_type and content_type.startswith("text/html"):
+            # TODO More checks
+            # In addition to requiring login to download, there may be other restrictions.
+            # The currently one situation is early access??? issues#43
+            # Due to the lack of test data, let’s put it aside for now.
+            # If it cannot be downloaded, a redirect will definitely occur.
+            # Maybe consider getting the redirect url from response.history to make a judgment.
+            # Here we also need to consider how different websites are processed.
+            raise RuntimeError(f"{task_content.fullname} needs to be logged in to download. Please set the API-Key first.")
 
-    downloaded_size = 0
+        # When parsing model information from HuggingFace API,
-    if os.path.isfile(download_tmp_file):
+        # the file size was not found and needs to be obtained from the response header.
-        downloaded_size = os.path.getsize(download_tmp_file)
+        if total_size == 0:
-        headers["Range"] = f"bytes={downloaded_size}-"
+            total_size = float(response.headers.get("content-length", 0))
+            task_content.sizeBytes = total_size
+            task_status.totalSize = total_size
+            self.set_task_content(task_id, task_content)
+            await utils.send_json("update_download_task", task_content.to_dict())
 
-    total_size = task_content.sizeBytes
+        with open(download_tmp_file, "ab") as f:
+            for chunk in response.iter_content(chunk_size=8192):
+                if task_status.status == "pause":
+                    break
 
-    if total_size > 0 and downloaded_size == total_size:
+                f.write(chunk)
-        await download_complete()
+                downloaded_size += len(chunk)
-        return
 
-    last_update_time = time.time()
+                if time.time() - last_update_time >= interval:
-    last_downloaded_size = downloaded_size
+                    await update_progress()
 
-    response = requests.get(
+        await update_progress()
-        url=model_url,
-        headers=headers,
-        stream=True,
-        allow_redirects=True,
-    )
 
-    if response.status_code not in (200, 206):
+        if total_size > 0 and downloaded_size == total_size:
-        raise RuntimeError(f"Failed to download {task_content.fullname}, status code: {response.status_code}")
+            await download_complete()
-
+        else:
-    # Some models require logging in before they can be downloaded.
+            task_status.status = "pause"
-    # If no token is carried, it will be redirected to the login page.
+            await utils.send_json("update_download_task", task_status.to_dict())
-    content_type = response.headers.get("content-type")
-    if content_type and content_type.startswith("text/html"):
-        # TODO More checks
-        # In addition to requiring login to download, there may be other restrictions.
-        # The currently one situation is early access??? issues#43
-        # Due to the lack of test data, let’s put it aside for now.
-        # If it cannot be downloaded, a redirect will definitely occur.
-        # Maybe consider getting the redirect url from response.history to make a judgment.
-        # Here we also need to consider how different websites are processed.
-        raise RuntimeError(f"{task_content.fullname} needs to be logged in to download. Please set the API-Key first.")
-
-    # When parsing model information from HuggingFace API,
-    # the file size was not found and needs to be obtained from the response header.
-    if total_size == 0:
-        total_size = int(response.headers.get("content-length", 0))
-        task_content.sizeBytes = total_size
-        task_status.totalSize = total_size
-        set_task_content(task_id, task_content)
-        await utils.send_json("update_download_task", task_content.to_dict())
-
-    with open(download_tmp_file, "ab") as f:
-        for chunk in response.iter_content(chunk_size=8192):
-            if task_status.status == "pause":
-                break
-
-            f.write(chunk)
-            downloaded_size += len(chunk)
-
-            if time.time() - last_update_time >= interval:
-                await update_progress()
-
-    await update_progress()
-
-    if total_size > 0 and downloaded_size == total_size:
-        await download_complete()
-    else:
-        task_status.status = "pause"
-        await utils.send_json("update_download_task", task_status.to_dict())

py/information.py

@@ -27,9 +27,7 @@ class ModelSearcher(ABC):
 
 class UnknownWebsiteSearcher(ModelSearcher):
     def search_by_url(self, url: str):
-        raise RuntimeError(
+        raise RuntimeError(f"Unknown Website, please input a URL from huggingface.co or civitai.com.")
-            f"Unknown Website, please input a URL from huggingface.co or civitai.com."
-        )
 
     def search_by_hash(self, hash: str):
         raise RuntimeError(f"Unknown Website, unable to search with hash value.")
@@ -66,9 +64,9 @@ class CivitaiModelSearcher(ModelSearcher):
             shortname = version.get("name", None) if len(model_files) > 0 else None
 
             for file in model_files:
-                fullname = file.get("name", None)
+                name = file.get("name", None)
-                extension = os.path.splitext(fullname)[1]
+                extension = os.path.splitext(name)[1]
-                basename = os.path.splitext(fullname)[0]
+                basename = os.path.splitext(name)[0]
 
                 metadata_info = {
                     "website": "Civitai",
@@ -87,41 +85,27 @@ class CivitaiModelSearcher(ModelSearcher):
                 description_parts.append("")
                 description_parts.append(f"# Trigger Words")
                 description_parts.append("")
-                description_parts.append(
+                description_parts.append(", ".join(version.get("trainedWords", ["No trigger words"])))
-                    ", ".join(version.get("trainedWords", ["No trigger words"]))
-                )
                 description_parts.append("")
                 description_parts.append(f"# About this version")
                 description_parts.append("")
-                description_parts.append(
+                description_parts.append(markdownify.markdownify(version.get("description", "<p>No description about this version</p>")).strip())
-                    markdownify.markdownify(
-                        version.get(
-                            "description", "<p>No description about this version</p>"
-                        )
-                    ).strip()
-                )
                 description_parts.append("")
                 description_parts.append(f"# {res_data.get('name')}")
                 description_parts.append("")
-                description_parts.append(
+                description_parts.append(markdownify.markdownify(res_data.get("description", "<p>No description about this model</p>")).strip())
-                    markdownify.markdownify(
-                        res_data.get(
-                            "description", "<p>No description about this model</p>"
-                        )
-                    ).strip()
-                )
                 description_parts.append("")
 
                 model = {
                     "id": file.get("id"),
                     "shortname": shortname or basename,
-                    "fullname": fullname,
                     "basename": basename,
                     "extension": extension,
                     "preview": metadata_info.get("preview"),
                     "sizeBytes": file.get("sizeKB", 0) * 1024,
-                    "type": self._resolve_model_type(res_data.get("type", "unknown")),
+                    "type": self._resolve_model_type(res_data.get("type", "")),
                     "pathIndex": 0,
+                    "subFolder": "",
                     "description": "\n".join(description_parts),
                     "metadata": file.get("metadata"),
                     "downloadPlatform": "civitai",
@@ -136,18 +120,14 @@ class CivitaiModelSearcher(ModelSearcher):
         if not hash:
             raise RuntimeError(f"Hash value is empty.")
 
-        response = requests.get(
+        response = requests.get(f"https://civitai.com/api/v1/model-versions/by-hash/{hash}")
-            f"https://civitai.com/api/v1/model-versions/by-hash/{hash}"
-        )
         response.raise_for_status()
         version: dict = response.json()
 
         model_id = version.get("modelId")
         version_id = version.get("id")
 
-        model_page = (
+        model_page = f"https://civitai.com/models/{model_id}?modelVersionId={version_id}"
-            f"https://civitai.com/models/{model_id}?modelVersionId={version_id}"
-        )
 
         models = self.search_by_url(model_page)
 
@@ -166,7 +146,7 @@ class CivitaiModelSearcher(ModelSearcher):
             "Controlnet": "controlnet",
             "Upscaler": "upscale_models",
             "VAE": "vae",
-            "unknown": "unknown",
+            "unknown": "",
         }
         return map_legacy.get(model_type, f"{model_type.lower()}s")
 
@@ -186,9 +166,7 @@ class HuggingfaceModelSearcher(ModelSearcher):
         response.raise_for_status()
         res_data: dict = response.json()
 
-        sibling_files: list[str] = [
+        sibling_files: list[str] = [x.get("rfilename") for x in res_data.get("siblings", [])]
-            x.get("rfilename") for x in res_data.get("siblings", [])
-        ]
 
         model_files = utils.filter_with(
             utils.filter_with(sibling_files, self._match_model_files()),
@@ -199,10 +177,7 @@ class HuggingfaceModelSearcher(ModelSearcher):
             utils.filter_with(sibling_files, self._match_image_files()),
             self._match_tree_files(rest_pathname),
         )
-        image_files = [
+        image_files = [f"https://huggingface.co/{model_id}/resolve/main/{filename}" for filename in image_files]
-            f"https://huggingface.co/{model_id}/resolve/main/{filename}"
-            for filename in image_files
-        ]
 
         models: list[dict] = []
 
@@ -241,16 +216,16 @@ class HuggingfaceModelSearcher(ModelSearcher):
             model = {
                 "id": filename,
                 "shortname": filename,
-                "fullname": fullname,
                 "basename": basename,
                 "extension": extension,
                 "preview": image_files,
                 "sizeBytes": 0,
-                "type": "unknown",
+                "type": "",
                 "pathIndex": 0,
+                "subFolder": "",
                 "description": "\n".join(description_parts),
                 "metadata": {},
-                "downloadPlatform": "",
+                "downloadPlatform": "huggingface",
                 "downloadUrl": f"https://huggingface.co/{model_id}/resolve/main/{filename}?download=true",
             }
             models.append(model)
@@ -315,3 +290,148 @@ def get_model_searcher_by_url(url: str) -> ModelSearcher:
     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):
+
+        @routes.get("/model-manager/model-info")
+        async def fetch_model_info(request):
+            """
+            Fetch model information from network with model page.
+            """
+            try:
+                model_page = request.query.get("model-page", None)
+                result = self.fetch_model_info(model_page)
+                return web.json_response({"success": True, "data": result})
+            except Exception as e:
+                error_msg = f"Fetch model info failed: {str(e)}"
+                utils.print_error(error_msg)
+                return web.json_response({"success": False, "error": error_msg})
+
+        @routes.post("/model-manager/model-info/scan")
+        async def download_model_info(request):
+            """
+            Create a task to download model information.
+            """
+            post = await utils.get_request_body(request)
+            try:
+                scan_mode = post.get("scanMode", "diff")
+                await self.download_model_info(scan_mode, request)
+                return web.json_response({"success": True})
+            except Exception as e:
+                error_msg = f"Download model info failed: {str(e)}"
+                utils.print_error(error_msg)
+                return web.json_response({"success": False, "error": error_msg})
+
+        @routes.get("/model-manager/preview/{type}/{index}/{filename:.*}")
+        async def read_model_preview(request):
+            """
+            Get the file stream of the specified image.
+            If the file does not exist, no-preview.png is returned.
+
+            :param type: The type of the model. eg.checkpoints, loras, vae, etc.
+            :param index: The index of the model folders.
+            :param filename: The filename of the image.
+            """
+            model_type = request.match_info.get("type", None)
+            index = int(request.match_info.get("index", None))
+            filename = request.match_info.get("filename", None)
+
+            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)
+            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)
+
+        @routes.get("/model-manager/preview/download/{filename}")
+        async def read_download_preview(request):
+            filename = request.match_info.get("filename", None)
+            extension_uri = config.extension_uri
+
+            download_path = utils.get_download_path()
+            preview_path = utils.join_path(download_path, filename)
+
+            if not os.path.isfile(preview_path):
+                preview_path = utils.join_path(extension_uri, "assets", "no-preview.png")
+
+            return web.FileResponse(preview_path)
+
+    def fetch_model_info(self, model_page: str):
+        if not model_page:
+            return []
+
+        model_searcher = get_model_searcher_by_url(model_page)
+        result = model_searcher.search_by_url(model_page)
+        return result
+
+    async def download_model_info(self, scan_mode: str, request):
+        utils.print_info(f"Download model info for {scan_mode}")
+        model_base_paths = utils.resolve_model_base_paths()
+        for model_type in model_base_paths:
+
+            folders, *others = folder_paths.folder_names_and_paths[model_type]
+            for path_index, base_path in enumerate(folders):
+                files = utils.recursive_search_files(base_path, request)
+
+                models = folder_paths.filter_files_extensions(files, folder_paths.supported_pt_extensions)
+
+                for fullname in models:
+                    fullname = utils.normalize_path(fullname)
+                    basename = os.path.splitext(fullname)[0]
+
+                    abs_model_path = utils.join_path(base_path, fullname)
+
+                    image_name = utils.get_model_preview_name(abs_model_path)
+                    abs_image_path = utils.join_path(base_path, image_name)
+
+                    has_preview = os.path.isfile(abs_image_path)
+
+                    description_name = utils.get_model_description_name(abs_model_path)
+                    abs_description_path = utils.join_path(base_path, description_name) if description_name else None
+                    has_description = os.path.isfile(abs_description_path) if abs_description_path else False
+
+                    try:
+
+                        utils.print_info(f"Checking model {abs_model_path}")
+                        utils.print_debug(f"Scan mode: {scan_mode}")
+                        utils.print_debug(f"Has preview: {has_preview}")
+                        utils.print_debug(f"Has description: {has_description}")
+
+                        if scan_mode != "full" and (has_preview and has_description):
+                            continue
+
+                        utils.print_debug(f"Calculate sha256 for {abs_model_path}")
+                        hash_value = utils.calculate_sha256(abs_model_path)
+                        utils.print_info(f"Searching model info by hash {hash_value}")
+                        model_info = CivitaiModelSearcher().search_by_hash(hash_value)
+
+                        preview_url_list = model_info.get("preview", [])
+                        preview_image_url = preview_url_list[0] if preview_url_list else None
+                        if preview_image_url:
+                            utils.print_debug(f"Save preview image to {abs_image_path}")
+                            utils.save_model_preview_image(abs_model_path, preview_image_url)
+
+                        description = model_info.get("description", None)
+                        if description:
+                            utils.save_model_description(abs_model_path, description)
+                    except Exception as e:
+                        utils.print_error(f"Failed to download model info for {abs_model_path}: {e}")
+
+        utils.print_debug("Completed scan model information.")

py/manager.py

@@ -0,0 +1,231 @@
+import os
+import folder_paths
+from aiohttp import web
+from concurrent.futures import ThreadPoolExecutor, as_completed
+
+
+from . import utils
+
+
+class ModelManager:
+
+    def add_routes(self, routes):
+
+        @routes.get("/model-manager/base-folders")
+        @utils.deprecated(reason="Use `/model-manager/models` instead.")
+        async def get_model_paths(request):
+            """
+            Returns the base folders for models.
+            """
+            model_base_paths = utils.resolve_model_base_paths()
+            return web.json_response({"success": True, "data": model_base_paths})
+
+        @routes.get("/model-manager/models")
+        async def get_folders(request):
+            """
+            Returns the base folders for models.
+            """
+            try:
+                result = utils.resolve_model_base_paths()
+                return web.json_response({"success": True, "data": result})
+            except Exception as e:
+                error_msg = f"Read models failed: {str(e)}"
+                utils.print_error(error_msg)
+                return web.json_response({"success": False, "error": error_msg})
+
+        @routes.get("/model-manager/models/{folder}")
+        async def get_folder_models(request):
+            try:
+                folder = request.match_info.get("folder", None)
+                results = self.scan_models(folder, request)
+                return web.json_response({"success": True, "data": results})
+            except Exception as e:
+                error_msg = f"Read models failed: {str(e)}"
+                utils.print_error(error_msg)
+                return web.json_response({"success": False, "error": error_msg})
+
+        @routes.get("/model-manager/model/{type}/{index}/{filename:.*}")
+        async def get_model_info(request):
+            """
+            Get the information of the specified model.
+            """
+            model_type = request.match_info.get("type", None)
+            path_index = int(request.match_info.get("index", None))
+            filename = request.match_info.get("filename", None)
+
+            try:
+                model_path = utils.get_valid_full_path(model_type, path_index, filename)
+                result = self.get_model_info(model_path)
+                return web.json_response({"success": True, "data": result})
+            except Exception as e:
+                error_msg = f"Read model info failed: {str(e)}"
+                utils.print_error(error_msg)
+                return web.json_response({"success": False, "error": error_msg})
+
+        @routes.put("/model-manager/model/{type}/{index}/{filename:.*}")
+        async def update_model(request):
+            """
+            Update model information.
+
+            request body: x-www-form-urlencoded
+            - previewFile: preview file.
+            - description: description.
+            - type: model type.
+            - pathIndex: index of the model folders.
+            - fullname: filename that relative to the model folder.
+            All fields are optional, but type, pathIndex and fullname must appear together.
+            """
+            model_type = request.match_info.get("type", None)
+            path_index = int(request.match_info.get("index", None))
+            filename = request.match_info.get("filename", None)
+
+            model_data = await request.post()
+            model_data = dict(model_data)
+
+            try:
+                model_path = utils.get_valid_full_path(model_type, path_index, filename)
+                if model_path is None:
+                    raise RuntimeError(f"File {filename} not found")
+                self.update_model(model_path, model_data)
+                return web.json_response({"success": True})
+            except Exception as e:
+                error_msg = f"Update model failed: {str(e)}"
+                utils.print_error(error_msg)
+                return web.json_response({"success": False, "error": error_msg})
+
+        @routes.delete("/model-manager/model/{type}/{index}/{filename:.*}")
+        async def delete_model(request):
+            """
+            Delete model.
+            """
+            model_type = request.match_info.get("type", None)
+            path_index = int(request.match_info.get("index", None))
+            filename = request.match_info.get("filename", None)
+
+            try:
+                model_path = utils.get_valid_full_path(model_type, path_index, filename)
+                if model_path is None:
+                    raise RuntimeError(f"File {filename} not found")
+                self.remove_model(model_path)
+                return web.json_response({"success": True})
+            except Exception as e:
+                error_msg = f"Delete model failed: {str(e)}"
+                utils.print_error(error_msg)
+                return web.json_response({"success": False, "error": error_msg})
+
+    def scan_models(self, folder: str, request):
+        result = []
+
+        include_hidden_files = utils.get_setting_value(request, "scan.include_hidden_files", False)
+        folders, *others = folder_paths.folder_names_and_paths[folder]
+
+        def get_file_info(entry: os.DirEntry[str], base_path: str, path_index: int):
+            prefix_path = utils.normalize_path(base_path)
+            if not prefix_path.endswith("/"):
+                prefix_path = f"{prefix_path}/"
+
+            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]
+
+            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')}"
+
+            stat = entry.stat()
+            return {
+                "type": folder if is_file else "folder",
+                "subFolder": sub_folder,
+                "basename": basename,
+                "extension": extension,
+                "pathIndex": path_index,
+                "sizeBytes": stat.st_size if is_file else 0,
+                "preview": model_preview if is_file else None,
+                "createdAt": round(stat.st_ctime_ns / 1000000),
+                "updatedAt": round(stat.st_mtime_ns / 1000000),
+            }
+
+        def get_all_files_entry(directory: str):
+            entries: list[os.DirEntry[str]] = []
+            with os.scandir(directory) as it:
+                for entry in it:
+                    # Skip hidden files
+                    if not include_hidden_files:
+                        if entry.name.startswith("."):
+                            continue
+                    entries.append(entry)
+                    if entry.is_dir():
+                        entries.extend(get_all_files_entry(entry.path))
+            return entries
+
+        for path_index, base_path in enumerate(folders):
+            if not os.path.exists(base_path):
+                continue
+            file_entries = get_all_files_entry(base_path)
+            with ThreadPoolExecutor() as executor:
+                futures = {executor.submit(get_file_info, entry, base_path, path_index): entry for entry in file_entries}
+                for future in as_completed(futures):
+                    file_info = future.result()
+                    if file_info is None:
+                        continue
+                    result.append(file_info)
+
+        return result
+
+    def get_model_info(self, model_path: str):
+        directory = os.path.dirname(model_path)
+
+        metadata = utils.get_model_metadata(model_path)
+
+        description_file = utils.get_model_description_name(model_path)
+        description_file = utils.join_path(directory, description_file)
+        description = None
+        if os.path.isfile(description_file):
+            with open(description_file, "r", encoding="utf-8", newline="") as f:
+                description = f.read()
+
+        return {
+            "metadata": metadata,
+            "description": description,
+        }
+
+    def update_model(self, model_path: str, model_data: dict):
+
+        if "previewFile" in model_data:
+            previewFile = model_data["previewFile"]
+            if type(previewFile) is str and previewFile == "undefined":
+                utils.remove_model_preview_image(model_path)
+            else:
+                utils.save_model_preview_image(model_path, previewFile)
+
+        if "description" in model_data:
+            description = model_data["description"]
+            utils.save_model_description(model_path, description)
+
+        if "type" in model_data and "pathIndex" in model_data and "fullname" in model_data:
+            model_type = model_data.get("type", None)
+            path_index = int(model_data.get("pathIndex", None))
+            fullname = model_data.get("fullname", None)
+            if model_type is None or path_index is None or fullname is None:
+                raise RuntimeError("Invalid type or pathIndex or fullname")
+
+            # get new path
+            new_model_path = utils.get_full_path(model_type, path_index, fullname)
+
+            utils.rename_model(model_path, new_model_path)
+
+    def remove_model(self, model_path: str):
+        model_dirname = os.path.dirname(model_path)
+        os.remove(model_path)
+
+        model_previews = utils.get_model_all_images(model_path)
+        for preview in model_previews:
+            os.remove(utils.join_path(model_dirname, preview))
+
+        model_descriptions = utils.get_model_all_descriptions(model_path)
+        for description in model_descriptions:
+            os.remove(utils.join_path(model_dirname, description))

py/services.py

@@ -1,193 +0,0 @@
-import os
-
-import folder_paths
-
-from . import utils
-from . import download
-from . import searcher
-
-
-def scan_models(folder: str, request):
-    result = []
-
-    folders, extensions = folder_paths.folder_names_and_paths[folder]
-    for path_index, base_path in enumerate(folders):
-        files = utils.recursive_search_files(base_path, request)
-
-        models = folder_paths.filter_files_extensions(files, folder_paths.supported_pt_extensions)
-
-        for fullname in models:
-            fullname = utils.normalize_path(fullname)
-            basename = os.path.splitext(fullname)[0]
-            extension = os.path.splitext(fullname)[1]
-
-            abs_path = utils.join_path(base_path, fullname)
-            file_stats = os.stat(abs_path)
-
-            # Resolve preview
-            image_name = utils.get_model_preview_name(abs_path)
-            image_name = utils.join_path(os.path.dirname(fullname), image_name)
-            abs_image_path = utils.join_path(base_path, image_name)
-            if os.path.isfile(abs_image_path):
-                image_state = os.stat(abs_image_path)
-                image_timestamp = round(image_state.st_mtime_ns / 1000000)
-                image_name = f"{image_name}?ts={image_timestamp}"
-            model_preview = f"/model-manager/preview/{folder}/{path_index}/{image_name}"
-
-            model_info = {
-                "fullname": fullname,
-                "basename": basename,
-                "extension": extension,
-                "type": folder,
-                "pathIndex": path_index,
-                "sizeBytes": file_stats.st_size,
-                "preview": model_preview,
-                "createdAt": round(file_stats.st_ctime_ns / 1000000),
-                "updatedAt": round(file_stats.st_mtime_ns / 1000000),
-            }
-
-            result.append(model_info)
-
-    return result
-
-
-def get_model_info(model_path: str):
-    directory = os.path.dirname(model_path)
-
-    metadata = utils.get_model_metadata(model_path)
-
-    description_file = utils.get_model_description_name(model_path)
-    description_file = utils.join_path(directory, description_file)
-    description = None
-    if os.path.isfile(description_file):
-        with open(description_file, "r", encoding="utf-8", newline="") as f:
-            description = f.read()
-
-    return {
-        "metadata": metadata,
-        "description": description,
-    }
-
-
-def update_model(model_path: str, model_data: dict):
-
-    if "previewFile" in model_data:
-        previewFile = model_data["previewFile"]
-        if type(previewFile) is str and previewFile == "undefined":
-            utils.remove_model_preview_image(model_path)
-        else:
-            utils.save_model_preview_image(model_path, previewFile)
-
-    if "description" in model_data:
-        description = model_data["description"]
-        utils.save_model_description(model_path, description)
-
-    if "type" in model_data and "pathIndex" in model_data and "fullname" in model_data:
-        model_type = model_data.get("type", None)
-        path_index = int(model_data.get("pathIndex", None))
-        fullname = model_data.get("fullname", None)
-        if model_type is None or path_index is None or fullname is None:
-            raise RuntimeError("Invalid type or pathIndex or fullname")
-
-        # get new path
-        new_model_path = utils.get_full_path(model_type, path_index, fullname)
-
-        utils.rename_model(model_path, new_model_path)
-
-
-def remove_model(model_path: str):
-    model_dirname = os.path.dirname(model_path)
-    os.remove(model_path)
-
-    model_previews = utils.get_model_all_images(model_path)
-    for preview in model_previews:
-        os.remove(utils.join_path(model_dirname, preview))
-
-    model_descriptions = utils.get_model_all_descriptions(model_path)
-    for description in model_descriptions:
-        os.remove(utils.join_path(model_dirname, description))
-
-
-async def create_model_download_task(task_data, request):
-    return await download.create_model_download_task(task_data, request)
-
-
-async def scan_model_download_task_list():
-    return await download.scan_model_download_task_list()
-
-
-async def pause_model_download_task(task_id):
-    return await download.pause_model_download_task(task_id)
-
-
-async def resume_model_download_task(task_id, request):
-    return await download.download_model(task_id, request)
-
-
-async def delete_model_download_task(task_id):
-    return await download.delete_model_download_task(task_id)
-
-
-def fetch_model_info(model_page: str):
-    if not model_page:
-        return []
-
-    model_searcher = searcher.get_model_searcher_by_url(model_page)
-    result = model_searcher.search_by_url(model_page)
-    return result
-
-
-async def download_model_info(scan_mode: str, request):
-    utils.print_info(f"Download model info for {scan_mode}")
-    model_base_paths = utils.resolve_model_base_paths()
-    for model_type in model_base_paths:
-
-        folders, extensions = folder_paths.folder_names_and_paths[model_type]
-        for path_index, base_path in enumerate(folders):
-            files = utils.recursive_search_files(base_path, request)
-
-            models = folder_paths.filter_files_extensions(files, folder_paths.supported_pt_extensions)
-
-            for fullname in models:
-                fullname = utils.normalize_path(fullname)
-                basename = os.path.splitext(fullname)[0]
-
-                abs_model_path = utils.join_path(base_path, fullname)
-
-                image_name = utils.get_model_preview_name(abs_model_path)
-                abs_image_path = utils.join_path(base_path, image_name)
-
-                has_preview = os.path.isfile(abs_image_path)
-
-                description_name = utils.get_model_description_name(abs_model_path)
-                abs_description_path = utils.join_path(base_path, description_name) if description_name else None
-                has_description = os.path.isfile(abs_description_path) if abs_description_path else False
-
-                try:
-
-                    utils.print_info(f"Checking model {abs_model_path}")
-                    utils.print_debug(f"Scan mode: {scan_mode}")
-                    utils.print_debug(f"Has preview: {has_preview}")
-                    utils.print_debug(f"Has description: {has_description}")
-
-                    if scan_mode != "full" and (has_preview and has_description):
-                        continue
-
-                    utils.print_debug(f"Calculate sha256 for {abs_model_path}")
-                    hash_value = utils.calculate_sha256(abs_model_path)
-                    utils.print_info(f"Searching model info by hash {hash_value}")
-                    model_info = searcher.CivitaiModelSearcher().search_by_hash(hash_value)
-
-                    preview_url_list = model_info.get("preview", [])
-                    preview_image_url = preview_url_list[0] if preview_url_list else None
-                    if preview_image_url:
-                        utils.print_debug(f"Save preview image to {abs_image_path}")
-                        utils.save_model_preview_image(abs_model_path, preview_image_url)
-
-                    description = model_info.get("description", None)
-                    if description:
-                        utils.save_model_description(abs_model_path, description)
-                except Exception as e:
-                    utils.print_error(f"Failed to download model info for {abs_model_path}: {e}")
-
-    utils.print_debug("Completed scan model information.")

py/utils.py

@@ -7,6 +7,7 @@ import logging
 import requests
 import traceback
 import configparser
+import functools
 
 import comfy.utils
 import folder_paths
@@ -20,6 +21,10 @@ def print_info(msg, *args, **kwargs):
     logging.info(f"[{config.extension_tag}] {msg}", *args, **kwargs)
 
 
+def print_warning(msg, *args, **kwargs):
+    logging.warning(f"[{config.extension_tag}][WARNING] {msg}", *args, **kwargs)
+
+
 def print_error(msg, *args, **kwargs):
     logging.error(f"[{config.extension_tag}] {msg}", *args, **kwargs)
     logging.debug(traceback.format_exc())
@@ -29,6 +34,18 @@ def print_debug(msg, *args, **kwargs):
     logging.debug(f"[{config.extension_tag}] {msg}", *args, **kwargs)
 
 
+def deprecated(reason: str):
+    def decorator(func):
+        @functools.wraps(func)
+        def wrapper(*args, **kwargs):
+            print_warning(f"{func.__name__} is deprecated: {reason}")
+            return func(*args, **kwargs)
+
+        return wrapper
+
+    return decorator
+
+
 def _matches(predicate: dict):
     def _filter(obj: dict):
         return all(obj.get(key, None) == value for key, value in predicate.items())
@@ -116,7 +133,11 @@ def download_web_distribution(version: str):
         print_error(f"An unexpected error occurred: {e}")
 
 
-def resolve_model_base_paths():
+def resolve_model_base_paths() -> dict[str, list[str]]:
+    """
+    Resolve model base paths.
+    eg. { "checkpoints": ["path/to/checkpoints"] }
+    """
     folders = list(folder_paths.folder_names_and_paths.keys())
     model_base_paths = {}
     folder_black_list = ["configs", "custom_nodes"]
@@ -256,10 +277,9 @@ def remove_model_preview_image(model_path: str):
         os.remove(preview_path)
 
 
-def save_model_preview_image(model_path: str, image_file_or_url: Any):
+def save_model_preview_image(model_path: str, image_file_or_url: Any, platform: str | None = None):
     basename = os.path.splitext(model_path)[0]
     preview_path = f"{basename}.webp"
-
     # Download image file if it is url
     if type(image_file_or_url) is str:
         image_url = image_file_or_url
@@ -283,8 +303,11 @@ def save_model_preview_image(model_path: str, image_file_or_url: Any):
 
         content_type: str = image_file.content_type
         if not content_type.startswith("image/"):
-            raise RuntimeError(f"FileTypeError: expected image, got {content_type}")
+            if platform == "huggingface":
-
+                # huggingface previewFile content_type='text/plain',  not startswith("image/")
+                return
+            else:
+                raise RuntimeError(f"FileTypeError: expected image, got {content_type}")
         image = Image.open(image_file.file)
         image.save(preview_path, "WEBP")
 

pyproject.toml

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

src/App.vue

@@ -7,6 +7,7 @@
 
 <script setup lang="ts">
 import DialogDownload from 'components/DialogDownload.vue'
+import DialogExplorer from 'components/DialogExplorer.vue'
 import DialogManager from 'components/DialogManager.vue'
 import GlobalDialogStack from 'components/GlobalDialogStack.vue'
 import GlobalLoading from 'components/GlobalLoading.vue'
@@ -50,7 +51,7 @@ onMounted(() => {
   }
 
   const openManagerDialog = () => {
-    const { cardWidth, gutter, aspect } = config
+    const { cardWidth, gutter, aspect, flat } = config
 
     if (firstOpenManager.value) {
       models.refresh(true)
@@ -60,7 +61,7 @@ onMounted(() => {
     dialog.open({
       key: 'model-manager',
       title: t('modelManager'),
-      content: DialogManager,
+      content: flat.value ? DialogManager : DialogExplorer,
       keepAlive: true,
       headerButtons: [
         {

src/components/DialogCreateTask.vue

@@ -66,6 +66,7 @@ import { useConfig } from 'hooks/config'
 import { useDialog } from 'hooks/dialog'
 import { useModelSearch } from 'hooks/download'
 import { useLoading } from 'hooks/loading'
+import { genModelFullName } from 'hooks/model'
 import { request } from 'hooks/request'
 import { useToast } from 'hooks/toast'
 import Button from 'primevue/button'
@@ -128,6 +129,9 @@ const createDownTask = async (data: WithResolved<VersionModel>) => {
     }
   }
 
+  const fullname = genModelFullName(data as VersionModel)
+  formData.append('fullname', fullname)
+
   await request('/model', {
     method: 'POST',
     body: formData,

src/components/DialogDownload.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex h-full flex-col gap-4">
-    <div class="whitespace-nowrap px-4" v-container="container">
+    <div ref="container" class="whitespace-nowrap px-4">
       <div :class="['flex gap-4', $sm('justify-end')]">
         <Button
           :class="[$sm('w-auto', 'w-full')]"
@@ -77,6 +77,7 @@ import { useContainerQueries } from 'hooks/container'
 import { useDialog } from 'hooks/dialog'
 import { useDownload } from 'hooks/download'
 import Button from 'primevue/button'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { data } = useDownload()
@@ -92,6 +93,6 @@ const openCreateTask = () => {
   })
 }
 
-const container = Symbol('container')
+const container = ref<HTMLElement | null>(null)
 const { $sm } = useContainerQueries(container)
 </script>

src/components/DialogExplorer.vue

@@ -0,0 +1,320 @@
+<template>
+  <div
+    class="flex h-full w-full select-none flex-col overflow-hidden"
+    @contextmenu.prevent="nonContextMenu"
+  >
+    <div class="flex w-full gap-4 overflow-hidden px-4 pb-4">
+      <div :class="['flex gap-4 overflow-hidden', showToolbar || 'flex-1']">
+        <div class="flex overflow-hidden">
+          <Button
+            icon="pi pi-arrow-up"
+            text
+            rounded
+            severity="secondary"
+            :disabled="folderPaths.length < 2"
+            @click="handleGoBackParentFolder"
+          ></Button>
+        </div>
+
+        <ResponseBreadcrumb
+          v-show="!showToolbar"
+          class="h-10 flex-1"
+          :items="folderPaths"
+          @item-click="(item, index) => openFolder(index, item.name, item.icon)"
+        ></ResponseBreadcrumb>
+      </div>
+
+      <div :class="['flex gap-4', showToolbar && 'flex-1']">
+        <ResponseInput
+          v-model="searchContent"
+          :placeholder="$t('searchModels')"
+        ></ResponseInput>
+
+        <div
+          v-show="showToolbar"
+          class="flex flex-1 items-center justify-end gap-2"
+        >
+          <ResponseSelect
+            v-model="sortOrder"
+            :items="sortOrderOptions"
+          ></ResponseSelect>
+          <ResponseSelect
+            v-model="cardSizeFlag"
+            :items="cardSizeOptions"
+          ></ResponseSelect>
+        </div>
+
+        <Button
+          :icon="`mdi mdi-menu-${showToolbar ? 'close' : 'open'}`"
+          text
+          severity="secondary"
+          @click="toggleToolbar"
+        ></Button>
+      </div>
+    </div>
+
+    <div
+      ref="contentContainer"
+      class="relative flex-1 overflow-hidden px-2"
+      @contextmenu.stop.prevent=""
+    >
+      <ResponseScroll :items="renderedList" :item-size="itemSize">
+        <template #item="{ item }">
+          <div
+            class="grid h-full justify-center"
+            :style="{
+              gridTemplateColumns: `repeat(auto-fit, ${cardSize.width}px)`,
+              columnGap: `${gutter.x}px`,
+              rowGap: `${gutter.y}px`,
+            }"
+          >
+            <ModelCard
+              :model="rowItem"
+              v-for="rowItem in item.row"
+              :key="genModelKey(rowItem)"
+              :style="{
+                width: `${cardSize.width}px`,
+                height: `${cardSize.height}px`,
+              }"
+              @dblclick="openItem(rowItem, $event)"
+              @contextmenu.stop.prevent="openItemContext(rowItem, $event)"
+            ></ModelCard>
+            <div class="col-span-full"></div>
+          </div>
+        </template>
+      </ResponseScroll>
+    </div>
+
+    <div class="flex justify-between px-4 py-2 text-sm">
+      <div></div>
+      <div></div>
+    </div>
+
+    <ContextMenu ref="menu" :model="contextItems"></ContextMenu>
+
+    <ConfirmDialog group="confirm-name">
+      <template #container="{ acceptCallback: accept, rejectCallback: reject }">
+        <div class="flex w-90 flex-col items-end rounded px-4 pb-4 pt-8">
+          <InputText
+            class="w-full"
+            type="text"
+            v-model="confirmName"
+            v-focus
+            @keyup.enter="accept"
+          ></InputText>
+          <div class="mt-6 flex items-center gap-2">
+            <Button :label="$t('cancel')" @click="reject" outlined></Button>
+            <Button :label="$t('confirm')" @click="accept"></Button>
+          </div>
+        </div>
+      </template>
+    </ConfirmDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import ModelCard from 'components/ModelCard.vue'
+import ResponseBreadcrumb from 'components/ResponseBreadcrumb.vue'
+import ResponseInput from 'components/ResponseInput.vue'
+import ResponseScroll from 'components/ResponseScroll.vue'
+import ResponseSelect from 'components/ResponseSelect.vue'
+import { useConfig } from 'hooks/config'
+import { type ModelTreeNode, useModelExplorer } from 'hooks/explorer'
+import { chunk } from 'lodash'
+import Button from 'primevue/button'
+import ConfirmDialog from 'primevue/confirmdialog'
+import ContextMenu from 'primevue/contextmenu'
+import InputText from 'primevue/inputtext'
+import { MenuItem } from 'primevue/menuitem'
+import { genModelKey } from 'utils/model'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const gutter = {
+  x: 4,
+  y: 32,
+}
+
+const { dataTreeList, folderPaths, findFolder, openFolder, openModelDetail } =
+  useModelExplorer()
+const { cardSize, cardSizeMap, cardSizeFlag, dialog: settings } = useConfig()
+
+const showToolbar = ref(false)
+const toggleToolbar = () => {
+  showToolbar.value = !showToolbar.value
+}
+
+const contentContainer = ref<HTMLElement | null>(null)
+const contentSize = useElementSize(contentContainer)
+
+const itemSize = computed(() => {
+  return cardSize.value.height + gutter.y
+})
+
+const cols = computed(() => {
+  const containerWidth = contentSize.width.value + gutter.x
+  const itemWidth = cardSize.value.width + gutter.x
+
+  return Math.floor(containerWidth / itemWidth)
+})
+
+const searchContent = ref<string>()
+
+const sortOrder = ref('name')
+const sortOrderOptions = ref(
+  ['name', 'size', 'created', 'modified'].map((key) => {
+    return {
+      label: t(`sort.${key}`),
+      value: key,
+      icon: key === 'name' ? 'pi pi-sort-alpha-down' : 'pi pi-sort-amount-down',
+      command: () => {
+        sortOrder.value = key
+      },
+    }
+  }),
+)
+
+const currentDataList = computed(() => {
+  let renderedList = dataTreeList.value
+  for (const folderItem of folderPaths.value) {
+    const found = findFolder(renderedList, folderItem.name)
+    renderedList = found?.children || []
+  }
+
+  if (searchContent.value) {
+    const filterItems: ModelTreeNode[] = []
+
+    const searchList = [...renderedList]
+
+    while (searchList.length) {
+      const item = searchList.pop()!
+      const children = (item as any).children ?? []
+      searchList.push(...children)
+
+      if (
+        item.basename
+          .toLocaleLowerCase()
+          .includes(searchContent.value.toLocaleLowerCase())
+      ) {
+        filterItems.push(item)
+      }
+    }
+
+    renderedList = filterItems
+  }
+
+  if (folderPaths.value.length > 1) {
+    const folderItems: ModelTreeNode[] = []
+    const modelItems: ModelTreeNode[] = []
+
+    for (const item of renderedList) {
+      if (item.type === 'folder') {
+        folderItems.push(item)
+      } else {
+        modelItems.push(item)
+      }
+    }
+
+    folderItems.sort((a, b) => {
+      return a.basename.localeCompare(b.basename)
+    })
+    modelItems.sort((a, b) => {
+      const sortFieldMap = {
+        name: 'basename',
+        size: 'sizeBytes',
+        created: 'createdAt',
+        modified: 'updatedAt',
+      }
+      const sortField = sortFieldMap[sortOrder.value]
+
+      const aValue = a[sortField]
+      const bValue = b[sortField]
+
+      const result =
+        typeof aValue === 'string'
+          ? aValue.localeCompare(bValue)
+          : aValue - bValue
+
+      return result
+    })
+    renderedList = [...folderItems, ...modelItems]
+  }
+
+  return renderedList
+})
+
+const renderedList = computed(() => {
+  return chunk(currentDataList.value, cols.value).map((row) => {
+    return { key: row.map((o) => o.basename).join('#'), row }
+  })
+})
+
+const cardSizeOptions = computed(() => {
+  const customSize = 'size.custom'
+
+  const customOptionMap = {
+    ...cardSizeMap.value,
+    [customSize]: 'custom',
+  }
+
+  return Object.keys(customOptionMap).map((key) => {
+    return {
+      label: t(key),
+      value: key,
+      command: () => {
+        if (key === customSize) {
+          settings.showCardSizeSetting()
+        } else {
+          cardSizeFlag.value = key
+        }
+      },
+    }
+  })
+})
+
+const menu = ref()
+const contextItems = ref<MenuItem[]>([])
+const confirmName = ref('')
+
+const openItem = (item: ModelTreeNode, e: Event) => {
+  menu.value.hide(e)
+  if (item.type === 'folder') {
+    openFolder(folderPaths.value.length, item.basename)
+  } else {
+    openModelDetail(item)
+  }
+}
+
+const openItemContext = (item: ModelTreeNode, e: Event) => {
+  if (folderPaths.value.length < 2) {
+    return
+  }
+
+  contextItems.value = [
+    {
+      label: t('open'),
+      icon: 'pi pi-folder-open',
+      command: () => {
+        openItem(item, e)
+      },
+    },
+  ]
+
+  menu.value?.show(e)
+}
+
+const nonContextMenu = (e: Event) => {
+  menu.value.hide(e)
+}
+
+const vFocus = {
+  mounted: (el: HTMLInputElement) => el.focus(),
+}
+
+const handleGoBackParentFolder = () => {
+  folderPaths.value.pop()
+}
+</script>

src/components/DialogManager.vue

@@ -1,54 +1,104 @@
 <template>
   <div
+    ref="contentContainer"
     class="flex h-full flex-col gap-4 overflow-hidden"
-    v-resize="onContainerResize"
-    v-container="contentContainer"
   >
     <div
       class="grid grid-cols-1 justify-center gap-4 px-8"
       :style="$content_lg(contentStyle)"
     >
-      <div class="col-span-full" v-container="toolbarContainer">
+      <div ref="toolbarContainer" class="col-span-full">
-        <div class="flex flex-col gap-4" :style="$toolbar_2xl(toolbarStyle)">
+        <div :class="['flex gap-4', $toolbar_2xl('flex-row', 'flex-col')]">
-          <ResponseInput
+          <div class="flex-1">
-            v-model="searchContent"
+            <ResponseInput
-            :placeholder="$t('searchModels')"
+              v-model="searchContent"
-            :allow-clear="true"
+              :placeholder="$t('searchModels')"
-            suffix-icon="pi pi-search"
+              :allow-clear="true"
-          ></ResponseInput>
+              suffix-icon="pi pi-search"
+            ></ResponseInput>
+          </div>
 
           <div class="flex items-center justify-between gap-4 overflow-hidden">
             <ResponseSelect
+              class="flex-1"
               v-model="currentType"
               :items="typeOptions"
-              :type="isMobile ? 'drop' : 'button'"
             ></ResponseSelect>
             <ResponseSelect
+              class="flex-1"
               v-model="sortOrder"
               :items="sortOrderOptions"
             ></ResponseSelect>
+            <ResponseSelect
+              class="flex-1"
+              v-model="cardSizeFlag"
+              :items="cardSizeOptions"
+            ></ResponseSelect>
           </div>
         </div>
       </div>
     </div>
 
-    <ResponseScroll
+    <ResponseScroll :items="list" :itemSize="itemSize" class="h-full flex-1">
-      ref="responseScroll"
-      :items="list"
-      :itemSize="itemSize"
-      :row-key="(item) => item.map(genModelKey).join(',')"
-      class="h-full flex-1"
-    >
       <template #item="{ item }">
         <div
           class="grid grid-cols-1 justify-center gap-8 px-8"
           :style="contentStyle"
         >
           <ModelCard
-            v-for="model in item"
+            v-for="model in item.row"
             :key="genModelKey(model)"
             :model="model"
-          ></ModelCard>
+            :style="{
+              width: `${cardSize.width}px`,
+              height: `${cardSize.height}px`,
+            }"
+            class="group/card cursor-pointer !p-0"
+            @click="openModelDetail(model)"
+            v-tooltip.top="{ value: model.basename, disabled: showModelName }"
+          >
+            <template #name>
+              <div
+                v-show="showModelName"
+                class="absolute top-0 h-full w-full p-2"
+              >
+                <div class="flex h-full flex-col justify-end text-lg">
+                  <div class="line-clamp-3 break-all font-bold text-shadow">
+                    {{ model.basename }}
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <template #extra>
+              <div
+                v-show="showModeAction"
+                class="pointer-events-none absolute right-2 top-2 opacity-0 duration-300 group-hover/card:opacity-100"
+              >
+                <div class="flex flex-col gap-2">
+                  <Button
+                    icon="pi pi-plus"
+                    severity="secondary"
+                    rounded
+                    @click.stop="addModelNode(model)"
+                  ></Button>
+                  <Button
+                    icon="pi pi-copy"
+                    severity="secondary"
+                    rounded
+                    @click.stop="copyModelNode(model)"
+                  ></Button>
+                  <Button
+                    v-show="model.preview"
+                    icon="pi pi-file-import"
+                    severity="secondary"
+                    rounded
+                    @click.stop="loadPreviewWorkflow(model)"
+                  ></Button>
+                </div>
+              </div>
+            </template>
+          </ModelCard>
           <div class="col-span-full"></div>
         </div>
       </template>
@@ -64,31 +114,44 @@
 </template>
 
 <script setup lang="ts" name="manager-dialog">
+import { useElementSize } from '@vueuse/core'
 import ModelCard from 'components/ModelCard.vue'
 import ResponseInput from 'components/ResponseInput.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
 import ResponseSelect from 'components/ResponseSelect.vue'
 import { configSetting, useConfig } from 'hooks/config'
 import { useContainerQueries } from 'hooks/container'
-import { useModels } from 'hooks/model'
+import { useModelNodeAction, useModels } from 'hooks/model'
-import { defineResizeCallback } from 'hooks/resize'
 import { chunk } from 'lodash'
+import Button from 'primevue/button'
 import { app } from 'scripts/comfyAPI'
 import { Model } from 'types/typings'
 import { genModelKey } from 'utils/model'
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-const { isMobile, cardWidth, gutter, aspect } = useConfig()
+const {
+  isMobile,
+  gutter,
+  cardSize,
+  cardSizeMap,
+  cardSizeFlag,
+  dialog: settings,
+} = useConfig()
 
-const { data, folders } = useModels()
+const { data, folders, openModelDetail } = useModels()
 const { t } = useI18n()
 
-const responseScroll = ref()
+const toolbarContainer = ref<HTMLElement | null>(null)
+const { $2xl: $toolbar_2xl } = useContainerQueries(toolbarContainer)
+
+const contentContainer = ref<HTMLElement | null>(null)
+const { $lg: $content_lg } = useContainerQueries(contentContainer)
 
 const searchContent = ref<string>()
 
-const currentType = ref('all')
+const allType = 'All'
+const currentType = ref(allType)
 const typeOptions = computed(() => {
   const excludeScanTypes = app.ui?.settings.getSettingValue<string>(
     configSetting.excludeScanTypes,
@@ -99,7 +162,7 @@ const typeOptions = computed(() => {
       .map((type) => type.trim())
       .filter(Boolean) ?? []
   return [
-    'all',
+    allType,
     ...Object.keys(folders.value).filter(
       (folder) => !customBlackList.includes(folder),
     ),
@@ -128,32 +191,39 @@ const sortOrderOptions = ref(
   }),
 )
 
-watch([searchContent, currentType], () => {
-  responseScroll.value.init()
-})
-
 const itemSize = computed(() => {
-  let itemWidth = cardWidth
+  let itemHeight = cardSize.value.height
   let itemGutter = gutter
   if (isMobile.value) {
     const baseSize = 16
-    itemWidth = window.innerWidth - baseSize * 2 * 2
+    itemHeight = window.innerWidth - baseSize * 2 * 2
     itemGutter = baseSize * 2
   }
-  return itemWidth / aspect + itemGutter
+  return itemHeight + itemGutter
 })
 
-const colSpan = ref(1)
+const { width } = useElementSize(contentContainer)
-const colSpanWidth = ref(cardWidth)
+
+const cols = computed(() => {
+  if (isMobile.value) {
+    return 1
+  }
+  const containerWidth = width.value
+  const itemWidth = cardSize.value.width
+  return Math.floor((containerWidth - gutter) / (itemWidth + gutter))
+})
 
 const list = computed(() => {
   const mergedList = Object.values(data.value).flat()
+  const pureModels = mergedList.filter((item) => {
+    return item.type !== 'folder'
+  })
 
-  const filterList = mergedList.filter((model) => {
+  const filterList = pureModels.filter((model) => {
-    const showAllModel = currentType.value === 'all'
+    const showAllModel = currentType.value === allType
 
     const matchType = showAllModel || model.type === currentType.value
-    const matchName = model.fullname
+    const matchName = model.basename
       .toLowerCase()
       .includes(searchContent.value?.toLowerCase() || '')
 
@@ -163,7 +233,7 @@ const list = computed(() => {
   let sortStrategy: (a: Model, b: Model) => number = () => 0
   switch (sortOrder.value) {
     case 'name':
-      sortStrategy = (a, b) => a.fullname.localeCompare(b.fullname)
+      sortStrategy = (a, b) => a.basename.localeCompare(b.basename)
       break
     case 'size':
       sortStrategy = (a, b) => b.sizeBytes - a.sizeBytes
@@ -180,33 +250,49 @@ const list = computed(() => {
 
   const sortedList = filterList.sort(sortStrategy)
 
-  return chunk(sortedList, colSpan.value)
+  return chunk(sortedList, cols.value).map((row) => {
+    return { key: row.map(genModelKey).join(','), row }
+  })
 })
 
-const toolbarContainer = Symbol('toolbar')
+const contentStyle = computed(() => ({
-const { $2xl: $toolbar_2xl } = useContainerQueries(toolbarContainer)
+  gridTemplateColumns: `repeat(auto-fit, ${cardSize.value.width}px)`,
-
-const contentContainer = Symbol('content')
-const { $lg: $content_lg } = useContainerQueries(contentContainer)
-
-const contentStyle = {
-  gridTemplateColumns: `repeat(auto-fit, ${cardWidth}px)`,
   gap: `${gutter}px`,
   paddingLeft: `1rem`,
   paddingRight: `1rem`,
-}
+}))
-const toolbarStyle = {
-  flexDirection: 'row',
-}
 
-const onContainerResize = defineResizeCallback((entries) => {
+const cardSizeOptions = computed(() => {
-  const entry = entries[0]
+  const customSize = 'size.custom'
-  if (isMobile.value) {
+
-    colSpan.value = 1
+  const customOptionMap = {
-  } else {
+    ...cardSizeMap.value,
-    const containerWidth = entry.contentRect.width
+    [customSize]: 'custom',
-    colSpan.value = Math.floor((containerWidth - gutter) / (cardWidth + gutter))
-    colSpanWidth.value = colSpan.value * (cardWidth + gutter) - gutter
   }
+
+  return Object.keys(customOptionMap).map((key) => {
+    return {
+      label: t(key),
+      value: key,
+      command: () => {
+        if (key === customSize) {
+          settings.showCardSizeSetting()
+        } else {
+          cardSizeFlag.value = key
+        }
+      },
+    }
+  })
 })
+
+const showModelName = computed(() => {
+  return cardSize.value.width > 120 && cardSize.value.height > 160
+})
+
+const showModeAction = computed(() => {
+  return cardSize.value.width > 120 && cardSize.value.height > 160
+})
+
+const { addModelNode, copyModelNode, loadPreviewWorkflow } =
+  useModelNodeAction()
 </script>

src/components/DialogModelDetail.vue

@@ -18,12 +18,18 @@
               icon="pi pi-eye"
               @click="openModelPage(metadata.modelPage)"
             ></Button>
-            <Button icon="pi pi-plus" @click.stop="addModelNode"></Button>
+            <Button
-            <Button icon="pi pi-copy" @click.stop="copyModelNode"></Button>
+              icon="pi pi-plus"
+              @click.stop="addModelNode(model)"
+            ></Button>
+            <Button
+              icon="pi pi-copy"
+              @click.stop="copyModelNode(model)"
+            ></Button>
             <Button
               v-show="model.preview"
               icon="pi pi-file-import"
-              @click.stop="loadPreviewWorkflow"
+              @click.stop="loadPreviewWorkflow(model)"
             ></Button>
             <Button
               icon="pi pi-pen-to-square"
@@ -44,7 +50,7 @@
 <script setup lang="ts">
 import ModelContent from 'components/ModelContent.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
-import { useModelNodeAction, useModels } from 'hooks/model'
+import { genModelUrl, useModelNodeAction, useModels } from 'hooks/model'
 import { useRequest } from 'hooks/request'
 import Button from 'primevue/button'
 import { BaseModel, Model, WithResolved } from 'types/typings'
@@ -59,7 +65,7 @@ const { remove, update } = useModels()
 
 const editable = ref(false)
 
-const modelDetailUrl = `/model/${props.model.type}/${props.model.pathIndex}/${props.model.fullname}`
+const modelDetailUrl = genModelUrl(props.model)
 const { data: extraInfo } = useRequest(modelDetailUrl, {
   method: 'GET',
 })
@@ -85,7 +91,6 @@ const openModelPage = (url: string) => {
   window.open(url, '_blank')
 }
 
-const { addModelNode, copyModelNode, loadPreviewWorkflow } = useModelNodeAction(
+const { addModelNode, copyModelNode, loadPreviewWorkflow } =
-  props.model,
+  useModelNodeAction()
-)
 </script>

src/components/GlobalDialogStack.vue

@@ -11,7 +11,8 @@
     :max-width="item.maxWidth"
     :min-height="item.minHeight"
     :max-height="item.maxHeight"
-    :z-index="index"
+    :auto-z-index="false"
+    :pt:mask:style="{ zIndex: baseZIndex - 100 + index + 1 }"
     :pt:root:onMousedown="() => rise(item)"
     @hide="() => close(item)"
   >
@@ -42,6 +43,14 @@
 import ResponseDialog from 'components/ResponseDialog.vue'
 import { useDialog } from 'hooks/dialog'
 import Button from 'primevue/button'
+import { usePrimeVue } from 'primevue/config'
+import { computed } from 'vue'
 
 const { stack, rise, close } = useDialog()
+
+const { config } = usePrimeVue()
+
+const baseZIndex = computed(() => {
+  return config.zIndex?.modal ?? 1100
+})
 </script>

src/components/ModelBaseInfo.vue

@@ -7,13 +7,60 @@
         </template>
       </ResponseSelect>
 
-      <ResponseSelect class="w-full" v-model="pathIndex" :items="pathOptions">
+      <div class="flex gap-2 overflow-hidden">
-      </ResponseSelect>
+        <div class="flex-1 overflow-hidden rounded bg-gray-500/30">
+          <div class="flex h-full items-center justify-end">
+            <span class="overflow-hidden text-ellipsis whitespace-nowrap px-2">
+              {{ renderedModelFolder }}
+            </span>
+          </div>
+        </div>
+        <Button
+          icon="pi pi-folder"
+          :disabled="!type"
+          @click="handleSelectFolder"
+        ></Button>
+
+        <Dialog
+          v-model:visible="folderSelectVisible"
+          :header="$t('folder')"
+          :auto-z-index="false"
+          :pt:mask:style="{ zIndex }"
+          :pt:root:style="{ height: '50vh', maxWidth: '50vw' }"
+          pt:content:class="flex-1"
+        >
+          <div class="flex h-full flex-col overflow-hidden">
+            <div class="flex-1 overflow-hidden">
+              <ResponseScroll>
+                <Tree
+                  class="h-full"
+                  v-model:selection-keys="modelFolder"
+                  :value="pathOptions"
+                  selectionMode="single"
+                  :pt:nodeLabel:class="'text-ellipsis overflow-hidden'"
+                ></Tree>
+              </ResponseScroll>
+            </div>
+            <div class="flex justify-end gap-2">
+              <Button
+                :label="$t('cancel')"
+                severity="secondary"
+                @click="handleCancelSelectFolder"
+              ></Button>
+              <Button
+                :label="$t('select')"
+                @click="handleConfirmSelectFolder"
+              ></Button>
+            </div>
+          </div>
+        </Dialog>
+      </div>
 
       <ResponseInput
-        v-model.trim="basename"
+        v-model.trim.valid="basename"
         class="-mr-2 text-right"
         update-trigger="blur"
+        :validate="validateBasename"
       >
         <template #suffix>
           <span class="text-base opacity-60">
@@ -48,14 +95,34 @@
 
 <script setup lang="ts">
 import ResponseInput from 'components/ResponseInput.vue'
+import ResponseScroll from 'components/ResponseScroll.vue'
 import ResponseSelect from 'components/ResponseSelect.vue'
-import { useModelBaseInfo } from 'hooks/model'
+import { useDialog } from 'hooks/dialog'
-import { computed } from 'vue'
+import { useModelBaseInfo, useModelFolder } from 'hooks/model'
+import { useToast } from 'hooks/toast'
+import Button from 'primevue/button'
+import { usePrimeVue } from 'primevue/config'
+import Dialog from 'primevue/dialog'
+import Tree from 'primevue/tree'
+import { computed, ref, watch } from 'vue'
 
 const editable = defineModel<boolean>('editable')
 
-const { baseInfo, pathIndex, basename, extension, type, modelFolders } =
+const { toast } = useToast()
-  useModelBaseInfo()
+
+const {
+  baseInfo,
+  pathIndex,
+  subFolder,
+  basename,
+  extension,
+  type,
+  modelFolders,
+} = useModelBaseInfo()
+
+watch(type, () => {
+  subFolder.value = ''
+})
 
 const typeOptions = computed(() => {
   return Object.keys(modelFolders.value).map((curr) => {
@@ -70,25 +137,104 @@ const typeOptions = computed(() => {
   })
 })
 
-const pathOptions = computed(() => {
-  return (modelFolders.value[type.value] ?? []).map((folder, index) => {
-    return {
-      value: index,
-      label: folder,
-      command: () => {
-        pathIndex.value = index
-      },
-    }
-  })
-})
-
 const information = computed(() => {
   return Object.values(baseInfo.value).filter((row) => {
     if (editable.value) {
-      const hiddenKeys = ['fullname', 'pathIndex']
+      const hiddenKeys = ['basename', 'pathIndex']
       return !hiddenKeys.includes(row.key)
     }
     return true
   })
 })
+
+const validateBasename = (val: string | undefined) => {
+  if (!val) {
+    toast.add({
+      severity: 'error',
+      detail: 'basename is required',
+      life: 3000,
+    })
+    return false
+  }
+  const invalidChart = /[\\/:*?"<>|]/
+  if (invalidChart.test(val)) {
+    toast.add({
+      severity: 'error',
+      detail: 'basename is invalid, \\/:*?"<>|',
+      life: 3000,
+    })
+    return false
+  }
+  return true
+}
+
+const folderSelectVisible = ref(false)
+
+const { stack } = useDialog()
+const { config } = usePrimeVue()
+const zIndex = computed(() => {
+  const baseZIndex = config.zIndex?.modal ?? 1100
+  return baseZIndex + stack.value.length + 1
+})
+
+const handleSelectFolder = () => {
+  if (!type.value) {
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Please select model type first',
+      life: 5000,
+    })
+    return
+  }
+  folderSelectVisible.value = true
+}
+
+const { pathOptions } = useModelFolder({ type })
+
+const selectedModelFolder = ref<string>()
+
+const modelFolder = computed({
+  get: () => {
+    const folderPath = baseInfo.value.pathIndex.display
+    const selectedKey = selectedModelFolder.value ?? folderPath
+    return { [selectedKey]: true }
+  },
+  set: (val) => {
+    const folderPath = Object.keys(val)[0]
+    selectedModelFolder.value = folderPath
+  },
+})
+
+const renderedModelFolder = computed(() => {
+  return baseInfo.value.pathIndex?.display
+})
+
+const handleCancelSelectFolder = () => {
+  selectedModelFolder.value = undefined
+  folderSelectVisible.value = false
+}
+
+const handleConfirmSelectFolder = () => {
+  const folderPath = Object.keys(modelFolder.value)[0]
+
+  const folders = modelFolders.value[type.value]
+  pathIndex.value = folders.findIndex((item) => folderPath.includes(item))
+  if (pathIndex.value < 0) {
+    toast.add({
+      severity: 'error',
+      detail: 'Folder not found',
+      life: 3000,
+    })
+    return
+  }
+  const prefixPath = folders[pathIndex.value]
+  subFolder.value = folderPath.replace(prefixPath, '')
+  if (subFolder.value.startsWith('/')) {
+    subFolder.value = subFolder.value.replace('/', '')
+  }
+
+  selectedModelFolder.value = undefined
+  folderSelectVisible.value = false
+}
 </script>

src/components/ModelCard.vue

@@ -1,112 +1,94 @@
 <template>
   <div
-    class="group/card relative w-full cursor-pointer select-none preview-aspect"
+    ref="container"
-    @click.stop="openDetailDialog"
+    class="relative h-full select-none rounded-lg hover:bg-gray-500/40"
   >
-    <div class="h-full overflow-hidden rounded-lg">
+    <div data-card-main class="flex h-full w-full flex-col">
-      <div class="h-full bg-gray-500 duration-300 group-hover/card:scale-110">
+      <div data-card-preview class="flex-1 overflow-hidden">
-        <img class="h-full w-full object-cover" :src="preview" />
+        <div v-if="model.type === 'folder'" class="h-full w-full">
+          <svg
+            class="icon"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            width="100%"
+            height="100%"
+          >
+            <path
+              d="M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z"
+              fill="#FFA000"
+            ></path>
+            <path
+              d="M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z"
+              fill="#FFCA28"
+            ></path>
+          </svg>
+        </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>
       </div>
+
+      <slot name="name">
+        <div class="flex justify-center overflow-hidden px-1">
+          <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+            {{ model.basename }}
+          </span>
+        </div>
+      </slot>
     </div>
 
     <div
+      v-if="model.type !== 'folder'"
       data-draggable-overlay
       class="absolute left-0 top-0 h-full w-full"
       draggable="true"
-      @dragend.stop="dragToAddModelNode"
+      @dragend.stop="dragToAddModelNode(model, $event)"
     ></div>
 
-    <div class="pointer-events-none absolute left-0 top-0 h-full w-full p-4">
+    <div
-      <div class="relative h-full w-full text-white">
+      v-if="model.type !== 'folder'"
-        <div class="absolute bottom-0 left-0">
+      data-mode-type
-          <div class="drop-shadow-[0px_2px_2px_rgba(0,0,0,0.75)]">
+      class="pointer-events-none absolute left-2 top-2"
-            <div
+      :style="{
-              :class="[
+        transform: `scale(${typeLabelScale})`,
-                'line-clamp-3 break-all font-bold',
+        transformOrigin: 'left top',
-                $lg('text-lg', 'text-2xl'),
+      }"
-              ]"
+    >
-            >
+      <div class="rounded-full bg-black/50 px-3 py-1">
-              {{ model.basename }}
+        <span>{{ model.type }}</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="absolute left-0 top-0 w-full">
-          <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')]">
-                {{ model.type }}
-              </div>
-            </div>
-
-            <div class="opacity-0 duration-300 group-hover/card:opacity-100">
-              <div class="flex flex-col gap-4 *:pointer-events-auto">
-                <Button
-                  icon="pi pi-plus"
-                  severity="secondary"
-                  rounded
-                  @click.stop="addModelNode"
-                ></Button>
-                <Button
-                  icon="pi pi-copy"
-                  severity="secondary"
-                  rounded
-                  @click.stop="copyModelNode"
-                ></Button>
-                <Button
-                  v-show="model.preview"
-                  icon="pi pi-file-import"
-                  severity="secondary"
-                  rounded
-                  @click.stop="loadPreviewWorkflow"
-                ></Button>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
+
+    <slot name="extra"></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import DialogModelDetail from 'components/DialogModelDetail.vue'
+import { useElementSize } from '@vueuse/core'
-import { useContainerQueries } from 'hooks/container'
-import { useDialog } from 'hooks/dialog'
 import { useModelNodeAction } from 'hooks/model'
-import Button from 'primevue/button'
+import { BaseModel } from 'types/typings'
-import { Model } from 'types/typings'
+import { computed, ref } from 'vue'
-import { genModelKey } from 'utils/model'
-import { computed } from 'vue'
 
 interface Props {
-  model: Model
+  model: BaseModel
 }
 
 const props = defineProps<Props>()
 
-const dialog = useDialog()
-
-const openDetailDialog = () => {
-  const basename = props.model.fullname.split('/').pop()!
-  const filename = basename.replace(props.model.extension, '')
-
-  dialog.open({
-    key: genModelKey(props.model),
-    title: filename,
-    content: DialogModelDetail,
-    contentProps: { model: props.model },
-  })
-}
-
 const preview = computed(() =>
   Array.isArray(props.model.preview)
     ? props.model.preview[0]
     : props.model.preview,
 )
 
-const { addModelNode, dragToAddModelNode, copyModelNode, loadPreviewWorkflow } =
+const container = ref<HTMLElement | null>(null)
-  useModelNodeAction(props.model)
 
-const { $lg } = useContainerQueries()
+const { width } = useElementSize(container)
+
+const typeLabelScale = computed(() => {
+  return width.value / 200
+})
+
+const { dragToAddModelNode } = useModelNodeAction()
 </script>

src/components/ModelContent.vue

@@ -1,8 +1,8 @@
 <template>
   <form
+    ref="container"
     @submit.prevent="handleSubmit"
     @reset.prevent="handleReset"
-    v-container="container"
   >
     <div class="mx-auto w-full max-w-[50rem]">
       <div
@@ -63,7 +63,7 @@ import TabPanel from 'primevue/tabpanel'
 import TabPanels from 'primevue/tabpanels'
 import Tabs from 'primevue/tabs'
 import { BaseModel, WithResolved } from 'types/typings'
-import { toRaw, watch } from 'vue'
+import { ref, toRaw, watch } from 'vue'
 
 interface Props {
   model: BaseModel
@@ -101,6 +101,6 @@ watch(
   },
 )
 
-const container = Symbol('container')
+const container = ref<HTMLElement | null>(null)
 const { $xl } = useContainerQueries(container)
 </script>

src/components/ResponseBreadcrumb.vue

@@ -0,0 +1,163 @@
+<template>
+  <div ref="container" class="breadcrumb-container">
+    <div v-if="firstItem" class="breadcrumb-item">
+      <span class="breadcrumb-label" @click="firstItem.onClick">
+        <i v-if="firstItem.icon" :class="firstItem.icon"></i>
+        <i v-else class="breadcrumb-name">{{ firstItem.name }}</i>
+      </span>
+      <ResponseSelect
+        v-if="!!firstItem.children?.length"
+        :items="firstItem.children"
+      >
+        <template #target="{ toggle, overlayVisible }">
+          <span class="breadcrumb-split" @click="toggle">
+            <i
+              class="pi pi-angle-right transition-all"
+              :style="{ transform: overlayVisible ? 'rotate(90deg)' : '' }"
+            ></i>
+          </span>
+        </template>
+      </ResponseSelect>
+    </div>
+
+    <div v-if="!!renderedItems.collapsed.length" class="breadcrumb-item">
+      <ResponseSelect :items="renderedItems.collapsed">
+        <template #target="{ toggle }">
+          <span class="breadcrumb-split" @click="toggle">
+            <i class="pi pi-ellipsis-h"></i>
+          </span>
+        </template>
+      </ResponseSelect>
+    </div>
+
+    <div
+      v-for="(item, index) in renderedItems.tail"
+      :key="`${index}-${item.name}`"
+      class="breadcrumb-item"
+    >
+      <span class="breadcrumb-label" @click="item.onClick">
+        <i v-if="item.icon" :class="item.icon"></i>
+        <i v-else class="breadcrumb-name">{{ item.name }}</i>
+      </span>
+      <ResponseSelect v-if="!!item.children?.length" :items="item.children">
+        <template #target="{ toggle, overlayVisible }">
+          <span class="breadcrumb-split" @click="toggle">
+            <i
+              class="pi pi-angle-right transition-all"
+              :style="{ transform: overlayVisible ? 'rotate(90deg)' : '' }"
+            ></i>
+          </span>
+        </template>
+      </ResponseSelect>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import ResponseSelect from 'components/ResponseSelect.vue'
+import { SelectOptions } from 'types/typings'
+import { computed, ref } from 'vue'
+
+interface BreadcrumbItem {
+  name: string
+  icon?: string
+  onClick?: () => void
+  children?: SelectOptions[]
+}
+
+interface Props {
+  items: BreadcrumbItem[]
+}
+
+const props = defineProps<Props>()
+
+const container = ref<HTMLElement | null>(null)
+const { width } = useElementSize(container)
+
+const firstItem = computed<BreadcrumbItem | null>(() => {
+  return props.items[0]
+})
+
+const renderedItems = computed(() => {
+  const [, ...items] = props.items
+
+  const lastItem = items.pop()
+  items.reverse()
+
+  const separatorWidth = 32
+  const calculateItemWidth = (item: BreadcrumbItem | undefined) => {
+    if (!item) {
+      return 0
+    }
+
+    const canvas = document.createElement('canvas')
+    const context = canvas.getContext('2d')!
+    context.font = '16px Arial'
+
+    const text = item.name
+    return context.measureText(text).width + 16 + separatorWidth
+  }
+
+  const firstItemEL = container.value?.querySelector('div')
+  const firstItemWidth = firstItemEL?.getBoundingClientRect().width ?? 0
+
+  const lastItemWidth = calculateItemWidth(lastItem)
+
+  const collapseWidth = separatorWidth
+
+  let totalWidth = firstItemWidth + collapseWidth + lastItemWidth
+  const containerWidth = width.value - 18
+  const collapsed: SelectOptions[] = []
+  const tail: BreadcrumbItem[] = []
+
+  for (const item of items) {
+    const itemWidth = calculateItemWidth(item)
+    totalWidth += itemWidth
+
+    if (totalWidth < containerWidth) {
+      tail.unshift(item)
+    } else {
+      collapsed.unshift({
+        value: item.name,
+        label: item.name,
+        command: () => {
+          item.onClick?.()
+        },
+      })
+    }
+  }
+
+  if (lastItem) {
+    tail.push(lastItem)
+  }
+
+  return { collapsed, tail }
+})
+</script>
+
+<style scoped>
+.breadcrumb-container {
+  @apply flex overflow-hidden rounded-lg bg-gray-500/30 px-2 py-1;
+}
+
+.breadcrumb-item {
+  @apply flex h-full overflow-hidden rounded border border-transparent hover:border-gray-500/30;
+}
+
+.breadcrumb-item:nth-of-type(-n + 2) {
+  @apply flex-shrink-0;
+}
+
+.breadcrumb-label {
+  @apply flex h-full min-w-8 items-center overflow-hidden px-2 hover:bg-gray-500/30;
+}
+
+.breadcrumb-name {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap not-italic;
+}
+
+.breadcrumb-split {
+  @apply flex aspect-square h-full min-w-8 items-center justify-center hover:bg-gray-500/30;
+}
+</style>

src/components/ResponseDialog.vue

@@ -9,7 +9,7 @@
     minimizeIcon="pi pi-arrow-down-left-and-arrow-up-right-to-center"
     :pt:mask:class="['group', { open: visible }]"
     :pt:root:class="['max-h-full group-[:not(.open)]:!hidden', $style.dialog]"
-    pt:content:class="px-0 flex-1"
+    pt:content:class="p-0 flex-1"
     :base-z-index="1000"
     :auto-z-index="isNil(zIndex)"
     :pt:mask:style="isNil(zIndex) ? {} : { zIndex: 1000 + zIndex }"

src/components/ResponseInput.vue

@@ -14,7 +14,7 @@
 
     <input
       ref="inputRef"
-      v-model="innerValue"
+      v-model="inputValue"
       class="flex-1 border-none bg-transparent text-base outline-none"
       type="text"
       :placeholder="placeholder"
@@ -47,22 +47,40 @@ interface Props {
   placeholder?: string
   allowClear?: boolean
   updateTrigger?: string
+  validate?: (value: string | undefined) => boolean
 }
 
 const props = defineProps<Props>()
-const [content, modifiers] = defineModel<string, 'trim'>()
+const [content, modifiers] = defineModel<string, 'trim' | 'valid'>()
 
 const inputRef = ref()
 
-const innerValue = ref(content)
+const innerValue = ref<string>()
+const inputValue = computed({
+  get: () => {
+    return innerValue.value ?? content.value
+  },
+  set: (val) => {
+    innerValue.value = val
+  },
+})
 const trigger = computed(() => props.updateTrigger ?? 'change')
 const updateContent = () => {
-  let value = innerValue.value
+  let value = inputValue.value
 
   if (modifiers.trim) {
-    value = innerValue.value?.trim()
+    value = value?.trim()
   }
 
+  if (modifiers.valid) {
+    const isValid = props.validate?.(value) ?? true
+    if (!isValid) {
+      innerValue.value = content.value
+      return
+    }
+  }
+
+  innerValue.value = undefined
   content.value = value
   inputRef.value.value = value
 }

src/components/ResponseScroll.vue

@@ -1,316 +1,140 @@
 <template>
-  <div data-scroll-area class="group/scroll relative overflow-hidden">
+  <div class="group/scroll relative h-full overflow-hidden">
-    <div
+    <div ref="viewport" class="h-full w-full overflow-auto scrollbar-none">
-      ref="viewport"
+      <div ref="content">
-      data-scroll-viewport
-      class="h-full w-full overflow-auto scrollbar-none"
-      :style="{ contain: items ? 'strict' : undefined }"
-      @scroll="onContentScroll"
-      v-resize="onContainerResize"
-    >
-      <div data-scroll-content class="relative min-w-full">
         <slot name="default">
-          <div
+          <slot v-if="renderedItems.length === 0" name="empty">
-            v-for="(item, index) in loadedItems"
-            :key="genRowKey(item, index)"
-            :style="{ height: `${itemSize}px` }"
-          >
-            <slot name="item" :item="item"></slot>
-          </div>
-          <slot v-if="loadedItems.length === 0" name="empty">
             <div class="absolute w-full py-20 text-center">No Data</div>
           </slot>
+
+          <div :style="{ height: `${headHeight}px` }"></div>
+          <div>
+            <div
+              v-for="item in renderedItems"
+              :key="item.key"
+              :style="{ height: `${itemSize}px` }"
+              data-virtual-item
+            >
+              <slot name="item" :item="item"></slot>
+            </div>
+          </div>
+          <div :style="{ height: `${tailHeight}px` }"></div>
         </slot>
       </div>
-
-      <div
-        data-scroll-space
-        class="pointer-events-none absolute left-0 top-0 h-px w-px"
-        :style="spaceStyle"
-      ></div>
     </div>
 
-    <div
+    <div ref="scroll" class="absolute right-0 top-0 h-full w-2">
-      v-for="scroll in scrollbars"
-      :key="scroll.direction"
-      v-show="scroll.visible"
-      v-bind="{ [`data-scroll-bar-${scroll.direction}`]: '' }"
-      :class="[
-        'pointer-events-none absolute z-auto h-full w-full rounded-full',
-        'data-[scroll-bar-horizontal]:bottom-0 data-[scroll-bar-horizontal]:left-0 data-[scroll-bar-horizontal]:h-2',
-        'data-[scroll-bar-vertical]:right-0 data-[scroll-bar-vertical]:top-0 data-[scroll-bar-vertical]:w-2',
-      ]"
-    >
       <div
-        v-bind="{ ['data-scroll-thumb']: scroll.direction }"
+        ref="thumb"
         :class="[
-          'pointer-events-auto absolute h-full w-full rounded-full',
+          'absolute w-full cursor-pointer rounded-full bg-gray-500',
-          'cursor-pointer bg-black dark:bg-white',
+          'opacity-0 transition-opacity duration-300 group-hover/scroll:opacity-30',
-          'opacity-0 transition-opacity duration-300 group-hover/scroll:opacity-10',
         ]"
         :style="{
-          [scrollbarAttrs[scroll.direction].size]: `${scroll.size}px`,
+          height: `${thumbSize}px`,
-          [scrollbarAttrs[scroll.direction].offset]: `${scroll.offset}px`,
+          top: `${thumbOffset}px`,
-          opacity: isDragging ? 0.1 : '',
+          opacity: isDragging ? '0.3' : undefined,
         }"
-        @mousedown="startDragThumb"
       ></div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts" generic="T">
+<script setup lang="ts" generic="T extends { key: string }">
-import { defineResizeCallback } from 'hooks/resize'
+import { useDraggable, useElementSize, useScroll } from '@vueuse/core'
-import { clamp, throttle } from 'lodash'
+import { clamp } from 'lodash'
-import { nextTick, onUnmounted, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 
 interface ScrollAreaProps {
-  items?: T[][]
+  items?: T[]
   itemSize?: number
-  scrollbar?: boolean
-  rowKey?: string | ((item: T[]) => string)
 }
 
-const props = withDefaults(defineProps<ScrollAreaProps>(), {
+const props = defineProps<ScrollAreaProps>()
-  scrollbar: true,
-})
-const emit = defineEmits(['scroll', 'resize'])
 
-type ScrollbarDirection = 'horizontal' | 'vertical'
+const viewport = ref<HTMLElement | null>(null)
+const content = ref<HTMLElement | null>(null)
 
-interface Scrollbar {
+const { height: viewportHeight } = useElementSize(viewport)
-  direction: ScrollbarDirection
+const { height: contentHeight } = useElementSize(content)
-  visible: boolean
+const { y: scrollY } = useScroll(viewport)
-  size: number
-  offset: number
-}
 
-interface ScrollbarAttribute {
+const itemSize = computed(() => props.itemSize || 0)
-  clientSize: string
-  scrollOffset: string
-  pagePosition: string
-  offset: string
-  size: string
-}
 
-const scrollbarAttrs: Record<ScrollbarDirection, ScrollbarAttribute> = {
+const viewRows = computed(() =>
-  horizontal: {
+  Math.ceil(viewportHeight.value / itemSize.value),
-    clientSize: 'clientWidth',
-    scrollOffset: 'scrollLeft',
-    pagePosition: 'pageX',
-    offset: 'left',
-    size: 'width',
-  },
-  vertical: {
-    clientSize: 'clientHeight',
-    scrollOffset: 'scrollTop',
-    pagePosition: 'pageY',
-    offset: 'top',
-    size: 'height',
-  },
-}
-
-const scrollbars = ref<Record<ScrollbarDirection, Scrollbar>>({
-  horizontal: {
-    direction: 'horizontal',
-    visible: props.scrollbar,
-    size: 0,
-    offset: 0,
-  },
-  vertical: {
-    direction: 'vertical',
-    visible: props.scrollbar,
-    size: 0,
-    offset: 0,
-  },
-})
-
-const isDragging = ref(false)
-
-const spaceStyle = ref({})
-const loadedItems = ref<T[][]>([])
-
-const genRowKey = (item: any | any[], index: number) => {
-  if (typeof props.rowKey === 'function') {
-    return props.rowKey(item)
-  }
-  return item[props.rowKey ?? 'key'] ?? index
-}
-
-const setSpacerSize = () => {
-  const items = props.items
-  if (items) {
-    const itemSize = props.itemSize ?? 0
-    spaceStyle.value = { height: `${itemSize * items.length}px` }
-  } else {
-    spaceStyle.value = {}
-  }
-}
-
-const getContainerContent = (raw?: boolean): HTMLElement => {
-  const container = viewport.value as HTMLElement
-
-  if (props.items && !raw) {
-    return container.querySelector('[data-scroll-space]')!
-  }
-  return container.querySelector('[data-scroll-content]')!
-}
-
-const init = () => {
-  const container = viewport.value as HTMLElement
-  container.scrollTop = 0
-  getContainerContent().style.transform = ''
-}
-
-const calculateLoadItems = () => {
-  let visibleItems: any[] = []
-
-  if (props.items) {
-    const container = viewport.value as HTMLElement
-    const content = getContainerContent(true)
-
-    const resolveVisibleItems = (items: any[], attr: ScrollbarAttribute) => {
-      const containerSize = container[attr.clientSize]
-      const itemSize = props.itemSize!
-      const viewCount = Math.ceil(containerSize / itemSize)
-
-      let start = Math.floor(container[attr.scrollOffset] / itemSize)
-      const offset = start * itemSize
-
-      let end = start + viewCount
-      end = Math.min(end + viewCount, items.length)
-
-      content.style.transform = `translateY(${offset}px)`
-      return items.slice(start, end)
-    }
-
-    visibleItems = resolveVisibleItems(props.items, scrollbarAttrs.vertical)
-  }
-
-  loadedItems.value = visibleItems
-}
-
-const calculateScrollThumbSize = () => {
-  const container = viewport.value as HTMLElement
-  const content = getContainerContent()
-
-  const resolveScrollbarSize = (item: Scrollbar, attr: ScrollbarAttribute) => {
-    const containerSize: number = container[attr.clientSize]
-    const contentSize: number = content[attr.clientSize]
-    item.visible = props.scrollbar && contentSize > containerSize
-    item.size = Math.max(Math.pow(containerSize, 2) / contentSize, 16)
-  }
-
-  nextTick(() => {
-    resolveScrollbarSize(scrollbars.value.horizontal, scrollbarAttrs.horizontal)
-    resolveScrollbarSize(scrollbars.value.vertical, scrollbarAttrs.vertical)
-  })
-}
-
-const onContainerResize = defineResizeCallback((entries) => {
-  emit('resize', entries)
-  if (isDragging.value) return
-
-  calculateScrollThumbSize()
-})
-
-const onContentScroll = throttle((event: Event) => {
-  emit('scroll', event)
-  if (isDragging.value) return
-
-  const container = event.target as HTMLDivElement
-  const content = getContainerContent()
-
-  const resolveOffset = (item: Scrollbar, attr: ScrollbarAttribute) => {
-    const containerSize = container[attr.clientSize]
-    const contentSize = content[attr.clientSize]
-    const scrollOffset = container[attr.scrollOffset]
-
-    item.offset =
-      (scrollOffset / (contentSize - containerSize)) *
-      (containerSize - item.size)
-  }
-
-  resolveOffset(scrollbars.value.horizontal, scrollbarAttrs.horizontal)
-  resolveOffset(scrollbars.value.vertical, scrollbarAttrs.vertical)
-
-  calculateLoadItems()
-})
-
-const viewport = ref<HTMLElement>()
-const draggingDirection = ref<ScrollbarDirection>()
-const prevDraggingEvent = ref<MouseEvent>()
-
-const moveThumb = throttle((event: MouseEvent) => {
-  if (isDragging.value) {
-    const container = viewport.value!
-    const content = getContainerContent()
-
-    const resolveOffset = (item: Scrollbar, attr: ScrollbarAttribute) => {
-      const containerSize = container[attr.clientSize]
-      const contentSize = content[attr.clientSize]
-
-      // Resolve thumb position
-      const prevPagePos = prevDraggingEvent.value![attr.pagePosition]
-      const currPagePos = event[attr.pagePosition]
-      const offset = currPagePos - prevPagePos
-      item.offset = clamp(item.offset + offset, 0, containerSize - item.size)
-
-      // Resolve scroll position
-      const scrollOffset = containerSize - item.size
-      const offsetSize = contentSize - containerSize
-
-      container[attr.scrollOffset] = (item.offset / scrollOffset) * offsetSize
-    }
-
-    const scrollDirection = draggingDirection.value!
-
-    resolveOffset(
-      scrollbars.value[scrollDirection],
-      scrollbarAttrs[scrollDirection],
-    )
-    prevDraggingEvent.value = event
-
-    calculateLoadItems()
-  }
-})
-
-const stopMoveThumb = () => {
-  isDragging.value = false
-  draggingDirection.value = undefined
-  prevDraggingEvent.value = undefined
-  document.removeEventListener('mousemove', moveThumb)
-  document.removeEventListener('mouseup', stopMoveThumb)
-  document.body.style.userSelect = ''
-  document.body.style.cursor = ''
-}
-
-const startDragThumb = (event: MouseEvent) => {
-  isDragging.value = true
-  const target = event.target as HTMLElement
-  draggingDirection.value = <any>target.getAttribute('data-scroll-thumb')
-  prevDraggingEvent.value = event
-  document.addEventListener('mousemove', moveThumb)
-  document.addEventListener('mouseup', stopMoveThumb)
-  document.body.style.userSelect = 'none'
-  document.body.style.cursor = 'default'
-}
-
-watch(
-  () => props.items,
-  () => {
-    setSpacerSize()
-    calculateScrollThumbSize()
-    calculateLoadItems()
-  },
 )
+const offsetRows = computed(() => Math.floor(scrollY.value / itemSize.value))
 
-onUnmounted(() => {
+const items = computed(() => {
-  stopMoveThumb()
+  return props.items ?? []
 })
 
-defineExpose({
+const state = computed(() => {
-  viewport,
+  const bufferRows = viewRows.value
-  init,
+
+  const fromRow = offsetRows.value - bufferRows
+  const toRow = offsetRows.value + bufferRows + viewRows.value
+
+  const itemCount = items.value.length
+
+  return {
+    start: clamp(fromRow, 0, itemCount),
+    end: clamp(toRow, fromRow, itemCount),
+  }
+})
+
+const renderedItems = computed(() => {
+  const { start, end } = state.value
+
+  return props.items?.slice(start, end) ?? []
+})
+
+const headHeight = computed(() => {
+  return state.value.start * itemSize.value
+})
+
+const tailHeight = computed(() => {
+  return (items.value.length - state.value.end) * itemSize.value
+})
+
+const thumbSize = computed(() => {
+  if (viewportHeight.value >= contentHeight.value) {
+    return 0
+  }
+
+  const thumbHeight = Math.pow(viewportHeight.value, 2) / contentHeight.value
+  return Math.max(thumbHeight, 16)
+})
+
+const thumbOffset = computed({
+  get: () => {
+    return (
+      (scrollY.value / (contentHeight.value - viewportHeight.value)) *
+      (viewportHeight.value - thumbSize.value)
+    )
+  },
+  set: (offset) => {
+    scrollY.value =
+      (offset / (viewportHeight.value - thumbSize.value)) *
+      (contentHeight.value - viewportHeight.value)
+  },
+})
+
+const scroll = ref<HTMLElement | null>(null)
+const thumb = ref<HTMLElement | null>(null)
+
+const { isDragging } = useDraggable(thumb, {
+  axis: 'y',
+  containerElement: scroll,
+  onStart: () => {
+    document.body.style.userSelect = 'none'
+  },
+  onMove: (position) => {
+    thumbOffset.value = position.y
+  },
+  onEnd: () => {
+    document.body.style.userSelect = ''
+  },
 })
 </script>

src/components/ResponseSelect.vue

@@ -2,7 +2,14 @@
   <slot
     v-if="type === 'drop'"
     name="target"
-    v-bind="{ toggle, prefixIcon, suffixIcon, currentLabel, current }"
+    v-bind="{
+      toggle,
+      prefixIcon,
+      suffixIcon,
+      currentLabel,
+      current,
+      overlayVisible,
+    }"
   >
     <div :class="['-my-1 py-1', $attrs.class]" @click="toggle">
       <Button
@@ -27,12 +34,7 @@
   </slot>
 
   <div v-else class="relative flex-1 overflow-hidden">
-    <div
+    <div ref="scrollArea" class="h-full w-full overflow-auto scrollbar-none">
-      ref="scrollArea"
-      class="h-full w-full overflow-auto scrollbar-none"
-      v-resize="checkScrollPosition"
-      @scroll="checkScrollPosition"
-    >
       <div ref="contentArea" class="table max-w-full">
         <div
           v-show="showControlButton && scrollPosition !== 'left'"
@@ -156,12 +158,13 @@
 </template>
 
 <script setup lang="ts">
+import { useElementSize, useScroll } from '@vueuse/core'
 import { useConfig } from 'hooks/config'
 import Button, { ButtonProps } from 'primevue/button'
 import Drawer from 'primevue/drawer'
 import Menu from 'primevue/menu'
 import { SelectOptions } from 'types/typings'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const current = defineModel()
 
@@ -201,8 +204,12 @@ const toggle = (event: MouseEvent) => {
   }
 }
 
+const overlayVisible = computed(() => {
+  return isMobile.value ? visible.value : (menu.value?.overlayVisible ?? false)
+})
+
 // Select Button Type
-const scrollArea = ref()
+const scrollArea = ref<HTMLElement | null>(null)
 const contentArea = ref()
 
 type ScrollPosition = 'left' | 'right'
@@ -242,4 +249,16 @@ const checkScrollPosition = () => {
   scrollPosition.value = position
   showControlButton.value = contentWidth > containerWidth
 }
+
+const { width, height } = useElementSize(scrollArea)
+
+watch([width, height], () => {
+  checkScrollPosition()
+})
+
+useScroll(scrollArea, {
+  onScroll: () => {
+    checkScrollPosition()
+  },
+})
 </script>

src/components/SettingCardSize.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="flex h-full flex-col">
+    <div class="flex-1 px-4">
+      <DataTable :value="sizeList">
+        <Column field="name" :header="$t('name')">
+          <template #body="{ data, field }">
+            {{ $t(data[field]) }}
+          </template>
+        </Column>
+        <Column field="width" :header="$t('width')" class="min-w-36">
+          <template #body="{ data, field }">
+            <span class="flex items-center gap-4">
+              <Slider
+                v-model="data[field]"
+                class="flex-1"
+                v-bind="sizeStint"
+              ></Slider>
+              <span>{{ data[field] }}</span>
+            </span>
+          </template>
+        </Column>
+        <Column field="height" :header="$t('height')" class="min-w-36">
+          <template #body="{ data, field }">
+            <span class="flex items-center gap-4">
+              <Slider
+                v-model="data[field]"
+                class="flex-1"
+                v-bind="sizeStint"
+              ></Slider>
+              <span>{{ data[field] }}</span>
+            </span>
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+    <div class="flex justify-between px-4">
+      <div></div>
+      <div class="flex gap-2">
+        <Button
+          icon="pi pi-refresh"
+          :label="$t('reset')"
+          @click="handleReset"
+        ></Button>
+        <Button :label="$t('cancel')" @click="handleCancelEditor"></Button>
+        <Button :label="$t('save')" @click="handleSaveSizeMap"></Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useConfig } from 'hooks/config'
+import { useDialog } from 'hooks/dialog'
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+import Slider from 'primevue/slider'
+import { onMounted, ref } from 'vue'
+
+const { cardSizeMap, defaultCardSizeMap } = useConfig()
+const dialog = useDialog()
+
+const sizeList = ref()
+
+const sizeStint = {
+  step: 10,
+  min: 80,
+  max: 320,
+}
+
+const resolveSizeMap = (sizeMap: Record<string, string>) => {
+  return Object.entries(sizeMap).map(([key, value]) => {
+    const [width, height] = value.split('x')
+    return {
+      id: key,
+      name: key,
+      width: parseInt(width),
+      height: parseInt(height),
+    }
+  })
+}
+
+const resolveSizeList = (
+  sizeList: { name: string; width: number; height: number }[],
+) => {
+  return Object.fromEntries(
+    sizeList.map(({ name, width, height }) => {
+      return [name, [width, height].join('x')]
+    }),
+  )
+}
+
+onMounted(() => {
+  sizeList.value = resolveSizeMap(cardSizeMap.value)
+})
+
+const handleReset = () => {
+  sizeList.value = resolveSizeMap(defaultCardSizeMap)
+}
+
+const handleCancelEditor = () => {
+  sizeList.value = resolveSizeMap(cardSizeMap.value)
+  dialog.close()
+}
+
+const handleSaveSizeMap = () => {
+  cardSizeMap.value = resolveSizeList(sizeList.value)
+  dialog.close()
+}
+</script>

src/hooks/config.ts

@@ -1,11 +1,14 @@
+import SettingCardSize from 'components/SettingCardSize.vue'
 import { request } from 'hooks/request'
 import { defineStore } from 'hooks/store'
 import { $el, app, ComfyDialog } from 'scripts/comfyAPI'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, readonly, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useToast } from './toast'
 
 export const useConfig = defineStore('config', (store) => {
+  const { t } = useI18n()
+
   const mobileDeviceBreakPoint = 759
   const isMobile = ref(window.innerWidth < mobileDeviceBreakPoint)
 
@@ -21,13 +24,62 @@ export const useConfig = defineStore('config', (store) => {
     window.removeEventListener('resize', checkDeviceType)
   })
 
+  const flatLayout = ref(false)
+
+  const defaultCardSizeMap = readonly({
+    'size.extraLarge': '240x320',
+    'size.large': '180x240',
+    'size.medium': '120x160',
+    'size.small': '80x120',
+  })
+
+  const cardSizeMap = ref<Record<string, string>>({ ...defaultCardSizeMap })
+  const cardSizeFlag = ref('size.extraLarge')
+  const cardSize = computed(() => {
+    const size = cardSizeMap.value[cardSizeFlag.value]
+    const [width = '120', height = '240'] = size.split('x')
+    return {
+      width: parseInt(width),
+      height: parseInt(height),
+    }
+  })
+
   const config = {
     isMobile,
     gutter: 16,
+    defaultCardSizeMap: defaultCardSizeMap,
+    cardSizeMap: cardSizeMap,
+    cardSizeFlag: cardSizeFlag,
+    cardSize: cardSize,
     cardWidth: 240,
     aspect: 7 / 9,
+    dialog: {
+      showCardSizeSetting: () => {
+        store.dialog.open({
+          key: 'setting.cardSize',
+          title: t('setting.cardSize'),
+          content: SettingCardSize,
+          defaultSize: {
+            width: 500,
+            height: 390,
+          },
+        })
+      },
+    },
+    flat: flatLayout,
   }
 
+  watch(cardSizeFlag, (val) => {
+    app.ui?.settings.setSettingValue('ModelManager.UI.CardSize', val)
+  })
+
+  watch(cardSizeMap, (val) => {
+    app.ui?.settings.setSettingValue(
+      'ModelManager.UI.CardSizeMap',
+      JSON.stringify(val),
+    )
+  })
+
   useAddConfigSettings(store)
 
   return config
@@ -99,6 +151,42 @@ function useAddConfigSettings(store: import('hooks/store').StoreProvider) {
       defaultValue: undefined,
     })
 
+    const defaultCardSize = store.config.defaultCardSizeMap
+
+    app.ui?.settings.addSetting({
+      id: 'ModelManager.UI.CardSize',
+      category: [t('modelManager'), t('setting.ui'), 'CardSize'],
+      name: t('setting.cardSize'),
+      defaultValue: 'size.extraLarge',
+      type: 'hidden',
+      onChange: (val) => {
+        store.config.cardSizeFlag.value = val
+      },
+    })
+
+    app.ui?.settings.addSetting({
+      id: 'ModelManager.UI.CardSizeMap',
+      category: [t('modelManager'), t('setting.ui'), 'CardSizeMap'],
+      name: t('setting.cardSize'),
+      defaultValue: JSON.stringify(defaultCardSize),
+      type: 'hidden',
+      onChange(value) {
+        store.config.cardSizeMap.value = JSON.parse(value)
+      },
+    })
+
+    app.ui?.settings.addSetting({
+      id: 'ModelManager.UI.Flat',
+      category: [t('modelManager'), t('setting.ui'), 'Flat'],
+      name: t('setting.useFlatUI'),
+      type: 'boolean',
+      defaultValue: false,
+      onChange(value) {
+        store.dialog.closeAll()
+        store.config.flat.value = value
+      },
+    })
+
     // Scan information
     app.ui?.settings.addSetting({
       id: 'ModelManager.ScanFiles.Full',

src/hooks/container.ts

@@ -1,46 +1,27 @@
-import { defineResizeCallback } from 'hooks/resize'
+import { useElementSize } from '@vueuse/core'
-import { computed, Directive, inject, InjectionKey, provide, ref } from 'vue'
+import { type InjectionKey, type Ref, inject, provide, toRef } from 'vue'
-
-const globalContainerSize = ref<Record<symbol, number>>({})
-
-const containerNameKey = Symbol('containerName') as InjectionKey<symbol>
-
-export const containerDirective: Directive<HTMLElement, symbol> = {
-  mounted: (el, binding) => {
-    const containerName = binding.value || Symbol('container')
-    const resizeCallback = defineResizeCallback((entries) => {
-      const entry = entries[0]
-      globalContainerSize.value[containerName] = entry.contentRect.width
-    })
-    const observer = new ResizeObserver(resizeCallback)
-    observer.observe(el)
-    el['_containerObserver'] = observer
-  },
-  unmounted: (el) => {
-    const observer = el['_containerObserver']
-    observer.disconnect()
-  },
-}
 
 const rem = parseFloat(getComputedStyle(document.documentElement).fontSize)
 
-export const useContainerQueries = (containerName?: symbol) => {
+const containerKey = Symbol('container') as InjectionKey<
-  const parentContainer = inject(containerNameKey, Symbol('unknown'))
+  Ref<HTMLElement | null>
+>
 
-  const name = containerName ?? parentContainer
+export const useContainerQueries = (
+  el?: HTMLElement | null | Ref<HTMLElement | null>,
+) => {
+  const container = inject(containerKey, el ? toRef(el) : toRef(document.body))
 
-  provide(containerNameKey, name)
+  provide(containerKey, container)
 
-  const currentContainerSize = computed(() => {
+  const { width } = useElementSize(container)
-    return globalContainerSize.value[name] ?? 0
-  })
 
   /**
    * @param size unit rem
    */
   const generator = (size: number) => {
     return (content: any, defaultContent: any = undefined) => {
-      return currentContainerSize.value > size * rem ? content : defaultContent
+      return width.value > size * rem ? content : defaultContent
     }
   }
 

src/hooks/dialog.ts

@@ -63,7 +63,11 @@ export const useDialog = defineStore('dialog', () => {
     }
   }
 
-  return { stack, open, close, rise }
+  const closeAll = () => {
+    stack.value = []
+  }
+
+  return { stack, open, close, closeAll, rise }
 })
 
 declare module 'hooks/store' {

src/hooks/download.ts

@@ -15,7 +15,7 @@ import { onBeforeMount, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 export const useDownload = defineStore('download', (store) => {
-  const { toast, confirm } = useToast()
+  const { toast, confirm, wrapperToastError } = useToast()
   const { t } = useI18n()
 
   const taskList = ref<DownloadTask[]>([])
@@ -29,20 +29,24 @@ export const useDownload = defineStore('download', (store) => {
       downloadProgress: `${bytesToSize(downloadedSize)} / ${bytesToSize(totalSize)}`,
       downloadSpeed: `${bytesToSize(bps)}/s`,
       pauseTask() {
-        request(`/download/${item.taskId}`, {
+        wrapperToastError(async () =>
-          method: 'PUT',
+          request(`/download/${item.taskId}`, {
-          body: JSON.stringify({
+            method: 'PUT',
-            status: 'pause',
+            body: JSON.stringify({
+              status: 'pause',
+            }),
           }),
-        })
+        )()
       },
       resumeTask: () => {
-        request(`/download/${item.taskId}`, {
+        wrapperToastError(async () =>
-          method: 'PUT',
+          request(`/download/${item.taskId}`, {
-          body: JSON.stringify({
+            method: 'PUT',
-            status: 'resume',
+            body: JSON.stringify({
+              status: 'resume',
+            }),
           }),
-        })
+        )()
       },
       deleteTask: () => {
         confirm.require({
@@ -59,9 +63,11 @@ export const useDownload = defineStore('download', (store) => {
             severity: 'danger',
           },
           accept: () => {
-            request(`/download/${item.taskId}`, {
+            wrapperToastError(async () =>
-              method: 'DELETE',
+              request(`/download/${item.taskId}`, {
-            })
+                method: 'DELETE',
+              }),
+            )()
           },
           reject: () => {},
         })
@@ -71,21 +77,12 @@ export const useDownload = defineStore('download', (store) => {
     return task
   }
 
-  const refresh = async () => {
+  const refresh = wrapperToastError(async () => {
-    return request('/download/task')
+    return request('/download/task').then((resData: DownloadTaskOptions[]) => {
-      .then((resData: DownloadTaskOptions[]) => {
+      taskList.value = resData.map((item) => createTaskItem(item))
-        taskList.value = resData.map((item) => createTaskItem(item))
+      return taskList.value
-        return taskList.value
+    })
-      })
+  })
-      .catch((err) => {
-        toast.add({
-          severity: 'error',
-          summary: 'Error',
-          detail: err.message ?? 'Failed to refresh download task list',
-          life: 15000,
-        })
-      })
-  }
 
   onBeforeMount(() => {
     api.addEventListener('reconnected', () => {

src/hooks/explorer.ts

@@ -0,0 +1,147 @@
+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'
+
+export interface FolderPathItem {
+  name: string
+  icon?: string
+  onClick: () => void
+  children: SelectOptions[]
+}
+
+export type ModelFolder = BaseModel & {
+  type: 'folder'
+  children: ModelTreeNode[]
+}
+
+export type ModelItem = Model
+
+export type ModelTreeNode = BaseModel & {
+  children?: ModelTreeNode[]
+}
+
+export type TreeItemNode = ModelTreeNode & {
+  onDbClick: () => void
+  onContextMenu: () => void
+}
+
+export const useModelExplorer = () => {
+  const { data, folders, ...modelRest } = useModels()
+
+  const folderPaths = ref<FolderPathItem[]>([])
+
+  const genFolderItem = (basename: string, subFolder: string): ModelFolder => {
+    return {
+      id: basename,
+      basename: basename,
+      subFolder: subFolder,
+      pathIndex: 0,
+      sizeBytes: 0,
+      extension: '',
+      description: '',
+      metadata: {},
+      preview: '',
+      type: 'folder',
+      children: [],
+    }
+  }
+
+  const dataTreeList = computed<ModelTreeNode[]>(() => {
+    const rootChildren: ModelTreeNode[] = []
+
+    for (const folder in folders.value) {
+      if (Object.prototype.hasOwnProperty.call(folders.value, folder)) {
+        const folderItem = genFolderItem(folder, '')
+
+        const folderModels = cloneDeep(data.value[folder]) ?? []
+
+        const pathMap: Record<string, ModelTreeNode> = Object.fromEntries(
+          folderModels.map((item) => [
+            `${item.pathIndex}-${genModelFullName(item)}`,
+            item,
+          ]),
+        )
+
+        for (const item of folderModels) {
+          const key = genModelFullName(item)
+          const parentKey = key.split('/').slice(0, -1).join('/')
+
+          if (parentKey === '') {
+            folderItem.children.push(item)
+            continue
+          }
+
+          const parentItem = pathMap[`${item.pathIndex}-${parentKey}`]
+          if (parentItem) {
+            parentItem.children ??= []
+            parentItem.children.push(item)
+          }
+        }
+        rootChildren.push(folderItem)
+      }
+    }
+
+    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 findFolders(list: ModelTreeNode[]) {
+    return filter(list, { type: 'folder' }) as ModelFolder[]
+  }
+
+  async function openFolder(level: number, name: string, icon?: string) {
+    if (folderPaths.value.length >= level) {
+      folderPaths.value.splice(level)
+    }
+
+    let currentLevel = dataTreeList.value
+    for (const folderItem of folderPaths.value) {
+      const found = findFolder(currentLevel, folderItem.name)
+      currentLevel = found?.children || []
+    }
+
+    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),
+        }
+      }),
+    })
+  }
+
+  watchEffect(() => {
+    if (Object.keys(folders.value).length > 0 && folderPaths.value.length < 2) {
+      openFolder(0, 'root', 'pi pi-desktop')
+    }
+  }, {})
+
+  return {
+    folders,
+    folderPaths,
+    dataTreeList,
+    ...modelRest,
+    findFolder: findFolder,
+    findFolders: findFolders,
+    openFolder: openFolder,
+  }
+}

src/hooks/model.ts

@@ -1,9 +1,11 @@
+import DialogModelDetail from 'components/DialogModelDetail.vue'
 import { useLoading } from 'hooks/loading'
 import { useMarkdown } from 'hooks/markdown'
 import { request } from 'hooks/request'
 import { defineStore } from 'hooks/store'
 import { useToast } from 'hooks/toast'
 import { castArray, cloneDeep } from 'lodash'
+import { TreeNode } from 'primevue/treenode'
 import { app } from 'scripts/comfyAPI'
 import { BaseModel, Model, SelectEvent, WithResolved } from 'types/typings'
 import { bytesToSize, formatDate, previewUrlToFile } from 'utils/common'
@@ -12,11 +14,14 @@ import { genModelKey, resolveModelTypeLoader } from 'utils/model'
 import {
   computed,
   inject,
-  InjectionKey,
+  type InjectionKey,
+  MaybeRefOrGetter,
   onMounted,
   provide,
+  type Ref,
   ref,
   toRaw,
+  toValue,
   unref,
 } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -24,7 +29,20 @@ import { configSetting } from './config'
 
 type ModelFolder = Record<string, string[]>
 
-const modelFolderProvideKey = Symbol('modelFolder')
+const modelFolderProvideKey = Symbol('modelFolder') as InjectionKey<
+  Ref<ModelFolder>
+>
+
+export const genModelFullName = (model: BaseModel) => {
+  return [model.subFolder, `${model.basename}${model.extension}`]
+    .filter(Boolean)
+    .join('/')
+}
+
+export const genModelUrl = (model: BaseModel) => {
+  const fullname = genModelFullName(model)
+  return `/model/${model.type}/${model.pathIndex}/${fullname}`
+}
 
 export const useModels = defineStore('models', (store) => {
   const { toast, confirm } = useToast()
@@ -32,6 +50,7 @@ export const useModels = defineStore('models', (store) => {
   const loading = useLoading()
 
   const folders = ref<ModelFolder>({})
+
   const refreshFolders = async () => {
     return request('/models').then((resData) => {
       folders.value = resData
@@ -65,7 +84,7 @@ export const useModels = defineStore('models', (store) => {
         ?.split(',')
         .map((type) => type.trim())
         .filter(Boolean) ?? []
-    return forceRefresh.then(() =>
+    await forceRefresh.then(() =>
       Promise.allSettled(
         Object.keys(folders.value)
           .filter((folder) => !customBlackList.includes(folder))
@@ -102,13 +121,13 @@ export const useModels = defineStore('models', (store) => {
 
     // Check current name and pathIndex
     if (
-      model.fullname !== data.fullname ||
+      model.subFolder !== data.subFolder ||
       model.pathIndex !== data.pathIndex
     ) {
       oldKey = genModelKey(model)
       updateData.set('type', data.type)
       updateData.set('pathIndex', data.pathIndex.toString())
-      updateData.set('fullname', data.fullname)
+      updateData.set('fullname', genModelFullName(data as BaseModel))
       needUpdate = true
     }
 
@@ -117,7 +136,8 @@ export const useModels = defineStore('models', (store) => {
     }
 
     loading.show()
-    await request(`/model/${model.type}/${model.pathIndex}/${model.fullname}`, {
+
+    await request(genModelUrl(model), {
       method: 'PUT',
       body: updateData,
     })
@@ -160,14 +180,14 @@ export const useModels = defineStore('models', (store) => {
         accept: () => {
           const dialogKey = genModelKey(model)
           loading.show()
-          request(`/model/${model.type}/${model.pathIndex}/${model.fullname}`, {
+          request(genModelUrl(model), {
             method: 'DELETE',
           })
             .then(() => {
               toast.add({
                 severity: 'success',
                 summary: 'Success',
-                detail: `${model.fullname} Deleted`,
+                detail: `${model.basename} Deleted`,
                 life: 2000,
               })
               store.dialog.close({ key: dialogKey })
@@ -195,12 +215,24 @@ export const useModels = defineStore('models', (store) => {
     })
   }
 
+  function openModelDetail(model: BaseModel) {
+    const filename = model.basename.replace(model.extension, '')
+
+    store.dialog.open({
+      key: genModelKey(model),
+      title: filename,
+      content: DialogModelDetail,
+      contentProps: { model: model },
+    })
+  }
+
   return {
     folders: folders,
     data: models,
     refresh: refreshAllModels,
     remove: deleteModel,
     update: updateModel,
+    openModelDetail: openModelDetail,
   }
 })
 
@@ -269,7 +301,7 @@ const baseInfoKey = Symbol('baseInfo') as InjectionKey<
 export const useModelBaseInfoEditor = (formInstance: ModelFormInstance) => {
   const { formData: model, modelData } = formInstance
 
-  const provideModelFolders = inject<any>(modelFolderProvideKey)
+  const provideModelFolders = inject(modelFolderProvideKey)
   const modelFolders = computed<ModelFolder>(() => {
     return provideModelFolders?.value ?? {}
   })
@@ -292,16 +324,25 @@ export const useModelBaseInfoEditor = (formInstance: ModelFormInstance) => {
     },
   })
 
+  const subFolder = computed({
+    get: () => {
+      return model.value.subFolder
+    },
+    set: (val) => {
+      model.value.subFolder = val
+    },
+  })
+
   const extension = computed(() => {
     return model.value.extension
   })
 
   const basename = computed({
     get: () => {
-      return model.value.fullname.replace(model.value.extension, '')
+      return model.value.basename
     },
     set: (val) => {
-      model.value.fullname = `${val ?? ''}${model.value.extension}`
+      model.value.basename = val
     },
   })
 
@@ -328,15 +369,20 @@ export const useModelBaseInfoEditor = (formInstance: ModelFormInstance) => {
       {
         key: 'pathIndex',
         formatter: () => {
-          const modelType = modelData.value.type
+          const modelType = model.value.type
-          const pathIndex = modelData.value.pathIndex
+          const pathIndex = model.value.pathIndex
+          if (!modelType) {
+            return undefined
+          }
           const folders = modelFolders.value[modelType] ?? []
-          return `${folders[pathIndex]}`
+          return [`${folders[pathIndex]}`, model.value.subFolder]
+            .filter(Boolean)
+            .join('/')
         },
       },
       {
-        key: 'fullname',
+        key: 'basename',
-        formatter: (val) => val,
+        formatter: (val) => `${val}${model.value.extension}`,
       },
       {
         key: 'sizeBytes',
@@ -371,6 +417,7 @@ export const useModelBaseInfoEditor = (formInstance: ModelFormInstance) => {
     baseInfo,
     basename,
     extension,
+    subFolder,
     pathIndex,
     modelFolders,
   }
@@ -384,6 +431,74 @@ export const useModelBaseInfo = () => {
   return inject(baseInfoKey)!
 }
 
+export const useModelFolder = (
+  option: {
+    type?: MaybeRefOrGetter<string>
+  } = {},
+) => {
+  const { data: models, folders: modelFolders } = useModels()
+
+  const pathOptions = computed(() => {
+    const type = toValue(option.type)
+
+    if (!type) {
+      return []
+    }
+
+    const folderItems = cloneDeep(models.value[type]) ?? []
+    const pureFolders = folderItems.filter((item) => item.type === 'folder')
+    pureFolders.sort((a, b) => a.basename.localeCompare(b.basename))
+
+    const folders = modelFolders.value[type] ?? []
+
+    const root: TreeNode[] = []
+
+    for (const [index, folder] of folders.entries()) {
+      const pathIndexItem: TreeNode = {
+        key: folder,
+        label: folder,
+        children: [],
+      }
+
+      const items = pureFolders
+        .filter((item) => item.pathIndex === index)
+        .map((item) => {
+          const node: TreeNode = {
+            key: `${folder}/${genModelFullName(item)}`,
+            label: item.basename,
+            data: item,
+          }
+          return node
+        })
+      const itemMap = Object.fromEntries(items.map((item) => [item.key, item]))
+
+      for (const item of items) {
+        const key = item.key
+        const parentKey = key.split('/').slice(0, -1).join('/')
+
+        if (parentKey === folder) {
+          pathIndexItem.children!.push(item)
+          continue
+        }
+
+        const parentItem = itemMap[parentKey]
+        if (parentItem) {
+          parentItem.children ??= []
+          parentItem.children.push(item)
+        }
+      }
+
+      root.push(pathIndexItem)
+    }
+
+    return root
+  })
+
+  return {
+    pathOptions,
+  }
+}
+
 /**
  * Editable preview image.
  *
@@ -429,7 +544,8 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
    * No preview
    */
   const noPreviewContent = computed(() => {
-    return `/model-manager/preview/${model.value.type}/0/no-preview.png`
+    const folder = model.value.type || 'unknown'
+    return `/model-manager/preview/${folder}/0/no-preview.png`
   })
 
   const preview = computed(() => {
@@ -552,11 +668,11 @@ export const useModelMetadata = () => {
   return inject(metadataKey)!
 }
 
-export const useModelNodeAction = (model: BaseModel) => {
+export const useModelNodeAction = () => {
   const { t } = useI18n()
   const { toast, wrapperToastError } = useToast()
 
-  const createNode = (options: Record<string, any> = {}) => {
+  const createNode = (model: BaseModel, options: Record<string, any> = {}) => {
     const nodeType = resolveModelTypeLoader(model.type)
     if (!nodeType) {
       throw new Error(t('unSupportedModelType', [model.type]))
@@ -565,50 +681,52 @@ export const useModelNodeAction = (model: BaseModel) => {
     const node = window.LiteGraph.createNode(nodeType, null, options)
     const widgetIndex = node.widgets.findIndex((w) => w.type === 'combo')
     if (widgetIndex > -1) {
-      node.widgets[widgetIndex].value = model.fullname
+      node.widgets[widgetIndex].value = genModelFullName(model)
     }
     return node
   }
 
-  const dragToAddModelNode = wrapperToastError((event: DragEvent) => {
+  const dragToAddModelNode = wrapperToastError(
-    // const target = document.elementFromPoint(event.clientX, event.clientY)
+    (model: BaseModel, event: DragEvent) => {
-    // if (
+      // const target = document.elementFromPoint(event.clientX, event.clientY)
-    //   target?.tagName.toLocaleLowerCase() === 'canvas' &&
+      // if (
-    //   target.id === 'graph-canvas'
+      //   target?.tagName.toLocaleLowerCase() === 'canvas' &&
-    // ) {
+      //   target.id === 'graph-canvas'
-    //   const pos = app.clientPosToCanvasPos([event.clientX - 20, event.clientY])
+      // ) {
-    //   const node = createNode({ pos })
+      //   const pos = app.clientPosToCanvasPos([event.clientX - 20, event.clientY])
-    //   app.graph.add(node)
+      //   const node = createNode({ pos })
-    //   app.canvas.selectNode(node)
+      //   app.graph.add(node)
-    // }
+      //   app.canvas.selectNode(node)
-    //
+      // }
-    // Use the legacy method instead
+      //
-    const removeEmbeddingExtension = true
+      // Use the legacy method instead
-    const strictDragToAdd = false
+      const removeEmbeddingExtension = true
+      const strictDragToAdd = false
 
-    ModelGrid.dragAddModel(
+      ModelGrid.dragAddModel(
-      event,
+        event,
-      model.type,
+        model.type,
-      model.fullname,
+        genModelFullName(model),
-      removeEmbeddingExtension,
+        removeEmbeddingExtension,
-      strictDragToAdd,
+        strictDragToAdd,
-    )
+      )
-  })
+    },
+  )
 
-  const addModelNode = wrapperToastError(() => {
+  const addModelNode = wrapperToastError((model: BaseModel) => {
     const selectedNodes = app.canvas.selected_nodes
     const firstSelectedNode = Object.values(selectedNodes)[0]
     const offset = 25
     const pos = firstSelectedNode
       ? [firstSelectedNode.pos[0] + offset, firstSelectedNode.pos[1] + offset]
       : app.canvas.canvas_mouse
-    const node = createNode({ pos })
+    const node = createNode(model, { pos })
     app.graph.add(node)
     app.canvas.selectNode(node)
   })
 
-  const copyModelNode = wrapperToastError(() => {
+  const copyModelNode = wrapperToastError((model: BaseModel) => {
-    const node = createNode()
+    const node = createNode(model)
     app.canvas.copyToClipboard([node])
     toast.add({
       severity: 'success',
@@ -618,13 +736,13 @@ export const useModelNodeAction = (model: BaseModel) => {
     })
   })
 
-  const loadPreviewWorkflow = wrapperToastError(async () => {
+  const loadPreviewWorkflow = wrapperToastError(async (model: BaseModel) => {
     const previewUrl = model.preview as string
     const response = await fetch(previewUrl)
     const data = await response.blob()
     const type = data.type
     const extension = type.split('/').pop()
-    const file = new File([data], `${model.fullname}.${extension}`, { type })
+    const file = new File([data], `${model.basename}.${extension}`, { type })
     app.handleFile(file)
   })
 

src/hooks/resize.ts

@@ -1,22 +0,0 @@
-import { throttle } from 'lodash'
-import { Directive } from 'vue'
-
-export const resizeDirective: Directive<HTMLElement, ResizeObserverCallback> = {
-  mounted: (el, binding) => {
-    const callback = binding.value ?? (() => {})
-    const observer = new ResizeObserver(callback)
-    observer.observe(el)
-    el['observer'] = observer
-  },
-  unmounted: (el) => {
-    const observer = el['observer']
-    observer.disconnect()
-  },
-}
-
-export const defineResizeCallback = (
-  callback: ResizeObserverCallback,
-  wait?: number,
-) => {
-  return throttle(callback, wait ?? 100)
-}

src/i18n.ts

@@ -25,27 +25,44 @@ const messages = {
     none: 'None',
     uploadFile: 'Upload File',
     tapToChange: 'Tap description to change content',
+    name: 'Name',
+    width: 'Width',
+    height: 'Height',
+    reset: 'Reset',
     sort: {
       name: 'Name',
       size: 'Largest',
       created: 'Latest created',
       modified: 'Latest modified',
     },
+    size: {
+      extraLarge: 'Extra Large Icons',
+      large: 'Large Icons',
+      medium: 'Medium Icons',
+      small: 'Small Icons',
+      custom: 'Custom Size',
+      customTip: 'Set in `Settings > Model Manager > UI`',
+    },
     info: {
       type: 'Model Type',
       pathIndex: 'Directory',
-      fullname: 'File Name',
+      basename: 'File Name',
       sizeBytes: 'File Size',
       createdAt: 'Created At',
       updatedAt: 'Updated At',
     },
     setting: {
       apiKey: 'API Key',
+      cardHeight: 'Card Height',
+      cardWidth: 'Card Width',
       scan: 'Scan',
       scanMissing: 'Download missing information or preview',
       scanAll: "Override all models' information and preview",
       includeHiddenFiles: 'Include hidden files(start with .)',
       excludeScanTypes: 'Exclude scan types (separate with commas)',
+      ui: 'UI',
+      cardSize: 'Card Size',
+      useFlatUI: 'Flat Layout',
     },
   },
   zh: {
@@ -71,27 +88,44 @@ const messages = {
     none: '无',
     uploadFile: '上传文件',
     tapToChange: '点击描述可更改内容',
+    name: '名称',
+    width: '宽度',
+    height: '高度',
+    reset: '重置',
     sort: {
       name: '名称',
       size: '最大',
       created: '最新创建',
       modified: '最新修改',
     },
+    size: {
+      extraLarge: '超大图标',
+      large: '大图标',
+      medium: '中等图标',
+      small: '小图标',
+      custom: '自定义尺寸',
+      customTip: '在 `设置 > 模型管理器 > 外观` 中设置',
+    },
     info: {
       type: '类型',
       pathIndex: '目录',
-      fullname: '文件名',
+      basename: '文件名',
       sizeBytes: '文件大小',
       createdAt: '创建时间',
       updatedAt: '更新时间',
     },
     setting: {
       apiKey: '密钥',
+      cardHeight: '卡片高度',
+      cardWidth: '卡片宽度',
       scan: '扫描',
       scanMissing: '下载缺失的信息或预览图片',
       scanAll: '覆盖所有模型信息和预览图片',
       includeHiddenFiles: '包含隐藏文件(以 . 开头的文件或文件夹)',
       excludeScanTypes: '排除扫描类型(使用英文逗号隔开)',
+      ui: '外观',
+      cardSize: '卡片尺寸',
+      useFlatUI: '展平布局',
     },
   },
 }

src/main.ts

@@ -1,7 +1,5 @@
 import { definePreset } from '@primevue/themes'
 import Aura from '@primevue/themes/aura'
-import { containerDirective } from 'hooks/container'
-import { resizeDirective } from 'hooks/resize'
 import PrimeVue from 'primevue/config'
 import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
@@ -21,8 +19,6 @@ const ComfyUIPreset = definePreset(Aura, {
 function createVueApp(rootContainer: string | HTMLElement) {
   const app = createApp(App)
   app.directive('tooltip', Tooltip)
-  app.directive('resize', resizeDirective)
-  app.directive('container', containerDirective)
   app
     .use(PrimeVue, {
       theme: {

src/types/global.d.ts

@@ -155,7 +155,7 @@ declare namespace ComfyAPI {
       deprecated?: boolean
     }
 
-    class ComfySettingsDialog {
+    class ComfySettingsDialog extends dialog.ComfyDialog {
       addSetting: (params: SettingParams) => { value: any }
       getSettingValue: <T>(id: string, defaultValue?: T) => T
       setSettingValue: <T>(id: string, value: T) => void

src/types/shims.d.ts

@@ -1,12 +1,5 @@
 export {}
 
-declare module 'vue' {
-  interface ComponentCustomProperties {
-    vResize: (typeof import('hooks/resize'))['resizeDirective']
-    vContainer: (typeof import('hooks/container'))['containerDirective']
-  }
-}
-
 declare module 'hooks/store' {
   interface StoreProvider {}
 }

src/types/typings.d.ts

@@ -3,11 +3,11 @@ export type ContainerPosition = { left: number; top: number }
 
 export interface BaseModel {
   id: number | string
-  fullname: string
   basename: string
   extension: string
   sizeBytes: number
   type: string
+  subFolder: string
   pathIndex: number
   preview: string | string[]
   description: string
@@ -17,6 +17,7 @@ export interface BaseModel {
 export interface Model extends BaseModel {
   createdAt: number
   updatedAt: number
+  children?: Model[]
 }
 
 export interface VersionModel extends BaseModel {

src/utils/model.ts

@@ -25,5 +25,5 @@ export const resolveModelTypeLoader = (type: string) => {
 }
 
 export const genModelKey = (model: BaseModel) => {
-  return `${model.type}:${model.pathIndex}:${model.fullname}`
+  return `${model.type}:${model.pathIndex}:${model.subFolder}:${model.basename}${model.extension}`
 }

tailwind.config.js

@@ -9,6 +9,9 @@ export default {
   plugins: [
     plugin(({ addUtilities }) => {
       addUtilities({
+        '.text-shadow': {
+          'text-shadow': '2px 2px 4px rgba(0, 0, 0, 0.5)',
+        },
         '.scrollbar-none': {
           'scrollbar-width': 'none',
         },