fix(setting): no modified value saved (#130 )

* fix: save setting value * prepare release 2.3.3
prepare releas 2.3.2
2025-02-10 13:51:45 +08:00 · 2025-02-10 12:42:29 +08:00 · 2025-02-10 12:41:00 +08:00 · 2025-02-10 10:59:36 +08:00 · 2025-02-06 12:02:00 +08:00 · 2025-02-04 20:27:00 +08:00
38 changed files with 1434 additions and 1185 deletions
--- a/.github/workflows/publish.yml
+++ b/.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
--- a/README.md
+++ b/README.md
@@ -65,4 +65,3 @@ There are three installation methods, choose one
 <img src="demo/scan-model-info.png" alt="Model Manager Demo Screenshot" style="max-width: 100%; max-height: 300px"/>

 - Scan models and try to download information & preview.
- Support migration from `cdb-boop/ComfyUI-Model-Manager/main`
--- a/init.py
+++ b/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:
@@ -23,277 +23,22 @@ if len(uninstalled_package) > 0:

 # Init config settings
 config.extension_uri = extension_uri
-utils.resolve_model_base_paths()

+# Try to download web distribution
 version = utils.get_current_version()
 utils.download_web_distribution(version)


-from aiohttp import web
-from .py import services
-
+# Add api routes
+from .py import manager
+from .py import download
+from .py import information

 routes = config.routes

-
-@routes.get("/model-manager/download/task")
-async def scan_download_tasks(request):
-    """
-    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})
-
-
-@routes.get("/model-manager/base-folders")
-async def get_model_paths(request):
-    """
-    Returns the base folders for models.
-    """
-    model_base_paths = config.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.json()
-    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 read_models(request):
-    """
-    Scan all models and read their information.
-    """
-    try:
-        result = services.scan_models()
-        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/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: dict = await request.json()
-
-    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)
-        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)
-
-
-@routes.post("/model-manager/migrate")
-async def migrate_legacy_information(request):
-    """
-    Migrate legacy information.
-    """
-    try:
-        await services.migrate_legacy_information()
-        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})
+manager.ModelManager().add_routes(routes)
+download.ModelDownload().add_routes(routes)
+information.Information().add_routes(routes)


 WEB_DIRECTORY = "web"
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
    "prepare": "husky"
  },
  "devDependencies": {
-    "@tailwindcss/container-queries": "^0.1.1",
    "@types/lodash": "^4.17.9",
    "@types/markdown-it": "^14.1.2",
    "@types/node": "^22.5.5",
@@ -34,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",
--- a/pnpm-lock.yaml
+++ b/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
@@ -36,9 +39,6 @@ importers:
        specifier: ^2.6.0
        version: 2.6.0
    devDependencies:
-      '@tailwindcss/container-queries':
-        specifier: ^0.1.1
-        version: 0.1.1(tailwindcss@3.4.12)
      '@types/lodash':
        specifier: ^4.17.9
        version: 4.17.9
@@ -470,11 +470,6 @@ packages:
    cpu: [x64]
    os: [win32]

-  '@tailwindcss/container-queries@0.1.1':
-    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
-    peerDependencies:
-      tailwindcss: '>=3.2.0'
-
  '@types/estree@1.0.5':
    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}

@@ -493,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}
@@ -609,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:
@@ -1676,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}
@@ -2000,10 +2018,6 @@ snapshots:
  '@rollup/rollup-win32-x64-msvc@4.22.0':
    optional: true

-  '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.12)':
-    dependencies:
-      tailwindcss: 3.4.12
-
  '@types/estree@1.0.5': {}

  '@types/linkify-it@5.0.0': {}
@@ -2021,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
@@ -2193,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
@@ -3192,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
--- a/py/config.py
+++ b/py/config.py
@@ -1,7 +1,6 @@
 extension_tag = "ComfyUI Model Manager"

 extension_uri: str = None
-model_base_paths: dict[str, list[str]] = {}


 setting_key = {
@@ -12,6 +11,9 @@ setting_key = {
    "download": {
        "max_task_count": "ModelManager.Download.MaxTaskCount",
    },
+    "scan": {
+        "include_hidden_files": "ModelManager.Scan.IncludeHiddenFiles"
+    },
 }

 user_agent = "Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148"
--- a/py/download.py
+++ b/py/download.py
@@ -61,7 +61,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 +71,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):
@@ -103,6 +103,8 @@ def get_task_content(task_id: str):
    if not os.path.isfile(task_file):
        raise RuntimeError(f"Task {task_id} not found")
    task_content = utils.load_dict_pickle_file(task_file)
+    if isinstance(task_content, TaskContent):
+        return task_content
    return TaskContent(**task_content)


@@ -178,17 +180,18 @@ async def create_model_download_task(task_data: dict, request):
    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)

    try:
-        preview_url = task_data.pop("preview", None)
-        utils.save_model_preview_image(task_path, preview_url)
+        preview_file = task_data.pop("previewFile", None)
+        utils.save_model_preview_image(task_path, preview_file, download_platform)
        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),
+            platform=download_platform,
            totalSize=float(task_data.get("sizeBytes", 0)),
        )
        download_model_task_status[task_id] = task_status
@@ -361,9 +364,7 @@ async def download_model_file(
    )

    if response.status_code not in (200, 206):
-        raise RuntimeError(
-            f"Failed to download {task_content.fullname}, status code: {response.status_code}"
-        )
+        raise RuntimeError(f"Failed to download {task_content.fullname}, status code: {response.status_code}")

    # Some models require logging in before they can be downloaded.
    # If no token is carried, it will be redirected to the login page.
@@ -376,14 +377,12 @@ async def download_model_file(
        # 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."
-        )
+        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))
+        total_size = float(response.headers.get("content-length", 0))
        task_content.sizeBytes = total_size
        task_status.totalSize = total_size
        set_task_content(task_id, task_content)
@@ -407,3 +406,86 @@ async def download_model_file(
    else:
        task_status.status = "pause"
        await utils.send_json("update_download_task", task_status.to_dict())
+
+
+from aiohttp import web
+
+
+class ModelDownload:
+    def add_routes(self, routes):
+
+        @routes.get("/model-manager/download/task")
+        async def scan_download_tasks(request):
+            """
+            Read download task list.
+            """
+            try:
+                result = await 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 pause_model_download_task(task_id)
+                elif status == "resume":
+                    await 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})
+
+        @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 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.
+
+            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 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})
--- a/py/information.py
+++ b/py/information.py
@@ -27,9 +27,7 @@ class ModelSearcher(ABC):

 class UnknownWebsiteSearcher(ModelSearcher):
    def search_by_url(self, url: str):
-        raise RuntimeError(
-            f"Unknown Website, please input a URL from huggingface.co or civitai.com."
-        )
+        raise RuntimeError(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.")
@@ -87,29 +85,15 @@ class CivitaiModelSearcher(ModelSearcher):
                description_parts.append("")
                description_parts.append(f"# Trigger Words")
                description_parts.append("")
-                description_parts.append(
-                    ", ".join(version.get("trainedWords", ["No trigger words"]))
-                )
+                description_parts.append(", ".join(version.get("trainedWords", ["No trigger words"])))
                description_parts.append("")
                description_parts.append(f"# About this version")
                description_parts.append("")
-                description_parts.append(
-                    markdownify.markdownify(
-                        version.get(
-                            "description", "<p>No description about this version</p>"
-                        )
-                    ).strip()
-                )
+                description_parts.append(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(
-                    markdownify.markdownify(
-                        res_data.get(
-                            "description", "<p>No description about this model</p>"
-                        )
-                    ).strip()
-                )
+                description_parts.append(markdownify.markdownify(res_data.get("description", "<p>No description about this model</p>")).strip())
                description_parts.append("")

                model = {
@@ -136,18 +120,14 @@ class CivitaiModelSearcher(ModelSearcher):
        if not hash:
            raise RuntimeError(f"Hash value is empty.")

-        response = requests.get(
-            f"https://civitai.com/api/v1/model-versions/by-hash/{hash}"
-        )
+        response = requests.get(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 = (
-            f"https://civitai.com/models/{model_id}?modelVersionId={version_id}"
-        )
+        model_page = f"https://civitai.com/models/{model_id}?modelVersionId={version_id}"

        models = self.search_by_url(model_page)

@@ -186,9 +166,7 @@ class HuggingfaceModelSearcher(ModelSearcher):
        response.raise_for_status()
        res_data: dict = response.json()

-        sibling_files: list[str] = [
-            x.get("rfilename") for x in res_data.get("siblings", [])
-        ]
+        sibling_files: list[str] = [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 = [
-            f"https://huggingface.co/{model_id}/resolve/main/{filename}"
-            for filename in image_files
-        ]
+        image_files = [f"https://huggingface.co/{model_id}/resolve/main/{filename}" for filename in image_files]

        models: list[dict] = []

@@ -250,7 +225,7 @@ class HuggingfaceModelSearcher(ModelSearcher):
                "pathIndex": 0,
                "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.")
--- a/py/manager.py
+++ b/py/manager.py
@@ -0,0 +1,225 @@
+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):
+            fullname = utils.normalize_path(entry.path).replace(f"{base_path}/", "")
+            basename = os.path.splitext(fullname)[0]
+            extension = os.path.splitext(fullname)[1]
+
+            if extension not in folder_paths.supported_pt_extensions:
+                return None
+
+            model_preview = f"/model-manager/preview/{folder}/{path_index}/{basename}.webp"
+
+            stat = entry.stat()
+            return {
+                "fullname": fullname,
+                "basename": basename,
+                "extension": extension,
+                "type": folder,
+                "pathIndex": path_index,
+                "sizeBytes": stat.st_size,
+                "preview": model_preview,
+                "createdAt": round(stat.st_ctime_ns / 1000000),
+                "updatedAt": round(stat.st_mtime_ns / 1000000),
+            }
+
+        def get_all_files_entry(directory: str):
+            files = []
+            with os.scandir(directory) as it:
+                for entry in it:
+                    # Skip hidden files
+                    if not include_hidden_files:
+                        if entry.name.startswith("."):
+                            continue
+                    if entry.is_dir():
+                        files.extend(get_all_files_entry(entry.path))
+                    elif entry.is_file():
+                        files.append(entry)
+            return files
+
+        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))
--- a/py/services.py
+++ b/py/services.py
@@ -1,308 +0,0 @@
-import os
-
-import folder_paths
-
-from . import config
-from . import utils
-from . import download
-from . import searcher
-
-
-def scan_models():
-    result = []
-    model_base_paths = config.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)
-
-            models = folder_paths.filter_files_extensions(files, extensions)
-            images = folder_paths.filter_files_content_types(files, ["image"])
-            image_dict = utils.file_list_to_name_dict(images)
-
-            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 = image_dict.get(basename, "no-preview.png")
-                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/{model_type}/{path_index}/{image_name}"
-                )
-
-                model_info = {
-                    "fullname": fullname,
-                    "basename": basename,
-                    "extension": extension,
-                    "type": model_type,
-                    "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"]
-        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):
-    utils.print_info(f"Download model info for {scan_mode}")
-    model_base_paths = config.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)
-
-            models = folder_paths.filter_files_extensions(files, extensions)
-            images = folder_paths.filter_files_content_types(files, ["image"])
-            image_dict = utils.file_list_to_name_dict(images)
-            descriptions = folder_paths.filter_files_extensions(files, [".md"])
-            description_dict = utils.file_list_to_name_dict(descriptions)
-
-            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 = image_dict.get(basename, "no-preview.png")
-                abs_image_path = utils.join_path(base_path, image_name)
-
-                has_preview = os.path.isfile(abs_image_path)
-
-                description_name = description_dict.get(basename, None)
-                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.")
-
-
-async def migrate_legacy_information():
-    import json
-    import yaml
-    from PIL import Image
-
-    utils.print_info(f"Migrating legacy information...")
-
-    model_base_paths = config.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)
-
-            models = folder_paths.filter_files_extensions(files, extensions)
-
-            for fullname in models:
-                fullname = utils.normalize_path(fullname)
-
-                abs_model_path = utils.join_path(base_path, fullname)
-
-                base_file_name = os.path.splitext(abs_model_path)[0]
-
-                utils.print_debug(f"Try to migrate legacy info for {abs_model_path}")
-
-                preview_path = utils.join_path(
-                    os.path.dirname(abs_model_path),
-                    utils.get_model_preview_name(abs_model_path),
-                )
-                new_preview_path = f"{base_file_name}.webp"
-
-                if os.path.isfile(preview_path) and preview_path != new_preview_path:
-                    utils.print_info(f"Migrate preview image from {fullname}")
-                    with Image.open(preview_path) as image:
-                        image.save(new_preview_path, format="WEBP")
-                    os.remove(preview_path)
-
-                description_path = f"{base_file_name}.md"
-
-                metadata_info = {
-                    "website": "Civitai",
-                }
-
-                url_info_path = f"{base_file_name}.url"
-                if os.path.isfile(url_info_path):
-                    with open(url_info_path, "r", encoding="utf-8") as f:
-                        for line in f:
-                            if line.startswith("URL="):
-                                model_page_url = line[len("URL=") :].strip()
-                                metadata_info.update({"modelPage": model_page_url})
-
-                json_info_path = f"{base_file_name}.json"
-                if os.path.isfile(json_info_path):
-                    with open(json_info_path, "r", encoding="utf-8") as f:
-                        version = json.load(f)
-                        metadata_info.update(
-                            {
-                                "baseModel": version.get("baseModel"),
-                                "preview": [i["url"] for i in version["images"]],
-                            }
-                        )
-
-                description_parts: list[str] = [
-                    "---",
-                    yaml.dump(metadata_info).strip(),
-                    "---",
-                    "",
-                ]
-
-                text_info_path = f"{base_file_name}.txt"
-                if os.path.isfile(text_info_path):
-                    with open(text_info_path, "r", encoding="utf-8") as f:
-                        description_parts.append(f.read())
-
-                description_path = f"{base_file_name}.md"
-
-                if os.path.isfile(text_info_path):
-                    utils.print_info(f"Migrate description from {fullname}")
-                    with open(description_path, "w", encoding="utf-8", newline="") as f:
-                        f.write("\n".join(description_parts))
-
-                def try_to_remove_file(file_path):
-                    if os.path.isfile(file_path):
-                        os.remove(file_path)
-
-                try_to_remove_file(url_info_path)
-                try_to_remove_file(text_info_path)
-                try_to_remove_file(json_info_path)
-
-    utils.print_debug("Completed migrate model information.")
--- a/py/utils.py
+++ b/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())
@@ -103,9 +120,7 @@ def download_web_distribution(version: str):

        print_info("Extracting web distribution...")
        with tarfile.open(temp_file, "r:gz") as tar:
-            members = [
-                member for member in tar.getmembers() if member.name.startswith("web/")
-            ]
+            members = [member for member in tar.getmembers() if member.name.startswith("web/")]
            tar.extractall(path=config.extension_uri, members=members)

        os.remove(temp_file)
@@ -118,23 +133,27 @@ 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())
-    config.model_base_paths = {}
+    model_base_paths = {}
+    folder_black_list = ["configs", "custom_nodes"]
    for folder in folders:
-        if folder == "configs":
-            continue
-        if folder == "custom_nodes":
+        if folder in folder_black_list:
            continue
        folders = folder_paths.get_folder_paths(folder)
-        config.model_base_paths[folder] = [normalize_path(f) for f in folders]
+        model_base_paths[folder] = [normalize_path(f) for f in folders]
+    return model_base_paths


 def get_full_path(model_type: str, path_index: int, filename: str):
    """
    Get the absolute path in the model type through string concatenation.
    """
-    folders = config.model_base_paths.get(model_type, [])
+    folders = resolve_model_base_paths().get(model_type, [])
    if not path_index < len(folders):
        raise RuntimeError(f"PathIndex {path_index} is not in {model_type}")
    base_path = folders[path_index]
@@ -146,7 +165,7 @@ def get_valid_full_path(model_type: str, path_index: int, filename: str):
    """
    Like get_full_path but it will check whether the file is valid.
    """
-    folders = config.model_base_paths.get(model_type, [])
+    folders = resolve_model_base_paths().get(model_type, [])
    if not path_index < len(folders):
        raise RuntimeError(f"PathIndex {path_index} is not in {model_type}")
    base_path = folders[path_index]
@@ -154,9 +173,7 @@ def get_valid_full_path(model_type: str, path_index: int, filename: str):
    if os.path.isfile(full_path):
        return full_path
    elif os.path.islink(full_path):
-        raise RuntimeError(
-            f"WARNING path {full_path} exists but doesn't link anywhere, skipping."
-        )
+        raise RuntimeError(f"WARNING path {full_path} exists but doesn't link anywhere, skipping.")


 def get_download_path():
@@ -166,11 +183,29 @@ def get_download_path():
    return download_path


-def recursive_search_files(directory: str):
-    files, folder_all = folder_paths.recursive_search(
-        directory, excluded_dir_names=[".git"]
-    )
-    return [normalize_path(f) for f in files]
+def recursive_search_files(directory: str, request):
+    if not os.path.isdir(directory):
+        return []
+
+    excluded_dir_names = [".git"]
+    result = []
+    include_hidden_files = get_setting_value(request, "scan.include_hidden_files", False)
+
+    for dirpath, subdirs, filenames in os.walk(directory, followlinks=True, topdown=True):
+        subdirs[:] = [d for d in subdirs if d not in excluded_dir_names]
+        if not include_hidden_files:
+            subdirs[:] = [d for d in subdirs if not d.startswith(".")]
+            filenames[:] = [f for f in filenames if not f.startswith(".")]
+
+        for file_name in filenames:
+            try:
+                relative_path = os.path.relpath(os.path.join(dirpath, file_name), directory)
+                result.append(relative_path)
+            except:
+                logging.warning(f"Warning: Unable to access {file_name}. Skipping this file.")
+                continue
+
+    return [normalize_path(f) for f in result]


 def search_files(directory: str):
@@ -220,6 +255,14 @@ def get_model_all_images(model_path: str):

 def get_model_preview_name(model_path: str):
    images = get_model_all_images(model_path)
+    basename = os.path.splitext(os.path.basename(model_path))[0]
+
+    for image in images:
+        image_name = os.path.splitext(image)[0]
+        image_ext = os.path.splitext(image)[1]
+        if image_name == basename and image_ext.lower() == ".webp":
+            return image
+
    return images[0] if len(images) > 0 else "no-preview.png"


@@ -227,19 +270,47 @@ from PIL import Image
 from io import BytesIO


-def save_model_preview_image(model_path: str, image_url: str):
-    try:
-        image_response = requests.get(image_url)
-        image_response.raise_for_status()
+def remove_model_preview_image(model_path: str):
+    basename = os.path.splitext(model_path)[0]
+    preview_path = f"{basename}.webp"
+    if os.path.exists(preview_path):
+        os.remove(preview_path)

-        basename = os.path.splitext(model_path)[0]
-        preview_path = f"{basename}.webp"
-        image = Image.open(BytesIO(image_response.content))
+
+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
+
+        try:
+            image_response = requests.get(image_url)
+            image_response.raise_for_status()
+
+            image = Image.open(BytesIO(image_response.content))
+            image.save(preview_path, "WEBP")
+
+        except Exception as e:
+            print_error(f"Failed to download image: {e}")
+
+    else:
+        # Assert image as file
+        image_file = image_file_or_url
+
+        if not isinstance(image_file, web.FileField):
+            raise RuntimeError("Invalid image file")
+
+        content_type: str = image_file.content_type
+        if not content_type.startswith("image/"):
+            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")

-    except Exception as e:
-        print_error(f"Failed to download image: {e}")
-

 def get_model_all_descriptions(model_path: str):
    base_dirname = os.path.dirname(model_path)
@@ -267,12 +338,6 @@ def save_model_description(model_path: str, content: Any):

    base_dirname = os.path.dirname(model_path)

-    # remove old descriptions
-    old_descriptions = get_model_all_descriptions(model_path)
-    for desc in old_descriptions:
-        description_path = join_path(base_dirname, desc)
-        os.remove(description_path)
-
    # save new description
    basename = os.path.splitext(os.path.basename(model_path))[0]
    extension = ".md"
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,8 +1,8 @@
 [project]
 name = "comfyui-model-manager"
 description = "Manage models: browsing, download and delete."
-version = "2.1.0"
-license = "LICENSE"
+version = "2.3.3"
+license = { file = "LICENSE" }
 dependencies = ["markdownify"]

 [project.urls]
@@ -13,3 +13,6 @@ Repository = "https://github.com/hayden-fr/ComfyUI-Model-Manager"
 PublisherId = "hayden"
 DisplayName = "ComfyUI-Model-Manager"
 Icon = ""
+
+[tool.black]
+line-length = 160
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,16 +15,18 @@ import { useStoreProvider } from 'hooks/store'
 import { useToast } from 'hooks/toast'
 import GlobalConfirm from 'primevue/confirmdialog'
 import { $el, app, ComfyButton } from 'scripts/comfyAPI'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 const { t } = useI18n()
 const { dialog, models, config, download } = useStoreProvider()
 const { toast } = useToast()

+const firstOpenManager = ref(true)
+
 onMounted(() => {
  const refreshModelsAndConfig = async () => {
-    await Promise.all([models.refresh(), config.refresh()])
+    await Promise.all([models.refresh(true)])
    toast.add({
      severity: 'success',
      summary: 'Refreshed Models',
@@ -50,6 +52,11 @@ onMounted(() => {
  const openManagerDialog = () => {
    const { cardWidth, gutter, aspect } = config

+    if (firstOpenManager.value) {
+      models.refresh(true)
+      firstOpenManager.value = false
+    }
+
    dialog.open({
      key: 'model-manager',
      title: t('modelManager'),
--- a/src/components/DialogCreateTask.vue
+++ b/src/components/DialogCreateTask.vue
@@ -69,7 +69,8 @@ import { useLoading } from 'hooks/loading'
 import { request } from 'hooks/request'
 import { useToast } from 'hooks/toast'
 import Button from 'primevue/button'
-import { VersionModel } from 'types/typings'
+import { VersionModel, WithResolved } from 'types/typings'
+import { previewUrlToFile } from 'utils/common'
 import { ref } from 'vue'

 const { isMobile } = useConfig()
@@ -87,15 +88,52 @@ const searchModelsByUrl = async () => {
  }
 }

-const createDownTask = async (data: VersionModel) => {
+const createDownTask = async (data: WithResolved<VersionModel>) => {
  loading.show()

+  const formData = new FormData()
+  for (const key in data) {
+    if (Object.prototype.hasOwnProperty.call(data, key)) {
+      let value = data[key]
+
+      // set preview file
+      if (key === 'preview') {
+        if (value) {
+          const previewFile = await previewUrlToFile(value).catch(() => {
+            loading.hide()
+            toast.add({
+              severity: 'error',
+              summary: 'Error',
+              detail: 'Failed to download preview',
+              life: 5000,
+            })
+            throw new Error('Failed to download preview')
+          })
+          formData.append('previewFile', previewFile)
+        } else {
+          formData.append('previewFile', value)
+        }
+        continue
+      }
+
+      if (typeof value === 'object') {
+        value = JSON.stringify(value)
+      }
+
+      if (typeof value === 'number') {
+        value = value.toString()
+      }
+
+      formData.append(key, value)
+    }
+  }
+
  await request('/model', {
    method: 'POST',
-    body: JSON.stringify(data),
+    body: formData,
  })
    .then(() => {
-      dialog.close({ key: 'model-manager-create-task' })
+      dialog.close()
    })
    .catch((e) => {
      toast.add({
--- a/src/components/DialogDownload.vue
+++ b/src/components/DialogDownload.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex h-full flex-col gap-4">
-    <div class="whitespace-nowrap px-4 @container">
-      <div class="flex gap-4 @sm:justify-end">
+    <div ref="container" class="whitespace-nowrap px-4">
+      <div :class="['flex gap-4', $sm('justify-end')]">
        <Button
-          class="w-full @sm:w-auto"
+          :class="[$sm('w-auto', 'w-full')]"
          :label="$t('createDownloadTask')"
          @click="openCreateTask"
        ></Button>
@@ -73,9 +73,11 @@
 <script setup lang="ts">
 import DialogCreateTask from 'components/DialogCreateTask.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
+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()
@@ -85,9 +87,12 @@ const dialog = useDialog()

 const openCreateTask = () => {
  dialog.open({
-    key: 'model-manager-create-task',
+    key: `model-manager-create-task-${Date.now()}`,
    title: t('parseModelUrl'),
    content: DialogCreateTask,
  })
 }
+
+const container = ref<HTMLElement | null>(null)
+const { $sm } = useContainerQueries(container)
 </script>
--- a/src/components/DialogManager.vue
+++ b/src/components/DialogManager.vue
@@ -1,62 +1,49 @@
 <template>
  <div
-    class="flex h-full flex-col gap-4 overflow-hidden @container/content"
-    :style="{
-      ['--card-width']: `${cardWidth}px`,
-      ['--gutter']: `${gutter}px`,
-    }"
-    v-resize="onContainerResize"
+    ref="contentContainer"
+    class="flex h-full flex-col gap-4 overflow-hidden"
  >
    <div
-      :class="[
-        'grid grid-cols-1 justify-center gap-4 px-8',
-        '@lg/content:grid-cols-[repeat(auto-fit,var(--card-width))]',
-        '@lg/content:gap-[var(--gutter)]',
-        '@lg/content:px-4',
-      ]"
+      class="grid grid-cols-1 justify-center gap-4 px-8"
+      :style="$content_lg(contentStyle)"
    >
-      <div class="col-span-full @container/toolbar">
-        <div :class="['flex flex-col gap-4', '@2xl/toolbar:flex-row']">
-          <ResponseInput
-            v-model="searchContent"
-            :placeholder="$t('searchModels')"
-            :allow-clear="true"
-            suffix-icon="pi pi-search"
-          ></ResponseInput>
+      <div ref="toolbarContainer" class="col-span-full">
+        <div :class="['flex gap-4', $toolbar_2xl('flex-row', 'flex-col')]">
+          <div class="flex-1">
+            <ResponseInput
+              v-model="searchContent"
+              :placeholder="$t('searchModels')"
+              :allow-clear="true"
+              suffix-icon="pi pi-search"
+            ></ResponseInput>
+          </div>

          <div class="flex items-center justify-between gap-4 overflow-hidden">
            <ResponseSelect
              v-model="currentType"
              :items="typeOptions"
-              :type="isMobile ? 'drop' : 'button'"
            ></ResponseSelect>
            <ResponseSelect
              v-model="sortOrder"
              :items="sortOrderOptions"
            ></ResponseSelect>
+            <ResponseSelect
+              v-model="cardSizeFlag"
+              :items="cardSizeOptions"
+            ></ResponseSelect>
          </div>
        </div>
      </div>
    </div>

-    <ResponseScroll
-      ref="responseScroll"
-      :items="list"
-      :itemSize="itemSize"
-      :row-key="(item) => item.map(genModelKey).join(',')"
-      class="h-full flex-1"
-    >
+    <ResponseScroll :items="list" :itemSize="itemSize" class="h-full flex-1">
      <template #item="{ item }">
        <div
-          :class="[
-            'grid grid-cols-1 justify-center gap-8 px-8',
-            '@lg/content:grid-cols-[repeat(auto-fit,var(--card-width))]',
-            '@lg/content:gap-[var(--gutter)]',
-            '@lg/content:px-4',
-          ]"
+          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>
@@ -75,31 +62,57 @@
 </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 { useConfig } from 'hooks/config'
+import { configSetting, useConfig } from 'hooks/config'
+import { useContainerQueries } from 'hooks/container'
 import { useModels } from 'hooks/model'
-import { defineResizeCallback } from 'hooks/resize'
 import { chunk } from 'lodash'
+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, modelFolders } = useConfig()
+const {
+  isMobile,
+  gutter,
+  cardSize,
+  cardSizeMap,
+  cardSizeFlag,
+  dialog: settings,
+} = useConfig()

-const { data } = useModels()
+const { data, folders } = 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 typeOptions = computed(() => {
-  return ['all', ...Object.keys(modelFolders.value)].map((type) => {
+  const excludeScanTypes = app.ui?.settings.getSettingValue<string>(
+    configSetting.excludeScanTypes,
+  )
+  const customBlackList =
+    excludeScanTypes
+      ?.split(',')
+      .map((type) => type.trim())
+      .filter(Boolean) ?? []
+  return [
+    'all',
+    ...Object.keys(folders.value).filter(
+      (folder) => !customBlackList.includes(folder),
+    ),
+  ].map((type) => {
    return {
      label: type,
      value: type,
@@ -124,26 +137,32 @@ 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 colSpanWidth = ref(cardWidth)
+const { width } = useElementSize(contentContainer)
+
+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 filterList = data.value.filter((model) => {
+  const mergedList = Object.values(data.value).flat()
+
+  const filterList = mergedList.filter((model) => {
    const showAllModel = currentType.value === 'all'

    const matchType = showAllModel || model.type === currentType.value
@@ -174,17 +193,38 @@ 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 onContainerResize = defineResizeCallback((entries) => {
-  const entry = entries[0]
-  if (isMobile.value) {
-    colSpan.value = 1
-  } else {
-    const containerWidth = entry.contentRect.width
-    colSpan.value = Math.floor((containerWidth - gutter) / (cardWidth + gutter))
-    colSpanWidth.value = colSpan.value * (cardWidth + gutter) - gutter
+const contentStyle = computed(() => ({
+  gridTemplateColumns: `repeat(auto-fit, ${cardSize.value.width}px)`,
+  gap: `${gutter}px`,
+  paddingLeft: `1rem`,
+  paddingRight: `1rem`,
+}))
+
+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
+        }
+      },
+    }
+  })
 })
 </script>
--- a/src/components/DialogModelDetail.vue
+++ b/src/components/DialogModelDetail.vue
@@ -47,7 +47,7 @@ import ResponseScroll from 'components/ResponseScroll.vue'
 import { useModelNodeAction, useModels } from 'hooks/model'
 import { useRequest } from 'hooks/request'
 import Button from 'primevue/button'
-import { BaseModel, Model } from 'types/typings'
+import { BaseModel, Model, WithResolved } from 'types/typings'
 import { computed, ref } from 'vue'

 interface Props {
@@ -72,7 +72,7 @@ const handleCancel = () => {
  editable.value = false
 }

-const handleSave = async (data: BaseModel) => {
+const handleSave = async (data: WithResolved<BaseModel>) => {
  await update(modelContent.value, data)
  editable.value = false
 }
--- a/src/components/GlobalDialogStack.vue
+++ b/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 + index + 1 }"
    :pt:root:onMousedown="() => rise(item)"
    @hide="() => close(item)"
  >
@@ -42,6 +43,20 @@
 import ResponseDialog from 'components/ResponseDialog.vue'
 import { useDialog } from 'hooks/dialog'
 import Button from 'primevue/button'
+import { usePrimeVue } from 'primevue/config'
+import { computed, onMounted } from 'vue'

 const { stack, rise, close } = useDialog()
+
+const { config } = usePrimeVue()
+
+const baseZIndex = computed(() => {
+  return config.zIndex?.modal ?? 1100
+})
+
+onMounted(() => {
+  for (const key in config.zIndex) {
+    config.zIndex[key] = baseZIndex.value
+  }
+})
 </script>
--- a/src/components/ModelBaseInfo.vue
+++ b/src/components/ModelBaseInfo.vue
@@ -49,15 +49,13 @@
 <script setup lang="ts">
 import ResponseInput from 'components/ResponseInput.vue'
 import ResponseSelect from 'components/ResponseSelect.vue'
-import { useConfig } from 'hooks/config'
 import { useModelBaseInfo } from 'hooks/model'
 import { computed } from 'vue'

 const editable = defineModel<boolean>('editable')

-const { modelFolders } = useConfig()
-
-const { baseInfo, pathIndex, basename, extension, type } = useModelBaseInfo()
+const { baseInfo, pathIndex, basename, extension, type, modelFolders } =
+  useModelBaseInfo()

 const typeOptions = computed(() => {
  return Object.keys(modelFolders.value).map((curr) => {
--- a/src/components/ModelCard.vue
+++ b/src/components/ModelCard.vue
@@ -1,6 +1,8 @@
 <template>
  <div
-    class="group/card relative w-full cursor-pointer select-none preview-aspect"
+    class="group/card relative cursor-pointer select-none"
+    :style="{ width: `${cardSize.width}px`, height: `${cardSize.height}px` }"
+    v-tooltip.top="{ value: model.basename, disabled: showModelName }"
    @click.stop="openDetailDialog"
  >
    <div class="h-full overflow-hidden rounded-lg">
@@ -18,9 +20,14 @@

    <div class="pointer-events-none absolute left-0 top-0 h-full w-full p-4">
      <div class="relative h-full w-full text-white">
-        <div class="absolute bottom-0 left-0">
+        <div v-show="showModelName" class="absolute bottom-0 left-0">
          <div class="drop-shadow-[0px_2px_2px_rgba(0,0,0,0.75)]">
-            <div class="line-clamp-3 break-all text-2xl font-bold @lg:text-lg">
+            <div
+              :class="[
+                'line-clamp-3 break-all font-bold',
+                $lg('text-lg', 'text-2xl'),
+              ]"
+            >
              {{ model.basename }}
            </div>
          </div>
@@ -28,13 +35,19 @@

        <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">
+            <div
+              v-show="showModelType"
+              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
+              v-show="showToolButton"
+              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"
@@ -66,6 +79,8 @@

 <script setup lang="ts">
 import DialogModelDetail from 'components/DialogModelDetail.vue'
+import { useConfig } from 'hooks/config'
+import { useContainerQueries } from 'hooks/container'
 import { useDialog } from 'hooks/dialog'
 import { useModelNodeAction } from 'hooks/model'
 import Button from 'primevue/button'
@@ -79,6 +94,8 @@ interface Props {

 const props = defineProps<Props>()

+const { cardSize } = useConfig()
+
 const dialog = useDialog()

 const openDetailDialog = () => {
@@ -99,6 +116,20 @@ const preview = computed(() =>
    : props.model.preview,
 )

+const showToolButton = computed(() => {
+  return cardSize.value.width >= 180 && cardSize.value.height >= 240
+})
+
+const showModelName = computed(() => {
+  return cardSize.value.width >= 160 && cardSize.value.height >= 120
+})
+
+const showModelType = computed(() => {
+  return cardSize.value.width >= 120
+})
+
 const { addModelNode, dragToAddModelNode, copyModelNode, loadPreviewWorkflow } =
  useModelNodeAction(props.model)
+
+const { $lg } = useContainerQueries()
 </script>
--- a/src/components/ModelContent.vue
+++ b/src/components/ModelContent.vue
@@ -1,11 +1,16 @@
 <template>
  <form
-    class="@container"
+    ref="container"
    @submit.prevent="handleSubmit"
    @reset.prevent="handleReset"
  >
    <div class="mx-auto w-full max-w-[50rem]">
-      <div class="relative flex flex-col gap-4 overflow-hidden @xl:flex-row">
+      <div
+        :class="[
+          'relative flex gap-4 overflow-hidden',
+          $xl('flex-row', 'flex-col'),
+        ]"
+      >
        <ModelPreview
          class="shrink-0"
          v-model:editable="editable"
@@ -43,6 +48,7 @@ import ModelBaseInfo from 'components/ModelBaseInfo.vue'
 import ModelDescription from 'components/ModelDescription.vue'
 import ModelMetadata from 'components/ModelMetadata.vue'
 import ModelPreview from 'components/ModelPreview.vue'
+import { useContainerQueries } from 'hooks/container'
 import {
  useModelBaseInfoEditor,
  useModelDescriptionEditor,
@@ -56,8 +62,8 @@ import TabList from 'primevue/tablist'
 import TabPanel from 'primevue/tabpanel'
 import TabPanels from 'primevue/tabpanels'
 import Tabs from 'primevue/tabs'
-import { BaseModel } from 'types/typings'
-import { toRaw, watch } from 'vue'
+import { BaseModel, WithResolved } from 'types/typings'
+import { ref, toRaw, watch } from 'vue'

 interface Props {
  model: BaseModel
@@ -67,7 +73,7 @@ const props = defineProps<Props>()
 const editable = defineModel<boolean>('editable')

 const emits = defineEmits<{
-  submit: [formData: BaseModel]
+  submit: [formData: WithResolved<BaseModel>]
  reset: []
 }>()

@@ -94,4 +100,7 @@ watch(
    handleReset()
  },
 )
+
+const container = ref<HTMLElement | null>(null)
+const { $xl } = useContainerQueries(container)
 </script>
--- a/src/components/ModelPreview.vue
+++ b/src/components/ModelPreview.vue
@@ -1,15 +1,9 @@
 <template>
-  <div
-    class="flex flex-col gap-4"
-    :style="{ ['--preview-width']: `${cardWidth}px` }"
-  >
+  <div class="flex flex-col gap-4">
    <div>
      <div
-        :class="[
-          'relative mx-auto w-full',
-          '@sm:w-[var(--preview-width)]',
-          'overflow-hidden rounded-lg preview-aspect',
-        ]"
+        class="relative mx-auto w-full overflow-hidden rounded-lg preview-aspect"
+        :style="$sm({ width: `${cardWidth}px` })"
      >
        <ResponseImage :src="preview" :error="noPreviewContent"></ResponseImage>

@@ -50,9 +44,8 @@
      <div class="h-10"></div>
      <div
        :class="[
-          'flex h-10 items-center gap-4',
-          'absolute left-1/2 -translate-x-1/2',
-          '@xl:left-0 @xl:translate-x-0',
+          'absolute flex h-10 items-center gap-4',
+          $xl('left-0 translate-x-0', 'left-1/2 -translate-x-1/2'),
        ]"
      >
        <Button
@@ -92,6 +85,7 @@ import ResponseFileUpload from 'components/ResponseFileUpload.vue'
 import ResponseImage from 'components/ResponseImage.vue'
 import ResponseInput from 'components/ResponseInput.vue'
 import { useConfig } from 'hooks/config'
+import { useContainerQueries } from 'hooks/container'
 import { useModelPreview } from 'hooks/model'
 import Button from 'primevue/button'
 import Carousel from 'primevue/carousel'
@@ -109,4 +103,6 @@ const {
  updateLocalContent,
  noPreviewContent,
 } = useModelPreview()
+
+const { $sm, $xl } = useContainerQueries()
 </script>
--- a/src/components/ResponseScroll.vue
+++ b/src/components/ResponseScroll.vue
@@ -1,316 +1,140 @@
 <template>
-  <div data-scroll-area class="group/scroll relative overflow-hidden">
-    <div
-      ref="viewport"
-      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">
+  <div class="group/scroll relative overflow-hidden">
+    <div ref="viewport" class="h-full w-full overflow-auto scrollbar-none">
+      <div ref="content">
        <slot name="default">
-          <div
-            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">
+          <slot v-if="renderedItems.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
-      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 ref="scroll" class="absolute right-0 top-0 h-full w-2">
      <div
-        v-bind="{ ['data-scroll-thumb']: scroll.direction }"
+        ref="thumb"
        :class="[
-          'pointer-events-auto absolute h-full w-full rounded-full',
-          'cursor-pointer bg-black dark:bg-white',
-          'opacity-0 transition-opacity duration-300 group-hover/scroll:opacity-10',
+          'absolute w-full cursor-pointer rounded-full bg-gray-500',
+          'opacity-0 transition-opacity duration-300 group-hover/scroll:opacity-30',
        ]"
        :style="{
-          [scrollbarAttrs[scroll.direction].size]: `${scroll.size}px`,
-          [scrollbarAttrs[scroll.direction].offset]: `${scroll.offset}px`,
-          opacity: isDragging ? 0.1 : '',
+          height: `${thumbSize}px`,
+          top: `${thumbOffset}px`,
+          opacity: isDragging ? '0.3' : undefined,
        }"
-        @mousedown="startDragThumb"
      ></div>
    </div>
  </div>
 </template>

 <script setup lang="ts" generic="T">
-import { defineResizeCallback } from 'hooks/resize'
-import { clamp, throttle } from 'lodash'
-import { nextTick, onUnmounted, ref, watch } from 'vue'
+import { useDraggable, useElementSize, useScroll } from '@vueuse/core'
+import { clamp } from 'lodash'
+import { computed, ref } from 'vue'

 interface ScrollAreaProps {
-  items?: T[][]
+  items?: (T & { key: string })[]
  itemSize?: number
-  scrollbar?: boolean
-  rowKey?: string | ((item: T[]) => string)
 }

-const props = withDefaults(defineProps<ScrollAreaProps>(), {
-  scrollbar: true,
-})
-const emit = defineEmits(['scroll', 'resize'])
+const props = defineProps<ScrollAreaProps>()

-type ScrollbarDirection = 'horizontal' | 'vertical'
+const viewport = ref<HTMLElement | null>(null)
+const content = ref<HTMLElement | null>(null)

-interface Scrollbar {
-  direction: ScrollbarDirection
-  visible: boolean
-  size: number
-  offset: number
-}
+const { height: viewportHeight } = useElementSize(viewport)
+const { height: contentHeight } = useElementSize(content)
+const { y: scrollY } = useScroll(viewport)

-interface ScrollbarAttribute {
-  clientSize: string
-  scrollOffset: string
-  pagePosition: string
-  offset: string
-  size: string
-}
+const itemSize = computed(() => props.itemSize || 0)

-const scrollbarAttrs: Record<ScrollbarDirection, ScrollbarAttribute> = {
-  horizontal: {
-    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 viewRows = computed(() =>
+  Math.ceil(viewportHeight.value / itemSize.value),
 )
+const offsetRows = computed(() => Math.floor(scrollY.value / itemSize.value))

-onUnmounted(() => {
-  stopMoveThumb()
+const items = computed(() => {
+  return props.items ?? []
 })

-defineExpose({
-  viewport,
-  init,
+const state = computed(() => {
+  const bufferRows = viewRows.value
+
+  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>
--- a/src/components/ResponseSelect.vue
+++ b/src/components/ResponseSelect.vue
@@ -27,12 +27,7 @@
  </slot>

  <div v-else class="relative flex-1 overflow-hidden">
-    <div
-      ref="scrollArea"
-      class="h-full w-full overflow-auto scrollbar-none"
-      v-resize="checkScrollPosition"
-      @scroll="checkScrollPosition"
-    >
+    <div ref="scrollArea" class="h-full w-full overflow-auto scrollbar-none">
      <div ref="contentArea" class="table max-w-full">
        <div
          v-show="showControlButton && scrollPosition !== 'left'"
@@ -130,7 +125,13 @@
  <slot v-else name="desktop">
    <slot name="container">
      <slot name="desktop:container">
-        <Menu ref="menu" :model="items" :popup="true" :base-z-index="1000">
+        <Menu
+          ref="menu"
+          :model="items"
+          :popup="true"
+          :base-z-index="1000"
+          :pt:root:style="{ maxHeight: '300px', overflowX: 'hidden' }"
+        >
          <template #item="{ item }">
            <slot name="item" :item="item">
              <slot name="desktop:container:item" :item="item">
@@ -150,12 +151,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()

@@ -196,7 +198,7 @@ const toggle = (event: MouseEvent) => {
 }

 // Select Button Type
-const scrollArea = ref()
+const scrollArea = ref<HTMLElement | null>(null)
 const contentArea = ref()

 type ScrollPosition = 'left' | 'right'
@@ -236,4 +238,16 @@ const checkScrollPosition = () => {
  scrollPosition.value = position
  showControlButton.value = contentWidth > containerWidth
 }
+
+const { width, height } = useElementSize(scrollArea)
+
+watch([width, height], () => {
+  checkScrollPosition()
+})
+
+useScroll(scrollArea, {
+  onScroll: () => {
+    checkScrollPosition()
+  },
+})
 </script>
--- a/src/components/SettingCardSize.vue
+++ b/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>
--- a/src/hooks/config.ts
+++ b/src/hooks/config.ts
@@ -1,17 +1,17 @@
-import { request, useRequest } from 'hooks/request'
+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)

-  type ModelFolder = Record<string, string[]>
-  const { data: modelFolders, refresh: refreshModelFolders } =
-    useRequest<ModelFolder>('/base-folders')
-
  const checkDeviceType = () => {
    isMobile.value = window.innerWidth < mobileDeviceBreakPoint
  }
@@ -24,19 +24,59 @@ export const useConfig = defineStore('config', (store) => {
    window.removeEventListener('resize', checkDeviceType)
  })

-  const refresh = async () => {
-    return Promise.all([refreshModelFolders()])
-  }
+  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,
-    modelFolders,
-    refresh,
+    dialog: {
+      showCardSizeSetting: () => {
+        store.dialog.open({
+          key: 'setting.cardSize',
+          title: t('setting.cardSize'),
+          content: SettingCardSize,
+          defaultSize: {
+            width: 500,
+            height: 390,
+          },
+        })
+      },
+    },
  }

+  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
@@ -50,8 +90,13 @@ declare module 'hooks/store' {
  }
 }

+export const configSetting = {
+  excludeScanTypes: 'ModelManager.Scan.excludeScanTypes',
+}
+
 function useAddConfigSettings(store: import('hooks/store').StoreProvider) {
  const { toast } = useToast()
+  const { t } = useI18n()

  const confirm = (opts: {
    message?: string
@@ -89,6 +134,7 @@ function useAddConfigSettings(store: import('hooks/store').StoreProvider) {
    // API keys
    app.ui?.settings.addSetting({
      id: 'ModelManager.APIKey.HuggingFace',
+      category: [t('modelManager'), t('setting.apiKey'), 'HuggingFace'],
      name: 'HuggingFace API Key',
      type: 'text',
      defaultValue: undefined,
@@ -96,61 +142,41 @@ function useAddConfigSettings(store: import('hooks/store').StoreProvider) {

    app.ui?.settings.addSetting({
      id: 'ModelManager.APIKey.Civitai',
+      category: [t('modelManager'), t('setting.apiKey'), 'Civitai'],
      name: 'Civitai API Key',
      type: 'text',
      defaultValue: undefined,
    })

-    // Migrate
+    const defaultCardSize = store.config.defaultCardSizeMap
+
    app.ui?.settings.addSetting({
-      id: 'ModelManager.Migrate.Migrate',
-      name: 'Migrate information from cdb-boop/main',
-      defaultValue: '',
-      type: () => {
-        return $el('button.p-button.p-component.p-button-secondary', {
-          textContent: 'Migrate',
-          onclick: () => {
-            confirm({
-              message: [
-                'This operation will delete old files and override current files if it exists.',
-                // 'This may take a while and generate MANY server requests!',
-                'Continue?',
-              ].join('\n'),
-              accept: () => {
-                store.loading.loading.value = true
-                request('/migrate', {
-                  method: 'POST',
-                })
-                  .then(() => {
-                    toast.add({
-                      severity: 'success',
-                      summary: 'Complete migration',
-                      life: 2000,
-                    })
-                    store.models.refresh()
-                  })
-                  .catch((err) => {
-                    toast.add({
-                      severity: 'error',
-                      summary: 'Error',
-                      detail: err.message ?? 'Failed to migrate information',
-                      life: 15000,
-                    })
-                  })
-                  .finally(() => {
-                    store.loading.loading.value = false
-                  })
-              },
-            })
-          },
-        })
+      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)
      },
    })

    // Scan information
    app.ui?.settings.addSetting({
      id: 'ModelManager.ScanFiles.Full',
-      name: "Override all models' information and preview",
+      category: [t('modelManager'), t('setting.scan'), 'Full'],
+      name: t('setting.scanAll'),
      defaultValue: '',
      type: () => {
        return $el('button.p-button.p-component.p-button-secondary', {
@@ -196,7 +222,8 @@ function useAddConfigSettings(store: import('hooks/store').StoreProvider) {

    app.ui?.settings.addSetting({
      id: 'ModelManager.ScanFiles.Incremental',
-      name: 'Download missing information or preview',
+      category: [t('modelManager'), t('setting.scan'), 'Incremental'],
+      name: t('setting.scanMissing'),
      defaultValue: '',
      type: () => {
        return $el('button.p-button.p-component.p-button-secondary', {
@@ -239,5 +266,21 @@ function useAddConfigSettings(store: import('hooks/store').StoreProvider) {
        })
      },
    })
+
+    app.ui?.settings.addSetting({
+      id: configSetting.excludeScanTypes,
+      category: [t('modelManager'), t('setting.scan'), 'ExcludeScanTypes'],
+      name: t('setting.excludeScanTypes'),
+      defaultValue: undefined,
+      type: 'text',
+    })
+
+    app.ui?.settings.addSetting({
+      id: 'ModelManager.Scan.IncludeHiddenFiles',
+      category: [t('modelManager'), t('setting.scan'), 'IncludeHiddenFiles'],
+      name: t('setting.includeHiddenFiles'),
+      defaultValue: false,
+      type: 'boolean',
+    })
  })
 }
--- a/src/hooks/container.ts
+++ b/src/hooks/container.ts
@@ -0,0 +1,41 @@
+import { useElementSize } from '@vueuse/core'
+import { type InjectionKey, type Ref, inject, provide, toRef } from 'vue'
+
+const rem = parseFloat(getComputedStyle(document.documentElement).fontSize)
+
+const containerKey = Symbol('container') as InjectionKey<
+  Ref<HTMLElement | null>
+>
+
+export const useContainerQueries = (
+  el?: HTMLElement | null | Ref<HTMLElement | null>,
+) => {
+  const container = inject(containerKey, el ? toRef(el) : toRef(document.body))
+
+  provide(containerKey, container)
+
+  const { width } = useElementSize(container)
+
+  /**
+   * @param size unit rem
+   */
+  const generator = (size: number) => {
+    return (content: any, defaultContent: any = undefined) => {
+      return width.value > size * rem ? content : defaultContent
+    }
+  }
+
+  return {
+    $xs: generator(20),
+    $sm: generator(24),
+    $md: generator(28),
+    $lg: generator(32),
+    $xl: generator(36),
+    $2xl: generator(42),
+    $3xl: generator(48),
+    $4xl: generator(54),
+    $5xl: generator(60),
+    $6xl: generator(66),
+    $7xl: generator(72),
+  }
+}
--- a/src/hooks/dialog.ts
+++ b/src/hooks/dialog.ts
@@ -49,7 +49,12 @@ export const useDialog = defineStore('dialog', () => {
    }
  }

-  const close = (dialog: { key: string }) => {
+  const close = (dialog?: { key: string }) => {
+    if (!dialog) {
+      stack.value.pop()
+      return
+    }
+
    const item = stack.value.find((item) => item.key === dialog.key)
    if (item?.keepAlive) {
      item.visible = false
--- a/src/hooks/loading.ts
+++ b/src/hooks/loading.ts
@@ -38,19 +38,19 @@ declare module 'hooks/store' {
 }

 export const useLoading = () => {
-  const timer = ref<NodeJS.Timeout>()
+  const targetTimer = ref<Record<string, NodeJS.Timeout | undefined>>({})

-  const show = () => {
-    timer.value = setTimeout(() => {
-      timer.value = undefined
+  const show = (target: string = '_default') => {
+    targetTimer.value[target] = setTimeout(() => {
+      targetTimer.value[target] = undefined
      globalLoading.show()
    }, 200)
  }

-  const hide = () => {
-    if (timer.value) {
-      clearTimeout(timer.value)
-      timer.value = undefined
+  const hide = (target: string = '_default') => {
+    if (targetTimer.value[target]) {
+      clearTimeout(targetTimer.value[target])
+      targetTimer.value[target] = undefined
    } else {
      globalLoading.hide()
    }
--- a/src/hooks/model.ts
+++ b/src/hooks/model.ts
@@ -1,13 +1,12 @@
-import { useConfig } from 'hooks/config'
 import { useLoading } from 'hooks/loading'
 import { useMarkdown } from 'hooks/markdown'
-import { request, useRequest } from 'hooks/request'
+import { request } from 'hooks/request'
 import { defineStore } from 'hooks/store'
 import { useToast } from 'hooks/toast'
-import { cloneDeep } from 'lodash'
+import { castArray, cloneDeep } from 'lodash'
 import { app } from 'scripts/comfyAPI'
-import { BaseModel, Model, SelectEvent } from 'types/typings'
-import { bytesToSize, formatDate } from 'utils/common'
+import { BaseModel, Model, SelectEvent, WithResolved } from 'types/typings'
+import { bytesToSize, formatDate, previewUrlToFile } from 'utils/common'
 import { ModelGrid } from 'utils/legacy'
 import { genModelKey, resolveModelTypeLoader } from 'utils/model'
 import {
@@ -21,25 +20,84 @@ import {
  unref,
 } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { configSetting } from './config'
+
+type ModelFolder = Record<string, string[]>
+
+const modelFolderProvideKey = Symbol('modelFolder')

 export const useModels = defineStore('models', (store) => {
-  const { data, refresh } = useRequest<Model[]>('/models', { defaultValue: [] })
  const { toast, confirm } = useToast()
  const { t } = useI18n()
  const loading = useLoading()

-  const updateModel = async (model: BaseModel, data: BaseModel) => {
-    const updateData = new Map()
+  const folders = ref<ModelFolder>({})
+  const refreshFolders = async () => {
+    return request('/models').then((resData) => {
+      folders.value = resData
+    })
+  }
+
+  provide(modelFolderProvideKey, folders)
+
+  const models = ref<Record<string, Model[]>>({})
+
+  const refreshModels = async (folder: string) => {
+    loading.show(folder)
+    return request(`/models/${folder}`)
+      .then((resData) => {
+        models.value[folder] = resData
+        return resData
+      })
+      .finally(() => {
+        loading.hide(folder)
+      })
+  }
+
+  const refreshAllModels = async (force = false) => {
+    const forceRefresh = force ? refreshFolders() : Promise.resolve()
+    models.value = {}
+    const excludeScanTypes = app.ui?.settings.getSettingValue<string>(
+      configSetting.excludeScanTypes,
+    )
+    const customBlackList =
+      excludeScanTypes
+        ?.split(',')
+        .map((type) => type.trim())
+        .filter(Boolean) ?? []
+    return forceRefresh.then(() =>
+      Promise.allSettled(
+        Object.keys(folders.value)
+          .filter((folder) => !customBlackList.includes(folder))
+          .map(refreshModels),
+      ),
+    )
+  }
+
+  const updateModel = async (
+    model: BaseModel,
+    data: WithResolved<BaseModel>,
+  ) => {
+    const updateData = new FormData()
    let oldKey: string | null = null
+    let needUpdate = false

    // Check current preview
    if (model.preview !== data.preview) {
-      updateData.set('previewFile', data.preview)
+      const preview = data.preview
+      if (preview) {
+        const previewFile = await previewUrlToFile(data.preview as string)
+        updateData.set('previewFile', previewFile)
+      } else {
+        updateData.set('previewFile', 'undefined')
+      }
+      needUpdate = true
    }

    // Check current description
    if (model.description !== data.description) {
      updateData.set('description', data.description)
+      needUpdate = true
    }

    // Check current name and pathIndex
@@ -51,16 +109,17 @@ export const useModels = defineStore('models', (store) => {
      updateData.set('type', data.type)
      updateData.set('pathIndex', data.pathIndex.toString())
      updateData.set('fullname', data.fullname)
+      needUpdate = true
    }

-    if (updateData.size === 0) {
+    if (!needUpdate) {
      return
    }

    loading.show()
    await request(`/model/${model.type}/${model.pathIndex}/${model.fullname}`, {
      method: 'PUT',
-      body: JSON.stringify(Object.fromEntries(updateData.entries())),
+      body: updateData,
    })
      .catch((err) => {
        const error_message = err.message ?? err.error
@@ -80,7 +139,7 @@ export const useModels = defineStore('models', (store) => {
      store.dialog.close({ key: oldKey })
    }

-    refresh()
+    refreshModels(data.type)
  }

  const deleteModel = async (model: BaseModel) => {
@@ -112,7 +171,7 @@ export const useModels = defineStore('models', (store) => {
                life: 2000,
              })
              store.dialog.close({ key: dialogKey })
-              return refresh()
+              return refreshModels(model.type)
            })
            .then(() => {
              resolve(void 0)
@@ -136,7 +195,13 @@ export const useModels = defineStore('models', (store) => {
    })
  }

-  return { data, refresh, remove: deleteModel, update: updateModel }
+  return {
+    folders: folders,
+    data: models,
+    refresh: refreshAllModels,
+    remove: deleteModel,
+    update: updateModel,
+  }
 })

 declare module 'hooks/store' {
@@ -164,15 +229,15 @@ export const useModelFormData = (getFormData: () => BaseModel) => {
    }
  }

-  type SubmitCallback = (data: BaseModel) => void
+  type SubmitCallback = (data: WithResolved<BaseModel>) => void
  const submitCallback = ref<SubmitCallback[]>([])

  const registerSubmit = (callback: SubmitCallback) => {
    submitCallback.value.push(callback)
  }

-  const submit = () => {
-    const data = cloneDeep(toRaw(unref(formData)))
+  const submit = (): WithResolved<BaseModel> => {
+    const data: any = cloneDeep(toRaw(unref(formData)))
    for (const callback of submitCallback.value) {
      callback(data)
    }
@@ -204,7 +269,10 @@ const baseInfoKey = Symbol('baseInfo') as InjectionKey<
 export const useModelBaseInfoEditor = (formInstance: ModelFormInstance) => {
  const { formData: model, modelData } = formInstance

-  const { modelFolders } = useConfig()
+  const provideModelFolders = inject<any>(modelFolderProvideKey)
+  const modelFolders = computed<ModelFolder>(() => {
+    return provideModelFolders?.value ?? {}
+  })

  const type = computed({
    get: () => {
@@ -304,6 +372,7 @@ export const useModelBaseInfoEditor = (formInstance: ModelFormInstance) => {
    basename,
    extension,
    pathIndex,
+    modelFolders,
  }

  provide(baseInfoKey, result)
@@ -338,9 +407,7 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
   * Default images
   */
  const defaultContent = computed(() => {
-    return Array.isArray(model.value.preview)
-      ? model.value.preview
-      : [model.value.preview]
+    return model.value.preview ? castArray(model.value.preview) : []
  })
  const defaultContentPage = ref(0)

@@ -379,7 +446,7 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
        content = localContent.value
        break
      default:
-        content = noPreviewContent.value
+        content = undefined
        break
    }

@@ -395,7 +462,7 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
    })

    registerSubmit((data) => {
-      data.preview = preview.value ?? noPreviewContent.value
+      data.preview = preview.value
    })
  })

--- a/src/hooks/resize.ts
+++ b/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)
-}
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -1,3 +1,4 @@
+import { app } from 'scripts/comfyAPI'
 import { createI18n } from 'vue-i18n'

 const messages = {
@@ -24,12 +25,24 @@ 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',
@@ -38,6 +51,18 @@ const messages = {
      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',
+    },
  },
  zh: {
    model: '模型',
@@ -62,12 +87,24 @@ const messages = {
    none: '无',
    uploadFile: '上传文件',
    tapToChange: '点击描述可更改内容',
+    name: '名称',
+    width: '宽度',
+    height: '高度',
+    reset: '重置',
    sort: {
      name: '名称',
      size: '最大',
      created: '最新创建',
      modified: '最新修改',
    },
+    size: {
+      extraLarge: '超大图标',
+      large: '大图标',
+      medium: '中等图标',
+      small: '小图标',
+      custom: '自定义尺寸',
+      customTip: '在 `设置 > 模型管理器 > 外观` 中设置',
+    },
    info: {
      type: '类型',
      pathIndex: '目录',
@@ -76,16 +113,28 @@ const messages = {
      createdAt: '创建时间',
      updatedAt: '更新时间',
    },
+    setting: {
+      apiKey: '密钥',
+      cardHeight: '卡片高度',
+      cardWidth: '卡片宽度',
+      scan: '扫描',
+      scanMissing: '下载缺失的信息或预览图片',
+      scanAll: '覆盖所有模型信息和预览图片',
+      includeHiddenFiles: '包含隐藏文件(以 . 开头的文件或文件夹)',
+      excludeScanTypes: '排除扫描类型(使用英文逗号隔开)',
+      ui: '外观',
+      cardSize: '卡片尺寸',
+    },
  },
 }

 const getLocalLanguage = () => {
  const local =
-    localStorage.getItem('Comfy.Settings.Comfy.Locale') ||
+    app.ui?.settings.getSettingValue<string>('Comfy.Locale') ||
    navigator.language.split('-')[0] ||
    'en'

-  return local.replace(/['"]/g, '')
+  return local
 }

 export const i18n = createI18n({
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,5 @@
 import { definePreset } from '@primevue/themes'
 import Aura from '@primevue/themes/aura'
-import { resizeDirective } from 'hooks/resize'
 import PrimeVue from 'primevue/config'
 import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
@@ -20,7 +19,6 @@ const ComfyUIPreset = definePreset(Aura, {
 function createVueApp(rootContainer: string | HTMLElement) {
  const app = createApp(App)
  app.directive('tooltip', Tooltip)
-  app.directive('resize', resizeDirective)
  app
    .use(PrimeVue, {
      theme: {
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -155,8 +155,10 @@ 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
    }
  }

--- a/src/types/shims.d.ts
+++ b/src/types/shims.d.ts
@@ -1,11 +1,5 @@
 export {}

-declare module 'vue' {
-  interface ComponentCustomProperties {
-    vResize: (typeof import('hooks/resize'))['resizeDirective']
-  }
-}
-
 declare module 'hooks/store' {
  interface StoreProvider {}
 }
--- a/src/types/typings.d.ts
+++ b/src/types/typings.d.ts
@@ -26,6 +26,10 @@ export interface VersionModel extends BaseModel {
  hashes?: Record<string, string>
 }

+export type WithResolved<T> = Omit<T, 'preview'> & {
+  preview: string | undefined
+}
+
 export type PassThrough<T = void> = T | object | undefined

 export interface SelectOptions {
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -26,3 +26,14 @@ export const bytesToSize = (
 export const formatDate = (date: number | string | Date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
 }
+
+export const previewUrlToFile = async (url: string) => {
+  return fetch(url)
+    .then((res) => res.blob())
+    .then((blob) => {
+      const type = blob.type
+      const extension = type.split('/')[1]
+      const file = new File([blob], `preview.${extension}`, { type })
+      return file
+    })
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,3 @@
-import container from '@tailwindcss/container-queries'
 import plugin from 'tailwindcss/plugin'

 /** @type {import('tailwindcss').Config} */
@@ -8,7 +7,6 @@ export default {
  darkMode: ['selector', '.dark-theme'],

  plugins: [
-    container,
    plugin(({ addUtilities }) => {
      addUtilities({
        '.scrollbar-none': {
Author	SHA1	Message	Date
Hayden	7e58d0a82d	fix(setting): no modified value saved (#130 ) * fix: save setting value * prepare release 2.3.3	2025-02-10 13:51:45 +08:00
Hayden	55a4eff01b	prepare releas 2.3.2	2025-02-10 12:42:29 +08:00
Hayden	45cf18299f	feat: optimize resize card size (#129 )	2025-02-10 12:41:00 +08:00
Hayden	c7898c47f1	fix: unpack folder_names_and_paths error (#128 )	2025-02-10 10:59:36 +08:00
Hayden	17ab373b9c	fix: change model size type to float (#126 )	2025-02-06 12:02:00 +08:00
boeto	f6368fe20b	fix: model preview path (#120 )	2025-02-04 20:27:00 +08:00
Hayden	92f2d5ab9e	Fix unable to install (#119 ) * fix: release without requirements.txt * prepare release 2.3.1	2025-02-04 11:12:15 +08:00
boeto	130c75f5bf	fix huggingface download with tokens (#116 )	2025-02-03 20:30:07 +08:00
Hayden	921dabc057	pref: optimize scan cost (#117 )	2025-02-03 20:19:02 +08:00
Hayden	ac21c8015d	style: optimize toolbar layout (#115 )	2025-02-03 16:52:37 +08:00
Hayden	123b46fa88	prepare release 2.3.0	2025-02-03 16:41:24 +08:00
Hayden	6a77554932	Feat resize model card (#104 ) * feat: Use setting definition card size * refactor: Optimize computed value of the list items - Add useContainerResize hooks - Remove v-resize - Change cols to computed * refactor(ModelCard): Optimize style - Control the display of button or name in difference sizes - Add name tooltip when hiding name * feat: Add i18n * pref: optimize style code structure * feat: add quick resize card size * feat: add custom size tooltip * feat: optimize card tool button display judgment	2025-02-03 16:40:33 +08:00
Hayden	faf4c15865	Pref hooks (#113 ) * pref: replace useContainerResize * pref: replace useContainerScroll	2025-02-02 19:54:23 +08:00
Hayden	f079d8bde5	feat: add scroll thumb draggable (#112 ) add dependencies @vueuse/core	2025-02-02 19:44:44 +08:00
Hayden	56a2deb4eb	pref: optimize virtual scroll (#111 )	2025-02-02 16:42:25 +08:00
Hayden	448ea4b1ba	pref: use hooks instead of directive (#108 ) - remove v-resize - add useContainerResize - remove v-container - add useContainerQueries - add useContainerScroll	2025-02-01 11:56:17 +08:00
Hayden	e5d9950429	fix: overlay zIndex (#109 )	2025-02-01 11:55:58 +08:00
Hayden	e7e2f4ce78	fix: set base-z-index (#107 )	2025-01-31 11:53:01 +08:00
Hayden	0575124d35	Refactor code structure (#106 ) * refactor: rename searcher.py to information.py * refactor: move the routes into each sub-modules * refactor: move services's func into sub-modules	2025-01-30 21:06:24 +08:00
Hayden	4df226be82	feat: add deprecated decorator (#105 )	2025-01-30 10:04:56 +08:00
Hayden	1ba80fab2e	prepare release 2.2.3	2025-01-16 10:24:42 +08:00
Hayden	b9e637049a	fix: Inability to Scroll model dir list (#101 )	2025-01-16 10:23:51 +08:00
Hayden	bfccc6f04f	fix: can't change or delete preview (#100 )	2025-01-15 16:48:41 +08:00
Hayden	89c249542a	fix: cant't close create task dialog (#98 )	2025-01-15 16:11:21 +08:00
Hayden	136bc0ecd5	feat(dialog): Optimize dialog closing logic (#97 ) - Add optional parameters to the close function to support parameterless calling - When the dialog parameter is not provided, automatically close the dialog box on the top of the stack	2025-01-15 16:03:46 +08:00
Hayden	8653af1f14	fix: misplaced preview buttons (#96 )	2025-01-14 16:05:11 +08:00
Hayden	354b5c840a	feat: allow multi create task dialog (#95 )	2025-01-14 11:27:05 +08:00
Hayden	be383ac6e1	fix: potential bug after adding excluded directories (#94 ) * Revert "fix: missing parameter (#93)" This reverts commit `c2406a1fd1`. * Revert "feat: add exclude scan model types (#92)" This reverts commit `40a1a7f43a`. * feat: add exclude scan model types * fix: potential bug after adding excluded directories	2025-01-14 11:04:41 +08:00
Hayden	c2406a1fd1	fix: missing parameter (#93 )	2025-01-13 15:58:11 +08:00
Hayden	4132b2d8c4	prepare release 2.2.0	2025-01-13 15:16:31 +08:00
Hayden	40a1a7f43a	feat: add exclude scan model types (#92 )	2025-01-13 15:15:32 +08:00
Hayden	14bb6f194d	Fix: i18n settings (#91 ) * fix(i18n): Getting language configuration exception * feat(i18n): Change settings display	2025-01-13 11:58:17 +08:00
Hayden	97b26549ce	feat: Remove migration functionality (#89 )	2025-01-10 17:11:15 +08:00
Hayden	e75275dfff	fix: Container queries occasionally fail (#88 ) - Use js dynamic calculation instead of container query - Remove @tailwindcss/container-queries	2025-01-10 16:04:49 +08:00
Robin Huang	c1e89eb177	chore(licence-update): Update PyProject Toml - License (#87 ) Co-authored-by: snomiao <snomiao+comfy-pr@gmail.com>	2025-01-09 10:16:53 +08:00
Hayden	bfedcb2a7d	prepare release 2.1.6	2024-12-08 15:33:09 +08:00
Hayden	1d01ce009f	Fixed infinite Load (#79 )	2024-12-08 15:31:50 +08:00
Hayden	5c017137b0	Fixed the loading could not be closed correctly (#77 ) * Fix hide loading before show it * Release hotfix	2024-12-06 22:23:11 +08:00
Hayden	00d23ff74f	prepare release 2.1.4 Optimize models request API	2024-12-03 14:14:11 +08:00
Hayden	dc46f498be	Split model get list (#74 ) Get the model list separately by model type and defer the request.	2024-12-03 14:05:18 +08:00
Hayden	6d67b00b17	Fix publishing failed (#69 )	2024-11-29 09:40:25 +08:00
Hayden	cda24405b5	prepare release 2.1.3	2024-11-28 13:03:06 +08:00
Hayden	6fa90be8c4	Fix preview path (#66 )	2024-11-28 13:02:36 +08:00
Hayden	5a28789af7	prepare release 2.1.2	2024-11-28 12:07:45 +08:00
Hayden	dada903b2b	Feature scan extra folders (#65 ) * scan extra folders Other extension may be add models folder in folder_paths * Fix scanned non-model files Model file suffix specified	2024-11-28 12:04:23 +08:00
Hayden	e8916307aa	Skip hidden model files (#64 )	2024-11-28 12:01:55 +08:00
Hayden	8b6c6ebdea	Fix some minor bug (#62 ) * Fix print info * Delete empty line	2024-11-25 15:58:18 +08:00
Hayden	1796b101c5	Fix missing preview (#56 ) * fix: can't scan .preview.ext file * realse fix	2024-11-22 17:44:46 +08:00