fix: whisper transcription compatibility with newer transformers (#274)

- Use getattr for max_length to handle removed WhisperConfig attribute
- Cast input_features to model dtype to fix float16 mismatch

.fdignore

@@ -0,0 +1,7 @@
+**/GFPGAN/inputs/**
+**/GFPGAN/tests/**
+**/frame_interpolation/photos/*
+moment.gif
+node.zip
+.DS_Store
+

.github/workflows/publish_action.yml

@@ -1,9 +1,6 @@
 name: 📦 Publish to Comfy registry
 on:
   workflow_dispatch:
-  push:
-    tags:
-      - '*'
 
 permissions:
   issues: write
@@ -21,4 +18,5 @@ jobs:
       - name: 📦 Publish Custom Node
         uses: Comfy-Org/publish-node-action@v1
         with:
+          skip_checkout: 'true'
           personal_access_token: ${{ secrets.COMFY_REGISTRY_TOKEN }}

.gitignore

@@ -1,11 +1,16 @@
 __pycache__
 *.py[cod]
 *.onnx
+
 wheels/
 node_modules/
 compose.yaml
 comfy_mtb.wsb
 Dockerfile
 
+.DS_Store
+node.zip
+
 # I store the gh-pages worktrees (src & build) there
 .worktrees
+comfy.lock

CODE_OF_CONDUCT.md

@@ -0,0 +1,52 @@
+# Code of Conduct
+
+## Our Commitment
+
+We are committed to creating a welcoming and inclusive community for everyone. We believe that a diverse and respectful community is essential for fostering creativity and innovation. We expect all members of our community to adhere to this Code of Conduct.
+
+## Our Expectations
+
+This Code of Conduct applies to all interactions within the mtb community, including:
+
+*   Public communication channels (e.g., GitHub issues, pull requests, discussions, social media)
+*   Private communication channels (e.g., direct messages, email)
+*   In-person events (if any)
+
+We expect all members to:
+
+*   **Be respectful and considerate:** Treat others with kindness and empathy.
+*   **Be inclusive:** Welcome and respect people of all backgrounds, identities, and experiences.
+*   **Be constructive:** Focus on providing helpful and positive feedback.
+*   **Be mindful of your language:** Avoid using offensive, discriminatory, or harassing language.
+*   **Respect privacy:** Do not share personal information without consent.
+
+## Unacceptable Behavior
+
+The following behaviors are not tolerated:
+
+*   Offensive, discriminatory, or harassing language or conduct
+*   Personal attacks or insults
+*   Spamming or trolling
+*   Sharing of malicious or inappropriate content
+*   Disrupting the community or hindering collaboration
+*   Violating the privacy of others
+
+## Reporting Violations
+
+If you experience or witness a violation of this Code of Conduct, please report it to @melmass.  All reports will be treated confidentially and investigated promptly.
+
+## Enforcement
+
+Violations of this Code of Conduct may result in the following actions:
+
+*   Warning
+*   Removal from the community
+*   Ban from the community
+
+## License
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](code_of_conduct.md)
+
+## Contact
+
+If you have any questions or concerns about this Code of Conduct, please contact @melmass.
+

CONTRIBUTING.md

@@ -0,0 +1,62 @@
+# Contributing to mtb
+
+Thank you for your interest in contributing to mtb!  We appreciate your help in making this project better.  This document outlines how you can contribute to the project.
+
+## Project Overview
+
+This project is a collection of custom nodes for ComfyUI, tailored specifically for animation workflows. It aims to provide a streamlined and user-friendly experience for creating animations within the ComfyUI environment.
+
+## Ways to Contribute
+
+We welcome all kinds of contributions! Here's how you can get involved:
+
+*   **Bug Reports:**  If you encounter any issues, please create a new issue on GitHub.  Please include clear steps to reproduce the bug, along with any relevant error messages, workflows or screenshots.
+*   **Feature Requests:**  Have an idea for a new node or feature?  Create a new issue to discuss it!  Please describe the feature in detail, and explain how it would benefit the project.
+*   **Documentation Improvements:**  Help us improve the documentation by fixing errors, adding examples, or clarifying explanations.
+*   **Code Contributions:**  We welcome contributions to the codebase!  Please see the "Development Setup" and "File Structure" sections below for more information.
+*   **Testing:**  Help us ensure the stability and reliability of the project by testing new features and bug fixes.
+*   **Refactoring:**  Help us improve the codebase by refactoring existing code to improve readability, maintainability, and performance.
+
+## Development Setup
+
+```sh
+git clone --recursive https://github.com/melmass/comfy_mtb
+```
+
+## File Structure
+
+Understanding the project structure is crucial for making effective contributions.
+
+*   **`./nodes/*.py`:** This directory contains the definitions for all custom nodes. Nodes are automatically registered when a file defines an array named `__nodes__` containing the node classes.  Make sure your node follows the ComfyUI node definition structure.
+*   **`./web/*.js`:** This directory contains all the frontend JavaScript code for the extension's user interface.
+*   **`./wiki`:** This directory is a Git submodule that contains the project's Wiki documentation, written in Markdown.  Node documentation should be created or updated in the corresponding Markdown files within this submodule. This is then referenced by the UI for in-GUI help
+
+## Coding Style
+
+We use **Ruff** for code formatting to ensure consistency.  Please run Ruff on your code before submitting a pull request.  No specific configuration is required, so the default Ruff settings will be used.
+
+## Contribution Workflow
+
+1.  **Create a Branch:** Create a new branch for your feature or fix.  Use a descriptive branch name (e.g., `feature/new-node`, `fix/bug-in-ui`). **Do not fork the main branch directly.**
+2.  **Make Changes:** Implement your changes in your branch.
+3.  **Run Tests:** (Add instructions on how to run tests if available.)
+4.  **Format Code:** Run Ruff on your code to ensure it is properly formatted.
+5.  **Create a Pull Request:** Submit a pull request to the `main` branch.  Please provide a clear and concise description of your changes.
+
+## Code of Conduct
+
+We are committed to creating a welcoming and inclusive community.  We expect all contributors to adhere to a respectful and professional code of conduct. (Consider adding a link to a CODE_OF_CONDUCT.md file or a standard code of conduct.)
+
+## Tools and Libraries
+
+*   **Python:** The primary programming language for this project.
+*   **ComfyUI:** The underlying framework for the custom nodes.
+
+## Current Focus
+
+We are currently focused on a major refactor to clean up the project's codebase. Contributions related to this effort are particularly welcome!
+
+## Thank You!
+
+Thank you for considering contributing to mtb! Your contributions are greatly appreciated.  We look forward to reviewing your pull requests!
+

README.md

@@ -1,4 +1,10 @@
 # MTB Nodes
+
+> [!NOTE]
+> master/main is outdated for now to keep backward compatibility, the next version is being worked on in
+> [`dev/0.6.0`](https://github.com/melMass/comfy_mtb/tree/dev/0.6.0)
+
+
 [![embedded test](https://github.com/melMass/comfy_mtb/actions/workflows/test_embedded.yml/badge.svg)](https://github.com/melMass/comfy_mtb/actions/workflows/test_embedded.yml)
 
 ![home](https://repository-images.githubusercontent.com/649047066/a3eef9a7-20dd-4ef9-b839-884502d4e873)

__init__.py

@@ -3,11 +3,11 @@
 # File: __init__.py
 # Project: comfy_mtb
 # Author: Mel Massadian
-# Copyright (c) 2023 Mel Massadian
+# Copyright (c) 2023-2025 Mel Massadian
 #
 ###
 
-__version__ = "0.3.0"
+__version__ = "0.5.4"
 
 import os
 
@@ -34,6 +34,8 @@ from aiohttp import web
 
 IN_COMFY = False
 
+PromptServer = None
+
 try:
     from server import PromptServer
 
@@ -75,7 +77,7 @@ def extract_nodes_from_source(filename: Path):
                             )
                         break
     except SyntaxError:
-        log.error("Failed to parse")
+        log.error(f"Failed to parse ast from: {filename}")
     return nodes
 
 
@@ -240,10 +242,29 @@ if failed:
 # - ENDPOINT
 
 
-if IN_COMFY and hasattr(PromptServer, "instance"):
+# TODO: move that away and simplify existing endpoints
+
+
+def register_routes():
+    if not PromptServer:
+        log.error("No prompt server, are you inside comfy?")
+
+    if PromptServer.instance.app.frozen:
+        log.warning(
+            "The router is frozen and cannot be further edited."
+            "If you are hot reloading mtb this is expected."
+        )
+        return
+
     img_cache = None
     prompt_cache = None
 
+    import asyncio
+    import os
+    from io import BytesIO
+
+    from PIL import Image
+
     with contextlib.suppress(ImportError):
         from cachetools import TTLCache
 
@@ -360,13 +381,6 @@ if IN_COMFY and hasattr(PromptServer, "instance"):
         # Return JSON for other requests
         return web.json_response({"message": "Welcome to MTB!"})
 
-    import asyncio
-    import os
-    from io import BytesIO
-
-    from aiohttp import web
-    from PIL import Image
-
     def get_cached_image(file_path: str, preview_params=None, channel=None):
         cache_key = (file_path, preview_params, channel)
         if img_cache and (cache_key in img_cache):
@@ -571,6 +585,10 @@ if IN_COMFY and hasattr(PromptServer, "instance"):
         return await endpoint.do_action(request)
 
 
+if IN_COMFY and hasattr(PromptServer, "instance"):
+    register_routes()
+
+
 # - WAS Dictionary
 MANIFEST = {
     "name": "MTB Nodes",  # The title that will be displayed on Node Class menu,. and Node Class view

biome.json

@@ -1,19 +1,26 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
-  "organizeImports": {
-    "enabled": true
-  },
+  "$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
+  "assist": { "actions": { "source": { "organizeImports": "on" } } },
   "linter": {
     "enabled": true,
     "rules": {
       "recommended": true,
       "suspicious": {
-        "noConsoleLog": "warn"
+        "noConsole": { "level": "warn", "options": { "allow": ["log"] } }
       },
       "style": {
         "noParameterAssign": "off",
         "noShoutyConstants": "warn",
-        "useNamingConvention": "off"
+        "useNamingConvention": "off",
+        "useAsConstAssertion": "error",
+        "useDefaultParameterLast": "error",
+        "useEnumInitializers": "error",
+        "useSelfClosingElements": "error",
+        "useSingleVarDeclarator": "error",
+        "noUnusedTemplateLiteral": "error",
+        "useNumberNamespace": "error",
+        "noInferrableTypes": "error",
+        "noUselessElse": "error"
       }
     }
   },

endpoint.py

@@ -15,7 +15,6 @@ from .utils import (
     backup_file,
     build_glob_patterns,
     glob_multiple,
-    import_install,
     reqs_map,
     run_command,
     styles_dir,
@@ -24,7 +23,6 @@ from .utils import (
 endlog = mklog("mtb endpoint")
 
 # - ACTIONS
-import_install("requirements")
 
 
 def ACTIONS_installDependency(dependency_names: list[str] | None = None):
@@ -112,11 +110,15 @@ def ACTIONS_getUserVideos(
 
 def ACTIONS_getUserImages(
     mode: Literal["input", "output"],
+    target_width: int | str | None = None,
     count=1000,
     offset=0,
     sort: str | None = None,
     include_subfolders: bool = False,
-    subfolder=None,
+    subfolder: str | None = None,
+    # IIRC I copied this from Comfy base
+    # just keeping it until I properly checked implications
+    salt_urls=False,
 ):
     # enabled = "MTB_EXPOSE" in os.environ
     # if not enabled:
@@ -124,11 +126,12 @@ def ACTIONS_getUserImages(
 
     imgs = {}
     count = count or 1000
+    target_width = int(target_width) if target_width else None
 
     input_dir = Path(folder_paths.get_input_directory())
     output_dir = Path(folder_paths.get_output_directory())
 
-    entry_dir = input_dir if mode == "input" else output_dir
+    entry_dir: Path = input_dir if mode == "input" else output_dir
     if subfolder:
         entry_dir = entry_dir / subfolder
 
@@ -157,9 +160,9 @@ def ACTIONS_getUserImages(
 
     imgs = {
         img.name: (
-            f"/mtb/view?filename={img.name}&width=512&type={mode}&subfolder={subfolder or ''}"
+            f"/mtb/view?filename={img.name}{f'&width={target_width}' if target_width and target_width > 0 else ''}&type={mode}&subfolder={subfolder or ''}"
             f"{img.parent.relative_to(entry_dir) if include_subfolders else ''}"
-            f"&preview=&rand={secrets.randbelow(424242)}"
+            f"&preview={f'&rand={secrets.randbelow(424242)}' if salt_urls else ''}"
         )
         for i, img in enumerate(entries)
         if offset <= i < offset + count

install.py

@@ -43,7 +43,6 @@ pip_map = {
     "tb-nightly": "tensorboard",
     "protobuf": "google.protobuf",
     "qrcode[pil]": "qrcode",
-    "requirements-parser": "requirements",
     # Add more mappings as needed
 }
 

nodes/audio.py

@@ -1,20 +1,16 @@
-from typing import Any, TypedDict
+from typing import TYPE_CHECKING, Any, TypedDict
 
 import torch
 import torchaudio
 from comfy.model_management import get_torch_device
 from huggingface_hub import snapshot_download
-from transformers import (
-    WhisperForConditionalGeneration,
-    WhisperProcessor,
-)
 
-# from transformers import (
-#     AutoFeatureExtractor,
-#     WhisperForConditionalGeneration,
-#     WhisperModel,
-#     WhisperProcessor,
-# )
+if TYPE_CHECKING:
+    from transformers import (
+        WhisperForConditionalGeneration,
+        WhisperProcessor,
+    )
+
 from ..log import log
 from ..utils import get_model_path
 
@@ -101,8 +97,8 @@ class MtbAudio:
 class WhisperPipeline(TypedDict):
     """Whisper model pipeline."""
 
-    processor: WhisperProcessor
-    model: WhisperForConditionalGeneration
+    processor: "WhisperProcessor"
+    model: "WhisperForConditionalGeneration"
 
 
 class MTB_LoadWhisper:
@@ -148,6 +144,11 @@ class MTB_LoadWhisper:
 
     def load(self, model_size="tiny", download_missing=False):
         """Load Whisper model and processor."""
+        from transformers import (
+            WhisperForConditionalGeneration,
+            WhisperProcessor,
+        )
+
         whisper_dir = get_model_path("whisper")
         tag = f"whisper-{model_size}"
         model_dir = whisper_dir / tag
@@ -276,14 +277,14 @@ class MTB_AudioToText(MtbAudio):
                 f"Processing chunk {chunk_offset:.1f}s - {chunk_end / sample_rate:.1f}s"
             )
 
-            max_length = model.config.max_length or 448
+            max_length = getattr(model.config, "max_length", None) or 448
             attention_mask = torch.ones((1, max_length))
 
             input_features = processor(
                 chunk_waveform,
                 sampling_rate=sample_rate,
                 return_tensors="pt",
-            ).input_features.to(device)
+            ).input_features.to(device=device, dtype=model.dtype)
 
             with torch.no_grad():
                 predicted_ids = model.generate(

nodes/batch.py

@@ -335,9 +335,9 @@ class MTB_BatchShape:
                 "image_width": ("INT", {"default": 512}),
                 "image_height": ("INT", {"default": 512}),
                 "shape_size": ("INT", {"default": 100}),
-                "color": ("COLOR", {"default": "#ffffff"}),
-                "bg_color": ("COLOR", {"default": "#000000"}),
-                "shade_color": ("COLOR", {"default": "#000000"}),
+                "color": ("COLOR", {"default": "#ffffff","widgetType": "MTB_COLOR"}),
+                "bg_color": ("COLOR", {"default": "#000000","widgetType": "MTB_COLOR"}),
+                "shade_color": ("COLOR", {"default": "#000000","widgetType": "MTB_COLOR"}),
                 "thickness": ("INT", {"default": 5}),
                 "shadex": ("FLOAT", {"default": 0.0}),
                 "shadey": ("FLOAT", {"default": 0.0}),
@@ -842,7 +842,7 @@ class MTB_Batch2dTransform:
                     ["edge", "constant", "reflect", "symmetric"],
                     {"default": "edge"},
                 ),
-                "constant_color": ("COLOR", {"default": "#000000"}),
+                "constant_color": ("COLOR", {"default": "#000000","widgetType": "MTB_COLOR"}),
             },
             "optional": {
                 "x": ("FLOATS",),

nodes/clock.py

@@ -0,0 +1,190 @@
+import time
+import uuid
+from collections import OrderedDict
+from typing import Any, TypedDict
+
+from comfy.comfy_types.node_typing import IO as CIO
+from server import PromptServer
+
+from ..log import log
+
+
+class Clock(TypedDict):
+    name: str
+    start: float
+    end: float | None
+
+
+active_timers: OrderedDict[str, Clock] = OrderedDict()
+
+# TODO: lower this
+MAX_CLOCKS = 50
+
+
+class MTB_StartClock:
+    """
+    Starts a profiling clock with a given name.
+
+    Outputs a unique ID that must be passed to EndClock.
+    """
+
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "name": ("STRING", {"default": "Clock A"}),
+                "cache": (
+                    "BOOLEAN",
+                    {
+                        "default": False,
+                        "tooltip": "Cache the clock ID, this means the node will follow Comfy's default invalidation system. If False it will always invalidate / mark the node as 'dirty'",
+                    },
+                ),
+            },
+            "optional": {
+                "passthrough": (CIO.ANY,),
+            },
+        }
+
+    RETURN_TYPES = (
+        CIO.ANY,
+        "STRING",
+    )
+    RETURN_NAMES = (
+        "passthrough",
+        "clock_id",
+    )
+    FUNCTION = "start_timer"
+    CATEGORY = "mtb/utils"
+
+    def start_timer(
+        self, *, name: str, passthrough: Any | None = None, **kwargs
+    ):
+        global active_timers
+
+        if len(active_timers) >= MAX_CLOCKS:
+            # get oldest clock
+            removed_key = None
+            for key, clock_data in active_timers.items():
+                if clock_data["end"] is not None:
+                    removed_key = key
+                    break
+            if removed_key:
+                removed_clock = active_timers.pop(removed_key)
+                log.info(
+                    f"[Profiling] Evicted finished clock '{removed_clock['name']}' (ID: {removed_key}) due to limit ({MAX_CLOCKS})."
+                )
+            else:
+                removed_key, removed_clock = active_timers.popitem(last=False)
+                log.warning(
+                    f"[Profiling] Evicted running clock '{removed_clock['name']}' (ID: {removed_key}) due to limit ({MAX_CLOCKS})."
+                )
+
+        clock_id = str(uuid.uuid4())
+        start_time = time.perf_counter()
+
+        active_timers[clock_id] = {
+            "start": start_time,
+            "name": name,
+            "end": None,
+        }
+
+        active_timers.move_to_end(clock_id)
+
+        log.debug(f"[Profiling] Clock '{name}' (ID: {clock_id}) started.")
+
+        return (
+            passthrough,
+            clock_id,
+        )
+
+    @classmethod
+    def IS_CHANGED(
+        cls, *, name: str, cache: bool = False, passthrough: Any | None = None
+    ):
+        if not cache:
+            return float("Nan")
+
+        return {"name": name, "cache": cache, "passthrough": passthrough}
+
+
+class MTB_EndClock:
+    """
+    Stops a profiling clock identified by its ID and returns the elapsed time in milliseconds.
+
+    Errors if the clock ID is not found or already stopped.
+    """
+
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "clock_id": (
+                    "STRING",
+                    {"forceInput": True},
+                ),
+            },
+            "optional": {
+                "passthrough": (CIO.ANY,),
+            },
+            "hidden": {
+                "unique_id": "UNIQUE_ID",
+            },
+        }
+
+    RETURN_TYPES = (
+        CIO.ANY,
+        "STRING",
+        "FLOAT",
+        "INT",
+    )
+    RETURN_NAMES = (
+        "passthrough",
+        "name",
+        "seconds",
+        "milliseconds",
+    )
+    FUNCTION = "end_timer"
+    CATEGORY = "mtb/utils"
+
+    def end_timer(self, clock_id: str, passthrough, unique_id=None):
+        global active_timers
+
+        if clock_id not in active_timers:
+            raise ValueError(
+                f"Error: Clock with ID '{clock_id}' not found. "
+                "Ensure StartClock was executed for this ID and proper passthrough chaining."
+            )
+
+        clock = active_timers[clock_id]
+        if clock.get("end") is not None:
+            return (passthrough, clock["name"], clock["end"])
+
+        start_time = clock["start"]
+        end_time = time.perf_counter()
+
+        duration_seconds = end_time - start_time
+        duration_ms = int(duration_seconds * 1000)
+        clock["end"] = duration_ms
+
+        active_timers.move_to_end(clock_id)
+
+        log.debug(
+            f"[Profiling] Clock '{clock['name']}' (ID: {clock_id}) stopped. Elapsed: {duration_ms}ms"
+        )
+        if unique_id:
+            PromptServer.instance.send_progress_text(
+                f"Clock '{clock['name']}' took {duration_seconds:.4f} seconds",
+                unique_id,
+            )
+
+        return (passthrough, clock["name"], duration_seconds, duration_ms)
+
+
+__nodes__ = [MTB_StartClock, MTB_EndClock]

nodes/crop.py

@@ -1,13 +1,22 @@
-import numpy as np
+from typing import NamedTuple
+
 import torch
-from PIL import Image, ImageDraw, ImageFilter
+import torchvision.transforms.functional as TF
 
 from ..log import log
-from ..utils import np2tensor, pil2tensor, tensor2np, tensor2pil
+
+
+class BoundingBox(NamedTuple):
+    """The bounding box tuple."""
+
+    x: int
+    y: int
+    width: int
+    height: int
 
 
 class MTB_Bbox:
-    """The bounding box (BBOX) custom type used by other nodes"""
+    """A literal bounding box."""
 
     @classmethod
     def INPUT_TYPES(cls):
@@ -37,12 +46,14 @@ class MTB_Bbox:
     FUNCTION = "do_crop"
     CATEGORY = "mtb/crop"
 
-    def do_crop(self, x: int, y: int, width: int, height: int):  # bbox
-        return ((x, y, width, height),)
+    def do_crop(
+        self, x: int, y: int, width: int, height: int
+    ) -> tuple[BoundingBox]:  # bbox
+        return (BoundingBox(x, y, width, height),)
 
 
 class MTB_SplitBbox:
-    """Split the components of a bbox"""
+    """Split the components of a bbox."""
 
     @classmethod
     def INPUT_TYPES(cls):
@@ -55,8 +66,8 @@ class MTB_SplitBbox:
     RETURN_TYPES = ("INT", "INT", "INT", "INT")
     RETURN_NAMES = ("x", "y", "width", "height")
 
-    def split_bbox(self, bbox):
-        return (bbox[0], bbox[1], bbox[2], bbox[3])
+    def split_bbox(self, bbox: BoundingBox) -> BoundingBox:
+        return bbox
 
 
 class MTB_UpscaleBboxBy:
@@ -74,26 +85,23 @@ class MTB_UpscaleBboxBy:
 
     FUNCTION = "upscale"
 
-    def upscale(
-        self, bbox: tuple[int, int, int, int], scale: float
-    ) -> tuple[tuple[int, int, int, int]]:
+    def upscale(self, bbox: BoundingBox, scale: float) -> tuple[BoundingBox]:
         x, y, width, height = bbox
 
-        center_x = x + width // 2
-        center_y = y + height // 2
+        center_x = x + width / 2
+        center_y = y + height / 2
 
         new_width = int(width * scale)
         new_height = int(height * scale)
 
-        new_x = center_x - new_width // 2
-        new_y = center_y - new_height // 2
+        new_x = int(center_x - new_width / 2)
+        new_y = int(center_y - new_height / 2)
 
-        scaled = (new_x, new_y, new_width, new_height)
-        return (scaled,)
+        return (BoundingBox(new_x, new_y, new_width, new_height),)
 
 
 class MTB_BboxFromMask:
-    """From a mask extract the bounding box"""
+    """From a mask extract the bounding box."""
 
     @classmethod
     def INPUT_TYPES(cls):
@@ -103,7 +111,7 @@ class MTB_BboxFromMask:
                 "invert": ("BOOLEAN", {"default": False}),
             },
             "optional": {
-                "image": ("IMAGE",),
+                "image": ("IMAGE", {"tooltip": "Optional image"}),
             },
         }
 
@@ -119,52 +127,44 @@ class MTB_BboxFromMask:
     CATEGORY = "mtb/crop"
 
     def extract_bounding_box(
-        self, mask: torch.Tensor, invert: bool, image=None
-    ):
-        # if image != None:
-        #     if mask.size(0) != image.size(0):
-        #         if mask.size(0) != 1:
-        #             log.error(
-        #                 f"Batch count mismatch for mask and image, it can either be 1 mask for X images, or X masks for X images (mask: {mask.shape} | image: {image.shape})"
-        #             )
+        self,
+        mask: torch.Tensor,
+        *,
+        invert: bool = False,
+        image: torch.Tensor | None = None,
+    ) -> tuple[BoundingBox, torch.Tensor | None]:
+        mask = 1 - mask if invert else mask
+        non_zero_indices = torch.nonzero(mask)
 
-        #             raise Exception(
-        #                 f"Batch count mismatch for mask and image, it can either be 1 mask for X images, or X masks for X images (mask: {mask.shape} | image: {image.shape})"
-        #             )
+        if non_zero_indices.numel() == 0:
+            log.warning(
+                "BboxFromMask: Mask is empty. Returning a (0,0,0,0) bbox."
+            )
+            return (BoundingBox(0, 0, 0, 0), image)
 
-        # we invert it
-        _mask = tensor2pil(1.0 - mask)[0] if invert else tensor2pil(mask)[0]
-        alpha_channel = np.array(_mask)
+        min_coords = torch.min(non_zero_indices, dim=0).values
+        max_coords = torch.max(non_zero_indices, dim=0).values
 
-        non_zero_indices = np.nonzero(alpha_channel)
+        min_y, min_x = min_coords[1].item(), min_coords[2].item()
+        max_y, max_x = max_coords[1].item(), max_coords[2].item()
 
-        min_x, max_x = np.min(non_zero_indices[1]), np.max(non_zero_indices[1])
-        min_y, max_y = np.min(non_zero_indices[0]), np.max(non_zero_indices[0])
+        width = max_x - min_x + 1
+        height = max_y - min_y + 1
 
-        # Create a bounding box tuple
-        if image != None:
-            # Convert the image to a NumPy array
-            imgs = tensor2np(image)
-            out = []
-            for img in imgs:
-                # Crop the image from the bounding box
-                img = img[min_y:max_y, min_x:max_x, :]
-                log.debug(f"Cropped image to shape {img.shape}")
-                out.append(img)
-
-            image = np2tensor(out)
-            log.debug(f"Cropped images shape: {image.shape}")
-        bounding_box = (min_x, min_y, max_x - min_x, max_y - min_y)
-        return (
-            bounding_box,
-            image,
+        bounding_box = BoundingBox(
+            int(min_x), int(min_y), int(width), int(height)
         )
 
+        cropped_image = None
+        if image is not None:
+            cropped_image = image[:, min_y : max_y + 1, min_x : max_x + 1, :]
+
+        return (bounding_box, cropped_image)
+
 
 class MTB_Crop:
-    """Crops an image and an optional mask to a given bounding box
+    """Crop an image and an optional mask to a given bounding box.
 
-    The bounding box can be given as a tuple of (x, y, width, height) or as a BBOX type
     The BBOX input takes precedence over the tuple input
     """
 
@@ -204,35 +204,38 @@ class MTB_Crop:
     def do_crop(
         self,
         image: torch.Tensor,
-        mask=None,
-        x=0,
-        y=0,
-        width=256,
-        height=256,
-        bbox=None,
+        *,
+        mask: torch.Tensor | None = None,
+        x: int = 0,
+        y: int = 0,
+        width: int = 256,
+        height: int = 256,
+        bbox: BoundingBox | None = None,
     ):
-        image = image.numpy()
-        if mask is not None:
-            mask = mask.numpy()
-
         if bbox is not None:
             x, y, width, height = bbox
 
-        cropped_image = image[:, y : y + height, x : x + width, :]
-        cropped_mask = None
-        if mask is not None:
-            cropped_mask = (
-                mask[:, y : y + height, x : x + width]
-                if mask is not None
-                else None
+        if width <= 0 or height <= 0:
+            log.error(
+                "Crop dimensions must be positive. Check the BBOX or widget inputs."
             )
-        crop_data = (x, y, width, height)
+            return (
+                torch.zeros_like(image),
+                torch.zeros_like(mask) if mask is not None else None,
+                (x, y, width, height),
+            )
+
+        cropped_image = image[:, y : y + height, x : x + width, :]
+        cropped_mask = (
+            mask[:, y : y + height, x : x + width]
+            if mask is not None
+            else None
+        )
+        crop_data = BoundingBox(x, y, width, height)
 
         return (
-            torch.from_numpy(cropped_image),
-            torch.from_numpy(cropped_mask)
-            if cropped_mask is not None
-            else None,
+            cropped_image,
+            cropped_mask if cropped_mask is not None else None,
             crop_data,
         )
 
@@ -246,35 +249,33 @@ class MTB_Crop:
 #     return (x_left, y_top, x_right, y_bottom)
 
 
-def bbox_check(bbox, target_size=None):
+def bbox_check(bbox: BoundingBox, target_size: tuple[int, int] | None = None):
     if not target_size:
         return bbox
 
-    new_bbox = (
-        bbox[0],
-        bbox[1],
-        min(target_size[0] - bbox[0], bbox[2]),
-        min(target_size[1] - bbox[1], bbox[3]),
+    new_bbox = BoundingBox(
+        bbox.x,
+        bbox.y,
+        min(target_size[0] - bbox.x, bbox.width),
+        min(target_size[1] - bbox.y, bbox.height),
     )
     if new_bbox != bbox:
-        log.warn(f"BBox too big, constrained to {new_bbox}")
+        log.warning(f"BBox too big, constrained to {new_bbox}")
 
     return new_bbox
 
 
-def bbox_to_region(bbox, target_size=None):
+def bbox_to_region(
+    bbox: BoundingBox, target_size: tuple[int, int] | None = None
+):
     bbox = bbox_check(bbox, target_size)
 
     # to region
-    return (bbox[0], bbox[1], bbox[0] + bbox[2], bbox[1] + bbox[3])
+    return (bbox.x, bbox.y, bbox.x + bbox.width, bbox.y + bbox.height)
 
 
 class MTB_Uncrop:
-    """Uncrops an image to a given bounding box
-
-    The bounding box can be given as a tuple of (x, y, width, height) or as a BBOX type
-    The BBOX input takes precedence over the tuple input
-    """
+    """Uncrop an image to a given bounding box."""
 
     @classmethod
     def INPUT_TYPES(cls):
@@ -291,91 +292,113 @@ class MTB_Uncrop:
         }
 
     RETURN_TYPES = ("IMAGE",)
-    FUNCTION = "do_crop"
-
+    FUNCTION = "do_uncrop"
     CATEGORY = "mtb/crop"
 
-    def do_crop(self, image, crop_image, bbox, border_blending):
-        def inset_border(image, border_width=20, border_color=(0)):
-            width, height = image.size
-            bordered_image = Image.new(
-                image.mode, (width, height), border_color
+    def do_uncrop(
+        self,
+        image: torch.Tensor,
+        crop_image: torch.Tensor,
+        bbox: BoundingBox,
+        border_blending: float = 0.25,
+    ):
+        if len(image) > 1 and len(image) != len(crop_image):
+            raise ValueError(
+                "Uncrop: Batch size of background 'image' must be 1 or match the 'crop_image' batch size."
             )
-            bordered_image.paste(image, (0, 0))
-            draw = ImageDraw.Draw(bordered_image)
-            draw.rectangle(
-                (0, 0, width - 1, height - 1),
-                outline=border_color,
-                width=border_width,
-            )
-            return bordered_image
+        import comfy.utils
 
-        single = image.size(0) == 1
-        if image.size(0) != crop_image.size(0):
-            if not single:
-                raise ValueError(
-                    "The Image batch count is greater than 1, but doesn't match the crop_image batch count. If using batches they should either match or only crop_image must be greater than 1"
-                )
+        pbar = comfy.utils.ProgressBar(4)
 
-        images = tensor2pil(image)
-        crop_imgs = tensor2pil(crop_image)
-        out_images = []
-        for i, crop in enumerate(crop_imgs):
-            if single:
-                img = images[0]
-            else:
-                img = images[i]
+        device = image.device
 
-            # uncrop the image based on the bounding box
-            bb_x, bb_y, bb_width, bb_height = bbox
+        log.debug(f"Working on device: {device}")
 
-            paste_region = bbox_to_region(
-                (bb_x, bb_y, bb_width, bb_height), img.size
-            )
-            # log.debug(f"Paste region: {paste_region}")
-            # new_region = adjust_paste_region(img.size, paste_region)
-            # log.debug(f"Adjusted paste region: {new_region}")
-            # # Check if the adjusted paste region is different from the original
+        crop_image = crop_image.to(device)
 
-            crop_img = crop.convert("RGB")
+        if len(image) == 1 and len(crop_image) > 1:
+            image = image.repeat(len(crop_image), 1, 1, 1)
 
-            log.debug(f"Crop image size: {crop_img.size}")
-            log.debug(f"Image size: {img.size}")
+        batch_size, bg_h, bg_w, _ = image.shape
+        _, fg_h, fg_w, _ = crop_image.shape
+        x, y, width, height = bbox
 
-            if border_blending > 1.0:
-                border_blending = 1.0
-            elif border_blending < 0.0:
-                border_blending = 0.0
-
-            blend_ratio = (max(crop_img.size) / 2) * float(border_blending)
-
-            blend = img.convert("RGBA")
-            mask = Image.new("L", img.size, 0)
-
-            mask_block = Image.new("L", (bb_width, bb_height), 255)
-            mask_block = inset_border(mask_block, int(blend_ratio / 2), (0))
-
-            mask.paste(mask_block, paste_region)
-            log.debug(f"Blend size: {blend.size} | kind {blend.mode}")
-            log.debug(
-                f"Crop image size: {crop_img.size} | kind {crop_img.mode}"
-            )
-            log.debug(f"BBox: {paste_region}")
-            blend.paste(crop_img, paste_region)
-
-            mask = mask.filter(ImageFilter.BoxBlur(radius=blend_ratio / 4))
-            mask = mask.filter(
-                ImageFilter.GaussianBlur(radius=blend_ratio / 4)
+        if (width, height) != (fg_w, fg_h):
+            log.warning(
+                f"Uncrop: crop_image size {(fg_w, fg_h)} "
+                "differs from bbox {(width, height)}. Resizing to fit bbox."
             )
 
-            blend.putalpha(mask)
-            img = Image.alpha_composite(img.convert("RGBA"), blend)
-            out_images.append(img.convert("RGB"))
+        resized_crop = crop_image.permute(0, 3, 1, 2)
+        resized_crop = torch.nn.functional.interpolate(
+            resized_crop,
+            size=(height, width),
+            mode="bicubic",
+            align_corners=False,
+        )
+        resized_crop = resized_crop.permute(0, 2, 3, 1)
 
-        return (pil2tensor(out_images),)
+        pbar.update(1)
+        # paste coords
+        paste_x1 = max(x, 0)
+        paste_y1 = max(y, 0)
+        paste_x2 = min(x + width, bg_w)
+        paste_y2 = min(y + height, bg_h)
+
+        # region from crop (bound)
+        crop_x1 = max(0, -x)
+        crop_y1 = max(0, -y)
+        crop_x2 = crop_x1 + (paste_x2 - paste_x1)
+        crop_y2 = crop_y1 + (paste_y2 - paste_y1)
+
+        if paste_x1 >= paste_x2 or paste_y1 >= paste_y2:
+            log.warning(
+                "Uncrop: BBOX is entirely outside the image boundaries. Returning original image."
+            )
+            return (image,)
+
+        pbar.update(1)
+        source_slice = resized_crop[:, crop_y1:crop_y2, crop_x1:crop_x2, :]
+
+        final_image = image.clone()
+        final_image[:, paste_y1:paste_y2, paste_x1:paste_x2, :] = source_slice
+
+        pbar.update(1)
+
+        blend_radius = int(max(width, height) * border_blending * 0.5)
+        if blend_radius > 0:
+            _device = device
+            if torch.cuda.is_available():
+                _device = torch.device("cuda")
+
+            log.debug("Processing blending")
+            alpha_mask = torch.zeros((batch_size, bg_h, bg_w), device=_device)
+            alpha_mask[:, paste_y1:paste_y2, paste_x1:paste_x2] = 1.0
+
+            kernel_size = 2 * blend_radius + 1
+
+            log.debug("Gaussian blur...")
+            alpha_mask = TF.gaussian_blur(
+                alpha_mask.unsqueeze(1), kernel_size=[kernel_size, kernel_size]
+            ).squeeze(1)
+            alpha_mask = alpha_mask.unsqueeze(-1)
+
+            log.debug("Applying blending")
+            final_image = final_image.to(_device) * alpha_mask + image.to(
+                _device
+            ) * (1.0 - alpha_mask)
+
+        pbar.update(1)
+        return (final_image.to(device),)
 
 
 class MTB_BBoxForceDimensions:
+    """
+    Resize a BBOX to new dimensions while keeping its center.
+
+    Optionally constrains the BBOX to stay within image boundaries.
+    """
+
     @classmethod
     def INPUT_TYPES(cls):
         return {
@@ -383,6 +406,7 @@ class MTB_BBoxForceDimensions:
                 "bbox": ("BBOX",),
                 "width": ("INT", {"default": 512, "min": 1, "max": 8192}),
                 "height": ("INT", {"default": 512, "min": 1, "max": 8192}),
+                "constrain_to_image": ("BOOLEAN", {"default": True}),
             },
             "optional": {
                 "image": ("IMAGE",),
@@ -395,10 +419,12 @@ class MTB_BBoxForceDimensions:
 
     def force_dimensions(
         self,
+        *,
         bbox: tuple[int, int, int, int],
         width: int,
         height: int,
-        image: torch.Tensor = None,
+        constrain_to_image: bool = True,
+        image: torch.Tensor | None = None,
     ) -> tuple[tuple[int, int, int, int]]:
         x, y, curr_width, curr_height = bbox
 
@@ -408,27 +434,14 @@ class MTB_BBoxForceDimensions:
         new_x = center_x - width // 2
         new_y = center_y - height // 2
 
-        if image is not None:
+        if constrain_to_image and image is not None:
             img_height, img_width = image.shape[1:3]
-            x_overflow = max(0, new_x + width - img_width) + min(0, new_x)
-            y_overflow = max(0, new_y + height - img_height) + min(0, new_y)
-            if width > img_width or height > img_height:
-                x_exceed = width - img_width if width > img_width else 0
-                y_exceed = height - img_height if height > img_height else 0
-                raise ValueError(
-                    f"Target bbox dimensions ({width}x{height}) exceed image bounds ({img_width}x{img_height}) "
-                    f"by {x_exceed}px horizontally and {y_exceed}px vertically"
-                )
+            new_x = max(0, min(new_x, img_width - width))
+            new_y = max(0, min(new_y, img_height - height))
+            width = min(width, img_width)
+            height = min(height, img_height)
 
-            if x_overflow > 0 or x_overflow < 0:
-                new_x -= x_overflow
-
-            if y_overflow > 0:
-                new_y -= y_overflow
-            elif y_overflow < 0:
-                new_y -= y_overflow  # Add the negative overflow
-
-        return ((int(new_x), int(new_y), width, height),)
+        return ((new_x, new_y, width, height),)
 
 
 __nodes__ = [

nodes/faceswap.py

@@ -4,12 +4,8 @@ import sys
 from pathlib import Path
 
 import comfy.model_management as model_management
-import cv2
-import insightface
 import numpy as np
-import onnxruntime
 import torch
-from insightface.model_zoo.inswapper import INSwapper
 from PIL import Image
 
 from ..errors import ModelNotFound
@@ -43,6 +39,8 @@ class MTB_LoadFaceAnalysisModel:
     DEPRECATED = True
 
     def load_model(self, faceswap_model: str):
+        import insightface
+
         if faceswap_model == "antelopev2":
             download_antelopev2()
 
@@ -81,6 +79,9 @@ class MTB_LoadFaceSwapModel:
     DEPRECATED = True
 
     def load_model(self, faceswap_model: str):
+        import onnxruntime
+        from insightface.model_zoo.inswapper import INSwapper
+
         model_path = get_model_path("insightface", faceswap_model)
         if not model_path or not model_path.exists():
             raise ModelNotFound(f"{faceswap_model} ({model_path})")
@@ -212,6 +213,8 @@ def swap_face(
     face_swapper_model,
     faces_index: set[int] | None = None,
 ) -> Image.Image:
+    import cv2
+
     if faces_index is None:
         faces_index = {0}
     log.debug(f"Swapping faces: {faces_index}")

nodes/generate.py

@@ -193,11 +193,11 @@ by default it fallsback to a default font.
                 ),
                 "color": (
                     "COLOR",
-                    {"default": "black"},
+                    {"default": "black", "widgetType": "MTB_COLOR"},
                 ),
                 "background": (
                     "COLOR",
-                    {"default": "white"},
+                    {"default": "white", "widgetType": "MTB_COLOR"},
                 ),
                 "h_align": (("left", "center", "right"), {"default": "left"}),
                 "v_align": (("top", "center", "bottom"), {"default": "top"}),
@@ -343,9 +343,7 @@ by default it fallsback to a default font.
 
         def render_text(text_to_render, alpha=None):
             if trim:
-                text_to_render = (
-                    text_to_render.encode("ascii", "ignore").decode().strip()
-                )
+                text_to_render = text_to_render.strip()
             if wrap:
                 wrap_width = (((width / 100) * h_coverage) / font_size) * 2
                 lines = textwrap.wrap(text_to_render, width=wrap_width)
@@ -418,7 +416,9 @@ by default it fallsback to a default font.
                         active_chunks.append((chunk["text"], alpha))
 
                 for chunk_text, alpha in active_chunks:
-                    chunk_img = render_text(chunk_text, alpha)
+                    chunk_img = render_text(
+                        chunk_text.encode("ascii", "ignore").decode(), alpha
+                    )
                     frame = Image.alpha_composite(frame, chunk_img)
 
                 frames.append(frame)

nodes/graph_utils.py

@@ -4,11 +4,13 @@ import re
 import urllib.parse
 import urllib.request
 from math import pi
+from typing import Any
 
 import comfy.model_management as model_management
 import comfy.utils
 import numpy as np
 import torch
+from comfy.comfy_types.node_typing import IO as CIO
 from PIL import Image
 
 from ..log import log
@@ -867,6 +869,53 @@ class MTB_TensorOps:
         return (result,)
 
 
+class MTB_GetItem:
+    """Generic index based getter for common types"""
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "container": (CIO.ANY,),
+                "index": ("INT", {"default": 0}),
+            }
+        }
+
+    RETURN_TYPES = (CIO.ANY,)
+    RETURN_NAMES = ("item",)
+    FUNCTION = "get_item"
+    CATEGORY = "mtb/utils"
+
+    def get_item(self, container: Any, index: int):
+        if "__getitem__" in dir(container):
+            log.debug(f"Container is {type(container)}")
+            res = container[index]
+            if type(res) is torch.Tensor:
+                res = res.unsqueeze(0)
+
+            return (res,)
+
+
+class MTB_BooleanNot:
+    """Inverts a boolean."""
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "bool_in": ("BOOLEAN", {"default": False}),
+            },
+        }
+
+    RETURN_TYPES = ("BOOLEAN",)
+    RETURN_NAMES = ("inverted_bool",)
+    FUNCTION = "invert"
+    CATEGORY = "mtb/utils"
+
+    def invert(self, bool_in: bool):
+        return (not bool_in,)
+
+
 __nodes__ = [
     MTB_StringReplace,
     MTB_FitNumber,
@@ -882,4 +931,6 @@ __nodes__ = [
     MTB_FloatToFloats,
     MTB_FloatsToInts,
     MTB_TensorOps,
+    MTB_BooleanNot,
+    MTB_GetItem,
 ]

nodes/image_processing.py

@@ -3,11 +3,12 @@ import json
 import math
 import os
 
-import comfy.model_management as model_management
+import comfy.utils
 import folder_paths
 import numpy as np
 import torch
 import torch.nn.functional as F
+from comfy import model_management
 from PIL import Image, ImageOps
 from PIL.PngImagePlugin import PngInfo
 from skimage.filters import gaussian
@@ -74,7 +75,10 @@ class MTB_ExtractCoordinatesFromImage:
     def INPUT_TYPES(cls):
         return {
             "required": {
-                "threshold": ("FLOAT",),
+                "threshold": (
+                    "FLOAT",
+                    {"default": 0.5, "min": 0.0, "max": 1.0, "step": 0.01},
+                ),
                 "max_points": ("INT", {"default": 50, "min": 0}),
             },
             "optional": {"image": ("IMAGE",), "mask": ("MASK",)},
@@ -87,72 +91,124 @@ class MTB_ExtractCoordinatesFromImage:
         image: torch.Tensor | None = None,
         mask: torch.Tensor | None = None,
     ) -> tuple[list[list[tuple[int, int]]], torch.Tensor]:
-        if image is not None:
-            batch_count, height, width, channel_count = image.shape
-            imgs = image
-        else:
-            if mask is None:
-                raise ValueError("Must provide either image or mask")
-            batch_count, height, width = mask.shape
-            channel_count = 1
-            imgs = mask
+        if image is None and mask is None:
+            raise ValueError("Must provide either image or mask")
 
-        if channel_count not in [1, 2, 3, 4]:
-            raise ValueError(f"Incorrect channel count: {channel_count}")
+        if image is not None:
+            batch_count, height, width, _channel_count = image.shape
+            input_device = image.device
+            if mask is not None:
+                if mask.ndim == 2:
+                    mask = mask.unsqueeze(0)
+                if mask.ndim != 3:
+                    raise ValueError(
+                        f"Mask has unexpected ndim: {mask.ndim}. Expected 2 or 3."
+                    )
+
+                b_mask, h_mask, w_mask = mask.shape
+                if not (h_mask == height and w_mask == width):
+                    raise ValueError(
+                        f"Image dimensions ({height}x{width}) and mask dimensions ({h_mask}x{w_mask}) are spatially incompatible."
+                    )
+                if b_mask == 1 and batch_count > 1:
+                    mask = mask.expand(batch_count, height, width)
+
+                elif b_mask != batch_count:
+                    raise ValueError(
+                        f"Image batch size ({batch_count}) and mask batch size ({b_mask}) are incompatible and mask cannot be broadcast."
+                    )
+        else:
+            if mask.ndim == 2:
+                mask = mask.unsqueeze(0)
+
+            if mask.ndim != 3:
+                raise ValueError(
+                    f"Mask has unexpected ndim: {mask.ndim} when image is not provided. Expected 2 or 3."
+                )
+
+            batch_count, height, width = mask.shape
+            input_device = mask.device
 
         all_points: list[list[tuple[int, int]]] = []
         debug_images = torch.zeros(
             (batch_count, height, width, 3),
             dtype=torch.uint8,
-            device=imgs.device,
+            device=input_device,
         )
 
-        for i, img in enumerate(imgs):
-            if channel_count == 1:
-                alpha_channel = img if len(img.shape) == 2 else img[:, :, 0]
-            elif channel_count == 2:
-                alpha_channel = img[:, :, 1]
-            elif channel_count == 4:
-                alpha_channel = img[:, :, 3]
+        points_tensor = torch.tensor(
+            [255, 255, 255], dtype=torch.uint8, device=input_device
+        )
+
+        for i in range(batch_count):
+            value_threshold: torch.Tensor
+            if image is not None:
+                img_slice = image[i]
+                img_channels = img_slice.shape[2]
+                if img_channels == 1 or img_channels == 2:
+                    value_threshold = img_slice[:, :, 0]
+                elif img_channels == 3 or img_channels == 4:
+                    value_threshold = img_slice[:, :, :3].max(dim=2)[0]
+                else:
+                    raise ValueError(
+                        f"Unsupported image channel count: {img_channels} for image at batch index {i}"
+                    )
             else:
-                # get intensity
-                alpha_channel = img[:, :, :3].max(dim=2)[0]
+                mask_slice = mask[i]
+                value_threshold = mask_slice
 
-            points = (alpha_channel > threshold).nonzero(as_tuple=False)
+            condition = value_threshold > threshold
+            if image is not None and mask is not None:
+                mask_slice = mask[i]
+                mask_active_condition = mask_slice > 0.0
+                condition = condition & mask_active_condition
 
-            if len(points) > max_points:
-                indices = torch.randperm(points.size(0), device=img.device)[
-                    :max_points
-                ]
-                points = points[indices]
+            points_yx = condition.nonzero(as_tuple=False)
 
-            points = [(int(y.item()), int(x.item())) for x, y in points]
-            all_points.append(points)
+            if points_yx.size(0) > max_points:
+                # shuffle and pick max_points randomly
+                indices = torch.randperm(
+                    points_yx.size(0), device=input_device
+                )[:max_points]
+                points_yx = points_yx[indices]
+            elif max_points == 0:
+                points_yx = torch.empty(
+                    (0, 2), dtype=torch.long, device=input_device
+                )
 
-            for x, y in points:
-                self._draw_circle(debug_images[i], (x, y), 5)
+            current_points = [
+                (int(p[1].item()), int(p[0].item())) for p in points_yx
+            ]
+            all_points.append(current_points)
+            for x_coord, y_coord in current_points:
+                self._draw_circle(
+                    debug_images[i],
+                    (x_coord, y_coord),
+                    radius=5,
+                    color_tensor=points_tensor,
+                )
 
         return (all_points, debug_images)
 
     @staticmethod
     def _draw_circle(
-        image: torch.Tensor, center: tuple[int, int], radius: int
+        image: torch.Tensor,
+        center: tuple[int, int],
+        radius: int,
+        color_tensor: torch.Tensor,
     ):
         """Draw a 5px circle on the image."""
         x0, y0 = center
-        for x in range(-radius, radius + 1):
-            for y in range(-radius, radius + 1):
-                in_radius = x**2 + y**2 <= radius**2
-                in_bounds = (
-                    0 <= x0 + x < image.shape[1]
-                    and 0 <= y0 + y < image.shape[0]
-                )
-                if in_radius and in_bounds:
-                    image[y0 + y, x0 + x] = torch.tensor(
-                        [255, 255, 255],
-                        dtype=torch.uint8,
-                        device=image.device,
-                    )
+        h, w, _ = image.shape
+        min_x_bbox = max(0, x0 - radius)
+        max_x_bbox = min(w - 1, x0 + radius)
+        min_y_bbox = max(0, y0 - radius)
+        max_y_bbox = min(h - 1, y0 + radius)
+
+        for py in range(min_y_bbox, max_y_bbox + 1):
+            for px in range(min_x_bbox, max_x_bbox + 1):
+                if (px - x0) ** 2 + (py - y0) ** 2 <= radius**2:
+                    image[py, px] = color_tensor
 
 
 class MTB_ColorCorrectGPU:
@@ -627,6 +683,7 @@ class MTB_ImageCompare:
 
 
 import requests
+import time
 
 
 class MTB_LoadImageFromUrl:
@@ -642,6 +699,14 @@ class MTB_LoadImageFromUrl:
                         "default": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Example.jpg/800px-Example.jpg"
                     },
                 ),
+                "retry_count": (
+                    "INT",
+                    {"default": 3, "min": 1, "max": 20, "step": 1},
+                ),
+                "retry_interval": (
+                    "FLOAT",
+                    {"default": 1.0, "min": 0.0, "max": 60.0, "step": 0.1},
+                ),
             }
         }
 
@@ -649,11 +714,27 @@ class MTB_LoadImageFromUrl:
     FUNCTION = "load"
     CATEGORY = "mtb/IO"
 
-    def load(self, url):
-        # get the image from the url
-        image = Image.open(requests.get(url, stream=True).raw)
-        image = ImageOps.exif_transpose(image)
-        return (pil2tensor(image),)
+    def load(self, url, retry_count, retry_interval):
+        # get the image from the url with retry + exponential backoff
+        last_error = None
+        for attempt in range(retry_count):
+            try:
+                response = requests.get(url, stream=True)
+                response.raise_for_status()
+                image = Image.open(response.raw)
+                image = ImageOps.exif_transpose(image)
+                return (pil2tensor(image),)
+            except Exception as e:
+                last_error = e
+                if attempt == retry_count - 1:
+                    raise
+                wait_seconds = retry_interval * (2**attempt)
+                if wait_seconds > 0:
+                    time.sleep(wait_seconds)
+
+        if last_error is not None:
+            raise last_error
+        raise RuntimeError("Failed to load image from URL without captured exception")
 
 
 class MTB_Blur:
@@ -823,8 +904,11 @@ class MTB_MaskToImage:
         return {
             "required": {
                 "mask": ("MASK",),
-                "color": ("COLOR",),
-                "background": ("COLOR", {"default": "#000000"}),
+                "color": ("COLOR", {"widgetType": "MTB_COLOR"}),
+                "background": (
+                    "COLOR",
+                    {"default": "#000000", "widgetType": "MTB_COLOR"},
+                ),
             },
             "optional": {
                 "invert": ("BOOLEAN", {"default": False}),

nodes/image_utils.py

@@ -21,7 +21,11 @@ class MTB_StackImages:
                 "match_method": (
                     ["error", "smallest", "largest"],
                     {"default": "error"},
-                )
+                ),
+                "output_rgb": (
+                    "BOOLEAN",
+                    {"default": True, "tooltip": "Output RGB instead of RGBA"},
+                ),
             },
         }
 
@@ -29,7 +33,7 @@ class MTB_StackImages:
     FUNCTION = "stack"
     CATEGORY = "mtb/image utils"
 
-    def stack(self, vertical, match_method="error", **kwargs):
+    def stack(self, vertical, match_method="error", output_rgb=True, **kwargs):
         if not kwargs:
             raise ValueError("At least one tensor must be provided.")
 
@@ -98,6 +102,9 @@ class MTB_StackImages:
 
         stacked_tensor = torch.cat(normalized_tensors, dim=dim)
 
+        if output_rgb:
+            stacked_tensor = stacked_tensor[:, :, :, :3]
+
         return (stacked_tensor,)
 
     def normalize_to_rgba(self, tensor):

nodes/legacy.py

@@ -0,0 +1,17 @@
+# from ..utils import hex_to_rgb
+class MTB_ColorInput:
+    RETURN_TYPES = ("COLOR",)
+    FUNCTION = "color"
+    CATEGORY = "mtb/color"
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {"color": ("MTB_COLOR", {"default": "#ffffff"})},
+        }
+
+    def color(self, color):
+        return (color,)
+
+
+__nodes__ = [MTB_ColorInput]

nodes/mask.py

@@ -34,7 +34,7 @@ class MTB_ImageRemoveBackgroundRembg:
                 ),
                 "bgcolor": (
                     "COLOR",
-                    {"default": "#000000"},
+                    {"default": "#000000","widgetType": "MTB_COLOR"},
                 ),
             },
         }

nodes/model.py

@@ -145,7 +145,7 @@ class MTB_ModelPatchSeamless:
         tilingX,
         tilingY,
     ):
-        hacked_model = copy.deepcopy(model)
+        hacked_model = model.clone()
         self.apply_circular(
             hacked_model.model, startStep, stopStep, tilingX, tilingY
         )

nodes/transform.py

@@ -43,7 +43,10 @@ class MTB_TransformImage:
                     ["edge", "constant", "reflect", "symmetric"],
                     {"default": "edge"},
                 ),
-                "constant_color": ("COLOR", {"default": "#000000"}),
+                "constant_color": (
+                    "COLOR",
+                    {"default": "#000000", "widgetType": "MTB_COLOR"},
+                ),
             },
             "optional": {
                 "filter_type": (

nodes/vitmatte.py

@@ -27,7 +27,7 @@ class MTB_LoadVitMatteModel:
     def execute(self, *, kind: str, autodownload: bool):
         dest = models_dir / "vitmatte"
         dest.mkdir(exist_ok=True)
-        name = "dist" if kind == "Distinctions-646" else "com"
+        name = "dis" if kind == "Distinctions-646" else "com"
 
         file = hf_hub_download(
             repo_id="melmass/pytorch-scripts",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "comfy-mtb"
-version = "0.3.0"
+version = "0.5.4"
 description = "Animation oriented nodes pack for ComfyUI."
 license = { text = "MIT" }
 readme = "README.md"
@@ -63,7 +63,7 @@ DisplayName = "comfy-mtb"
 Icon = "https://avatars.githubusercontent.com/u/7041726?v=4"
 
 [tool.bumpversion]
-current_version = "0.3.0"
+current_version = "0.5.1"
 parse = "(?P<major>\\d+)\\.(?P<minor>\\d+)\\.(?P<patch>\\d+)"
 serialize = ["{major}.{minor}.{patch}"]
 search = "{current_version}"

utils.py

@@ -1,6 +1,5 @@
 import contextlib
 import functools
-import importlib
 import math
 import operator
 import os
@@ -462,23 +461,6 @@ def _run_command(shell_cmd, ignored_lines_start):
     print("Command executed successfully!")
 
 
-def import_install(package_name):
-    package_spec = reqs_map.get(package_name, package_name)
-
-    try:
-        importlib.import_module(package_name)
-
-    except Exception:  # (ImportError, ModuleNotFoundError):
-        run_command(
-            [
-                Path(sys.executable).as_posix(),
-                "-m",
-                "pip",
-                "install",
-                package_spec,
-            ]
-        )
-        importlib.import_module(package_name)
 
 
 # endregion
@@ -546,9 +528,7 @@ PIL_FILTER_MAP = {
 # region TENSOR Utilities
 def to_numpy(image: torch.Tensor) -> npt.NDArray[np.uint8]:
     """Converts a tensor to a ndarray with proper scaling and type conversion."""
-    log.debug(f"Converting tensor to numpy array with shape {image.shape}")
     np_array = np.clip(255.0 * image.cpu().numpy(), 0, 255).astype(np.uint8)
-    log.debug(f"Numpy array shape after conversion: {np_array.shape}")
     return np_array
 
 

web/comfy_shared.js

@@ -25,6 +25,19 @@ export function makeUUID() {
   return uuid
 }
 
+// - basic debounce decorator
+export function debounce(func, delay) {
+  let timeout
+  let debounced = function (...args) {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => func.apply(this, args), delay)
+  }
+  debounced.cancel = () => {
+    clearTimeout(timeout)
+  }
+  return debounced
+}
+
 //- local storage manager
 export class LocalStorageManager {
   constructor(namespace) {
@@ -195,6 +208,7 @@ export function hideWidgetForGood(node, widget, suffix = '') {
   widget.origComputeSize = widget.computeSize
   widget.origSerializeValue = widget.serializeValue
   widget.computeSize = () => [0, -4] // -4 is due to the gap litegraph adds between widgets automatically
+  widget.hidden = true
   widget.type = CONVERTED_TYPE + suffix
   // widget.serializeValue = () => {
   //     // Prevent serializing the widget if we have no input linked
@@ -621,21 +635,21 @@ function getBrightness(rgbObj) {
 export function calculateTotalChildrenHeight(parentElement) {
   let totalHeight = 0
 
+  if (!parentElement || !parentElement.children) {
+    return 0
+  }
+
   for (const child of parentElement.children) {
     const style = window.getComputedStyle(child)
 
-    // Get height as an integer (without 'px')
-    const height = Number.parseInt(style.height, 10)
+    const height = Number.parseFloat(style.height)
+    const marginTop = Number.parseFloat(style.marginTop)
+    const marginBottom = Number.parseFloat(style.marginBottom)
 
-    // Get vertical margin as integers
-    const marginTop = Number.parseInt(style.marginTop, 10)
-    const marginBottom = Number.parseInt(style.marginBottom, 10)
-
-    // Sum up height and vertical margins
     totalHeight += height + marginTop + marginBottom
   }
 
-  return totalHeight
+  return Math.ceil(totalHeight)
 }
 
 export const loadScript = (
@@ -646,13 +660,15 @@ export const loadScript = (
   return new Promise((resolve, reject) => {
     try {
       // Check if the script already exists
-      const existingScript = document.querySelector(`script[src="${FILE_URL}"]`)
-      if (existingScript) {
-        resolve({ status: true, message: 'Script already loaded' })
+      let scriptEle = document.querySelector(`script[src="${FILE_URL}"]`)
+      if (scriptEle) {
+        scriptEle.addEventListener('load', (_ev) => {
+          resolve({ status: true })
+        })
         return
       }
 
-      const scriptEle = document.createElement('script')
+      scriptEle = document.createElement('script')
       scriptEle.type = type
       scriptEle.async = async
       scriptEle.src = FILE_URL
@@ -671,6 +687,8 @@ export const loadScript = (
       document.body.appendChild(scriptEle)
     } catch (error) {
       reject(error)
+    } finally {
+      infoLogger(`Finally loaded script: ${FILE_URL}`)
     }
   })
 }
@@ -784,12 +802,10 @@ function loadParser(shiki) {
 
 export const ensureMarkdownParser = async (callback) => {
   infoLogger('Ensuring md parser')
-  let use_shiki = false
-  try {
-    use_shiki = await api.getSetting('mtb.Use Shiki')
-  } catch (e) {
-    console.warn('Option not available yet', e)
-  }
+  const use_shiki = app.extensionManager.setting.get(
+    'mtb.noteplus.use-shiki',
+    false,
+  )
 
   if (window.MTB?.mdParser) {
     infoLogger('Markdown parser found')
@@ -814,8 +830,7 @@ export const ensureMarkdownParser = async (callback) => {
     callbackQueue.push(callback)
   }
 
-  await parserPromise
-  await parserPromise
+  await await parserPromise
 
   return window.MTB.mdParser
 }
@@ -1154,58 +1169,3 @@ export const setServerInfo = async (opts) => {
 }
 
 // #endregion
-
-// #region Authoring API / graph utilities
-export const getAPIInputs = () => {
-  const inputs = {}
-  let counter = 1
-  for (const node of getNodes(true)) {
-    const widgets = node.widgets
-
-    if (node.properties.mtb_api && node.properties.useAPI) {
-      if (node.properties.mtb_api.inputs) {
-        for (const currentName in node.properties.mtb_api.inputs) {
-          const current = node.properties.mtb_api.inputs[currentName]
-          if (current.enabled) {
-            const inputName = current.name || currentName
-            const widget = widgets.find((w) => w.name === currentName)
-            if (!widget) continue
-            if (!(inputName in inputs)) {
-              inputs[inputName] = {
-                ...current,
-                id: counter,
-                name: inputName,
-                type: current.type,
-                node_id: node.id,
-                widgets: [],
-              }
-            }
-            inputs[inputName].widgets.push(widget)
-            counter = counter + 1
-          }
-        }
-      }
-    }
-  }
-  return inputs
-}
-
-export const getNodes = (skip_unused) => {
-  const nodes = []
-  for (const outerNode of app.graph.computeExecutionOrder(false)) {
-    const skipNode =
-      (outerNode.mode === 2 || outerNode.mode === 4) && skip_unused
-    const innerNodes =
-      !skipNode && outerNode.getInnerNodes
-        ? outerNode.getInnerNodes()
-        : [outerNode]
-    for (const node of innerNodes) {
-      if ((node.mode === 2 || node.mode === 4) && skip_unused) {
-        continue
-      }
-      nodes.push(node)
-    }
-  }
-  return nodes
-}
-// #endregion

web/debug.js

@@ -28,7 +28,7 @@ function createDebugSection(title) {
     margin: '8px 0',
     padding: '8px',
     borderRadius: '4px',
-    backgroundColor: 'rgba(0,0,0,0.2)'
+    backgroundColor: 'rgba(0,0,0,0.2)',
   })
 
   const header = mtb_ui.makeElement('h3', {
@@ -37,7 +37,7 @@ function createDebugSection(title) {
     borderBottom: '1px solid rgba(255,255,255,0.1)',
     fontSize: '14px',
     fontWeight: 'bold',
-    color: '#9f9'
+    color: '#9f9',
   })
   header.textContent = title
   section.appendChild(header)
@@ -47,21 +47,21 @@ function createDebugSection(title) {
 
 function createDebugContent(content, type) {
   const wrapper = mtb_ui.makeElement('div', {
-    margin: '4px 0'
+    margin: '4px 0',
   })
 
   if (type === 'text') {
     const text = mtb_ui.makeElement('p', {
       margin: '2px 0',
       fontFamily: 'monospace',
-      whiteSpace: 'pre-wrap'
+      whiteSpace: 'pre-wrap',
     })
     text.innerHTML = content
     wrapper.appendChild(text)
   } else if (type === 'image') {
     const img = mtb_ui.makeElement('img', {
       width: '100%',
-      borderRadius: '2px'
+      borderRadius: '2px',
     })
     img.src = content
     wrapper.appendChild(img)
@@ -148,18 +148,18 @@ app.registerExtension({
         const uiData = data.ui || data
 
         if (uiData.items) {
-            uiData.items.forEach(item => {
-                const inputName = item.input
-                if (!inputData[inputName]) {
-                    inputData[inputName] = { text: [], b64_images: [] }
-                }
-                if (item.text) {
-                    inputData[inputName].text.push(...item.text)
-                }
-                if (item.b64_images) {
-                    inputData[inputName].b64_images.push(...item.b64_images)
-                }
-            })
+          uiData.items.forEach((item) => {
+            const inputName = item.input
+            if (!inputData[inputName]) {
+              inputData[inputName] = { text: [], b64_images: [] }
+            }
+            if (item.text) {
+              inputData[inputName].text.push(...item.text)
+            }
+            if (item.b64_images) {
+              inputData[inputName].b64_images.push(...item.b64_images)
+            }
+          })
         }
 
         let widgetI = 1
@@ -171,23 +171,18 @@ app.registerExtension({
           const section = createDebugSection(inputName)
 
           if (content.text.length > 0) {
-            content.text.forEach(text => {
+            content.text.forEach((text) => {
               section.appendChild(createDebugContent(text, 'text'))
             })
           }
 
           if (content.b64_images.length > 0) {
-            content.b64_images.forEach(img => {
+            content.b64_images.forEach((img) => {
               section.appendChild(createDebugContent(img, 'image'))
             })
           }
 
-          this.addDOMWidget(
-            `debug_section_${widgetI}`,
-            'CUSTOM',
-            section,
-            {}
-          )
+          this.addDOMWidget(`debug_section_${widgetI}`, 'CUSTOM', section, {})
           widgetI++
         }
 

web/imageFeed.js

@@ -13,40 +13,40 @@ import { api } from '../../scripts/api.js'
 import { app } from '../../scripts/app.js'
 import { LocalStorageManager } from './comfy_shared.js'
 const styles = {
-	lighbox: {
-		position: 'fixed',
-		top: 0,
-		left: 0,
-		width: '100vw',
-		height: '100vh',
-		background: 'rgba(0,0,0,0.5)',
-		display: 'none',
-		justifyContent: 'center',
-		alignItems: 'center',
-		zIndex: 999,
-	},
-	lightboxBtn: (extra) => ({
-		position: 'absolute',
-		top: '50%',
-		background: 'none',
-		border: 'none',
-		color: '#fff',
-		zIndex: 1000,
-		fontSize: '30px',
-		cursor: 'pointer',
-		pointerEvents: 'auto',
-		...extra,
-	}),
-	img_list: {
-		minHeight: '30px',
-		maxHeight: '300px',
-		width: '100vw',
-		position: 'absolute',
-		bottom: 0,
-		zIndex: 10,
-		background: '#333',
-		overflow: 'auto',
-	},
+  lighbox: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    background: 'rgba(0,0,0,0.5)',
+    display: 'none',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+  },
+  lightboxBtn: (extra) => ({
+    position: 'absolute',
+    top: '50%',
+    background: 'none',
+    border: 'none',
+    color: '#fff',
+    zIndex: 1000,
+    fontSize: '30px',
+    cursor: 'pointer',
+    pointerEvents: 'auto',
+    ...extra,
+  }),
+  img_list: {
+    minHeight: '30px',
+    maxHeight: '300px',
+    width: '100vw',
+    position: 'absolute',
+    bottom: 0,
+    zIndex: 10,
+    background: '#333',
+    overflow: 'auto',
+  },
 }
 
 let currentImageIndex = 0
@@ -58,299 +58,299 @@ const storage = new LocalStorageManager('mtb')
 let activated = storage.get('image_feed', false)
 
 app.registerExtension({
-	name: 'mtb.ImageFeed',
-	setup: () => {
-		app.ui.settings.addSetting({
-			id: 'mtb.Main.image-feed-enabled',
-			category: ['mtb', 'Main', 'image-feed-enabled'],
-			name: 'Enable Image Feed',
-			type: 'boolean',
-			defaultValue: false,
-			attrs: {
-				style: {
-					fontFamily: 'monospace',
-				},
-			},
-			async onChange(value) {
-				storage.set('image_feed', value)
-				activated = value
-			},
-		})
-	},
-	init: async () => {
-		if (!activated) {
-			return
-		}
-		const pythongossFeed = app.extensions.find(
-			(e) => e.name === 'pysssss.ImageFeed',
-		)
-		if (pythongossFeed) {
-			console.warn(
-				"[mtb] - Aborting the loading of mtb's imageFeed in favor of pysssss.ImageFeed",
-			)
-			activated = false // just in case other methods are added later on
-			return
-		}
-		// - HTML & CSS
-		//- lightbox
-		const lightboxContainer = document.createElement('div')
-		Object.assign(lightboxContainer.style, styles.lighbox)
+  name: 'mtb.ImageFeed',
+  setup: () => {
+    app.ui.settings.addSetting({
+      id: 'mtb.Main.image-feed-enabled',
+      category: ['mtb', ' Main', 'image-feed-enabled'],
+      name: 'Enable Image Feed',
+      type: 'boolean',
+      defaultValue: false,
+      attrs: {
+        style: {
+          fontFamily: 'monospace',
+        },
+      },
+      async onChange(value) {
+        storage.set('image_feed', value)
+        activated = value
+      },
+    })
+  },
+  init: async () => {
+    if (!activated) {
+      return
+    }
+    const pythongossFeed = app.extensions.find(
+      (e) => e.name === 'pysssss.ImageFeed',
+    )
+    if (pythongossFeed) {
+      console.warn(
+        "[mtb] - Aborting the loading of mtb's imageFeed in favor of pysssss.ImageFeed",
+      )
+      activated = false // just in case other methods are added later on
+      return
+    }
+    // - HTML & CSS
+    //- lightbox
+    const lightboxContainer = document.createElement('div')
+    Object.assign(lightboxContainer.style, styles.lighbox)
 
-		const lightboxImage = document.createElement('img')
-		Object.assign(lightboxImage.style, {
-			maxHeight: '100%',
-			maxWidth: '100%',
-			borderRadius: '5px',
-		})
+    const lightboxImage = document.createElement('img')
+    Object.assign(lightboxImage.style, {
+      maxHeight: '100%',
+      maxWidth: '100%',
+      borderRadius: '5px',
+    })
 
-		// previous and next buttons
-		const lightboxPrevBtn = document.createElement('button')
-		const lightboxNextBtn = document.createElement('button')
+    // previous and next buttons
+    const lightboxPrevBtn = document.createElement('button')
+    const lightboxNextBtn = document.createElement('button')
 
-		lightboxPrevBtn.textContent = '❮'
-		lightboxNextBtn.textContent = '❯'
+    lightboxPrevBtn.textContent = '❮'
+    lightboxNextBtn.textContent = '❯'
 
-		Object.assign(lightboxPrevBtn.style, styles.lightboxBtn({ left: '0%' }))
-		Object.assign(lightboxNextBtn.style, styles.lightboxBtn({ right: '0%' }))
+    Object.assign(lightboxPrevBtn.style, styles.lightboxBtn({ left: '0%' }))
+    Object.assign(lightboxNextBtn.style, styles.lightboxBtn({ right: '0%' }))
 
-		// close button
-		const lightboxCloseBtn = document.createElement('button')
-		Object.assign(
-			lightboxCloseBtn.style,
-			styles.lightboxBtn({ right: '0', top: '0' }),
-		)
-		lightboxCloseBtn.textContent = '❌'
+    // close button
+    const lightboxCloseBtn = document.createElement('button')
+    Object.assign(
+      lightboxCloseBtn.style,
+      styles.lightboxBtn({ right: '0', top: '0' }),
+    )
+    lightboxCloseBtn.textContent = '❌'
 
-		const lightboxButtons = document.createElement('div')
-		Object.assign(lightboxButtons.style, {
-			position: 'absolute',
-			top: '0%',
-			right: '0%',
-			// transform: "translate(50%, -50%)",
-			height: '100%',
-			width: '100%',
-			background: 'none',
-			border: 'none',
-			color: '#fff',
-			fontSize: '30px',
-			cursor: 'pointer',
-			pointerEvents: 'none',
-		})
+    const lightboxButtons = document.createElement('div')
+    Object.assign(lightboxButtons.style, {
+      position: 'absolute',
+      top: '0%',
+      right: '0%',
+      // transform: "translate(50%, -50%)",
+      height: '100%',
+      width: '100%',
+      background: 'none',
+      border: 'none',
+      color: '#fff',
+      fontSize: '30px',
+      cursor: 'pointer',
+      pointerEvents: 'none',
+    })
 
-		lightboxButtons.append(lightboxPrevBtn, lightboxNextBtn, lightboxCloseBtn)
-		lightboxContainer.append(lightboxButtons, lightboxImage)
+    lightboxButtons.append(lightboxPrevBtn, lightboxNextBtn, lightboxCloseBtn)
+    lightboxContainer.append(lightboxButtons, lightboxImage)
 
-		//- image list
-		const imageListContainer = document.createElement('div')
-		Object.assign(imageListContainer.style, styles.img_list)
+    //- image list
+    const imageListContainer = document.createElement('div')
+    Object.assign(imageListContainer.style, styles.img_list)
 
-		const createImgListBtn = (text, style) => {
-			const btn = document.createElement('button')
-			btn.type = 'button'
-			btn.textContent = text
-			Object.assign(btn.style, {
-				...style,
-				border: 'none',
-				color: '#fff',
-				background: 'none',
-				height: '20px',
-				cursor: 'pointer',
-				position: 'absolute',
-				top: '5px',
-				fontSize: '12px',
-				lineHeight: '12px',
-			})
-			imageListContainer.append(btn)
-			return btn
-		}
-		const showBtn = document.createElement('button')
-		const closeBtn = createImgListBtn('❌', {
-			width: '20px',
-			textIndent: '-4px',
-			right: '5px',
-		})
-		const loadButton = createImgListBtn('Load Session History', {
-			right: '90px',
-		})
-		const clearButton = createImgListBtn('Clear', {
-			right: '30px',
-		})
+    const createImgListBtn = (text, style) => {
+      const btn = document.createElement('button')
+      btn.type = 'button'
+      btn.textContent = text
+      Object.assign(btn.style, {
+        ...style,
+        border: 'none',
+        color: '#fff',
+        background: 'none',
+        height: '20px',
+        cursor: 'pointer',
+        position: 'absolute',
+        top: '5px',
+        fontSize: '12px',
+        lineHeight: '12px',
+      })
+      imageListContainer.append(btn)
+      return btn
+    }
+    const showBtn = document.createElement('button')
+    const closeBtn = createImgListBtn('❌', {
+      width: '20px',
+      textIndent: '-4px',
+      right: '5px',
+    })
+    const loadButton = createImgListBtn('Load Session History', {
+      right: '90px',
+    })
+    const clearButton = createImgListBtn('Clear', {
+      right: '30px',
+    })
 
-		//- tools popup button
-		showBtn.classList.add('comfy-settings-btn')
-		Object.assign(showBtn.style, {
-			right: '16px',
-			cursor: 'pointer',
-			display: 'none',
-		})
+    //- tools popup button
+    showBtn.classList.add('comfy-settings-btn')
+    Object.assign(showBtn.style, {
+      right: '16px',
+      cursor: 'pointer',
+      display: 'none',
+    })
 
-		//- append to DOM
-		document.body.append(imageListContainer)
+    //- append to DOM
+    document.body.append(imageListContainer)
 
-		showBtn.textContent = '🖼'
-		showBtn.onclick = () => {
-			imageListContainer.style.display = 'block'
-			showBtn.style.display = 'none'
-		}
-		document.querySelector('.comfy-settings-btn').after(showBtn)
-		document.querySelector('.comfy-settings-btn').after(lightboxContainer)
+    showBtn.textContent = '🖼'
+    showBtn.onclick = () => {
+      imageListContainer.style.display = 'block'
+      showBtn.style.display = 'none'
+    }
+    document.querySelector('.comfy-settings-btn').after(showBtn)
+    document.querySelector('.comfy-settings-btn').after(lightboxContainer)
 
-		// for (const { output } of history) {
-		// 	if (output?.images) {
-		// 		for (const src of output.images) {
-		// 			const img = document.createElement("img");
-		// 			const but = document.createElement("button");
+    // for (const { output } of history) {
+    // 	if (output?.images) {
+    // 		for (const src of output.images) {
+    // 			const img = document.createElement("img");
+    // 			const but = document.createElement("button");
 
-		//- callbacks
-		closeBtn.onclick = () => {
-			imageListContainer.style.display = 'none'
-			showBtn.style.display = 'unset'
-		}
+    //- callbacks
+    closeBtn.onclick = () => {
+      imageListContainer.style.display = 'none'
+      showBtn.style.display = 'unset'
+    }
 
-		clearButton.onclick = () => {
-			imageListContainer.replaceChildren(closeBtn, clearButton, loadButton)
-		}
+    clearButton.onclick = () => {
+      imageListContainer.replaceChildren(closeBtn, clearButton, loadButton)
+    }
 
-		lightboxNextBtn.onclick = () => {
-			currentImageIndex = (currentImageIndex + 1) % imageUrls.length
-			const imageUrl = imageUrls[currentImageIndex]
-			lightboxImage.src = imageUrl
-		}
+    lightboxNextBtn.onclick = () => {
+      currentImageIndex = (currentImageIndex + 1) % imageUrls.length
+      const imageUrl = imageUrls[currentImageIndex]
+      lightboxImage.src = imageUrl
+    }
 
-		// Modify the lightboxPrevBtn onclick callback
-		lightboxPrevBtn.onclick = () => {
-			currentImageIndex =
-				(currentImageIndex - 1 + imageUrls.length) % imageUrls.length
-			const imageUrl = imageUrls[currentImageIndex]
-			lightboxImage.src = imageUrl
-		}
+    // Modify the lightboxPrevBtn onclick callback
+    lightboxPrevBtn.onclick = () => {
+      currentImageIndex =
+        (currentImageIndex - 1 + imageUrls.length) % imageUrls.length
+      const imageUrl = imageUrls[currentImageIndex]
+      lightboxImage.src = imageUrl
+    }
 
-		lightboxCloseBtn.onclick = () => {
-			lightboxContainer.style.display = 'none'
-		}
-		lightboxImage.onclick = lightboxNextBtn.onclick
-		/**
-		 * This is the function that creates the image buttons for the image list
-		 * They are wrapped in a button so that they can be clicked and open
-		 * the image in the lightbox.
-		 * @param {*} src
-		 */
-		const createImageBtn = (src) => {
-			console.debug(`making image ${src.filename}`)
-			const img = document.createElement('img')
-			const but = document.createElement('button')
+    lightboxCloseBtn.onclick = () => {
+      lightboxContainer.style.display = 'none'
+    }
+    lightboxImage.onclick = lightboxNextBtn.onclick
+    /**
+     * This is the function that creates the image buttons for the image list
+     * They are wrapped in a button so that they can be clicked and open
+     * the image in the lightbox.
+     * @param {*} src
+     */
+    const createImageBtn = (src) => {
+      console.debug(`making image ${src.filename}`)
+      const img = document.createElement('img')
+      const but = document.createElement('button')
 
-			Object.assign(but.style, {
-				height: '120px',
-				width: '120px',
-				border: 'none',
-				padding: 0,
-				margin: 0,
-			})
-			Object.assign(img.style, {
-				width: '100%',
-				height: '100%',
-				objectFit: 'cover',
-			})
+      Object.assign(but.style, {
+        height: '120px',
+        width: '120px',
+        border: 'none',
+        padding: 0,
+        margin: 0,
+      })
+      Object.assign(img.style, {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+      })
 
-			img.src = `/view?filename=${encodeURIComponent(src.filename)}&type=${
-				src.type
-			}&subfolder=${encodeURIComponent(src.subfolder)}`
+      img.src = `/view?filename=${encodeURIComponent(src.filename)}&type=${
+        src.type
+      }&subfolder=${encodeURIComponent(src.subfolder)}`
 
-			imageUrls.push(img.src)
+      imageUrls.push(img.src)
 
-			console.debug(img.src)
+      console.debug(img.src)
 
-			img.onload = () => {
-				but.style.width = `${120 * (img.naturalWidth / img.naturalHeight)}px`
-			}
+      img.onload = () => {
+        but.style.width = `${120 * (img.naturalWidth / img.naturalHeight)}px`
+      }
 
-			but.onclick = () => {
-				lightboxContainer.style.display = 'flex'
-				// add the same image to the lightbox
-				lightboxImage.src = img.src
-				// lighboxContainer.replaceChildren(lightboxButtons, img);
-			}
+      but.onclick = () => {
+        lightboxContainer.style.display = 'flex'
+        // add the same image to the lightbox
+        lightboxImage.src = img.src
+        // lighboxContainer.replaceChildren(lightboxButtons, img);
+      }
 
-			// add right click menu
-			but.addEventListener('contextmenu', (e) => {
-				e.preventDefault()
+      // add right click menu
+      but.addEventListener('contextmenu', (e) => {
+        e.preventDefault()
 
-				if (image_menu) {
-					image_menu.remove()
-				}
+        if (image_menu) {
+          image_menu.remove()
+        }
 
-				image_menu = document.createElement('div')
-				Object.assign(image_menu.style, {
-					position: 'absolute',
-					top: `${e.clientY}px`,
-					left: `${e.clientX}px`,
-					background: '#333',
-					color: '#fff',
-					padding: '5px',
-					borderRadius: '5px',
-					zIndex: 999,
-				})
-				const load_img = document.createElement('button')
-				load_img.textContent = 'Load'
-				load_img.onclick = () => {
-					app.handleFile(img.src)
-				}
+        image_menu = document.createElement('div')
+        Object.assign(image_menu.style, {
+          position: 'absolute',
+          top: `${e.clientY}px`,
+          left: `${e.clientX}px`,
+          background: '#333',
+          color: '#fff',
+          padding: '5px',
+          borderRadius: '5px',
+          zIndex: 999,
+        })
+        const load_img = document.createElement('button')
+        load_img.textContent = 'Load'
+        load_img.onclick = () => {
+          app.handleFile(img.src)
+        }
 
-				image_menu.appendChild(load_img)
-				document.body.appendChild(image_menu)
-			})
+        image_menu.appendChild(load_img)
+        document.body.appendChild(image_menu)
+      })
 
-			but.append(img)
-			imageListContainer.prepend(but)
-		}
+      but.append(img)
+      imageListContainer.prepend(but)
+    }
 
-		loadButton.onclick = async () => {
-			const all_history = await api.getHistory()
-			for (const history of all_history.History) {
-				if (history.outputs) {
-					for (const key of Object.keys(history.outputs)) {
-						console.debug(key)
-						if (history.outputs[key].images) {
-							for (const im of history.outputs[key].images) {
-								console.debug(im)
-								createImageBtn(im)
-							}
-						}
-					}
-					// for (const src of outputs.outputs.images) {
-					// 	console.debug(src)
-					// 	makeImage(`${src.subfolder}/${src.filename}`)
-					// }
-				}
-			}
-		}
+    loadButton.onclick = async () => {
+      const all_history = await api.getHistory()
+      for (const history of all_history.History) {
+        if (history.outputs) {
+          for (const key of Object.keys(history.outputs)) {
+            console.debug(key)
+            if (history.outputs[key].images) {
+              for (const im of history.outputs[key].images) {
+                console.debug(im)
+                createImageBtn(im)
+              }
+            }
+          }
+          // for (const src of outputs.outputs.images) {
+          // 	console.debug(src)
+          // 	makeImage(`${src.subfolder}/${src.filename}`)
+          // }
+        }
+      }
+    }
 
-		///////-------
+    ///////-------
 
-		// const all_history = await api.getHistory()
-		// for (const history of all_history.History) {
-		// 	if (history.outputs) {
-		// 		for (const key of Object.keys(history.outputs)) {
-		// 			for (const im of history.outputs[key].images) {
-		// 				makeImage(im)
-		// 			}
-		// 		}
-		// 		// for (const src of outputs.outputs.images) {
-		// 		// 	console.debug(src)
-		// 		// 	makeImage(`${src.subfolder}/${src.filename}`)
-		// 		// }
-		// 	}
-		// }
+    // const all_history = await api.getHistory()
+    // for (const history of all_history.History) {
+    // 	if (history.outputs) {
+    // 		for (const key of Object.keys(history.outputs)) {
+    // 			for (const im of history.outputs[key].images) {
+    // 				makeImage(im)
+    // 			}
+    // 		}
+    // 		// for (const src of outputs.outputs.images) {
+    // 		// 	console.debug(src)
+    // 		// 	makeImage(`${src.subfolder}/${src.filename}`)
+    // 		// }
+    // 	}
+    // }
 
-		//- Hook into the API
-		api.addEventListener('executed', ({ detail }) => {
-			if (detail?.output?.images) {
-				for (const src of detail.output.images) {
-					console.debug(`Adding ${src} to image feed`)
-					createImageBtn(src)
-				}
-			}
-		})
-	},
+    //- Hook into the API
+    api.addEventListener('executed', ({ detail }) => {
+      if (detail?.output?.images) {
+        for (const src of detail.output.images) {
+          console.debug(`Adding ${src} to image feed`)
+          createImageBtn(src)
+        }
+      }
+    })
+  },
 })

web/mtb_input_output_sidebar.js

@@ -3,6 +3,7 @@
 import { app } from '../../scripts/app.js'
 import { api } from '../../scripts/api.js'
 
+import * as mtb_ui from './mtb_ui.js'
 import * as shared from './comfy_shared.js'
 
 import {
@@ -15,7 +16,13 @@ import {
 } from './mtb_ui.js'
 
 const offset = 0
+
+// These are "global" variables mostly meant to sync user settings.
 let currentWidth = 200
+let saltUrls =
+  app.extensionManager.setting.get('mtb.io-sidebar.salt_urls') || false
+let targetWidth =
+  app.extensionManager.setting.get('mtb.io-sidebar.img-size') || 512
 let currentMode = 'input'
 let subfolder = ''
 let currentSort = 'None'
@@ -46,15 +53,19 @@ const updateImage = (node, image) => {
  * @param {ResultItem} resultItem
  * @returns {string} - The request URL.
  */
-const resultItemToQuery = (resultItem) =>
-  [
+const resultItemToQuery = (resultItem) => {
+  const res = [
     `/mtb/view?filename=${resultItem.filename}`,
-    `width=512`,
     `type=${resultItem.type}`,
     `subfolder=${resultItem.subfolder}`,
-    `preview=`,
-  ].join('&')
+    'preview=',
+  ]
+  if (targetWidth > 0) {
+    res.splice(1, 0, `width=${targetWidth}`)
+  }
 
+  return res.join('&')
+}
 /**
  * Retrieves the unique prompt ID from a history task item.
  * @param {HistoryTaskItem} historyTaskItem
@@ -80,7 +91,7 @@ const getNewOutputUrls = (mostRecentTask) => {
       const imageOutputs = Object.values(nodeOutputs.images)
       imageOutputs.forEach(
         (resultItem) =>
-          (urls[resultItem.filename] = resultItemToQuery(resultItem))
+          (urls[resultItem.filename] = resultItemToQuery(resultItem)),
       )
     }
     // Can process `animated` and `audio` outputs here.
@@ -209,7 +220,7 @@ const getUrls = async (subfolder) => {
   if (currentMode === 'video') {
     const output = await shared.runAction(
       'getUserVideos',
-      256,
+      targetWidth,
       count,
       offset,
       currentSort,
@@ -219,11 +230,13 @@ const getUrls = async (subfolder) => {
   const output = await shared.runAction(
     'getUserImages',
     currentMode,
+    targetWidth,
     count,
     offset,
     currentSort,
     false,
     subfolder,
+    saltUrls,
   )
   return output || {}
 }
@@ -236,55 +249,110 @@ if (window?.__COMFYUI_FRONTEND_VERSION__) {
 
   const sidebar_extension = {
     name: 'mtb.io-sidebar',
-    // init: async () => {
-    //   try {
-    //     const res = await api.fetchApi('/mtb/server-info')
-    //     const msg = await res.json()
-    //     exposed = msg.exposed
-    //   } catch (e) {
-    //     console.error('Error:', e)
-    //   }
-    // },
-    init: () => {
-      let handle
-      const version = window?.__COMFYUI_FRONTEND_VERSION__
-      console.log(`%c ${version}`, 'background: orange; color: white;')
-
-      ensureMTBStyles()
-
-      app.ui.settings.addSetting({
+    settings: [
+      {
         id: 'mtb.io-sidebar.count',
         category: ['mtb', 'Input & Output Sidebar', 'count'],
-
         name: 'Number of images to fetch',
         type: 'number',
         defaultValue: 1000,
-
         tooltip:
           "This setting affects the input/output sidebar to determine how many images to fetch per pagination (pagination is not yet supported so for now it's the static total)",
-        attrs: {
-          style: {
-            // fontFamily: 'monospace',
-          },
+      },
+      {
+        id: 'mtb.io-sidebar.salt_urls',
+        category: ['mtb', 'Input & Output Sidebar', 'salt_urls'],
+        name: 'Salt URLs',
+        type: 'boolean',
+        defaultValue: false,
+        onChange: (n, o) => {
+          saltUrls = n
         },
-      })
-
-      app.ui.settings.addSetting({
+        tooltip:
+          'Adds a random query parameter to every urls to always invalidate caching.',
+      },
+      {
         id: 'mtb.io-sidebar.img-size',
         category: ['mtb', 'Input & Output Sidebar', 'img-size'],
 
-        name: 'Resolution of the images',
-        type: 'number',
+        name: 'Resize width of shown images',
         defaultValue: 512,
+        type: (name, setter, value, attrs) => {
+          targetWidth = value
+          const container = mtb_ui.makeElement('div', {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+          })
 
-        tooltip: "It's recommended to keep it at 512px",
-        attrs: {
-          style: {
-            // fontFamily: 'monospace',
-          },
+          console.log({ name, setter, value, attrs })
+
+          const baseId = name.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()
+          const checkboxId = `${baseId}-checkbox`
+          const numberInputId = `${baseId}-number`
+
+          const isCheckedInitially = value !== -1
+
+          // TODO: better way to get defaultValue?
+          const defaultValue = 512
+          const initialNumberValue = isCheckedInitially ? value : defaultValue
+
+          console.log('recreate')
+          const checkbox = mtb_ui.makeElement(
+            // harder to match styles (.p-toggleswitch-input)
+            // since it uses a div synced to the input...
+            'input',
+            {},
+            container,
+          )
+          checkbox.type = 'checkbox'
+          checkbox.id = checkboxId
+          checkbox.checked = isCheckedInitially
+
+          const numberInput = mtb_ui.makeElement(
+            'input.p-inputtext',
+            {},
+            container,
+          )
+          numberInput.type = 'number'
+          numberInput.id = numberInputId
+          numberInput.value = initialNumberValue
+          numberInput.disabled = !isCheckedInitially
+          numberInput.min = 128
+
+          checkbox.addEventListener('change', () => {
+            let valToSet = -1
+            if (checkbox.checked) {
+              numberInput.disabled = false
+
+              valToSet = Number.parseInt(numberInput.value, 10)
+              if (Number.isNaN(valToSet) || valToSet < numberInput.min) {
+                valToSet = defaultValue
+                numberInput.value = valToSet
+              }
+            } else {
+              numberInput.disabled = true
+            }
+            setter(valToSet)
+          })
+
+          numberInput.addEventListener('input', () => {
+            if (checkbox.checked) {
+              const numValue = Number.parseInt(numberInput.value, 10)
+              if (!Number.isNaN(numValue) && numberInput.value !== '') {
+                setter(numValue)
+              }
+            }
+          })
+
+          return container
         },
-      })
-      app.ui.settings.addSetting({
+
+        tooltip:
+          "If browsing large folders it's recommended to use this to avoid overflow/crash of the webpage. Image will get resized to this target width on the server before being sent to the client.",
+      },
+
+      {
         id: 'mtb.io-sidebar.sort',
         category: ['mtb', 'Input & Output Sidebar', 'sort'],
         name: 'Default sort mode',
@@ -304,7 +372,39 @@ if (window?.__COMFYUI_FRONTEND_VERSION__) {
           'Name',
           'Name-Reverse',
         ],
-      })
+      },
+      {
+        id: 'mtb.io-sidebar.notice',
+        category: ['mtb', 'Input & Output Sidebar', 'sort'],
+        name: ' ',
+
+        type: (name, setter, value, attrs) => {
+          const container = mtb_ui.makeElement('div')
+          const notice =
+            '## Important\nIf you make **any** edits here you need to toggle off and back on the sidebar for it to take effect.'
+
+          if (window.MTB?.mdParser) {
+            MTB.mdParser.parse(notice).then((e) => {
+              container.innerHTML = e
+            })
+          } else {
+            shared.ensureMarkdownParser((p) => {
+              p.parse(notice).then((e) => {
+                container.innerHTML = e
+              })
+            })
+          }
+          return container
+        },
+      },
+    ],
+
+    init: () => {
+      let handle
+      const version = window?.__COMFYUI_FRONTEND_VERSION__
+      console.log(`%c ${version}`, 'background: orange; color: white;')
+
+      ensureMTBStyles()
 
       app.extensionManager.registerSidebarTab({
         id: 'mtb-inputs-outputs',

web/mtb_sidebar.js

@@ -1,28 +0,0 @@
-// NOTE: this will be the LT part of mtb API system
-// I need to properly publish the source and fix a few things before
-
-// import { app } from '../../scripts/app.js'
-// // import { api } from '../../scripts/api.js'
-//
-// import * as shared from './comfy_shared.js'
-// import { createOutliner } from './dist/mtb_inspector.js'
-//
-// if (window?.__COMFYUI_FRONTEND_VERSION__) {
-//   const version = window?.__COMFYUI_FRONTEND_VERSION__
-//   console.log(`%c ${version}`, 'background: orange; color: white;')
-//
-//   const panel = app.extensionManager.registerSidebarTab({
-//     id: 'mtb-nodes',
-//     icon: 'pi pi-bolt',
-//     title: 'MTB',
-//     tooltip: 'MTB: API outliner',
-//     type: 'custom',
-//     // this is run everytime the tab's diplay is toggled on.
-//     render: (el) => {
-//       const outliner = createOutliner(el)
-//       const inputs = shared.getAPIInputs()
-//       console.log('INPUTS', inputs)
-//       outliner.$$set({ inputs })
-//     },
-//   })
-// }

web/mtb_ui.js

@@ -203,7 +203,7 @@ export const wrapElement = (element, style = {}) => {
  * @param {Object} [style] - CSS styles to apply to the element.
  * @returns {HTMLElement} - The created DOM element.
  */
-export const makeElement = (kind, style) => {
+export const makeElement = (kind, style, parent) => {
   let [real_kind, className] = kind.split('.')
   let id
 
@@ -224,6 +224,9 @@ export const makeElement = (kind, style) => {
   if (id) {
     el.id = id
   }
+  if (parent) {
+    parent.appendChild(el)
+  }
 
   return el
 }

web/mtb_widgets.js

@@ -21,7 +21,7 @@ import { infoLogger } from './comfy_shared.js'
 import { NumberInputWidget } from './numberInput.js'
 
 // NOTE: new widget types registered by MTB Widgets
-const newTypes = [/*'BOOL'*/ 'COLOR', 'BBOX']
+const newTypes = [/*'BOOL'*/ 'COLOR','MTB_COLOR', 'BBOX']
 
 const deprecated_nodes = {
   //  'Animation Builder':
@@ -694,7 +694,7 @@ const mtb_widgets = {
 
     app.ui.settings.addSetting({
       id: 'mtb.Main.debug-enabled',
-      category: ['mtb', 'Main', 'debug-enabled'],
+      category: ['mtb', ' Main', 'debug-enabled'],
       name: 'Enable Debug (py and js)',
       type: 'boolean',
       defaultValue: false,
@@ -739,7 +739,6 @@ const mtb_widgets = {
       // },
 
       COLOR: (node, inputName, inputData, _app) => {
-        console.debug('Registering color')
         return {
           widget: node.addCustomWidget(
             MtbWidgets.COLOR(inputName, inputData[1]?.default || '#ff0000'),
@@ -748,6 +747,16 @@ const mtb_widgets = {
           minHeight: 30,
         }
       },
+      MTB_COLOR: (node, inputName, inputData, _app) => {
+        return {
+          widget: node.addCustomWidget(
+            MtbWidgets.COLOR(inputName, inputData[1]?.default || '#ff0000'),
+          ),
+          minWidth: 150,
+          minHeight: 30,
+        }
+      },
+
       // BBOX: (node, inputName, inputData, app) => {
       //     console.debug("Registering bbox")
       //     return {
@@ -1012,12 +1021,15 @@ const mtb_widgets = {
           )
           loop_preview.value = 'Iteration: Idle'
 
+          let cancelQueue = false
+
           const onReset = () => {
             raw_iteration.value = 0
             raw_loop.value = 0
 
             value_preview.value = 'Idle'
             loop_preview.value = 'Iteration: Idle'
+            cancelQueue = false
 
             app.canvas.setDirty(true)
           }
@@ -1026,15 +1038,43 @@ const mtb_widgets = {
           this.addWidget('button', 'Reset', 'reset', onReset)
 
           // run button
-          this.addWidget('button', 'Queue', 'queue', () => {
-            onReset() // this could maybe be a setting or checkbox
-            app.queuePrompt(0, total_frames.value * loop_count.value)
+          const chunkSize = 10
+          this.addWidget('button', 'Queue', 'queue', async () => {
+            onReset()
+
+            const totalPrompts = total_frames.value * loop_count.value
             window.MTB?.notify?.(
-              `Started a queue of ${total_frames.value} frames (for ${
-                loop_count.value
-              } loop, so ${total_frames.value * loop_count.value})`,
+              `Starting a queue of ${totalPrompts} frames in chunks of ${chunkSize}...`,
               5000,
             )
+
+            for (let i = 0; i < totalPrompts; i += chunkSize) {
+              console.log({ cancelQueue })
+              if (cancelQueue) {
+                window.MTB?.notify?.(
+                  `Queueing cancelled after ${i} frames.`,
+                  3000,
+                )
+                break
+              }
+              const currentChunkSize = Math.min(chunkSize, totalPrompts - i)
+
+              await app.queuePrompt(0, currentChunkSize)
+
+            }
+            if (!cancelQueue) {
+              window.MTB?.notify?.(
+                `Finished queuing ${totalPrompts} frames.`,
+                5000,
+              )
+            }
+          })
+          this.addWidget('button', 'Cancel', 'cancel', () => {
+            cancelQueue = true
+            window.MTB?.notify?.(
+              'Cancellation requested. Waiting for current chunk to finish...',
+              3000,
+            )
           })
 
           this.onRemoved = () => {

web/note_plus.constants.js

@@ -1,10 +1,13 @@
 // web/note_plus.constants.js
 
-export const DEFAULT_CSS = ''
+export const DEFAULT_CSS = `/** here you can write css**/
+h1 {
+    color: whitesmoke;
+}`
 export const DEFAULT_HTML = `<p style='color:red;font-family:monospace'>
     Note+
 </p>`
-export const DEFAULT_MD = '## Note+'
+export const DEFAULT_MD = '# 📝 Note+'
 export const DEFAULT_MODE = 'markdown'
 export const DEFAULT_THEME = 'one_dark'
 
@@ -55,58 +58,57 @@ We also support github callout:
 `
 
 export const THEMES = [
-	'ambiance',
-	'chaos',
-	'chrome',
-	'cloud9_day',
-	'cloud9_night',
-	'cloud9_night_low_color',
-	'cloud_editor',
-	'cloud_editor_dark',
-	'clouds',
-	'clouds_midnight',
-	'cobalt',
-	'crimson_editor',
-	'dawn',
-	'dracula',
-	'dreamweaver',
-	'eclipse',
-	'github',
-	'github_dark',
-	'gob',
-	'gruvbox',
-	'gruvbox_dark_hard',
-	'gruvbox_light_hard',
-	'idle_fingers',
-	'iplastic',
-	'katzenmilch',
-	'kr_theme',
-	'kuroir',
-	'merbivore',
-	'merbivore_soft',
-	'mono_industrial',
-	'monokai',
-	'nord_dark',
-	'one_dark',
-	'pastel_on_dark',
-	'solarized_dark',
-	'solarized_light',
-	'sqlserver',
-	'terminal',
-	'textmate',
-	'tomorrow',
-	'tomorrow_night',
-	'tomorrow_night_blue',
-	'tomorrow_night_bright',
-	'tomorrow_night_eighties',
-	'twilight',
-	'vibrant_ink',
-	'vscode',
+  'ambiance',
+  'chaos',
+  'chrome',
+  'cloud9_day',
+  'cloud9_night',
+  'cloud9_night_low_color',
+  'cloud_editor',
+  'cloud_editor_dark',
+  'clouds',
+  'clouds_midnight',
+  'cobalt',
+  'crimson_editor',
+  'dawn',
+  'dracula',
+  'dreamweaver',
+  'eclipse',
+  'github',
+  'github_dark',
+  'gob',
+  'gruvbox',
+  'gruvbox_dark_hard',
+  'gruvbox_light_hard',
+  'idle_fingers',
+  'iplastic',
+  'katzenmilch',
+  'kr_theme',
+  'kuroir',
+  'merbivore',
+  'merbivore_soft',
+  'mono_industrial',
+  'monokai',
+  'nord_dark',
+  'one_dark',
+  'pastel_on_dark',
+  'solarized_dark',
+  'solarized_light',
+  'sqlserver',
+  'terminal',
+  'textmate',
+  'tomorrow',
+  'tomorrow_night',
+  'tomorrow_night_blue',
+  'tomorrow_night_bright',
+  'tomorrow_night_eighties',
+  'twilight',
+  'vibrant_ink',
+  'vscode',
 ]
 
 export const CSS_RESET = `
 * {
-  font-family: monospace;
   line-height: 1.25em;
 }
 .shiki{
@@ -116,6 +118,8 @@ export const CSS_RESET = `
 .markdown-callout-title {
     .octicon{
         fill:white;
+        width:29px;
+        height:29px;
     }
 	/* background: var(--current-color); */
 	color: var(--current-color);
@@ -124,6 +128,8 @@ export const CSS_RESET = `
 	/* border-start-start-radius: var(--radius); */
 	padding: 0.5em;
 	padding-inline-start: 1em;
+  display: flex;
+  align-items: center;
 }
 .markdown-callout-content {
 	padding: 1em;
@@ -136,7 +142,12 @@ export const CSS_RESET = `
 	border-left: 3px solid var(--current-color);
 	margin-bottom: 1em;
 	margin-top: 1em;
+
 }
+.markdown-callout p:nth-child(2) {
+    padding:1em;
+  }
+
 
 .markdown-callout-tip {
 	--text-color: whitesmoke;
@@ -164,8 +175,9 @@ export const CSS_RESET = `
   flex-direction:column;
   align-items: flex-start;
   width:95%;
-  margin-left: 20px;
-  margin-top:20px;
+  /*margin-left: 20px;*/
+  /*margin-top:20px;*/
+
   /*background-color: rgba(255,0,0,0.5)!important;*/
 }
 

web/notify.js

@@ -41,7 +41,16 @@ const toastStyle = `
     transition-duration: ${transition_time}ms;
   `
 
-function notify(message, timeout = 3000) {
+function notify(message, timeout = 3000, old_mode = false) {
+  if (!old_mode) {
+    app.extensionManager.toast.add({
+      severity: 'info',
+      summary: 'MTB',
+      detail: message,
+      life: timeout,
+    })
+    return
+  }
   log('Creating toast')
   const container = document.getElementById('mtb-notify-container')
   const toast = document.createElement('div')
@@ -59,7 +68,7 @@ function notify(message, timeout = 3000) {
       log('Transition out')
       const totalHeight = Array.from(container.children).reduce(
         (acc, child) => acc + child.offsetHeight + 10, // Add spacing of 10px between toasts
-        0
+        0,
       )
       container.style.height = `${totalHeight}px`
 
@@ -83,7 +92,7 @@ function notify(message, timeout = 3000) {
   // Update container's height to fit new toast
   const totalHeight = Array.from(container.children).reduce(
     (acc, child) => acc + child.offsetHeight + 10, // Add spacing of 10px between toasts
-    0
+    0,
   )
   container.style.height = `${totalHeight}px`