prepare release 2.2.3

- 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

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`

__init__.py

@@ -89,6 +89,7 @@ async def delete_model_download_task(request):
         return web.json_response({"success": False, "error": error_msg})
 
 
+# @deprecated
 @routes.get("/model-manager/base-folders")
 async def get_model_paths(request):
     """
@@ -113,7 +114,8 @@ async def create_model(request):
     - downloadUrl: download url.
     - hash: a JSON string containing the hash value of the downloaded model.
     """
-    task_data = await request.json()
+    task_data = await request.post()
+    task_data = dict(task_data)
     try:
         task_id = await services.create_model_download_task(task_data, request)
         return web.json_response({"success": True, "data": {"taskId": task_id}})
@@ -124,12 +126,12 @@ async def create_model(request):
 
 
 @routes.get("/model-manager/models")
-async def read_models(request):
+async def list_model_types(request):
     """
     Scan all models and read their information.
     """
     try:
-        result = services.scan_models(request)
+        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)}"
@@ -137,6 +139,18 @@ async def read_models(request):
         return web.json_response({"success": False, "error": error_msg})
 
 
+@routes.get("/model-manager/models/{folder}")
+async def read_models(request):
+    try:
+        folder = request.match_info.get("folder", None)
+        results = services.scan_models(folder, request)
+        return web.json_response({"success": True, "data": results})
+    except Exception as e:
+        error_msg = f"Read models failed: {str(e)}"
+        utils.print_error(error_msg)
+        return web.json_response({"success": False, "error": error_msg})
+
+
 @routes.get("/model-manager/model/{type}/{index}/{filename:.*}")
 async def read_model_info(request):
     """
@@ -173,7 +187,8 @@ async def update_model(request):
     index = int(request.match_info.get("index", None))
     filename = request.match_info.get("filename", None)
 
-    model_data: dict = await request.json()
+    model_data = await request.post()
+    model_data = dict(model_data)
 
     try:
         model_path = utils.get_valid_full_path(model_type, index, filename)
@@ -281,20 +296,6 @@ async def read_download_preview(request):
     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(request)
-        return web.json_response({"success": True})
-    except Exception as e:
-        error_msg = f"Migrate model info failed: {str(e)}"
-        utils.print_error(error_msg)
-        return web.json_response({"success": False, "error": error_msg})
-
-
 WEB_DIRECTORY = "web"
 NODE_CLASS_MAPPINGS = {}
 __all__ = ["WEB_DIRECTORY", "NODE_CLASS_MAPPINGS"]

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

pnpm-lock.yaml

@@ -36,9 +36,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 +467,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==}
 
@@ -2000,10 +1992,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': {}

py/download.py

@@ -180,8 +180,8 @@ async def create_model_download_task(task_data: dict, request):
         raise RuntimeError(f"Task {task_id} already exists")
 
     try:
-        preview_url = task_data.pop("preview", None)
-        utils.save_model_preview_image(task_path, preview_url)
+        previewFile = task_data.pop("previewFile", None)
+        utils.save_model_preview_image(task_path, previewFile)
         set_task_content(task_id, task_data)
         task_status = TaskStatus(
             taskId=task_id,
@@ -361,9 +361,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,9 +374,7 @@ 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.

py/services.py

@@ -2,53 +2,51 @@ import os
 
 import folder_paths
 
-from . import config
 from . import utils
 from . import download
 from . import searcher
 
 
-def scan_models(request):
+def scan_models(folder: str, request):
     result = []
-    model_base_paths = utils.resolve_model_base_paths()
-    for model_type in model_base_paths:
 
-        folders, extensions = folder_paths.folder_names_and_paths[model_type]
-        for path_index, base_path in enumerate(folders):
-            files = utils.recursive_search_files(base_path, request)
+    folders, extensions = folder_paths.folder_names_and_paths[folder]
+    for path_index, base_path in enumerate(folders):
+        files = utils.recursive_search_files(base_path, request)
 
-            models = folder_paths.filter_files_extensions(files, folder_paths.supported_pt_extensions)
+        models = folder_paths.filter_files_extensions(files, folder_paths.supported_pt_extensions)
 
-            for fullname in models:
-                fullname = utils.normalize_path(fullname)
-                basename = os.path.splitext(fullname)[0]
-                extension = os.path.splitext(fullname)[1]
+        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)
+            abs_path = utils.join_path(base_path, fullname)
+            file_stats = os.stat(abs_path)
 
-                # Resolve preview
-                image_name = utils.get_model_preview_name(abs_path)
-                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}"
+            # Resolve preview
+            image_name = utils.get_model_preview_name(abs_path)
+            image_name = utils.join_path(os.path.dirname(fullname), image_name)
+            abs_image_path = utils.join_path(base_path, image_name)
+            if os.path.isfile(abs_image_path):
+                image_state = os.stat(abs_image_path)
+                image_timestamp = round(image_state.st_mtime_ns / 1000000)
+                image_name = f"{image_name}?ts={image_timestamp}"
+            model_preview = f"/model-manager/preview/{folder}/{path_index}/{image_name}"
 
-                model_info = {
-                    "fullname": fullname,
-                    "basename": basename,
-                    "extension": extension,
-                    "type": 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),
-                }
+            model_info = {
+                "fullname": fullname,
+                "basename": basename,
+                "extension": extension,
+                "type": folder,
+                "pathIndex": path_index,
+                "sizeBytes": file_stats.st_size,
+                "preview": model_preview,
+                "createdAt": round(file_stats.st_ctime_ns / 1000000),
+                "updatedAt": round(file_stats.st_mtime_ns / 1000000),
+            }
 
-                result.append(model_info)
+            result.append(model_info)
 
     return result
 
@@ -75,7 +73,10 @@ 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 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"]
@@ -190,86 +191,3 @@ async def download_model_info(scan_mode: str, request):
                     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(request):
-    import json
-    import yaml
-    from PIL import Image
-
-    utils.print_info(f"Migrating legacy information...")
-
-    model_base_paths = utils.resolve_model_base_paths()
-    for model_type in model_base_paths:
-
-        folders, extensions = folder_paths.folder_names_and_paths[model_type]
-        for path_index, base_path in enumerate(folders):
-            files = utils.recursive_search_files(base_path, request)
-
-            models = folder_paths.filter_files_extensions(files, folder_paths.supported_pt_extensions)
-
-            for fullname in models:
-                fullname = utils.normalize_path(fullname)
-
-                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")
-
-                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))
-
-    utils.print_debug("Completed migrate model information.")

py/utils.py

@@ -249,19 +249,45 @@ 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):
+    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/"):
+            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)

pyproject.toml

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

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'),

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

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 class="whitespace-nowrap px-4" v-container="container">
+      <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,6 +73,7 @@
 <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'
@@ -85,9 +86,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 = Symbol('container')
+const { $sm } = useContainerQueries(container)
 </script>

src/components/DialogManager.vue

@@ -1,22 +1,15 @@
 <template>
   <div
-    class="flex h-full flex-col gap-4 overflow-hidden @container/content"
-    :style="{
-      ['--card-width']: `${cardWidth}px`,
-      ['--gutter']: `${gutter}px`,
-    }"
+    class="flex h-full flex-col gap-4 overflow-hidden"
     v-resize="onContainerResize"
+    v-container="contentContainer"
   >
     <div
-      :class="[
-        'grid grid-cols-1 justify-center gap-4 px-8',
-        '@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']">
+      <div class="col-span-full" v-container="toolbarContainer">
+        <div class="flex flex-col gap-4" :style="$toolbar_2xl(toolbarStyle)">
           <ResponseInput
             v-model="searchContent"
             :placeholder="$t('searchModels')"
@@ -48,12 +41,8 @@
     >
       <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"
@@ -79,18 +68,20 @@ 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 { useI18n } from 'vue-i18n'
 
-const { isMobile, cardWidth, gutter, aspect, modelFolders } = useConfig()
+const { isMobile, cardWidth, gutter, aspect } = useConfig()
 
-const { data } = useModels()
+const { data, folders } = useModels()
 const { t } = useI18n()
 
 const responseScroll = ref()
@@ -99,7 +90,20 @@ 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,
@@ -143,7 +147,9 @@ const colSpan = ref(1)
 const colSpanWidth = ref(cardWidth)
 
 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
@@ -177,6 +183,22 @@ const list = computed(() => {
   return chunk(sortedList, colSpan.value)
 })
 
+const toolbarContainer = Symbol('toolbar')
+const { $2xl: $toolbar_2xl } = useContainerQueries(toolbarContainer)
+
+const contentContainer = Symbol('content')
+const { $lg: $content_lg } = useContainerQueries(contentContainer)
+
+const contentStyle = {
+  gridTemplateColumns: `repeat(auto-fit, ${cardWidth}px)`,
+  gap: `${gutter}px`,
+  paddingLeft: `1rem`,
+  paddingRight: `1rem`,
+}
+const toolbarStyle = {
+  flexDirection: 'row',
+}
+
 const onContainerResize = defineResizeCallback((entries) => {
   const entry = entries[0]
   if (isMobile.value) {

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
 }

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) => {

src/components/ModelCard.vue

@@ -20,7 +20,12 @@
       <div class="relative h-full w-full text-white">
         <div 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>
@@ -29,7 +34,7 @@
         <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 :class="['font-bold', $lg('text-xs')]">
                 {{ model.type }}
               </div>
             </div>
@@ -66,6 +71,7 @@
 
 <script setup lang="ts">
 import DialogModelDetail from 'components/DialogModelDetail.vue'
+import { useContainerQueries } from 'hooks/container'
 import { useDialog } from 'hooks/dialog'
 import { useModelNodeAction } from 'hooks/model'
 import Button from 'primevue/button'
@@ -101,4 +107,6 @@ const preview = computed(() =>
 
 const { addModelNode, dragToAddModelNode, copyModelNode, loadPreviewWorkflow } =
   useModelNodeAction(props.model)
+
+const { $lg } = useContainerQueries()
 </script>

src/components/ModelContent.vue

@@ -1,11 +1,16 @@
 <template>
   <form
-    class="@container"
     @submit.prevent="handleSubmit"
     @reset.prevent="handleReset"
+    v-container="container"
   >
     <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,7 +62,7 @@ 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 { BaseModel, WithResolved } from 'types/typings'
 import { toRaw, watch } from 'vue'
 
 interface Props {
@@ -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 = Symbol('container')
+const { $xl } = useContainerQueries(container)
 </script>

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>

src/components/ResponseSelect.vue

@@ -130,7 +130,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">

src/hooks/config.ts

@@ -1,17 +1,14 @@
-import { request, useRequest } from 'hooks/request'
+import { request } from 'hooks/request'
 import { defineStore } from 'hooks/store'
 import { $el, app, ComfyDialog } from 'scripts/comfyAPI'
 import { onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useToast } from './toast'
 
 export const useConfig = defineStore('config', (store) => {
   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,17 +21,11 @@ export const useConfig = defineStore('config', (store) => {
     window.removeEventListener('resize', checkDeviceType)
   })
 
-  const refresh = async () => {
-    return Promise.all([refreshModelFolders()])
-  }
-
   const config = {
     isMobile,
     gutter: 16,
     cardWidth: 240,
     aspect: 7 / 9,
-    modelFolders,
-    refresh,
   }
 
   useAddConfigSettings(store)
@@ -50,8 +41,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 +85,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 +93,17 @@ 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
-    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
-                  })
-              },
-            })
-          },
-        })
-      },
-    })
-
     // 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 +149,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', {
@@ -240,9 +194,18 @@ 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',
-      name: 'Include hidden files(start with .)',
+      category: [t('modelManager'), t('setting.scan'), 'IncludeHiddenFiles'],
+      name: t('setting.includeHiddenFiles'),
       defaultValue: false,
       type: 'boolean',
     })

src/hooks/container.ts

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

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

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()
     }

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

src/i18n.ts

@@ -1,3 +1,4 @@
+import { app } from 'scripts/comfyAPI'
 import { createI18n } from 'vue-i18n'
 
 const messages = {
@@ -38,6 +39,14 @@ const messages = {
       createdAt: 'Created At',
       updatedAt: 'Updated At',
     },
+    setting: {
+      apiKey: 'API Key',
+      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)',
+    },
   },
   zh: {
     model: '模型',
@@ -76,16 +85,24 @@ const messages = {
       createdAt: '创建时间',
       updatedAt: '更新时间',
     },
+    setting: {
+      apiKey: '密钥',
+      scan: '扫描',
+      scanMissing: '下载缺失的信息或预览图片',
+      scanAll: '覆盖所有模型信息和预览图片',
+      includeHiddenFiles: '包含隐藏文件(以 . 开头的文件或文件夹)',
+      excludeScanTypes: '排除扫描类型(使用英文逗号隔开)',
+    },
   },
 }
 
 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({

src/main.ts

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

src/types/global.d.ts

@@ -157,6 +157,8 @@ declare namespace ComfyAPI {
 
     class ComfySettingsDialog {
       addSetting: (params: SettingParams) => { value: any }
+      getSettingValue: <T>(id: string, defaultValue?: T) => T
+      setSettingValue: <T>(id: string, value: T) => void
     }
   }
 

src/types/shims.d.ts

@@ -3,6 +3,7 @@ export {}
 declare module 'vue' {
   interface ComponentCustomProperties {
     vResize: (typeof import('hooks/resize'))['resizeDirective']
+    vContainer: (typeof import('hooks/container'))['containerDirective']
   }
 }
 

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 {

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
+    })
+}

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': {