external vue

* Migrate api key to private.key

* Optimize API Key setting

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -0,0 +1,86 @@
+name: Bug Report
+description: 'Something is not behaving as expected.'
+title: '[Bug]: '
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before submitting a **Bug Report**, please ensure the following:
+
+        - **1:** You are running the latest version of ComfyUI-Model-Manager.
+        - **2:** You have looked at the existing bug reports and made sure this isn't already reported.
+        - **3:** You confirmed that the bug is not caused by other custom nodes.
+
+  - type: textarea
+    id: environment
+    attributes:
+      label: Environment
+      description: 'Describe as detailed as possible what your current usage environment is. local? cloud? etc...'
+      value: |
+        [Operating System]:
+        [Python Version]:
+        [ComfyUI Version]:
+        [ComfyUI Frontend Version]:
+        [ComfyUI-Model-Manager Version]:
+        [Browser Version]:
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: 'What you expected to happen.'
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Actual Behavior
+      description: 'What actually happened. Please include a screenshot / video clip of the issue if possible.'
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Steps to Reproduce
+      description: "Describe how to reproduce the issue. Please be sure to attach a workflow JSON or PNG, ideally one that doesn't require custom nodes to test. If the bug open happens when certain custom nodes are used, most likely that custom node is what has the bug rather than ComfyUI, in which case it should be reported to the node's author."
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Debug Logs
+      description: 'Please copy the output from your terminal logs here.'
+      render: powershell
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Browser Logs
+      description: 'Please copy the output from your browser logs here. You can access this by pressing F12 to toggle the developer tools, then navigating to the Console tab.'
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Setting JSON
+      description: 'Please upload the setting file here. The setting file is located at `user/default/comfy.settings.json`'
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers do you use to access the UI ?
+      multiple: true
+      options:
+        - Mozilla Firefox
+        - Google Chrome
+        - Brave
+        - Apple Safari
+        - Microsoft Edge
+        - Android
+        - iOS
+        - Other
+  - type: textarea
+    attributes:
+      label: Other
+      description: 'Any other additional information you think might be helpful.'
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/feature-request.yaml

@@ -0,0 +1,39 @@
+name: Feature Request
+description: Suggest an idea for this project
+title: '[Feature Request]: '
+
+body:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the feature you want, and that it's not implemented in a recent build/commit.
+      options:
+        - label: I have searched the existing issues and checked the recent builds/commits
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        *Please fill this form with as much information as possible, provide screenshots and/or illustrations of the feature if possible*
+  - type: textarea
+    id: feature
+    attributes:
+      label: What would your feature do ?
+      description: Tell us about your feature in a very clear and simple way, and what problem it would solve
+    validations:
+      required: true
+  - type: textarea
+    id: workflow
+    attributes:
+      label: Proposed workflow
+      description: Please provide us with step by step information on how you'd like the feature to be accessed and used
+      value: |
+        1. Go to ....
+        2. Press ....
+        3. ...
+    validations:
+      required: true
+  - type: textarea
+    id: misc
+    attributes:
+      label: Additional information
+      description: Add any other context or screenshots about the feature request here.

.github/workflows/publish.yml

@@ -11,6 +11,7 @@ jobs:
   publish-node:
     name: Release and Publish Custom Node to registry
     runs-on: ubuntu-latest
+    if: ${{ github.repository_owner == 'hayden-fr' }}
     steps:
       - name: Check out code
         uses: actions/checkout@v4
@@ -60,7 +61,7 @@ jobs:
         run: |
           pnpm install
           pnpm run build
-          tar -czf dist.tar.gz py/ web/ __init__.py LICENSE pyproject.toml requirements.txt
+          tar -czf dist.tar.gz assets/ py/ web/ __init__.py LICENSE pyproject.toml requirements.txt
 
       - name: Create release draft
         uses: softprops/action-gh-release@v2

.gitignore

@@ -197,3 +197,6 @@ web/
 
 # config
 config/
+
+# private info
+private.key

__init__.py

@@ -1,3 +1,11 @@
+import folder_paths
+
+
+# NOTE: This is an experiment
+# Add .gguf extension to supported_pt_extensions
+folder_paths.supported_pt_extensions.add(".gguf")
+
+
 import os
 from .py import config
 from .py import utils

package.json

@@ -39,8 +39,8 @@
     "markdown-it": "^14.1.0",
     "markdown-it-metadata-block": "^1.0.6",
     "primevue": "^4.0.7",
-    "vue": "^3.4.31",
-    "vue-i18n": "^9.13.1",
+    "vue": "^3.5.6",
+    "vue-i18n": "^9.14.0",
     "yaml": "^2.6.0"
   },
   "lint-staged": {

pnpm-lock.yaml

@@ -30,10 +30,10 @@ importers:
         specifier: ^4.0.7
         version: 4.0.7(vue@3.5.6(typescript@5.6.2))
       vue:
-        specifier: ^3.4.31
+        specifier: ^3.5.6
         version: 3.5.6(typescript@5.6.2)
       vue-i18n:
-        specifier: ^9.13.1
+        specifier: ^9.14.0
         version: 9.14.0(vue@3.5.6(typescript@5.6.2))
       yaml:
         specifier: ^2.6.0
@@ -705,8 +705,8 @@ packages:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
-  caniuse-lite@1.0.30001662:
-    resolution: {integrity: sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==}
+  caniuse-lite@1.0.30001712:
+    resolution: {integrity: sha512-MBqPpGYYdQ7/hfKiet9SCI+nmN5/hp4ZzveOJubl5DTAMa5oggjAuoi0Z4onBpKPFI2ePGnQuQIzF3VxDjDJig==}
 
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
@@ -2271,7 +2271,7 @@ snapshots:
   autoprefixer@10.4.20(postcss@8.4.47):
     dependencies:
       browserslist: 4.23.3
-      caniuse-lite: 1.0.30001662
+      caniuse-lite: 1.0.30001712
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.0
@@ -2299,7 +2299,7 @@ snapshots:
 
   browserslist@4.23.3:
     dependencies:
-      caniuse-lite: 1.0.30001662
+      caniuse-lite: 1.0.30001712
       electron-to-chromium: 1.5.25
       node-releases: 2.0.18
       update-browserslist-db: 1.1.0(browserslist@4.23.3)
@@ -2308,7 +2308,7 @@ snapshots:
 
   camelcase-css@2.0.1: {}
 
-  caniuse-lite@1.0.30001662: {}
+  caniuse-lite@1.0.30001712: {}
 
   chalk@4.1.2:
     dependencies:

py/download.py

@@ -2,6 +2,9 @@ import os
 import uuid
 import time
 import requests
+import base64
+
+
 import folder_paths
 
 
@@ -92,8 +95,68 @@ class TaskContent:
         }
 
 
+class ApiKey:
+
+    __store: dict[str, str] = {}
+
+    def __init__(self):
+        self.__cache_file = os.path.join(config.extension_uri, "private.key")
+
+    def init(self, request):
+        # Try to migrate api key from user setting
+        if not os.path.exists(self.__cache_file):
+            self.__store = {
+                "civitai": utils.get_setting_value(request, "api_key.civitai"),
+                "huggingface": utils.get_setting_value(request, "api_key.huggingface"),
+            }
+            self.__update__()
+            # Remove api key from user setting
+            utils.set_setting_value(request, "api_key.civitai", None)
+            utils.set_setting_value(request, "api_key.huggingface", None)
+        self.__store = utils.load_dict_pickle_file(self.__cache_file)
+        # Desensitization returns
+        result: dict[str, str] = {}
+        for key in self.__store:
+            v = self.__store[key]
+            if v is not None:
+                result[key] = v[:4] + "****" + v[-4:]
+        return result
+
+    def get_value(self, key: str):
+        return self.__store.get(key, None)
+
+    def set_value(self, key: str, value: str):
+        self.__store[key] = value
+        self.__update__()
+
+    def __update__(self):
+        utils.save_dict_pickle_file(self.__cache_file, self.__store)
+
+
 class ModelDownload:
+    def __init__(self):
+        self.api_key = ApiKey()
+
     def add_routes(self, routes):
+        @routes.post("/model-manager/download/init")
+        async def init_download(request):
+            """
+            Init download setting.
+            """
+            result = self.api_key.init(request)
+            return web.json_response({"success": True, "data": result})
+
+        @routes.post("/model-manager/download/setting")
+        async def set_download_setting(request):
+            """
+            Set download setting.
+            """
+            json_data = await request.json()
+            key = json_data.get("key", None)
+            value = json_data.get("value", None)
+            value = base64.b64decode(value).decode("utf-8") if value is not None else None
+            self.api_key.set_value(key, value)
+            return web.json_response({"success": True})
 
         @routes.get("/model-manager/download/task")
         async def scan_download_tasks(request):
@@ -329,12 +392,12 @@ class ModelDownload:
 
                 download_platform = task_status.platform
                 if download_platform == "civitai":
-                    api_key = utils.get_setting_value(request, "api_key.civitai")
+                    api_key = self.api_key.get_value("civitai")
                     if api_key:
                         headers["Authorization"] = f"Bearer {api_key}"
 
                 elif download_platform == "huggingface":
-                    api_key = utils.get_setting_value(request, "api_key.huggingface")
+                    api_key = self.api_key.get_value("huggingface")
                     if api_key:
                         headers["Authorization"] = f"Bearer {api_key}"
 
@@ -457,8 +520,10 @@ class ModelDownload:
 
         # 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 = float(response.headers.get("content-length", 0))
+        # Fixed issue #169. Some model information from Civitai, providing the wrong file size
+        response_total_size = float(response.headers.get("content-length", 0))
+        if total_size == 0 or total_size != response_total_size:
+            total_size = response_total_size
             task_content.sizeBytes = total_size
             task_status.totalSize = total_size
             self.set_task_content(task_id, task_content)

py/information.py

@@ -1,14 +1,25 @@
 import os
 import re
+import uuid
+import math
 import yaml
 import requests
 import markdownify
 
 
+import folder_paths
+
+
+from aiohttp import web
 from abc import ABC, abstractmethod
 from urllib.parse import urlparse, parse_qs
+from PIL import Image
+from io import BytesIO
+
 
 from . import utils
+from . import config
+from . import thread
 
 
 class ModelSearcher(ABC):
@@ -282,25 +293,6 @@ class HuggingfaceModelSearcher(ModelSearcher):
         return _filter_tree_files
 
 
-def get_model_searcher_by_url(url: str) -> ModelSearcher:
-    parsed_url = urlparse(url)
-    host_name = parsed_url.hostname
-    if host_name == "civitai.com":
-        return CivitaiModelSearcher()
-    elif host_name == "huggingface.co":
-        return HuggingfaceModelSearcher()
-    return UnknownWebsiteSearcher()
-
-
-import folder_paths
-
-
-from . import config
-
-
-from aiohttp import web
-
-
 class Information:
     def add_routes(self, routes):
 
@@ -318,16 +310,38 @@ class Information:
                 utils.print_error(error_msg)
                 return web.json_response({"success": False, "error": error_msg})
 
+        @routes.get("/model-manager/model-info/scan")
+        async def get_model_info_download_task(request):
+            """
+            Get model information download task list.
+            """
+            try:
+                result = self.get_scan_model_info_task_list()
+                if result is not None:
+                    await self.download_model_info(request)
+                return web.json_response({"success": True, "data": result})
+            except Exception as e:
+                error_msg = f"Get model info download task list 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):
+        async def create_model_info_download_task(request):
             """
             Create a task to download model information.
+
+            - scanMode: The alternatives are diff and full.
+            - mode: The alternatives are diff and full.
+            - path: Scanning root path.
             """
             post = await utils.get_request_body(request)
             try:
+                # TODO scanMode is deprecated, use mode instead.
                 scan_mode = post.get("scanMode", "diff")
-                await self.download_model_info(scan_mode, request)
-                return web.json_response({"success": True})
+                scan_mode = post.get("mode", scan_mode)
+                scan_path = post.get("path", None)
+                result = await self.create_scan_model_info_task(scan_mode, scan_path, request)
+                return web.json_response({"success": True, "data": result})
             except Exception as e:
                 error_msg = f"Download model info failed: {str(e)}"
                 utils.print_error(error_msg)
@@ -347,18 +361,30 @@ class Information:
             index = int(request.match_info.get("index", None))
             filename = request.match_info.get("filename", None)
 
+            content_type = utils.resolve_file_content_type(filename)
+
+            if content_type == "video":
+                abs_path = utils.get_full_path(model_type, index, filename)
+                return web.FileResponse(abs_path)
+
             extension_uri = config.extension_uri
 
             try:
                 folders = folder_paths.get_folder_paths(model_type)
                 base_path = folders[index]
                 abs_path = utils.join_path(base_path, filename)
+                preview_name = utils.get_model_preview_name(abs_path)
+                if preview_name:
+                    dir_name = os.path.dirname(abs_path)
+                    abs_path = utils.join_path(dir_name, preview_name)
             except:
                 abs_path = extension_uri
 
             if not os.path.isfile(abs_path):
                 abs_path = utils.join_path(extension_uri, "assets", "no-preview.png")
-            return web.FileResponse(abs_path)
+
+            image_data = self.get_image_preview_data(abs_path)
+            return web.Response(body=image_data.getvalue(), content_type="image/webp")
 
         @routes.get("/model-manager/preview/download/{filename}")
         async def read_download_preview(request):
@@ -373,50 +399,142 @@ class Information:
 
             return web.FileResponse(preview_path)
 
+    def get_image_preview_data(self, filename: str):
+        with Image.open(filename) as img:
+            max_size = 1024
+            original_format = img.format
+
+            exif_data = img.info.get("exif")
+            icc_profile = img.info.get("icc_profile")
+
+            if getattr(img, "is_animated", False) and img.n_frames > 1:
+                total_frames = img.n_frames
+                step = max(1, math.ceil(total_frames / 30))
+
+                frames, durations = [], []
+
+                for frame_idx in range(0, total_frames, step):
+                    img.seek(frame_idx)
+                    frame = img.copy()
+                    frame.thumbnail((max_size, max_size), Image.Resampling.NEAREST)
+
+                    frames.append(frame)
+                    durations.append(img.info.get("duration", 100) * step)
+
+                save_args = {
+                    "format": "WEBP",
+                    "save_all": True,
+                    "append_images": frames[1:],
+                    "duration": durations,
+                    "loop": 0,
+                    "quality": 80,
+                    "method": 0,
+                    "allow_mixed": False,
+                }
+
+                if exif_data:
+                    save_args["exif"] = exif_data
+
+                if icc_profile:
+                    save_args["icc_profile"] = icc_profile
+
+                img_byte_arr = BytesIO()
+                frames[0].save(img_byte_arr, **save_args)
+                img_byte_arr.seek(0)
+                return img_byte_arr
+
+            img.thumbnail((max_size, max_size), Image.Resampling.BICUBIC)
+
+            img_byte_arr = BytesIO()
+            save_args = {"format": "WEBP", "quality": 80}
+
+            if exif_data:
+                save_args["exif"] = exif_data
+            if icc_profile:
+                save_args["icc_profile"] = icc_profile
+
+            img.save(img_byte_arr, **save_args)
+            img_byte_arr.seek(0)
+            return img_byte_arr
+
     def fetch_model_info(self, model_page: str):
         if not model_page:
             return []
 
-        model_searcher = get_model_searcher_by_url(model_page)
+        model_searcher = self.get_model_searcher_by_url(model_page)
         result = model_searcher.search_by_url(model_page)
         return result
 
-    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:
+    def get_scan_information_task_filepath(self):
+        download_dir = utils.get_download_path()
+        return utils.join_path(download_dir, "scan_information.task")
 
-            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)
+    def get_scan_model_info_task_list(self):
+        scan_info_task_file = self.get_scan_information_task_filepath()
+        if os.path.isfile(scan_info_task_file):
+            return utils.load_dict_pickle_file(scan_info_task_file)
+        return None
 
-                models = folder_paths.filter_files_extensions(files, folder_paths.supported_pt_extensions)
+    async def create_scan_model_info_task(self, scan_mode: str, scan_path: str | None, request):
+        scan_info_task_file = self.get_scan_information_task_filepath()
+        scan_info_task_content = {"mode": scan_mode}
+        scan_models: dict[str, bool] = {}
 
-                for fullname in models:
-                    fullname = utils.normalize_path(fullname)
-                    basename = os.path.splitext(fullname)[0]
+        scan_paths: list[str] = []
+        if scan_path is None:
+            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):
+                    scan_paths.append(base_path)
+        else:
+            scan_paths = [scan_path]
 
-                    abs_model_path = utils.join_path(base_path, fullname)
+        for base_path in scan_paths:
+            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)
+                utils.print_debug(f"Found model: {abs_model_path}")
+                scan_models[abs_model_path] = False
 
-                    image_name = utils.get_model_preview_name(abs_model_path)
-                    abs_image_path = utils.join_path(base_path, image_name)
+        scan_info_task_content["models"] = scan_models
+        utils.save_dict_pickle_file(scan_info_task_file, scan_info_task_content)
+        await self.download_model_info(request)
+        return scan_info_task_content
 
-                    has_preview = os.path.isfile(abs_image_path)
+    download_thread_pool = thread.DownloadThreadPool()
 
-                    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
+    async def download_model_info(self, request):
+        async def download_information_task(task_id: str):
+            scan_info_task_file = self.get_scan_information_task_filepath()
+            scan_info_task_content = utils.load_dict_pickle_file(scan_info_task_file)
+            scan_mode = scan_info_task_content.get("mode", "diff")
+            scan_models: dict[str, bool] = scan_info_task_content.get("models", {})
+            for key, value in scan_models.items():
+                if value is True:
+                    continue
 
-                    try:
+                abs_model_path = key
+                base_path = os.path.dirname(abs_model_path)
 
-                        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}")
+                image_name = utils.get_model_preview_name(abs_model_path)
+                abs_image_path = utils.join_path(base_path, image_name)
 
-                        if scan_mode != "full" and (has_preview and has_description):
-                            continue
+                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" or not has_preview or not has_description:
                         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}")
@@ -431,7 +549,29 @@ class Information:
                         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.")
+                    scan_models[abs_model_path] = True
+                    scan_info_task_content["models"] = scan_models
+                    utils.save_dict_pickle_file(scan_info_task_file, scan_info_task_content)
+                    utils.print_debug(f"Send update scan information task to frontend.")
+                    await utils.send_json("update_scan_information_task", scan_info_task_content)
+                except Exception as e:
+                    utils.print_error(f"Failed to download model info for {abs_model_path}: {e}")
+
+            os.remove(scan_info_task_file)
+            utils.print_info("Completed scan model information.")
+
+        try:
+            task_id = uuid.uuid4().hex
+            self.download_thread_pool.submit(download_information_task, task_id)
+        except Exception as e:
+            utils.print_debug(str(e))
+
+    def get_model_searcher_by_url(self, url: str) -> ModelSearcher:
+        parsed_url = urlparse(url)
+        host_name = parsed_url.hostname
+        if host_name == "civitai.com":
+            return CivitaiModelSearcher()
+        elif host_name == "huggingface.co":
+            return HuggingfaceModelSearcher()
+        return UnknownWebsiteSearcher()

py/manager.py

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

py/utils.py

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

pyproject.toml

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

src/App.vue

@@ -9,6 +9,7 @@
 import DialogDownload from 'components/DialogDownload.vue'
 import DialogExplorer from 'components/DialogExplorer.vue'
 import DialogManager from 'components/DialogManager.vue'
+import DialogScanning from 'components/DialogScanning.vue'
 import GlobalDialogStack from 'components/GlobalDialogStack.vue'
 import GlobalLoading from 'components/GlobalLoading.vue'
 import GlobalToast from 'components/GlobalToast.vue'
@@ -35,6 +36,19 @@ onMounted(() => {
     })
   }
 
+  const openModelScanning = () => {
+    dialog.open({
+      key: 'model-information-scanning',
+      title: t('batchScanModelInformation'),
+      content: DialogScanning,
+      modal: true,
+      defaultSize: {
+        width: 680,
+        height: 490,
+      },
+    })
+  }
+
   const openDownloadDialog = () => {
     dialog.open({
       key: 'model-manager-download-list',
@@ -64,6 +78,11 @@ onMounted(() => {
       content: flat.value ? DialogManager : DialogExplorer,
       keepAlive: true,
       headerButtons: [
+        {
+          key: 'scanning',
+          icon: 'mdi mdi-folder-search-outline text-lg',
+          command: openModelScanning,
+        },
         {
           key: 'refresh',
           icon: 'pi pi-refresh',

src/components/DialogExplorer.vue

@@ -133,7 +133,7 @@ import Button from 'primevue/button'
 import ConfirmDialog from 'primevue/confirmdialog'
 import ContextMenu from 'primevue/contextmenu'
 import InputText from 'primevue/inputtext'
-import { MenuItem } from 'primevue/menuitem'
+import type { MenuItem } from 'primevue/menuitem'
 import { genModelKey } from 'utils/model'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

src/components/DialogScanning.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="h-full px-4">
+    <div v-show="batchScanningStep === 0" class="h-full">
+      <div class="flex h-full items-center px-8">
+        <div class="h-20 w-full opacity-60">
+          <ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
+        </div>
+      </div>
+    </div>
+
+    <Stepper
+      v-show="batchScanningStep === 1"
+      v-model:value="stepValue"
+      class="flex h-full flex-col"
+      linear
+    >
+      <StepList>
+        <Step value="1">{{ $t('selectModelType') }}</Step>
+        <Step value="2">{{ $t('selectSubdirectory') }}</Step>
+        <Step value="3">{{ $t('scanModelInformation') }}</Step>
+      </StepList>
+      <StepPanels class="flex-1 overflow-hidden">
+        <StepPanel value="1" class="h-full">
+          <div class="flex h-full flex-col overflow-hidden">
+            <ResponseScroll>
+              <div class="flex flex-wrap gap-4">
+                <Button
+                  v-for="item in typeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  @click="item.command"
+                ></Button>
+              </div>
+            </ResponseScroll>
+          </div>
+        </StepPanel>
+        <StepPanel value="2" class="h-full">
+          <div class="flex h-full flex-col overflow-hidden">
+            <ResponseScroll class="flex-1">
+              <Tree
+                class="h-full"
+                v-model:selection-keys="selectedKey"
+                :value="pathOptions"
+                selectionMode="single"
+                :pt:nodeLabel:class="'text-ellipsis overflow-hidden'"
+              ></Tree>
+            </ResponseScroll>
+
+            <div class="flex justify-between pt-6">
+              <Button
+                :label="$t('back')"
+                severity="secondary"
+                icon="pi pi-arrow-left"
+                @click="handleBackTypeSelect"
+              ></Button>
+              <Button
+                :label="$t('next')"
+                icon="pi pi-arrow-right"
+                icon-pos="right"
+                :disabled="!enabledScan"
+                @click="handleConfirmSubdir"
+              ></Button>
+            </div>
+          </div>
+        </StepPanel>
+        <StepPanel value="3" class="h-full">
+          <div class="overflow-hidden break-words py-8">
+            <div class="overflow-hidden px-8">
+              <div v-show="currentType === allType" class="text-center">
+                {{ $t('selectedAllPaths') }}
+              </div>
+              <div v-show="currentType !== allType" class="text-center">
+                <div class="pb-2">
+                  {{ $t('selectedSpecialPath') }}
+                </div>
+                <div class="leading-5 opacity-60">
+                  {{ selectedModelFolder }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-center justify-center gap-4">
+            <Button
+              v-for="item in scanActions"
+              :key="item.value"
+              :label="item.label"
+              :icon="item.icon"
+              @click="item.command.call(item)"
+            ></Button>
+          </div>
+        </StepPanel>
+      </StepPanels>
+    </Stepper>
+
+    <div v-show="batchScanningStep === 2" class="h-full">
+      <div class="flex h-full items-center px-8">
+        <div class="h-20 w-full">
+          <div v-show="scanProgress > -1">
+            <ProgressBar :value="scanProgress">
+              {{ scanCompleteCount }} / {{ scanTotalCount }}
+            </ProgressBar>
+          </div>
+
+          <div v-show="scanProgress === -1" class="text-center">
+            <Button
+              severity="secondary"
+              :label="$t('back')"
+              icon="pi pi-arrow-left"
+              @click="handleBackTypeSelect"
+            ></Button>
+            <span class="pl-2">{{ $t('noModelsInCurrentPath') }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ResponseScroll from 'components/ResponseScroll.vue'
+import { configSetting } from 'hooks/config'
+import { useModelFolder, useModels } from 'hooks/model'
+import { request } from 'hooks/request'
+import Button from 'primevue/button'
+import ProgressBar from 'primevue/progressbar'
+import Step from 'primevue/step'
+import StepList from 'primevue/steplist'
+import StepPanel from 'primevue/steppanel'
+import StepPanels from 'primevue/steppanels'
+import Stepper from 'primevue/stepper'
+import Tree from 'primevue/tree'
+import { api, app } from 'scripts/comfyAPI'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const stepValue = ref('1')
+
+const { folders } = useModels()
+
+const allType = 'All'
+const currentType = ref<string>()
+const typeOptions = computed(() => {
+  const excludeScanTypes = app.ui?.settings.getSettingValue<string>(
+    configSetting.excludeScanTypes,
+  )
+  const customBlackList =
+    excludeScanTypes
+      ?.split(',')
+      .map((type) => type.trim())
+      .filter(Boolean) ?? []
+  return [
+    allType,
+    ...Object.keys(folders.value).filter(
+      (folder) => !customBlackList.includes(folder),
+    ),
+  ].map((type) => {
+    return {
+      label: type,
+      value: type,
+      command: () => {
+        currentType.value = type
+        stepValue.value = currentType.value === allType ? '3' : '2'
+      },
+    }
+  })
+})
+
+const { pathOptions } = useModelFolder({ type: currentType })
+
+const selectedModelFolder = ref<string>()
+const selectedKey = computed({
+  get: () => {
+    const key = selectedModelFolder.value
+    return key ? { [key]: true } : {}
+  },
+  set: (val) => {
+    const key = Object.keys(val)[0]
+    selectedModelFolder.value = key
+  },
+})
+
+const enabledScan = computed(() => {
+  return currentType.value === allType || !!selectedModelFolder.value
+})
+
+const handleBackTypeSelect = () => {
+  selectedModelFolder.value = undefined
+  currentType.value = undefined
+  stepValue.value = '1'
+  batchScanningStep.value = 1
+}
+
+const handleConfirmSubdir = () => {
+  stepValue.value = '3'
+}
+
+const batchScanningStep = ref(0)
+const scanModelsList = ref<Record<string, boolean>>({})
+const scanTotalCount = computed(() => {
+  return Object.keys(scanModelsList.value).length
+})
+const scanCompleteCount = computed(() => {
+  return Object.keys(scanModelsList.value).filter(
+    (key) => scanModelsList.value[key],
+  ).length
+})
+const scanProgress = computed(() => {
+  if (scanTotalCount.value === 0) {
+    return -1
+  }
+  const progress = scanCompleteCount.value / scanTotalCount.value
+  return Number(progress.toFixed(4)) * 100
+})
+
+const handleScanModelInformation = async function () {
+  batchScanningStep.value = 0
+  const mode = this.value
+  const path = selectedModelFolder.value
+
+  try {
+    const result = await request('/model-info/scan', {
+      method: 'POST',
+      body: JSON.stringify({ mode, path }),
+    })
+    scanModelsList.value = result?.models ?? {}
+    batchScanningStep.value = 2
+  } catch {
+    batchScanningStep.value = 1
+  }
+}
+
+const scanActions = ref([
+  {
+    value: 'back',
+    label: t('back'),
+    icon: 'pi pi-arrow-left',
+    command: () => {
+      stepValue.value = currentType.value === allType ? '1' : '2'
+    },
+  },
+  {
+    value: 'full',
+    label: t('scanFullInformation'),
+    command: handleScanModelInformation,
+  },
+  {
+    value: 'diff',
+    label: t('scanMissInformation'),
+    command: handleScanModelInformation,
+  },
+])
+
+const refreshTaskContent = async () => {
+  const result = await request('/model-info/scan')
+  const listContent = result?.models ?? {}
+  scanModelsList.value = listContent
+  batchScanningStep.value = Object.keys(listContent).length ? 2 : 1
+}
+
+onMounted(() => {
+  refreshTaskContent()
+
+  api.addEventListener('update_scan_information_task', (event) => {
+    const content = event.detail
+    scanModelsList.value = content.models
+  })
+})
+</script>

src/components/GlobalDialogStack.vue

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

src/components/ModelCard.vue

@@ -24,6 +24,21 @@
             ></path>
           </svg>
         </div>
+        <div
+          v-else-if="model.previewType === 'video'"
+          class="h-full w-full p-1 hover:p-0"
+        >
+          <video
+            class="h-full w-full object-cover"
+            playsinline
+            autoplay
+            loop
+            disablepictureinpicture
+            preload="none"
+          >
+            <source :src="preview" />
+          </video>
+        </div>
         <div v-else class="h-full w-full p-1 hover:p-0">
           <img class="h-full w-full rounded-lg object-cover" :src="preview" />
         </div>

src/components/ModelPreview.vue

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

src/components/ResponseDialog.vue

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

src/components/SettingApiKey.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="p-4">
+    <InputText
+      class="w-full"
+      v-model="content"
+      placeholder="Set New API Key"
+      autocomplete="off"
+    ></InputText>
+    <div class="mt-4 flex items-center justify-between">
+      <div>
+        <span v-show="showError" class="text-red-400">
+          API Key Not Allow Empty
+        </span>
+      </div>
+      <Button label="Save" autofocus @click="saveKeybinding"></Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDialog } from 'hooks/dialog'
+import { request } from 'hooks/request'
+import { useToast } from 'hooks/toast'
+import Button from 'primevue/button'
+import InputText from 'primevue/inputtext'
+import { ref, toValue } from 'vue'
+
+interface Props {
+  keyField: string
+  setter: (val: string) => void
+}
+
+const props = defineProps<Props>()
+
+const { close } = useDialog()
+const { toast } = useToast()
+
+const content = ref<string>()
+const showError = ref<boolean>(false)
+
+const saveKeybinding = async () => {
+  const value = toValue(content)
+  if (!value) {
+    showError.value = true
+    return
+  }
+
+  showError.value = false
+  const key = toValue(props.keyField)
+
+  try {
+    const encodeValue = value ? btoa(value) : null
+    await request('/download/setting', {
+      method: 'POST',
+      body: JSON.stringify({ key, value: encodeValue }),
+    })
+    const desString = value ? value.slice(0, 4) + '****' + value.slice(-4) : ''
+    props.setter(desString)
+    close()
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: error.message,
+      life: 3000,
+    })
+  }
+}
+</script>

src/hooks/config.ts

@@ -1,10 +1,11 @@
+import SettingApiKey from 'components/SettingApiKey.vue'
 import SettingCardSize from 'components/SettingCardSize.vue'
 import { request } from 'hooks/request'
 import { defineStore } from 'hooks/store'
-import { $el, app, ComfyDialog } from 'scripts/comfyAPI'
+import { useToast } from 'hooks/toast'
+import { $el, app } from 'scripts/comfyAPI'
 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()
@@ -67,6 +68,7 @@ export const useConfig = defineStore('config', (store) => {
       },
     },
     flat: flatLayout,
+    apiKeyInfo: ref<Record<string, string>>({}),
   }
 
   watch(cardSizeFlag, (val) => {
@@ -98,57 +100,102 @@ export const configSetting = {
 }
 
 function useAddConfigSettings(store: import('hooks/store').StoreProvider) {
-  const { toast } = useToast()
   const { t } = useI18n()
+  const { confirm } = useToast()
 
-  const confirm = (opts: {
-    message?: string
-    accept?: () => void
-    reject?: () => void
+  const iconButton = (opt: {
+    icon: string
+    onClick: () => void | Promise<void>
   }) => {
-    const dialog = new ComfyDialog('div', [])
-
-    dialog.show(
-      $el('div', [
-        $el('p', { textContent: opts.message }),
-        $el('div.flex.gap-4', [
-          $el('button.flex-1', {
-            textContent: 'Cancel',
-            onclick: () => {
-              opts.reject?.()
-              dialog.close()
-              document.body.removeChild(dialog.element)
-            },
-          }),
-          $el('button.flex-1', {
-            textContent: 'Continue',
-            onclick: () => {
-              opts.accept?.()
-              dialog.close()
-              document.body.removeChild(dialog.element)
-            },
-          }),
-        ]),
-      ]),
+    return $el(
+      'span.h-4.cursor-pointer',
+      { onclick: opt.onClick },
+      $el(`i.${opt.icon.replace(/\s/g, '.')}`),
     )
   }
 
+  const setApiKey = async (key: string, setter: (val: string) => void) => {
+    store.dialog.open({
+      key: `setting.api_key.${key}`,
+      title: t(`setting.api_key.${key}`),
+      content: SettingApiKey,
+      modal: true,
+      defaultSize: {
+        width: 500,
+        height: 200,
+      },
+      contentProps: {
+        keyField: key,
+        setter: setter,
+      },
+    })
+  }
+
+  const removeApiKey = async (key: string) => {
+    await new Promise((resolve, reject) => {
+      confirm.require({
+        message: t('deleteAsk'),
+        header: 'Danger',
+        icon: 'pi pi-info-circle',
+        accept: () => resolve(true),
+        reject: reject,
+      })
+    })
+    await request('/download/setting', {
+      method: 'POST',
+      body: JSON.stringify({ key, value: null }),
+    })
+  }
+
+  const renderApiKey = (key: string) => {
+    return () => {
+      const apiKey = store.config.apiKeyInfo.value[key] || 'None'
+      const apiKeyDisplayEl = $el('div.text-sm.text-gray-500.flex-1', {
+        textContent: apiKey,
+      })
+
+      const setter = (val: string) => {
+        store.config.apiKeyInfo.value[key] = val
+        apiKeyDisplayEl.textContent = val || 'None'
+      }
+      return $el('div.flex.gap-4', [
+        apiKeyDisplayEl,
+        iconButton({
+          icon: 'pi pi-pencil text-blue-400',
+          onClick: () => {
+            setApiKey(key, setter)
+          },
+        }),
+        iconButton({
+          icon: 'pi pi-trash text-red-400',
+          onClick: async () => {
+            const value = store.config.apiKeyInfo.value[key]
+            if (value) {
+              await removeApiKey(key)
+              setter('')
+            }
+          },
+        }),
+      ])
+    }
+  }
+
   onMounted(() => {
     // 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,
+      type: renderApiKey('huggingface'),
     })
 
     app.ui?.settings.addSetting({
       id: 'ModelManager.APIKey.Civitai',
       category: [t('modelManager'), t('setting.apiKey'), 'Civitai'],
       name: 'Civitai API Key',
-      type: 'text',
       defaultValue: undefined,
+      type: renderApiKey('civitai'),
     })
 
     const defaultCardSize = store.config.defaultCardSizeMap
@@ -187,101 +234,6 @@ function useAddConfigSettings(store: import('hooks/store').StoreProvider) {
       },
     })
 
-    // Scan information
-    app.ui?.settings.addSetting({
-      id: 'ModelManager.ScanFiles.Full',
-      category: [t('modelManager'), t('setting.scan'), 'Full'],
-      name: t('setting.scanAll'),
-      defaultValue: '',
-      type: () => {
-        return $el('button.p-button.p-component.p-button-secondary', {
-          textContent: 'Full Scan',
-          onclick: () => {
-            confirm({
-              message: [
-                'This operation will override current files.',
-                'This may take a while and generate MANY server requests!',
-                'USE AT YOUR OWN RISK! Continue?',
-              ].join('\n'),
-              accept: () => {
-                store.loading.loading.value = true
-                request('/model-info/scan', {
-                  method: 'POST',
-                  body: JSON.stringify({ scanMode: 'full' }),
-                })
-                  .then(() => {
-                    toast.add({
-                      severity: 'success',
-                      summary: 'Complete download information',
-                      life: 2000,
-                    })
-                    store.models.refresh()
-                  })
-                  .catch((err) => {
-                    toast.add({
-                      severity: 'error',
-                      summary: 'Error',
-                      detail: err.message ?? 'Failed to download information',
-                      life: 15000,
-                    })
-                  })
-                  .finally(() => {
-                    store.loading.loading.value = false
-                  })
-              },
-            })
-          },
-        })
-      },
-    })
-
-    app.ui?.settings.addSetting({
-      id: 'ModelManager.ScanFiles.Incremental',
-      category: [t('modelManager'), t('setting.scan'), 'Incremental'],
-      name: t('setting.scanMissing'),
-      defaultValue: '',
-      type: () => {
-        return $el('button.p-button.p-component.p-button-secondary', {
-          textContent: 'Diff Scan',
-          onclick: () => {
-            confirm({
-              message: [
-                'Download missing information or preview.',
-                'This may take a while and generate MANY server requests!',
-                'USE AT YOUR OWN RISK! Continue?',
-              ].join('\n'),
-              accept: () => {
-                store.loading.loading.value = true
-                request('/model-info/scan', {
-                  method: 'POST',
-                  body: JSON.stringify({ scanMode: 'diff' }),
-                })
-                  .then(() => {
-                    toast.add({
-                      severity: 'success',
-                      summary: 'Complete download information',
-                      life: 2000,
-                    })
-                    store.models.refresh()
-                  })
-                  .catch((err) => {
-                    toast.add({
-                      severity: 'error',
-                      summary: 'Error',
-                      detail: err.message ?? 'Failed to download information',
-                      life: 15000,
-                    })
-                  })
-                  .finally(() => {
-                    store.loading.loading.value = false
-                  })
-              },
-            })
-          },
-        })
-      },
-    })
-
     app.ui?.settings.addSetting({
       id: configSetting.excludeScanTypes,
       category: [t('modelManager'), t('setting.scan'), 'ExcludeScanTypes'],

src/hooks/dialog.ts

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

src/hooks/download.ts

@@ -84,7 +84,16 @@ export const useDownload = defineStore('download', (store) => {
     })
   })
 
+  // Initial download settings
+  // Migrate API keys from user settings to private key
+  const init = async () => {
+    const res = await request('/download/init', { method: 'POST' })
+    store.config.apiKeyInfo.value = res
+  }
+
   onBeforeMount(() => {
+    init()
+
     api.addEventListener('reconnected', () => {
       refresh()
     })

src/hooks/explorer.ts

@@ -46,6 +46,7 @@ export const useModelExplorer = () => {
       description: '',
       metadata: {},
       preview: '',
+      previewType: 'image',
       type: folder ?? '',
       isFolder: true,
       children: [],

src/hooks/model.ts

@@ -443,7 +443,7 @@ export const useModelBaseInfo = () => {
 
 export const useModelFolder = (
   option: {
-    type?: MaybeRefOrGetter<string>
+    type?: MaybeRefOrGetter<string | undefined>
   } = {},
 ) => {
   const { data: models, folders: modelFolders } = useModels()
@@ -579,6 +579,10 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
     return content
   })
 
+  const previewType = computed(() => {
+    return model.value.previewType
+  })
+
   onMounted(() => {
     registerReset(() => {
       currentType.value = 'default'
@@ -594,6 +598,7 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
 
   const result = {
     preview,
+    previewType,
     typeOptions,
     currentType,
     // default value

src/i18n.ts

@@ -29,6 +29,18 @@ const messages = {
     width: 'Width',
     height: 'Height',
     reset: 'Reset',
+    back: 'Back',
+    next: 'Next',
+    batchScanModelInformation: 'Batch scan model information',
+    modelInformationScanning: 'Scanning model information',
+    selectModelType: 'Select model type',
+    selectSubdirectory: 'Select subdirectory',
+    scanModelInformation: 'Scan model information',
+    selectedAllPaths: 'Selected all model paths',
+    selectedSpecialPath: 'Selected special path',
+    scanMissInformation: 'Download missing information',
+    scanFullInformation: 'Override full information',
+    noModelsInCurrentPath: 'There are no models available in the current path',
     sort: {
       name: 'Name',
       size: 'Largest',
@@ -92,6 +104,18 @@ const messages = {
     width: '宽度',
     height: '高度',
     reset: '重置',
+    back: '返回',
+    next: '下一步',
+    batchScanModelInformation: '批量扫描模型信息',
+    modelInformationScanning: '扫描模型信息',
+    selectModelType: '选择模型类型',
+    selectSubdirectory: '选择子目录',
+    scanModelInformation: '扫描模型信息',
+    selectedAllPaths: '已选所有模型路径',
+    selectedSpecialPath: '已选指定路径',
+    scanMissInformation: '下载缺失信息',
+    scanFullInformation: '覆盖所有信息',
+    noModelsInCurrentPath: '当前路径中没有可用的模型',
     sort: {
       name: '名称',
       size: '最大',

src/style.css

@@ -4,7 +4,3 @@
   @tailwind components;
   @tailwind utilities;
 }
-
-.comfy-modal {
-  z-index: 3000;
-}

src/types/typings.d.ts

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

vite.config.ts

@@ -114,18 +114,17 @@ export default defineConfig({
     outDir: 'web',
     minify: 'esbuild',
     target: 'es2022',
-    sourcemap: true,
+    sourcemap: false,
     rollupOptions: {
       // Disabling tree-shaking
       // Prevent vite remove unused exports
       treeshake: true,
-      output: {
-        manualChunks(id) {
-          if (id.includes('primevue')) {
-            return 'primevue'
-          }
-        },
-      },
+      external: [
+        'vue',
+        'vue-i18n',
+        /^primevue\/?.*/,
+        /^@primevue\/themes\/?.*/,
+      ],
     },
     chunkSizeWarningLimit: 1024,
   },