Merge branch 'comfyanonymous:master' into master

.gitattributes

@@ -0,0 +1,2 @@
+/web/assets/** linguist-generated
+/web/** linguist-vendored

comfy/cli_args.py

@@ -92,6 +92,10 @@ class LatentPreviewMethod(enum.Enum):
 
 parser.add_argument("--preview-method", type=LatentPreviewMethod, default=LatentPreviewMethod.NoPreviews, help="Default preview method for sampler nodes.", action=EnumAction)
 
+cache_group = parser.add_mutually_exclusive_group()
+cache_group.add_argument("--cache-classic", action="store_true", help="Use the old style (aggressive) caching.")
+cache_group.add_argument("--cache-lru", type=int, default=0, help="Use LRU caching with a maximum of N node results cached. May use more RAM/VRAM.")
+
 attn_group = parser.add_mutually_exclusive_group()
 attn_group.add_argument("--use-split-cross-attention", action="store_true", help="Use the split cross attention optimization. Ignored when xformers is used.")
 attn_group.add_argument("--use-quad-cross-attention", action="store_true", help="Use the sub-quadratic cross attention optimization . Ignored when xformers is used.")

comfy_execution/caching.py

@@ -0,0 +1,299 @@
+import itertools
+from typing import Sequence, Mapping
+from comfy_execution.graph import DynamicPrompt
+
+import nodes
+
+from comfy_execution.graph_utils import is_link
+
+class CacheKeySet:
+    def __init__(self, dynprompt, node_ids, is_changed_cache):
+        self.keys = {}
+        self.subcache_keys = {}
+
+    def add_keys(self, node_ids):
+        raise NotImplementedError()
+
+    def all_node_ids(self):
+        return set(self.keys.keys())
+
+    def get_used_keys(self):
+        return self.keys.values()
+
+    def get_used_subcache_keys(self):
+        return self.subcache_keys.values()
+
+    def get_data_key(self, node_id):
+        return self.keys.get(node_id, None)
+
+    def get_subcache_key(self, node_id):
+        return self.subcache_keys.get(node_id, None)
+
+class Unhashable:
+    def __init__(self):
+        self.value = float("NaN")
+
+def to_hashable(obj):
+    # So that we don't infinitely recurse since frozenset and tuples
+    # are Sequences.
+    if isinstance(obj, (int, float, str, bool, type(None))):
+        return obj
+    elif isinstance(obj, Mapping):
+        return frozenset([(to_hashable(k), to_hashable(v)) for k, v in sorted(obj.items())])
+    elif isinstance(obj, Sequence):
+        return frozenset(zip(itertools.count(), [to_hashable(i) for i in obj]))
+    else:
+        # TODO - Support other objects like tensors?
+        return Unhashable()
+
+class CacheKeySetID(CacheKeySet):
+    def __init__(self, dynprompt, node_ids, is_changed_cache):
+        super().__init__(dynprompt, node_ids, is_changed_cache)
+        self.dynprompt = dynprompt
+        self.add_keys(node_ids)
+
+    def add_keys(self, node_ids):
+        for node_id in node_ids:
+            if node_id in self.keys:
+                continue
+            node = self.dynprompt.get_node(node_id)
+            self.keys[node_id] = (node_id, node["class_type"])
+            self.subcache_keys[node_id] = (node_id, node["class_type"])
+
+class CacheKeySetInputSignature(CacheKeySet):
+    def __init__(self, dynprompt, node_ids, is_changed_cache):
+        super().__init__(dynprompt, node_ids, is_changed_cache)
+        self.dynprompt = dynprompt
+        self.is_changed_cache = is_changed_cache
+        self.add_keys(node_ids)
+
+    def include_node_id_in_input(self) -> bool:
+        return False
+
+    def add_keys(self, node_ids):
+        for node_id in node_ids:
+            if node_id in self.keys:
+                continue
+            node = self.dynprompt.get_node(node_id)
+            self.keys[node_id] = self.get_node_signature(self.dynprompt, node_id)
+            self.subcache_keys[node_id] = (node_id, node["class_type"])
+
+    def get_node_signature(self, dynprompt, node_id):
+        signature = []
+        ancestors, order_mapping = self.get_ordered_ancestry(dynprompt, node_id)
+        signature.append(self.get_immediate_node_signature(dynprompt, node_id, order_mapping))
+        for ancestor_id in ancestors:
+            signature.append(self.get_immediate_node_signature(dynprompt, ancestor_id, order_mapping))
+        return to_hashable(signature)
+
+    def get_immediate_node_signature(self, dynprompt, node_id, ancestor_order_mapping):
+        node = dynprompt.get_node(node_id)
+        class_type = node["class_type"]
+        class_def = nodes.NODE_CLASS_MAPPINGS[class_type]
+        signature = [class_type, self.is_changed_cache.get(node_id)]
+        if self.include_node_id_in_input() or (hasattr(class_def, "NOT_IDEMPOTENT") and class_def.NOT_IDEMPOTENT):
+            signature.append(node_id)
+        inputs = node["inputs"]
+        for key in sorted(inputs.keys()):
+            if is_link(inputs[key]):
+                (ancestor_id, ancestor_socket) = inputs[key]
+                ancestor_index = ancestor_order_mapping[ancestor_id]
+                signature.append((key,("ANCESTOR", ancestor_index, ancestor_socket)))
+            else:
+                signature.append((key, inputs[key]))
+        return signature
+
+    # This function returns a list of all ancestors of the given node. The order of the list is
+    # deterministic based on which specific inputs the ancestor is connected by.
+    def get_ordered_ancestry(self, dynprompt, node_id):
+        ancestors = []
+        order_mapping = {}
+        self.get_ordered_ancestry_internal(dynprompt, node_id, ancestors, order_mapping)
+        return ancestors, order_mapping
+
+    def get_ordered_ancestry_internal(self, dynprompt, node_id, ancestors, order_mapping):
+        inputs = dynprompt.get_node(node_id)["inputs"]
+        input_keys = sorted(inputs.keys())
+        for key in input_keys:
+            if is_link(inputs[key]):
+                ancestor_id = inputs[key][0]
+                if ancestor_id not in order_mapping:
+                    ancestors.append(ancestor_id)
+                    order_mapping[ancestor_id] = len(ancestors) - 1
+                    self.get_ordered_ancestry_internal(dynprompt, ancestor_id, ancestors, order_mapping)
+
+class BasicCache:
+    def __init__(self, key_class):
+        self.key_class = key_class
+        self.initialized = False
+        self.dynprompt: DynamicPrompt
+        self.cache_key_set: CacheKeySet
+        self.cache = {}
+        self.subcaches = {}
+
+    def set_prompt(self, dynprompt, node_ids, is_changed_cache):
+        self.dynprompt = dynprompt
+        self.cache_key_set = self.key_class(dynprompt, node_ids, is_changed_cache)
+        self.is_changed_cache = is_changed_cache
+        self.initialized = True
+
+    def all_node_ids(self):
+        assert self.initialized
+        node_ids = self.cache_key_set.all_node_ids()
+        for subcache in self.subcaches.values():
+            node_ids = node_ids.union(subcache.all_node_ids())
+        return node_ids
+
+    def _clean_cache(self):
+        preserve_keys = set(self.cache_key_set.get_used_keys())
+        to_remove = []
+        for key in self.cache:
+            if key not in preserve_keys:
+                to_remove.append(key)
+        for key in to_remove:
+            del self.cache[key]
+
+    def _clean_subcaches(self):
+        preserve_subcaches = set(self.cache_key_set.get_used_subcache_keys())
+
+        to_remove = []
+        for key in self.subcaches:
+            if key not in preserve_subcaches:
+                to_remove.append(key)
+        for key in to_remove:
+            del self.subcaches[key]
+
+    def clean_unused(self):
+        assert self.initialized
+        self._clean_cache()
+        self._clean_subcaches()
+
+    def _set_immediate(self, node_id, value):
+        assert self.initialized
+        cache_key = self.cache_key_set.get_data_key(node_id)
+        self.cache[cache_key] = value
+
+    def _get_immediate(self, node_id):
+        if not self.initialized:
+            return None
+        cache_key = self.cache_key_set.get_data_key(node_id)
+        if cache_key in self.cache:
+            return self.cache[cache_key]
+        else:
+            return None
+
+    def _ensure_subcache(self, node_id, children_ids):
+        subcache_key = self.cache_key_set.get_subcache_key(node_id)
+        subcache = self.subcaches.get(subcache_key, None)
+        if subcache is None:
+            subcache = BasicCache(self.key_class)
+            self.subcaches[subcache_key] = subcache
+        subcache.set_prompt(self.dynprompt, children_ids, self.is_changed_cache)
+        return subcache
+
+    def _get_subcache(self, node_id):
+        assert self.initialized
+        subcache_key = self.cache_key_set.get_subcache_key(node_id)
+        if subcache_key in self.subcaches:
+            return self.subcaches[subcache_key]
+        else:
+            return None
+
+    def recursive_debug_dump(self):
+        result = []
+        for key in self.cache:
+            result.append({"key": key, "value": self.cache[key]})
+        for key in self.subcaches:
+            result.append({"subcache_key": key, "subcache": self.subcaches[key].recursive_debug_dump()})
+        return result
+
+class HierarchicalCache(BasicCache):
+    def __init__(self, key_class):
+        super().__init__(key_class)
+
+    def _get_cache_for(self, node_id):
+        assert self.dynprompt is not None
+        parent_id = self.dynprompt.get_parent_node_id(node_id)
+        if parent_id is None:
+            return self
+
+        hierarchy = []
+        while parent_id is not None:
+            hierarchy.append(parent_id)
+            parent_id = self.dynprompt.get_parent_node_id(parent_id)
+
+        cache = self
+        for parent_id in reversed(hierarchy):
+            cache = cache._get_subcache(parent_id)
+            if cache is None:
+                return None
+        return cache
+
+    def get(self, node_id):
+        cache = self._get_cache_for(node_id)
+        if cache is None:
+            return None
+        return cache._get_immediate(node_id)
+
+    def set(self, node_id, value):
+        cache = self._get_cache_for(node_id)
+        assert cache is not None
+        cache._set_immediate(node_id, value)
+
+    def ensure_subcache_for(self, node_id, children_ids):
+        cache = self._get_cache_for(node_id)
+        assert cache is not None
+        return cache._ensure_subcache(node_id, children_ids)
+
+class LRUCache(BasicCache):
+    def __init__(self, key_class, max_size=100):
+        super().__init__(key_class)
+        self.max_size = max_size
+        self.min_generation = 0
+        self.generation = 0
+        self.used_generation = {}
+        self.children = {}
+
+    def set_prompt(self, dynprompt, node_ids, is_changed_cache):
+        super().set_prompt(dynprompt, node_ids, is_changed_cache)
+        self.generation += 1
+        for node_id in node_ids:
+            self._mark_used(node_id)
+
+    def clean_unused(self):
+        while len(self.cache) > self.max_size and self.min_generation < self.generation:
+            self.min_generation += 1
+            to_remove = [key for key in self.cache if self.used_generation[key] < self.min_generation]
+            for key in to_remove:
+                del self.cache[key]
+                del self.used_generation[key]
+                if key in self.children:
+                    del self.children[key]
+        self._clean_subcaches()
+
+    def get(self, node_id):
+        self._mark_used(node_id)
+        return self._get_immediate(node_id)
+
+    def _mark_used(self, node_id):
+        cache_key = self.cache_key_set.get_data_key(node_id)
+        if cache_key is not None:
+            self.used_generation[cache_key] = self.generation
+
+    def set(self, node_id, value):
+        self._mark_used(node_id)
+        return self._set_immediate(node_id, value)
+
+    def ensure_subcache_for(self, node_id, children_ids):
+        # Just uses subcaches for tracking 'live' nodes
+        super()._ensure_subcache(node_id, children_ids)
+
+        self.cache_key_set.add_keys(children_ids)
+        self._mark_used(node_id)
+        cache_key = self.cache_key_set.get_data_key(node_id)
+        self.children[cache_key] = []
+        for child_id in children_ids:
+            self._mark_used(child_id)
+            self.children[cache_key].append(self.cache_key_set.get_data_key(child_id))
+        return self
+

comfy_execution/graph.py

@@ -0,0 +1,237 @@
+import nodes
+
+from comfy_execution.graph_utils import is_link
+
+class DependencyCycleError(Exception):
+    pass
+
+class NodeInputError(Exception):
+    pass
+
+class NodeNotFoundError(Exception):
+    pass
+
+class DynamicPrompt:
+    def __init__(self, original_prompt):
+        # The original prompt provided by the user
+        self.original_prompt = original_prompt
+        # Any extra pieces of the graph created during execution
+        self.ephemeral_prompt = {}
+        self.ephemeral_parents = {}
+        self.ephemeral_display = {}
+
+    def get_node(self, node_id):
+        if node_id in self.ephemeral_prompt:
+            return self.ephemeral_prompt[node_id]
+        if node_id in self.original_prompt:
+            return self.original_prompt[node_id]
+        raise NodeNotFoundError(f"Node {node_id} not found")
+
+    def has_node(self, node_id):
+        return node_id in self.original_prompt or node_id in self.ephemeral_prompt
+
+    def add_ephemeral_node(self, node_id, node_info, parent_id, display_id):
+        self.ephemeral_prompt[node_id] = node_info
+        self.ephemeral_parents[node_id] = parent_id
+        self.ephemeral_display[node_id] = display_id
+
+    def get_real_node_id(self, node_id):
+        while node_id in self.ephemeral_parents:
+            node_id = self.ephemeral_parents[node_id]
+        return node_id
+
+    def get_parent_node_id(self, node_id):
+        return self.ephemeral_parents.get(node_id, None)
+
+    def get_display_node_id(self, node_id):
+        while node_id in self.ephemeral_display:
+            node_id = self.ephemeral_display[node_id]
+        return node_id
+
+    def all_node_ids(self):
+        return set(self.original_prompt.keys()).union(set(self.ephemeral_prompt.keys()))
+
+    def get_original_prompt(self):
+        return self.original_prompt
+
+def get_input_info(class_def, input_name):
+    valid_inputs = class_def.INPUT_TYPES()
+    input_info = None
+    input_category = None
+    if "required" in valid_inputs and input_name in valid_inputs["required"]:
+        input_category = "required"
+        input_info = valid_inputs["required"][input_name]
+    elif "optional" in valid_inputs and input_name in valid_inputs["optional"]:
+        input_category = "optional"
+        input_info = valid_inputs["optional"][input_name]
+    elif "hidden" in valid_inputs and input_name in valid_inputs["hidden"]:
+        input_category = "hidden"
+        input_info = valid_inputs["hidden"][input_name]
+    if input_info is None:
+        return None, None, None
+    input_type = input_info[0]
+    if len(input_info) > 1:
+        extra_info = input_info[1]
+    else:
+        extra_info = {}
+    return input_type, input_category, extra_info
+
+class TopologicalSort:
+    def __init__(self, dynprompt):
+        self.dynprompt = dynprompt
+        self.pendingNodes = {}
+        self.blockCount = {} # Number of nodes this node is directly blocked by
+        self.blocking = {} # Which nodes are blocked by this node
+
+    def get_input_info(self, unique_id, input_name):
+        class_type = self.dynprompt.get_node(unique_id)["class_type"]
+        class_def = nodes.NODE_CLASS_MAPPINGS[class_type]
+        return get_input_info(class_def, input_name)
+
+    def make_input_strong_link(self, to_node_id, to_input):
+        inputs = self.dynprompt.get_node(to_node_id)["inputs"]
+        if to_input not in inputs:
+            raise NodeInputError(f"Node {to_node_id} says it needs input {to_input}, but there is no input to that node at all")
+        value = inputs[to_input]
+        if not is_link(value):
+            raise NodeInputError(f"Node {to_node_id} says it needs input {to_input}, but that value is a constant")
+        from_node_id, from_socket = value
+        self.add_strong_link(from_node_id, from_socket, to_node_id)
+
+    def add_strong_link(self, from_node_id, from_socket, to_node_id):
+        self.add_node(from_node_id)
+        if to_node_id not in self.blocking[from_node_id]:
+            self.blocking[from_node_id][to_node_id] = {}
+            self.blockCount[to_node_id] += 1
+        self.blocking[from_node_id][to_node_id][from_socket] = True
+
+    def add_node(self, unique_id, include_lazy=False, subgraph_nodes=None):
+        if unique_id in self.pendingNodes:
+            return
+        self.pendingNodes[unique_id] = True
+        self.blockCount[unique_id] = 0
+        self.blocking[unique_id] = {}
+
+        inputs = self.dynprompt.get_node(unique_id)["inputs"]
+        for input_name in inputs:
+            value = inputs[input_name]
+            if is_link(value):
+                from_node_id, from_socket = value
+                if subgraph_nodes is not None and from_node_id not in subgraph_nodes:
+                    continue
+                input_type, input_category, input_info = self.get_input_info(unique_id, input_name)
+                is_lazy = input_info is not None and "lazy" in input_info and input_info["lazy"]
+                if include_lazy or not is_lazy:
+                    self.add_strong_link(from_node_id, from_socket, unique_id)
+
+    def get_ready_nodes(self):
+        return [node_id for node_id in self.pendingNodes if self.blockCount[node_id] == 0]
+
+    def pop_node(self, unique_id):
+        del self.pendingNodes[unique_id]
+        for blocked_node_id in self.blocking[unique_id]:
+            self.blockCount[blocked_node_id] -= 1
+        del self.blocking[unique_id]
+
+    def is_empty(self):
+        return len(self.pendingNodes) == 0
+
+class ExecutionList(TopologicalSort):
+    """
+    ExecutionList implements a topological dissolve of the graph. After a node is staged for execution,
+    it can still be returned to the graph after having further dependencies added.
+    """
+    def __init__(self, dynprompt, output_cache):
+        super().__init__(dynprompt)
+        self.output_cache = output_cache
+        self.staged_node_id = None
+
+    def add_strong_link(self, from_node_id, from_socket, to_node_id):
+        if self.output_cache.get(from_node_id) is not None:
+            # Nothing to do
+            return
+        super().add_strong_link(from_node_id, from_socket, to_node_id)
+
+    def stage_node_execution(self):
+        assert self.staged_node_id is None
+        if self.is_empty():
+            return None, None, None
+        available = self.get_ready_nodes()
+        if len(available) == 0:
+            cycled_nodes = self.get_nodes_in_cycle()
+            # Because cycles composed entirely of static nodes are caught during initial validation,
+            # we will 'blame' the first node in the cycle that is not a static node.
+            blamed_node = cycled_nodes[0]
+            for node_id in cycled_nodes:
+                display_node_id = self.dynprompt.get_display_node_id(node_id)
+                if display_node_id != node_id:
+                    blamed_node = display_node_id
+                    break
+            ex = DependencyCycleError("Dependency cycle detected")
+            error_details = {
+                "node_id": blamed_node,
+                "exception_message": str(ex),
+                "exception_type": "graph.DependencyCycleError",
+                "traceback": [],
+                "current_inputs": []
+            }
+            return None, error_details, ex
+        next_node = available[0]
+        # If an output node is available, do that first.
+        # Technically this has no effect on the overall length of execution, but it feels better as a user
+        # for a PreviewImage to display a result as soon as it can
+        # Some other heuristics could probably be used here to improve the UX further.
+        for node_id in available:
+            class_type = self.dynprompt.get_node(node_id)["class_type"]
+            class_def = nodes.NODE_CLASS_MAPPINGS[class_type]
+            if hasattr(class_def, 'OUTPUT_NODE') and class_def.OUTPUT_NODE == True:
+                next_node = node_id
+                break
+        self.staged_node_id = next_node
+        return self.staged_node_id, None, None
+
+    def unstage_node_execution(self):
+        assert self.staged_node_id is not None
+        self.staged_node_id = None
+
+    def complete_node_execution(self):
+        node_id = self.staged_node_id
+        self.pop_node(node_id)
+        self.staged_node_id = None
+
+    def get_nodes_in_cycle(self):
+        # We'll dissolve the graph in reverse topological order to leave only the nodes in the cycle.
+        # We're skipping some of the performance optimizations from the original TopologicalSort to keep
+        # the code simple (and because having a cycle in the first place is a catastrophic error)
+        blocked_by = { node_id: {} for node_id in self.pendingNodes }
+        for from_node_id in self.blocking:
+            for to_node_id in self.blocking[from_node_id]:
+                if True in self.blocking[from_node_id][to_node_id].values():
+                    blocked_by[to_node_id][from_node_id] = True
+        to_remove = [node_id for node_id in blocked_by if len(blocked_by[node_id]) == 0]
+        while len(to_remove) > 0:
+            for node_id in to_remove:
+                for to_node_id in blocked_by:
+                    if node_id in blocked_by[to_node_id]:
+                        del blocked_by[to_node_id][node_id]
+                del blocked_by[node_id]
+            to_remove = [node_id for node_id in blocked_by if len(blocked_by[node_id]) == 0]
+        return list(blocked_by.keys())
+
+class ExecutionBlocker:
+    """
+    Return this from a node and any users will be blocked with the given error message.
+    If the message is None, execution will be blocked silently instead.
+    Generally, you should avoid using this functionality unless absolutely necessary. Whenever it's
+    possible, a lazy input will be more efficient and have a better user experience.
+    This functionality is useful in two cases:
+    1. You want to conditionally prevent an output node from executing. (Particularly a built-in node
+       like SaveImage. For your own output nodes, I would recommend just adding a BOOL input and using
+       lazy evaluation to let it conditionally disable itself.)
+    2. You have a node with multiple possible outputs, some of which are invalid and should not be used.
+       (I would recommend not making nodes like this in the future -- instead, make multiple nodes with
+       different outputs. Unfortunately, there are several popular existing nodes using this pattern.)
+    """
+    def __init__(self, message):
+        self.message = message
+

comfy_execution/graph_utils.py

@@ -0,0 +1,139 @@
+def is_link(obj):
+    if not isinstance(obj, list):
+        return False
+    if len(obj) != 2:
+        return False
+    if not isinstance(obj[0], str):
+        return False
+    if not isinstance(obj[1], int) and not isinstance(obj[1], float):
+        return False
+    return True
+
+# The GraphBuilder is just a utility class that outputs graphs in the form expected by the ComfyUI back-end
+class GraphBuilder:
+    _default_prefix_root = ""
+    _default_prefix_call_index = 0
+    _default_prefix_graph_index = 0
+
+    def __init__(self, prefix = None):
+        if prefix is None:
+            self.prefix = GraphBuilder.alloc_prefix()
+        else:
+            self.prefix = prefix
+        self.nodes = {}
+        self.id_gen = 1
+
+    @classmethod
+    def set_default_prefix(cls, prefix_root, call_index, graph_index = 0):
+        cls._default_prefix_root = prefix_root
+        cls._default_prefix_call_index = call_index
+        cls._default_prefix_graph_index = graph_index
+
+    @classmethod
+    def alloc_prefix(cls, root=None, call_index=None, graph_index=None):
+        if root is None:
+            root = GraphBuilder._default_prefix_root
+        if call_index is None:
+            call_index = GraphBuilder._default_prefix_call_index
+        if graph_index is None:
+            graph_index = GraphBuilder._default_prefix_graph_index
+        result = f"{root}.{call_index}.{graph_index}."
+        GraphBuilder._default_prefix_graph_index += 1
+        return result
+
+    def node(self, class_type, id=None, **kwargs):
+        if id is None:
+            id = str(self.id_gen)
+            self.id_gen += 1
+        id = self.prefix + id
+        if id in self.nodes:
+            return self.nodes[id]
+
+        node = Node(id, class_type, kwargs)
+        self.nodes[id] = node
+        return node
+
+    def lookup_node(self, id):
+        id = self.prefix + id
+        return self.nodes.get(id)
+
+    def finalize(self):
+        output = {}
+        for node_id, node in self.nodes.items():
+            output[node_id] = node.serialize()
+        return output
+
+    def replace_node_output(self, node_id, index, new_value):
+        node_id = self.prefix + node_id
+        to_remove = []
+        for node in self.nodes.values():
+            for key, value in node.inputs.items():
+                if is_link(value) and value[0] == node_id and value[1] == index:
+                    if new_value is None:
+                        to_remove.append((node, key))
+                    else:
+                        node.inputs[key] = new_value
+        for node, key in to_remove:
+            del node.inputs[key]
+
+    def remove_node(self, id):
+        id = self.prefix + id
+        del self.nodes[id]
+
+class Node:
+    def __init__(self, id, class_type, inputs):
+        self.id = id
+        self.class_type = class_type
+        self.inputs = inputs
+        self.override_display_id = None
+
+    def out(self, index):
+        return [self.id, index]
+
+    def set_input(self, key, value):
+        if value is None:
+            if key in self.inputs:
+                del self.inputs[key]
+        else:
+            self.inputs[key] = value
+
+    def get_input(self, key):
+        return self.inputs.get(key)
+
+    def set_override_display_id(self, override_display_id):
+        self.override_display_id = override_display_id
+
+    def serialize(self):
+        serialized = {
+            "class_type": self.class_type,
+            "inputs": self.inputs
+        }
+        if self.override_display_id is not None:
+            serialized["override_display_id"] = self.override_display_id
+        return serialized
+
+def add_graph_prefix(graph, outputs, prefix):
+    # Change the node IDs and any internal links
+    new_graph = {}
+    for node_id, node_info in graph.items():
+        # Make sure the added nodes have unique IDs
+        new_node_id = prefix + node_id
+        new_node = { "class_type": node_info["class_type"], "inputs": {} }
+        for input_name, input_value in node_info.get("inputs", {}).items():
+            if is_link(input_value):
+                new_node["inputs"][input_name] = [prefix + input_value[0], input_value[1]]
+            else:
+                new_node["inputs"][input_name] = input_value
+        new_graph[new_node_id] = new_node
+
+    # Change the node IDs in the outputs
+    new_outputs = []
+    for n in range(len(outputs)):
+        output = outputs[n]
+        if is_link(output):
+            new_outputs.append([prefix + output[0], output[1]])
+        else:
+            new_outputs.append(output)
+
+    return new_graph, tuple(new_outputs)
+

custom_nodes/example_node.py.example

@@ -54,7 +54,8 @@ class Example:
                     "min": 0, #Minimum value
                     "max": 4096, #Maximum value
                     "step": 64, #Slider's step
-                    "display": "number" # Cosmetic only: display as "number" or "slider"
+                    "display": "number", # Cosmetic only: display as "number" or "slider"
+                    "lazy": True # Will only be evaluated if check_lazy_status requires it
                 }),
                 "float_field": ("FLOAT", {
                     "default": 1.0,
@@ -62,11 +63,14 @@ class Example:
                     "max": 10.0,
                     "step": 0.01,
                     "round": 0.001, #The value representing the precision to round to, will be set to the step value by default. Can be set to False to disable rounding.
-                    "display": "number"}),
+                    "display": "number",
+                    "lazy": True
+                }),
                 "print_to_screen": (["enable", "disable"],),
                 "string_field": ("STRING", {
                     "multiline": False, #True if you want the field to look like the one on the ClipTextEncode node
-                    "default": "Hello World!"
+                    "default": "Hello World!",
+                    "lazy": True
                 }),
             },
         }
@@ -80,6 +84,23 @@ class Example:
 
     CATEGORY = "Example"
 
+    def check_lazy_status(self, image, string_field, int_field, float_field, print_to_screen):
+        """
+            Return a list of input names that need to be evaluated.
+
+            This function will be called if there are any lazy inputs which have not yet been
+            evaluated. As long as you return at least one field which has not yet been evaluated
+            (and more exist), this function will be called again once the value of the requested
+            field is available.
+
+            Any evaluated inputs will be passed as arguments to this function. Any unevaluated
+            inputs will have the value None.
+        """
+        if print_to_screen == "enable":
+            return ["int_field", "float_field", "string_field"]
+        else:
+            return []
+
     def test(self, image, string_field, int_field, float_field, print_to_screen):
         if print_to_screen == "enable":
             print(f"""Your input contains:

execution.py

@@ -5,6 +5,7 @@ import threading
 import heapq
 import time
 import traceback
+from enum import Enum
 import inspect
 from typing import List, Literal, NamedTuple, Optional
 
@@ -12,102 +13,215 @@ import torch
 import nodes
 
 import comfy.model_management
+from comfy_execution.graph import get_input_info, ExecutionList, DynamicPrompt, ExecutionBlocker
+from comfy_execution.graph_utils import is_link, GraphBuilder
+from comfy_execution.caching import HierarchicalCache, LRUCache, CacheKeySetInputSignature, CacheKeySetID
+from comfy.cli_args import args
 
-def get_input_data(inputs, class_def, unique_id, outputs={}, prompt={}, extra_data={}):
+class ExecutionResult(Enum):
+    SUCCESS = 0
+    FAILURE = 1
+    PENDING = 2
+
+class DuplicateNodeError(Exception):
+    pass
+
+class IsChangedCache:
+    def __init__(self, dynprompt, outputs_cache):
+        self.dynprompt = dynprompt
+        self.outputs_cache = outputs_cache
+        self.is_changed = {}
+
+    def get(self, node_id):
+        if node_id in self.is_changed:
+            return self.is_changed[node_id]
+
+        node = self.dynprompt.get_node(node_id)
+        class_type = node["class_type"]
+        class_def = nodes.NODE_CLASS_MAPPINGS[class_type]
+        if not hasattr(class_def, "IS_CHANGED"):
+            self.is_changed[node_id] = False
+            return self.is_changed[node_id]
+
+        if "is_changed" in node:
+            self.is_changed[node_id] = node["is_changed"]
+            return self.is_changed[node_id]
+
+        input_data_all, _ = get_input_data(node["inputs"], class_def, node_id, self.outputs_cache)
+        try:
+            is_changed = map_node_over_list(class_def, input_data_all, "IS_CHANGED")
+            node["is_changed"] = [None if isinstance(x, ExecutionBlocker) else x for x in is_changed]
+        except:
+            node["is_changed"] = float("NaN")
+        finally:
+            self.is_changed[node_id] = node["is_changed"]
+        return self.is_changed[node_id]
+
+class CacheSet:
+    def __init__(self, lru_size=None):
+        if lru_size is None or lru_size == 0:
+            self.init_classic_cache() 
+        else:
+            self.init_lru_cache(lru_size)
+        self.all = [self.outputs, self.ui, self.objects]
+
+    # Useful for those with ample RAM/VRAM -- allows experimenting without
+    # blowing away the cache every time
+    def init_lru_cache(self, cache_size):
+        self.outputs = LRUCache(CacheKeySetInputSignature, max_size=cache_size)
+        self.ui = LRUCache(CacheKeySetInputSignature, max_size=cache_size)
+        self.objects = HierarchicalCache(CacheKeySetID)
+
+    # Performs like the old cache -- dump data ASAP
+    def init_classic_cache(self):
+        self.outputs = HierarchicalCache(CacheKeySetInputSignature)
+        self.ui = HierarchicalCache(CacheKeySetInputSignature)
+        self.objects = HierarchicalCache(CacheKeySetID)
+
+    def recursive_debug_dump(self):
+        result = {
+            "outputs": self.outputs.recursive_debug_dump(),
+            "ui": self.ui.recursive_debug_dump(),
+        }
+        return result
+
+def get_input_data(inputs, class_def, unique_id, outputs=None, dynprompt=None, extra_data={}):
     valid_inputs = class_def.INPUT_TYPES()
     input_data_all = {}
+    missing_keys = {}
     for x in inputs:
         input_data = inputs[x]
-        if isinstance(input_data, list):
+        input_type, input_category, input_info = get_input_info(class_def, x)
+        def mark_missing():
+            missing_keys[x] = True
+            input_data_all[x] = (None,)
+        if is_link(input_data) and (not input_info or not input_info.get("rawLink", False)):
             input_unique_id = input_data[0]
             output_index = input_data[1]
-            if input_unique_id not in outputs:
+            if outputs is None:
-                input_data_all[x] = (None,)
+                mark_missing()
+                continue # This might be a lazily-evaluated input
+            cached_output = outputs.get(input_unique_id)
+            if cached_output is None:
+                mark_missing()
                 continue
-            obj = outputs[input_unique_id][output_index]
+            if output_index >= len(cached_output):
+                mark_missing()
+                continue
+            obj = cached_output[output_index]
             input_data_all[x] = obj
-        else:
+        elif input_category is not None:
-            if ("required" in valid_inputs and x in valid_inputs["required"]) or ("optional" in valid_inputs and x in valid_inputs["optional"]):
+            input_data_all[x] = [input_data]
-                input_data_all[x] = [input_data]
 
     if "hidden" in valid_inputs:
         h = valid_inputs["hidden"]
         for x in h:
             if h[x] == "PROMPT":
-                input_data_all[x] = [prompt]
+                input_data_all[x] = [dynprompt.get_original_prompt() if dynprompt is not None else {}]
+            if h[x] == "DYNPROMPT":
+                input_data_all[x] = [dynprompt]
             if h[x] == "EXTRA_PNGINFO":
                 input_data_all[x] = [extra_data.get('extra_pnginfo', None)]
             if h[x] == "UNIQUE_ID":
                 input_data_all[x] = [unique_id]
-    return input_data_all
+    return input_data_all, missing_keys
 
-def map_node_over_list(obj, input_data_all, func, allow_interrupt=False):
+def map_node_over_list(obj, input_data_all, func, allow_interrupt=False, execution_block_cb=None, pre_execute_cb=None):
     # check if node wants the lists
-    input_is_list = False
+    input_is_list = getattr(obj, "INPUT_IS_LIST", False)
-    if hasattr(obj, "INPUT_IS_LIST"):
-        input_is_list = obj.INPUT_IS_LIST
 
     if len(input_data_all) == 0:
         max_len_input = 0
     else:
-        max_len_input = max([len(x) for x in input_data_all.values()])
+        max_len_input = max(len(x) for x in input_data_all.values())
      
     # get a slice of inputs, repeat last input when list isn't long enough
     def slice_dict(d, i):
-        d_new = dict()
+        return {k: v[i if len(v) > i else -1] for k, v in d.items()}
-        for k,v in d.items():
-            d_new[k] = v[i if len(v) > i else -1]
-        return d_new
     
     results = []
+    def process_inputs(inputs, index=None):
+        if allow_interrupt:
+            nodes.before_node_execution()
+        execution_block = None
+        for k, v in inputs.items():
+            if isinstance(v, ExecutionBlocker):
+                execution_block = execution_block_cb(v) if execution_block_cb else v
+                break
+        if execution_block is None:
+            if pre_execute_cb is not None and index is not None:
+                pre_execute_cb(index)
+            results.append(getattr(obj, func)(**inputs))
+        else:
+            results.append(execution_block)
+
     if input_is_list:
-        if allow_interrupt:
+        process_inputs(input_data_all, 0)
-            nodes.before_node_execution()
-        results.append(getattr(obj, func)(**input_data_all))
     elif max_len_input == 0:
-        if allow_interrupt:
+        process_inputs({})
-            nodes.before_node_execution()
-        results.append(getattr(obj, func)())
     else: 
         for i in range(max_len_input):
-            if allow_interrupt:
+            input_dict = slice_dict(input_data_all, i)
-                nodes.before_node_execution()
+            process_inputs(input_dict, i)
-            results.append(getattr(obj, func)(**slice_dict(input_data_all, i)))
     return results
 
-def get_output_data(obj, input_data_all):
+def merge_result_data(results, obj):
+    # check which outputs need concatenating
+    output = []
+    output_is_list = [False] * len(results[0])
+    if hasattr(obj, "OUTPUT_IS_LIST"):
+        output_is_list = obj.OUTPUT_IS_LIST
+
+    # merge node execution results
+    for i, is_list in zip(range(len(results[0])), output_is_list):
+        if is_list:
+            output.append([x for o in results for x in o[i]])
+        else:
+            output.append([o[i] for o in results])
+    return output
+
+def get_output_data(obj, input_data_all, execution_block_cb=None, pre_execute_cb=None):
     
     results = []
     uis = []
-    return_values = map_node_over_list(obj, input_data_all, obj.FUNCTION, allow_interrupt=True)
+    subgraph_results = []
-
+    return_values = map_node_over_list(obj, input_data_all, obj.FUNCTION, allow_interrupt=True, execution_block_cb=execution_block_cb, pre_execute_cb=pre_execute_cb)
-    for r in return_values:
+    has_subgraph = False
+    for i in range(len(return_values)):
+        r = return_values[i]
         if isinstance(r, dict):
             if 'ui' in r:
                 uis.append(r['ui'])
-            if 'result' in r:
+            if 'expand' in r:
-                results.append(r['result'])
+                # Perform an expansion, but do not append results
+                has_subgraph = True
+                new_graph = r['expand']
+                result = r.get("result", None)
+                if isinstance(result, ExecutionBlocker):
+                    result = tuple([result] * len(obj.RETURN_TYPES))
+                subgraph_results.append((new_graph, result))
+            elif 'result' in r:
+                result = r.get("result", None)
+                if isinstance(result, ExecutionBlocker):
+                    result = tuple([result] * len(obj.RETURN_TYPES))
+                results.append(result)
+                subgraph_results.append((None, result))
         else:
+            if isinstance(r, ExecutionBlocker):
+                r = tuple([r] * len(obj.RETURN_TYPES))
             results.append(r)
+            subgraph_results.append((None, r))
     
-    output = []
+    if has_subgraph:
-    if len(results) > 0:
+        output = subgraph_results
-        # check which outputs need concatenating
+    elif len(results) > 0:
-        output_is_list = [False] * len(results[0])
+        output = merge_result_data(results, obj)
-        if hasattr(obj, "OUTPUT_IS_LIST"):
+    else:
-            output_is_list = obj.OUTPUT_IS_LIST
+        output = []
-
-        # merge node execution results
-        for i, is_list in zip(range(len(results[0])), output_is_list):
-            if is_list:
-                output.append([x for o in results for x in o[i]])
-            else:
-                output.append([o[i] for o in results])
-
     ui = dict()    
     if len(uis) > 0:
         ui = {k: [y for x in uis for y in x[k]] for k in uis[0].keys()}
-    return output, ui
+    return output, ui, has_subgraph
 
 def format_value(x):
     if x is None:
@@ -117,53 +231,145 @@ def format_value(x):
     else:
         return str(x)
 
-def recursive_execute(server, prompt, outputs, current_item, extra_data, executed, prompt_id, outputs_ui, object_storage):
+def execute(server, dynprompt, caches, current_item, extra_data, executed, prompt_id, execution_list, pending_subgraph_results):
     unique_id = current_item
-    inputs = prompt[unique_id]['inputs']
+    real_node_id = dynprompt.get_real_node_id(unique_id)
-    class_type = prompt[unique_id]['class_type']
+    display_node_id = dynprompt.get_display_node_id(unique_id)
+    parent_node_id = dynprompt.get_parent_node_id(unique_id)
+    inputs = dynprompt.get_node(unique_id)['inputs']
+    class_type = dynprompt.get_node(unique_id)['class_type']
     class_def = nodes.NODE_CLASS_MAPPINGS[class_type]
-    if unique_id in outputs:
+    if caches.outputs.get(unique_id) is not None:
-        return (True, None, None)
+        if server.client_id is not None:
-
+            cached_output = caches.ui.get(unique_id) or {}
-    for x in inputs:
+            server.send_sync("executed", { "node": unique_id, "display_node": display_node_id, "output": cached_output.get("output",None), "prompt_id": prompt_id }, server.client_id)
-        input_data = inputs[x]
+        return (ExecutionResult.SUCCESS, None, None)
-
-        if isinstance(input_data, list):
-            input_unique_id = input_data[0]
-            output_index = input_data[1]
-            if input_unique_id not in outputs:
-                result = recursive_execute(server, prompt, outputs, input_unique_id, extra_data, executed, prompt_id, outputs_ui, object_storage)
-                if result[0] is not True:
-                    # Another node failed further upstream
-                    return result
 
     input_data_all = None
     try:
-        input_data_all = get_input_data(inputs, class_def, unique_id, outputs, prompt, extra_data)
+        if unique_id in pending_subgraph_results:
-        if server.client_id is not None:
+            cached_results = pending_subgraph_results[unique_id]
-            server.last_node_id = unique_id
+            resolved_outputs = []
-            server.send_sync("executing", { "node": unique_id, "prompt_id": prompt_id }, server.client_id)
+            for is_subgraph, result in cached_results:
+                if not is_subgraph:
+                    resolved_outputs.append(result)
+                else:
+                    resolved_output = []
+                    for r in result:
+                        if is_link(r):
+                            source_node, source_output = r[0], r[1]
+                            node_output = caches.outputs.get(source_node)[source_output]
+                            for o in node_output:
+                                resolved_output.append(o)
 
-        obj = object_storage.get((unique_id, class_type), None)
+                        else:
-        if obj is None:
+                            resolved_output.append(r)
-            obj = class_def()
+                    resolved_outputs.append(tuple(resolved_output))
-            object_storage[(unique_id, class_type)] = obj
+            output_data = merge_result_data(resolved_outputs, class_def)
-
+            output_ui = []
-        output_data, output_ui = get_output_data(obj, input_data_all)
+            has_subgraph = False
-        outputs[unique_id] = output_data
+        else:
-        if len(output_ui) > 0:
+            input_data_all, missing_keys = get_input_data(inputs, class_def, unique_id, caches.outputs, dynprompt, extra_data)
-            outputs_ui[unique_id] = output_ui
             if server.client_id is not None:
-                server.send_sync("executed", { "node": unique_id, "output": output_ui, "prompt_id": prompt_id }, server.client_id)
+                server.last_node_id = display_node_id
+                server.send_sync("executing", { "node": unique_id, "display_node": display_node_id, "prompt_id": prompt_id }, server.client_id)
+
+            obj = caches.objects.get(unique_id)
+            if obj is None:
+                obj = class_def()
+                caches.objects.set(unique_id, obj)
+
+            if hasattr(obj, "check_lazy_status"):
+                required_inputs = map_node_over_list(obj, input_data_all, "check_lazy_status", allow_interrupt=True)
+                required_inputs = set(sum([r for r in required_inputs if isinstance(r,list)], []))
+                required_inputs = [x for x in required_inputs if isinstance(x,str) and (
+                    x not in input_data_all or x in missing_keys
+                )]
+                if len(required_inputs) > 0:
+                    for i in required_inputs:
+                        execution_list.make_input_strong_link(unique_id, i)
+                    return (ExecutionResult.PENDING, None, None)
+
+            def execution_block_cb(block):
+                if block.message is not None:
+                    mes = {
+                        "prompt_id": prompt_id,
+                        "node_id": unique_id,
+                        "node_type": class_type,
+                        "executed": list(executed),
+
+                        "exception_message": f"Execution Blocked: {block.message}",
+                        "exception_type": "ExecutionBlocked",
+                        "traceback": [],
+                        "current_inputs": [],
+                        "current_outputs": [],
+                    }
+                    server.send_sync("execution_error", mes, server.client_id)
+                    return ExecutionBlocker(None)
+                else:
+                    return block
+            def pre_execute_cb(call_index):
+                GraphBuilder.set_default_prefix(unique_id, call_index, 0)
+            output_data, output_ui, has_subgraph = get_output_data(obj, input_data_all, execution_block_cb=execution_block_cb, pre_execute_cb=pre_execute_cb)
+        if len(output_ui) > 0:
+            caches.ui.set(unique_id, {
+                "meta": {
+                    "node_id": unique_id,
+                    "display_node": display_node_id,
+                    "parent_node": parent_node_id,
+                    "real_node_id": real_node_id,
+                },
+                "output": output_ui
+            })
+            if server.client_id is not None:
+                server.send_sync("executed", { "node": unique_id, "display_node": display_node_id, "output": output_ui, "prompt_id": prompt_id }, server.client_id)
+        if has_subgraph:
+            cached_outputs = []
+            new_node_ids = []
+            new_output_ids = []
+            new_output_links = []
+            for i in range(len(output_data)):
+                new_graph, node_outputs = output_data[i]
+                if new_graph is None:
+                    cached_outputs.append((False, node_outputs))
+                else:
+                    # Check for conflicts
+                    for node_id in new_graph.keys():
+                        if dynprompt.has_node(node_id):
+                            raise DuplicateNodeError(f"Attempt to add duplicate node {node_id}. Ensure node ids are unique and deterministic or use graph_utils.GraphBuilder.")
+                    for node_id, node_info in new_graph.items():
+                        new_node_ids.append(node_id)
+                        display_id = node_info.get("override_display_id", unique_id)
+                        dynprompt.add_ephemeral_node(node_id, node_info, unique_id, display_id)
+                        # Figure out if the newly created node is an output node
+                        class_type = node_info["class_type"]
+                        class_def = nodes.NODE_CLASS_MAPPINGS[class_type]
+                        if hasattr(class_def, 'OUTPUT_NODE') and class_def.OUTPUT_NODE == True:
+                            new_output_ids.append(node_id)
+                    for i in range(len(node_outputs)):
+                        if is_link(node_outputs[i]):
+                            from_node_id, from_socket = node_outputs[i][0], node_outputs[i][1]
+                            new_output_links.append((from_node_id, from_socket))
+                    cached_outputs.append((True, node_outputs))
+            new_node_ids = set(new_node_ids)
+            for cache in caches.all:
+                cache.ensure_subcache_for(unique_id, new_node_ids).clean_unused()
+            for node_id in new_output_ids:
+                execution_list.add_node(node_id)
+            for link in new_output_links:
+                execution_list.add_strong_link(link[0], link[1], unique_id)
+            pending_subgraph_results[unique_id] = cached_outputs
+            return (ExecutionResult.PENDING, None, None)
+        caches.outputs.set(unique_id, output_data)
     except comfy.model_management.InterruptProcessingException as iex:
         logging.info("Processing interrupted")
 
         # skip formatting inputs/outputs
         error_details = {
-            "node_id": unique_id,
+            "node_id": real_node_id,
         }
 
-        return (False, error_details, iex)
+        return (ExecutionResult.FAILURE, error_details, iex)
     except Exception as ex:
         typ, _, tb = sys.exc_info()
         exception_type = full_type_name(typ)
@@ -173,121 +379,36 @@ def recursive_execute(server, prompt, outputs, current_item, extra_data, execute
             for name, inputs in input_data_all.items():
                 input_data_formatted[name] = [format_value(x) for x in inputs]
 
-        output_data_formatted = {}
+        logging.error(f"!!! Exception during processing !!! {ex}")
-        for node_id, node_outputs in outputs.items():
-            output_data_formatted[node_id] = [[format_value(x) for x in l] for l in node_outputs]
-
-        logging.error(f"!!! Exception during processing!!! {ex}")
         logging.error(traceback.format_exc())
 
         error_details = {
-            "node_id": unique_id,
+            "node_id": real_node_id,
             "exception_message": str(ex),
             "exception_type": exception_type,
             "traceback": traceback.format_tb(tb),
-            "current_inputs": input_data_formatted,
+            "current_inputs": input_data_formatted
-            "current_outputs": output_data_formatted
         }
-
         if isinstance(ex, comfy.model_management.OOM_EXCEPTION):
             logging.error("Got an OOM, unloading all loaded models.")
             comfy.model_management.unload_all_models()
 
-        return (False, error_details, ex)
+        return (ExecutionResult.FAILURE, error_details, ex)
 
     executed.add(unique_id)
 
-    return (True, None, None)
+    return (ExecutionResult.SUCCESS, None, None)
-
-def recursive_will_execute(prompt, outputs, current_item, memo={}):
-    unique_id = current_item
-
-    if unique_id in memo:
-        return memo[unique_id]
-
-    inputs = prompt[unique_id]['inputs']
-    will_execute = []
-    if unique_id in outputs:
-        return []
-
-    for x in inputs:
-        input_data = inputs[x]
-        if isinstance(input_data, list):
-            input_unique_id = input_data[0]
-            output_index = input_data[1]
-            if input_unique_id not in outputs:
-                will_execute += recursive_will_execute(prompt, outputs, input_unique_id, memo)
-
-    memo[unique_id] = will_execute + [unique_id]
-    return memo[unique_id]
-
-def recursive_output_delete_if_changed(prompt, old_prompt, outputs, current_item):
-    unique_id = current_item
-    inputs = prompt[unique_id]['inputs']
-    class_type = prompt[unique_id]['class_type']
-    class_def = nodes.NODE_CLASS_MAPPINGS[class_type]
-
-    is_changed_old = ''
-    is_changed = ''
-    to_delete = False
-    if hasattr(class_def, 'IS_CHANGED'):
-        if unique_id in old_prompt and 'is_changed' in old_prompt[unique_id]:
-            is_changed_old = old_prompt[unique_id]['is_changed']
-        if 'is_changed' not in prompt[unique_id]:
-            input_data_all = get_input_data(inputs, class_def, unique_id, outputs)
-            if input_data_all is not None:
-                try:
-                    #is_changed = class_def.IS_CHANGED(**input_data_all)
-                    is_changed = map_node_over_list(class_def, input_data_all, "IS_CHANGED")
-                    prompt[unique_id]['is_changed'] = is_changed
-                except:
-                    to_delete = True
-        else:
-            is_changed = prompt[unique_id]['is_changed']
-
-    if unique_id not in outputs:
-        return True
-
-    if not to_delete:
-        if is_changed != is_changed_old:
-            to_delete = True
-        elif unique_id not in old_prompt:
-            to_delete = True
-        elif class_type != old_prompt[unique_id]['class_type']:
-            to_delete = True
-        elif inputs == old_prompt[unique_id]['inputs']:
-            for x in inputs:
-                input_data = inputs[x]
-
-                if isinstance(input_data, list):
-                    input_unique_id = input_data[0]
-                    output_index = input_data[1]
-                    if input_unique_id in outputs:
-                        to_delete = recursive_output_delete_if_changed(prompt, old_prompt, outputs, input_unique_id)
-                    else:
-                        to_delete = True
-                    if to_delete:
-                        break
-        else:
-            to_delete = True
-
-    if to_delete:
-        d = outputs.pop(unique_id)
-        del d
-    return to_delete
 
 class PromptExecutor:
-    def __init__(self, server):
+    def __init__(self, server, lru_size=None):
+        self.lru_size = lru_size
         self.server = server
         self.reset()
 
     def reset(self):
-        self.outputs = {}
+        self.caches = CacheSet(self.lru_size)
-        self.object_storage = {}
-        self.outputs_ui = {}
         self.status_messages = []
         self.success = True
-        self.old_prompt = {}
 
     def add_message(self, event, data: dict, broadcast: bool):
         data = {
@@ -318,27 +439,14 @@ class PromptExecutor:
                 "node_id": node_id,
                 "node_type": class_type,
                 "executed": list(executed),
-
                 "exception_message": error["exception_message"],
                 "exception_type": error["exception_type"],
                 "traceback": error["traceback"],
                 "current_inputs": error["current_inputs"],
-                "current_outputs": error["current_outputs"],
+                "current_outputs": list(current_outputs),
             }
             self.add_message("execution_error", mes, broadcast=False)
         
-        # Next, remove the subsequent outputs since they will not be executed
-        to_delete = []
-        for o in self.outputs:
-            if (o not in current_outputs) and (o not in executed):
-                to_delete += [o]
-                if o in self.old_prompt:
-                    d = self.old_prompt.pop(o)
-                    del d
-        for o in to_delete:
-            d = self.outputs.pop(o)
-            del d
-
     def execute(self, prompt, prompt_id, extra_data={}, execute_outputs=[]):
         nodes.interrupt_processing(False)
 
@@ -351,65 +459,58 @@ class PromptExecutor:
         self.add_message("execution_start", { "prompt_id": prompt_id}, broadcast=False)
 
         with torch.inference_mode():
-            #delete cached outputs if nodes don't exist for them
+            dynamic_prompt = DynamicPrompt(prompt)
-            to_delete = []
+            is_changed_cache = IsChangedCache(dynamic_prompt, self.caches.outputs)
-            for o in self.outputs:
+            for cache in self.caches.all:
-                if o not in prompt:
+                cache.set_prompt(dynamic_prompt, prompt.keys(), is_changed_cache)
-                    to_delete += [o]
+                cache.clean_unused()
-            for o in to_delete:
-                d = self.outputs.pop(o)
-                del d
-            to_delete = []
-            for o in self.object_storage:
-                if o[0] not in prompt:
-                    to_delete += [o]
-                else:
-                    p = prompt[o[0]]
-                    if o[1] != p['class_type']:
-                        to_delete += [o]
-            for o in to_delete:
-                d = self.object_storage.pop(o)
-                del d
 
-            for x in prompt:
+            cached_nodes = []
-                recursive_output_delete_if_changed(prompt, self.old_prompt, self.outputs, x)
+            for node_id in prompt:
-
+                if self.caches.outputs.get(node_id) is not None:
-            current_outputs = set(self.outputs.keys())
+                    cached_nodes.append(node_id)
-            for x in list(self.outputs_ui.keys()):
-                if x not in current_outputs:
-                    d = self.outputs_ui.pop(x)
-                    del d
 
             comfy.model_management.cleanup_models(keep_clone_weights_loaded=True)
             self.add_message("execution_cached",
-                          { "nodes": list(current_outputs) , "prompt_id": prompt_id},
+                          { "nodes": cached_nodes, "prompt_id": prompt_id},
                           broadcast=False)
+            pending_subgraph_results = {}
             executed = set()
-            output_node_id = None
+            execution_list = ExecutionList(dynamic_prompt, self.caches.outputs)
-            to_execute = []
+            current_outputs = self.caches.outputs.all_node_ids()
-
             for node_id in list(execute_outputs):
-                to_execute += [(0, node_id)]
+                execution_list.add_node(node_id)
 
-            while len(to_execute) > 0:
+            while not execution_list.is_empty():
-                #always execute the output that depends on the least amount of unexecuted nodes first
+                node_id, error, ex = execution_list.stage_node_execution()
-                memo = {}
+                if error is not None:
-                to_execute = sorted(list(map(lambda a: (len(recursive_will_execute(prompt, self.outputs, a[-1], memo)), a[-1]), to_execute)))
+                    self.handle_execution_error(prompt_id, dynamic_prompt.original_prompt, current_outputs, executed, error, ex)
-                output_node_id = to_execute.pop(0)[-1]
-
-                # This call shouldn't raise anything if there's an error deep in
-                # the actual SD code, instead it will report the node where the
-                # error was raised
-                self.success, error, ex = recursive_execute(self.server, prompt, self.outputs, output_node_id, extra_data, executed, prompt_id, self.outputs_ui, self.object_storage)
-                if self.success is not True:
-                    self.handle_execution_error(prompt_id, prompt, current_outputs, executed, error, ex)
                     break
+
+                result, error, ex = execute(self.server, dynamic_prompt, self.caches, node_id, extra_data, executed, prompt_id, execution_list, pending_subgraph_results)
+                if result == ExecutionResult.FAILURE:
+                    self.handle_execution_error(prompt_id, dynamic_prompt.original_prompt, current_outputs, executed, error, ex)
+                    break
+                elif result == ExecutionResult.PENDING:
+                    execution_list.unstage_node_execution()
+                else: # result == ExecutionResult.SUCCESS:
+                    execution_list.complete_node_execution()
             else:
                 # Only execute when the while-loop ends without break
                 self.add_message("execution_success", { "prompt_id": prompt_id }, broadcast=False)
 
-            for x in executed:
+            ui_outputs = {}
-                self.old_prompt[x] = copy.deepcopy(prompt[x])
+            meta_outputs = {}
+            all_node_ids = self.caches.ui.all_node_ids()
+            for node_id in all_node_ids:
+                ui_info = self.caches.ui.get(node_id)
+                if ui_info is not None:
+                    ui_outputs[node_id] = ui_info["output"]
+                    meta_outputs[node_id] = ui_info["meta"]
+            self.history_result = {
+                "outputs": ui_outputs,
+                "meta": meta_outputs,
+            }
             self.server.last_node_id = None
             if comfy.model_management.DISABLE_SMART_MEMORY:
                 comfy.model_management.unload_all_models()
@@ -426,31 +527,37 @@ def validate_inputs(prompt, item, validated):
     obj_class = nodes.NODE_CLASS_MAPPINGS[class_type]
 
     class_inputs = obj_class.INPUT_TYPES()
-    required_inputs = class_inputs['required']
+    valid_inputs = set(class_inputs.get('required',{})).union(set(class_inputs.get('optional',{})))
 
     errors = []
     valid = True
 
     validate_function_inputs = []
+    validate_has_kwargs = False
     if hasattr(obj_class, "VALIDATE_INPUTS"):
-        validate_function_inputs = inspect.getfullargspec(obj_class.VALIDATE_INPUTS).args
+        argspec = inspect.getfullargspec(obj_class.VALIDATE_INPUTS)
+        validate_function_inputs = argspec.args
+        validate_has_kwargs = argspec.varkw is not None
+    received_types = {}
 
-    for x in required_inputs:
+    for x in valid_inputs:
+        type_input, input_category, extra_info = get_input_info(obj_class, x)
+        assert extra_info is not None
         if x not in inputs:
-            error = {
+            if input_category == "required":
-                "type": "required_input_missing",
+                error = {
-                "message": "Required input is missing",
+                    "type": "required_input_missing",
-                "details": f"{x}",
+                    "message": "Required input is missing",
-                "extra_info": {
+                    "details": f"{x}",
-                    "input_name": x
+                    "extra_info": {
+                        "input_name": x
+                    }
                 }
-            }
+                errors.append(error)
-            errors.append(error)
             continue
 
         val = inputs[x]
-        info = required_inputs[x]
+        info = (type_input, extra_info)
-        type_input = info[0]
         if isinstance(val, list):
             if len(val) != 2:
                 error = {
@@ -469,8 +576,9 @@ def validate_inputs(prompt, item, validated):
             o_id = val[0]
             o_class_type = prompt[o_id]['class_type']
             r = nodes.NODE_CLASS_MAPPINGS[o_class_type].RETURN_TYPES
-            if r[val[1]] != type_input:
+            received_type = r[val[1]]
-                received_type = r[val[1]]
+            received_types[x] = received_type
+            if 'input_types' not in validate_function_inputs and received_type != type_input:
                 details = f"{x}, {received_type} != {type_input}"
                 error = {
                     "type": "return_type_mismatch",
@@ -521,6 +629,9 @@ def validate_inputs(prompt, item, validated):
                 if type_input == "STRING":
                     val = str(val)
                     inputs[x] = val
+                if type_input == "BOOLEAN":
+                    val = bool(val)
+                    inputs[x] = val
             except Exception as ex:
                 error = {
                     "type": "invalid_input_type",
@@ -536,11 +647,11 @@ def validate_inputs(prompt, item, validated):
                 errors.append(error)
                 continue
 
-            if len(info) > 1:
+            if x not in validate_function_inputs and not validate_has_kwargs:
-                if "min" in info[1] and val < info[1]["min"]:
+                if "min" in extra_info and val < extra_info["min"]:
                     error = {
                         "type": "value_smaller_than_min",
-                        "message": "Value {} smaller than min of {}".format(val, info[1]["min"]),
+                        "message": "Value {} smaller than min of {}".format(val, extra_info["min"]),
                         "details": f"{x}",
                         "extra_info": {
                             "input_name": x,
@@ -550,10 +661,10 @@ def validate_inputs(prompt, item, validated):
                     }
                     errors.append(error)
                     continue
-                if "max" in info[1] and val > info[1]["max"]:
+                if "max" in extra_info and val > extra_info["max"]:
                     error = {
                         "type": "value_bigger_than_max",
-                        "message": "Value {} bigger than max of {}".format(val, info[1]["max"]),
+                        "message": "Value {} bigger than max of {}".format(val, extra_info["max"]),
                         "details": f"{x}",
                         "extra_info": {
                             "input_name": x,
@@ -564,7 +675,6 @@ def validate_inputs(prompt, item, validated):
                     errors.append(error)
                     continue
 
-            if x not in validate_function_inputs:
                 if isinstance(type_input, list):
                     if val not in type_input:
                         input_config = info
@@ -591,18 +701,20 @@ def validate_inputs(prompt, item, validated):
                         errors.append(error)
                         continue
 
-    if len(validate_function_inputs) > 0:
+    if len(validate_function_inputs) > 0 or validate_has_kwargs:
-        input_data_all = get_input_data(inputs, obj_class, unique_id)
+        input_data_all, _ = get_input_data(inputs, obj_class, unique_id)
         input_filtered = {}
         for x in input_data_all:
-            if x in validate_function_inputs:
+            if x in validate_function_inputs or validate_has_kwargs:
                 input_filtered[x] = input_data_all[x]
+        if 'input_types' in validate_function_inputs:
+            input_filtered['input_types'] = [received_types]
 
         #ret = obj_class.VALIDATE_INPUTS(**input_filtered)
         ret = map_node_over_list(obj_class, input_filtered, "VALIDATE_INPUTS")
         for x in input_filtered:
             for i, r in enumerate(ret):
-                if r is not True:
+                if r is not True and not isinstance(r, ExecutionBlocker):
                     details = f"{x}"
                     if r is not False:
                         details += f" - {str(r)}"
@@ -613,8 +725,6 @@ def validate_inputs(prompt, item, validated):
                         "details": details,
                         "extra_info": {
                             "input_name": x,
-                            "input_config": info,
-                            "received_value": val,
                         }
                     }
                     errors.append(error)
@@ -780,7 +890,7 @@ class PromptQueue:
         completed: bool
         messages: List[str]
 
-    def task_done(self, item_id, outputs,
+    def task_done(self, item_id, history_result,
                   status: Optional['PromptQueue.ExecutionStatus']):
         with self.mutex:
             prompt = self.currently_running.pop(item_id)
@@ -793,9 +903,10 @@ class PromptQueue:
 
             self.history[prompt[1]] = {
                 "prompt": prompt,
-                "outputs": copy.deepcopy(outputs),
+                "outputs": {},
                 'status': status_dict,
             }
+            self.history[prompt[1]].update(history_result)
             self.server.queue_updated()
 
     def get_current_queue(self):

main.py

@@ -101,7 +101,7 @@ def cuda_malloc_warning():
             logging.warning("\nWARNING: this card most likely does not support cuda-malloc, if you get \"CUDA error\" please run ComfyUI with: --disable-cuda-malloc\n")
 
 def prompt_worker(q, server):
-    e = execution.PromptExecutor(server)
+    e = execution.PromptExecutor(server, lru_size=args.cache_lru)
     last_gc_collect = 0
     need_gc = False
     gc_collect_interval = 10.0
@@ -121,7 +121,7 @@ def prompt_worker(q, server):
             e.execute(item[2], prompt_id, item[3], item[4])
             need_gc = True
             q.task_done(item_id,
-                        e.outputs_ui,
+                        e.history_result,
                         status=execution.PromptQueue.ExecutionStatus(
                             status_str='success' if e.success else 'error',
                             completed=e.success,

pytest.ini

@@ -1,6 +1,7 @@
 [pytest]
 markers = 
   inference: mark as inference test (deselect with '-m "not inference"')
+  execution: mark as execution test (deselect with '-m "not execution"')
 testpaths =
   tests
   tests-unit

server.py

@@ -423,6 +423,7 @@ class PromptServer():
             obj_class = nodes.NODE_CLASS_MAPPINGS[node_class]
             info = {}
             info['input'] = obj_class.INPUT_TYPES()
+            info['input_order'] = {key: list(value.keys()) for (key, value) in obj_class.INPUT_TYPES().items()}
             info['output'] = obj_class.RETURN_TYPES
             info['output_is_list'] = obj_class.OUTPUT_IS_LIST if hasattr(obj_class, 'OUTPUT_IS_LIST') else [False] * len(obj_class.RETURN_TYPES)
             info['output_name'] = obj_class.RETURN_NAMES if hasattr(obj_class, 'RETURN_NAMES') else info['output']
@@ -714,6 +715,9 @@ class PromptServer():
         site = web.TCPSite(runner, address, port, ssl_context=ssl_ctx)
         await site.start()
 
+        self.address = address
+        self.port = port
+
         if verbose:
             logging.info("Starting server\n")
             logging.info("To see the GUI go to: {}://{}:{}".format(scheme, address, port))

tests/inference/extra_model_paths.yaml

@@ -0,0 +1,4 @@
+# Config for testing nodes
+testing:
+    custom_nodes: tests/inference/testing_nodes
+

tests/inference/test_execution.py

@@ -0,0 +1,461 @@
+from io import BytesIO
+import numpy
+from PIL import Image
+import pytest
+from pytest import fixture
+import time
+import torch
+from typing import Union, Dict
+import json
+import subprocess
+import websocket #NOTE: websocket-client (https://github.com/websocket-client/websocket-client)
+import uuid
+import urllib.request
+import urllib.parse
+import urllib.error
+from comfy_execution.graph_utils import GraphBuilder, Node
+
+class RunResult:
+    def __init__(self, prompt_id: str):
+        self.outputs: Dict[str,Dict] = {}
+        self.runs: Dict[str,bool] = {}
+        self.prompt_id: str = prompt_id
+
+    def get_output(self, node: Node):
+        return self.outputs.get(node.id, None)
+
+    def did_run(self, node: Node):
+        return self.runs.get(node.id, False)
+
+    def get_images(self, node: Node):
+        output = self.get_output(node)
+        if output is None:
+            return []
+        return output.get('image_objects', [])
+
+    def get_prompt_id(self):
+        return self.prompt_id
+
+class ComfyClient:
+    def __init__(self):
+        self.test_name = ""
+
+    def connect(self, 
+                    listen:str = '127.0.0.1', 
+                    port:Union[str,int] = 8188,
+                    client_id: str = str(uuid.uuid4())
+                    ):
+        self.client_id = client_id
+        self.server_address = f"{listen}:{port}"
+        ws = websocket.WebSocket()
+        ws.connect("ws://{}/ws?clientId={}".format(self.server_address, self.client_id))
+        self.ws = ws
+
+    def queue_prompt(self, prompt):
+        p = {"prompt": prompt, "client_id": self.client_id}
+        data = json.dumps(p).encode('utf-8')
+        req =  urllib.request.Request("http://{}/prompt".format(self.server_address), data=data)
+        return json.loads(urllib.request.urlopen(req).read())
+
+    def get_image(self, filename, subfolder, folder_type):
+        data = {"filename": filename, "subfolder": subfolder, "type": folder_type}
+        url_values = urllib.parse.urlencode(data)
+        with urllib.request.urlopen("http://{}/view?{}".format(self.server_address, url_values)) as response:
+            return response.read()
+
+    def get_history(self, prompt_id):
+        with urllib.request.urlopen("http://{}/history/{}".format(self.server_address, prompt_id)) as response:
+            return json.loads(response.read())
+
+    def set_test_name(self, name):
+        self.test_name = name
+
+    def run(self, graph):
+        prompt = graph.finalize()
+        for node in graph.nodes.values():
+            if node.class_type == 'SaveImage':
+                node.inputs['filename_prefix'] = self.test_name
+
+        prompt_id = self.queue_prompt(prompt)['prompt_id']
+        result = RunResult(prompt_id)
+        while True:
+            out = self.ws.recv()
+            if isinstance(out, str):
+                message = json.loads(out)
+                if message['type'] == 'executing':
+                    data = message['data']
+                    if data['prompt_id'] != prompt_id:
+                        continue
+                    if data['node'] is None:
+                        break
+                    result.runs[data['node']] = True
+                elif message['type'] == 'execution_error':
+                    raise Exception(message['data'])
+                elif message['type'] == 'execution_cached':
+                    pass # Probably want to store this off for testing
+
+        history = self.get_history(prompt_id)[prompt_id]
+        for o in history['outputs']:
+            for node_id in history['outputs']:
+                node_output = history['outputs'][node_id]
+                result.outputs[node_id] = node_output
+                if 'images' in node_output:
+                    images_output = []
+                    for image in node_output['images']:
+                        image_data = self.get_image(image['filename'], image['subfolder'], image['type'])
+                        image_obj = Image.open(BytesIO(image_data))
+                        images_output.append(image_obj)
+                    node_output['image_objects'] = images_output
+
+        return result
+
+#
+# Loop through these variables
+#
+@pytest.mark.execution
+class TestExecution:
+    #
+    # Initialize server and client
+    #
+    @fixture(scope="class", autouse=True, params=[
+        # (use_lru, lru_size)
+        (False, 0),
+        (True, 0),
+        (True, 100),
+    ])
+    def _server(self, args_pytest, request):
+        # Start server
+        pargs = [
+            'python','main.py', 
+            '--output-directory', args_pytest["output_dir"],
+            '--listen', args_pytest["listen"],
+            '--port', str(args_pytest["port"]),
+            '--extra-model-paths-config', 'tests/inference/extra_model_paths.yaml',
+        ]
+        use_lru, lru_size = request.param
+        if use_lru:
+            pargs += ['--cache-lru', str(lru_size)]
+        print("Running server with args:", pargs)
+        p = subprocess.Popen(pargs)
+        yield
+        p.kill()
+        torch.cuda.empty_cache()
+
+    def start_client(self, listen:str, port:int):
+        # Start client
+        comfy_client = ComfyClient()
+        # Connect to server (with retries)
+        n_tries = 5
+        for i in range(n_tries):
+            time.sleep(4)
+            try:
+                comfy_client.connect(listen=listen, port=port)
+            except ConnectionRefusedError as e:
+                print(e)
+                print(f"({i+1}/{n_tries}) Retrying...")
+            else:
+                break
+        return comfy_client
+
+    @fixture(scope="class", autouse=True)
+    def shared_client(self, args_pytest, _server):
+        client = self.start_client(args_pytest["listen"], args_pytest["port"])
+        yield client
+        del client
+        torch.cuda.empty_cache()
+
+    @fixture
+    def client(self, shared_client, request):
+        shared_client.set_test_name(f"execution[{request.node.name}]")
+        yield shared_client
+
+    @fixture
+    def builder(self, request):
+        yield GraphBuilder(prefix=request.node.name)
+
+    def test_lazy_input(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        input1 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+        input2 = g.node("StubImage", content="WHITE", height=512, width=512, batch_size=1)
+        mask = g.node("StubMask", value=0.0, height=512, width=512, batch_size=1)
+
+        lazy_mix = g.node("TestLazyMixImages", image1=input1.out(0), image2=input2.out(0), mask=mask.out(0))
+        output = g.node("SaveImage", images=lazy_mix.out(0))
+        result = client.run(g)
+
+        result_image = result.get_images(output)[0]
+        assert numpy.array(result_image).any() == 0, "Image should be black"
+        assert result.did_run(input1)
+        assert not result.did_run(input2)
+        assert result.did_run(mask)
+        assert result.did_run(lazy_mix)
+
+    def test_full_cache(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        input1 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+        input2 = g.node("StubImage", content="NOISE", height=512, width=512, batch_size=1)
+        mask = g.node("StubMask", value=0.5, height=512, width=512, batch_size=1)
+
+        lazy_mix = g.node("TestLazyMixImages", image1=input1.out(0), image2=input2.out(0), mask=mask.out(0))
+        g.node("SaveImage", images=lazy_mix.out(0))
+
+        client.run(g)
+        result2 = client.run(g)
+        for node_id, node in g.nodes.items():
+            assert not result2.did_run(node), f"Node {node_id} ran, but should have been cached"
+
+    def test_partial_cache(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        input1 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+        input2 = g.node("StubImage", content="NOISE", height=512, width=512, batch_size=1)
+        mask = g.node("StubMask", value=0.5, height=512, width=512, batch_size=1)
+
+        lazy_mix = g.node("TestLazyMixImages", image1=input1.out(0), image2=input2.out(0), mask=mask.out(0))
+        g.node("SaveImage", images=lazy_mix.out(0))
+
+        client.run(g)
+        mask.inputs['value'] = 0.4
+        result2 = client.run(g)
+        assert not result2.did_run(input1), "Input1 should have been cached"
+        assert not result2.did_run(input2), "Input2 should have been cached"
+
+    def test_error(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        input1 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+        # Different size of the two images
+        input2 = g.node("StubImage", content="NOISE", height=256, width=256, batch_size=1)
+        mask = g.node("StubMask", value=0.5, height=512, width=512, batch_size=1)
+
+        lazy_mix = g.node("TestLazyMixImages", image1=input1.out(0), image2=input2.out(0), mask=mask.out(0))
+        g.node("SaveImage", images=lazy_mix.out(0))
+
+        try:
+            client.run(g)
+            assert False, "Should have raised an error"
+        except Exception as e:
+            assert 'prompt_id' in e.args[0], f"Did not get back a proper error message: {e}"
+
+    @pytest.mark.parametrize("test_value, expect_error", [
+        (5, True),
+        ("foo", True),
+        (5.0, False),
+    ])
+    def test_validation_error_literal(self, test_value, expect_error, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        validation1 = g.node("TestCustomValidation1", input1=test_value, input2=3.0)
+        g.node("SaveImage", images=validation1.out(0))
+
+        if expect_error:
+            with pytest.raises(urllib.error.HTTPError):
+                client.run(g)
+        else:
+            client.run(g)
+
+    @pytest.mark.parametrize("test_type, test_value", [
+        ("StubInt", 5),
+        ("StubFloat", 5.0)
+    ])
+    def test_validation_error_edge1(self, test_type, test_value, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        stub = g.node(test_type, value=test_value)
+        validation1 = g.node("TestCustomValidation1", input1=stub.out(0), input2=3.0)
+        g.node("SaveImage", images=validation1.out(0))
+
+        with pytest.raises(urllib.error.HTTPError):
+            client.run(g)
+
+    @pytest.mark.parametrize("test_type, test_value, expect_error", [
+        ("StubInt", 5, True),
+        ("StubFloat", 5.0, False)
+    ])
+    def test_validation_error_edge2(self, test_type, test_value, expect_error, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        stub = g.node(test_type, value=test_value)
+        validation2 = g.node("TestCustomValidation2", input1=stub.out(0), input2=3.0)
+        g.node("SaveImage", images=validation2.out(0))
+
+        if expect_error:
+            with pytest.raises(urllib.error.HTTPError):
+                client.run(g)
+        else:
+            client.run(g)
+
+    @pytest.mark.parametrize("test_type, test_value, expect_error", [
+        ("StubInt", 5, True),
+        ("StubFloat", 5.0, False)
+    ])
+    def test_validation_error_edge3(self, test_type, test_value, expect_error, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        stub = g.node(test_type, value=test_value)
+        validation3 = g.node("TestCustomValidation3", input1=stub.out(0), input2=3.0)
+        g.node("SaveImage", images=validation3.out(0))
+
+        if expect_error:
+            with pytest.raises(urllib.error.HTTPError):
+                client.run(g)
+        else:
+            client.run(g)
+
+    @pytest.mark.parametrize("test_type, test_value, expect_error", [
+        ("StubInt", 5, True),
+        ("StubFloat", 5.0, False)
+    ])
+    def test_validation_error_edge4(self, test_type, test_value, expect_error, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        stub = g.node(test_type, value=test_value)
+        validation4 = g.node("TestCustomValidation4", input1=stub.out(0), input2=3.0)
+        g.node("SaveImage", images=validation4.out(0))
+
+        if expect_error:
+            with pytest.raises(urllib.error.HTTPError):
+                client.run(g)
+        else:
+            client.run(g)
+
+    @pytest.mark.parametrize("test_value1, test_value2, expect_error", [
+        (0.0, 0.5, False),
+        (0.0, 5.0, False),
+        (0.0, 7.0, True)
+    ])
+    def test_validation_error_kwargs(self, test_value1, test_value2, expect_error, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        validation5 = g.node("TestCustomValidation5", input1=test_value1, input2=test_value2)
+        g.node("SaveImage", images=validation5.out(0))
+
+        if expect_error:
+            with pytest.raises(urllib.error.HTTPError):
+                client.run(g)
+        else:
+            client.run(g)
+
+    def test_cycle_error(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        input1 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+        input2 = g.node("StubImage", content="WHITE", height=512, width=512, batch_size=1)
+        mask = g.node("StubMask", value=0.5, height=512, width=512, batch_size=1)
+
+        lazy_mix1 = g.node("TestLazyMixImages", image1=input1.out(0), mask=mask.out(0))
+        lazy_mix2 = g.node("TestLazyMixImages", image1=lazy_mix1.out(0), image2=input2.out(0), mask=mask.out(0))
+        g.node("SaveImage", images=lazy_mix2.out(0))
+
+        # When the cycle exists on initial submission, it should raise a validation error
+        with pytest.raises(urllib.error.HTTPError):
+            client.run(g)
+
+    def test_dynamic_cycle_error(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        input1 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+        input2 = g.node("StubImage", content="WHITE", height=512, width=512, batch_size=1)
+        generator = g.node("TestDynamicDependencyCycle", input1=input1.out(0), input2=input2.out(0))
+        g.node("SaveImage", images=generator.out(0))
+
+        # When the cycle is in a graph that is generated dynamically, it should raise a runtime error
+        try:
+            client.run(g)
+            assert False, "Should have raised an error"
+        except Exception as e:
+            assert 'prompt_id' in e.args[0], f"Did not get back a proper error message: {e}"
+            assert e.args[0]['node_id'] == generator.id, "Error should have been on the generator node"
+
+    def test_custom_is_changed(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        # Creating the nodes in this specific order previously caused a bug
+        save = g.node("SaveImage")
+        is_changed = g.node("TestCustomIsChanged", should_change=False)
+        input1 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+
+        save.set_input('images', is_changed.out(0))
+        is_changed.set_input('image', input1.out(0))
+
+        result1 = client.run(g)
+        result2 = client.run(g)
+        is_changed.set_input('should_change', True)
+        result3 = client.run(g)
+        result4 = client.run(g)
+        assert result1.did_run(is_changed), "is_changed should have been run"
+        assert not result2.did_run(is_changed), "is_changed should have been cached"
+        assert result3.did_run(is_changed), "is_changed should have been re-run"
+        assert result4.did_run(is_changed), "is_changed should not have been cached"
+
+    def test_undeclared_inputs(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        input1 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+        input2 = g.node("StubImage", content="WHITE", height=512, width=512, batch_size=1)
+        input3 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+        input4 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+        average = g.node("TestVariadicAverage", input1=input1.out(0), input2=input2.out(0), input3=input3.out(0), input4=input4.out(0))
+        output = g.node("SaveImage", images=average.out(0))
+
+        result = client.run(g)
+        result_image = result.get_images(output)[0]
+        expected = 255 // 4
+        assert numpy.array(result_image).min() == expected and numpy.array(result_image).max() == expected, "Image should be grey"
+
+    def test_for_loop(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        iterations = 4
+        input1 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+        input2 = g.node("StubImage", content="WHITE", height=512, width=512, batch_size=1)
+        is_changed = g.node("TestCustomIsChanged", should_change=True, image=input2.out(0))
+        for_open = g.node("TestForLoopOpen", remaining=iterations, initial_value1=is_changed.out(0))
+        average = g.node("TestVariadicAverage", input1=input1.out(0), input2=for_open.out(2))
+        for_close = g.node("TestForLoopClose", flow_control=for_open.out(0), initial_value1=average.out(0))
+        output = g.node("SaveImage", images=for_close.out(0))
+
+        for iterations in range(1, 5):
+            for_open.set_input('remaining', iterations)
+            result = client.run(g)
+            result_image = result.get_images(output)[0]
+            expected = 255 // (2 ** iterations)
+            assert numpy.array(result_image).min() == expected and numpy.array(result_image).max() == expected, "Image should be grey"
+            assert result.did_run(is_changed)
+
+    def test_mixed_expansion_returns(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        val_list = g.node("TestMakeListNode", value1=0.1, value2=0.2, value3=0.3)
+        mixed = g.node("TestMixedExpansionReturns", input1=val_list.out(0))
+        output_dynamic = g.node("SaveImage", images=mixed.out(0))
+        output_literal = g.node("SaveImage", images=mixed.out(1))
+
+        result = client.run(g)
+        images_dynamic = result.get_images(output_dynamic)
+        assert len(images_dynamic) == 3, "Should have 2 images"
+        assert numpy.array(images_dynamic[0]).min() == 25 and numpy.array(images_dynamic[0]).max() == 25, "First image should be 0.1"
+        assert numpy.array(images_dynamic[1]).min() == 51 and numpy.array(images_dynamic[1]).max() == 51, "Second image should be 0.2"
+        assert numpy.array(images_dynamic[2]).min() == 76 and numpy.array(images_dynamic[2]).max() == 76, "Third image should be 0.3"
+
+        images_literal = result.get_images(output_literal)
+        assert len(images_literal) == 3, "Should have 2 images"
+        for i in range(3):
+            assert numpy.array(images_literal[i]).min() == 255 and numpy.array(images_literal[i]).max() == 255, "All images should be white"
+
+    def test_mixed_lazy_results(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        val_list = g.node("TestMakeListNode", value1=0.0, value2=0.5, value3=1.0)
+        mask = g.node("StubMask", value=val_list.out(0), height=512, width=512, batch_size=1)
+        input1 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+        input2 = g.node("StubImage", content="WHITE", height=512, width=512, batch_size=1)
+        mix = g.node("TestLazyMixImages", image1=input1.out(0), image2=input2.out(0), mask=mask.out(0))
+        rebatch = g.node("RebatchImages", images=mix.out(0), batch_size=3)
+        output = g.node("SaveImage", images=rebatch.out(0))
+
+        result = client.run(g)
+        images = result.get_images(output)
+        assert len(images) == 3, "Should have 3 image"
+        assert numpy.array(images[0]).min() == 0 and numpy.array(images[0]).max() == 0, "First image should be 0.0"
+        assert numpy.array(images[1]).min() == 127 and numpy.array(images[1]).max() == 127, "Second image should be 0.5"
+        assert numpy.array(images[2]).min() == 255 and numpy.array(images[2]).max() == 255, "Third image should be 1.0"
+
+    def test_output_reuse(self, client: ComfyClient, builder: GraphBuilder):
+        g = builder
+        input1 = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+
+        output1 = g.node("PreviewImage", images=input1.out(0))
+        output2 = g.node("PreviewImage", images=input1.out(0))
+
+        result = client.run(g)
+        images1 = result.get_images(output1)
+        images2 = result.get_images(output2)
+        assert len(images1) == 1, "Should have 1 image"
+        assert len(images2) == 1, "Should have 1 image"
+

tests/inference/testing_nodes/testing-pack/__init__.py

@@ -0,0 +1,23 @@
+from .specific_tests import TEST_NODE_CLASS_MAPPINGS, TEST_NODE_DISPLAY_NAME_MAPPINGS
+from .flow_control import FLOW_CONTROL_NODE_CLASS_MAPPINGS, FLOW_CONTROL_NODE_DISPLAY_NAME_MAPPINGS
+from .util import UTILITY_NODE_CLASS_MAPPINGS, UTILITY_NODE_DISPLAY_NAME_MAPPINGS
+from .conditions import CONDITION_NODE_CLASS_MAPPINGS, CONDITION_NODE_DISPLAY_NAME_MAPPINGS
+from .stubs import TEST_STUB_NODE_CLASS_MAPPINGS, TEST_STUB_NODE_DISPLAY_NAME_MAPPINGS
+
+# NODE_CLASS_MAPPINGS = GENERAL_NODE_CLASS_MAPPINGS.update(COMPONENT_NODE_CLASS_MAPPINGS)
+# NODE_DISPLAY_NAME_MAPPINGS = GENERAL_NODE_DISPLAY_NAME_MAPPINGS.update(COMPONENT_NODE_DISPLAY_NAME_MAPPINGS)
+
+NODE_CLASS_MAPPINGS = {}
+NODE_CLASS_MAPPINGS.update(TEST_NODE_CLASS_MAPPINGS)
+NODE_CLASS_MAPPINGS.update(FLOW_CONTROL_NODE_CLASS_MAPPINGS)
+NODE_CLASS_MAPPINGS.update(UTILITY_NODE_CLASS_MAPPINGS)
+NODE_CLASS_MAPPINGS.update(CONDITION_NODE_CLASS_MAPPINGS)
+NODE_CLASS_MAPPINGS.update(TEST_STUB_NODE_CLASS_MAPPINGS)
+
+NODE_DISPLAY_NAME_MAPPINGS = {}
+NODE_DISPLAY_NAME_MAPPINGS.update(TEST_NODE_DISPLAY_NAME_MAPPINGS)
+NODE_DISPLAY_NAME_MAPPINGS.update(FLOW_CONTROL_NODE_DISPLAY_NAME_MAPPINGS)
+NODE_DISPLAY_NAME_MAPPINGS.update(UTILITY_NODE_DISPLAY_NAME_MAPPINGS)
+NODE_DISPLAY_NAME_MAPPINGS.update(CONDITION_NODE_DISPLAY_NAME_MAPPINGS)
+NODE_DISPLAY_NAME_MAPPINGS.update(TEST_STUB_NODE_DISPLAY_NAME_MAPPINGS)
+

tests/inference/testing_nodes/testing-pack/conditions.py

@@ -0,0 +1,194 @@
+import re
+import torch
+
+class TestIntConditions:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "a": ("INT", {"default": 0, "min": -0xffffffffffffffff, "max": 0xffffffffffffffff, "step": 1}),
+                "b": ("INT", {"default": 0, "min": -0xffffffffffffffff, "max": 0xffffffffffffffff, "step": 1}),
+                "operation": (["==", "!=", "<", ">", "<=", ">="],),
+            },
+        }
+
+    RETURN_TYPES = ("BOOLEAN",)
+    FUNCTION = "int_condition"
+
+    CATEGORY = "Testing/Logic"
+
+    def int_condition(self, a, b, operation):
+        if operation == "==":
+            return (a == b,)
+        elif operation == "!=":
+            return (a != b,)
+        elif operation == "<":
+            return (a < b,)
+        elif operation == ">":
+            return (a > b,)
+        elif operation == "<=":
+            return (a <= b,)
+        elif operation == ">=":
+            return (a >= b,)
+
+
+class TestFloatConditions:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "a": ("FLOAT", {"default": 0, "min": -999999999999.0, "max": 999999999999.0, "step": 1}),
+                "b": ("FLOAT", {"default": 0, "min": -999999999999.0, "max": 999999999999.0, "step": 1}),
+                "operation": (["==", "!=", "<", ">", "<=", ">="],),
+            },
+        }
+
+    RETURN_TYPES = ("BOOLEAN",)
+    FUNCTION = "float_condition"
+
+    CATEGORY = "Testing/Logic"
+
+    def float_condition(self, a, b, operation):
+        if operation == "==":
+            return (a == b,)
+        elif operation == "!=":
+            return (a != b,)
+        elif operation == "<":
+            return (a < b,)
+        elif operation == ">":
+            return (a > b,)
+        elif operation == "<=":
+            return (a <= b,)
+        elif operation == ">=":
+            return (a >= b,)
+
+class TestStringConditions:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "a": ("STRING", {"multiline": False}),
+                "b": ("STRING", {"multiline": False}),
+                "operation": (["a == b", "a != b", "a IN b", "a MATCH REGEX(b)", "a BEGINSWITH b", "a ENDSWITH b"],),
+                "case_sensitive": ("BOOLEAN", {"default": True}),
+            },
+        }
+
+    RETURN_TYPES = ("BOOLEAN",)
+    FUNCTION = "string_condition"
+
+    CATEGORY = "Testing/Logic"
+
+    def string_condition(self, a, b, operation, case_sensitive):
+        if not case_sensitive:
+            a = a.lower()
+            b = b.lower()
+
+        if operation == "a == b":
+            return (a == b,)
+        elif operation == "a != b":
+            return (a != b,)
+        elif operation == "a IN b":
+            return (a in b,)
+        elif operation == "a MATCH REGEX(b)":
+            try:
+                return (re.match(b, a) is not None,)
+            except:
+                return (False,)
+        elif operation == "a BEGINSWITH b":
+            return (a.startswith(b),)
+        elif operation == "a ENDSWITH b":
+            return (a.endswith(b),)
+
+class TestToBoolNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "value": ("*",),
+            },
+            "optional": {
+                "invert": ("BOOLEAN", {"default": False}),
+            },
+        }
+
+    RETURN_TYPES = ("BOOLEAN",)
+    FUNCTION = "to_bool"
+
+    CATEGORY = "Testing/Logic"
+
+    def to_bool(self, value, invert = False):
+        if isinstance(value, torch.Tensor):
+            if value.max().item() == 0 and value.min().item() == 0:
+                result = False
+            else:
+                result = True
+        else:
+            try:
+                result = bool(value)
+            except:
+                # Can't convert it? Well then it's something or other. I dunno, I'm not a Python programmer.
+                result = True
+
+        if invert:
+            result = not result
+
+        return (result,)
+
+class TestBoolOperationNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "a": ("BOOLEAN",),
+                "b": ("BOOLEAN",),
+                "op": (["a AND b", "a OR b", "a XOR b", "NOT a"],),
+            },
+        }
+
+    RETURN_TYPES = ("BOOLEAN",)
+    FUNCTION = "bool_operation"
+
+    CATEGORY = "Testing/Logic"
+
+    def bool_operation(self, a, b, op):
+        if op == "a AND b":
+            return (a and b,)
+        elif op == "a OR b":
+            return (a or b,)
+        elif op == "a XOR b":
+            return (a ^ b,)
+        elif op == "NOT a":
+            return (not a,)
+
+
+CONDITION_NODE_CLASS_MAPPINGS = {
+    "TestIntConditions": TestIntConditions,
+    "TestFloatConditions": TestFloatConditions,
+    "TestStringConditions": TestStringConditions,
+    "TestToBoolNode": TestToBoolNode,
+    "TestBoolOperationNode": TestBoolOperationNode,
+}
+
+CONDITION_NODE_DISPLAY_NAME_MAPPINGS = {
+    "TestIntConditions": "Int Condition",
+    "TestFloatConditions": "Float Condition",
+    "TestStringConditions": "String Condition",
+    "TestToBoolNode": "To Bool",
+    "TestBoolOperationNode": "Bool Operation",
+}

tests/inference/testing_nodes/testing-pack/flow_control.py

@@ -0,0 +1,173 @@
+from comfy_execution.graph_utils import GraphBuilder, is_link
+from comfy_execution.graph import ExecutionBlocker
+from .tools import VariantSupport
+
+NUM_FLOW_SOCKETS = 5
+@VariantSupport()
+class TestWhileLoopOpen:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        inputs = {
+            "required": {
+                "condition": ("BOOLEAN", {"default": True}),
+            },
+            "optional": {
+            },
+        }
+        for i in range(NUM_FLOW_SOCKETS):
+            inputs["optional"][f"initial_value{i}"] = ("*",)
+        return inputs
+
+    RETURN_TYPES = tuple(["FLOW_CONTROL"] + ["*"] * NUM_FLOW_SOCKETS)
+    RETURN_NAMES = tuple(["FLOW_CONTROL"] + [f"value{i}" for i in range(NUM_FLOW_SOCKETS)])
+    FUNCTION = "while_loop_open"
+
+    CATEGORY = "Testing/Flow"
+
+    def while_loop_open(self, condition, **kwargs):
+        values = []
+        for i in range(NUM_FLOW_SOCKETS):
+            values.append(kwargs.get(f"initial_value{i}", None))
+        return tuple(["stub"] + values)
+
+@VariantSupport()
+class TestWhileLoopClose:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        inputs = {
+            "required": {
+                "flow_control": ("FLOW_CONTROL", {"rawLink": True}),
+                "condition": ("BOOLEAN", {"forceInput": True}),
+            },
+            "optional": {
+            },
+            "hidden": {
+                "dynprompt": "DYNPROMPT",
+                "unique_id": "UNIQUE_ID",
+            }
+        }
+        for i in range(NUM_FLOW_SOCKETS):
+            inputs["optional"][f"initial_value{i}"] = ("*",)
+        return inputs
+
+    RETURN_TYPES = tuple(["*"] * NUM_FLOW_SOCKETS)
+    RETURN_NAMES = tuple([f"value{i}" for i in range(NUM_FLOW_SOCKETS)])
+    FUNCTION = "while_loop_close"
+
+    CATEGORY = "Testing/Flow"
+
+    def explore_dependencies(self, node_id, dynprompt, upstream):
+        node_info = dynprompt.get_node(node_id)
+        if "inputs" not in node_info:
+            return
+        for k, v in node_info["inputs"].items():
+            if is_link(v):
+                parent_id = v[0]
+                if parent_id not in upstream:
+                    upstream[parent_id] = []
+                    self.explore_dependencies(parent_id, dynprompt, upstream)
+                upstream[parent_id].append(node_id)
+
+    def collect_contained(self, node_id, upstream, contained):
+        if node_id not in upstream:
+            return
+        for child_id in upstream[node_id]:
+            if child_id not in contained:
+                contained[child_id] = True
+                self.collect_contained(child_id, upstream, contained)
+
+
+    def while_loop_close(self, flow_control, condition, dynprompt=None, unique_id=None, **kwargs):
+        assert dynprompt is not None
+        if not condition:
+            # We're done with the loop
+            values = []
+            for i in range(NUM_FLOW_SOCKETS):
+                values.append(kwargs.get(f"initial_value{i}", None))
+            return tuple(values)
+
+        # We want to loop
+        upstream = {}
+        # Get the list of all nodes between the open and close nodes
+        self.explore_dependencies(unique_id, dynprompt, upstream)
+
+        contained = {}
+        open_node = flow_control[0]
+        self.collect_contained(open_node, upstream, contained)
+        contained[unique_id] = True
+        contained[open_node] = True
+
+        # We'll use the default prefix, but to avoid having node names grow exponentially in size,
+        # we'll use "Recurse" for the name of the recursively-generated copy of this node.
+        graph = GraphBuilder()
+        for node_id in contained:
+            original_node = dynprompt.get_node(node_id)
+            node = graph.node(original_node["class_type"], "Recurse" if node_id == unique_id else node_id)
+            node.set_override_display_id(node_id)
+        for node_id in contained:
+            original_node = dynprompt.get_node(node_id)
+            node = graph.lookup_node("Recurse" if node_id == unique_id else node_id)
+            assert node is not None
+            for k, v in original_node["inputs"].items():
+                if is_link(v) and v[0] in contained:
+                    parent = graph.lookup_node(v[0])
+                    assert parent is not None
+                    node.set_input(k, parent.out(v[1]))
+                else:
+                    node.set_input(k, v)
+        new_open = graph.lookup_node(open_node)
+        assert new_open is not None
+        for i in range(NUM_FLOW_SOCKETS):
+            key = f"initial_value{i}"
+            new_open.set_input(key, kwargs.get(key, None))
+        my_clone = graph.lookup_node("Recurse")
+        assert my_clone is not None
+        result = map(lambda x: my_clone.out(x), range(NUM_FLOW_SOCKETS))
+        return {
+            "result": tuple(result),
+            "expand": graph.finalize(),
+        }
+
+@VariantSupport()
+class TestExecutionBlockerNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        inputs = {
+            "required": {
+                "input": ("*",),
+                "block": ("BOOLEAN",),
+                "verbose": ("BOOLEAN", {"default": False}),
+            },
+        }
+        return inputs
+
+    RETURN_TYPES = ("*",)
+    RETURN_NAMES = ("output",)
+    FUNCTION = "execution_blocker"
+
+    CATEGORY = "Testing/Flow"
+
+    def execution_blocker(self, input, block, verbose):
+        if block:
+            return (ExecutionBlocker("Blocked Execution" if verbose else None),)
+        return (input,)
+
+FLOW_CONTROL_NODE_CLASS_MAPPINGS = {
+    "TestWhileLoopOpen": TestWhileLoopOpen,
+    "TestWhileLoopClose": TestWhileLoopClose,
+    "TestExecutionBlocker": TestExecutionBlockerNode,
+}
+FLOW_CONTROL_NODE_DISPLAY_NAME_MAPPINGS = {
+    "TestWhileLoopOpen": "While Loop Open",
+    "TestWhileLoopClose": "While Loop Close",
+    "TestExecutionBlocker": "Execution Blocker",
+}

tests/inference/testing_nodes/testing-pack/specific_tests.py

@@ -0,0 +1,335 @@
+import torch
+from .tools import VariantSupport
+from comfy_execution.graph_utils import GraphBuilder
+
+class TestLazyMixImages:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "image1": ("IMAGE",{"lazy": True}),
+                "image2": ("IMAGE",{"lazy": True}),
+                "mask": ("MASK",),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "mix"
+
+    CATEGORY = "Testing/Nodes"
+
+    def check_lazy_status(self, mask, image1, image2):
+        mask_min = mask.min()
+        mask_max = mask.max()
+        needed = []
+        if image1 is None and (mask_min != 1.0 or mask_max != 1.0):
+            needed.append("image1")
+        if image2 is None and (mask_min != 0.0 or mask_max != 0.0):
+            needed.append("image2")
+        return needed
+
+    # Not trying to handle different batch sizes here just to keep the demo simple
+    def mix(self, mask, image1, image2):
+        mask_min = mask.min()
+        mask_max = mask.max()
+        if mask_min == 0.0 and mask_max == 0.0:
+            return (image1,)
+        elif mask_min == 1.0 and mask_max == 1.0:
+            return (image2,)
+
+        if len(mask.shape) == 2:
+            mask = mask.unsqueeze(0)
+        if len(mask.shape) == 3:
+            mask = mask.unsqueeze(3)
+        if mask.shape[3] < image1.shape[3]:
+            mask = mask.repeat(1, 1, 1, image1.shape[3])
+
+        result = image1 * (1. - mask) + image2 * mask,
+        return (result[0],)
+
+class TestVariadicAverage:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "input1": ("IMAGE",),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "variadic_average"
+
+    CATEGORY = "Testing/Nodes"
+
+    def variadic_average(self, input1, **kwargs):
+        inputs = [input1]
+        while 'input' + str(len(inputs) + 1) in kwargs:
+            inputs.append(kwargs['input' + str(len(inputs) + 1)])
+        return (torch.stack(inputs).mean(dim=0),)
+
+
+class TestCustomIsChanged:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "image": ("IMAGE",),
+            },
+            "optional": {
+                "should_change": ("BOOL", {"default": False}),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "custom_is_changed"
+
+    CATEGORY = "Testing/Nodes"
+
+    def custom_is_changed(self, image, should_change=False):
+        return (image,)
+    
+    @classmethod
+    def IS_CHANGED(cls, should_change=False, *args, **kwargs):
+        if should_change:
+            return float("NaN")
+        else:
+            return False
+
+class TestCustomValidation1:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "input1": ("IMAGE,FLOAT",),
+                "input2": ("IMAGE,FLOAT",),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "custom_validation1"
+
+    CATEGORY = "Testing/Nodes"
+
+    def custom_validation1(self, input1, input2):
+        if isinstance(input1, float) and isinstance(input2, float):
+            result = torch.ones([1, 512, 512, 3]) * input1 * input2
+        else:
+            result = input1 * input2
+        return (result,)
+
+    @classmethod
+    def VALIDATE_INPUTS(cls, input1=None, input2=None):
+        if input1 is not None:
+            if not isinstance(input1, (torch.Tensor, float)):
+                return f"Invalid type of input1: {type(input1)}"
+        if input2 is not None:
+            if not isinstance(input2, (torch.Tensor, float)):
+                return f"Invalid type of input2: {type(input2)}"
+
+        return True
+
+class TestCustomValidation2:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "input1": ("IMAGE,FLOAT",),
+                "input2": ("IMAGE,FLOAT",),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "custom_validation2"
+
+    CATEGORY = "Testing/Nodes"
+
+    def custom_validation2(self, input1, input2):
+        if isinstance(input1, float) and isinstance(input2, float):
+            result = torch.ones([1, 512, 512, 3]) * input1 * input2
+        else:
+            result = input1 * input2
+        return (result,)
+
+    @classmethod
+    def VALIDATE_INPUTS(cls, input_types, input1=None, input2=None):
+        if input1 is not None:
+            if not isinstance(input1, (torch.Tensor, float)):
+                return f"Invalid type of input1: {type(input1)}"
+        if input2 is not None:
+            if not isinstance(input2, (torch.Tensor, float)):
+                return f"Invalid type of input2: {type(input2)}"
+
+        if 'input1' in input_types:
+            if input_types['input1'] not in ["IMAGE", "FLOAT"]:
+                return f"Invalid type of input1: {input_types['input1']}"
+        if 'input2' in input_types:
+            if input_types['input2'] not in ["IMAGE", "FLOAT"]:
+                return f"Invalid type of input2: {input_types['input2']}"
+
+        return True
+
+@VariantSupport()
+class TestCustomValidation3:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "input1": ("IMAGE,FLOAT",),
+                "input2": ("IMAGE,FLOAT",),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "custom_validation3"
+
+    CATEGORY = "Testing/Nodes"
+
+    def custom_validation3(self, input1, input2):
+        if isinstance(input1, float) and isinstance(input2, float):
+            result = torch.ones([1, 512, 512, 3]) * input1 * input2
+        else:
+            result = input1 * input2
+        return (result,)
+
+class TestCustomValidation4:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "input1": ("FLOAT",),
+                "input2": ("FLOAT",),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "custom_validation4"
+
+    CATEGORY = "Testing/Nodes"
+
+    def custom_validation4(self, input1, input2):
+        result = torch.ones([1, 512, 512, 3]) * input1 * input2
+        return (result,)
+
+    @classmethod
+    def VALIDATE_INPUTS(cls, input1, input2):
+        if input1 is not None:
+            if not isinstance(input1, float):
+                return f"Invalid type of input1: {type(input1)}"
+        if input2 is not None:
+            if not isinstance(input2, float):
+                return f"Invalid type of input2: {type(input2)}"
+
+        return True
+
+class TestCustomValidation5:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "input1": ("FLOAT", {"min": 0.0, "max": 1.0}),
+                "input2": ("FLOAT", {"min": 0.0, "max": 1.0}),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "custom_validation5"
+
+    CATEGORY = "Testing/Nodes"
+
+    def custom_validation5(self, input1, input2):
+        value = input1 * input2
+        return (torch.ones([1, 512, 512, 3]) * value,)
+
+    @classmethod
+    def VALIDATE_INPUTS(cls, **kwargs):
+        if kwargs['input2'] == 7.0:
+            return "7s are not allowed. I've never liked 7s."
+        return True
+
+class TestDynamicDependencyCycle:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "input1": ("IMAGE",),
+                "input2": ("IMAGE",),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "dynamic_dependency_cycle"
+
+    CATEGORY = "Testing/Nodes"
+
+    def dynamic_dependency_cycle(self, input1, input2):
+        g = GraphBuilder()
+        mask = g.node("StubMask", value=0.5, height=512, width=512, batch_size=1)
+        mix1 = g.node("TestLazyMixImages", image1=input1, mask=mask.out(0))
+        mix2 = g.node("TestLazyMixImages", image1=mix1.out(0), image2=input2, mask=mask.out(0))
+
+        # Create the cyle
+        mix1.set_input("image2", mix2.out(0))
+
+        return {
+            "result": (mix2.out(0),),
+            "expand": g.finalize(),
+        }
+
+class TestMixedExpansionReturns:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "input1": ("FLOAT",),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE","IMAGE")
+    FUNCTION = "mixed_expansion_returns"
+
+    CATEGORY = "Testing/Nodes"
+
+    def mixed_expansion_returns(self, input1):
+        white_image = torch.ones([1, 512, 512, 3])
+        if input1 <= 0.1:
+            return (torch.ones([1, 512, 512, 3]) * 0.1, white_image)
+        elif input1 <= 0.2:
+            return {
+                "result": (torch.ones([1, 512, 512, 3]) * 0.2, white_image),
+            }
+        else:
+            g = GraphBuilder()
+            mask = g.node("StubMask", value=0.3, height=512, width=512, batch_size=1)
+            black = g.node("StubImage", content="BLACK", height=512, width=512, batch_size=1)
+            white = g.node("StubImage", content="WHITE", height=512, width=512, batch_size=1)
+            mix = g.node("TestLazyMixImages", image1=black.out(0), image2=white.out(0), mask=mask.out(0))
+            return {
+                "result": (mix.out(0), white_image),
+                "expand": g.finalize(),
+            }
+
+TEST_NODE_CLASS_MAPPINGS = {
+    "TestLazyMixImages": TestLazyMixImages,
+    "TestVariadicAverage": TestVariadicAverage,
+    "TestCustomIsChanged": TestCustomIsChanged,
+    "TestCustomValidation1": TestCustomValidation1,
+    "TestCustomValidation2": TestCustomValidation2,
+    "TestCustomValidation3": TestCustomValidation3,
+    "TestCustomValidation4": TestCustomValidation4,
+    "TestCustomValidation5": TestCustomValidation5,
+    "TestDynamicDependencyCycle": TestDynamicDependencyCycle,
+    "TestMixedExpansionReturns": TestMixedExpansionReturns,
+}
+
+TEST_NODE_DISPLAY_NAME_MAPPINGS = {
+    "TestLazyMixImages": "Lazy Mix Images",
+    "TestVariadicAverage": "Variadic Average",
+    "TestCustomIsChanged": "Custom IsChanged",
+    "TestCustomValidation1": "Custom Validation 1",
+    "TestCustomValidation2": "Custom Validation 2",
+    "TestCustomValidation3": "Custom Validation 3",
+    "TestCustomValidation4": "Custom Validation 4",
+    "TestCustomValidation5": "Custom Validation 5",
+    "TestDynamicDependencyCycle": "Dynamic Dependency Cycle",
+    "TestMixedExpansionReturns": "Mixed Expansion Returns",
+}

tests/inference/testing_nodes/testing-pack/stubs.py

@@ -0,0 +1,105 @@
+import torch
+
+class StubImage:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "content": (['WHITE', 'BLACK', 'NOISE'],),
+                "height": ("INT", {"default": 512, "min": 1, "max": 1024 ** 3, "step": 1}),
+                "width": ("INT", {"default": 512, "min": 1, "max": 4096 ** 3, "step": 1}),
+                "batch_size": ("INT", {"default": 1, "min": 1, "max": 1024 ** 3, "step": 1}),
+            },
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "stub_image"
+
+    CATEGORY = "Testing/Stub Nodes"
+
+    def stub_image(self, content, height, width, batch_size):
+        if content == "WHITE":
+            return (torch.ones(batch_size, height, width, 3),)
+        elif content == "BLACK":
+            return (torch.zeros(batch_size, height, width, 3),)
+        elif content == "NOISE":
+            return (torch.rand(batch_size, height, width, 3),)
+
+class StubMask:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "value": ("FLOAT", {"default": 0.5, "min": 0.0, "max": 1.0, "step": 0.01}),
+                "height": ("INT", {"default": 512, "min": 1, "max": 1024 ** 3, "step": 1}),
+                "width": ("INT", {"default": 512, "min": 1, "max": 4096 ** 3, "step": 1}),
+                "batch_size": ("INT", {"default": 1, "min": 1, "max": 1024 ** 3, "step": 1}),
+            },
+        }
+
+    RETURN_TYPES = ("MASK",)
+    FUNCTION = "stub_mask"
+
+    CATEGORY = "Testing/Stub Nodes"
+
+    def stub_mask(self, value, height, width, batch_size):
+        return (torch.ones(batch_size, height, width) * value,)
+
+class StubInt:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "value": ("INT", {"default": 0, "min": -0xffffffff, "max": 0xffffffff, "step": 1}),
+            },
+        }
+
+    RETURN_TYPES = ("INT",)
+    FUNCTION = "stub_int"
+
+    CATEGORY = "Testing/Stub Nodes"
+
+    def stub_int(self, value):
+        return (value,)
+
+class StubFloat:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "value": ("FLOAT", {"default": 0.0, "min": -1.0e38, "max": 1.0e38, "step": 0.01}),
+            },
+        }
+
+    RETURN_TYPES = ("FLOAT",)
+    FUNCTION = "stub_float"
+
+    CATEGORY = "Testing/Stub Nodes"
+
+    def stub_float(self, value):
+        return (value,)
+
+TEST_STUB_NODE_CLASS_MAPPINGS = {
+    "StubImage": StubImage,
+    "StubMask": StubMask,
+    "StubInt": StubInt,
+    "StubFloat": StubFloat,
+}
+TEST_STUB_NODE_DISPLAY_NAME_MAPPINGS = {
+    "StubImage": "Stub Image",
+    "StubMask": "Stub Mask",
+    "StubInt": "Stub Int",
+    "StubFloat": "Stub Float",
+}

tests/inference/testing_nodes/testing-pack/tools.py

@@ -0,0 +1,53 @@
+
+def MakeSmartType(t):
+    if isinstance(t, str):
+        return SmartType(t)
+    return t
+
+class SmartType(str):
+    def __ne__(self, other):
+        if self == "*" or other == "*":
+            return False
+        selfset = set(self.split(','))
+        otherset = set(other.split(','))
+        return not selfset.issubset(otherset)
+
+def VariantSupport():
+    def decorator(cls):
+        if hasattr(cls, "INPUT_TYPES"):
+            old_input_types = getattr(cls, "INPUT_TYPES")
+            def new_input_types(*args, **kwargs):
+                types = old_input_types(*args, **kwargs)
+                for category in ["required", "optional"]:
+                    if category not in types:
+                        continue
+                    for key, value in types[category].items():
+                        if isinstance(value, tuple):
+                            types[category][key] = (MakeSmartType(value[0]),) + value[1:]
+                return types
+            setattr(cls, "INPUT_TYPES", new_input_types)
+        if hasattr(cls, "RETURN_TYPES"):
+            old_return_types = cls.RETURN_TYPES
+            setattr(cls, "RETURN_TYPES", tuple(MakeSmartType(x) for x in old_return_types))
+        if hasattr(cls, "VALIDATE_INPUTS"):
+            # Reflection is used to determine what the function signature is, so we can't just change the function signature
+            raise NotImplementedError("VariantSupport does not support VALIDATE_INPUTS yet")
+        else:
+            def validate_inputs(input_types):
+                inputs = cls.INPUT_TYPES()
+                for key, value in input_types.items():
+                    if isinstance(value, SmartType):
+                        continue
+                    if "required" in inputs and key in inputs["required"]:
+                        expected_type = inputs["required"][key][0]
+                    elif "optional" in inputs and key in inputs["optional"]:
+                        expected_type = inputs["optional"][key][0]
+                    else:
+                        expected_type = None
+                    if expected_type is not None and MakeSmartType(value) != expected_type:
+                        return f"Invalid type of {key}: {value} (expected {expected_type})"
+                return True
+            setattr(cls, "VALIDATE_INPUTS", validate_inputs)
+        return cls
+    return decorator
+

tests/inference/testing_nodes/testing-pack/util.py

@@ -0,0 +1,364 @@
+from comfy_execution.graph_utils import GraphBuilder
+from .tools import VariantSupport
+
+@VariantSupport()
+class TestAccumulateNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "to_add": ("*",),
+            },
+            "optional": {
+                "accumulation": ("ACCUMULATION",),
+            },
+        }
+
+    RETURN_TYPES = ("ACCUMULATION",)
+    FUNCTION = "accumulate"
+
+    CATEGORY = "Testing/Lists"
+
+    def accumulate(self, to_add, accumulation = None):
+        if accumulation is None:
+            value = [to_add]
+        else:
+            value = accumulation["accum"] + [to_add]
+        return ({"accum": value},)
+
+@VariantSupport()
+class TestAccumulationHeadNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "accumulation": ("ACCUMULATION",),
+            },
+        }
+
+    RETURN_TYPES = ("ACCUMULATION", "*",)
+    FUNCTION = "accumulation_head"
+
+    CATEGORY = "Testing/Lists"
+
+    def accumulation_head(self, accumulation):
+        accum = accumulation["accum"]
+        if len(accum) == 0:
+            return (accumulation, None)
+        else:
+            return ({"accum": accum[1:]}, accum[0])
+
+class TestAccumulationTailNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "accumulation": ("ACCUMULATION",),
+            },
+        }
+
+    RETURN_TYPES = ("ACCUMULATION", "*",)
+    FUNCTION = "accumulation_tail"
+
+    CATEGORY = "Testing/Lists"
+
+    def accumulation_tail(self, accumulation):
+        accum = accumulation["accum"]
+        if len(accum) == 0:
+            return (None, accumulation)
+        else:
+            return ({"accum": accum[:-1]}, accum[-1])
+
+@VariantSupport()
+class TestAccumulationToListNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "accumulation": ("ACCUMULATION",),
+            },
+        }
+
+    RETURN_TYPES = ("*",)
+    OUTPUT_IS_LIST = (True,)
+
+    FUNCTION = "accumulation_to_list"
+
+    CATEGORY = "Testing/Lists"
+
+    def accumulation_to_list(self, accumulation):
+        return (accumulation["accum"],)
+
+@VariantSupport()
+class TestListToAccumulationNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "list": ("*",),
+            },
+        }
+
+    RETURN_TYPES = ("ACCUMULATION",)
+    INPUT_IS_LIST = (True,)
+
+    FUNCTION = "list_to_accumulation"
+
+    CATEGORY = "Testing/Lists"
+
+    def list_to_accumulation(self, list):
+        return ({"accum": list},)
+
+@VariantSupport()
+class TestAccumulationGetLengthNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "accumulation": ("ACCUMULATION",),
+            },
+        }
+
+    RETURN_TYPES = ("INT",)
+
+    FUNCTION = "accumlength"
+
+    CATEGORY = "Testing/Lists"
+
+    def accumlength(self, accumulation):
+        return (len(accumulation['accum']),)
+        
+@VariantSupport()
+class TestAccumulationGetItemNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "accumulation": ("ACCUMULATION",),
+                "index": ("INT", {"default":0, "step":1})
+            },
+        }
+
+    RETURN_TYPES = ("*",)
+
+    FUNCTION = "get_item"
+
+    CATEGORY = "Testing/Lists"
+
+    def get_item(self, accumulation, index):
+        return (accumulation['accum'][index],)
+        
+@VariantSupport()
+class TestAccumulationSetItemNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "accumulation": ("ACCUMULATION",),
+                "index": ("INT", {"default":0, "step":1}),
+                "value": ("*",),
+            },
+        }
+
+    RETURN_TYPES = ("ACCUMULATION",)
+
+    FUNCTION = "set_item"
+
+    CATEGORY = "Testing/Lists"
+
+    def set_item(self, accumulation, index, value):
+        new_accum = accumulation['accum'][:]
+        new_accum[index] = value
+        return ({"accum": new_accum},)
+
+class TestIntMathOperation:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "a": ("INT", {"default": 0, "min": -0xffffffffffffffff, "max": 0xffffffffffffffff, "step": 1}),
+                "b": ("INT", {"default": 0, "min": -0xffffffffffffffff, "max": 0xffffffffffffffff, "step": 1}),
+                "operation": (["add", "subtract", "multiply", "divide", "modulo", "power"],),
+            },
+        }
+
+    RETURN_TYPES = ("INT",)
+    FUNCTION = "int_math_operation"
+
+    CATEGORY = "Testing/Logic"
+
+    def int_math_operation(self, a, b, operation):
+        if operation == "add":
+            return (a + b,)
+        elif operation == "subtract":
+            return (a - b,)
+        elif operation == "multiply":
+            return (a * b,)
+        elif operation == "divide":
+            return (a // b,)
+        elif operation == "modulo":
+            return (a % b,)
+        elif operation == "power":
+            return (a ** b,)
+
+
+from .flow_control import NUM_FLOW_SOCKETS
+@VariantSupport()
+class TestForLoopOpen:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "remaining": ("INT", {"default": 1, "min": 0, "max": 100000, "step": 1}),
+            },
+            "optional": {
+                f"initial_value{i}": ("*",) for i in range(1, NUM_FLOW_SOCKETS)
+            },
+            "hidden": {
+                "initial_value0": ("*",)
+            }
+        }
+
+    RETURN_TYPES = tuple(["FLOW_CONTROL", "INT",] + ["*"] * (NUM_FLOW_SOCKETS-1))
+    RETURN_NAMES = tuple(["flow_control", "remaining"] + [f"value{i}" for i in range(1, NUM_FLOW_SOCKETS)])
+    FUNCTION = "for_loop_open"
+
+    CATEGORY = "Testing/Flow"
+
+    def for_loop_open(self, remaining, **kwargs):
+        graph = GraphBuilder()
+        if "initial_value0" in kwargs:
+            remaining = kwargs["initial_value0"]
+        while_open = graph.node("TestWhileLoopOpen", condition=remaining, initial_value0=remaining, **{(f"initial_value{i}"): kwargs.get(f"initial_value{i}", None) for i in range(1, NUM_FLOW_SOCKETS)})
+        outputs = [kwargs.get(f"initial_value{i}", None) for i in range(1, NUM_FLOW_SOCKETS)]
+        return {
+            "result": tuple(["stub", remaining] + outputs),
+            "expand": graph.finalize(),
+        }
+
+@VariantSupport()
+class TestForLoopClose:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "flow_control": ("FLOW_CONTROL", {"rawLink": True}),
+            },
+            "optional": {
+                f"initial_value{i}": ("*",{"rawLink": True}) for i in range(1, NUM_FLOW_SOCKETS)
+            },
+        }
+
+    RETURN_TYPES = tuple(["*"] * (NUM_FLOW_SOCKETS-1))
+    RETURN_NAMES = tuple([f"value{i}" for i in range(1, NUM_FLOW_SOCKETS)])
+    FUNCTION = "for_loop_close"
+
+    CATEGORY = "Testing/Flow"
+
+    def for_loop_close(self, flow_control, **kwargs):
+        graph = GraphBuilder()
+        while_open = flow_control[0]
+        sub = graph.node("TestIntMathOperation", operation="subtract", a=[while_open,1], b=1)
+        cond = graph.node("TestToBoolNode", value=sub.out(0))
+        input_values = {f"initial_value{i}": kwargs.get(f"initial_value{i}", None) for i in range(1, NUM_FLOW_SOCKETS)}
+        while_close = graph.node("TestWhileLoopClose",
+                flow_control=flow_control,
+                condition=cond.out(0),
+                initial_value0=sub.out(0),
+                **input_values)
+        return {
+            "result": tuple([while_close.out(i) for i in range(1, NUM_FLOW_SOCKETS)]),
+            "expand": graph.finalize(),
+        }
+
+NUM_LIST_SOCKETS = 10
+@VariantSupport()
+class TestMakeListNode:
+    def __init__(self):
+        pass
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "value1": ("*",),
+            },
+            "optional": {
+                f"value{i}": ("*",) for i in range(1, NUM_LIST_SOCKETS)
+            },
+        }
+
+    RETURN_TYPES = ("*",)
+    FUNCTION = "make_list"
+    OUTPUT_IS_LIST = (True,)
+
+    CATEGORY = "Testing/Lists"
+
+    def make_list(self, **kwargs):
+        result = []
+        for i in range(NUM_LIST_SOCKETS):
+            if f"value{i}" in kwargs:
+                result.append(kwargs[f"value{i}"])
+        return (result,)
+
+UTILITY_NODE_CLASS_MAPPINGS = {
+    "TestAccumulateNode": TestAccumulateNode,
+    "TestAccumulationHeadNode": TestAccumulationHeadNode,
+    "TestAccumulationTailNode": TestAccumulationTailNode,
+    "TestAccumulationToListNode": TestAccumulationToListNode,
+    "TestListToAccumulationNode": TestListToAccumulationNode,
+    "TestAccumulationGetLengthNode": TestAccumulationGetLengthNode,
+    "TestAccumulationGetItemNode": TestAccumulationGetItemNode,
+    "TestAccumulationSetItemNode": TestAccumulationSetItemNode,
+    "TestForLoopOpen": TestForLoopOpen,
+    "TestForLoopClose": TestForLoopClose,
+    "TestIntMathOperation": TestIntMathOperation,
+    "TestMakeListNode": TestMakeListNode,
+}
+UTILITY_NODE_DISPLAY_NAME_MAPPINGS = {
+    "TestAccumulateNode": "Accumulate",
+    "TestAccumulationHeadNode": "Accumulation Head",
+    "TestAccumulationTailNode": "Accumulation Tail",
+    "TestAccumulationToListNode": "Accumulation to List",
+    "TestListToAccumulationNode": "List to Accumulation",
+    "TestAccumulationGetLengthNode": "Accumulation Get Length",
+    "TestAccumulationGetItemNode": "Accumulation Get Item",
+    "TestAccumulationSetItemNode": "Accumulation Set Item",
+    "TestForLoopOpen": "For Loop Open",
+    "TestForLoopClose": "For Loop Close",
+    "TestIntMathOperation": "Int Math Operation",
+    "TestMakeListNode": "Make List",
+}

web/assets/userSelection-BGzn1LuN.css

@@ -50,6 +50,11 @@
     margin-top: 10px;
 }
 
+.comfy-user-selection input::-moz-placeholder {
+    color: var(--descrip-text);
+    opacity: 1;
+}
+
 .comfy-user-selection input::placeholder {
     color: var(--descrip-text);
     opacity: 1;
@@ -67,12 +72,8 @@
     margin: 10px 0;
     padding: 10px;
     display: block;
-    text-align: center;
     width: 100%;
     color: var(--descrip-text);
-}
-
-.comfy-user-selection-inner .or-separator {
     overflow: hidden;
     text-align: center;
     margin-left: -10px;

web/assets/userSelection-BifVfRyx.js

@@ -0,0 +1,138 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { j as createSpinner, g as api, $ as $el } from "./index-DIiqwEjy.js";
+class UserSelectionScreen {
+  show(users, user) {
+    return __async(this, null, function* () {
+      const userSelection = document.getElementById("comfy-user-selection");
+      userSelection.style.display = "";
+      return new Promise((resolve) => {
+        const input = userSelection.getElementsByTagName("input")[0];
+        const select = userSelection.getElementsByTagName("select")[0];
+        const inputSection = input.closest("section");
+        const selectSection = select.closest("section");
+        const form = userSelection.getElementsByTagName("form")[0];
+        const error = userSelection.getElementsByClassName("comfy-user-error")[0];
+        const button = userSelection.getElementsByClassName(
+          "comfy-user-button-next"
+        )[0];
+        let inputActive = null;
+        input.addEventListener("focus", () => {
+          inputSection.classList.add("selected");
+          selectSection.classList.remove("selected");
+          inputActive = true;
+        });
+        select.addEventListener("focus", () => {
+          inputSection.classList.remove("selected");
+          selectSection.classList.add("selected");
+          inputActive = false;
+          select.style.color = "";
+        });
+        select.addEventListener("blur", () => {
+          if (!select.value) {
+            select.style.color = "var(--descrip-text)";
+          }
+        });
+        form.addEventListener("submit", (e) => __async(this, null, function* () {
+          var _a, _b, _c;
+          e.preventDefault();
+          if (inputActive == null) {
+            error.textContent = "Please enter a username or select an existing user.";
+          } else if (inputActive) {
+            const username = input.value.trim();
+            if (!username) {
+              error.textContent = "Please enter a username.";
+              return;
+            }
+            input.disabled = select.disabled = // @ts-expect-error
+            input.readonly = // @ts-expect-error
+            select.readonly = true;
+            const spinner = createSpinner();
+            button.prepend(spinner);
+            try {
+              const resp = yield api.createUser(username);
+              if (resp.status >= 300) {
+                let message = "Error creating user: " + resp.status + " " + resp.statusText;
+                try {
+                  const res = yield resp.json();
+                  if (res.error) {
+                    message = res.error;
+                  }
+                } catch (error2) {
+                }
+                throw new Error(message);
+              }
+              resolve({ username, userId: yield resp.json(), created: true });
+            } catch (err) {
+              spinner.remove();
+              error.textContent = (_c = (_b = (_a = err.message) != null ? _a : err.statusText) != null ? _b : err) != null ? _c : "An unknown error occurred.";
+              input.disabled = select.disabled = // @ts-expect-error
+              input.readonly = // @ts-expect-error
+              select.readonly = false;
+              return;
+            }
+          } else if (!select.value) {
+            error.textContent = "Please select an existing user.";
+            return;
+          } else {
+            resolve({
+              username: users[select.value],
+              userId: select.value,
+              created: false
+            });
+          }
+        }));
+        if (user) {
+          const name = localStorage["Comfy.userName"];
+          if (name) {
+            input.value = name;
+          }
+        }
+        if (input.value) {
+          input.focus();
+        }
+        const userIds = Object.keys(users != null ? users : {});
+        if (userIds.length) {
+          for (const u of userIds) {
+            $el("option", { textContent: users[u], value: u, parent: select });
+          }
+          select.style.color = "var(--descrip-text)";
+          if (select.value) {
+            select.focus();
+          }
+        } else {
+          userSelection.classList.add("no-users");
+          input.focus();
+        }
+      }).then((r) => {
+        userSelection.remove();
+        return r;
+      });
+    });
+  }
+}
+window.comfyAPI = window.comfyAPI || {};
+window.comfyAPI.userSelection = window.comfyAPI.userSelection || {};
+window.comfyAPI.userSelection.UserSelectionScreen = UserSelectionScreen;
+export {
+  UserSelectionScreen
+};
+//# sourceMappingURL=userSelection-BifVfRyx.js.map

web/extensions/core/clipspace.js

@@ -1,166 +1,2 @@
-import { app } from "../../scripts/app.js";
+// Shim for extensions\core\clipspace.ts
-import { ComfyDialog, $el } from "../../scripts/ui.js";
+export const ClipspaceDialog = window.comfyAPI.clipspace.ClipspaceDialog;
-import { ComfyApp } from "../../scripts/app.js";
-
-export class ClipspaceDialog extends ComfyDialog {
-	static items = [];
-	static instance = null;
-
-	static registerButton(name, contextPredicate, callback) {
-		const item =
-			$el("button", {
-				type: "button",
-				textContent: name,
-				contextPredicate: contextPredicate,
-				onclick: callback
-			})
-
-		ClipspaceDialog.items.push(item);
-	}
-
-	static invalidatePreview() {
-		if(ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0) {
-			const img_preview = document.getElementById("clipspace_preview");
-			if(img_preview) {
-				img_preview.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
-				img_preview.style.maxHeight = "100%";
-				img_preview.style.maxWidth = "100%";
-			}
-		}
-	}
-
-	static invalidate() {
-		if(ClipspaceDialog.instance) {
-			const self = ClipspaceDialog.instance;
-			// allow reconstruct controls when copying from non-image to image content.
-			const children = $el("div.comfy-modal-content", [ self.createImgSettings(), ...self.createButtons() ]);
-
-			if(self.element) {
-				// update
-				self.element.removeChild(self.element.firstChild);
-				self.element.appendChild(children);
-			}
-			else {
-				// new
-				self.element = $el("div.comfy-modal", { parent: document.body }, [children,]);
-			}
-
-			if(self.element.children[0].children.length <= 1) {
-				self.element.children[0].appendChild($el("p", {}, ["Unable to find the features to edit content of a format stored in the current Clipspace."]));
-			}
-
-			ClipspaceDialog.invalidatePreview();
-		}
-	}
-
-	constructor() {
-		super();
-	}
-
-	createButtons(self) {
-		const buttons = [];
-
-		for(let idx in ClipspaceDialog.items) {
-			const item = ClipspaceDialog.items[idx];
-			if(!item.contextPredicate || item.contextPredicate())
-				buttons.push(ClipspaceDialog.items[idx]);
-		}
-
-		buttons.push(
-			$el("button", {
-				type: "button",
-				textContent: "Close",
-				onclick: () => { this.close(); }
-			})
-		);
-
-		return buttons;
-	}
-
-	createImgSettings() {
-		if(ComfyApp.clipspace.imgs) {
-			const combo_items = [];
-			const imgs = ComfyApp.clipspace.imgs;
-
-			for(let i=0; i < imgs.length; i++) {
-				combo_items.push($el("option", {value:i}, [`${i}`]));
-			}
-
-			const combo1 = $el("select",
-				{id:"clipspace_img_selector", onchange:(event) => {
-					ComfyApp.clipspace['selectedIndex'] = event.target.selectedIndex;
-					ClipspaceDialog.invalidatePreview();
-				} }, combo_items);
-
-			const row1 =
-				$el("tr", {},
-						[
-							$el("td", {}, [$el("font", {color:"white"}, ["Select Image"])]),
-							$el("td", {}, [combo1])
-						]);
-
-
-			const combo2 = $el("select",
-								{id:"clipspace_img_paste_mode", onchange:(event) => {
-									ComfyApp.clipspace['img_paste_mode'] = event.target.value;
-								} },
-								[
-									$el("option", {value:'selected'}, 'selected'),
-									$el("option", {value:'all'}, 'all')
-								]);
-			combo2.value = ComfyApp.clipspace['img_paste_mode'];
-
-			const row2 =
-				$el("tr", {},
-						[
-							$el("td", {}, [$el("font", {color:"white"}, ["Paste Mode"])]),
-							$el("td", {}, [combo2])
-						]);
-
-			const td = $el("td", {align:'center', width:'100px', height:'100px', colSpan:'2'},
-								[ $el("img",{id:"clipspace_preview", ondragstart:() => false},[]) ]);
-
-			const row3 =
-				$el("tr", {}, [td]);
-
-			return $el("table", {}, [row1, row2, row3]);
-		}
-		else {
-			return [];
-		}
-	}
-
-	createImgPreview() {
-		if(ComfyApp.clipspace.imgs) {
-			return $el("img",{id:"clipspace_preview", ondragstart:() => false});
-		}
-		else
-			return [];
-	}
-
-	show() {
-		const img_preview = document.getElementById("clipspace_preview");
-		ClipspaceDialog.invalidate();
-		
-		this.element.style.display = "block";
-	}
-}
-
-app.registerExtension({
-	name: "Comfy.Clipspace",
-	init(app) {
-		app.openClipspace =
-			function () {
-				if(!ClipspaceDialog.instance) {
-					ClipspaceDialog.instance = new ClipspaceDialog(app);
-					ComfyApp.clipspace_invalidate_handler = ClipspaceDialog.invalidate;
-				}
-
-				if(ComfyApp.clipspace) {
-					ClipspaceDialog.instance.show();
-				}
-				else
-					app.ui.dialog.show("Clipspace is Empty!");
-			};
-	}
-});

web/extensions/core/colorPalette.js

@@ -1,785 +0,0 @@
-import {app} from "../../scripts/app.js";
-import {$el} from "../../scripts/ui.js";
-
-// Manage color palettes
-
-const colorPalettes = {
-	"dark": {
-		"id": "dark",
-		"name": "Dark (Default)",
-		"colors": {
-			"node_slot": {
-				"CLIP": "#FFD500", // bright yellow
-				"CLIP_VISION": "#A8DADC", // light blue-gray
-				"CLIP_VISION_OUTPUT": "#ad7452", // rusty brown-orange
-				"CONDITIONING": "#FFA931", // vibrant orange-yellow
-				"CONTROL_NET": "#6EE7B7", // soft mint green
-				"IMAGE": "#64B5F6", // bright sky blue
-				"LATENT": "#FF9CF9", // light pink-purple
-				"MASK": "#81C784", // muted green
-				"MODEL": "#B39DDB", // light lavender-purple
-				"STYLE_MODEL": "#C2FFAE", // light green-yellow
-				"VAE": "#FF6E6E", // bright red
-				"NOISE": "#B0B0B0", // gray
-				"GUIDER": "#66FFFF", // cyan
-				"SAMPLER": "#ECB4B4", // very soft red
-				"SIGMAS": "#CDFFCD", // soft lime green
-				"TAESD": "#DCC274", // cheesecake
-			},
-			"litegraph_base": {
-				"BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=",
-				"CLEAR_BACKGROUND_COLOR": "#222",
-				"NODE_TITLE_COLOR": "#999",
-				"NODE_SELECTED_TITLE_COLOR": "#FFF",
-				"NODE_TEXT_SIZE": 14,
-				"NODE_TEXT_COLOR": "#AAA",
-				"NODE_SUBTEXT_SIZE": 12,
-				"NODE_DEFAULT_COLOR": "#333",
-				"NODE_DEFAULT_BGCOLOR": "#353535",
-				"NODE_DEFAULT_BOXCOLOR": "#666",
-				"NODE_DEFAULT_SHAPE": "box",
-				"NODE_BOX_OUTLINE_COLOR": "#FFF",
-				"DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-				"DEFAULT_GROUP_FONT": 24,
-
-				"WIDGET_BGCOLOR": "#222",
-				"WIDGET_OUTLINE_COLOR": "#666",
-				"WIDGET_TEXT_COLOR": "#DDD",
-				"WIDGET_SECONDARY_TEXT_COLOR": "#999",
-
-				"LINK_COLOR": "#9A9",
-				"EVENT_LINK_COLOR": "#A86",
-				"CONNECTING_LINK_COLOR": "#AFA",
-			},
-			"comfy_base": {
-				"fg-color": "#fff",
-				"bg-color": "#202020",
-				"comfy-menu-bg": "#353535",
-				"comfy-input-bg": "#222",
-				"input-text": "#ddd",
-				"descrip-text": "#999",
-				"drag-text": "#ccc",
-				"error-text": "#ff4444",
-				"border-color": "#4e4e4e",
-				"tr-even-bg-color": "#222",
-				"tr-odd-bg-color": "#353535",
-				"content-bg": "#4e4e4e",
-				"content-fg": "#fff",
-				"content-hover-bg": "#222",
-				"content-hover-fg": "#fff"
-			}
-		},
-	},
-	"light": {
-		"id": "light",
-		"name": "Light",
-		"colors": {
-			"node_slot": {
-				"CLIP": "#FFA726", // orange
-				"CLIP_VISION": "#5C6BC0", // indigo
-				"CLIP_VISION_OUTPUT": "#8D6E63", // brown
-				"CONDITIONING": "#EF5350", // red
-				"CONTROL_NET": "#66BB6A", // green
-				"IMAGE": "#42A5F5", // blue
-				"LATENT": "#AB47BC", // purple
-				"MASK": "#9CCC65", // light green
-				"MODEL": "#7E57C2", // deep purple
-				"STYLE_MODEL": "#D4E157", // lime
-				"VAE": "#FF7043", // deep orange
-			},
-			"litegraph_base": {
-				"BACKGROUND_IMAGE": "data:image/gif;base64,R0lGODlhZABkALMAAAAAAP///+vr6+rq6ujo6Ofn5+bm5uXl5d3d3f///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAABkAGQAAAT/UMhJq7046827HkcoHkYxjgZhnGG6si5LqnIM0/fL4qwwIMAg0CAsEovBIxKhRDaNy2GUOX0KfVFrssrNdpdaqTeKBX+dZ+jYvEaTf+y4W66mC8PUdrE879f9d2mBeoNLfH+IhYBbhIx2jkiHiomQlGKPl4uZe3CaeZifnnijgkESBqipqqusra6vsLGys62SlZO4t7qbuby7CLa+wqGWxL3Gv3jByMOkjc2lw8vOoNSi0czAncXW3Njdx9Pf48/Z4Kbbx+fQ5evZ4u3k1fKR6cn03vHlp7T9/v8A/8Gbp4+gwXoFryXMB2qgwoMMHyKEqA5fxX322FG8tzBcRnMW/zlulPbRncmQGidKjMjyYsOSKEF2FBlJQMCbOHP6c9iSZs+UnGYCdbnSo1CZI5F64kn0p1KnTH02nSoV3dGTV7FFHVqVq1dtWcMmVQZTbNGu72zqXMuW7danVL+6e4t1bEy6MeueBYLXrNO5Ze36jQtWsOG97wIj1vt3St/DjTEORss4nNq2mDP3e7w4r1bFkSET5hy6s2TRlD2/mSxXtSHQhCunXo26NevCpmvD/UU6tuullzULH76q92zdZG/Ltv1a+W+osI/nRmyc+fRi1Xdbh+68+0vv10dH3+77KD/i6IdnX669/frn5Zsjh4/2PXju8+8bzc9/6fj27LFnX11/+IUnXWl7BJfegm79FyB9JOl3oHgSklefgxAC+FmFGpqHIYcCfkhgfCohSKKJVo044YUMttggiBkmp6KFXw1oII24oYhjiDByaKOOHcp3Y5BD/njikSkO+eBREQAAOw==",
-				"CLEAR_BACKGROUND_COLOR": "lightgray",
-				"NODE_TITLE_COLOR": "#222",
-				"NODE_SELECTED_TITLE_COLOR": "#000",
-				"NODE_TEXT_SIZE": 14,
-				"NODE_TEXT_COLOR": "#444",
-				"NODE_SUBTEXT_SIZE": 12,
-				"NODE_DEFAULT_COLOR": "#F7F7F7",
-				"NODE_DEFAULT_BGCOLOR": "#F5F5F5",
-				"NODE_DEFAULT_BOXCOLOR": "#CCC",
-				"NODE_DEFAULT_SHAPE": "box",
-				"NODE_BOX_OUTLINE_COLOR": "#000",
-				"DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.1)",
-				"DEFAULT_GROUP_FONT": 24,
-
-				"WIDGET_BGCOLOR": "#D4D4D4",
-				"WIDGET_OUTLINE_COLOR": "#999",
-				"WIDGET_TEXT_COLOR": "#222",
-				"WIDGET_SECONDARY_TEXT_COLOR": "#555",
-
-				"LINK_COLOR": "#4CAF50",
-				"EVENT_LINK_COLOR": "#FF9800",
-				"CONNECTING_LINK_COLOR": "#2196F3",
-			},
-			"comfy_base": {
-				"fg-color": "#222",
-				"bg-color": "#DDD",
-				"comfy-menu-bg": "#F5F5F5",
-				"comfy-input-bg": "#C9C9C9",
-				"input-text": "#222",
-				"descrip-text": "#444",
-				"drag-text": "#555",
-				"error-text": "#F44336",
-				"border-color": "#888",
-				"tr-even-bg-color": "#f9f9f9",
-				"tr-odd-bg-color": "#fff",
-				"content-bg": "#e0e0e0",
-				"content-fg": "#222",
-				"content-hover-bg": "#adadad",
-				"content-hover-fg": "#222"
-			}
-		},
-	},
-	"solarized": {
-		"id": "solarized",
-		"name": "Solarized",
-		"colors": {
-			"node_slot": {
-				"CLIP": "#2AB7CA", // light blue
-				"CLIP_VISION": "#6c71c4", // blue violet
-				"CLIP_VISION_OUTPUT": "#859900", // olive green
-				"CONDITIONING": "#d33682", // magenta
-				"CONTROL_NET": "#d1ffd7", // light mint green
-				"IMAGE": "#5940bb", // deep blue violet
-				"LATENT": "#268bd2", // blue
-				"MASK": "#CCC9E7", // light purple-gray
-				"MODEL": "#dc322f", // red
-				"STYLE_MODEL": "#1a998a", // teal
-				"UPSCALE_MODEL": "#054A29", // dark green
-				"VAE": "#facfad", // light pink-orange
-			},
-			"litegraph_base": {
-				"NODE_TITLE_COLOR": "#fdf6e3", // Base3
-				"NODE_SELECTED_TITLE_COLOR": "#A9D400",
-				"NODE_TEXT_SIZE": 14,
-				"NODE_TEXT_COLOR": "#657b83", // Base00
-				"NODE_SUBTEXT_SIZE": 12,
-				"NODE_DEFAULT_COLOR": "#094656",
-				"NODE_DEFAULT_BGCOLOR": "#073642", // Base02
-				"NODE_DEFAULT_BOXCOLOR": "#839496", // Base0
-				"NODE_DEFAULT_SHAPE": "box",
-				"NODE_BOX_OUTLINE_COLOR": "#fdf6e3", // Base3
-				"DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-				"DEFAULT_GROUP_FONT": 24,
-
-				"WIDGET_BGCOLOR": "#002b36", // Base03
-				"WIDGET_OUTLINE_COLOR": "#839496", // Base0
-				"WIDGET_TEXT_COLOR": "#fdf6e3", // Base3
-				"WIDGET_SECONDARY_TEXT_COLOR": "#93a1a1", // Base1
-
-				"LINK_COLOR": "#2aa198", // Solarized Cyan
-				"EVENT_LINK_COLOR": "#268bd2", // Solarized Blue
-				"CONNECTING_LINK_COLOR": "#859900", // Solarized Green
-			},
-			"comfy_base": {
-				"fg-color": "#fdf6e3", // Base3
-				"bg-color": "#002b36", // Base03
-				"comfy-menu-bg": "#073642", // Base02
-				"comfy-input-bg": "#002b36", // Base03
-				"input-text": "#93a1a1", // Base1
-				"descrip-text": "#586e75", // Base01
-				"drag-text": "#839496", // Base0
-				"error-text": "#dc322f", // Solarized Red
-				"border-color": "#657b83", // Base00
-				"tr-even-bg-color": "#002b36",
-				"tr-odd-bg-color": "#073642",
-				"content-bg": "#657b83",
-				"content-fg": "#fdf6e3",
-				"content-hover-bg": "#002b36",
-				"content-hover-fg": "#fdf6e3"
-			}
-		},
-	},
-	"arc": {
-		"id": "arc",
-		"name": "Arc",
-		"colors": {
-			"node_slot": {
-			  "BOOLEAN": "",
-			  "CLIP": "#eacb8b",
-			  "CLIP_VISION": "#A8DADC",
-			  "CLIP_VISION_OUTPUT": "#ad7452",
-			  "CONDITIONING": "#cf876f",
-			  "CONTROL_NET": "#00d78d",
-			  "CONTROL_NET_WEIGHTS": "",
-			  "FLOAT": "",
-			  "GLIGEN": "",
-			  "IMAGE": "#80a1c0",
-			  "IMAGEUPLOAD": "",
-			  "INT": "",
-			  "LATENT": "#b38ead",
-			  "LATENT_KEYFRAME": "",
-			  "MASK": "#a3bd8d",
-			  "MODEL": "#8978a7",
-			  "SAMPLER": "",
-			  "SIGMAS": "",
-			  "STRING": "",
-			  "STYLE_MODEL": "#C2FFAE",
-			  "T2I_ADAPTER_WEIGHTS": "",
-			  "TAESD": "#DCC274",
-			  "TIMESTEP_KEYFRAME": "",
-			  "UPSCALE_MODEL": "",
-			  "VAE": "#be616b"
-			},
-			"litegraph_base": {
-			  "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABcklEQVR4nO3YMUoDARgF4RfxBqZI6/0vZqFn0MYtrLIQMFN8U6V4LAtD+Jm9XG/v30OGl2e/AP7yevz4+vx45nvgF/+QGITEICQGITEIiUFIjNNC3q43u3/YnRJyPOzeQ+0e220nhRzReC8e7R7bbdvl+Jal1Bs46jEIiUFIDEJiEBKDkBhKPbZT6qHdptRTu02p53DUYxASg5AYhMQgJAYhMZR6bKfUQ7tNqad2m1LP4ajHICQGITEIiUFIDEJiKPXYTqmHdptST+02pZ7DUY9BSAxCYhASg5AYhMRQ6rGdUg/tNqWe2m1KPYejHoOQGITEICQGITEIiaHUYzulHtptSj2125R6Dkc9BiExCIlBSAxCYhASQ6nHdko9tNuUemq3KfUcjnoMQmIQEoOQGITEICSGUo/tlHpotyn11G5T6jkc9RiExCAkBiExCIlBSAylHtsp9dBuU+qp3abUczjqMQiJQUgMQmIQEoOQGITE+AHFISNQrFTGuwAAAABJRU5ErkJggg==",
-			  "CLEAR_BACKGROUND_COLOR": "#2b2f38",
-			  "NODE_TITLE_COLOR": "#b2b7bd",
-			  "NODE_SELECTED_TITLE_COLOR": "#FFF",
-			  "NODE_TEXT_SIZE": 14,
-			  "NODE_TEXT_COLOR": "#AAA",
-			  "NODE_SUBTEXT_SIZE": 12,
-			  "NODE_DEFAULT_COLOR": "#2b2f38",
-			  "NODE_DEFAULT_BGCOLOR": "#242730",
-			  "NODE_DEFAULT_BOXCOLOR": "#6e7581",
-			  "NODE_DEFAULT_SHAPE": "box",
-			  "NODE_BOX_OUTLINE_COLOR": "#FFF",
-			  "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-			  "DEFAULT_GROUP_FONT": 22,
-			  "WIDGET_BGCOLOR": "#2b2f38",
-			  "WIDGET_OUTLINE_COLOR": "#6e7581",
-			  "WIDGET_TEXT_COLOR": "#DDD",
-			  "WIDGET_SECONDARY_TEXT_COLOR": "#b2b7bd",
-			  "LINK_COLOR": "#9A9",
-			  "EVENT_LINK_COLOR": "#A86",
-			  "CONNECTING_LINK_COLOR": "#AFA"
-			},
-			"comfy_base": {
-			  "fg-color": "#fff",
-			  "bg-color": "#2b2f38",
-			  "comfy-menu-bg": "#242730",
-			  "comfy-input-bg": "#2b2f38",
-			  "input-text": "#ddd",
-			  "descrip-text": "#b2b7bd",
-			  "drag-text": "#ccc",
-			  "error-text": "#ff4444",
-			  "border-color": "#6e7581",
-			  "tr-even-bg-color": "#2b2f38",
-			  "tr-odd-bg-color": "#242730",
-			  "content-bg": "#6e7581",
-			  "content-fg": "#fff",
-			  "content-hover-bg": "#2b2f38",
-			  "content-hover-fg": "#fff"
-			}
-		},
-	},
-	"nord": {
-		"id": "nord",
-		"name": "Nord",
-		"colors": {
-			"node_slot": {
-			  "BOOLEAN": "",
-			  "CLIP": "#eacb8b",
-			  "CLIP_VISION": "#A8DADC",
-			  "CLIP_VISION_OUTPUT": "#ad7452",
-			  "CONDITIONING": "#cf876f",
-			  "CONTROL_NET": "#00d78d",
-			  "CONTROL_NET_WEIGHTS": "",
-			  "FLOAT": "",
-			  "GLIGEN": "",
-			  "IMAGE": "#80a1c0",
-			  "IMAGEUPLOAD": "",
-			  "INT": "",
-			  "LATENT": "#b38ead",
-			  "LATENT_KEYFRAME": "",
-			  "MASK": "#a3bd8d",
-			  "MODEL": "#8978a7",
-			  "SAMPLER": "",
-			  "SIGMAS": "",
-			  "STRING": "",
-			  "STYLE_MODEL": "#C2FFAE",
-			  "T2I_ADAPTER_WEIGHTS": "",
-			  "TAESD": "#DCC274",
-			  "TIMESTEP_KEYFRAME": "",
-			  "UPSCALE_MODEL": "",
-			  "VAE": "#be616b"
-			},
-			"litegraph_base": {
-			  "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFu2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwNDFhMmZjLTEzNzQtMTk0ZC1hZWY4LTYxMzM1MTVmNjUwMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMzFiMTBiMC1iNGZiLTAyNGUtYjEyZS0zMDUzMDNjZDA3YzgiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMzFiMTBiMC1iNGZiLTAyNGUtYjEyZS0zMDUzMDNjZDA3YzgiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjIzMWIxMGIwLWI0ZmItMDI0ZS1iMTJlLTMwNTMwM2NkMDdjOCIgc3RFdnQ6d2hlbj0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MDQxYTJmYy0xMzc0LTE5NGQtYWVmOC02MTMzNTE1ZjY1MDAiIHN0RXZ0OndoZW49IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz73jWg/AAAAyUlEQVR42u3WKwoAIBRFQRdiMb1idv9Lsxn9gEFw4Dbb8JCTojbbXEJwjJVL2HKwYMGCBQuWLbDmjr+9zrBGjHl1WVcvy2DBggULFizTWQpewSt4HzwsgwULFiwFr7MUvMtS8D54WLBgGSxYCl7BK3iXZbBgwYIFC5bpLAWv4BW8Dx6WwYIFC5aC11kK3mUpeB88LFiwDBYsBa/gFbzLMliwYMGCBct0loJX8AreBw/LYMGCBUvB6ywF77IUvA8eFixYBgsWrNfWAZPltufdad+1AAAAAElFTkSuQmCC",
-			  "CLEAR_BACKGROUND_COLOR": "#212732",
-			  "NODE_TITLE_COLOR": "#999",
-			  "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
-			  "NODE_TEXT_SIZE": 14,
-			  "NODE_TEXT_COLOR": "#bcc2c8",
-			  "NODE_SUBTEXT_SIZE": 12,
-			  "NODE_DEFAULT_COLOR": "#2e3440",
-			  "NODE_DEFAULT_BGCOLOR": "#161b22",
-			  "NODE_DEFAULT_BOXCOLOR": "#545d70",
-			  "NODE_DEFAULT_SHAPE": "box",
-			  "NODE_BOX_OUTLINE_COLOR": "#e5eaf0",
-			  "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-			  "DEFAULT_GROUP_FONT": 24,
-			  "WIDGET_BGCOLOR": "#2e3440",
-			  "WIDGET_OUTLINE_COLOR": "#545d70",
-			  "WIDGET_TEXT_COLOR": "#bcc2c8",
-			  "WIDGET_SECONDARY_TEXT_COLOR": "#999",
-			  "LINK_COLOR": "#9A9",
-			  "EVENT_LINK_COLOR": "#A86",
-			  "CONNECTING_LINK_COLOR": "#AFA"
-			},
-			"comfy_base": {
-			  "fg-color": "#e5eaf0",
-			  "bg-color": "#2e3440",
-			  "comfy-menu-bg": "#161b22",
-			  "comfy-input-bg": "#2e3440",
-			  "input-text": "#bcc2c8",
-			  "descrip-text": "#999",
-			  "drag-text": "#ccc",
-			  "error-text": "#ff4444",
-			  "border-color": "#545d70",
-			  "tr-even-bg-color": "#2e3440",
-			  "tr-odd-bg-color": "#161b22",
-			  "content-bg": "#545d70",
-			  "content-fg": "#e5eaf0",
-			  "content-hover-bg": "#2e3440",
-			  "content-hover-fg": "#e5eaf0"
-			}
-		},
-	},
-	"github": {
-		"id": "github",
-		"name": "Github",
-		"colors": {
-			"node_slot": {
-			  "BOOLEAN": "",
-			  "CLIP": "#eacb8b",
-			  "CLIP_VISION": "#A8DADC",
-			  "CLIP_VISION_OUTPUT": "#ad7452",
-			  "CONDITIONING": "#cf876f",
-			  "CONTROL_NET": "#00d78d",
-			  "CONTROL_NET_WEIGHTS": "",
-			  "FLOAT": "",
-			  "GLIGEN": "",
-			  "IMAGE": "#80a1c0",
-			  "IMAGEUPLOAD": "",
-			  "INT": "",
-			  "LATENT": "#b38ead",
-			  "LATENT_KEYFRAME": "",
-			  "MASK": "#a3bd8d",
-			  "MODEL": "#8978a7",
-			  "SAMPLER": "",
-			  "SIGMAS": "",
-			  "STRING": "",
-			  "STYLE_MODEL": "#C2FFAE",
-			  "T2I_ADAPTER_WEIGHTS": "",
-			  "TAESD": "#DCC274",
-			  "TIMESTEP_KEYFRAME": "",
-			  "UPSCALE_MODEL": "",
-			  "VAE": "#be616b"
-			},
-			"litegraph_base": {
-			  "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGlmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmIyYzRhNjA5LWJmYTctYTg0MC1iOGFlLTk3MzE2ZjM1ZGIyNyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk0ZmNlZGU4LTE1MTctZmQ0MC04ZGU3LWYzOTgxM2E3ODk5ZiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjIzMWIxMGIwLWI0ZmItMDI0ZS1iMTJlLTMwNTMwM2NkMDdjOCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjMxYjEwYjAtYjRmYi0wMjRlLWIxMmUtMzA1MzAzY2QwN2M4IiBzdEV2dDp3aGVuPSIyMDIzLTExLTEzVDAwOjE4OjAyKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuMSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4OWY1NzlmLTJkNjUtZWQ0Zi04OTg0LTA4NGE2MGE1ZTMzNSIgc3RFdnQ6d2hlbj0iMjAyMy0xMS0xNVQwMjowNDo1OSswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiMmM0YTYwOS1iZmE3LWE4NDAtYjhhZS05NzMxNmYzNWRiMjciIHN0RXZ0OndoZW49IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4OTe6GAAAAx0lEQVR42u3WMQoAIQxFwRzJys77X8vSLiRgITif7bYbgrwYc/mKXyBoY4VVBgsWLFiwYFmOlTv+9jfDOjHmr8u6eVkGCxYsWLBgmc5S8ApewXvgYRksWLBgKXidpeBdloL3wMOCBctgwVLwCl7BuyyDBQsWLFiwTGcpeAWv4D3wsAwWLFiwFLzOUvAuS8F74GHBgmWwYCl4Ba/gXZbBggULFixYprMUvIJX8B54WAYLFixYCl5nKXiXpeA98LBgwTJYsGC9tg1o8f4TTtqzNQAAAABJRU5ErkJggg==",
-			  "CLEAR_BACKGROUND_COLOR": "#040506",
-			  "NODE_TITLE_COLOR": "#999",
-			  "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
-			  "NODE_TEXT_SIZE": 14,
-			  "NODE_TEXT_COLOR": "#bcc2c8",
-			  "NODE_SUBTEXT_SIZE": 12,
-			  "NODE_DEFAULT_COLOR": "#161b22",
-			  "NODE_DEFAULT_BGCOLOR": "#13171d",
-			  "NODE_DEFAULT_BOXCOLOR": "#30363d",
-			  "NODE_DEFAULT_SHAPE": "box",
-			  "NODE_BOX_OUTLINE_COLOR": "#e5eaf0",
-			  "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-			  "DEFAULT_GROUP_FONT": 24,
-			  "WIDGET_BGCOLOR": "#161b22",
-			  "WIDGET_OUTLINE_COLOR": "#30363d",
-			  "WIDGET_TEXT_COLOR": "#bcc2c8",
-			  "WIDGET_SECONDARY_TEXT_COLOR": "#999",
-			  "LINK_COLOR": "#9A9",
-			  "EVENT_LINK_COLOR": "#A86",
-			  "CONNECTING_LINK_COLOR": "#AFA"
-			},
-			"comfy_base": {
-			  "fg-color": "#e5eaf0",
-			  "bg-color": "#161b22",
-			  "comfy-menu-bg": "#13171d",
-			  "comfy-input-bg": "#161b22",
-			  "input-text": "#bcc2c8",
-			  "descrip-text": "#999",
-			  "drag-text": "#ccc",
-			  "error-text": "#ff4444",
-			  "border-color": "#30363d",
-			  "tr-even-bg-color": "#161b22",
-			  "tr-odd-bg-color": "#13171d",
-			  "content-bg": "#30363d",
-			  "content-fg": "#e5eaf0",
-			  "content-hover-bg": "#161b22",
-			  "content-hover-fg": "#e5eaf0"
-			}
-		},
-	}
-};
-
-const id = "Comfy.ColorPalette";
-const idCustomColorPalettes = "Comfy.CustomColorPalettes";
-const defaultColorPaletteId = "dark";
-const els = {}
-// const ctxMenu = LiteGraph.ContextMenu;
-app.registerExtension({
-	name: id,
-	addCustomNodeDefs(node_defs) {
-		const sortObjectKeys = (unordered) => {
-			return Object.keys(unordered).sort().reduce((obj, key) => {
-				obj[key] = unordered[key];
-				return obj;
-			}, {});
-		};
-
-		function getSlotTypes() {
-			var types = [];
-
-			const defs = node_defs;
-			for (const nodeId in defs) {
-				const nodeData = defs[nodeId];
-
-				var inputs = nodeData["input"]["required"];
-				if (nodeData["input"]["optional"] !== undefined) {
-					inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"])
-				}
-
-				for (const inputName in inputs) {
-					const inputData = inputs[inputName];
-					const type = inputData[0];
-
-					if (!Array.isArray(type)) {
-						types.push(type);
-					}
-				}
-
-				for (const o in nodeData["output"]) {
-					const output = nodeData["output"][o];
-					types.push(output);
-				}
-			}
-
-			return types;
-		}
-
-		function completeColorPalette(colorPalette) {
-			var types = getSlotTypes();
-
-			for (const type of types) {
-				if (!colorPalette.colors.node_slot[type]) {
-					colorPalette.colors.node_slot[type] = "";
-				}
-			}
-
-			colorPalette.colors.node_slot = sortObjectKeys(colorPalette.colors.node_slot);
-
-			return colorPalette;
-		}
-
-		const getColorPaletteTemplate = async () => {
-			let colorPalette = {
-				"id": "my_color_palette_unique_id",
-				"name": "My Color Palette",
-				"colors": {
-					"node_slot": {},
-					"litegraph_base": {},
-					"comfy_base": {}
-				}
-			};
-
-			// Copy over missing keys from default color palette
-			const defaultColorPalette = colorPalettes[defaultColorPaletteId];
-			for (const key in defaultColorPalette.colors.litegraph_base) {
-				if (!colorPalette.colors.litegraph_base[key]) {
-					colorPalette.colors.litegraph_base[key] = "";
-				}
-			}
-			for (const key in defaultColorPalette.colors.comfy_base) {
-				if (!colorPalette.colors.comfy_base[key]) {
-					colorPalette.colors.comfy_base[key] = "";
-				}
-			}
-
-			return completeColorPalette(colorPalette);
-		};
-
-		const getCustomColorPalettes = () => {
-			return app.ui.settings.getSettingValue(idCustomColorPalettes, {});
-		};
-
-		const setCustomColorPalettes = (customColorPalettes) => {
-			return app.ui.settings.setSettingValue(idCustomColorPalettes, customColorPalettes);
-		};
-
-		const addCustomColorPalette = async (colorPalette) => {
-			if (typeof (colorPalette) !== "object") {
-				alert("Invalid color palette.");
-				return;
-			}
-
-			if (!colorPalette.id) {
-				alert("Color palette missing id.");
-				return;
-			}
-
-			if (!colorPalette.name) {
-				alert("Color palette missing name.");
-				return;
-			}
-
-			if (!colorPalette.colors) {
-				alert("Color palette missing colors.");
-				return;
-			}
-
-			if (colorPalette.colors.node_slot && typeof (colorPalette.colors.node_slot) !== "object") {
-				alert("Invalid color palette colors.node_slot.");
-				return;
-			}
-
-			const customColorPalettes = getCustomColorPalettes();
-			customColorPalettes[colorPalette.id] = colorPalette;
-			setCustomColorPalettes(customColorPalettes);
-
-			for (const option of els.select.childNodes) {
-				if (option.value === "custom_" + colorPalette.id) {
-					els.select.removeChild(option);
-				}
-			}
-
-			els.select.append($el("option", {
-				textContent: colorPalette.name + " (custom)",
-				value: "custom_" + colorPalette.id,
-				selected: true
-			}));
-
-			setColorPalette("custom_" + colorPalette.id);
-			await loadColorPalette(colorPalette);
-		};
-
-		const deleteCustomColorPalette = async (colorPaletteId) => {
-			const customColorPalettes = getCustomColorPalettes();
-			delete customColorPalettes[colorPaletteId];
-			setCustomColorPalettes(customColorPalettes);
-
-			for (const option of els.select.childNodes) {
-				if (option.value === defaultColorPaletteId) {
-					option.selected = true;
-				}
-
-				if (option.value === "custom_" + colorPaletteId) {
-					els.select.removeChild(option);
-				}
-			}
-
-			setColorPalette(defaultColorPaletteId);
-			await loadColorPalette(getColorPalette());
-		};
-
-		const loadColorPalette = async (colorPalette) => {
-			colorPalette = await completeColorPalette(colorPalette);
-			if (colorPalette.colors) {
-				// Sets the colors of node slots and links
-				if (colorPalette.colors.node_slot) {
-					Object.assign(app.canvas.default_connection_color_byType, colorPalette.colors.node_slot);
-					Object.assign(LGraphCanvas.link_type_colors, colorPalette.colors.node_slot);
-				}
-				// Sets the colors of the LiteGraph objects
-				if (colorPalette.colors.litegraph_base) {
-					// Everything updates correctly in the loop, except the Node Title and Link Color for some reason
-					app.canvas.node_title_color = colorPalette.colors.litegraph_base.NODE_TITLE_COLOR;
-					app.canvas.default_link_color = colorPalette.colors.litegraph_base.LINK_COLOR;
-
-					for (const key in colorPalette.colors.litegraph_base) {
-						if (colorPalette.colors.litegraph_base.hasOwnProperty(key) && LiteGraph.hasOwnProperty(key)) {
-							LiteGraph[key] = colorPalette.colors.litegraph_base[key];
-						}
-					}
-				}
-				// Sets the color of ComfyUI elements
-				if (colorPalette.colors.comfy_base) {
-					const rootStyle = document.documentElement.style;
-					for (const key in colorPalette.colors.comfy_base) {
-						rootStyle.setProperty('--' + key, colorPalette.colors.comfy_base[key]);
-					}
-				}
-				app.canvas.draw(true, true);
-			}
-		};
-
-		const getColorPalette = (colorPaletteId) => {
-			if (!colorPaletteId) {
-				colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
-			}
-
-			if (colorPaletteId.startsWith("custom_")) {
-				colorPaletteId = colorPaletteId.substr(7);
-				let customColorPalettes = getCustomColorPalettes();
-				if (customColorPalettes[colorPaletteId]) {
-					return customColorPalettes[colorPaletteId];
-				}
-			}
-
-			return colorPalettes[colorPaletteId];
-		};
-
-		const setColorPalette = (colorPaletteId) => {
-			app.ui.settings.setSettingValue(id, colorPaletteId);
-		};
-
-		const fileInput = $el("input", {
-			type: "file",
-			accept: ".json",
-			style: {display: "none"},
-			parent: document.body,
-			onchange: () => {
-				const file = fileInput.files[0];
-				if (file.type === "application/json" || file.name.endsWith(".json")) {
-					const reader = new FileReader();
-					reader.onload = async () => {
-						await addCustomColorPalette(JSON.parse(reader.result));
-					};
-					reader.readAsText(file);
-				}
-			},
-		});
-
-		app.ui.settings.addSetting({
-			id,
-			name: "Color Palette",
-			type: (name, setter, value) => {
-				const options = [
-					...Object.values(colorPalettes).map(c=> $el("option", {
-						textContent: c.name,
-						value: c.id,
-						selected: c.id === value
-					})),
-					...Object.values(getCustomColorPalettes()).map(c=>$el("option", {
-						textContent: `${c.name} (custom)`,
-						value: `custom_${c.id}`,
-						selected: `custom_${c.id}` === value
-					}))	,
-				];
-
-				els.select = $el("select", {
-					style: {
-						marginBottom: "0.15rem",
-						width: "100%",
-					},
-					onchange: (e) => {
-						setter(e.target.value);
-					}
-				}, options)
-
-				return $el("tr", [
-					$el("td", [
-						$el("label", {
-							for: id.replaceAll(".", "-"),
-							textContent: "Color palette",
-						}),
-					]),
-					$el("td", [
-						els.select,
-						$el("div", {
-							style: {
-								display: "grid",
-								gap: "4px",
-								gridAutoFlow: "column",
-							},
-						}, [
-							$el("input", {
-								type: "button",
-								value: "Export",
-								onclick: async () => {
-									const colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
-									const colorPalette = await completeColorPalette(getColorPalette(colorPaletteId));
-									const json = JSON.stringify(colorPalette, null, 2); // convert the data to a JSON string
-									const blob = new Blob([json], {type: "application/json"});
-									const url = URL.createObjectURL(blob);
-									const a = $el("a", {
-										href: url,
-										download: colorPaletteId + ".json",
-										style: {display: "none"},
-										parent: document.body,
-									});
-									a.click();
-									setTimeout(function () {
-										a.remove();
-										window.URL.revokeObjectURL(url);
-									}, 0);
-								},
-							}),
-							$el("input", {
-								type: "button",
-								value: "Import",
-								onclick: () => {
-									fileInput.click();
-								}
-							}),
-							$el("input", {
-								type: "button",
-								value: "Template",
-								onclick: async () => {
-									const colorPalette = await getColorPaletteTemplate();
-									const json = JSON.stringify(colorPalette, null, 2); // convert the data to a JSON string
-									const blob = new Blob([json], {type: "application/json"});
-									const url = URL.createObjectURL(blob);
-									const a = $el("a", {
-										href: url,
-										download: "color_palette.json",
-										style: {display: "none"},
-										parent: document.body,
-									});
-									a.click();
-									setTimeout(function () {
-										a.remove();
-										window.URL.revokeObjectURL(url);
-									}, 0);
-								}
-							}),
-							$el("input", {
-								type: "button",
-								value: "Delete",
-								onclick: async () => {
-									let colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
-
-									if (colorPalettes[colorPaletteId]) {
-										alert("You cannot delete a built-in color palette.");
-										return;
-									}
-
-									if (colorPaletteId.startsWith("custom_")) {
-										colorPaletteId = colorPaletteId.substr(7);
-									}
-
-									await deleteCustomColorPalette(colorPaletteId);
-								}
-							}),
-						]),
-					]),
-				])
-			},
-			defaultValue: defaultColorPaletteId,
-			async onChange(value) {
-				if (!value) {
-					return;
-				}
-
-				let palette = colorPalettes[value];
-				if (palette) {
-					await loadColorPalette(palette);
-				} else if (value.startsWith("custom_")) {
-					value = value.substr(7);
-					let customColorPalettes = getCustomColorPalettes();
-					if (customColorPalettes[value]) {
-						palette = customColorPalettes[value];
-						await loadColorPalette(customColorPalettes[value]);
-					}
-				}
-
-				let {BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR} = palette.colors.litegraph_base;
-				if (BACKGROUND_IMAGE === undefined || CLEAR_BACKGROUND_COLOR === undefined) {
-					const base = colorPalettes["dark"].colors.litegraph_base;
-					BACKGROUND_IMAGE = base.BACKGROUND_IMAGE;
-					CLEAR_BACKGROUND_COLOR = base.CLEAR_BACKGROUND_COLOR;
-				}
-				app.canvas.updateBackground(BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR);
-			},
-		});
-	},
-});

web/extensions/core/contextMenuFilter.js

@@ -1,148 +0,0 @@
-import {app} from "../../scripts/app.js";
-
-// Adds filtering to combo context menus
-
-const ext = {
-	name: "Comfy.ContextMenuFilter",
-	init() {
-		const ctxMenu = LiteGraph.ContextMenu;
-
-		LiteGraph.ContextMenu = function (values, options) {
-			const ctx = ctxMenu.call(this, values, options);
-
-			// If we are a dark menu (only used for combo boxes) then add a filter input
-			if (options?.className === "dark" && values?.length > 10) {
-				const filter = document.createElement("input");
-				filter.classList.add("comfy-context-menu-filter");
-				filter.placeholder = "Filter list";
-				this.root.prepend(filter);
-
-				const items = Array.from(this.root.querySelectorAll(".litemenu-entry"));
-				let displayedItems = [...items];
-				let itemCount = displayedItems.length;
-
-				// We must request an animation frame for the current node of the active canvas to update.
-				requestAnimationFrame(() => {
-					const currentNode = LGraphCanvas.active_canvas.current_node;
-					const clickedComboValue = currentNode.widgets
-						?.filter(w => w.type === "combo" && w.options.values.length === values.length)
-						.find(w => w.options.values.every((v, i) => v === values[i]))
-						?.value;
-
-					let selectedIndex = clickedComboValue ? values.findIndex(v => v === clickedComboValue) : 0;
-					if (selectedIndex < 0) {
-						selectedIndex = 0;
-					} 
-					let selectedItem = displayedItems[selectedIndex];
-					updateSelected();
-
-					// Apply highlighting to the selected item
-					function updateSelected() {
-						selectedItem?.style.setProperty("background-color", "");
-						selectedItem?.style.setProperty("color", "");
-						selectedItem = displayedItems[selectedIndex];
-						selectedItem?.style.setProperty("background-color", "#ccc", "important");
-						selectedItem?.style.setProperty("color", "#000", "important");
-					}
-
-					const positionList = () => {
-						const rect = this.root.getBoundingClientRect();
-
-						// If the top is off-screen then shift the element with scaling applied
-						if (rect.top < 0) {
-							const scale = 1 - this.root.getBoundingClientRect().height / this.root.clientHeight;
-							const shift = (this.root.clientHeight * scale) / 2;
-							this.root.style.top = -shift + "px";
-						}
-					}
-
-					// Arrow up/down to select items
-					filter.addEventListener("keydown", (event) => {
-						switch (event.key) {
-							case "ArrowUp":
-								event.preventDefault();
-								if (selectedIndex === 0) {
-									selectedIndex = itemCount - 1;
-								} else {
-									selectedIndex--;
-								}
-								updateSelected();
-								break;
-							case "ArrowRight":
-								event.preventDefault();
-								selectedIndex = itemCount - 1;
-								updateSelected();
-								break;
-							case "ArrowDown":
-								event.preventDefault();
-								if (selectedIndex === itemCount - 1) {
-									selectedIndex = 0;
-								} else {
-									selectedIndex++;
-								}
-								updateSelected();
-								break;
-							case "ArrowLeft":
-								event.preventDefault();
-								selectedIndex = 0;
-								updateSelected();
-								break;
-							case "Enter":
-								selectedItem?.click();
-								break;
-							case "Escape":
-								this.close();
-								break;
-						}
-					});
-
-					filter.addEventListener("input", () => {
-						// Hide all items that don't match our filter
-						const term = filter.value.toLocaleLowerCase();
-						// When filtering, recompute which items are visible for arrow up/down and maintain selection.
-						displayedItems = items.filter(item => {
-							const isVisible = !term || item.textContent.toLocaleLowerCase().includes(term);
-							item.style.display = isVisible ? "block" : "none";
-							return isVisible;
-						});
-
-						selectedIndex = 0;
-						if (displayedItems.includes(selectedItem)) {
-							selectedIndex = displayedItems.findIndex(d => d === selectedItem);
-						}
-						itemCount = displayedItems.length;
-
-						updateSelected();
-
-						// If we have an event then we can try and position the list under the source
-						if (options.event) {
-							let top = options.event.clientY - 10;
-
-							const bodyRect = document.body.getBoundingClientRect();
-							const rootRect = this.root.getBoundingClientRect();
-							if (bodyRect.height && top > bodyRect.height - rootRect.height - 10) {
-								top = Math.max(0, bodyRect.height - rootRect.height - 10);
-							}
-
-							this.root.style.top = top + "px";
-							positionList();
-						}
-					});
-
-					requestAnimationFrame(() => {
-						// Focus the filter box when opening
-						filter.focus();
-
-						positionList();
-					});
-				})
-			}
-
-			return ctx;
-		};
-
-		LiteGraph.ContextMenu.prototype = ctxMenu.prototype;
-	},
-}
-
-app.registerExtension(ext);

web/extensions/core/dynamicPrompts.js

@@ -1,48 +0,0 @@
-import { app } from "../../scripts/app.js";
-
-// Allows for simple dynamic prompt replacement
-// Inputs in the format {a|b} will have a random value of a or b chosen when the prompt is queued.
-
-/*
- * Strips C-style line and block comments from a string
- */
-function stripComments(str) {
-	return str.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g,'');
-}
-
-app.registerExtension({
-	name: "Comfy.DynamicPrompts",
-	nodeCreated(node) {
-		if (node.widgets) {
-			// Locate dynamic prompt text widgets
-			// Include any widgets with dynamicPrompts set to true, and customtext
-			const widgets = node.widgets.filter(
-				(n) => n.dynamicPrompts
-			);
-			for (const widget of widgets) {
-				// Override the serialization of the value to resolve dynamic prompts for all widgets supporting it in this node
-				widget.serializeValue = (workflowNode, widgetIndex) => {
-					let prompt = stripComments(widget.value);
-					while (prompt.replace("\\{", "").includes("{") && prompt.replace("\\}", "").includes("}")) {
-						const startIndex = prompt.replace("\\{", "00").indexOf("{");
-						const endIndex = prompt.replace("\\}", "00").indexOf("}");
-
-						const optionsString = prompt.substring(startIndex + 1, endIndex);
-						const options = optionsString.split("|");
-
-						const randomIndex = Math.floor(Math.random() * options.length);
-						const randomOption = options[randomIndex];
-
-						prompt = prompt.substring(0, startIndex) + randomOption + prompt.substring(endIndex + 1);
-					}
-
-					// Overwrite the value in the serialized workflow pnginfo
-					if (workflowNode?.widgets_values)
-						workflowNode.widgets_values[widgetIndex] = prompt;
-
-					return prompt;
-				};
-			}
-		}
-	},
-});

web/extensions/core/editAttention.js

@@ -1,144 +0,0 @@
-import { app } from "../../scripts/app.js";
-
-// Allows you to edit the attention weight by holding ctrl (or cmd) and using the up/down arrow keys
-
-app.registerExtension({
-    name: "Comfy.EditAttention",
-    init() {
-        const editAttentionDelta = app.ui.settings.addSetting({
-            id: "Comfy.EditAttention.Delta",
-            name: "Ctrl+up/down precision",
-            type: "slider",
-            attrs: {
-                min: 0.01,
-                max: 0.5,
-                step: 0.01,
-            },
-            defaultValue: 0.05,
-        });
-
-        function incrementWeight(weight, delta) {
-            const floatWeight = parseFloat(weight);
-            if (isNaN(floatWeight)) return weight;
-            const newWeight = floatWeight + delta;
-            if (newWeight < 0) return "0";
-            return String(Number(newWeight.toFixed(10)));
-        }
-
-        function findNearestEnclosure(text, cursorPos) {
-            let start = cursorPos, end = cursorPos;
-            let openCount = 0, closeCount = 0;
-
-            // Find opening parenthesis before cursor
-            while (start >= 0) {
-                start--;
-                if (text[start] === "(" && openCount === closeCount) break;
-                if (text[start] === "(") openCount++;
-                if (text[start] === ")") closeCount++;
-            }
-            if (start < 0) return false;
-
-            openCount = 0;
-            closeCount = 0;
-
-            // Find closing parenthesis after cursor
-            while (end < text.length) {
-                if (text[end] === ")" && openCount === closeCount) break;
-                if (text[end] === "(") openCount++;
-                if (text[end] === ")") closeCount++;
-                end++;
-            }
-            if (end === text.length) return false;
-
-            return { start: start + 1, end: end };
-        }
-
-        function addWeightToParentheses(text) {
-            const parenRegex = /^\((.*)\)$/;
-            const parenMatch = text.match(parenRegex);
-
-            const floatRegex = /:([+-]?(\d*\.)?\d+([eE][+-]?\d+)?)/;
-            const floatMatch = text.match(floatRegex);
-
-            if (parenMatch && !floatMatch) {
-                return `(${parenMatch[1]}:1.0)`;
-            } else {
-                return text;
-            }
-        };
-
-        function editAttention(event) {
-            const inputField = event.composedPath()[0];
-            const delta = parseFloat(editAttentionDelta.value);
-
-            if (inputField.tagName !== "TEXTAREA") return;
-            if (!(event.key === "ArrowUp" || event.key === "ArrowDown")) return;
-            if (!event.ctrlKey && !event.metaKey) return;
-
-            event.preventDefault();
-
-            let start = inputField.selectionStart;
-            let end = inputField.selectionEnd;
-            let selectedText = inputField.value.substring(start, end);
-
-            // If there is no selection, attempt to find the nearest enclosure, or select the current word
-            if (!selectedText) {
-                const nearestEnclosure = findNearestEnclosure(inputField.value, start);
-                if (nearestEnclosure) {
-                    start = nearestEnclosure.start;
-                    end = nearestEnclosure.end;
-                    selectedText = inputField.value.substring(start, end);
-                } else {
-                    // Select the current word, find the start and end of the word
-                    const delimiters = " .,\\/!?%^*;:{}=-_`~()\r\n\t";
-                    
-                    while (!delimiters.includes(inputField.value[start - 1]) && start > 0) {
-                        start--;
-                    }
-                    
-                    while (!delimiters.includes(inputField.value[end]) && end < inputField.value.length) {
-                        end++;
-                    }
-
-                    selectedText = inputField.value.substring(start, end);
-                    if (!selectedText) return;
-                }
-            }
-
-            // If the selection ends with a space, remove it
-            if (selectedText[selectedText.length - 1] === " ") {
-                selectedText = selectedText.substring(0, selectedText.length - 1);
-                end -= 1;
-            }
-
-            // If there are parentheses left and right of the selection, select them
-            if (inputField.value[start - 1] === "(" && inputField.value[end] === ")") {
-                start -= 1;
-                end += 1;
-                selectedText = inputField.value.substring(start, end);
-            }
-
-            // If the selection is not enclosed in parentheses, add them
-            if (selectedText[0] !== "(" || selectedText[selectedText.length - 1] !== ")") {
-                selectedText = `(${selectedText})`;
-            }
-
-            // If the selection does not have a weight, add a weight of 1.0
-            selectedText = addWeightToParentheses(selectedText);
-
-            // Increment the weight
-            const weightDelta = event.key === "ArrowUp" ? delta : -delta;
-            const updatedText = selectedText.replace(/\((.*):(\d+(?:\.\d+)?)\)/, (match, text, weight) => {
-                weight = incrementWeight(weight, weightDelta);
-                if (weight == 1) {
-                    return text;
-                } else {
-                    return `(${text}:${weight})`;
-                }
-            });
-
-            inputField.setRangeText(updatedText, start, end, "select");
-        }
-        window.addEventListener("keydown", editAttention);
-    },
-});

web/extensions/core/groupNodeManage.js

@@ -1,422 +1,2 @@
-import { $el, ComfyDialog } from "../../scripts/ui.js";
+// Shim for extensions\core\groupNodeManage.ts
-import { DraggableList } from "../../scripts/ui/draggableList.js";
+export const ManageGroupDialog = window.comfyAPI.groupNodeManage.ManageGroupDialog;
-import { addStylesheet } from "../../scripts/utils.js";
-import { GroupNodeConfig, GroupNodeHandler } from "./groupNode.js";
-
-addStylesheet(import.meta.url);
-
-const ORDER = Symbol();
-
-function merge(target, source) {
-	if (typeof target === "object" && typeof source === "object") {
-		for (const key in source) {
-			const sv = source[key];
-			if (typeof sv === "object") {
-				let tv = target[key];
-				if (!tv) tv = target[key] = {};
-				merge(tv, source[key]);
-			} else {
-				target[key] = sv;
-			}
-		}
-	}
-
-	return target;
-}
-
-export class ManageGroupDialog extends ComfyDialog {
-	/** @type { Record<"Inputs" | "Outputs" | "Widgets", {tab: HTMLAnchorElement, page: HTMLElement}> } */
-	tabs = {};
-	/** @type { number | null | undefined } */
-	selectedNodeIndex;
-	/** @type { keyof ManageGroupDialog["tabs"] } */
-	selectedTab = "Inputs";
-	/** @type { string | undefined } */
-	selectedGroup;
-
-	/** @type { Record<string, Record<string, Record<string, { name?: string | undefined, visible?: boolean | undefined }>>> } */
-	modifications = {};
-
-	get selectedNodeInnerIndex() {
-		return +this.nodeItems[this.selectedNodeIndex].dataset.nodeindex;
-	}
-
-	constructor(app) {
-		super();
-		this.app = app;
-		this.element = $el("dialog.comfy-group-manage", {
-			parent: document.body,
-		});
-	}
-
-	changeTab(tab) {
-		this.tabs[this.selectedTab].tab.classList.remove("active");
-		this.tabs[this.selectedTab].page.classList.remove("active");
-		this.tabs[tab].tab.classList.add("active");
-		this.tabs[tab].page.classList.add("active");
-		this.selectedTab = tab;
-	}
-
-	changeNode(index, force) {
-		if (!force && this.selectedNodeIndex === index) return;
-
-		if (this.selectedNodeIndex != null) {
-			this.nodeItems[this.selectedNodeIndex].classList.remove("selected");
-		}
-		this.nodeItems[index].classList.add("selected");
-		this.selectedNodeIndex = index;
-
-		if (!this.buildInputsPage() && this.selectedTab === "Inputs") {
-			this.changeTab("Widgets");
-		}
-		if (!this.buildWidgetsPage() && this.selectedTab === "Widgets") {
-			this.changeTab("Outputs");
-		}
-		if (!this.buildOutputsPage() && this.selectedTab === "Outputs") {
-			this.changeTab("Inputs");
-		}
-
-		this.changeTab(this.selectedTab);
-	}
-
-	getGroupData() {
-		this.groupNodeType = LiteGraph.registered_node_types["workflow/" + this.selectedGroup];
-		this.groupNodeDef = this.groupNodeType.nodeData;
-		this.groupData = GroupNodeHandler.getGroupData(this.groupNodeType);
-	}
-
-	changeGroup(group, reset = true) {
-		this.selectedGroup = group;
-		this.getGroupData();
-
-		const nodes = this.groupData.nodeData.nodes;
-		this.nodeItems = nodes.map((n, i) =>
-			$el(
-				"li.draggable-item",
-				{
-					dataset: {
-						nodeindex: n.index + "",
-					},
-					onclick: () => {
-						this.changeNode(i);
-					},
-				},
-				[
-					$el("span.drag-handle"),
-					$el(
-						"div",
-						{
-							textContent: n.title ?? n.type,
-						},
-						n.title
-							? $el("span", {
-									textContent: n.type,
-							  })
-							: []
-					),
-				]
-			)
-		);
-
-		this.innerNodesList.replaceChildren(...this.nodeItems);
-
-		if (reset) {
-			this.selectedNodeIndex = null;
-			this.changeNode(0);
-		} else {
-			const items = this.draggable.getAllItems();
-			let index = items.findIndex(item => item.classList.contains("selected"));
-			if(index === -1) index = this.selectedNodeIndex;
-			this.changeNode(index, true);
-		}
-
-		const ordered = [...nodes];
-		this.draggable?.dispose();
-		this.draggable = new DraggableList(this.innerNodesList, "li");
-		this.draggable.addEventListener("dragend", ({ detail: { oldPosition, newPosition } }) => {
-			if (oldPosition === newPosition) return;
-			ordered.splice(newPosition, 0, ordered.splice(oldPosition, 1)[0]);
-			for (let i = 0; i < ordered.length; i++) {
-				this.storeModification({ nodeIndex: ordered[i].index, section: ORDER, prop: "order", value: i });
-			}
-		});
-	}
-
-	storeModification({ nodeIndex, section, prop, value }) {
-		const groupMod = (this.modifications[this.selectedGroup] ??= {});
-		const nodesMod = (groupMod.nodes ??= {});
-		const nodeMod = (nodesMod[nodeIndex ?? this.selectedNodeInnerIndex] ??= {});
-		const typeMod = (nodeMod[section] ??= {});
-		if (typeof value === "object") {
-			const objMod = (typeMod[prop] ??= {});
-			Object.assign(objMod, value);
-		} else {
-			typeMod[prop] = value;
-		}
-	}
-
-	getEditElement(section, prop, value, placeholder, checked, checkable = true) {
-		if (value === placeholder) value = "";
-
-		const mods = this.modifications[this.selectedGroup]?.nodes?.[this.selectedNodeInnerIndex]?.[section]?.[prop];
-		if (mods) {
-			if (mods.name != null) {
-				value = mods.name;
-			}
-			if (mods.visible != null) {
-				checked = mods.visible;
-			}
-		}
-
-		return $el("div", [
-			$el("input", {
-				value,
-				placeholder,
-				type: "text",
-				onchange: (e) => {
-					this.storeModification({ section, prop, value: { name: e.target.value } });
-				},
-			}),
-			$el("label", { textContent: "Visible" }, [
-				$el("input", {
-					type: "checkbox",
-					checked,
-					disabled: !checkable,
-					onchange: (e) => {
-						this.storeModification({ section, prop, value: { visible: !!e.target.checked } });
-					},
-				}),
-			]),
-		]);
-	}
-
-	buildWidgetsPage() {
-		const widgets = this.groupData.oldToNewWidgetMap[this.selectedNodeInnerIndex];
-		const items = Object.keys(widgets ?? {});
-		const type = app.graph.extra.groupNodes[this.selectedGroup];
-		const config = type.config?.[this.selectedNodeInnerIndex]?.input;
-		this.widgetsPage.replaceChildren(
-			...items.map((oldName) => {
-				return this.getEditElement("input", oldName, widgets[oldName], oldName, config?.[oldName]?.visible !== false);
-			})
-		);
-		return !!items.length;
-	}
-
-	buildInputsPage() {
-		const inputs = this.groupData.nodeInputs[this.selectedNodeInnerIndex];
-		const items = Object.keys(inputs ?? {});
-		const type = app.graph.extra.groupNodes[this.selectedGroup];
-		const config = type.config?.[this.selectedNodeInnerIndex]?.input;
-		this.inputsPage.replaceChildren(
-			...items
-				.map((oldName) => {
-					let value = inputs[oldName];
-					if (!value) {
-						return;
-					}
-
-					return this.getEditElement("input", oldName, value, oldName, config?.[oldName]?.visible !== false);
-				})
-				.filter(Boolean)
-		);
-		return !!items.length;
-	}
-
-	buildOutputsPage() {
-		const nodes = this.groupData.nodeData.nodes;
-		const innerNodeDef = this.groupData.getNodeDef(nodes[this.selectedNodeInnerIndex]);
-		const outputs = innerNodeDef?.output ?? [];
-		const groupOutputs = this.groupData.oldToNewOutputMap[this.selectedNodeInnerIndex];
-
-		const type = app.graph.extra.groupNodes[this.selectedGroup];
-		const config = type.config?.[this.selectedNodeInnerIndex]?.output;
-		const node = this.groupData.nodeData.nodes[this.selectedNodeInnerIndex];
-		const checkable = node.type !== "PrimitiveNode";
-		this.outputsPage.replaceChildren(
-			...outputs
-				.map((type, slot) => {
-					const groupOutputIndex = groupOutputs?.[slot];
-					const oldName = innerNodeDef.output_name?.[slot] ?? type;
-					let value = config?.[slot]?.name;
-					const visible = config?.[slot]?.visible || groupOutputIndex != null;
-					if (!value || value === oldName) {
-						value = "";
-					}
-					return this.getEditElement("output", slot, value, oldName, visible, checkable);
-				})
-				.filter(Boolean)
-		);
-		return !!outputs.length;
-	}
-
-	show(type) {
-		const groupNodes = Object.keys(app.graph.extra?.groupNodes ?? {}).sort((a, b) => a.localeCompare(b));
-
-		this.innerNodesList = $el("ul.comfy-group-manage-list-items");
-		this.widgetsPage = $el("section.comfy-group-manage-node-page");
-		this.inputsPage = $el("section.comfy-group-manage-node-page");
-		this.outputsPage = $el("section.comfy-group-manage-node-page");
-		const pages = $el("div", [this.widgetsPage, this.inputsPage, this.outputsPage]);
-
-		this.tabs = [
-			["Inputs", this.inputsPage],
-			["Widgets", this.widgetsPage],
-			["Outputs", this.outputsPage],
-		].reduce((p, [name, page]) => {
-			p[name] = {
-				tab: $el("a", {
-					onclick: () => {
-						this.changeTab(name);
-					},
-					textContent: name,
-				}),
-				page,
-			};
-			return p;
-		}, {});
-
-		const outer = $el("div.comfy-group-manage-outer", [
-			$el("header", [
-				$el("h2", "Group Nodes"),
-				$el(
-					"select",
-					{
-						onchange: (e) => {
-							this.changeGroup(e.target.value);
-						},
-					},
-					groupNodes.map((g) =>
-						$el("option", {
-							textContent: g,
-							selected: "workflow/" + g === type,
-							value: g,
-						})
-					)
-				),
-			]),
-			$el("main", [
-				$el("section.comfy-group-manage-list", this.innerNodesList),
-				$el("section.comfy-group-manage-node", [
-					$el(
-						"header",
-						Object.values(this.tabs).map((t) => t.tab)
-					),
-					pages,
-				]),
-			]),
-			$el("footer", [
-				$el(
-					"button.comfy-btn",
-					{
-						onclick: (e) => {
-							const node = app.graph._nodes.find((n) => n.type === "workflow/" + this.selectedGroup);
-							if (node) {
-								alert("This group node is in use in the current workflow, please first remove these.");
-								return;
-							}
-							if (confirm(`Are you sure you want to remove the node: "${this.selectedGroup}"`)) {
-								delete app.graph.extra.groupNodes[this.selectedGroup];
-								LiteGraph.unregisterNodeType("workflow/" + this.selectedGroup);
-							}
-							this.show();
-						},
-					},
-					"Delete Group Node"
-				),
-				$el(
-					"button.comfy-btn",
-					{
-						onclick: async () => {
-							let nodesByType;
-							let recreateNodes = [];
-							const types = {};
-							for (const g in this.modifications) {
-								const type = app.graph.extra.groupNodes[g];
-								let config = (type.config ??= {});
-
-								let nodeMods = this.modifications[g]?.nodes;
-								if (nodeMods) {
-									const keys = Object.keys(nodeMods);
-									if (nodeMods[keys[0]][ORDER]) {
-										// If any node is reordered, they will all need sequencing
-										const orderedNodes = [];
-										const orderedMods = {};
-										const orderedConfig = {};
-
-										for (const n of keys) {
-											const order = nodeMods[n][ORDER].order;
-											orderedNodes[order] = type.nodes[+n];
-											orderedMods[order] = nodeMods[n];
-											orderedNodes[order].index = order;
-										}
-
-										// Rewrite links
-										for (const l of type.links) {
-											if (l[0] != null) l[0] = type.nodes[l[0]].index;
-											if (l[2] != null) l[2] = type.nodes[l[2]].index;
-										}
-
-										// Rewrite externals
-										if (type.external) {
-											for (const ext of type.external) {
-												ext[0] = type.nodes[ext[0]];
-											}
-										}
-
-										// Rewrite modifications
-										for (const id of keys) {
-											if (config[id]) {
-												orderedConfig[type.nodes[id].index] = config[id];
-											}
-											delete config[id];
-										}
-
-										type.nodes = orderedNodes;
-										nodeMods = orderedMods;
-										type.config = config = orderedConfig;
-									}
-
-									merge(config, nodeMods);
-								}
-
-								types[g] = type;
-
-								if (!nodesByType) {
-									nodesByType = app.graph._nodes.reduce((p, n) => {
-										p[n.type] ??= [];
-										p[n.type].push(n);
-										return p;
-									}, {});
-								}
-
-								const nodes = nodesByType["workflow/" + g];
-								if (nodes) recreateNodes.push(...nodes);
-							}
-
-							await GroupNodeConfig.registerFromWorkflow(types, {});
-
-							for (const node of recreateNodes) {
-								node.recreate();
-							}
-
-							this.modifications = {};
-							this.app.graph.setDirtyCanvas(true, true);
-							this.changeGroup(this.selectedGroup, false);
-						},
-					},
-					"Save"
-				),
-				$el("button.comfy-btn", { onclick: () => this.element.close() }, "Close"),
-			]),
-		]);
-
-		this.element.replaceChildren(outer);
-		this.changeGroup(type ? groupNodes.find((g) => "workflow/" + g === type) : groupNodes[0]);
-		this.element.showModal();
-
-		this.element.addEventListener("close", () => {
-			this.draggable?.dispose();
-		});
-	}
-}

web/extensions/core/groupOptions.js

@@ -1,259 +0,0 @@
-import {app} from "../../scripts/app.js";
-
-function setNodeMode(node, mode) {
-    node.mode = mode;
-    node.graph.change();
-}
-
-function addNodesToGroup(group, nodes=[]) {
-    var x1, y1, x2, y2;
-    var nx1, ny1, nx2, ny2;
-    var node;
-
-    x1 = y1 = x2 = y2 = -1;
-    nx1 = ny1 = nx2 = ny2 = -1;
-
-    for (var n of [group._nodes, nodes]) {
-        for (var i in n) {
-            node = n[i]
-
-            nx1 = node.pos[0]
-            ny1 = node.pos[1]
-            nx2 = node.pos[0] + node.size[0]
-            ny2 = node.pos[1] + node.size[1]
-
-            if (node.type != "Reroute") {
-                ny1 -= LiteGraph.NODE_TITLE_HEIGHT;
-            }
-
-            if (node.flags?.collapsed) {
-                ny2 = ny1 + LiteGraph.NODE_TITLE_HEIGHT;
-
-                if (node?._collapsed_width) {
-                    nx2 = nx1 + Math.round(node._collapsed_width);
-                }
-            }
-
-            if (x1 == -1 || nx1 < x1) {
-                x1 = nx1;
-            }
-
-            if (y1 == -1 || ny1 < y1) {
-                y1 = ny1;
-            }
-
-            if (x2 == -1 || nx2 > x2) {
-                x2 = nx2;
-            }
-
-            if (y2 == -1 || ny2 > y2) {
-                y2 = ny2;
-            }
-        }
-    }
-
-    var padding = 10;
-
-    y1 = y1 - Math.round(group.font_size * 1.4);
-
-    group.pos = [x1 - padding, y1 - padding];
-    group.size = [x2 - x1 + padding * 2, y2 - y1 + padding * 2];
-}
-
-app.registerExtension({
-    name: "Comfy.GroupOptions",
-    setup() {
-        const orig = LGraphCanvas.prototype.getCanvasMenuOptions;
-        // graph_mouse
-        LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-            const options = orig.apply(this, arguments);
-            const group = this.graph.getGroupOnPos(this.graph_mouse[0], this.graph_mouse[1]);
-            if (!group) {
-                options.push({
-                    content: "Add Group For Selected Nodes",
-                    disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
-                    callback: () => {
-                        var group = new LiteGraph.LGraphGroup();
-                        addNodesToGroup(group, this.selected_nodes)
-                        app.canvas.graph.add(group);
-                        this.graph.change();
-                    }
-                });
-
-                return options;
-            }
-
-            // Group nodes aren't recomputed until the group is moved, this ensures the nodes are up-to-date
-            group.recomputeInsideNodes();
-            const nodesInGroup = group._nodes;
-
-            options.push({
-                content: "Add Selected Nodes To Group",
-                disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
-                callback: () => {
-                    addNodesToGroup(group, this.selected_nodes)
-                    this.graph.change();
-                }
-            });
-
-            // No nodes in group, return default options
-            if (nodesInGroup.length === 0) {
-                return options;
-            } else {
-                // Add a separator between the default options and the group options
-                options.push(null);
-            }
-
-            // Check if all nodes are the same mode
-            let allNodesAreSameMode = true;
-            for (let i = 1; i < nodesInGroup.length; i++) {
-                if (nodesInGroup[i].mode !== nodesInGroup[0].mode) {
-                    allNodesAreSameMode = false;
-                    break;
-                }
-            }
-
-            options.push({
-                content: "Fit Group To Nodes",
-                callback: () => {
-                    addNodesToGroup(group)
-                    this.graph.change();
-                }
-            });
-
-            options.push({
-                content: "Select Nodes",
-                callback: () => {
-                    this.selectNodes(nodesInGroup);
-                    this.graph.change();
-                    this.canvas.focus();
-                }
-            });
-
-            // Modes
-            // 0: Always
-            // 1: On Event
-            // 2: Never
-            // 3: On Trigger
-            // 4: Bypass
-            // If all nodes are the same mode, add a menu option to change the mode
-            if (allNodesAreSameMode) {
-                const mode = nodesInGroup[0].mode;
-                switch (mode) {
-                    case 0:
-                        // All nodes are always, option to disable, and bypass
-                        options.push({
-                            content: "Set Group Nodes to Never",
-                            callback: () => {
-                                for (const node of nodesInGroup) {
-                                    setNodeMode(node, 2);
-                                }
-                            }
-                        });
-                        options.push({
-                            content: "Bypass Group Nodes",
-                            callback: () => {
-                                for (const node of nodesInGroup) {
-                                    setNodeMode(node, 4);
-                                }
-                            }
-                        });
-                        break;
-                    case 2:
-                        // All nodes are never, option to enable, and bypass
-                        options.push({
-                            content: "Set Group Nodes to Always",
-                            callback: () => {
-                                for (const node of nodesInGroup) {
-                                    setNodeMode(node, 0);
-                                }
-                            }
-                        });
-                        options.push({
-                            content: "Bypass Group Nodes",
-                            callback: () => {
-                                for (const node of nodesInGroup) {
-                                    setNodeMode(node, 4);
-                                }
-                            }
-                        });
-                        break;
-                    case 4:
-                        // All nodes are bypass, option to enable, and disable
-                        options.push({
-                            content: "Set Group Nodes to Always",
-                            callback: () => {
-                                for (const node of nodesInGroup) {
-                                    setNodeMode(node, 0);
-                                }
-                            }
-                        });
-                        options.push({
-                            content: "Set Group Nodes to Never",
-                            callback: () => {
-                                for (const node of nodesInGroup) {
-                                    setNodeMode(node, 2);
-                                }
-                            }
-                        });
-                        break;
-                    default:
-                        // All nodes are On Trigger or On Event(Or other?), option to disable, set to always, or bypass
-                        options.push({
-                            content: "Set Group Nodes to Always",
-                            callback: () => {
-                                for (const node of nodesInGroup) {
-                                    setNodeMode(node, 0);
-                                }
-                            }
-                        });
-                        options.push({
-                            content: "Set Group Nodes to Never",
-                            callback: () => {
-                                for (const node of nodesInGroup) {
-                                    setNodeMode(node, 2);
-                                }
-                            }
-                        });
-                        options.push({
-                            content: "Bypass Group Nodes",
-                            callback: () => {
-                                for (const node of nodesInGroup) {
-                                    setNodeMode(node, 4);
-                                }
-                            }
-                        });
-                        break;
-                }
-            } else {
-                // Nodes are not all the same mode, add a menu option to change the mode to always, never, or bypass
-                options.push({
-                    content: "Set Group Nodes to Always",
-                    callback: () => {
-                        for (const node of nodesInGroup) {
-                            setNodeMode(node, 0);
-                        }
-                    }
-                });
-                options.push({
-                    content: "Set Group Nodes to Never",
-                    callback: () => {
-                        for (const node of nodesInGroup) {
-                            setNodeMode(node, 2);
-                        }
-                    }
-                });
-                options.push({
-                    content: "Bypass Group Nodes",
-                    callback: () => {
-                        for (const node of nodesInGroup) {
-                            setNodeMode(node, 4);
-                        }
-                    }
-                });
-            }
-
-            return options
-        }
-    }
-});

web/extensions/core/invertMenuScrolling.js

@@ -1,36 +0,0 @@
-import { app } from "../../scripts/app.js";
-
-// Inverts the scrolling of context menus
-
-const id = "Comfy.InvertMenuScrolling";
-app.registerExtension({
-	name: id,
-	init() {
-		const ctxMenu = LiteGraph.ContextMenu;
-		const replace = () => {
-			LiteGraph.ContextMenu = function (values, options) {
-				options = options || {};
-				if (options.scroll_speed) {
-					options.scroll_speed *= -1;
-				} else {
-					options.scroll_speed = -0.1;
-				}
-				return ctxMenu.call(this, values, options);
-			};
-			LiteGraph.ContextMenu.prototype = ctxMenu.prototype;
-		};
-		app.ui.settings.addSetting({
-			id,
-			name: "Invert Menu Scrolling",
-			type: "boolean",
-			defaultValue: false,
-			onChange(value) {
-				if (value) {
-					replace();
-				} else {
-					LiteGraph.ContextMenu = ctxMenu;
-				}
-			},
-		});
-	},
-});

web/extensions/core/keybinds.js

@@ -1,69 +0,0 @@
-import {app} from "../../scripts/app.js";
-
-app.registerExtension({
-	name: "Comfy.Keybinds",
-	init() {
-		const keybindListener = function (event) {
-			const modifierPressed = event.ctrlKey || event.metaKey;
-
-			// Queue prompt using ctrl or command + enter
-			if (modifierPressed && event.key === "Enter") {
-				app.queuePrompt(event.shiftKey ? -1 : 0).then();
-				return;
-			}
-
-			const target = event.composedPath()[0];
-			if (["INPUT", "TEXTAREA"].includes(target.tagName)) {
-				return;
-			}
-
-			const modifierKeyIdMap = {
-				s: "#comfy-save-button",
-				o: "#comfy-file-input",
-				Backspace: "#comfy-clear-button",
-				d: "#comfy-load-default-button",
-			};
-
-			const modifierKeybindId = modifierKeyIdMap[event.key];
-			if (modifierPressed && modifierKeybindId) {
-				event.preventDefault();
-
-				const elem = document.querySelector(modifierKeybindId);
-				elem.click();
-				return;
-			}
-
-			// Finished Handling all modifier keybinds, now handle the rest
-			if (event.ctrlKey || event.altKey || event.metaKey) {
-				return;
-			}
-
-			// Close out of modals using escape
-			if (event.key === "Escape") {
-				const modals = document.querySelectorAll(".comfy-modal");
-				const modal = Array.from(modals).find(modal => window.getComputedStyle(modal).getPropertyValue("display") !== "none");
-				if (modal) {
-					modal.style.display = "none";
-				}
-
-				[...document.querySelectorAll("dialog")].forEach(d => {
-					d.close();
-				});
-			}
-
-			const keyIdMap = {
-				q: "#comfy-view-queue-button",
-				h: "#comfy-view-history-button",
-				r: "#comfy-refresh-button",
-			};
-
-			const buttonId = keyIdMap[event.key];
-			if (buttonId) {
-				const button = document.querySelector(buttonId);
-				button.click();
-			}
-		}
-
-		window.addEventListener("keydown", keybindListener, true);
-	}
-});

web/extensions/core/linkRenderMode.js

@@ -1,25 +0,0 @@
-import { app } from "../../scripts/app.js";
-
-const id = "Comfy.LinkRenderMode";
-const ext = {
-	name: id,
-	async setup(app) {
-		app.ui.settings.addSetting({
-			id,
-			name: "Link Render Mode",
-			defaultValue: 2,
-			type: "combo",
-			options: [...LiteGraph.LINK_RENDER_MODES, "Hidden"].map((m, i) => ({
-				value: i,
-				text: m,
-				selected: i == app.canvas.links_render_mode,
-			})),
-			onChange(value) {
-				app.canvas.links_render_mode = +value;
-				app.graph.setDirtyCanvas(true);
-			},
-		});
-	},
-};
-
-app.registerExtension(ext);

web/extensions/core/maskeditor.js

@@ -1,967 +0,0 @@
-import { app } from "../../scripts/app.js";
-import { ComfyDialog, $el } from "../../scripts/ui.js";
-import { ComfyApp } from "../../scripts/app.js";
-import { api } from "../../scripts/api.js"
-import { ClipspaceDialog } from "./clipspace.js";
-
-// Helper function to convert a data URL to a Blob object
-function dataURLToBlob(dataURL) {
-	const parts = dataURL.split(';base64,');
-	const contentType = parts[0].split(':')[1];
-	const byteString = atob(parts[1]);
-	const arrayBuffer = new ArrayBuffer(byteString.length);
-	const uint8Array = new Uint8Array(arrayBuffer);
-	for (let i = 0; i < byteString.length; i++) {
-		uint8Array[i] = byteString.charCodeAt(i);
-	}
-	return new Blob([arrayBuffer], { type: contentType });
-}
-
-function loadedImageToBlob(image) {
-	const canvas = document.createElement('canvas');
-
-	canvas.width = image.width;
-	canvas.height = image.height;
-
-	const ctx = canvas.getContext('2d');
-
-	ctx.drawImage(image, 0, 0);
-
-	const dataURL = canvas.toDataURL('image/png', 1);
-	const blob = dataURLToBlob(dataURL);
-
-	return blob;
-}
-
-function loadImage(imagePath) {
-	return new Promise((resolve, reject) => {
-		const image = new Image();
-
-		image.onload = function() {
-			resolve(image);
-		};
-
-		image.src = imagePath;
-	});
-}
-
-async function uploadMask(filepath, formData) {
-	await api.fetchApi('/upload/mask', {
-		method: 'POST',
-		body: formData
-	}).then(response => {}).catch(error => {
-		console.error('Error:', error);
-	});
-
-	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']] = new Image();
-	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src = api.apiURL("/view?" + new URLSearchParams(filepath).toString() + app.getPreviewFormatParam() + app.getRandParam());
-
-	if(ComfyApp.clipspace.images)
-		ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']] = filepath;
-
-	ClipspaceDialog.invalidatePreview();
-}
-
-function prepare_mask(image, maskCanvas, maskCtx, maskColor) {
-	// paste mask data into alpha channel
-	maskCtx.drawImage(image, 0, 0, maskCanvas.width, maskCanvas.height);
-	const maskData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
-
-	// invert mask
-	for (let i = 0; i < maskData.data.length; i += 4) {
-		if(maskData.data[i+3] == 255)
-			maskData.data[i+3] = 0;
-		else
-			maskData.data[i+3] = 255;
-
-		maskData.data[i] = maskColor.r;
-		maskData.data[i+1] = maskColor.g;
-		maskData.data[i+2] = maskColor.b;
-	}
-
-	maskCtx.globalCompositeOperation = 'source-over';
-	maskCtx.putImageData(maskData, 0, 0);
-}
-
-class MaskEditorDialog extends ComfyDialog {
-	static instance = null;
-
-	static getInstance() {
-		if(!MaskEditorDialog.instance) {
-			MaskEditorDialog.instance = new MaskEditorDialog(app);
-		}
-
-		return MaskEditorDialog.instance;
-	}
-
-	is_layout_created =  false;
-
-	constructor() {
-		super();
-		this.element = $el("div.comfy-modal", { parent: document.body }, 
-			[ $el("div.comfy-modal-content", 
-				[...this.createButtons()]),
-			]);
-	}
-
-	createButtons() {
-		return [];
-	}
-
-	createButton(name, callback) {
-		var button = document.createElement("button");
-		button.style.pointerEvents = "auto";
-		button.innerText = name;
-		button.addEventListener("click", callback);
-		return button;
-	}
-
-	createLeftButton(name, callback) {
-		var button = this.createButton(name, callback);
-		button.style.cssFloat = "left";
-		button.style.marginRight = "4px";
-		return button;
-	}
-
-	createRightButton(name, callback) {
-		var button = this.createButton(name, callback);
-		button.style.cssFloat = "right";
-		button.style.marginLeft = "4px";
-		return button;
-	}
-
-	createLeftSlider(self, name, callback) {
-		const divElement = document.createElement('div');
-		divElement.id = "maskeditor-slider";
-		divElement.style.cssFloat = "left";
-		divElement.style.fontFamily = "sans-serif";
-		divElement.style.marginRight = "4px";
-		divElement.style.color = "var(--input-text)";
-		divElement.style.backgroundColor = "var(--comfy-input-bg)";
-		divElement.style.borderRadius = "8px";
-		divElement.style.borderColor = "var(--border-color)";
-		divElement.style.borderStyle = "solid";
-		divElement.style.fontSize = "15px";
-		divElement.style.height = "21px";
-		divElement.style.padding = "1px 6px";
-		divElement.style.display = "flex";
-		divElement.style.position = "relative";
-		divElement.style.top = "2px";
-		divElement.style.pointerEvents = "auto";
-		self.brush_slider_input = document.createElement('input');
-		self.brush_slider_input.setAttribute('type', 'range');
-		self.brush_slider_input.setAttribute('min', '1');
-		self.brush_slider_input.setAttribute('max', '100');
-		self.brush_slider_input.setAttribute('value', '10');
-		const labelElement = document.createElement("label");
-		labelElement.textContent = name;
-
-		divElement.appendChild(labelElement);
-		divElement.appendChild(self.brush_slider_input);
-
-		self.brush_slider_input.addEventListener("change", callback);
-
-		return divElement;
-	}
-
-	createOpacitySlider(self, name, callback) {
-		const divElement = document.createElement('div');
-		divElement.id = "maskeditor-opacity-slider";
-		divElement.style.cssFloat = "left";
-		divElement.style.fontFamily = "sans-serif";
-		divElement.style.marginRight = "4px";
-		divElement.style.color = "var(--input-text)";
-		divElement.style.backgroundColor = "var(--comfy-input-bg)";
-		divElement.style.borderRadius = "8px";
-		divElement.style.borderColor = "var(--border-color)";
-		divElement.style.borderStyle = "solid";
-		divElement.style.fontSize = "15px";
-		divElement.style.height = "21px";
-		divElement.style.padding = "1px 6px";
-		divElement.style.display = "flex";
-		divElement.style.position = "relative";
-		divElement.style.top = "2px";
-		divElement.style.pointerEvents = "auto";
-		self.opacity_slider_input = document.createElement('input');
-		self.opacity_slider_input.setAttribute('type', 'range');
-		self.opacity_slider_input.setAttribute('min', '0.1');
-		self.opacity_slider_input.setAttribute('max', '1.0');
-		self.opacity_slider_input.setAttribute('step', '0.01')
-		self.opacity_slider_input.setAttribute('value', '0.7');
-		const labelElement = document.createElement("label");
-		labelElement.textContent = name;
-
-		divElement.appendChild(labelElement);
-		divElement.appendChild(self.opacity_slider_input);
-
-		self.opacity_slider_input.addEventListener("input", callback);
-
-		return divElement;
-	}
-
-	setlayout(imgCanvas, maskCanvas) {
-		const self = this;
-
-		// If it is specified as relative, using it only as a hidden placeholder for padding is recommended
-		// to prevent anomalies where it exceeds a certain size and goes outside of the window.
-		var bottom_panel = document.createElement("div");
-		bottom_panel.style.position = "absolute";
-		bottom_panel.style.bottom = "0px";
-		bottom_panel.style.left = "20px";
-		bottom_panel.style.right = "20px";
-		bottom_panel.style.height = "50px";
-		bottom_panel.style.pointerEvents = "none";
-
-		var brush = document.createElement("div");
-		brush.id = "brush";
-		brush.style.backgroundColor = "transparent";
-		brush.style.outline = "1px dashed black";
-		brush.style.boxShadow = "0 0 0 1px white";
-		brush.style.borderRadius = "50%";
-		brush.style.MozBorderRadius = "50%";
-		brush.style.WebkitBorderRadius = "50%";
-		brush.style.position = "absolute";
-		brush.style.zIndex = 8889;
-		brush.style.pointerEvents = "none";
-		this.brush = brush;
-		this.element.appendChild(imgCanvas);
-		this.element.appendChild(maskCanvas);
-		this.element.appendChild(bottom_panel);
-		document.body.appendChild(brush);
-
-		var clearButton = this.createLeftButton("Clear", () => {
-			self.maskCtx.clearRect(0, 0, self.maskCanvas.width, self.maskCanvas.height);
-		});
-		
-		this.brush_size_slider = this.createLeftSlider(self, "Thickness", (event) => {
-			self.brush_size = event.target.value;
-			self.updateBrushPreview(self, null, null);
-		});
-
-		this.brush_opacity_slider = this.createOpacitySlider(self, "Opacity", (event) => {
-			self.brush_opacity = event.target.value;
-			if (self.brush_color_mode !== "negative") {
-			    self.maskCanvas.style.opacity = self.brush_opacity;
-			}
-		});
-
-		this.colorButton = this.createLeftButton(this.getColorButtonText(), () => {
-			if (self.brush_color_mode === "black") {
-				self.brush_color_mode = "white";
-			}
-			else if (self.brush_color_mode === "white") {
-				self.brush_color_mode = "negative";
-			}
-			else {
-				self.brush_color_mode = "black";
-			}
-
-			self.updateWhenBrushColorModeChanged();
-		});
-
-		var cancelButton = this.createRightButton("Cancel", () => {
-			document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
-			document.removeEventListener("keydown", MaskEditorDialog.handleKeyDown);
-			self.close();
-		});
-
-		this.saveButton = this.createRightButton("Save", () => {
-			document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
-			document.removeEventListener("keydown", MaskEditorDialog.handleKeyDown);
-				self.save();
-			});
-
-		this.element.appendChild(imgCanvas);
-		this.element.appendChild(maskCanvas);
-		this.element.appendChild(bottom_panel);
-
-		bottom_panel.appendChild(clearButton);
-		bottom_panel.appendChild(this.saveButton);
-		bottom_panel.appendChild(cancelButton);
-		bottom_panel.appendChild(this.brush_size_slider);
-		bottom_panel.appendChild(this.brush_opacity_slider);
-		bottom_panel.appendChild(this.colorButton);
-
-		imgCanvas.style.position = "absolute";
-		maskCanvas.style.position = "absolute";
-
-		imgCanvas.style.top = "200";
-		imgCanvas.style.left = "0";
-
-		maskCanvas.style.top = imgCanvas.style.top;
-		maskCanvas.style.left = imgCanvas.style.left;
-
-		const maskCanvasStyle = this.getMaskCanvasStyle();
-		maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode;
-		maskCanvas.style.opacity = maskCanvasStyle.opacity;
-	}
-
-	async show() {
-		this.zoom_ratio = 1.0;
-		this.pan_x = 0;
-		this.pan_y = 0;
-
-		if(!this.is_layout_created) {
-			// layout
-			const imgCanvas = document.createElement('canvas');
-			const maskCanvas = document.createElement('canvas');
-
-			imgCanvas.id = "imageCanvas";
-			maskCanvas.id = "maskCanvas";
-
-			this.setlayout(imgCanvas, maskCanvas);
-
-			// prepare content
-			this.imgCanvas = imgCanvas;
-			this.maskCanvas = maskCanvas;
-			this.maskCtx = maskCanvas.getContext('2d', {willReadFrequently: true });
-
-			this.setEventHandler(maskCanvas);
-
-			this.is_layout_created = true;
-
-			// replacement of onClose hook since close is not real close
-			const self = this;
-			const observer = new MutationObserver(function(mutations) {
-			mutations.forEach(function(mutation) {
-					if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
-						if(self.last_display_style && self.last_display_style != 'none' && self.element.style.display == 'none') {
-							document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
-							self.brush.style.display = "none";
-							ComfyApp.onClipspaceEditorClosed();
-						}
-
-						self.last_display_style = self.element.style.display;
-					}
-				});
-			});
-
-			const config = { attributes: true };
-			observer.observe(this.element, config);
-		}
-
-		// The keydown event needs to be reconfigured when closing the dialog as it gets removed.
-		document.addEventListener('keydown', MaskEditorDialog.handleKeyDown);
-
-		if(ComfyApp.clipspace_return_node) {
-			this.saveButton.innerText = "Save to node";
-		}
-		else {
-			this.saveButton.innerText = "Save";
-		}
-		this.saveButton.disabled = false;
-
-		this.element.style.display = "block";
-		this.element.style.width = "85%";
-		this.element.style.margin = "0 7.5%";
-		this.element.style.height = "100vh";
-		this.element.style.top = "50%";
-		this.element.style.left = "42%";
-		this.element.style.zIndex = 8888; // NOTE: alert dialog must be high priority.
-
-		await this.setImages(this.imgCanvas);
-
-		this.is_visible = true;
-	}
-
-	isOpened() {
-		return this.element.style.display == "block";
-	}
-
-	invalidateCanvas(orig_image, mask_image) {
-		this.imgCanvas.width = orig_image.width;
-		this.imgCanvas.height = orig_image.height;
-
-		this.maskCanvas.width = orig_image.width;
-		this.maskCanvas.height = orig_image.height;
-
-		let imgCtx = this.imgCanvas.getContext('2d', {willReadFrequently: true });
-		let maskCtx = this.maskCanvas.getContext('2d', {willReadFrequently: true });
-
-		imgCtx.drawImage(orig_image, 0, 0, orig_image.width, orig_image.height);
-		prepare_mask(mask_image, this.maskCanvas, maskCtx, this.getMaskColor());
-	}
-
-	async setImages(imgCanvas) {
-		let self = this;
-
-		const imgCtx = imgCanvas.getContext('2d', {willReadFrequently: true });
-		const maskCtx = this.maskCtx;
-		const maskCanvas = this.maskCanvas;
-
-		imgCtx.clearRect(0,0,this.imgCanvas.width,this.imgCanvas.height);
-		maskCtx.clearRect(0,0,this.maskCanvas.width,this.maskCanvas.height);
-
-		// image load
-		const filepath = ComfyApp.clipspace.images;
-
-		const alpha_url = new URL(ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src)
-		alpha_url.searchParams.delete('channel');
-		alpha_url.searchParams.delete('preview');
-		alpha_url.searchParams.set('channel', 'a');
-		let mask_image = await loadImage(alpha_url);
-
-		// original image load
-		const rgb_url = new URL(ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src);
-		rgb_url.searchParams.delete('channel');
-		rgb_url.searchParams.set('channel', 'rgb');
-		this.image = new Image();
-		this.image.onload = function() {
-			maskCanvas.width = self.image.width;
-			maskCanvas.height = self.image.height;
-
-			self.invalidateCanvas(self.image, mask_image);
-			self.initializeCanvasPanZoom();
-		};
-		this.image.src = rgb_url;
-	}
-
-	initializeCanvasPanZoom() {
-		// set initialize
-		let drawWidth = this.image.width;
-		let drawHeight = this.image.height;
-
-		let width = this.element.clientWidth;
-		let height = this.element.clientHeight;
-
-		if (this.image.width > width) {
-			drawWidth = width;
-			drawHeight = (drawWidth / this.image.width) * this.image.height;
-		}
-
-		if (drawHeight > height) {
-			drawHeight = height;
-			drawWidth = (drawHeight / this.image.height) * this.image.width;
-		}
-
-		this.zoom_ratio = drawWidth/this.image.width;
-
-		const canvasX = (width - drawWidth) / 2;
-		const canvasY = (height - drawHeight) / 2;
-		this.pan_x = canvasX;
-		this.pan_y = canvasY;
-
-		this.invalidatePanZoom();
-	}
-
-
-	invalidatePanZoom() {
-		let raw_width = this.image.width * this.zoom_ratio;
-		let raw_height = this.image.height * this.zoom_ratio;
-
-		if(this.pan_x + raw_width < 10) {
-			this.pan_x = 10 - raw_width;
-		}
-
-		if(this.pan_y + raw_height < 10) {
-			this.pan_y = 10 - raw_height;
-		}
-
-		let width = `${raw_width}px`;
-		let height = `${raw_height}px`;
-
-		let left = `${this.pan_x}px`;
-		let top = `${this.pan_y}px`;
-
-		this.maskCanvas.style.width = width;
-		this.maskCanvas.style.height = height;
-		this.maskCanvas.style.left = left;
-		this.maskCanvas.style.top = top;
-
-		this.imgCanvas.style.width = width;
-		this.imgCanvas.style.height = height;
-		this.imgCanvas.style.left = left;
-		this.imgCanvas.style.top = top;
-	}
-
-
-	setEventHandler(maskCanvas) {
-		const self = this;
-
-		if(!this.handler_registered) {
-			maskCanvas.addEventListener("contextmenu", (event) => {
-				event.preventDefault();
-			});
-
-			this.element.addEventListener('wheel', (event) => this.handleWheelEvent(self,event));
-			this.element.addEventListener('pointermove', (event) => this.pointMoveEvent(self,event));
-			this.element.addEventListener('touchmove', (event) => this.pointMoveEvent(self,event));
-
-			this.element.addEventListener('dragstart', (event) => {
-				if(event.ctrlKey) {
-					event.preventDefault();
-				}
-			});
-
-			maskCanvas.addEventListener('pointerdown', (event) => this.handlePointerDown(self,event));
-			maskCanvas.addEventListener('pointermove', (event) => this.draw_move(self,event));
-			maskCanvas.addEventListener('touchmove', (event) => this.draw_move(self,event));
-			maskCanvas.addEventListener('pointerover', (event) => { this.brush.style.display = "block"; });
-			maskCanvas.addEventListener('pointerleave', (event) => { this.brush.style.display = "none"; });
-
-			document.addEventListener('pointerup', MaskEditorDialog.handlePointerUp);
-
-			this.handler_registered = true;
-		}
-	}
-
-	getMaskCanvasStyle() {
-		if (this.brush_color_mode === "negative") {
-			return {
-				mixBlendMode: "difference",
-				opacity: "1",
-			};
-		}
-		else {
-			return {
-				mixBlendMode: "initial",
-				opacity: this.brush_opacity,
-			};
-		}
-	}
-
-	getMaskColor() {
-		if (this.brush_color_mode === "black") {
-			return { r: 0, g: 0, b: 0 };
-		}
-		if (this.brush_color_mode === "white") {
-			return { r: 255, g: 255, b: 255 };
-		}
-		if (this.brush_color_mode === "negative") {
-			// negative effect only works with white color
-			return { r: 255, g: 255, b: 255 };
-		}
-
-		return { r: 0, g: 0, b: 0 };
-	}
-
-	getMaskFillStyle() {
-		const maskColor = this.getMaskColor();
-
-		return "rgb(" + maskColor.r + "," + maskColor.g + "," + maskColor.b + ")";
-	}
-
-	getColorButtonText() {
-		let colorCaption = "unknown";
-
-		if (this.brush_color_mode === "black") {
-			colorCaption = "black";
-		}
-		else if (this.brush_color_mode === "white") {
-			colorCaption = "white";
-		}
-		else if (this.brush_color_mode === "negative") {
-			colorCaption = "negative";
-		}
-
-		return "Color: " + colorCaption;
-	}
-
-	updateWhenBrushColorModeChanged() {
-		this.colorButton.innerText = this.getColorButtonText();
-
-		// update mask canvas css styles
-
-		const maskCanvasStyle = this.getMaskCanvasStyle();
-		this.maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode;
-		this.maskCanvas.style.opacity = maskCanvasStyle.opacity;
-
-		// update mask canvas rgb colors
-
-		const maskColor = this.getMaskColor();
-
-		const maskData = this.maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height);
-		
-		for (let i = 0; i < maskData.data.length; i += 4) {
-			maskData.data[i] = maskColor.r;
-			maskData.data[i+1] = maskColor.g;
-			maskData.data[i+2] = maskColor.b;
-		}
-	
-		this.maskCtx.putImageData(maskData, 0, 0);
-	}
-
-	brush_opacity = 0.7;
-	brush_size = 10;
-	brush_color_mode = "black";
-	drawing_mode = false;
-	lastx = -1;
-	lasty = -1;
-	lasttime = 0;
-
-	static handleKeyDown(event) {
-		const self = MaskEditorDialog.instance;
-		if (event.key === ']') {
-			self.brush_size = Math.min(self.brush_size+2, 100);
-			self.brush_slider_input.value = self.brush_size;
-		} else if (event.key === '[') {
-			self.brush_size = Math.max(self.brush_size-2, 1);
-			self.brush_slider_input.value = self.brush_size;
-		} else if(event.key === 'Enter') {
-			self.save();
-		}
-
-		self.updateBrushPreview(self);
-	}
-
-	static handlePointerUp(event) {
-		event.preventDefault();
-
-		this.mousedown_x = null;
-		this.mousedown_y = null;
-
-		MaskEditorDialog.instance.drawing_mode = false;
-	}
-
-	updateBrushPreview(self) {
-		const brush = self.brush;
-
-		var centerX = self.cursorX;
-		var centerY = self.cursorY;
-
-		brush.style.width = self.brush_size * 2 * this.zoom_ratio + "px";
-		brush.style.height = self.brush_size * 2 * this.zoom_ratio + "px";
-		brush.style.left = (centerX - self.brush_size * this.zoom_ratio) + "px";
-		brush.style.top = (centerY - self.brush_size * this.zoom_ratio) + "px";
-	}
-
-	handleWheelEvent(self, event) {
-		event.preventDefault();
-
-		if(event.ctrlKey) {
-			// zoom canvas
-			if(event.deltaY < 0) {
-				this.zoom_ratio = Math.min(10.0, this.zoom_ratio+0.2);
-			}
-			else {
-				this.zoom_ratio = Math.max(0.2, this.zoom_ratio-0.2);
-			}
-
-			this.invalidatePanZoom();
-		}
-		else {
-			// adjust brush size
-			if(event.deltaY < 0)
-				this.brush_size = Math.min(this.brush_size+2, 100);
-			else
-				this.brush_size = Math.max(this.brush_size-2, 1);
-
-			this.brush_slider_input.value = this.brush_size;
-
-			this.updateBrushPreview(this);
-		}
-	}
-
-	pointMoveEvent(self, event) {
-		this.cursorX = event.pageX;
-		this.cursorY = event.pageY;
-
-		self.updateBrushPreview(self);
-
-		if(event.ctrlKey) {
-			event.preventDefault();
-			self.pan_move(self, event);
-		}
-
-		let left_button_down = window.TouchEvent && event instanceof TouchEvent || event.buttons == 1;
-
-		if(event.shiftKey && left_button_down) {
-			self.drawing_mode = false;
-
-			const y = event.clientY;
-			let delta = (self.zoom_lasty - y)*0.005;
-			self.zoom_ratio = Math.max(Math.min(10.0, self.last_zoom_ratio - delta), 0.2);
-
-			this.invalidatePanZoom();
-			return;
-		}
-	}
-
-	pan_move(self, event) {
-		if(event.buttons == 1) {
-			if(this.mousedown_x) {
-				let deltaX = this.mousedown_x - event.clientX;
-				let deltaY = this.mousedown_y - event.clientY;
-
-				self.pan_x = this.mousedown_pan_x - deltaX;
-				self.pan_y = this.mousedown_pan_y - deltaY;
-
-				self.invalidatePanZoom();
-			}
-		}
-	}
-
-	draw_move(self, event) {
-		if(event.ctrlKey || event.shiftKey) {
-			return;
-		}
-
-		event.preventDefault();
-
-		this.cursorX = event.pageX;
-		this.cursorY = event.pageY;
-
-		self.updateBrushPreview(self);
-
-		let left_button_down = window.TouchEvent && event instanceof TouchEvent || event.buttons == 1;
-		let right_button_down = [2, 5, 32].includes(event.buttons);
-
-		if (!event.altKey && left_button_down) {
-			var diff = performance.now() - self.lasttime;
-
-			const maskRect = self.maskCanvas.getBoundingClientRect();
-
-			var x = event.offsetX;
-			var y = event.offsetY
-
-			if(event.offsetX == null) {
-				x = event.targetTouches[0].clientX - maskRect.left;
-			}
-
-			if(event.offsetY == null) {
-				y = event.targetTouches[0].clientY - maskRect.top;
-			}
-
-			x /= self.zoom_ratio;
-			y /= self.zoom_ratio;
-
-			var brush_size = this.brush_size;
-			if(event instanceof PointerEvent && event.pointerType == 'pen') {
-				brush_size *= event.pressure;
-				this.last_pressure = event.pressure;
-			}
-			else if(window.TouchEvent && event instanceof TouchEvent && diff < 20){
-				// The firing interval of PointerEvents in Pen is unreliable, so it is supplemented by TouchEvents.
-				brush_size *= this.last_pressure;
-			}
-			else {
-				brush_size = this.brush_size;
-			}
-
-			if(diff > 20 && !this.drawing_mode)
-				requestAnimationFrame(() => {
-					self.maskCtx.beginPath();
-					self.maskCtx.fillStyle = this.getMaskFillStyle();
-					self.maskCtx.globalCompositeOperation = "source-over";
-					self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
-					self.maskCtx.fill();
-					self.lastx = x;
-					self.lasty = y;
-				});
-			else
-				requestAnimationFrame(() => {
-					self.maskCtx.beginPath();
-					self.maskCtx.fillStyle = this.getMaskFillStyle();
-					self.maskCtx.globalCompositeOperation = "source-over";
-
-					var dx = x - self.lastx;
-					var dy = y - self.lasty;
-
-					var distance = Math.sqrt(dx * dx + dy * dy);
-					var directionX = dx / distance;
-					var directionY = dy / distance;
-
-					for (var i = 0; i < distance; i+=5) {
-						var px = self.lastx + (directionX * i);
-						var py = self.lasty + (directionY * i);
-						self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false);
-						self.maskCtx.fill();
-					}
-					self.lastx = x;
-					self.lasty = y;
-				});
-
-			self.lasttime = performance.now();
-		}
-		else if((event.altKey && left_button_down) || right_button_down) {
-			const maskRect = self.maskCanvas.getBoundingClientRect();
-			const x = (event.offsetX || event.targetTouches[0].clientX - maskRect.left) / self.zoom_ratio;
-			const y = (event.offsetY || event.targetTouches[0].clientY - maskRect.top) / self.zoom_ratio;
-
-			var brush_size = this.brush_size;
-			if(event instanceof PointerEvent && event.pointerType == 'pen') {
-				brush_size *= event.pressure;
-				this.last_pressure = event.pressure;
-			}
-			else if(window.TouchEvent && event instanceof TouchEvent && diff < 20){
-				brush_size *= this.last_pressure;
-			}
-			else {
-				brush_size = this.brush_size;
-			}
-
-			if(diff > 20 && !drawing_mode) // cannot tracking drawing_mode for touch event
-				requestAnimationFrame(() => {
-					self.maskCtx.beginPath();
-					self.maskCtx.globalCompositeOperation = "destination-out";
-					self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
-					self.maskCtx.fill();
-					self.lastx = x;
-					self.lasty = y;
-				});
-			else
-				requestAnimationFrame(() => {
-					self.maskCtx.beginPath();
-					self.maskCtx.globalCompositeOperation = "destination-out";
-					
-					var dx = x - self.lastx;
-					var dy = y - self.lasty;
-
-					var distance = Math.sqrt(dx * dx + dy * dy);
-					var directionX = dx / distance;
-					var directionY = dy / distance;
-
-					for (var i = 0; i < distance; i+=5) {
-						var px = self.lastx + (directionX * i);
-						var py = self.lasty + (directionY * i);
-						self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false);
-						self.maskCtx.fill();
-					}
-					self.lastx = x;
-					self.lasty = y;
-				});
-
-				self.lasttime = performance.now();
-		}
-	}
-
-	handlePointerDown(self, event) {
-		if(event.ctrlKey) {
-			if (event.buttons == 1) {
-				this.mousedown_x = event.clientX;
-				this.mousedown_y = event.clientY;
-
-				this.mousedown_pan_x = this.pan_x;
-				this.mousedown_pan_y = this.pan_y;
-			}
-			return;
-		}
-
-		var brush_size = this.brush_size;
-		if(event instanceof PointerEvent && event.pointerType == 'pen') {
-			brush_size *= event.pressure;
-			this.last_pressure = event.pressure;
-		}
-
-		if ([0, 2, 5].includes(event.button)) {
-			self.drawing_mode = true;
-
-			event.preventDefault();
-
-			if(event.shiftKey) {
-				self.zoom_lasty = event.clientY;
-				self.last_zoom_ratio = self.zoom_ratio;
-				return;
-			}
-
-			const maskRect = self.maskCanvas.getBoundingClientRect();
-			const x = (event.offsetX || event.targetTouches[0].clientX - maskRect.left) / self.zoom_ratio;
-			const y = (event.offsetY || event.targetTouches[0].clientY - maskRect.top) / self.zoom_ratio;
-
-			self.maskCtx.beginPath();
-			if (!event.altKey && event.button == 0) {
-				self.maskCtx.fillStyle = this.getMaskFillStyle();
-				self.maskCtx.globalCompositeOperation = "source-over";
-			} else {
-				self.maskCtx.globalCompositeOperation = "destination-out";
-			}
-			self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
-			self.maskCtx.fill();
-			self.lastx = x;
-			self.lasty = y;
-			self.lasttime = performance.now();
-		}
-	}
-
-	async save() {
-		const backupCanvas = document.createElement('canvas');
-		const backupCtx = backupCanvas.getContext('2d', {willReadFrequently:true});
-		backupCanvas.width = this.image.width;
-		backupCanvas.height = this.image.height;
-
-		backupCtx.clearRect(0,0, backupCanvas.width, backupCanvas.height);
-		backupCtx.drawImage(this.maskCanvas,
-			0, 0, this.maskCanvas.width, this.maskCanvas.height,
-			0, 0, backupCanvas.width, backupCanvas.height);
-
-		// paste mask data into alpha channel
-		const backupData = backupCtx.getImageData(0, 0, backupCanvas.width, backupCanvas.height);
-
-		// refine mask image
-		for (let i = 0; i < backupData.data.length; i += 4) {
-			if(backupData.data[i+3] == 255)
-				backupData.data[i+3] = 0;
-			else
-				backupData.data[i+3] = 255;
-
-			backupData.data[i] = 0;
-			backupData.data[i+1] = 0;
-			backupData.data[i+2] = 0;
-		}
-
-		backupCtx.globalCompositeOperation = 'source-over';
-		backupCtx.putImageData(backupData, 0, 0);
-
-		const formData = new FormData();
-		const filename = "clipspace-mask-" + performance.now() + ".png";
-
-		const item =
-			{
-				"filename": filename,
-				"subfolder": "clipspace",
-				"type": "input",
-			};
-
-		if(ComfyApp.clipspace.images)
-			ComfyApp.clipspace.images[0] = item;
-
-		if(ComfyApp.clipspace.widgets) {
-			const index = ComfyApp.clipspace.widgets.findIndex(obj => obj.name === 'image');
-
-			if(index >= 0)
-				ComfyApp.clipspace.widgets[index].value = item;
-		}
-
-		const dataURL = backupCanvas.toDataURL();
-		const blob = dataURLToBlob(dataURL);
-
-		let original_url = new URL(this.image.src);
-
-		const original_ref = { filename: original_url.searchParams.get('filename') };
-
-		let original_subfolder = original_url.searchParams.get("subfolder");
-		if(original_subfolder)
-			original_ref.subfolder = original_subfolder;
-
-		let original_type = original_url.searchParams.get("type");
-		if(original_type)
-			original_ref.type = original_type;
-
-		formData.append('image', blob, filename);
-		formData.append('original_ref', JSON.stringify(original_ref));
-		formData.append('type', "input");
-		formData.append('subfolder', "clipspace");
-
-		this.saveButton.innerText = "Saving...";
-		this.saveButton.disabled = true;
-		await uploadMask(item, formData);
-		ComfyApp.onClipspaceEditorSave();
-		this.close();
-	}
-}
-
-app.registerExtension({
-	name: "Comfy.MaskEditor",
-	init(app) {
-		ComfyApp.open_maskeditor =
-			function () {
-				const dlg = MaskEditorDialog.getInstance();
-				if(!dlg.isOpened()) {
-					dlg.show();
-				}
-			};
-
-		const context_predicate = () => ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0
-		ClipspaceDialog.registerButton("MaskEditor", context_predicate, ComfyApp.open_maskeditor);
-	}
-});

web/extensions/core/nodeTemplates.js

@@ -1,412 +0,0 @@
-import { app } from "../../scripts/app.js";
-import { api } from "../../scripts/api.js";
-import { ComfyDialog, $el } from "../../scripts/ui.js";
-import { GroupNodeConfig, GroupNodeHandler } from "./groupNode.js";
-
-// Adds the ability to save and add multiple nodes as a template
-// To save:
-// Select multiple nodes (ctrl + drag to select a region or ctrl+click individual nodes)
-// Right click the canvas
-// Save Node Template -> give it a name
-//
-// To add:
-// Right click the canvas
-// Node templates -> click the one to add
-//
-// To delete/rename:
-// Right click the canvas
-// Node templates -> Manage
-//
-// To rearrange:
-// Open the manage dialog and Drag and drop elements using the "Name:" label as handle
-
-const id = "Comfy.NodeTemplates";
-const file = "comfy.templates.json";
-
-class ManageTemplates extends ComfyDialog {
-	constructor() {
-		super();
-		this.load().then((v) => {
-			this.templates = v;
-		});
-
-		this.element.classList.add("comfy-manage-templates");
-		this.draggedEl = null;
-		this.saveVisualCue = null;
-		this.emptyImg = new Image();
-		this.emptyImg.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
-
-		this.importInput = $el("input", {
-			type: "file",
-			accept: ".json",
-			multiple: true,
-			style: { display: "none" },
-			parent: document.body,
-			onchange: () => this.importAll(),
-		});
-	}
-
-	createButtons() {
-		const btns = super.createButtons();
-		btns[0].textContent = "Close";
-		btns[0].onclick = (e) => {
-			clearTimeout(this.saveVisualCue);
-			this.close();
-		};
-		btns.unshift(
-			$el("button", {
-				type: "button",
-				textContent: "Export",
-				onclick: () => this.exportAll(),
-			})
-		);
-		btns.unshift(
-			$el("button", {
-				type: "button",
-				textContent: "Import",
-				onclick: () => {
-					this.importInput.click();
-				},
-			})
-		);
-		return btns;
-	}
-
-	async load() {
-		let templates = [];
-		if (app.storageLocation === "server") {
-			if (app.isNewUserSession) {
-				// New user so migrate existing templates
-				const json = localStorage.getItem(id);
-				if (json) {
-					templates = JSON.parse(json);
-				}
-				await api.storeUserData(file, json, { stringify: false });
-			} else {
-				const res = await api.getUserData(file);
-				if (res.status === 200) {
-					try {
-						templates = await res.json();
-					} catch (error) {
-					}
-				} else if (res.status !== 404) {
-					console.error(res.status + " " + res.statusText);
-				}
-			}
-		} else {
-			const json = localStorage.getItem(id);
-			if (json) {
-				templates = JSON.parse(json);
-			}
-		}
-
-		return templates ?? [];
-	}
-
-	async store() {
-		if(app.storageLocation === "server") {
-			const templates = JSON.stringify(this.templates, undefined, 4);
-			localStorage.setItem(id, templates); // Backwards compatibility
-			try {
-				await api.storeUserData(file, templates, { stringify: false });
-			} catch (error) {
-				console.error(error);
-				alert(error.message);
-			}
-		} else {
-			localStorage.setItem(id, JSON.stringify(this.templates));
-		}
-	}
-
-	async importAll() {
-		for (const file of this.importInput.files) {
-			if (file.type === "application/json" || file.name.endsWith(".json")) {
-				const reader = new FileReader();
-				reader.onload = async () => {
-					const importFile = JSON.parse(reader.result);
-					if (importFile?.templates) {
-						for (const template of importFile.templates) {
-							if (template?.name && template?.data) {
-								this.templates.push(template);
-							}
-						}
-						await this.store();
-					}
-				};
-				await reader.readAsText(file);
-			}
-		}
-
-		this.importInput.value = null;
-
-		this.close();
-	}
-
-	exportAll() {
-		if (this.templates.length == 0) {
-			alert("No templates to export.");
-			return;
-		}
-
-		const json = JSON.stringify({ templates: this.templates }, null, 2); // convert the data to a JSON string
-		const blob = new Blob([json], { type: "application/json" });
-		const url = URL.createObjectURL(blob);
-		const a = $el("a", {
-			href: url,
-			download: "node_templates.json",
-			style: { display: "none" },
-			parent: document.body,
-		});
-		a.click();
-		setTimeout(function () {
-			a.remove();
-			window.URL.revokeObjectURL(url);
-		}, 0);
-	}
-
-	show() {
-		// Show list of template names + delete button
-		super.show(
-			$el(
-				"div",
-				{},
-				this.templates.flatMap((t,i) => {
-					let nameInput;
-					return [
-						$el(
-							"div",
-							{
-								dataset: { id: i },
-								className: "tempateManagerRow",
-								style: {
-									display: "grid",
-									gridTemplateColumns: "1fr auto",
-									border: "1px dashed transparent",
-									gap: "5px",
-									backgroundColor: "var(--comfy-menu-bg)"
-								},
-								ondragstart: (e) => {
-									this.draggedEl = e.currentTarget;
-									e.currentTarget.style.opacity = "0.6";
-									e.currentTarget.style.border = "1px dashed yellow";
-									e.dataTransfer.effectAllowed = 'move';
-									e.dataTransfer.setDragImage(this.emptyImg, 0, 0);
-								},
-								ondragend: (e) => {
-									e.target.style.opacity = "1";
-									e.currentTarget.style.border = "1px dashed transparent";
-									e.currentTarget.removeAttribute("draggable");
-
-									// rearrange the elements
-									this.element.querySelectorAll('.tempateManagerRow').forEach((el,i) => {
-										var prev_i = el.dataset.id;
-
-										if ( el == this.draggedEl && prev_i != i ) {
-											this.templates.splice(i, 0, this.templates.splice(prev_i, 1)[0]);
-										}
-										el.dataset.id = i;
-									});
-									this.store();
-								},
-								ondragover: (e) => {
-									e.preventDefault();
-									if ( e.currentTarget == this.draggedEl )
-										return;
-
-									let rect = e.currentTarget.getBoundingClientRect();
-									if (e.clientY > rect.top + rect.height / 2) {
-										e.currentTarget.parentNode.insertBefore(this.draggedEl, e.currentTarget.nextSibling);
-									} else {
-										e.currentTarget.parentNode.insertBefore(this.draggedEl, e.currentTarget);
-									}
-								}
-							},
-							[
-								$el(
-									"label",
-									{
-										textContent: "Name: ",
-										style: {
-											cursor: "grab",
-										},
-										onmousedown: (e) => {
-											// enable dragging only from the label
-											if (e.target.localName == 'label')
-												e.currentTarget.parentNode.draggable = 'true';
-										}
-									},
-									[
-										$el("input", {
-											value: t.name,
-											dataset: { name: t.name },
-											style: {
-												transitionProperty: 'background-color',
-												transitionDuration: '0s',
-											},
-											onchange: (e) => {
-												clearTimeout(this.saveVisualCue);
-												var el = e.target;
-												var row = el.parentNode.parentNode;
-												this.templates[row.dataset.id].name = el.value.trim() || 'untitled';
-												this.store();
-												el.style.backgroundColor = 'rgb(40, 95, 40)';
-												el.style.transitionDuration = '0s';
-												this.saveVisualCue = setTimeout(function () {
-													el.style.transitionDuration = '.7s';
-													el.style.backgroundColor = 'var(--comfy-input-bg)';
-												}, 15);
-											},
-											onkeypress: (e) => {
-												var el = e.target;
-												clearTimeout(this.saveVisualCue);
-												el.style.transitionDuration = '0s';
-												el.style.backgroundColor = 'var(--comfy-input-bg)';
-											},
-											$: (el) => (nameInput = el),
-										})
-									]
-								),
-								$el(
-									"div",
-									{},
-									[
-										$el("button", {
-											textContent: "Export",
-											style: {
-												fontSize: "12px",
-												fontWeight: "normal",
-											},
-											onclick: (e) => {
-												const json = JSON.stringify({templates: [t]}, null, 2); // convert the data to a JSON string
-												const blob = new Blob([json], {type: "application/json"});
-												const url = URL.createObjectURL(blob);
-												const a = $el("a", {
-													href: url,
-													download: (nameInput.value || t.name) + ".json",
-													style: {display: "none"},
-													parent: document.body,
-												});
-												a.click();
-												setTimeout(function () {
-													a.remove();
-													window.URL.revokeObjectURL(url);
-												}, 0);
-											},
-										}),
-										$el("button", {
-											textContent: "Delete",
-											style: {
-												fontSize: "12px",
-												color: "red",
-												fontWeight: "normal",
-											},
-											onclick: (e) => {
-												const item = e.target.parentNode.parentNode;
-												item.parentNode.removeChild(item);
-												this.templates.splice(item.dataset.id*1, 1);
-												this.store();
-												// update the rows index, setTimeout ensures that the list is updated
-												var that = this;
-												setTimeout(function (){
-													that.element.querySelectorAll('.tempateManagerRow').forEach((el,i) => {
-														el.dataset.id = i;
-													});
-												}, 0);
-											},
-										}),
-									]
-								),
-							]
-						)
-					];
-				})
-			)
-		);
-	}
-}
-
-app.registerExtension({
-	name: id,
-	setup() {
-		const manage = new ManageTemplates();
-
-		const clipboardAction = async (cb) => {
-			// We use the clipboard functions but dont want to overwrite the current user clipboard
-			// Restore it after we've run our callback
-			const old = localStorage.getItem("litegrapheditor_clipboard");
-			await cb();
-			localStorage.setItem("litegrapheditor_clipboard", old);
-		};
-
-		const orig = LGraphCanvas.prototype.getCanvasMenuOptions;
-		LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-			const options = orig.apply(this, arguments);
-
-			options.push(null);
-			options.push({
-				content: `Save Selected as Template`,
-				disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
-				callback: () => {
-					const name = prompt("Enter name");
-					if (!name?.trim()) return;
-
-					clipboardAction(() => {
-						app.canvas.copyToClipboard();
-						let data = localStorage.getItem("litegrapheditor_clipboard");
-						data = JSON.parse(data);
-						const nodeIds = Object.keys(app.canvas.selected_nodes);
-						for (let i = 0; i < nodeIds.length; i++) {
-							const node = app.graph.getNodeById(nodeIds[i]);
-							const nodeData = node?.constructor.nodeData;
-							
-							let groupData = GroupNodeHandler.getGroupData(node);
-							if (groupData) {
-								groupData = groupData.nodeData;
-								if (!data.groupNodes) {
-									data.groupNodes = {};
-								}
-								data.groupNodes[nodeData.name] = groupData;
-								data.nodes[i].type = nodeData.name;
-							}
-						}
-
-						manage.templates.push({
-							name,
-							data: JSON.stringify(data),
-						});
-						manage.store();
-					});
-				},
-			});
-
-			// Map each template to a menu item
-			const subItems = manage.templates.map((t) => {
-				return {
-					content: t.name,
-					callback: () => {
-						clipboardAction(async () => {
-							const data = JSON.parse(t.data);
-							await GroupNodeConfig.registerFromWorkflow(data.groupNodes, {});
-							localStorage.setItem("litegrapheditor_clipboard", t.data);
-							app.canvas.pasteFromClipboard();
-						});
-					},
-				};
-			});
-
-			subItems.push(null, {
-				content: "Manage",
-				callback: () => manage.show(),
-			});
-
-			options.push({
-				content: "Node Templates",
-				submenu: {
-					options: subItems,
-				},
-			});
-
-			return options;
-		};
-	},
-});

web/extensions/core/noteNode.js

@@ -1,41 +0,0 @@
-import {app} from "../../scripts/app.js";
-import {ComfyWidgets} from "../../scripts/widgets.js";
-// Node that add notes to your project
-
-app.registerExtension({
-    name: "Comfy.NoteNode",
-    registerCustomNodes() {
-        class NoteNode {
-            color=LGraphCanvas.node_colors.yellow.color;
-            bgcolor=LGraphCanvas.node_colors.yellow.bgcolor;
-            groupcolor = LGraphCanvas.node_colors.yellow.groupcolor;
-            constructor() {
-                if (!this.properties) {
-                    this.properties = {};
-                    this.properties.text="";
-                }
-
-                ComfyWidgets.STRING(this, "", ["", {default:this.properties.text, multiline: true}], app)
-
-                this.serialize_widgets = true;
-                this.isVirtualNode = true;
-
-            }
-
-
-        }
-
-        // Load default visibility
-
-        LiteGraph.registerNodeType(
-            "Note",
-            Object.assign(NoteNode, {
-                title_mode: LiteGraph.NORMAL_TITLE,
-                title: "Note",
-                collapsable: true,
-            })
-        );
-
-        NoteNode.category = "utils";
-    },
-});

web/extensions/core/rerouteNode.js

@@ -1,274 +0,0 @@
-import { app } from "../../scripts/app.js";
-import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs.js";
-
-// Node that allows you to redirect connections for cleaner graphs
-
-app.registerExtension({
-	name: "Comfy.RerouteNode",
-	registerCustomNodes(app) {
-		class RerouteNode {
-			constructor() {
-				if (!this.properties) {
-					this.properties = {};
-				}
-				this.properties.showOutputText = RerouteNode.defaultVisibility;
-				this.properties.horizontal = false;
-
-				this.addInput("", "*");
-				this.addOutput(this.properties.showOutputText ? "*" : "", "*");
-
-				this.onAfterGraphConfigured = function () {
-					requestAnimationFrame(() => {
-						this.onConnectionsChange(LiteGraph.INPUT, null, true, null);
-					});
-				};
-
-				this.onConnectionsChange = function (type, index, connected, link_info) {
-					this.applyOrientation();
-
-					// Prevent multiple connections to different types when we have no input
-					if (connected && type === LiteGraph.OUTPUT) {
-						// Ignore wildcard nodes as these will be updated to real types
-						const types = new Set(this.outputs[0].links.map((l) => app.graph.links[l].type).filter((t) => t !== "*"));
-						if (types.size > 1) {
-							const linksToDisconnect = [];
-							for (let i = 0; i < this.outputs[0].links.length - 1; i++) {
-								const linkId = this.outputs[0].links[i];
-								const link = app.graph.links[linkId];
-								linksToDisconnect.push(link);
-							}
-							for (const link of linksToDisconnect) {
-								const node = app.graph.getNodeById(link.target_id);
-								node.disconnectInput(link.target_slot);
-							}
-						}
-					}
-
-					// Find root input
-					let currentNode = this;
-					let updateNodes = [];
-					let inputType = null;
-					let inputNode = null;
-					while (currentNode) {
-						updateNodes.unshift(currentNode);
-						const linkId = currentNode.inputs[0].link;
-						if (linkId !== null) {
-							const link = app.graph.links[linkId];
-							if (!link) return;
-							const node = app.graph.getNodeById(link.origin_id);
-							const type = node.constructor.type;
-							if (type === "Reroute") {
-								if (node === this) {
-									// We've found a circle
-									currentNode.disconnectInput(link.target_slot);
-									currentNode = null;
-								} else {
-									// Move the previous node
-									currentNode = node;
-								}
-							} else {
-								// We've found the end
-								inputNode = currentNode;
-								inputType = node.outputs[link.origin_slot]?.type ?? null;
-								break;
-							}
-						} else {
-							// This path has no input node
-							currentNode = null;
-							break;
-						}
-					}
-
-					// Find all outputs
-					const nodes = [this];
-					let outputType = null;
-					while (nodes.length) {
-						currentNode = nodes.pop();
-						const outputs = (currentNode.outputs ? currentNode.outputs[0].links : []) || [];
-						if (outputs.length) {
-							for (const linkId of outputs) {
-								const link = app.graph.links[linkId];
-
-								// When disconnecting sometimes the link is still registered
-								if (!link) continue;
-
-								const node = app.graph.getNodeById(link.target_id);
-								const type = node.constructor.type;
-
-								if (type === "Reroute") {
-									// Follow reroute nodes
-									nodes.push(node);
-									updateNodes.push(node);
-								} else {
-									// We've found an output
-									const nodeOutType =
-										node.inputs && node.inputs[link?.target_slot] && node.inputs[link.target_slot].type
-											? node.inputs[link.target_slot].type
-											: null;
-									if (inputType && inputType !== "*" && nodeOutType !== inputType) {
-										// The output doesnt match our input so disconnect it
-										node.disconnectInput(link.target_slot);
-									} else {
-										outputType = nodeOutType;
-									}
-								}
-							}
-						} else {
-							// No more outputs for this path
-						}
-					}
-
-					const displayType = inputType || outputType || "*";
-					const color = LGraphCanvas.link_type_colors[displayType];
-
-					let widgetConfig;
-					let targetWidget;
-					let widgetType;
-					// Update the types of each node
-					for (const node of updateNodes) {
-						// If we dont have an input type we are always wildcard but we'll show the output type
-						// This lets you change the output link to a different type and all nodes will update
-						node.outputs[0].type = inputType || "*";
-						node.__outputType = displayType;
-						node.outputs[0].name = node.properties.showOutputText ? displayType : "";
-						node.size = node.computeSize();
-						node.applyOrientation();
-
-						for (const l of node.outputs[0].links || []) {
-							const link = app.graph.links[l];
-							if (link) {
-								link.color = color;
-
-								if (app.configuringGraph) continue;
-								const targetNode = app.graph.getNodeById(link.target_id);
-								const targetInput = targetNode.inputs?.[link.target_slot];
-								if (targetInput?.widget) {
-									const config = getWidgetConfig(targetInput);
-									if (!widgetConfig) {
-										widgetConfig = config[1] ?? {};
-										widgetType = config[0];
-									}
-									if (!targetWidget) {
-										targetWidget = targetNode.widgets?.find((w) => w.name === targetInput.widget.name);
-									}
-
-									const merged = mergeIfValid(targetInput, [config[0], widgetConfig]);
-									if (merged.customConfig) {
-										widgetConfig = merged.customConfig;
-									}
-								}
-							}
-						}
-					}
-
-					for (const node of updateNodes) {
-						if (widgetConfig && outputType) {
-							node.inputs[0].widget = { name: "value" };
-							setWidgetConfig(node.inputs[0], [widgetType ?? displayType, widgetConfig], targetWidget);
-						} else {
-							setWidgetConfig(node.inputs[0], null);
-						}
-					}
-
-					if (inputNode) {
-						const link = app.graph.links[inputNode.inputs[0].link];
-						if (link) {
-							link.color = color;
-						}
-					}
-				};
-
-				this.clone = function () {
-					const cloned = RerouteNode.prototype.clone.apply(this);
-					cloned.removeOutput(0);
-					cloned.addOutput(this.properties.showOutputText ? "*" : "", "*");
-					cloned.size = cloned.computeSize();
-					return cloned;
-				};
-
-				// This node is purely frontend and does not impact the resulting prompt so should not be serialized
-				this.isVirtualNode = true;
-			}
-
-			getExtraMenuOptions(_, options) {
-				options.unshift(
-					{
-						content: (this.properties.showOutputText ? "Hide" : "Show") + " Type",
-						callback: () => {
-							this.properties.showOutputText = !this.properties.showOutputText;
-							if (this.properties.showOutputText) {
-								this.outputs[0].name = this.__outputType || this.outputs[0].type;
-							} else {
-								this.outputs[0].name = "";
-							}
-							this.size = this.computeSize();
-							this.applyOrientation();
-							app.graph.setDirtyCanvas(true, true);
-						},
-					},
-					{
-						content: (RerouteNode.defaultVisibility ? "Hide" : "Show") + " Type By Default",
-						callback: () => {
-							RerouteNode.setDefaultTextVisibility(!RerouteNode.defaultVisibility);
-						},
-					},
-					{
-						// naming is inverted with respect to LiteGraphNode.horizontal
-						// LiteGraphNode.horizontal == true means that
-						// each slot in the inputs and outputs are layed out horizontally,
-						// which is the opposite of the visual orientation of the inputs and outputs as a node
-						content: "Set " + (this.properties.horizontal ? "Horizontal" : "Vertical"),
-						callback: () => {
-							this.properties.horizontal = !this.properties.horizontal;
-							this.applyOrientation();
-						},
-					}
-				);
-			}
-			applyOrientation() {
-				this.horizontal = this.properties.horizontal;
-				if (this.horizontal) {
-					// we correct the input position, because LiteGraphNode.horizontal
-					// doesn't account for title presence
-					// which reroute nodes don't have
-					this.inputs[0].pos = [this.size[0] / 2, 0];
-				} else {
-					delete this.inputs[0].pos;
-				}
-				app.graph.setDirtyCanvas(true, true);
-			}
-
-			computeSize() {
-				return [
-					this.properties.showOutputText && this.outputs && this.outputs.length
-						? Math.max(75, LiteGraph.NODE_TEXT_SIZE * this.outputs[0].name.length * 0.6 + 40)
-						: 75,
-					26,
-				];
-			}
-
-			static setDefaultTextVisibility(visible) {
-				RerouteNode.defaultVisibility = visible;
-				if (visible) {
-					localStorage["Comfy.RerouteNode.DefaultVisibility"] = "true";
-				} else {
-					delete localStorage["Comfy.RerouteNode.DefaultVisibility"];
-				}
-			}
-		}
-
-		// Load default visibility
-		RerouteNode.setDefaultTextVisibility(!!localStorage["Comfy.RerouteNode.DefaultVisibility"]);
-
-		LiteGraph.registerNodeType(
-			"Reroute",
-			Object.assign(RerouteNode, {
-				title_mode: LiteGraph.NO_TITLE,
-				title: "Reroute",
-				collapsable: false,
-			})
-		);
-
-		RerouteNode.category = "utils";
-	},
-});

web/extensions/core/saveImageExtraOutput.js

@@ -1,35 +0,0 @@
-import { app } from "../../scripts/app.js";
-import { applyTextReplacements } from "../../scripts/utils.js";
-// Use widget values and dates in output filenames
-
-app.registerExtension({
-	name: "Comfy.SaveImageExtraOutput",
-	async beforeRegisterNodeDef(nodeType, nodeData, app) {
-		if (nodeData.name === "SaveImage") {
-			const onNodeCreated = nodeType.prototype.onNodeCreated;
-			// When the SaveImage node is created we want to override the serialization of the output name widget to run our S&R
-			nodeType.prototype.onNodeCreated = function () {
-				const r = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
-
-				const widget = this.widgets.find((w) => w.name === "filename_prefix");
-				widget.serializeValue = () => {
-					return applyTextReplacements(app, widget.value);
-				};
-
-				return r;
-			};
-		} else {
-			// When any other node is created add a property to alias the node
-			const onNodeCreated = nodeType.prototype.onNodeCreated;
-			nodeType.prototype.onNodeCreated = function () {
-				const r = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
-
-				if (!this.properties || !("Node name for S&R" in this.properties)) {
-					this.addProperty("Node name for S&R", this.constructor.type, "string");
-				}
-
-				return r;
-			};
-		}
-	},
-});

web/extensions/core/simpleTouchSupport.js

@@ -1,102 +0,0 @@
-import { app } from "../../scripts/app.js";
-
-let touchZooming;
-let touchCount = 0;
-
-app.registerExtension({
-	name: "Comfy.SimpleTouchSupport",
-	setup() {
-		let zoomPos;
-		let touchTime;
-		let lastTouch;
-
-		function getMultiTouchPos(e) {
-			return Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
-		}
-
-		app.canvasEl.addEventListener(
-			"touchstart",
-			(e) => {
-				touchCount++;
-				lastTouch = null;
-				if (e.touches?.length === 1) {
-					// Store start time for press+hold for context menu
-					touchTime = new Date();
-					lastTouch = e.touches[0];
-				} else {
-					touchTime = null;
-					if (e.touches?.length === 2) {
-						// Store center pos for zoom
-						zoomPos = getMultiTouchPos(e);
-						app.canvas.pointer_is_down = false;
-					}
-				}
-			},
-			true
-		);
-
-		app.canvasEl.addEventListener("touchend", (e) => {
-			touchZooming = false;
-			touchCount = e.touches?.length ?? touchCount - 1;
-			if (touchTime && !e.touches?.length) {
-				if (new Date() - touchTime > 600) {
-					try {
-						// hack to get litegraph to use this event
-						e.constructor = CustomEvent;
-					} catch (error) {}
-					e.clientX = lastTouch.clientX;
-					e.clientY = lastTouch.clientY;
-
-					app.canvas.pointer_is_down = true;
-					app.canvas._mousedown_callback(e);
-				}
-				touchTime = null;
-			}
-		});
-
-		app.canvasEl.addEventListener(
-			"touchmove",
-			(e) => {
-				touchTime = null;
-				if (e.touches?.length === 2) {
-					app.canvas.pointer_is_down = false;
-					touchZooming = true;
-					LiteGraph.closeAllContextMenus();
-					app.canvas.search_box?.close();
-					const newZoomPos = getMultiTouchPos(e);
-
-					const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
-					const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
-
-					let scale = app.canvas.ds.scale;
-					const diff = zoomPos - newZoomPos;
-					if (diff > 0.5) {
-						scale *= 1 / 1.07;
-					} else if (diff < -0.5) {
-						scale *= 1.07;
-					}
-					app.canvas.ds.changeScale(scale, [midX, midY]);
-					app.canvas.setDirty(true, true);
-					zoomPos = newZoomPos;
-				}
-			},
-			true
-		);
-	},
-});
-
-const processMouseDown = LGraphCanvas.prototype.processMouseDown;
-LGraphCanvas.prototype.processMouseDown = function (e) {
-	if (touchZooming || touchCount) {
-		return;
-	}
-	return processMouseDown.apply(this, arguments);
-};
-
-const processMouseMove = LGraphCanvas.prototype.processMouseMove;
-LGraphCanvas.prototype.processMouseMove = function (e) {
-	if (touchZooming || touchCount > 1) {
-		return;
-	}
-	return processMouseMove.apply(this, arguments);
-};

web/extensions/core/slotDefaults.js

@@ -1,91 +0,0 @@
-import { app } from "../../scripts/app.js";
-import { ComfyWidgets } from "../../scripts/widgets.js";
-// Adds defaults for quickly adding nodes with middle click on the input/output
-
-app.registerExtension({
-	name: "Comfy.SlotDefaults",
-	suggestionsNumber: null,
-	init() {
-		LiteGraph.search_filter_enabled = true;
-		LiteGraph.middle_click_slot_add_default_node = true;
-		this.suggestionsNumber = app.ui.settings.addSetting({
-			id: "Comfy.NodeSuggestions.number",
-			name: "Number of nodes suggestions",
-			type: "slider",
-			attrs: {
-				min: 1,
-				max: 100,
-				step: 1,
-			},
-			defaultValue: 5,
-			onChange: (newVal, oldVal) => {
-				this.setDefaults(newVal);
-			}
-		});
-	},
-	slot_types_default_out: {},
-	slot_types_default_in: {},
-	async beforeRegisterNodeDef(nodeType, nodeData, app) {
-				var nodeId = nodeData.name;
-		var inputs = [];
-		inputs = nodeData["input"]["required"]; //only show required inputs to reduce the mess also not logical to create node with optional inputs
-		for (const inputKey in inputs) {
-			var input = (inputs[inputKey]);
-			if (typeof input[0] !== "string") continue;
-
-			var type = input[0]
-			if (type in ComfyWidgets) {
-				var customProperties = input[1]
-				if (!(customProperties?.forceInput)) continue; //ignore widgets that don't force input
-			}
-
-			if (!(type in this.slot_types_default_out)) {
-				this.slot_types_default_out[type] = ["Reroute"];
-			}
-			if (this.slot_types_default_out[type].includes(nodeId)) continue;
-			this.slot_types_default_out[type].push(nodeId);
-
-			// Input types have to be stored as lower case
-			// Store each node that can handle this input type
-			const lowerType = type.toLocaleLowerCase();
-			if (!(lowerType in LiteGraph.registered_slot_in_types)) {
-				LiteGraph.registered_slot_in_types[lowerType] = { nodes: [] };
-			}
-			LiteGraph.registered_slot_in_types[lowerType].nodes.push(nodeType.comfyClass);
-		} 
-
-		var outputs = nodeData["output"];
-		for (const key in outputs) {
-			var type = outputs[key];
-			if (!(type in this.slot_types_default_in)) {
-				this.slot_types_default_in[type] = ["Reroute"];// ["Reroute", "Primitive"];  primitive doesn't always work :'()
-			}
-
-			this.slot_types_default_in[type].push(nodeId);
-
-			// Store each node that can handle this output type
-			if (!(type in LiteGraph.registered_slot_out_types)) {
-				LiteGraph.registered_slot_out_types[type] = { nodes: [] };
-			}
-			LiteGraph.registered_slot_out_types[type].nodes.push(nodeType.comfyClass);
-
-			if(!LiteGraph.slot_types_out.includes(type)) {
-				LiteGraph.slot_types_out.push(type);
-			}
-		}
-		var maxNum = this.suggestionsNumber.value;
-		this.setDefaults(maxNum);
-	},
-	setDefaults(maxNum) {
-
-		LiteGraph.slot_types_default_out = {};
-		LiteGraph.slot_types_default_in = {};
-
-		for (const type in this.slot_types_default_out) {
-			LiteGraph.slot_types_default_out[type] = this.slot_types_default_out[type].slice(0, maxNum);
-		}
-		for (const type in this.slot_types_default_in) {
-			LiteGraph.slot_types_default_in[type] = this.slot_types_default_in[type].slice(0, maxNum);
-		}
-	}
-});

web/extensions/core/snapToGrid.js

@@ -1,171 +0,0 @@
-import { app } from "../../scripts/app.js";
-
-// Shift + drag/resize to snap to grid
-
-/** Rounds a Vector2 in-place to the current CANVAS_GRID_SIZE. */
-function roundVectorToGrid(vec) {
-	vec[0] = LiteGraph.CANVAS_GRID_SIZE * Math.round(vec[0] / LiteGraph.CANVAS_GRID_SIZE);
-	vec[1] = LiteGraph.CANVAS_GRID_SIZE * Math.round(vec[1] / LiteGraph.CANVAS_GRID_SIZE);
-	return vec;
-}
-
-app.registerExtension({
-	name: "Comfy.SnapToGrid",
-	init() {
-		// Add setting to control grid size
-		app.ui.settings.addSetting({
-			id: "Comfy.SnapToGrid.GridSize",
-			name: "Grid Size",
-			type: "slider",
-			attrs: {
-				min: 1,
-				max: 500,
-			},
-			tooltip:
-				"When dragging and resizing nodes while holding shift they will be aligned to the grid, this controls the size of that grid.",
-			defaultValue: LiteGraph.CANVAS_GRID_SIZE,
-			onChange(value) {
-				LiteGraph.CANVAS_GRID_SIZE = +value;
-			},
-		});
-
-		// After moving a node, if the shift key is down align it to grid
-		const onNodeMoved = app.canvas.onNodeMoved;
-		app.canvas.onNodeMoved = function (node) {
-			const r = onNodeMoved?.apply(this, arguments);
-
-			if (app.shiftDown) {
-				// Ensure all selected nodes are realigned
-				for (const id in this.selected_nodes) {
-					this.selected_nodes[id].alignToGrid();
-				}
-			}
-
-			return r;
-		};
-
-		// When a node is added, add a resize handler to it so we can fix align the size with the grid
-		const onNodeAdded = app.graph.onNodeAdded;
-		app.graph.onNodeAdded = function (node) {
-			const onResize = node.onResize;
-			node.onResize = function () {
-				if (app.shiftDown) {
-					roundVectorToGrid(node.size);
-				}
-				return onResize?.apply(this, arguments);
-			};
-			return onNodeAdded?.apply(this, arguments);
-		};
-
-		// Draw a preview of where the node will go if holding shift and the node is selected
-		const origDrawNode = LGraphCanvas.prototype.drawNode;
-		LGraphCanvas.prototype.drawNode = function (node, ctx) {
-			if (app.shiftDown && this.node_dragged && node.id in this.selected_nodes) {
-				const [x, y] = roundVectorToGrid([...node.pos]);
-				const shiftX = x - node.pos[0];
-				let shiftY = y - node.pos[1];
-
-				let w, h;
-				if (node.flags.collapsed) {
-					w = node._collapsed_width;
-					h = LiteGraph.NODE_TITLE_HEIGHT;
-					shiftY -= LiteGraph.NODE_TITLE_HEIGHT;
-				} else {
-					w = node.size[0];
-					h = node.size[1];
-					let titleMode = node.constructor.title_mode;
-					if (titleMode !== LiteGraph.TRANSPARENT_TITLE && titleMode !== LiteGraph.NO_TITLE) {
-						h += LiteGraph.NODE_TITLE_HEIGHT;
-						shiftY -= LiteGraph.NODE_TITLE_HEIGHT;
-					}
-				}
-				const f = ctx.fillStyle;
-				ctx.fillStyle = "rgba(100, 100, 100, 0.5)";
-				ctx.fillRect(shiftX, shiftY, w, h);
-				ctx.fillStyle = f;
-			}
-
-			return origDrawNode.apply(this, arguments);
-		};
-
-		
-		
-		/**
-  		 * The currently moving, selected group only. Set after the `selected_group` has actually started
-		 * moving.
-   		 */
-		let selectedAndMovingGroup = null;
-
-		/**
-  		 * Handles moving a group; tracking when a group has been moved (to show the ghost in `drawGroups`
-     		 * below) as well as handle the last move call from LiteGraph's `processMouseUp`.
-		 */
-		const groupMove = LGraphGroup.prototype.move;
-		LGraphGroup.prototype.move = function(deltax, deltay, ignore_nodes) {
-			const v = groupMove.apply(this, arguments);
-			// When we've started moving, set `selectedAndMovingGroup` as LiteGraph sets `selected_group`
-			// too eagerly and we don't want to behave like we're moving until we get a delta.
-			if (!selectedAndMovingGroup && app.canvas.selected_group === this && (deltax || deltay)) {
-				selectedAndMovingGroup = this;
-			}
-
-			// LiteGraph will call group.move both on mouse-move as well as mouse-up though we only want
-			// to snap on a mouse-up which we can determine by checking if `app.canvas.last_mouse_dragging`
-			// has been set to `false`. Essentially, this check here is the equivilant to calling an
-			// `LGraphGroup.prototype.onNodeMoved` if it had existed.
-			if (app.canvas.last_mouse_dragging === false && app.shiftDown) {
-				// After moving a group (while app.shiftDown), snap all the child nodes and, finally,
-				//  align the group itself.
-				this.recomputeInsideNodes();
-				for (const node of this._nodes) {
-					node.alignToGrid();
-				}
-				LGraphNode.prototype.alignToGrid.apply(this);
-			}
-			return v;
-		};
-
-		/**
-  		 * Handles drawing a group when, snapping the size when one is actively being resized tracking and/or
-     		 * drawing a ghost box when one is actively being moved. This mimics the node snapping behavior for
-		 * both.
-		 */
-		const drawGroups = LGraphCanvas.prototype.drawGroups;
-		LGraphCanvas.prototype.drawGroups = function (canvas, ctx) {
-			if (this.selected_group && app.shiftDown) {
-				if (this.selected_group_resizing) {
-					roundVectorToGrid(this.selected_group.size);
-				} else if (selectedAndMovingGroup) {
-					const [x, y] = roundVectorToGrid([...selectedAndMovingGroup.pos]);
-					const f = ctx.fillStyle;
-					const s = ctx.strokeStyle;
-					ctx.fillStyle = "rgba(100, 100, 100, 0.33)";
-					ctx.strokeStyle = "rgba(100, 100, 100, 0.66)";
-					ctx.rect(x, y, ...selectedAndMovingGroup.size);
-					ctx.fill();
-					ctx.stroke();
-					ctx.fillStyle = f;
-					ctx.strokeStyle = s;
-				}
-			} else if (!this.selected_group) {
-				selectedAndMovingGroup = null;
-			}
-			return drawGroups.apply(this, arguments);
-		};
-
-
-		/** Handles adding a group in a snapping-enabled state. */
-		const onGroupAdd = LGraphCanvas.onGroupAdd;
-		LGraphCanvas.onGroupAdd = function() {
-			const v = onGroupAdd.apply(app.canvas, arguments);
-			if (app.shiftDown) {
-				const lastGroup = app.graph._groups[app.graph._groups.length - 1];
-				if (lastGroup) {
-					roundVectorToGrid(lastGroup.pos);
-					roundVectorToGrid(lastGroup.size);
-				}
-			}
-			return v;
-		};
-	},
-});

web/extensions/core/tooltips.js

@@ -1,122 +0,0 @@
-import { app } from "../../scripts/app.js";
-import { $el } from "../../scripts/ui.js";
-
-// Adds support for tooltips
-
-function getHoveredWidget() {
-	if (!app) {
-		return;
-	}
-
-	const node = app.canvas.node_over;
-	if (!node.widgets) return;
-
-	const graphPos = app.canvas.graph_mouse;
-
-	const x = graphPos[0] - node.pos[0];
-	const y = graphPos[1] - node.pos[1];
-
-	for (const w of node.widgets) {
-		let widgetWidth, widgetHeight;
-		if (w.computeSize) {
-			const sz = w.computeSize();
-			widgetWidth = sz[0];
-			widgetHeight = sz[1];
-		} else {
-			widgetWidth = w.width || node.size[0];
-			widgetHeight = LiteGraph.NODE_WIDGET_HEIGHT;
-		}
-
-		if (w.last_y !== undefined && x >= 6 && x <= widgetWidth - 12 && y >= w.last_y && y <= w.last_y + widgetHeight) {
-			return w;
-		}
-	}
-}
-
-app.registerExtension({
-	name: "Comfy.Tooltips",
-	setup() {
-		const tooltipEl = $el("div.comfy-graph-tooltip", {
-			parent: document.body,
-		});
-		let idleTimeout;
-
-		const hideTooltip = () => {
-			tooltipEl.style.display = "none";
-		};
-		const showTooltip = (tooltip) => {
-			if (!tooltip) return;
-
-			tooltipEl.textContent = tooltip;
-			tooltipEl.style.display = "block";
-			tooltipEl.style.left = app.canvas.mouse[0] + "px";
-			tooltipEl.style.top = app.canvas.mouse[1] + "px";
-			const rect = tooltipEl.getBoundingClientRect();
-			if (rect.right > window.innerWidth) {
-				tooltipEl.style.left = app.canvas.mouse[0] - rect.width + "px";
-			}
-
-			if (rect.top < 0) {
-				tooltipEl.style.top = app.canvas.mouse[1] + rect.height + "px";
-			}
-		};
-		const getInputTooltip = (nodeData, name) => {
-			const inputDef = nodeData.input?.required?.[name] ?? nodeData.input?.optional?.[name];
-			return inputDef?.[1]?.tooltip;
-		};
-		const onIdle = () => {
-			const { canvas } = app;
-			const node = canvas.node_over;
-			if (!node) return;
-
-			const nodeData = node.constructor.nodeData ?? {};
-
-			if (node.constructor.title_mode !== LiteGraph.NO_TITLE && canvas.graph_mouse[1] < node.pos[1]) {
-				return showTooltip(nodeData.description);
-			}
-
-			if (node.flags?.collapsed) return;
-
-			const inputSlot = canvas.isOverNodeInput(node, canvas.graph_mouse[0], canvas.graph_mouse[1], [0, 0]);
-			if (inputSlot !== -1) {
-				const inputName = node.inputs[inputSlot].name;
-				return showTooltip(getInputTooltip(nodeData, inputName));
-			}
-
-			const outputSlot = canvas.isOverNodeOutput(node, canvas.graph_mouse[0], canvas.graph_mouse[1], [0, 0]);
-			if (outputSlot !== -1) {
-				return showTooltip(nodeData.output_tooltips?.[outputSlot]);
-			}
-
-			const widget = getHoveredWidget();
-			// Dont show for DOM widgets, these use native browser tooltips as we dont get proper mouse events on these
-			if (widget && !widget.element) {
-				return showTooltip(widget.tooltip ?? getInputTooltip(nodeData, widget.name));
-			}
-		};
-
-		const onMouseMove = (e) => {
-			hideTooltip();
-			clearTimeout(idleTimeout);
-			
-			if(e.target.nodeName !== "CANVAS") return
-			idleTimeout = setTimeout(onIdle, 500);
-		};
-
-		app.ui.settings.addSetting({
-			id: "Comfy.EnableTooltips",
-			name: "Enable Tooltips",
-			type: "boolean",
-			defaultValue: true,
-			onChange(value) {
-				if (value) {
-					window.addEventListener("mousemove", onMouseMove);
-					window.addEventListener("click", hideTooltip);
-				} else {
-					window.removeEventListener("mousemove", onMouseMove);
-					window.removeEventListener("click", hideTooltip);
-				}
-			},
-		});
-	},
-});

web/extensions/core/uploadAudio.js

@@ -1,186 +0,0 @@
-import { app } from "../../scripts/app.js"
-import { api } from "../../scripts/api.js"
-
-function splitFilePath(path) {
-  const folder_separator = path.lastIndexOf("/")
-  if (folder_separator === -1) {
-    return ["", path]
-  }
-  return [
-    path.substring(0, folder_separator),
-    path.substring(folder_separator + 1)
-  ]
-}
-
-function getResourceURL(subfolder, filename, type = "input") {
-  const params = [
-    "filename=" + encodeURIComponent(filename),
-    "type=" + type,
-    "subfolder=" + subfolder,
-    app.getRandParam().substring(1)
-  ].join("&")
-
-  return `/view?${params}`
-}
-
-async function uploadFile(
-  audioWidget,
-  audioUIWidget,
-  file,
-  updateNode,
-  pasted = false
-) {
-  try {
-    // Wrap file in formdata so it includes filename
-    const body = new FormData()
-    body.append("image", file)
-    if (pasted) body.append("subfolder", "pasted")
-    const resp = await api.fetchApi("/upload/image", {
-      method: "POST",
-      body
-    })
-
-    if (resp.status === 200) {
-      const data = await resp.json()
-      // Add the file to the dropdown list and update the widget value
-      let path = data.name
-      if (data.subfolder) path = data.subfolder + "/" + path
-
-      if (!audioWidget.options.values.includes(path)) {
-        audioWidget.options.values.push(path)
-      }
-
-      if (updateNode) {
-        audioUIWidget.element.src = api.apiURL(
-          getResourceURL(...splitFilePath(path))
-        )
-        audioWidget.value = path
-      }
-    } else {
-      alert(resp.status + " - " + resp.statusText)
-    }
-  } catch (error) {
-    alert(error)
-  }
-}
-
-// AudioWidget MUST be registered first, as AUDIOUPLOAD depends on AUDIO_UI to be
-// present.
-app.registerExtension({
-  name: "Comfy.AudioWidget",
-  async beforeRegisterNodeDef(nodeType, nodeData) {
-    if (["LoadAudio", "SaveAudio", "PreviewAudio"].includes(nodeType.comfyClass)) {
-      nodeData.input.required.audioUI = ["AUDIO_UI"]
-    }
-  },
-  getCustomWidgets() {
-    return {
-      AUDIO_UI(node, inputName) {
-        const audio = document.createElement("audio")
-        audio.controls = true
-        audio.classList.add("comfy-audio")
-        audio.setAttribute("name", "media")
-
-        const audioUIWidget = node.addDOMWidget(
-          inputName,
-          /* name=*/ "audioUI",
-          audio
-        )
-        // @ts-ignore
-        // TODO: Sort out the DOMWidget type.
-        audioUIWidget.serialize = false
-
-        const isOutputNode = node.constructor.nodeData.output_node
-        if (isOutputNode) {
-          // Hide the audio widget when there is no audio initially.
-          audioUIWidget.element.classList.add("empty-audio-widget")
-          // Populate the audio widget UI on node execution.
-          const onExecuted = node.onExecuted
-          node.onExecuted = function(message) {
-            onExecuted?.apply(this, arguments)
-            const audios = message.audio
-            if (!audios) return
-            const audio = audios[0]
-            audioUIWidget.element.src = api.apiURL(
-              getResourceURL(audio.subfolder, audio.filename, audio.type)
-            )
-            audioUIWidget.element.classList.remove("empty-audio-widget")
-          }
-        }
-        return { widget: audioUIWidget }
-      }
-    }
-  },
-  onNodeOutputsUpdated(nodeOutputs) {
-    for (const [nodeId, output] of Object.entries(nodeOutputs)) {
-      const node = app.graph.getNodeById(Number.parseInt(nodeId));
-      if ("audio" in output) {
-        const audioUIWidget = node.widgets.find((w) => w.name === "audioUI");
-        const audio = output.audio[0];
-        audioUIWidget.element.src = api.apiURL(getResourceURL(audio.subfolder, audio.filename, audio.type));
-        audioUIWidget.element.classList.remove("empty-audio-widget");
-      }
-    }
-  },
-})
-
-app.registerExtension({
-  name: "Comfy.UploadAudio",
-  async beforeRegisterNodeDef(nodeType, nodeData) {
-    if (nodeData?.input?.required?.audio?.[1]?.audio_upload === true) {
-      nodeData.input.required.upload = ["AUDIOUPLOAD"]
-    }
-  },
-  getCustomWidgets() {
-    return {
-      AUDIOUPLOAD(node, inputName) {
-        // The widget that allows user to select file.
-        const audioWidget = node.widgets.find(w => w.name === "audio")
-        const audioUIWidget = node.widgets.find(w => w.name === "audioUI")
-
-        const onAudioWidgetUpdate = () => {
-          audioUIWidget.element.src = api.apiURL(
-            getResourceURL(...splitFilePath(audioWidget.value))
-          )
-        }
-        // Initially load default audio file to audioUIWidget.
-        if (audioWidget.value) {
-          onAudioWidgetUpdate()
-        }
-        audioWidget.callback = onAudioWidgetUpdate
-
-        // Load saved audio file widget values if restoring from workflow
-        const onGraphConfigured = node.onGraphConfigured;
-        node.onGraphConfigured = function() {
-          onGraphConfigured?.apply(this, arguments)
-          if (audioWidget.value) {
-            onAudioWidgetUpdate()
-          }
-        }
-
-        const fileInput = document.createElement("input")
-        fileInput.type = "file"
-        fileInput.accept = "audio/*"
-        fileInput.style.display = "none"
-        fileInput.onchange = () => {
-          if (fileInput.files.length) {
-            uploadFile(audioWidget, audioUIWidget, fileInput.files[0], true)
-          }
-        }
-        // The widget to pop up the upload dialog.
-        const uploadWidget = node.addWidget(
-          "button",
-          inputName,
-          /* value=*/ "",
-          () => {
-            fileInput.click()
-          }
-        )
-        uploadWidget.label = "choose file to upload"
-        uploadWidget.serialize = false
-
-        return { widget: uploadWidget }
-      }
-    }
-  }
-})

web/extensions/core/uploadImage.js

@@ -1,12 +0,0 @@
-import { app } from "../../scripts/app.js";
-
-// Adds an upload button to the nodes
-
-app.registerExtension({
-	name: "Comfy.UploadImage",
-	async beforeRegisterNodeDef(nodeType, nodeData, app) {
-		if (nodeData?.input?.required?.image?.[1]?.image_upload === true) {
-			nodeData.input.required.upload = ["IMAGEUPLOAD"];
-		}
-	},
-});

web/extensions/core/webcamCapture.js

@@ -1,126 +0,0 @@
-import { app } from "../../scripts/app.js";
-import { api } from "../../scripts/api.js";
-
-const WEBCAM_READY = Symbol();
-
-app.registerExtension({
-	name: "Comfy.WebcamCapture",
-	getCustomWidgets(app) {
-		return {
-			WEBCAM(node, inputName) {
-				let res;
-				node[WEBCAM_READY] = new Promise((resolve) => (res = resolve));
-
-				const container = document.createElement("div");
-				container.style.background = "rgba(0,0,0,0.25)";
-				container.style.textAlign = "center";
-
-				const video = document.createElement("video");
-				video.style.height = video.style.width = "100%";
-
-				const loadVideo = async () => {
-					try {
-						const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
-						container.replaceChildren(video);
-
-						setTimeout(() => res(video), 500); // Fallback as loadedmetadata doesnt fire sometimes?
-						video.addEventListener("loadedmetadata", () => res(video), false);
-						video.srcObject = stream;
-						video.play();
-					} catch (error) {
-						const label = document.createElement("div");
-						label.style.color = "red";
-						label.style.overflow = "auto";
-						label.style.maxHeight = "100%";
-						label.style.whiteSpace = "pre-wrap";
-
-						if (window.isSecureContext) {
-							label.textContent = "Unable to load webcam, please ensure access is granted:\n" + error.message;
-						} else {
-							label.textContent = "Unable to load webcam. A secure context is required, if you are not accessing ComfyUI on localhost (127.0.0.1) you will have to enable TLS (https)\n\n" + error.message;
-						}
-
-						container.replaceChildren(label);
-					}
-				};
-
-				loadVideo();
-
-				return { widget: node.addDOMWidget(inputName, "WEBCAM", container) };
-			},
-		};
-	},
-	nodeCreated(node) {
-		if ((node.type, node.constructor.comfyClass !== "WebcamCapture")) return;
-
-		let video;
-		const camera = node.widgets.find((w) => w.name === "image");
-		const w = node.widgets.find((w) => w.name === "width");
-		const h = node.widgets.find((w) => w.name === "height");
-		const captureOnQueue = node.widgets.find((w) => w.name === "capture_on_queue");
-
-		const canvas = document.createElement("canvas");
-
-		const capture = () => {
-			canvas.width = w.value;
-			canvas.height = h.value;
-			const ctx = canvas.getContext("2d");
-			ctx.drawImage(video, 0, 0, w.value, h.value);
-			const data = canvas.toDataURL("image/png");
-
-			const img = new Image();
-			img.onload = () => {
-				node.imgs = [img];
-				app.graph.setDirtyCanvas(true);
-				requestAnimationFrame(() => {
-					node.setSizeForImage?.();
-				});
-			};
-			img.src = data;
-		};
-
-		const btn = node.addWidget("button", "waiting for camera...", "capture", capture);
-		btn.disabled = true;
-		btn.serializeValue = () => undefined;
-
-		camera.serializeValue = async () => {
-			if (captureOnQueue.value) {
-				capture();
-			} else if (!node.imgs?.length) {
-				const err = `No webcam image captured`;
-				alert(err);
-				throw new Error(err);
-			}
-
-			// Upload image to temp storage
-			const blob = await new Promise((r) => canvas.toBlob(r));
-			const name = `${+new Date()}.png`;
-			const file = new File([blob], name);
-			const body = new FormData();
-			body.append("image", file);
-			body.append("subfolder", "webcam");
-			body.append("type", "temp");
-			const resp = await api.fetchApi("/upload/image", {
-				method: "POST",
-				body,
-			});
-			if (resp.status !== 200) {
-				const err = `Error uploading camera image: ${resp.status} - ${resp.statusText}`;
-				alert(err);
-				throw new Error(err);
-			}
-			return `webcam/${name} [temp]`;
-		};
-
-		node[WEBCAM_READY].then((v) => {
-			video = v;
-			// If width isnt specified then use video output resolution
-			if (!w.value) {
-				w.value = video.videoWidth || 640;
-				h.value = video.videoHeight || 480; 
-			}
-			btn.disabled = false;
-			btn.label = "capture";
-		});
-	},
-});

web/extensions/core/widgetInputs.js

@@ -1,800 +1,4 @@
-import { ComfyWidgets, addValueControlWidgets } from "../../scripts/widgets.js";
+// Shim for extensions\core\widgetInputs.ts
-import { app } from "../../scripts/app.js";
+export const getWidgetConfig = window.comfyAPI.widgetInputs.getWidgetConfig;
-import { applyTextReplacements } from "../../scripts/utils.js";
+export const setWidgetConfig = window.comfyAPI.widgetInputs.setWidgetConfig;
-
+export const mergeIfValid = window.comfyAPI.widgetInputs.mergeIfValid;
-const CONVERTED_TYPE = "converted-widget";
-const VALID_TYPES = ["STRING", "combo", "number", "BOOLEAN"];
-const CONFIG = Symbol();
-const GET_CONFIG = Symbol();
-const TARGET = Symbol(); // Used for reroutes to specify the real target widget
-
-export function getWidgetConfig(slot) {
-	return slot.widget[CONFIG] ?? slot.widget[GET_CONFIG]();
-}
-
-function getConfig(widgetName) {
-	const { nodeData } = this.constructor;
-	return nodeData?.input?.required[widgetName] ?? nodeData?.input?.optional?.[widgetName];
-}
-
-function isConvertableWidget(widget, config) {
-	return (VALID_TYPES.includes(widget.type) || VALID_TYPES.includes(config[0])) && !widget.options?.forceInput;
-}
-
-function hideWidget(node, widget, suffix = "") {
-	if (widget.type?.startsWith(CONVERTED_TYPE)) return;
-	widget.origType = widget.type;
-	widget.origComputeSize = widget.computeSize;
-	widget.origSerializeValue = widget.serializeValue;
-	widget.computeSize = () => [0, -4]; // -4 is due to the gap litegraph adds between widgets automatically
-	widget.type = CONVERTED_TYPE + suffix;
-	widget.serializeValue = () => {
-		// Prevent serializing the widget if we have no input linked
-		if (!node.inputs) {
-			return undefined;
-		}
-		let node_input = node.inputs.find((i) => i.widget?.name === widget.name);
-
-		if (!node_input || !node_input.link) {
-			return undefined;
-		}
-		return widget.origSerializeValue ? widget.origSerializeValue() : widget.value;
-	};
-
-	// Hide any linked widgets, e.g. seed+seedControl
-	if (widget.linkedWidgets) {
-		for (const w of widget.linkedWidgets) {
-			hideWidget(node, w, ":" + widget.name);
-		}
-	}
-}
-
-function showWidget(widget) {
-	widget.type = widget.origType;
-	widget.computeSize = widget.origComputeSize;
-	widget.serializeValue = widget.origSerializeValue;
-
-	delete widget.origType;
-	delete widget.origComputeSize;
-	delete widget.origSerializeValue;
-
-	// Hide any linked widgets, e.g. seed+seedControl
-	if (widget.linkedWidgets) {
-		for (const w of widget.linkedWidgets) {
-			showWidget(w);
-		}
-	}
-}
-
-function convertToInput(node, widget, config) {
-	hideWidget(node, widget);
-
-	const { type } = getWidgetType(config);
-
-	// Add input and store widget config for creating on primitive node
-	const sz = node.size;
-	node.addInput(widget.name, type, {
-		widget: { name: widget.name, [GET_CONFIG]: () => config },
-	});
-
-	for (const widget of node.widgets) {
-		widget.last_y += LiteGraph.NODE_SLOT_HEIGHT;
-	}
-
-	// Restore original size but grow if needed
-	node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
-}
-
-function convertToWidget(node, widget) {
-	showWidget(widget);
-	const sz = node.size;
-	node.removeInput(node.inputs.findIndex((i) => i.widget?.name === widget.name));
-
-	for (const widget of node.widgets) {
-		widget.last_y -= LiteGraph.NODE_SLOT_HEIGHT;
-	}
-
-	// Restore original size but grow if needed
-	node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
-}
-
-function getWidgetType(config) {
-	// Special handling for COMBO so we restrict links based on the entries
-	let type = config[0];
-	if (type instanceof Array) {
-		type = "COMBO";
-	}
-	return { type };
-}
-
-function isValidCombo(combo, obj) {
-	// New input isnt a combo
-	if (!(obj instanceof Array)) {
-		console.log(`connection rejected: tried to connect combo to ${obj}`);
-		return false;
-	}
-	// New imput combo has a different size
-	if (combo.length !== obj.length) {
-		console.log(`connection rejected: combo lists dont match`);
-		return false;
-	}
-	// New input combo has different elements
-	if (combo.find((v, i) => obj[i] !== v)) {
-		console.log(`connection rejected: combo lists dont match`);
-		return false;
-	}
-
-	return true;
-}
-
-export function setWidgetConfig(slot, config, target) {
-	if (!slot.widget) return;
-	if (config) {
-		slot.widget[GET_CONFIG] = () => config;
-		slot.widget[TARGET] = target;
-	} else {
-		delete slot.widget;
-	}
-
-	if (slot.link) {
-		const link = app.graph.links[slot.link];
-		if (link) {
-			const originNode = app.graph.getNodeById(link.origin_id);
-			if (originNode.type === "PrimitiveNode") {
-				if (config) {
-					originNode.recreateWidget();
-				} else if(!app.configuringGraph) {
-					originNode.disconnectOutput(0);
-					originNode.onLastDisconnect();
-				}
-			}
-		}
-	}
-}
-
-export function mergeIfValid(output, config2, forceUpdate, recreateWidget, config1) {
-	if (!config1) {
-		config1 = output.widget[CONFIG] ?? output.widget[GET_CONFIG]();
-	}
-
-	if (config1[0] instanceof Array) {
-		if (!isValidCombo(config1[0], config2[0])) return false;
-	} else if (config1[0] !== config2[0]) {
-		// Types dont match
-		console.log(`connection rejected: types dont match`, config1[0], config2[0]);
-		return false;
-	}
-
-	const keys = new Set([...Object.keys(config1[1] ?? {}), ...Object.keys(config2[1] ?? {})]);
-
-	let customConfig;
-	const getCustomConfig = () => {
-		if (!customConfig) {
-			if (typeof structuredClone === "undefined") {
-				customConfig = JSON.parse(JSON.stringify(config1[1] ?? {}));
-			} else {
-				customConfig = structuredClone(config1[1] ?? {});
-			}
-		}
-		return customConfig;
-	};
-
-	const isNumber = config1[0] === "INT" || config1[0] === "FLOAT";
-	for (const k of keys.values()) {
-		if (k !== "default" && k !== "forceInput" && k !== "defaultInput" && k !== "control_after_generate" && k !== "multiline" && k !== "tooltip") {
-			let v1 = config1[1][k];
-			let v2 = config2[1]?.[k];
-
-			if (v1 === v2 || (!v1 && !v2)) continue;
-
-			if (isNumber) {
-				if (k === "min") {
-					const theirMax = config2[1]?.["max"];
-					if (theirMax != null && v1 > theirMax) {
-						console.log("connection rejected: min > max", v1, theirMax);
-						return false;
-					}
-					getCustomConfig()[k] = v1 == null ? v2 : v2 == null ? v1 : Math.max(v1, v2);
-					continue;
-				} else if (k === "max") {
-					const theirMin = config2[1]?.["min"];
-					if (theirMin != null && v1 < theirMin) {
-						console.log("connection rejected: max < min", v1, theirMin);
-						return false;
-					}
-					getCustomConfig()[k] = v1 == null ? v2 : v2 == null ? v1 : Math.min(v1, v2);
-					continue;
-				} else if (k === "step") {
-					let step;
-					if (v1 == null) {
-						// No current step
-						step = v2;
-					} else if (v2 == null) {
-						// No new step
-						step = v1;
-					} else {
-						if (v1 < v2) {
-							// Ensure v1 is larger for the mod
-							const a = v2;
-							v2 = v1;
-							v1 = a;
-						}
-						if (v1 % v2) {
-							console.log("connection rejected: steps not divisible", "current:", v1, "new:", v2);
-							return false;
-						}
-
-						step = v1;
-					}
-
-					getCustomConfig()[k] = step;
-					continue;
-				}
-			}
-
-			console.log(`connection rejected: config ${k} values dont match`, v1, v2);
-			return false;
-		}
-	}
-
-	if (customConfig || forceUpdate) {
-		if (customConfig) {
-			output.widget[CONFIG] = [config1[0], customConfig];
-		}
-
-		const widget = recreateWidget?.call(this);
-		// When deleting a node this can be null
-		if (widget) {
-			const min = widget.options.min;
-			const max = widget.options.max;
-			if (min != null && widget.value < min) widget.value = min;
-			if (max != null && widget.value > max) widget.value = max;
-			widget.callback(widget.value);
-		}
-	}
-
-	return { customConfig };
-}
-
-let useConversionSubmenusSetting;
-app.registerExtension({
-	name: "Comfy.WidgetInputs",
-	init() {
-		useConversionSubmenusSetting = app.ui.settings.addSetting({
-			id: "Comfy.NodeInputConversionSubmenus",
-			name: "Node widget/input conversion sub-menus",
-			tooltip: "In the node context menu, place the entries that convert between input/widget in sub-menus.",
-			type: "boolean",
-			defaultValue: true,
-		});
-	},
-	async beforeRegisterNodeDef(nodeType, nodeData, app) {
-		// Add menu options to conver to/from widgets
-		const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
-		nodeType.prototype.convertWidgetToInput = function (widget) {
-			const config = getConfig.call(this, widget.name) ?? [widget.type, widget.options || {}];
-			if (!isConvertableWidget(widget, config)) return false;
-			convertToInput(this, widget, config);
-			return true;
-		};
-		nodeType.prototype.getExtraMenuOptions = function (_, options) {
-			const r = origGetExtraMenuOptions ? origGetExtraMenuOptions.apply(this, arguments) : undefined;
-
-			if (this.widgets) {
-				let toInput = [];
-				let toWidget = [];
-				for (const w of this.widgets) {
-					if (w.options?.forceInput) {
-						continue;
-					}
-					if (w.type === CONVERTED_TYPE) {
-						toWidget.push({
-							content: `Convert ${w.name} to widget`,
-							callback: () => convertToWidget(this, w),
-						});
-					} else {
-						const config = getConfig.call(this, w.name) ?? [w.type, w.options || {}];
-						if (isConvertableWidget(w, config)) {
-							toInput.push({
-								content: `Convert ${w.name} to input`,
-								callback: () => convertToInput(this, w, config),
-							});
-						}
-					}
-				}
-				
-				//Convert.. main menu
-				if (toInput.length) {
-					if (useConversionSubmenusSetting.value) {
-						options.push({
-							content: "Convert Widget to Input",
-							submenu: {
-								options: toInput,
-							},
-						});
-					} else {
-						options.push(...toInput, null);
-					}
-				}
-				if (toWidget.length) {
-					if (useConversionSubmenusSetting.value) {
-						options.push({
-							content: "Convert Input to Widget",
-							submenu: {
-								options: toWidget,
-							},
-						});
-					} else {
-						options.push(...toWidget, null);
-					}
-				}
-			}
-
-			return r;
-		};
-
-		nodeType.prototype.onGraphConfigured = function () {
-			if (!this.inputs) return;
-
-			for (const input of this.inputs) {
-				if (input.widget) {
-					if (!input.widget[GET_CONFIG]) {
-						input.widget[GET_CONFIG] = () => getConfig.call(this, input.widget.name);
-					}
-
-					// Cleanup old widget config
-					if (input.widget.config) {
-						if (input.widget.config[0] instanceof Array) {
-							// If we are an old converted combo then replace the input type and the stored link data
-							input.type = "COMBO";
-
-							const link = app.graph.links[input.link];
-							if (link) {
-								link.type = input.type;
-							}
-						}
-						delete input.widget.config;
-					}
-
-					const w = this.widgets.find((w) => w.name === input.widget.name);
-					if (w) {
-						hideWidget(this, w);
-					} else {
-						convertToWidget(this, input);
-					}
-				}
-			}
-		};
-
-		const origOnNodeCreated = nodeType.prototype.onNodeCreated;
-		nodeType.prototype.onNodeCreated = function () {
-			const r = origOnNodeCreated ? origOnNodeCreated.apply(this) : undefined;
-
-			// When node is created, convert any force/default inputs
-			if (!app.configuringGraph && this.widgets) {
-				for (const w of this.widgets) {
-					if (w?.options?.forceInput || w?.options?.defaultInput) {
-						const config = getConfig.call(this, w.name) ?? [w.type, w.options || {}];
-						convertToInput(this, w, config);
-					}
-				}
-			}
-
-			return r;
-		};
-
-		const origOnConfigure = nodeType.prototype.onConfigure;
-		nodeType.prototype.onConfigure = function () {
-			const r = origOnConfigure ? origOnConfigure.apply(this, arguments) : undefined;
-			if (!app.configuringGraph && this.inputs) {
-				// On copy + paste of nodes, ensure that widget configs are set up
-				for (const input of this.inputs) {
-					if (input.widget && !input.widget[GET_CONFIG]) {
-						input.widget[GET_CONFIG] = () => getConfig.call(this, input.widget.name);
-						const w = this.widgets.find((w) => w.name === input.widget.name);
-						if (w) {
-							hideWidget(this, w);
-						}
-					}
-				}
-			}
-
-			return r;
-		};
-
-		function isNodeAtPos(pos) {
-			for (const n of app.graph._nodes) {
-				if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
-					return true;
-				}
-			}
-			return false;
-		}
-
-		// Double click a widget input to automatically attach a primitive
-		const origOnInputDblClick = nodeType.prototype.onInputDblClick;
-		const ignoreDblClick = Symbol();
-		nodeType.prototype.onInputDblClick = function (slot) {
-			const r = origOnInputDblClick ? origOnInputDblClick.apply(this, arguments) : undefined;
-
-			const input = this.inputs[slot];
-			if (!input.widget || !input[ignoreDblClick]) {
-				// Not a widget input or already handled input
-				if (!(input.type in ComfyWidgets) && !(input.widget[GET_CONFIG]?.()?.[0] instanceof Array)) {
-					return r; //also Not a ComfyWidgets input or combo (do nothing)
-				}
-			}
-
-			// Create a primitive node
-			const node = LiteGraph.createNode("PrimitiveNode");
-			app.graph.add(node);
-
-			// Calculate a position that wont directly overlap another node
-			const pos = [this.pos[0] - node.size[0] - 30, this.pos[1]];
-			while (isNodeAtPos(pos)) {
-				pos[1] += LiteGraph.NODE_TITLE_HEIGHT;
-			}
-
-			node.pos = pos;
-			node.connect(0, this, slot);
-			node.title = input.name;
-
-			// Prevent adding duplicates due to triple clicking
-			input[ignoreDblClick] = true;
-			setTimeout(() => {
-				delete input[ignoreDblClick];
-			}, 300);
-
-			return r;
-		};
-
-		// Prevent connecting COMBO lists to converted inputs that dont match types
-		const onConnectInput = nodeType.prototype.onConnectInput;
-		nodeType.prototype.onConnectInput = function (targetSlot, type, output, originNode, originSlot) {
-			const v = onConnectInput?.(this, arguments);
-			// Not a combo, ignore
-			if (type !== "COMBO") return v;
-			// Primitive output, allow that to handle
-			if (originNode.outputs[originSlot].widget) return v;
-
-			// Ensure target is also a combo
-			const targetCombo = this.inputs[targetSlot].widget?.[GET_CONFIG]?.()?.[0];
-			if (!targetCombo || !(targetCombo instanceof Array)) return v;
-
-			// Check they match
-			const originConfig = originNode.constructor?.nodeData?.output?.[originSlot];
-			if (!originConfig || !isValidCombo(targetCombo, originConfig)) {
-				return false;
-			}
-
-			return v;
-		};
-	},
-	registerCustomNodes() {
-		const replacePropertyName = "Run widget replace on values";
-		class PrimitiveNode {
-			constructor() {
-				this.addOutput("connect to widget input", "*");
-				this.serialize_widgets = true;
-				this.isVirtualNode = true;
-
-				if (!this.properties || !(replacePropertyName in this.properties)) {
-					this.addProperty(replacePropertyName, false, "boolean");
-				}
-			}
-
-			applyToGraph(extraLinks = []) {
-				if (!this.outputs[0].links?.length) return;
-
-				function get_links(node) {
-					let links = [];
-					for (const l of node.outputs[0].links) {
-						const linkInfo = app.graph.links[l];
-						const n = node.graph.getNodeById(linkInfo.target_id);
-						if (n.type == "Reroute") {
-							links = links.concat(get_links(n));
-						} else {
-							links.push(l);
-						}
-					}
-					return links;
-				}
-
-				let links = [...get_links(this).map((l) => app.graph.links[l]), ...extraLinks];
-				let v = this.widgets?.[0].value;
-				if(v && this.properties[replacePropertyName]) {
-					v = applyTextReplacements(app, v);
-				}
-
-				// For each output link copy our value over the original widget value
-				for (const linkInfo of links) {
-					const node = this.graph.getNodeById(linkInfo.target_id);
-					const input = node.inputs[linkInfo.target_slot];
-					let widget;
-					if (input.widget[TARGET]) {
-						widget = input.widget[TARGET];
-					} else {
-						const widgetName = input.widget.name;
-						if (widgetName) {
-							widget = node.widgets.find((w) => w.name === widgetName);
-						}
-					}
-
-					if (widget) {
-						widget.value = v;
-						if (widget.callback) {
-							widget.callback(widget.value, app.canvas, node, app.canvas.graph_mouse, {});
-						}
-					}
-				}
-			}
-
-			refreshComboInNode() {
-				const widget = this.widgets?.[0];
-				if (widget?.type === "combo") {
-					widget.options.values = this.outputs[0].widget[GET_CONFIG]()[0];
-
-					if (!widget.options.values.includes(widget.value)) {
-						widget.value = widget.options.values[0];
-						widget.callback(widget.value);
-					}
-				}
-			}
-
-			onAfterGraphConfigured() {
-				if (this.outputs[0].links?.length && !this.widgets?.length) {
-					if (!this.#onFirstConnection()) return;
-
-					// Populate widget values from config data
-					if (this.widgets) {
-						for (let i = 0; i < this.widgets_values.length; i++) {
-							const w = this.widgets[i];
-							if (w) {
-								w.value = this.widgets_values[i];
-							}
-						}
-					}
-
-					// Merge values if required
-					this.#mergeWidgetConfig();
-				}
-			}
-
-			onConnectionsChange(_, index, connected) {
-				if (app.configuringGraph) {
-					// Dont run while the graph is still setting up
-					return;
-				}
-
-				const links = this.outputs[0].links;
-				if (connected) {
-					if (links?.length && !this.widgets?.length) {
-						this.#onFirstConnection();
-					}
-				} else {
-					// We may have removed a link that caused the constraints to change
-					this.#mergeWidgetConfig();
-
-					if (!links?.length) {
-						this.onLastDisconnect();
-					}
-				}
-			}
-
-			onConnectOutput(slot, type, input, target_node, target_slot) {
-				// Fires before the link is made allowing us to reject it if it isn't valid
-				// No widget, we cant connect
-				if (!input.widget) {
-					if (!(input.type in ComfyWidgets)) return false;
-				}
-
-				if (this.outputs[slot].links?.length) {
-					const valid = this.#isValidConnection(input);
-					if (valid) {
-						// On connect of additional outputs, copy our value to their widget
-						this.applyToGraph([{ target_id: target_node.id, target_slot }]);
-					}
-					return valid;
-				}
-			}
-
-			#onFirstConnection(recreating) {
-				// First connection can fire before the graph is ready on initial load so random things can be missing
-				if (!this.outputs[0].links) {
-					this.onLastDisconnect();
-					return;
-				}
-				const linkId = this.outputs[0].links[0];
-				const link = this.graph.links[linkId];
-				if (!link) return;
-
-				const theirNode = this.graph.getNodeById(link.target_id);
-				if (!theirNode || !theirNode.inputs) return;
-
-				const input = theirNode.inputs[link.target_slot];
-				if (!input) return;
-
-				let widget;
-				if (!input.widget) {
-					if (!(input.type in ComfyWidgets)) return;
-					widget = { name: input.name, [GET_CONFIG]: () => [input.type, {}] }; //fake widget
-				} else {
-					widget = input.widget;
-				}
-
-				const config = widget[GET_CONFIG]?.();
-				if (!config) return;
-
-				const { type } = getWidgetType(config);
-				// Update our output to restrict to the widget type
-				this.outputs[0].type = type;
-				this.outputs[0].name = type;
-				this.outputs[0].widget = widget;
-
-				this.#createWidget(widget[CONFIG] ?? config, theirNode, widget.name, recreating, widget[TARGET]);
-			}
-
-			#createWidget(inputData, node, widgetName, recreating, targetWidget) {
-				let type = inputData[0];
-
-				if (type instanceof Array) {
-					type = "COMBO";
-				}
-
-				let widget;
-				if (type in ComfyWidgets) {
-					widget = (ComfyWidgets[type](this, "value", inputData, app) || {}).widget;
-				} else {
-					widget = this.addWidget(type, "value", null, () => {}, {});
-				}
-
-				if (targetWidget) {
-					widget.value = targetWidget.value;
-				} else if (node?.widgets && widget) {
-					const theirWidget = node.widgets.find((w) => w.name === widgetName);
-					if (theirWidget) {
-						widget.value = theirWidget.value;
-					}
-				}
-
-				if (!inputData?.[1]?.control_after_generate && (widget.type === "number" || widget.type === "combo")) {
-					let control_value = this.widgets_values?.[1];
-					if (!control_value) {
-						control_value = "fixed";
-					}
-					addValueControlWidgets(this, widget, control_value, undefined, inputData);
-					let filter = this.widgets_values?.[2];
-					if (filter && this.widgets.length === 3) {
-						this.widgets[2].value = filter;
-					}
-				}
-
-				// Restore any saved control values
-				const controlValues = this.controlValues;
-				if(this.lastType === this.widgets[0].type && controlValues?.length === this.widgets.length - 1) {
-					for(let i = 0; i < controlValues.length; i++) {
-						this.widgets[i + 1].value = controlValues[i];
-					}
-				}
-
-				// When our value changes, update other widgets to reflect our changes
-				// e.g. so LoadImage shows correct image
-				const callback = widget.callback;
-				const self = this;
-				widget.callback = function () {
-					const r = callback ? callback.apply(this, arguments) : undefined;
-					self.applyToGraph();
-					return r;
-				};
-
-				if (!recreating) {
-					// Grow our node if required
-					const sz = this.computeSize();
-					if (this.size[0] < sz[0]) {
-						this.size[0] = sz[0];
-					}
-					if (this.size[1] < sz[1]) {
-						this.size[1] = sz[1];
-					}
-
-					requestAnimationFrame(() => {
-						if (this.onResize) {
-							this.onResize(this.size);
-						}
-					});
-				}
-			}
-
-			recreateWidget() {
-				const values = this.widgets?.map((w) => w.value);
-				this.#removeWidgets();
-				this.#onFirstConnection(true);
-				if (values?.length) {
-					for (let i = 0; i < this.widgets?.length; i++) this.widgets[i].value = values[i];
-				}
-				return this.widgets?.[0];
-			}
-
-			#mergeWidgetConfig() {
-				// Merge widget configs if the node has multiple outputs
-				const output = this.outputs[0];
-				const links = output.links;
-
-				const hasConfig = !!output.widget[CONFIG];
-				if (hasConfig) {
-					delete output.widget[CONFIG];
-				}
-
-				if (links?.length < 2 && hasConfig) {
-					// Copy the widget options from the source
-					if (links.length) {
-						this.recreateWidget();
-					}
-
-					return;
-				}
-
-				const config1 = output.widget[GET_CONFIG]();
-				const isNumber = config1[0] === "INT" || config1[0] === "FLOAT";
-				if (!isNumber) return;
-
-				for (const linkId of links) {
-					const link = app.graph.links[linkId];
-					if (!link) continue; // Can be null when removing a node
-
-					const theirNode = app.graph.getNodeById(link.target_id);
-					const theirInput = theirNode.inputs[link.target_slot];
-
-					// Call is valid connection so it can merge the configs when validating
-					this.#isValidConnection(theirInput, hasConfig);
-				}
-			}
-
-			#isValidConnection(input, forceUpdate) {
-				// Only allow connections where the configs match
-				const output = this.outputs[0];
-				const config2 = input.widget[GET_CONFIG]();
-				return !!mergeIfValid.call(this, output, config2, forceUpdate, this.recreateWidget);
-			}
-
-			#removeWidgets() {
-				if (this.widgets) {
-					// Allow widgets to cleanup
-					for (const w of this.widgets) {
-						if (w.onRemove) {
-							w.onRemove();
-						}
-					}
-
-					// Temporarily store the current values in case the node is being recreated
-					// e.g. by group node conversion
-					this.controlValues = [];
-					this.lastType = this.widgets[0]?.type;
-					for(let i = 1; i < this.widgets.length; i++) {
-						this.controlValues.push(this.widgets[i].value);
-					}
-					setTimeout(() => { delete this.lastType; delete this.controlValues }, 15);
-					this.widgets.length = 0;
-				}
-			}
-
-			onLastDisconnect() {
-				// We cant remove + re-add the output here as if you drag a link over the same link
-				// it removes, then re-adds, causing it to break
-				this.outputs[0].type = "*";
-				this.outputs[0].name = "connect to widget input";
-				delete this.outputs[0].widget;
-
-				this.#removeWidgets();
-			}
-		}
-
-		LiteGraph.registerNodeType(
-			"PrimitiveNode",
-			Object.assign(PrimitiveNode, {
-				title: "Primitive",
-			})
-		);
-		PrimitiveNode.category = "utils";
-	},
-});

web/extensions/logging.js.example

@@ -1,55 +0,0 @@
-import { app } from "../scripts/app.js";
-
-const ext = {
-	// Unique name for the extension
-	name: "Example.LoggingExtension",
-	async init(app) {
-		// Any initial setup to run as soon as the page loads
-		console.log("[logging]", "extension init");
-	},
-	async setup(app) {
-		// Any setup to run after the app is created
-		console.log("[logging]", "extension setup");
-	},
-	async addCustomNodeDefs(defs, app) {
-		// Add custom node definitions
-		// These definitions will be configured and registered automatically
-		// defs is a lookup core nodes, add yours into this
-		console.log("[logging]", "add custom node definitions", "current nodes:", Object.keys(defs));
-	},
-	async getCustomWidgets(app) {
-		// Return custom widget types
-		// See ComfyWidgets for widget examples
-		console.log("[logging]", "provide custom widgets");
-	},
-	async beforeRegisterNodeDef(nodeType, nodeData, app) {
-		// Run custom logic before a node definition is registered with the graph
-		console.log("[logging]", "before register node: ", nodeType, nodeData);
-
-		// This fires for every node definition so only log once
-		delete ext.beforeRegisterNodeDef;
-	},
-	async registerCustomNodes(app) {
-		// Register any custom node implementations here allowing for more flexability than a custom node def
-		console.log("[logging]", "register custom nodes");
-	},
-	loadedGraphNode(node, app) {
-		// Fires for each node when loading/dragging/etc a workflow json or png
-		// If you break something in the backend and want to patch workflows in the frontend
-		// This is the place to do this
-		console.log("[logging]", "loaded graph node: ", node);
-
-		// This fires for every node on each load so only log once
-		delete ext.loadedGraphNode;
-	},
-	nodeCreated(node, app) {
-		// Fires every time a node is constructed
-		// You can modify widgets/add handlers/etc here
-		console.log("[logging]", "node created: ", node);
-
-		// This fires for every node so only log once
-		delete ext.nodeCreated;
-	}
-};
-
-app.registerExtension(ext);

web/index.html

@@ -4,20 +4,21 @@
 		<meta charset="UTF-8">
 		<title>ComfyUI</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-		<link rel="stylesheet" type="text/css" href="./lib/litegraph.css" />
+		<!-- Browser Test Fonts -->
-		<link rel="stylesheet" type="text/css" href="./lib/materialdesignicons.min.css" />
+		<!-- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-		<link rel="stylesheet" type="text/css" href="./style.css" />
+		<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-		<link rel="stylesheet" type="text/css" href="./user.css" />
+		<style>
-		<script type="text/javascript" src="./lib/litegraph.core.js"></script>
+			* {
-		<script type="text/javascript" src="./lib/litegraph.extensions.js" defer></script>
+				font-family: 'Roboto Mono', 'Noto Color Emoji';
-		<script type="module">
+			}
-			import { app } from "./scripts/app.js";
+		</style> -->
-			await app.setup();
+		<link rel="stylesheet" type="text/css" href="/user.css" />
-			window.app = app;
+		<link rel="stylesheet" type="text/css" href="/materialdesignicons.min.css" />
-			window.graph = app.graph;
+		<script type="module" crossorigin src="/assets/index-DIiqwEjy.js"></script>
-		</script>
+		<link rel="stylesheet" crossorigin href="/assets/index-CwWW6Xjy.css">
 	</head>
 	<body class="litegraph">
+		<div id="vue-app"></div>
 		<div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
 			<main class="comfy-user-selection-inner">
 				<h1>ComfyUI</h1>

web/jsconfig.json

@@ -1,12 +0,0 @@
-{
-	"compilerOptions": {
-		"baseUrl": ".",
-		"paths": {
-			"/*": ["./*"]
-		},
-		"lib": ["DOM", "ES2022", "DOM.Iterable"],
-		"target": "ES2015",
-		"module": "es2020"
-	},
-	"include": ["."]
-}

web/lib/litegraph.css

@@ -1,693 +0,0 @@
-/* this CSS contains only the basic CSS needed to run the app and use it */
-
-.lgraphcanvas {
-    /*cursor: crosshair;*/
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-	outline: none;
-    font-family: Tahoma, sans-serif;
-}
-
-.lgraphcanvas * {
-    box-sizing: border-box;
-}
-
-.litegraph.litecontextmenu {
-    font-family: Tahoma, sans-serif;
-    position: fixed;
-    top: 100px;
-    left: 100px;
-    min-width: 100px;
-    color: #aaf;
-    padding: 0;
-    box-shadow: 0 0 10px black !important;
-    background-color: #2e2e2e !important;
-	z-index: 10;
-}
-
-.litegraph.litecontextmenu.dark {
-    background-color: #000 !important;
-}
-
-.litegraph.litecontextmenu .litemenu-title img {
-    margin-top: 2px;
-    margin-left: 2px;
-    margin-right: 4px;
-}
-
-.litegraph.litecontextmenu .litemenu-entry {
-    margin: 2px;
-    padding: 2px;
-}
-
-.litegraph.litecontextmenu .litemenu-entry.submenu {
-    background-color: #2e2e2e !important;
-}
-
-.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
-    background-color: #000 !important;
-}
-
-.litegraph .litemenubar ul {
-    font-family: Tahoma, sans-serif;
-    margin: 0;
-    padding: 0;
-}
-
-.litegraph .litemenubar li {
-    font-size: 14px;
-    color: #999;
-    display: inline-block;
-    min-width: 50px;
-    padding-left: 10px;
-    padding-right: 10px;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    cursor: pointer;
-}
-
-.litegraph .litemenubar li:hover {
-    background-color: #777;
-    color: #eee;
-}
-
-.litegraph .litegraph .litemenubar-panel {
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    min-width: 100px;
-    background-color: #444;
-    box-shadow: 0 0 3px black;
-    padding: 4px;
-    border-bottom: 2px solid #aaf;
-    z-index: 10;
-}
-
-.litegraph .litemenu-entry,
-.litemenu-title {
-    font-size: 12px;
-    color: #aaa;
-    padding: 0 0 0 4px;
-    margin: 2px;
-    padding-left: 2px;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-    cursor: pointer;
-}
-
-.litegraph .litemenu-entry .icon {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    margin: 2px;
-    vertical-align: top;
-}
-
-.litegraph .litemenu-entry.checked .icon {
-    background-color: #aaf;
-}
-
-.litegraph .litemenu-entry .more {
-    float: right;
-    padding-right: 5px;
-}
-
-.litegraph .litemenu-entry.disabled {
-    opacity: 0.5;
-    cursor: default;
-}
-
-.litegraph .litemenu-entry.separator {
-    display: block;
-    border-top: 1px solid #333;
-    border-bottom: 1px solid #666;
-    width: 100%;
-    height: 0px;
-    margin: 3px 0 2px 0;
-    background-color: transparent;
-    padding: 0 !important;
-    cursor: default !important;
-}
-
-.litegraph .litemenu-entry.has_submenu {
-    border-right: 2px solid cyan;
-}
-
-.litegraph .litemenu-title {
-    color: #dde;
-    background-color: #111;
-    margin: 0;
-    padding: 2px;
-    cursor: default;
-}
-
-.litegraph .litemenu-entry:hover:not(.disabled):not(.separator) {
-    background-color: #444 !important;
-    color: #eee;
-    transition: all 0.2s;
-}
-
-.litegraph .litemenu-entry .property_name {
-    display: inline-block;
-    text-align: left;
-    min-width: 80px;
-    min-height: 1.2em;
-}
-
-.litegraph .litemenu-entry .property_value {
-    display: inline-block;
-    background-color: rgba(0, 0, 0, 0.5);
-    text-align: right;
-    min-width: 80px;
-    min-height: 1.2em;
-    vertical-align: middle;
-    padding-right: 10px;
-}
-
-.litegraph.litesearchbox {
-    font-family: Tahoma, sans-serif;
-    position: absolute;
-    background-color: rgba(0, 0, 0, 0.5);
-    padding-top: 4px;
-}
-
-.litegraph.litesearchbox input,
-.litegraph.litesearchbox select {
-    margin-top: 3px;
-    min-width: 60px;
-    min-height: 1.5em;
-    background-color: black;
-    border: 0;
-    color: white;
-    padding-left: 10px;
-    margin-right: 5px;
-    max-width: 300px;
-}
-
-.litegraph.litesearchbox .name {
-    display: inline-block;
-    min-width: 60px;
-    min-height: 1.5em;
-    padding-left: 10px;
-}
-
-.litegraph.litesearchbox .helper {
-    overflow: auto;
-    max-height: 200px;
-    margin-top: 2px;
-}
-
-.litegraph.lite-search-item {
-    font-family: Tahoma, sans-serif;
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-    padding-top: 2px;
-}
-
-.litegraph.lite-search-item.not_in_filter{
-    /*background-color: rgba(50, 50, 50, 0.5);*/
-    /*color: #999;*/
-    color: #B99;
-    font-style: italic;
-}
-
-.litegraph.lite-search-item.generic_type{
-    /*background-color: rgba(50, 50, 50, 0.5);*/
-    /*color: #DD9;*/
-    color: #999;
-    font-style: italic;
-}
-
-.litegraph.lite-search-item:hover,
-.litegraph.lite-search-item.selected {
-    cursor: pointer;
-    background-color: white;
-    color: black;
-}
-
-.litegraph.lite-search-item-type {
-    display: inline-block;
-    background: rgba(0,0,0,0.2);
-    margin-left: 5px;
-    font-size: 14px;
-    padding: 2px 5px;
-    position: relative;
-    top: -2px;
-    opacity: 0.8;
-    border-radius: 4px;
- }
-
-/* DIALOGs ******/
-
-.litegraph .dialog {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -150px;
-    margin-left: -200px;
-
-    background-color: #2A2A2A;
-
-    min-width: 400px;
-    min-height: 200px;
-	box-shadow: 0 0 4px #111;
-    border-radius: 6px;
-}
-
-.litegraph .dialog.settings {
-	left: 10px;
-	top: 10px;
-	height: calc( 100% - 20px );
-	margin: auto;
-    max-width: 50%;
-}
-
-.litegraph .dialog.centered {
-    top: 50px;
-    left: 50%;
-    position: absolute;
-    transform: translateX(-50%);
-    min-width: 600px;
-    min-height: 300px;
-    height: calc( 100% - 100px );
-	margin: auto;
-}
-
-.litegraph .dialog .close {
-    float: right;
-	margin: 4px;
-	margin-right: 10px;
-	cursor: pointer;
-	font-size: 1.4em;
-}
-
-.litegraph .dialog .close:hover {
-	color: white;
-}
-
-.litegraph .dialog .dialog-header {
-	color: #AAA;
-	border-bottom: 1px solid #161616;
-}
-
-.litegraph .dialog .dialog-header { height: 40px; }
-.litegraph .dialog .dialog-footer { height: 50px; padding: 10px; border-top: 1px solid #1a1a1a;}
-
-.litegraph .dialog .dialog-header .dialog-title {
-    font: 20px "Arial";
-    margin: 4px;
-    padding: 4px 10px;
-    display: inline-block;
-}
-
-.litegraph .dialog .dialog-content, .litegraph .dialog .dialog-alt-content {
-    height: calc(100% - 90px);
-    width: 100%;
-	min-height: 100px;
-    display: inline-block;
-	color: #AAA;
-    /*background-color: black;*/
-    overflow: auto;
-}
-
-.litegraph .dialog .dialog-content h3 {
-	margin: 10px;
-}
-
-.litegraph .dialog .dialog-content .connections {
-	flex-direction: row;
-}
-
-.litegraph .dialog .dialog-content .connections .connections_side {
-	width: calc(50% - 5px);
-	min-height: 100px;
-	background-color: black;
-	display: flex;
-}
-
-.litegraph .dialog .node_type {
-	font-size: 1.2em;
-	display: block;
-	margin: 10px;
-}
-
-.litegraph .dialog .node_desc {
-	opacity: 0.5;
-	display: block;
-	margin: 10px;
-}
-
-.litegraph .dialog .separator {
-	display: block;
-	width: calc( 100% - 4px );
-	height: 1px;
-	border-top: 1px solid #000;
-	border-bottom: 1px solid #333;
-	margin: 10px 2px;
-	padding: 0;
-}
-
-.litegraph .dialog .property {
-	margin-bottom: 2px;
-	padding: 4px;
-}
-
-.litegraph .dialog .property:hover {
-	background: #545454;
-}
-
-.litegraph .dialog .property_name {
-	color: #737373;
-    display: inline-block;
-    text-align: left;
-    vertical-align: top;
-    width: 160px;
-	padding-left: 4px;
-	overflow: hidden;
-    margin-right: 6px;
-}
-
-.litegraph .dialog .property:hover .property_name {
-    color: white;
-}
-
-.litegraph .dialog .property_value {
-    display: inline-block;
-    text-align: right;
-	color: #AAA;
-	background-color: #1A1A1A;
-    /*width: calc( 100% - 122px );*/
-    max-width: calc( 100% - 162px );
-    min-width: 200px;
-	max-height: 300px;
-    min-height: 20px;
-    padding: 4px;
-	padding-right: 12px;
-	overflow: hidden;
-	cursor: pointer;
-	border-radius: 3px;
-}
-
-.litegraph .dialog .property_value:hover {
-	color: white;
-}
-
-.litegraph .dialog .property.boolean .property_value {
-	padding-right: 30px;
-    color: #A88;
-    /*width: auto;
-    float: right;*/
-}
-
-.litegraph .dialog .property.boolean.bool-on .property_name{
-    color: #8A8;
-}
-.litegraph .dialog .property.boolean.bool-on .property_value{
-    color: #8A8;
-}
-
-.litegraph .dialog .btn {
-	border: 0;
-	border-radius: 4px;
-    padding: 4px 20px;
-    margin-left: 0px;
-    background-color: #060606;
-    color: #8e8e8e;
-}
-
-.litegraph .dialog .btn:hover {
-    background-color: #111;
-    color: #FFF;
-}
-
-.litegraph .dialog .btn.delete:hover {
-    background-color: #F33;
-    color: black;
-}
-
-.litegraph .subgraph_property {
-	padding: 4px;
-}
-
-.litegraph .subgraph_property:hover {
-	background-color: #333;
-}
-
-.litegraph .subgraph_property.extra {
-    margin-top: 8px;
-}
-
-.litegraph .subgraph_property span.name {
-	font-size: 1.3em;
-	padding-left: 4px;
-}
-
-.litegraph .subgraph_property span.type {
-	opacity: 0.5;
-	margin-right: 20px;
-	padding-left: 4px;
-}
-
-.litegraph .subgraph_property span.label {
-	display: inline-block;
-	width: 60px;
-	padding:  0px 10px;
-}
-
-.litegraph .subgraph_property input {
-	width: 140px;
-	color: #999;
-	background-color: #1A1A1A;
-	border-radius: 4px;
-	border: 0;
-	margin-right: 10px;
-	padding: 4px;
-	padding-left: 10px;
-}
-
-.litegraph .subgraph_property button {
-	background-color: #1c1c1c;
-	color: #aaa;
-	border: 0;
-	border-radius: 2px;
-	padding: 4px 10px;
-	cursor: pointer;
-}
-
-.litegraph .subgraph_property.extra {
-	color: #ccc;
-}
-
-.litegraph .subgraph_property.extra input {
-	background-color: #111;
-}
-
-.litegraph .bullet_icon {
-	margin-left: 10px;
-	border-radius: 10px;
-	width: 12px;
-	height: 12px;
-	background-color: #666;
-	display: inline-block;
-	margin-top: 2px;
-	margin-right: 4px;
-    transition: background-color 0.1s ease 0s;
-    -moz-transition: background-color 0.1s ease 0s;
-}
-
-.litegraph .bullet_icon:hover {
-	background-color: #698;
-	cursor: pointer;
-} 
-
-/* OLD */
-
-.graphcontextmenu {
-    padding: 4px;
-    min-width: 100px;
-}
-
-.graphcontextmenu-title {
-    color: #dde;
-    background-color: #222;
-    margin: 0;
-    padding: 2px;
-    cursor: default;
-}
-
-.graphmenu-entry {
-    box-sizing: border-box;
-    margin: 2px;
-    padding-left: 20px;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    transition: all linear 0.3s;
-}
-
-.graphmenu-entry.event,
-.litemenu-entry.event {
-    border-left: 8px solid orange;
-    padding-left: 12px;
-}
-
-.graphmenu-entry.disabled {
-    opacity: 0.3;
-}
-
-.graphmenu-entry.submenu {
-    border-right: 2px solid #eee;
-}
-
-.graphmenu-entry:hover {
-    background-color: #555;
-}
-
-.graphmenu-entry.separator {
-    background-color: #111;
-    border-bottom: 1px solid #666;
-    height: 1px;
-    width: calc(100% - 20px);
-    -moz-width: calc(100% - 20px);
-    -webkit-width: calc(100% - 20px);
-}
-
-.graphmenu-entry .property_name {
-    display: inline-block;
-    text-align: left;
-    min-width: 80px;
-    min-height: 1.2em;
-}
-
-.graphmenu-entry .property_value,
-.litemenu-entry .property_value {
-    display: inline-block;
-    background-color: rgba(0, 0, 0, 0.5);
-    text-align: right;
-    min-width: 80px;
-    min-height: 1.2em;
-    vertical-align: middle;
-    padding-right: 10px;
-}
-
-.graphdialog {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    min-height: 2em;
-    background-color: #333;
-    font-size: 1.2em;
-    box-shadow: 0 0 10px black !important;
-	z-index: 10;
-}
-
-.graphdialog.rounded {
-    border-radius: 12px;
-    padding-right: 2px;
-}
-
-.graphdialog .name {
-    display: inline-block;
-    min-width: 60px;
-    min-height: 1.5em;
-    padding-left: 10px;
-}
-
-.graphdialog input,
-.graphdialog textarea,
-.graphdialog select {
-    margin: 3px;
-    min-width: 60px;
-    min-height: 1.5em;
-    background-color: black;
-    border: 0;
-    color: white;
-    padding-left: 10px;
-    outline: none;
-}
-
-.graphdialog textarea {
-	min-height: 150px;
-}
-
-.graphdialog button {
-    margin-top: 3px;
-    vertical-align: top;
-    background-color: #999;
-	border: 0;
-}
-
-.graphdialog button.rounded,
-.graphdialog input.rounded {
-    border-radius: 0 12px 12px 0;
-}
-
-.graphdialog .helper {
-    overflow: auto;
-    max-height: 200px;
-}
-
-.graphdialog .help-item {
-    padding-left: 10px;
-}
-
-.graphdialog .help-item:hover,
-.graphdialog .help-item.selected {
-    cursor: pointer;
-    background-color: white;
-    color: black;
-}
-
-.litegraph .dialog {
-    min-height: 0;
-}
-.litegraph .dialog .dialog-content {
-display: block;
-}
-.litegraph .dialog .dialog-content .subgraph_property {
-padding: 5px;
-}
-.litegraph .dialog .dialog-footer {
-margin: 0;
-}
-.litegraph .dialog .dialog-footer .subgraph_property {
-margin-top: 0;
-display: flex;
-align-items: center;
-padding: 5px;
-}
-.litegraph .dialog .dialog-footer .subgraph_property .name {
-flex: 1;
-}
-.litegraph .graphdialog {
-display: flex;
-align-items: center;
-border-radius: 20px;
-padding: 4px 10px;
-position: fixed;
-}
-.litegraph .graphdialog .name {
-padding: 0;
-min-height: 0;
-font-size: 16px;
-vertical-align: middle;
-}
-.litegraph .graphdialog .value {
-font-size: 16px;
-min-height: 0;
-margin: 0 10px;
-padding: 2px 5px;
-}
-.litegraph .graphdialog input[type="checkbox"] {
-width: 16px;
-height: 16px;
-}
-.litegraph .graphdialog button {
-padding: 4px 18px;
-border-radius: 20px;
-cursor: pointer;
-}
-  

web/lib/litegraph.extensions.js

@@ -1,21 +0,0 @@
-/**
- * Changes the background color of the canvas.
- *
- * @method updateBackground
- * @param {image} String
- * @param {clearBackgroundColor} String
- * @
- */
-LGraphCanvas.prototype.updateBackground = function (image, clearBackgroundColor) {
-	this._bg_img = new Image();
-	this._bg_img.name = image;
-	this._bg_img.src = image;
-	this._bg_img.onload = () => {
-		this.draw(true, true);
-	};
-	this.background_image = image;
-
-	this.clear_background = true;
-	this.clear_background_color = clearBackgroundColor;
-	this._pattern = null
-}

web/scripts/api.js

@@ -1,482 +1,2 @@
-class ComfyApi extends EventTarget {
+// Shim for scripts\api.ts
-	#registered = new Set();
+export const api = window.comfyAPI.api.api;
-
-	constructor() {
-		super();
-		this.api_host = location.host;
-		this.api_base = location.pathname.split('/').slice(0, -1).join('/');
-		this.initialClientId = sessionStorage.getItem("clientId");
-	}
-
-	apiURL(route) {
-		return this.api_base + route;
-	}
-
-	fetchApi(route, options) {
-		if (!options) {
-			options = {};
-		}
-		if (!options.headers) {
-			options.headers = {};
-		}
-		options.headers["Comfy-User"] = this.user;
-		return fetch(this.apiURL(route), options);
-	}
-
-	addEventListener(type, callback, options) {
-		super.addEventListener(type, callback, options);
-		this.#registered.add(type);
-	}
-
-	/**
-	 * Poll status  for colab and other things that don't support websockets.
-	 */
-	#pollQueue() {
-		setInterval(async () => {
-			try {
-				const resp = await this.fetchApi("/prompt");
-				const status = await resp.json();
-				this.dispatchEvent(new CustomEvent("status", { detail: status }));
-			} catch (error) {
-				this.dispatchEvent(new CustomEvent("status", { detail: null }));
-			}
-		}, 1000);
-	}
-
-	/**
-	 * Creates and connects a WebSocket for realtime updates
-	 * @param {boolean} isReconnect If the socket is connection is a reconnect attempt
-	 */
-	#createSocket(isReconnect) {
-		if (this.socket) {
-			return;
-		}
-
-		let opened = false;
-		let existingSession = window.name;
-		if (existingSession) {
-			existingSession = "?clientId=" + existingSession;
-		}
-		this.socket = new WebSocket(
-			`ws${window.location.protocol === "https:" ? "s" : ""}://${this.api_host}${this.api_base}/ws${existingSession}`
-		);
-		this.socket.binaryType = "arraybuffer";
-
-		this.socket.addEventListener("open", () => {
-			opened = true;
-			if (isReconnect) {
-				this.dispatchEvent(new CustomEvent("reconnected"));
-			}
-		});
-
-		this.socket.addEventListener("error", () => {
-			if (this.socket) this.socket.close();
-			if (!isReconnect && !opened) {
-				this.#pollQueue();
-			}
-		});
-
-		this.socket.addEventListener("close", () => {
-			setTimeout(() => {
-				this.socket = null;
-				this.#createSocket(true);
-			}, 300);
-			if (opened) {
-				this.dispatchEvent(new CustomEvent("status", { detail: null }));
-				this.dispatchEvent(new CustomEvent("reconnecting"));
-			}
-		});
-
-		this.socket.addEventListener("message", (event) => {
-			try {
-				if (event.data instanceof ArrayBuffer) {
-					const view = new DataView(event.data);
-					const eventType = view.getUint32(0);
-					const buffer = event.data.slice(4);
-					switch (eventType) {
-					case 1:
-						const view2 = new DataView(event.data);
-						const imageType = view2.getUint32(0)
-						let imageMime
-						switch (imageType) {
-							case 1:
-							default:
-								imageMime = "image/jpeg";
-								break;
-							case 2:
-								imageMime = "image/png"
-						}
-						const imageBlob = new Blob([buffer.slice(4)], { type: imageMime });
-						this.dispatchEvent(new CustomEvent("b_preview", { detail: imageBlob }));
-						break;
-					default:
-						throw new Error(`Unknown binary websocket message of type ${eventType}`);
-					}
-				}
-				else {
-				    const msg = JSON.parse(event.data);
-				    switch (msg.type) {
-					    case "status":
-						    if (msg.data.sid) {
-							    this.clientId = msg.data.sid;
-							    window.name = this.clientId; // use window name so it isnt reused when duplicating tabs
-								sessionStorage.setItem("clientId", this.clientId); // store in session storage so duplicate tab can load correct workflow
-						    }
-						    this.dispatchEvent(new CustomEvent("status", { detail: msg.data.status }));
-						    break;
-					    case "progress":
-						    this.dispatchEvent(new CustomEvent("progress", { detail: msg.data }));
-						    break;
-					    case "executing":
-						    this.dispatchEvent(new CustomEvent("executing", { detail: msg.data.node }));
-						    break;
-					    case "executed":
-						    this.dispatchEvent(new CustomEvent("executed", { detail: msg.data }));
-						    break;
-					    case "execution_start":
-						    this.dispatchEvent(new CustomEvent("execution_start", { detail: msg.data }));
-						    break;
-					    case "execution_success":
-						    this.dispatchEvent(new CustomEvent("execution_success", { detail: msg.data }));
-						    break;
-					    case "execution_error":
-						    this.dispatchEvent(new CustomEvent("execution_error", { detail: msg.data }));
-						    break;
-					    case "execution_cached":
-						    this.dispatchEvent(new CustomEvent("execution_cached", { detail: msg.data }));
-						    break;
-					    default:
-						    if (this.#registered.has(msg.type)) {
-							    this.dispatchEvent(new CustomEvent(msg.type, { detail: msg.data }));
-						    } else {
-							    throw new Error(`Unknown message type ${msg.type}`);
-						    }
-				    }
-				}
-			} catch (error) {
-				console.warn("Unhandled message:", event.data, error);
-			}
-		});
-	}
-
-	/**
-	 * Initialises sockets and realtime updates
-	 */
-	init() {
-		this.#createSocket();
-	}
-
-	/**
-	 * Gets a list of extension urls
-	 * @returns An array of script urls to import
-	 */
-	async getExtensions() {
-		const resp = await this.fetchApi("/extensions", { cache: "no-store" });
-		return await resp.json();
-	}
-
-	/**
-	 * Gets a list of embedding names
-	 * @returns An array of script urls to import
-	 */
-	async getEmbeddings() {
-		const resp = await this.fetchApi("/embeddings", { cache: "no-store" });
-		return await resp.json();
-	}
-
-	/**
-	 * Loads node object definitions for the graph
-	 * @returns The node definitions
-	 */
-	async getNodeDefs() {
-		const resp = await this.fetchApi("/object_info", { cache: "no-store" });
-		return await resp.json();
-	}
-
-	/**
-	 *
-	 * @param {number} number The index at which to queue the prompt, passing -1 will insert the prompt at the front of the queue
-	 * @param {object} prompt The prompt data to queue
-	 */
-	async queuePrompt(number, { output, workflow }) {
-		const body = {
-			client_id: this.clientId,
-			prompt: output,
-			extra_data: { extra_pnginfo: { workflow } },
-		};
-
-		if (number === -1) {
-			body.front = true;
-		} else if (number != 0) {
-			body.number = number;
-		}
-
-		const res = await this.fetchApi("/prompt", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify(body),
-		});
-
-		if (res.status !== 200) {
-			throw {
-				response: await res.json(),
-			};
-		}
-
-		return await res.json();
-	}
-
-	/**
-	 * Loads a list of items (queue or history)
-	 * @param {string} type The type of items to load, queue or history
-	 * @returns The items of the specified type grouped by their status
-	 */
-	async getItems(type) {
-		if (type === "queue") {
-			return this.getQueue();
-		}
-		return this.getHistory();
-	}
-
-	/**
-	 * Gets the current state of the queue
-	 * @returns The currently running and queued items
-	 */
-	async getQueue() {
-		try {
-			const res = await this.fetchApi("/queue");
-			const data = await res.json();
-			return {
-				// Running action uses a different endpoint for cancelling
-				Running: data.queue_running.map((prompt) => ({
-					prompt,
-					remove: { name: "Cancel", cb: () => api.interrupt() },
-				})),
-				Pending: data.queue_pending.map((prompt) => ({ prompt })),
-			};
-		} catch (error) {
-			console.error(error);
-			return { Running: [], Pending: [] };
-		}
-	}
-
-	/**
-	 * Gets the prompt execution history
-	 * @returns Prompt history including node outputs
-	 */
-	async getHistory(max_items=200) {
-		try {
-			const res = await this.fetchApi(`/history?max_items=${max_items}`);
-			return { History: Object.values(await res.json()) };
-		} catch (error) {
-			console.error(error);
-			return { History: [] };
-		}
-	}
-
-	/**
-	 * Gets system & device stats
-	 * @returns System stats such as python version, OS, per device info
-	 */
-	async getSystemStats() {
-		const res = await this.fetchApi("/system_stats");
-		return await res.json();
-	}
-
-	/**
-	 * Sends a POST request to the API
-	 * @param {*} type The endpoint to post to
-	 * @param {*} body Optional POST data
-	 */
-	async #postItem(type, body) {
-		try {
-			await this.fetchApi("/" + type, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: body ? JSON.stringify(body) : undefined,
-			});
-		} catch (error) {
-			console.error(error);
-		}
-	}
-
-	/**
-	 * Deletes an item from the specified list
-	 * @param {string} type The type of item to delete, queue or history
-	 * @param {number} id The id of the item to delete
-	 */
-	async deleteItem(type, id) {
-		await this.#postItem(type, { delete: [id] });
-	}
-
-	/**
-	 * Clears the specified list
-	 * @param {string} type The type of list to clear, queue or history
-	 */
-	async clearItems(type) {
-		await this.#postItem(type, { clear: true });
-	}
-
-	/**
-	 * Interrupts the execution of the running prompt
-	 */
-	async interrupt() {
-		await this.#postItem("interrupt", null);
-	}
-
-	/**
-	 * Gets user configuration data and where data should be stored
-	 * @returns { Promise<{ storage: "server" | "browser", users?: Promise<string, unknown>, migrated?: boolean }> }
-	 */
-	async getUserConfig() {
-		return (await this.fetchApi("/users")).json();
-	}
-
-	/**
-	 * Creates a new user
-	 * @param { string } username
-	 * @returns The fetch response
-	 */
-	createUser(username) {
-		return this.fetchApi("/users", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify({ username }),
-		});
-	}
-
-	/**
-	 * Gets all setting values for the current user
-	 * @returns { Promise<string, unknown> } A dictionary of id -> value
-	 */
-	async getSettings() {
-		return (await this.fetchApi("/settings")).json();
-	}
-
-	/**
-	 * Gets a setting for the current user
-	 * @param { string } id The id of the setting to fetch
-	 * @returns { Promise<unknown> } The setting value
-	 */
-	async getSetting(id) {
-		return (await this.fetchApi(`/settings/${encodeURIComponent(id)}`)).json();
-	}
-
-	/**
-	 * Stores a dictionary of settings for the current user
-	 * @param { Record<string, unknown> } settings Dictionary of setting id -> value to save
-	 * @returns { Promise<void> }
-	 */
-	async storeSettings(settings) {
-		return this.fetchApi(`/settings`, {
-			method: "POST",
-			body: JSON.stringify(settings)
-		});
-	}
-
-	/**
-	 * Stores a setting for the current user
-	 * @param { string } id The id of the setting to update
-	 * @param { unknown } value The value of the setting
-	 * @returns { Promise<void> }
-	 */
-	async storeSetting(id, value) {
-		return this.fetchApi(`/settings/${encodeURIComponent(id)}`, {
-			method: "POST",
-			body: JSON.stringify(value)
-		});
-	}
-
-	/**
-	 * Gets a user data file for the current user
-	 * @param { string } file The name of the userdata file to load
-	 * @param { RequestInit } [options]
-	 * @returns { Promise<Response> } The fetch response object
-	 */
-	async getUserData(file, options) {
-		return this.fetchApi(`/userdata/${encodeURIComponent(file)}`, options);
-	}
-
-	/**
-	 * Stores a user data file for the current user
-	 * @param { string } file The name of the userdata file to save
-	 * @param { unknown } data The data to save to the file
-	 * @param { RequestInit & { overwrite?: boolean, stringify?: boolean, throwOnError?: boolean } } [options]
-	 * @returns { Promise<Response> }
-	 */
-	async storeUserData(file, data, options = { overwrite: true, stringify: true, throwOnError: true }) {
-		const resp = await this.fetchApi(`/userdata/${encodeURIComponent(file)}?overwrite=${options?.overwrite}`, {
-			method: "POST",
-			body: options?.stringify ? JSON.stringify(data) : data,
-			...options,
-		});
-		if (resp.status !== 200 && options?.throwOnError !== false) {
-			throw new Error(`Error storing user data file '${file}': ${resp.status} ${(await resp).statusText}`);
-		}
-		return resp;
-	}
-
-	/**
-	 * Deletes a user data file for the current user
-	 * @param { string } file The name of the userdata file to delete
-	 */
-	async deleteUserData(file) {
-		const resp = await this.fetchApi(`/userdata/${encodeURIComponent(file)}`, {
-			method: "DELETE",
-		});
-		if (resp.status !== 204) {
-			throw new Error(`Error removing user data file '${file}': ${resp.status} ${(resp).statusText}`);
-		}
-	}
-
-	/**
-	 * Move a user data file for the current user
-	 * @param { string } source The userdata file to move
-	 * @param { string } dest The destination for the file
-	 */
-	async moveUserData(source, dest, options = { overwrite: false }) {
-		const resp = await this.fetchApi(`/userdata/${encodeURIComponent(source)}/move/${encodeURIComponent(dest)}?overwrite=${options?.overwrite}`, {
-			method: "POST",
-		});
-		return resp;
-	}
-
-	/**
-	 * @overload
-	 * Lists user data files for the current user
-	 * @param { string } dir The directory in which to list files
-	 * @param { boolean } [recurse] If the listing should be recursive
-	 * @param { true } [split] If the paths should be split based on the os path separator
-	 * @returns { Promise<string[][]>> } The list of split file paths in the format [fullPath, ...splitPath]
-	 */
-	/**
-	 * @overload
-	 * Lists user data files for the current user
-	 * @param { string } dir The directory in which to list files
-	 * @param { boolean } [recurse] If the listing should be recursive
-	 * @param { false | undefined } [split] If the paths should be split based on the os path separator
-	 * @returns { Promise<string[]>> } The list of files
-	 */
-	async listUserData(dir, recurse, split) {
-		const resp = await this.fetchApi(
-			`/userdata?${new URLSearchParams({
-				recurse,
-				dir,
-				split,
-			})}`
-		);
-		if (resp.status === 404) return [];
-		if (resp.status !== 200) {
-			throw new Error(`Error getting user data list '${dir}': ${resp.status} ${resp.statusText}`);
-		}
-		return resp.json();
-	}
-}
-
-export const api = new ComfyApi();

web/scripts/changeTracker.js

@@ -1,255 +1,2 @@
-// @ts-check
+// Shim for scripts\changeTracker.ts
-
+export const ChangeTracker = window.comfyAPI.changeTracker.ChangeTracker;
-import { api } from "./api.js";
-import { clone } from "./utils.js";
-
-export class ChangeTracker {
-	static MAX_HISTORY = 50;
-	#app;
-	undo = [];
-	redo = [];
-	activeState = null;
-	isOurLoad = false;
-	/** @type { import("./workflows").ComfyWorkflow | null } */
-	workflow;
-
-	ds;
-	nodeOutputs;
-
-	get app() {
-		return this.#app ?? this.workflow.manager.app;
-	}
-
-	constructor(workflow) {
-		this.workflow = workflow;
-	}
-
-	#setApp(app) {
-		this.#app = app;
-	}
-
-	store() {
-		this.ds = { scale: this.app.canvas.ds.scale, offset: [...this.app.canvas.ds.offset] };
-	}
-
-	restore() {
-		if (this.ds) {
-			this.app.canvas.ds.scale = this.ds.scale;
-			this.app.canvas.ds.offset = this.ds.offset;
-		}
-		if (this.nodeOutputs) {
-			this.app.nodeOutputs = this.nodeOutputs;
-		}
-	}
-
-	checkState() {
-		if (!this.app.graph) return;
-
-		const currentState = this.app.graph.serialize();
-		if (!this.activeState) {
-			this.activeState = clone(currentState);
-			return;
-		}
-		if (!ChangeTracker.graphEqual(this.activeState, currentState)) {
-			this.undo.push(this.activeState);
-			if (this.undo.length > ChangeTracker.MAX_HISTORY) {
-				this.undo.shift();
-			}
-			this.activeState = clone(currentState);
-			this.redo.length = 0;
-			this.workflow.unsaved = true;
-			api.dispatchEvent(new CustomEvent("graphChanged", { detail: this.activeState }));
-		}
-	}
-
-	async updateState(source, target) {
-		const prevState = source.pop();
-		if (prevState) {
-			target.push(this.activeState);
-			this.isOurLoad = true;
-			await this.app.loadGraphData(prevState, false, false, this.workflow);
-			this.activeState = prevState;
-		}
-	}
-
-	async undoRedo(e) {
-		if (e.ctrlKey || e.metaKey) {
-			if (e.key === "y") {
-				this.updateState(this.redo, this.undo);
-				return true;
-			} else if (e.key === "z") {
-				this.updateState(this.undo, this.redo);
-				return true;
-			}
-		}
-	}
-
-	/** @param { import("./app.js").ComfyApp } app */
-	static init(app) {
-		const changeTracker = () => app.workflowManager.activeWorkflow?.changeTracker ?? globalTracker;
-		globalTracker.#setApp(app);
-
-		const loadGraphData = app.loadGraphData;
-		app.loadGraphData = async function () {
-			const v = await loadGraphData.apply(this, arguments);
-			const ct = changeTracker();
-			if (ct.isOurLoad) {
-				ct.isOurLoad = false;
-			} else {
-				ct.checkState();
-			}
-			return v;
-		};
-
-		let keyIgnored = false;
-		window.addEventListener(
-			"keydown",
-			(e) => {
-				const activeEl = document.activeElement;
-				requestAnimationFrame(async () => {
-					let bindInputEl;
-					// If we are auto queue in change mode then we do want to trigger on inputs
-					if (!app.ui.autoQueueEnabled || app.ui.autoQueueMode === "instant") {
-						if (activeEl?.tagName === "INPUT" || activeEl?.["type"] === "textarea") {
-							// Ignore events on inputs, they have their native history
-							return;
-						}
-						bindInputEl = activeEl;
-					}
-
-					keyIgnored = e.key === "Control" || e.key === "Shift" || e.key === "Alt" || e.key === "Meta";
-					if (keyIgnored) return;
-
-					// Check if this is a ctrl+z ctrl+y
-					if (await changeTracker().undoRedo(e)) return;
-
-					// If our active element is some type of input then handle changes after they're done
-					if (ChangeTracker.bindInput(bindInputEl)) return;
-					changeTracker().checkState();
-				});
-			},
-			true
-		);
-
-		window.addEventListener("keyup", (e) => {
-			if (keyIgnored) {
-				keyIgnored = false;
-				changeTracker().checkState();
-			}
-		});
-
-		// Handle clicking DOM elements (e.g. widgets)
-		window.addEventListener("mouseup", () => {
-			changeTracker().checkState();
-		});
-
-		// Handle prompt queue event for dynamic widget changes
-		api.addEventListener("promptQueued", () => {
-			changeTracker().checkState();
-		});
-
-		// Handle litegraph clicks
-		const processMouseUp = LGraphCanvas.prototype.processMouseUp;
-		LGraphCanvas.prototype.processMouseUp = function (e) {
-			const v = processMouseUp.apply(this, arguments);
-			changeTracker().checkState();
-			return v;
-		};
-		const processMouseDown = LGraphCanvas.prototype.processMouseDown;
-		LGraphCanvas.prototype.processMouseDown = function (e) {
-			const v = processMouseDown.apply(this, arguments);
-			changeTracker().checkState();
-			return v;
-		};
-
-		// Handle litegraph context menu for COMBO widgets
-		const close = LiteGraph.ContextMenu.prototype.close;
-		LiteGraph.ContextMenu.prototype.close = function (e) {
-			const v = close.apply(this, arguments);
-			changeTracker().checkState();
-			return v;
-		};
-
-		// Detects nodes being added via the node search dialog
-		const onNodeAdded = LiteGraph.LGraph.prototype.onNodeAdded;
-		LiteGraph.LGraph.prototype.onNodeAdded = function () {
-			const v = onNodeAdded?.apply(this, arguments);
-			if (!app?.configuringGraph) {
-				const ct = changeTracker();
-				if (!ct.isOurLoad) {
-					ct.checkState();
-				}
-			}
-			return v;
-		};
-
-		// Store node outputs
-		api.addEventListener("executed", ({ detail }) => {
-			const prompt = app.workflowManager.queuedPrompts[detail.prompt_id];
-			if (!prompt?.workflow) return;
-			const nodeOutputs = (prompt.workflow.changeTracker.nodeOutputs ??= {});
-			const output = nodeOutputs[detail.node];
-			if (detail.merge && output) {
-				for (const k in detail.output ?? {}) {
-					const v = output[k];
-					if (v instanceof Array) {
-						output[k] = v.concat(detail.output[k]);
-					} else {
-						output[k] = detail.output[k];
-					}
-				}
-			} else {
-				nodeOutputs[detail.node] = detail.output;
-			}
-		});
-	}
-
-	static bindInput(app, activeEl) {
-		if (activeEl && activeEl.tagName !== "CANVAS" && activeEl.tagName !== "BODY") {
-			for (const evt of ["change", "input", "blur"]) {
-				if (`on${evt}` in activeEl) {
-					const listener = () => {
-						app.workflowManager.activeWorkflow.changeTracker.checkState();
-						activeEl.removeEventListener(evt, listener);
-					};
-					activeEl.addEventListener(evt, listener);
-					return true;
-				}
-			}
-		}
-	}
-
-	static graphEqual(a, b, path = "") {
-		if (a === b) return true;
-
-		if (typeof a == "object" && a && typeof b == "object" && b) {
-			const keys = Object.getOwnPropertyNames(a);
-
-			if (keys.length != Object.getOwnPropertyNames(b).length) {
-				return false;
-			}
-
-			for (const key of keys) {
-				let av = a[key];
-				let bv = b[key];
-				if (!path && key === "nodes") {
-					// Nodes need to be sorted as the order changes when selecting nodes
-					av = [...av].sort((a, b) => a.id - b.id);
-					bv = [...bv].sort((a, b) => a.id - b.id);
-				} else if (path === "extra.ds") {
-					// Ignore view changes
-					continue;
-				}
-				if (!ChangeTracker.graphEqual(av, bv, path + (path ? "." : "") + key)) {
-					return false;
-				}
-			}
-
-			return true;
-		}
-
-		return false;
-	}
-}
-
-const globalTracker = new ChangeTracker({});

web/scripts/defaultGraph.js

@@ -1,119 +1,2 @@
-export const defaultGraph = {
+// Shim for scripts\defaultGraph.ts
-	last_node_id: 9,
+export const defaultGraph = window.comfyAPI.defaultGraph.defaultGraph;
-	last_link_id: 9,
-	nodes: [
-		{
-			id: 7,
-			type: "CLIPTextEncode",
-			pos: [413, 389],
-			size: { 0: 425.27801513671875, 1: 180.6060791015625 },
-			flags: {},
-			order: 3,
-			mode: 0,
-			inputs: [{ name: "clip", type: "CLIP", link: 5 }],
-			outputs: [{ name: "CONDITIONING", type: "CONDITIONING", links: [6], slot_index: 0 }],
-			properties: {},
-			widgets_values: ["text, watermark"],
-		},
-		{
-			id: 6,
-			type: "CLIPTextEncode",
-			pos: [415, 186],
-			size: { 0: 422.84503173828125, 1: 164.31304931640625 },
-			flags: {},
-			order: 2,
-			mode: 0,
-			inputs: [{ name: "clip", type: "CLIP", link: 3 }],
-			outputs: [{ name: "CONDITIONING", type: "CONDITIONING", links: [4], slot_index: 0 }],
-			properties: {},
-			widgets_values: ["beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"],
-		},
-		{
-			id: 5,
-			type: "EmptyLatentImage",
-			pos: [473, 609],
-			size: { 0: 315, 1: 106 },
-			flags: {},
-			order: 1,
-			mode: 0,
-			outputs: [{ name: "LATENT", type: "LATENT", links: [2], slot_index: 0 }],
-			properties: {},
-			widgets_values: [512, 512, 1],
-		},
-		{
-			id: 3,
-			type: "KSampler",
-			pos: [863, 186],
-			size: { 0: 315, 1: 262 },
-			flags: {},
-			order: 4,
-			mode: 0,
-			inputs: [
-				{ name: "model", type: "MODEL", link: 1 },
-				{ name: "positive", type: "CONDITIONING", link: 4 },
-				{ name: "negative", type: "CONDITIONING", link: 6 },
-				{ name: "latent_image", type: "LATENT", link: 2 },
-			],
-			outputs: [{ name: "LATENT", type: "LATENT", links: [7], slot_index: 0 }],
-			properties: {},
-			widgets_values: [156680208700286, true, 20, 8, "euler", "normal", 1],
-		},
-		{
-			id: 8,
-			type: "VAEDecode",
-			pos: [1209, 188],
-			size: { 0: 210, 1: 46 },
-			flags: {},
-			order: 5,
-			mode: 0,
-			inputs: [
-				{ name: "samples", type: "LATENT", link: 7 },
-				{ name: "vae", type: "VAE", link: 8 },
-			],
-			outputs: [{ name: "IMAGE", type: "IMAGE", links: [9], slot_index: 0 }],
-			properties: {},
-		},
-		{
-			id: 9,
-			type: "SaveImage",
-			pos: [1451, 189],
-			size: { 0: 210, 1: 26 },
-			flags: {},
-			order: 6,
-			mode: 0,
-			inputs: [{ name: "images", type: "IMAGE", link: 9 }],
-			properties: {},
-		},
-		{
-			id: 4,
-			type: "CheckpointLoaderSimple",
-			pos: [26, 474],
-			size: { 0: 315, 1: 98 },
-			flags: {},
-			order: 0,
-			mode: 0,
-			outputs: [
-				{ name: "MODEL", type: "MODEL", links: [1], slot_index: 0 },
-				{ name: "CLIP", type: "CLIP", links: [3, 5], slot_index: 1 },
-				{ name: "VAE", type: "VAE", links: [8], slot_index: 2 },
-			],
-			properties: {},
-			widgets_values: ["v1-5-pruned-emaonly.ckpt"],
-		},
-	],
-	links: [
-		[1, 4, 0, 3, 0, "MODEL"],
-		[2, 5, 0, 3, 3, "LATENT"],
-		[3, 4, 1, 6, 0, "CLIP"],
-		[4, 6, 0, 3, 1, "CONDITIONING"],
-		[5, 4, 1, 7, 0, "CLIP"],
-		[6, 7, 0, 3, 2, "CONDITIONING"],
-		[7, 3, 0, 8, 0, "LATENT"],
-		[8, 4, 2, 8, 1, "VAE"],
-		[9, 8, 0, 9, 0, "IMAGE"],
-	],
-	groups: [],
-	config: {},
-	extra: {},
-	version: 0.4,
-};

web/scripts/domWidget.js

@@ -1,335 +1,2 @@
-import { app, ANIM_PREVIEW_WIDGET } from "./app.js";
+// Shim for scripts\domWidget.ts
-
+export const addDomClippingSetting = window.comfyAPI.domWidget.addDomClippingSetting;
-const SIZE = Symbol();
-
-function intersect(a, b) {
-	const x = Math.max(a.x, b.x);
-	const num1 = Math.min(a.x + a.width, b.x + b.width);
-	const y = Math.max(a.y, b.y);
-	const num2 = Math.min(a.y + a.height, b.y + b.height);
-	if (num1 >= x && num2 >= y) return [x, y, num1 - x, num2 - y];
-	else return null;
-}
-
-function getClipPath(node, element) {
-	const selectedNode = Object.values(app.canvas.selected_nodes)[0];
-	if (selectedNode && selectedNode !== node) {
-		const elRect = element.getBoundingClientRect();
-		const MARGIN = 7;
-		const scale = app.canvas.ds.scale;
-
-		const bounding = selectedNode.getBounding();
-		const intersection = intersect(
-			{ x: elRect.x / scale, y: elRect.y / scale, width: elRect.width / scale, height: elRect.height / scale },
-			{
-				x: selectedNode.pos[0] + app.canvas.ds.offset[0] - MARGIN,
-				y: selectedNode.pos[1] + app.canvas.ds.offset[1] - LiteGraph.NODE_TITLE_HEIGHT - MARGIN,
-				width: bounding[2] + MARGIN + MARGIN,
-				height: bounding[3] + MARGIN + MARGIN,
-			}
-		);
-
-		if (!intersection) {
-			return "";
-		}
-
-		const widgetRect = element.getBoundingClientRect();
-		const clipX = elRect.left + intersection[0] - widgetRect.x / scale + "px";
-		const clipY = elRect.top + intersection[1] - widgetRect.y / scale + "px";
-		const clipWidth = intersection[2] + "px";
-		const clipHeight = intersection[3] + "px";
-		const path = `polygon(0% 0%, 0% 100%, ${clipX} 100%, ${clipX} ${clipY}, calc(${clipX} + ${clipWidth}) ${clipY}, calc(${clipX} + ${clipWidth}) calc(${clipY} + ${clipHeight}), ${clipX} calc(${clipY} + ${clipHeight}), ${clipX} 100%, 100% 100%, 100% 0%)`;
-		return path;
-	}
-	return "";
-}
-
-function computeSize(size) {
-	if (this.widgets?.[0]?.last_y == null) return;
-
-	let y = this.widgets[0].last_y;
-	let freeSpace = size[1] - y;
-
-	let widgetHeight = 0;
-	let dom = [];
-	for (const w of this.widgets) {
-		if (w.type === "converted-widget") {
-			// Ignore
-			delete w.computedHeight;
-		} else if (w.computeSize) {
-			widgetHeight += w.computeSize()[1] + 4;
-		} else if (w.element) {
-			// Extract DOM widget size info
-			const styles = getComputedStyle(w.element);
-			let minHeight = w.options.getMinHeight?.() ?? parseInt(styles.getPropertyValue("--comfy-widget-min-height"));
-			let maxHeight = w.options.getMaxHeight?.() ?? parseInt(styles.getPropertyValue("--comfy-widget-max-height"));
-
-			let prefHeight = w.options.getHeight?.() ?? styles.getPropertyValue("--comfy-widget-height");
-			if (prefHeight.endsWith?.("%")) {
-				prefHeight = size[1] * (parseFloat(prefHeight.substring(0, prefHeight.length - 1)) / 100);
-			} else {
-				prefHeight = parseInt(prefHeight);
-				if (isNaN(minHeight)) {
-					minHeight = prefHeight;
-				}
-			}
-			if (isNaN(minHeight)) {
-				minHeight = 50;
-			}
-			if (!isNaN(maxHeight)) {
-				if (!isNaN(prefHeight)) {
-					prefHeight = Math.min(prefHeight, maxHeight);
-				} else {
-					prefHeight = maxHeight;
-				}
-			}
-			dom.push({
-				minHeight,
-				prefHeight,
-				w,
-			});
-		} else {
-			widgetHeight += LiteGraph.NODE_WIDGET_HEIGHT + 4;
-		}
-	}
-
-	freeSpace -= widgetHeight;
-
-	// Calculate sizes with all widgets at their min height
-	const prefGrow = []; // Nodes that want to grow to their prefd size
-	const canGrow = []; // Nodes that can grow to auto size
-	let growBy = 0;
-	for (const d of dom) {
-		freeSpace -= d.minHeight;
-		if (isNaN(d.prefHeight)) {
-			canGrow.push(d);
-			d.w.computedHeight = d.minHeight;
-		} else {
-			const diff = d.prefHeight - d.minHeight;
-			if (diff > 0) {
-				prefGrow.push(d);
-				growBy += diff;
-				d.diff = diff;
-			} else {
-				d.w.computedHeight = d.minHeight;
-			}
-		}
-	}
-
-	if (this.imgs && !this.widgets.find((w) => w.name === ANIM_PREVIEW_WIDGET)) {
-		// Allocate space for image
-		freeSpace -= 220;
-	}
-
-	this.freeWidgetSpace = freeSpace;
-
-	if (freeSpace < 0) {
-		// Not enough space for all widgets so we need to grow
-		size[1] -= freeSpace;
-		this.graph.setDirtyCanvas(true);
-	} else {
-		// Share the space between each
-		const growDiff = freeSpace - growBy;
-		if (growDiff > 0) {
-			// All pref sizes can be fulfilled
-			freeSpace = growDiff;
-			for (const d of prefGrow) {
-				d.w.computedHeight = d.prefHeight;
-			}
-		} else {
-			// We need to grow evenly
-			const shared = -growDiff / prefGrow.length;
-			for (const d of prefGrow) {
-				d.w.computedHeight = d.prefHeight - shared;
-			}
-			freeSpace = 0;
-		}
-
-		if (freeSpace > 0 && canGrow.length) {
-			// Grow any that are auto height
-			const shared = freeSpace / canGrow.length;
-			for (const d of canGrow) {
-				d.w.computedHeight += shared;
-			}
-		}
-	}
-
-	// Position each of the widgets
-	for (const w of this.widgets) {
-		w.y = y;
-		if (w.computedHeight) {
-			y += w.computedHeight;
-		} else if (w.computeSize) {
-			y += w.computeSize()[1] + 4;
-		} else {
-			y += LiteGraph.NODE_WIDGET_HEIGHT + 4;
-		}
-	}
-}
-
-// Override the compute visible nodes function to allow us to hide/show DOM elements when the node goes offscreen
-const elementWidgets = new Set();
-const computeVisibleNodes = LGraphCanvas.prototype.computeVisibleNodes;
-LGraphCanvas.prototype.computeVisibleNodes = function () {
-	const visibleNodes = computeVisibleNodes.apply(this, arguments);
-	for (const node of app.graph._nodes) {
-		if (elementWidgets.has(node)) {
-			const hidden = visibleNodes.indexOf(node) === -1;
-			for (const w of node.widgets) {
-				if (w.element) {
-					w.element.hidden = hidden;
-					w.element.style.display = hidden ? "none" : undefined;
-					if (hidden) {
-						w.options.onHide?.(w);
-					}
-				}
-			}
-		}
-	}
-
-	return visibleNodes;
-};
-
-let enableDomClipping = true;
-
-export function addDomClippingSetting() {
-	app.ui.settings.addSetting({
-		id: "Comfy.DOMClippingEnabled",
-		name: "Enable DOM element clipping (enabling may reduce performance)",
-		type: "boolean",
-		defaultValue: enableDomClipping,
-		onChange(value) {
-			enableDomClipping = !!value;
-		},
-	});
-}
-
-LGraphNode.prototype.addDOMWidget = function (name, type, element, options) {
-	options = { hideOnZoom: true, selectOn: ["focus", "click"], ...options };
-
-	if (!element.parentElement) {
-		document.body.append(element);
-	}
-	element.hidden = true;
-	element.style.display = "none";
-	
-	let mouseDownHandler;
-	if (element.blur) {
-		mouseDownHandler = (event) => {
-			if (!element.contains(event.target)) {
-				element.blur();
-			}
-		};
-		document.addEventListener("mousedown", mouseDownHandler);
-	}
-
-	const { nodeData } = this.constructor;
-	const tooltip = (nodeData?.input.required?.[name] ?? nodeData?.input.optional?.[name])?.[1]?.tooltip;
-	if (tooltip && !element.title) {
-		element.title = tooltip;
-	}
-
-	const widget = {
-		type,
-		name,
-		get value() {
-			return options.getValue?.() ?? undefined;
-		},
-		set value(v) {
-			options.setValue?.(v);
-			widget.callback?.(widget.value);
-		},
-		draw: function (ctx, node, widgetWidth, y, widgetHeight) {
-			if (widget.computedHeight == null) {
-				computeSize.call(node, node.size);
-			}
-
-			const hidden =
-				node.flags?.collapsed ||
-				(!!options.hideOnZoom && app.canvas.ds.scale < 0.5) ||
-				widget.computedHeight <= 0 ||
-				widget.type === "converted-widget"||
-				widget.type === "hidden";
-			element.hidden = hidden;
-			element.style.display = hidden ? "none" : null;
-			if (hidden) {
-				widget.options.onHide?.(widget);
-				return;
-			}
-
-			const margin = 10;
-			const elRect = ctx.canvas.getBoundingClientRect();
-			const transform = new DOMMatrix()
-				.scaleSelf(elRect.width / ctx.canvas.width, elRect.height / ctx.canvas.height)
-				.multiplySelf(ctx.getTransform())
-				.translateSelf(margin, margin + y );
-
-			const scale = new DOMMatrix().scaleSelf(transform.a, transform.d);
-
-			Object.assign(element.style, {
-				transformOrigin: "0 0",
-				transform: scale,
-				left: `${transform.a + transform.e + elRect.left}px`,
-				top: `${transform.d + transform.f + elRect.top}px`,
-				width: `${widgetWidth - margin * 2}px`,
-				height: `${(widget.computedHeight ?? 50) - margin * 2}px`,
-				position: "absolute",
-				zIndex: app.graph._nodes.indexOf(node),
-			});
-
-			if (enableDomClipping) {
-				element.style.clipPath = getClipPath(node, element);
-				element.style.willChange = "clip-path";
-			}
-
-			this.options.onDraw?.(widget);
-		},
-		element,
-		options,
-		onRemove() {
-			if (mouseDownHandler) {
-				document.removeEventListener("mousedown", mouseDownHandler);
-			}
-			element.remove();
-		},
-	};
-
-	for (const evt of options.selectOn) {
-		element.addEventListener(evt, () => {
-			app.canvas.selectNode(this);
-			app.canvas.bringToFront(this);
-		});
-	}
-
-	this.addCustomWidget(widget);
-	elementWidgets.add(this);
-
-	const collapse = this.collapse;
-	this.collapse = function() {
-		collapse.apply(this, arguments);
-		if(this.flags?.collapsed) {
-			element.hidden = true;
-			element.style.display = "none";
-		}
-	}
-
-	const onRemoved = this.onRemoved;
-	this.onRemoved = function () {
-		element.remove();
-		elementWidgets.delete(this);
-		onRemoved?.apply(this, arguments);
-	};
-
-	if (!this[SIZE]) {
-		this[SIZE] = true;
-		const onResize = this.onResize;
-		this.onResize = function (size) {
-			options.beforeResize?.call(widget, this);
-			computeSize.call(this, size);
-			onResize?.apply(this, arguments);
-			options.afterResize?.call(widget, this);
-		};
-	}
-
-	return widget;
-};

web/scripts/logging.js

@@ -1,370 +1,2 @@
-import { $el, ComfyDialog } from "./ui.js";
+// Shim for scripts\logging.ts
-import { api } from "./api.js";
+export const ComfyLogging = window.comfyAPI.logging.ComfyLogging;
-
-$el("style", {
-	textContent: `
-        .comfy-logging-logs {
-            display: grid;
-            color: var(--fg-color);
-            white-space: pre-wrap;
-        }
-        .comfy-logging-log {
-            display: contents;
-        }
-        .comfy-logging-title {
-            background: var(--tr-even-bg-color);
-            font-weight: bold;
-            margin-bottom: 5px;
-            text-align: center;
-        }
-        .comfy-logging-log div {
-            background: var(--row-bg);
-            padding: 5px;
-        }
-    `,
-	parent: document.body,
-});
-
-// Stringify function supporting max depth and removal of circular references
-// https://stackoverflow.com/a/57193345
-function stringify(val, depth, replacer, space, onGetObjID) {
-	depth = isNaN(+depth) ? 1 : depth;
-	var recursMap = new WeakMap();
-	function _build(val, depth, o, a, r) {
-		// (JSON.stringify() has it's own rules, which we respect here by using it for property iteration)
-		return !val || typeof val != "object"
-			? val
-			: ((r = recursMap.has(val)),
-			  recursMap.set(val, true),
-			  (a = Array.isArray(val)),
-			  r
-					? (o = (onGetObjID && onGetObjID(val)) || null)
-					: JSON.stringify(val, function (k, v) {
-							if (a || depth > 0) {
-								if (replacer) v = replacer(k, v);
-								if (!k) return (a = Array.isArray(v)), (val = v);
-								!o && (o = a ? [] : {});
-								o[k] = _build(v, a ? depth : depth - 1);
-							}
-					  }),
-			  o === void 0 ? (a ? [] : {}) : o);
-	}
-	return JSON.stringify(_build(val, depth), null, space);
-}
-
-const jsonReplacer = (k, v, ui) => {
-	if (v instanceof Array && v.length === 1) {
-		v = v[0];
-	}
-	if (v instanceof Date) {
-		v = v.toISOString();
-		if (ui) {
-			v = v.split("T")[1];
-		}
-	}
-	if (v instanceof Error) {
-		let err = "";
-		if (v.name) err += v.name + "\n";
-		if (v.message) err += v.message + "\n";
-		if (v.stack) err += v.stack + "\n";
-		if (!err) {
-			err = v.toString();
-		}
-		v = err;
-	}
-	return v;
-};
-
-const fileInput = $el("input", {
-	type: "file",
-	accept: ".json",
-	style: { display: "none" },
-	parent: document.body,
-});
-
-class ComfyLoggingDialog extends ComfyDialog {
-	constructor(logging) {
-		super();
-		this.logging = logging;
-	}
-
-	clear() {
-		this.logging.clear();
-		this.show();
-	}
-
-	export() {
-		const blob = new Blob([stringify([...this.logging.entries], 20, jsonReplacer, "\t")], {
-			type: "application/json",
-		});
-		const url = URL.createObjectURL(blob);
-		const a = $el("a", {
-			href: url,
-			download: `comfyui-logs-${Date.now()}.json`,
-			style: { display: "none" },
-			parent: document.body,
-		});
-		a.click();
-		setTimeout(function () {
-			a.remove();
-			window.URL.revokeObjectURL(url);
-		}, 0);
-	}
-
-	import() {
-		fileInput.onchange = () => {
-			const reader = new FileReader();
-			reader.onload = () => {
-				fileInput.remove();
-				try {
-					const obj = JSON.parse(reader.result);
-					if (obj instanceof Array) {
-						this.show(obj);
-					} else {
-						throw new Error("Invalid file selected.");
-					}
-				} catch (error) {
-					alert("Unable to load logs: " + error.message);
-				}
-			};
-			reader.readAsText(fileInput.files[0]);
-		};
-		fileInput.click();
-	}
-
-	createButtons() {
-		return [
-			$el("button", {
-				type: "button",
-				textContent: "Clear",
-				onclick: () => this.clear(),
-			}),
-			$el("button", {
-				type: "button",
-				textContent: "Export logs...",
-				onclick: () => this.export(),
-			}),
-			$el("button", {
-				type: "button",
-				textContent: "View exported logs...",
-				onclick: () => this.import(),
-			}),
-			...super.createButtons(),
-		];
-	}
-
-	getTypeColor(type) {
-		switch (type) {
-			case "error":
-				return "red";
-			case "warn":
-				return "orange";
-			case "debug":
-				return "dodgerblue";
-		}
-	}
-
-	show(entries) {
-		if (!entries) entries = this.logging.entries;
-		this.element.style.width = "100%";
-		const cols = {
-			source: "Source",
-			type: "Type",
-			timestamp: "Timestamp",
-			message: "Message",
-		};
-		const keys = Object.keys(cols);
-		const headers = Object.values(cols).map((title) =>
-			$el("div.comfy-logging-title", {
-				textContent: title,
-			})
-		);
-		const rows = entries.map((entry, i) => {
-			return $el(
-				"div.comfy-logging-log",
-				{
-					$: (el) => el.style.setProperty("--row-bg", `var(--tr-${i % 2 ? "even" : "odd"}-bg-color)`),
-				},
-				keys.map((key) => {
-					let v = entry[key];
-					let color;
-					if (key === "type") {
-						color = this.getTypeColor(v);
-					} else {
-						v = jsonReplacer(key, v, true);
-
-						if (typeof v === "object") {
-							v = stringify(v, 5, jsonReplacer, "  ");
-						}
-					}
-
-					return $el("div", {
-						style: {
-							color,
-						},
-						textContent: v,
-					});
-				})
-			);
-		});
-
-		const grid = $el(
-			"div.comfy-logging-logs",
-			{
-				style: {
-					gridTemplateColumns: `repeat(${headers.length}, 1fr)`,
-				},
-			},
-			[...headers, ...rows]
-		);
-		const els = [grid];
-		if (!this.logging.enabled) {
-			els.unshift(
-				$el("h3", {
-					style: { textAlign: "center" },
-					textContent: "Logging is disabled",
-				})
-			);
-		}
-		super.show($el("div", els));
-	}
-}
-
-export class ComfyLogging {
-	/**
-	 * @type Array<{ source: string, type: string, timestamp: Date, message: any }>
-	 */
-	entries = [];
-
-	#enabled;
-	#console = {};
-
-	get enabled() {
-		return this.#enabled;
-	}
-
-	set enabled(value) {
-		if (value === this.#enabled) return;
-		if (value) {
-			this.patchConsole();
-		} else {
-			this.unpatchConsole();
-		}
-		this.#enabled = value;
-	}
-
-	constructor(app) {
-		this.app = app;
-
-		this.dialog = new ComfyLoggingDialog(this);
-		this.addSetting();
-		this.catchUnhandled();
-		this.addInitData();
-	}
-
-	addSetting() {
-		const settingId = "Comfy.Logging.Enabled";
-		const htmlSettingId = settingId.replaceAll(".", "-");
-		const setting = this.app.ui.settings.addSetting({
-			id: settingId,
-			name: settingId,
-			defaultValue: true,
-			onChange: (value) => {
-				this.enabled = value;
-			},
-			type: (name, setter, value) => {
-				return $el("tr", [
-					$el("td", [
-						$el("label", {
-							textContent: "Logging",
-							for: htmlSettingId,
-						}),
-					]),
-					$el("td", [
-						$el("input", {
-							id: htmlSettingId,
-							type: "checkbox",
-							checked: value,
-							onchange: (event) => {
-								setter(event.target.checked);
-							},
-						}),
-						$el("button", {
-							textContent: "View Logs",
-							onclick: () => {
-								this.app.ui.settings.element.close();
-								this.dialog.show();
-							},
-							style: {
-								fontSize: "14px",
-								display: "block",
-								marginTop: "5px",
-							},
-						}),
-					]),
-				]);
-			},
-		});
-		this.enabled = setting.value;
-	}
-
-	patchConsole() {
-		// Capture common console outputs
-		const self = this;
-		for (const type of ["log", "warn", "error", "debug"]) {
-			const orig = console[type];
-			this.#console[type] = orig;
-			console[type] = function () {
-				orig.apply(console, arguments);
-				self.addEntry("console", type, ...arguments);
-			};
-		}
-	}
-
-	unpatchConsole() {
-		// Restore original console functions
-		for (const type of Object.keys(this.#console)) {
-			console[type] = this.#console[type];
-		}
-		this.#console = {};
-	}
-
-	catchUnhandled() {
-		// Capture uncaught errors
-		window.addEventListener("error", (e) => {
-			this.addEntry("window", "error", e.error ?? "Unknown error");
-			return false;
-		});
-
-		window.addEventListener("unhandledrejection", (e) => {
-			this.addEntry("unhandledrejection", "error", e.reason ?? "Unknown error");
-		});
-	}
-
-	clear() {
-		this.entries = [];
-	}
-
-	addEntry(source, type, ...args) {
-		if (this.enabled) {
-			this.entries.push({
-				source,
-				type,
-				timestamp: new Date(),
-				message: args,
-			});
-		}
-	}
-
-	log(source, ...args) {
-		this.addEntry(source, "log", ...args);
-	}
-
-	async addInitData() {
-		if (!this.enabled) return;
-		const source = "ComfyUI.Logging";
-		this.addEntry(source, "debug", { UserAgent: navigator.userAgent });
-		const systemStats = await api.getSystemStats();
-		this.addEntry(source, "debug", systemStats);
-	}
-}

web/scripts/metadata/flac.js

@@ -0,0 +1,3 @@
+// Shim for scripts\metadata\flac.ts
+export const getFromFlacBuffer = window.comfyAPI.flac.getFromFlacBuffer;
+export const getFromFlacFile = window.comfyAPI.flac.getFromFlacFile;

web/scripts/metadata/png.js

@@ -0,0 +1,3 @@
+// Shim for scripts\metadata\png.ts
+export const getFromPngBuffer = window.comfyAPI.png.getFromPngBuffer;
+export const getFromPngFile = window.comfyAPI.png.getFromPngFile;

web/scripts/pnginfo.js

@@ -1,507 +1,6 @@
-import { api } from "./api.js";
+// Shim for scripts\pnginfo.ts
-
+export const getPngMetadata = window.comfyAPI.pnginfo.getPngMetadata;
-export function getPngMetadata(file) {
+export const getFlacMetadata = window.comfyAPI.pnginfo.getFlacMetadata;
-	return new Promise((r) => {
+export const getWebpMetadata = window.comfyAPI.pnginfo.getWebpMetadata;
-		const reader = new FileReader();
+export const getLatentMetadata = window.comfyAPI.pnginfo.getLatentMetadata;
-		reader.onload = (event) => {
+export const importA1111 = window.comfyAPI.pnginfo.importA1111;
-			// Get the PNG data as a Uint8Array
-			const pngData = new Uint8Array(event.target.result);
-			const dataView = new DataView(pngData.buffer);
-
-			// Check that the PNG signature is present
-			if (dataView.getUint32(0) !== 0x89504e47) {
-				console.error("Not a valid PNG file");
-				r();
-				return;
-			}
-
-			// Start searching for chunks after the PNG signature
-			let offset = 8;
-			let txt_chunks = {};
-			// Loop through the chunks in the PNG file
-			while (offset < pngData.length) {
-				// Get the length of the chunk
-				const length = dataView.getUint32(offset);
-				// Get the chunk type
-				const type = String.fromCharCode(...pngData.slice(offset + 4, offset + 8));
-				if (type === "tEXt" || type == "comf" || type === "iTXt") {
-					// Get the keyword
-					let keyword_end = offset + 8;
-					while (pngData[keyword_end] !== 0) {
-						keyword_end++;
-					}
-					const keyword = String.fromCharCode(...pngData.slice(offset + 8, keyword_end));
-					// Get the text
-					const contentArraySegment = pngData.slice(keyword_end + 1, offset + 8 + length);
-					const contentJson = new TextDecoder("utf-8").decode(contentArraySegment);
-					txt_chunks[keyword] = contentJson;
-				}
-
-				offset += 12 + length;
-			}
-
-			r(txt_chunks);
-		};
-
-		reader.readAsArrayBuffer(file);
-	});
-}
-
-function parseExifData(exifData) {
-	// Check for the correct TIFF header (0x4949 for little-endian or 0x4D4D for big-endian)
-	const isLittleEndian = String.fromCharCode(...exifData.slice(0, 2)) === "II";
-
-	// Function to read 16-bit and 32-bit integers from binary data
-	function readInt(offset, isLittleEndian, length) {
-		let arr = exifData.slice(offset, offset + length)
-		if (length === 2) {
-			return new DataView(arr.buffer, arr.byteOffset, arr.byteLength).getUint16(0, isLittleEndian);
-		} else if (length === 4) {
-			return new DataView(arr.buffer, arr.byteOffset, arr.byteLength).getUint32(0, isLittleEndian);
-		}
-	}
-
-	// Read the offset to the first IFD (Image File Directory)
-	const ifdOffset = readInt(4, isLittleEndian, 4);
-
-	function parseIFD(offset) {
-		const numEntries = readInt(offset, isLittleEndian, 2);
-		const result = {};
-
-		for (let i = 0; i < numEntries; i++) {
-			const entryOffset = offset + 2 + i * 12;
-			const tag = readInt(entryOffset, isLittleEndian, 2);
-			const type = readInt(entryOffset + 2, isLittleEndian, 2);
-			const numValues = readInt(entryOffset + 4, isLittleEndian, 4);
-			const valueOffset = readInt(entryOffset + 8, isLittleEndian, 4);
-
-			// Read the value(s) based on the data type
-			let value;
-			if (type === 2) {
-				// ASCII string
-				value = String.fromCharCode(...exifData.slice(valueOffset, valueOffset + numValues - 1));
-			}
-
-			result[tag] = value;
-		}
-
-		return result;
-	}
-
-	// Parse the first IFD
-	const ifdData = parseIFD(ifdOffset);
-	return ifdData;
-}
-
-function splitValues(input) {
-    var output = {};
-    for (var key in input) {
-		var value = input[key];
-		var splitValues = value.split(':', 2);
-		output[splitValues[0]] = splitValues[1];
-    }
-    return output;
-}
-
-export function getWebpMetadata(file) {
-	return new Promise((r) => {
-		const reader = new FileReader();
-		reader.onload = (event) => {
-			const webp = new Uint8Array(event.target.result);
-			const dataView = new DataView(webp.buffer);
-
-			// Check that the WEBP signature is present
-			if (dataView.getUint32(0) !== 0x52494646 || dataView.getUint32(8) !== 0x57454250) {
-				console.error("Not a valid WEBP file");
-				r();
-				return;
-			}
-
-			// Start searching for chunks after the WEBP signature
-			let offset = 12;
-			let txt_chunks = {};
-			// Loop through the chunks in the WEBP file
-			while (offset < webp.length) {
-				const chunk_length = dataView.getUint32(offset + 4, true);
-				const chunk_type = String.fromCharCode(...webp.slice(offset, offset + 4));
-				if (chunk_type === "EXIF") {
-					if (String.fromCharCode(...webp.slice(offset + 8, offset + 8 + 6)) == "Exif\0\0") {
-						offset += 6;
-					}
-					let data = parseExifData(webp.slice(offset + 8, offset + 8 + chunk_length));
-					for (var key in data) {
-						var value = data[key];
-						let index = value.indexOf(':');
-						txt_chunks[value.slice(0, index)] = value.slice(index + 1);
-					}
-					break;
-				}
-
-				offset += 8 + chunk_length;
-			}
-
-			r(txt_chunks);
-		};
-
-		reader.readAsArrayBuffer(file);
-	});
-}
-
-export function getLatentMetadata(file) {
-	return new Promise((r) => {
-		const reader = new FileReader();
-		reader.onload = (event) => {
-			const safetensorsData = new Uint8Array(event.target.result);
-			const dataView = new DataView(safetensorsData.buffer);
-			let header_size = dataView.getUint32(0, true);
-			let offset = 8;
-			let header = JSON.parse(new TextDecoder().decode(safetensorsData.slice(offset, offset + header_size)));
-			r(header.__metadata__);
-		};
-
-		var slice = file.slice(0, 1024 * 1024 * 4);
-		reader.readAsArrayBuffer(slice);
-	});
-}
-
-
-function getString(dataView, offset, length) {
-	let string = '';
-	for (let i = 0; i < length; i++) {
-		string += String.fromCharCode(dataView.getUint8(offset + i));
-	}
-	return string;
-}
-
-// Function to parse the Vorbis Comment block
-function parseVorbisComment(dataView) {
-	let offset = 0;
-	const vendorLength = dataView.getUint32(offset, true);
-	offset += 4;
-	const vendorString = getString(dataView, offset, vendorLength);
-	offset += vendorLength;
-
-	const userCommentListLength = dataView.getUint32(offset, true);
-	offset += 4;
-	const comments = {};
-	for (let i = 0; i < userCommentListLength; i++) {
-		const commentLength = dataView.getUint32(offset, true);
-		offset += 4;
-		const comment = getString(dataView, offset, commentLength);
-		offset += commentLength;
-
-		const ind = comment.indexOf('=')
-		const key = comment.substring(0, ind);
-
-		comments[key] = comment.substring(ind+1);
-	}
-
-	return comments;
-}
-
-// Function to read a FLAC file and parse Vorbis comments
-export function getFlacMetadata(file) {
-	return new Promise((r) => {
-		const reader = new FileReader();
-		reader.onload = function(event) {
-			const arrayBuffer = event.target.result;
-			const dataView = new DataView(arrayBuffer);
-
-			// Verify the FLAC signature
-			const signature = String.fromCharCode(...new Uint8Array(arrayBuffer, 0, 4));
-			if (signature !== 'fLaC') {
-				console.error('Not a valid FLAC file');
-				return;
-			}
-
-			// Parse metadata blocks
-			let offset = 4;
-			let vorbisComment = null;
-			while (offset < dataView.byteLength) {
-				const isLastBlock = dataView.getUint8(offset) & 0x80;
-				const blockType = dataView.getUint8(offset) & 0x7F;
-				const blockSize = dataView.getUint32(offset, false) & 0xFFFFFF;
-				offset += 4;
-
-				if (blockType === 4) { // Vorbis Comment block type
-					vorbisComment = parseVorbisComment(new DataView(arrayBuffer, offset, blockSize));
-				}
-
-				offset += blockSize;
-				if (isLastBlock) break;
-			}
-
-			r(vorbisComment);
-		};
-		reader.readAsArrayBuffer(file);
-	});
-}
-
-export async function importA1111(graph, parameters) {
-	const p = parameters.lastIndexOf("\nSteps:");
-	if (p > -1) {
-		const embeddings = await api.getEmbeddings();
-		const opts = parameters
-			.substr(p)
-			.split("\n")[1]
-			.match(new RegExp("\\s*([^:]+:\\s*([^\"\\{].*?|\".*?\"|\\{.*?\\}))\\s*(,|$)", "g"))
-			.reduce((p, n) => {
-				const s = n.split(":");
-				if (s[1].endsWith(',')) {
-					s[1] = s[1].substr(0, s[1].length -1);
-				}
-				p[s[0].trim().toLowerCase()] = s[1].trim();
-				return p;
-			}, {});
-		const p2 = parameters.lastIndexOf("\nNegative prompt:", p);
-		if (p2 > -1) {
-			let positive = parameters.substr(0, p2).trim();
-			let negative = parameters.substring(p2 + 18, p).trim();
-
-			const ckptNode = LiteGraph.createNode("CheckpointLoaderSimple");
-			const clipSkipNode = LiteGraph.createNode("CLIPSetLastLayer");
-			const positiveNode = LiteGraph.createNode("CLIPTextEncode");
-			const negativeNode = LiteGraph.createNode("CLIPTextEncode");
-			const samplerNode = LiteGraph.createNode("KSampler");
-			const imageNode = LiteGraph.createNode("EmptyLatentImage");
-			const vaeNode = LiteGraph.createNode("VAEDecode");
-			const vaeLoaderNode = LiteGraph.createNode("VAELoader");
-			const saveNode = LiteGraph.createNode("SaveImage");
-			let hrSamplerNode = null;
-			let hrSteps = null;
-
-			const ceil64 = (v) => Math.ceil(v / 64) * 64;
-
-			function getWidget(node, name) {
-				return node.widgets.find((w) => w.name === name);
-			}
-
-			function setWidgetValue(node, name, value, isOptionPrefix) {
-				const w = getWidget(node, name);
-				if (isOptionPrefix) {
-					const o = w.options.values.find((w) => w.startsWith(value));
-					if (o) {
-						w.value = o;
-					} else {
-						console.warn(`Unknown value '${value}' for widget '${name}'`, node);
-						w.value = value;
-					}
-				} else {
-					w.value = value;
-				}
-			}
-
-			function createLoraNodes(clipNode, text, prevClip, prevModel) {
-				const loras = [];
-				text = text.replace(/<lora:([^:]+:[^>]+)>/g, function (m, c) {
-					const s = c.split(":");
-					const weight = parseFloat(s[1]);
-					if (isNaN(weight)) {
-						console.warn("Invalid LORA", m);
-					} else {
-						loras.push({ name: s[0], weight });
-					}
-					return "";
-				});
-
-				for (const l of loras) {
-					const loraNode = LiteGraph.createNode("LoraLoader");
-					graph.add(loraNode);
-					setWidgetValue(loraNode, "lora_name", l.name, true);
-					setWidgetValue(loraNode, "strength_model", l.weight);
-					setWidgetValue(loraNode, "strength_clip", l.weight);
-					prevModel.node.connect(prevModel.index, loraNode, 0);
-					prevClip.node.connect(prevClip.index, loraNode, 1);
-					prevModel = { node: loraNode, index: 0 };
-					prevClip = { node: loraNode, index: 1 };
-				}
-
-				prevClip.node.connect(1, clipNode, 0);
-				prevModel.node.connect(0, samplerNode, 0);
-				if (hrSamplerNode) {
-					prevModel.node.connect(0, hrSamplerNode, 0);
-				}
-
-				return { text, prevModel, prevClip };
-			}
-
-			function replaceEmbeddings(text) {
-				if(!embeddings.length) return text;
-				return text.replaceAll(
-					new RegExp(
-						"\\b(" + embeddings.map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("\\b|\\b") + ")\\b",
-						"ig"
-					),
-					"embedding:$1"
-				);
-			}
-
-			function popOpt(name) {
-				const v = opts[name];
-				delete opts[name];
-				return v;
-			}
-
-			graph.clear();
-			graph.add(ckptNode);
-			graph.add(clipSkipNode);
-			graph.add(positiveNode);
-			graph.add(negativeNode);
-			graph.add(samplerNode);
-			graph.add(imageNode);
-			graph.add(vaeNode);
-			graph.add(vaeLoaderNode);
-			graph.add(saveNode);
-
-			ckptNode.connect(1, clipSkipNode, 0);
-			clipSkipNode.connect(0, positiveNode, 0);
-			clipSkipNode.connect(0, negativeNode, 0);
-			ckptNode.connect(0, samplerNode, 0);
-			positiveNode.connect(0, samplerNode, 1);
-			negativeNode.connect(0, samplerNode, 2);
-			imageNode.connect(0, samplerNode, 3);
-			vaeNode.connect(0, saveNode, 0);
-			samplerNode.connect(0, vaeNode, 0);
-			vaeLoaderNode.connect(0, vaeNode, 1);
-
-			const handlers = {
-				model(v) {
-					setWidgetValue(ckptNode, "ckpt_name", v, true);
-				},
-				"vae"(v) {
-					setWidgetValue(vaeLoaderNode, "vae_name", v, true);
-				},
-				"cfg scale"(v) {
-					setWidgetValue(samplerNode, "cfg", +v);
-				},
-				"clip skip"(v) {
-					setWidgetValue(clipSkipNode, "stop_at_clip_layer", -v);
-				},
-				sampler(v) {
-					let name = v.toLowerCase().replace("++", "pp").replaceAll(" ", "_");
-					if (name.includes("karras")) {
-						name = name.replace("karras", "").replace(/_+$/, "");
-						setWidgetValue(samplerNode, "scheduler", "karras");
-					} else {
-						setWidgetValue(samplerNode, "scheduler", "normal");
-					}
-					const w = getWidget(samplerNode, "sampler_name");
-					const o = w.options.values.find((w) => w === name || w === "sample_" + name);
-					if (o) {
-						setWidgetValue(samplerNode, "sampler_name", o);
-					}
-				},
-				size(v) {
-					const wxh = v.split("x");
-					const w = ceil64(+wxh[0]);
-					const h = ceil64(+wxh[1]);
-					const hrUp = popOpt("hires upscale");
-					const hrSz = popOpt("hires resize");
-					hrSteps = popOpt("hires steps");
-					let hrMethod = popOpt("hires upscaler");
-
-					setWidgetValue(imageNode, "width", w);
-					setWidgetValue(imageNode, "height", h);
-
-					if (hrUp || hrSz) {
-						let uw, uh;
-						if (hrUp) {
-							uw = w * hrUp;
-							uh = h * hrUp;
-						} else {
-							const s = hrSz.split("x");
-							uw = +s[0];
-							uh = +s[1];
-						}
-
-						let upscaleNode;
-						let latentNode;
-
-						if (hrMethod.startsWith("Latent")) {
-							latentNode = upscaleNode = LiteGraph.createNode("LatentUpscale");
-							graph.add(upscaleNode);
-							samplerNode.connect(0, upscaleNode, 0);
-
-							switch (hrMethod) {
-								case "Latent (nearest-exact)":
-									hrMethod = "nearest-exact";
-									break;
-							}
-							setWidgetValue(upscaleNode, "upscale_method", hrMethod, true);
-						} else {
-							const decode = LiteGraph.createNode("VAEDecodeTiled");
-							graph.add(decode);
-							samplerNode.connect(0, decode, 0);
-							vaeLoaderNode.connect(0, decode, 1);
-
-							const upscaleLoaderNode = LiteGraph.createNode("UpscaleModelLoader");
-							graph.add(upscaleLoaderNode);
-							setWidgetValue(upscaleLoaderNode, "model_name", hrMethod, true);
-
-							const modelUpscaleNode = LiteGraph.createNode("ImageUpscaleWithModel");
-							graph.add(modelUpscaleNode);
-							decode.connect(0, modelUpscaleNode, 1);
-							upscaleLoaderNode.connect(0, modelUpscaleNode, 0);
-
-							upscaleNode = LiteGraph.createNode("ImageScale");
-							graph.add(upscaleNode);
-							modelUpscaleNode.connect(0, upscaleNode, 0);
-
-							const vaeEncodeNode = (latentNode = LiteGraph.createNode("VAEEncodeTiled"));
-							graph.add(vaeEncodeNode);
-							upscaleNode.connect(0, vaeEncodeNode, 0);
-							vaeLoaderNode.connect(0, vaeEncodeNode, 1);
-						}
-
-						setWidgetValue(upscaleNode, "width", ceil64(uw));
-						setWidgetValue(upscaleNode, "height", ceil64(uh));
-
-						hrSamplerNode = LiteGraph.createNode("KSampler");
-						graph.add(hrSamplerNode);
-						ckptNode.connect(0, hrSamplerNode, 0);
-						positiveNode.connect(0, hrSamplerNode, 1);
-						negativeNode.connect(0, hrSamplerNode, 2);
-						latentNode.connect(0, hrSamplerNode, 3);
-						hrSamplerNode.connect(0, vaeNode, 0);
-					}
-				},
-				steps(v) {
-					setWidgetValue(samplerNode, "steps", +v);
-				},
-				seed(v) {
-					setWidgetValue(samplerNode, "seed", +v);
-				},
-			};
-
-			for (const opt in opts) {
-				if (opt in handlers) {
-					handlers[opt](popOpt(opt));
-				}
-			}
-
-			if (hrSamplerNode) {
-				setWidgetValue(hrSamplerNode, "steps", hrSteps? +hrSteps : getWidget(samplerNode, "steps").value);
-				setWidgetValue(hrSamplerNode, "cfg", getWidget(samplerNode, "cfg").value);
-				setWidgetValue(hrSamplerNode, "scheduler", getWidget(samplerNode, "scheduler").value);
-				setWidgetValue(hrSamplerNode, "sampler_name", getWidget(samplerNode, "sampler_name").value);
-				setWidgetValue(hrSamplerNode, "denoise", +(popOpt("denoising strength") || "1"));
-			}
-
-			let n = createLoraNodes(positiveNode, positive, { node: clipSkipNode, index: 0 }, { node: ckptNode, index: 0 });
-			positive = n.text;
-			n = createLoraNodes(negativeNode, negative, n.prevClip, n.prevModel);
-			negative = n.text;
-
-			setWidgetValue(positiveNode, "text", replaceEmbeddings(positive));
-			setWidgetValue(negativeNode, "text", replaceEmbeddings(negative));
-
-			graph.arrange();
-
-			for (const opt of ["model hash", "ensd", "version", "vae hash", "ti hashes", "lora hashes", "hashes"]) {
-				delete opts[opt];
-			}
-
-			console.warn("Unhandled parameters:", opts);
-		}
-	}
-}

web/scripts/ui.js

@@ -1,660 +1,4 @@
-import { api } from "./api.js";
+// Shim for scripts\ui.ts
-import { ComfyDialog as _ComfyDialog } from "./ui/dialog.js";
+export const ComfyDialog = window.comfyAPI.ui.ComfyDialog;
-import { toggleSwitch } from "./ui/toggleSwitch.js";
+export const $el = window.comfyAPI.ui.$el;
-import { ComfySettingsDialog } from "./ui/settings.js";
+export const ComfyUI = window.comfyAPI.ui.ComfyUI;
-
-export const ComfyDialog = _ComfyDialog;
-
-/**
- * @template { string | (keyof HTMLElementTagNameMap) } K
- * @typedef { K extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[K] : HTMLElement } ElementType 
- */
-
-/**
- * @template { string | (keyof HTMLElementTagNameMap) } K 
- * @param { K } tag HTML Element Tag and optional classes e.g. div.class1.class2
- * @param { string | Element | Element[] | ({
- * 	 parent?: Element,
- *   $?: (el: ElementType<K>) => void, 
- *   dataset?: DOMStringMap,
- *   style?: Partial<CSSStyleDeclaration>,
- * 	 for?: string
- * } & Omit<Partial<ElementType<K>>, "style">) | undefined } [propsOrChildren]
- * @param { string | Element | Element[] | undefined } [children]
- * @returns { ElementType<K> }
- */
-export function $el(tag, propsOrChildren, children) {
-	const split = tag.split(".");
-	const element = document.createElement(split.shift());
-	if (split.length > 0) {
-		element.classList.add(...split);
-	}
-
-	if (propsOrChildren) {
-		if (typeof propsOrChildren === "string") {
-			propsOrChildren = { textContent: propsOrChildren };
-		} else if (propsOrChildren instanceof Element) {
-			propsOrChildren = [propsOrChildren];
-		}
-		if (Array.isArray(propsOrChildren)) {
-			element.append(...propsOrChildren);
-		} else {
-			const {parent, $: cb, dataset, style} = propsOrChildren;
-			delete propsOrChildren.parent;
-			delete propsOrChildren.$;
-			delete propsOrChildren.dataset;
-			delete propsOrChildren.style;
-
-			if (Object.hasOwn(propsOrChildren, "for")) {
-				element.setAttribute("for", propsOrChildren.for)
-			}
-
-			if (style) {
-				Object.assign(element.style, style);
-			}
-
-			if (dataset) {
-				Object.assign(element.dataset, dataset);
-			}
-
-			Object.assign(element, propsOrChildren);
-			if (children) {
-				element.append(...(children instanceof Array ? children.filter(Boolean) : [children]));
-			}
-
-			if (parent) {
-				parent.append(element);
-			}
-
-			if (cb) {
-				cb(element);
-			}
-		}
-	}
-	return element;
-}
-
-function dragElement(dragEl, settings) {
-	var posDiffX = 0,
-		posDiffY = 0,
-		posStartX = 0,
-		posStartY = 0,
-		newPosX = 0,
-		newPosY = 0;
-	if (dragEl.getElementsByClassName("drag-handle")[0]) {
-		// if present, the handle is where you move the DIV from:
-		dragEl.getElementsByClassName("drag-handle")[0].onmousedown = dragMouseDown;
-	} else {
-		// otherwise, move the DIV from anywhere inside the DIV:
-		dragEl.onmousedown = dragMouseDown;
-	}
-
-	// When the element resizes (e.g. view queue) ensure it is still in the windows bounds
-	const resizeObserver = new ResizeObserver(() => {
-		ensureInBounds();
-	}).observe(dragEl);
-
-	function ensureInBounds() {
-		try {
-			newPosX = Math.min(document.body.clientWidth - dragEl.clientWidth, Math.max(0, dragEl.offsetLeft));
-			newPosY = Math.min(document.body.clientHeight - dragEl.clientHeight, Math.max(0, dragEl.offsetTop));
-
-			positionElement();
-		}
-		catch(exception){
-			// robust
-		}
-	}
-
-	function positionElement() {
-		if(dragEl.style.display === "none") return;
-
-		const halfWidth = document.body.clientWidth / 2;
-		const anchorRight = newPosX + dragEl.clientWidth / 2 > halfWidth;
-
-		// set the element's new position:
-		if (anchorRight) {
-			dragEl.style.left = "unset";
-			dragEl.style.right = document.body.clientWidth - newPosX - dragEl.clientWidth + "px";
-		} else {
-			dragEl.style.left = newPosX + "px";
-			dragEl.style.right = "unset";
-		}
-
-		dragEl.style.top = newPosY + "px";
-		dragEl.style.bottom = "unset";
-
-		if (savePos) {
-			localStorage.setItem(
-				"Comfy.MenuPosition",
-				JSON.stringify({
-					x: dragEl.offsetLeft,
-					y: dragEl.offsetTop,
-				})
-			);
-		}
-	}
-
-	function restorePos() {
-		let pos = localStorage.getItem("Comfy.MenuPosition");
-		if (pos) {
-			pos = JSON.parse(pos);
-			newPosX = pos.x;
-			newPosY = pos.y;
-			positionElement();
-			ensureInBounds();
-		}
-	}
-
-	let savePos = undefined;
-	settings.addSetting({
-		id: "Comfy.MenuPosition",
-		name: "Save menu position",
-		type: "boolean",
-		defaultValue: savePos,
-		onChange(value) {
-			if (savePos === undefined && value) {
-				restorePos();
-			}
-			savePos = value;
-		},
-	});
-
-	function dragMouseDown(e) {
-		e = e || window.event;
-		e.preventDefault();
-		// get the mouse cursor position at startup:
-		posStartX = e.clientX;
-		posStartY = e.clientY;
-		document.onmouseup = closeDragElement;
-		// call a function whenever the cursor moves:
-		document.onmousemove = elementDrag;
-	}
-
-	function elementDrag(e) {
-		e = e || window.event;
-		e.preventDefault();
-
-		dragEl.classList.add("comfy-menu-manual-pos");
-
-		// calculate the new cursor position:
-		posDiffX = e.clientX - posStartX;
-		posDiffY = e.clientY - posStartY;
-		posStartX = e.clientX;
-		posStartY = e.clientY;
-
-		newPosX = Math.min(document.body.clientWidth - dragEl.clientWidth, Math.max(0, dragEl.offsetLeft + posDiffX));
-		newPosY = Math.min(document.body.clientHeight - dragEl.clientHeight, Math.max(0, dragEl.offsetTop + posDiffY));
-
-		positionElement();
-	}
-
-	window.addEventListener("resize", () => {
-		ensureInBounds();
-	});
-
-	function closeDragElement() {
-		// stop moving when mouse button is released:
-		document.onmouseup = null;
-		document.onmousemove = null;
-	}
-
-	return restorePos;
-}
-
-class ComfyList {
-	#type;
-	#text;
-	#reverse;
-
-	constructor(text, type, reverse) {
-		this.#text = text;
-		this.#type = type || text.toLowerCase();
-		this.#reverse = reverse || false;
-		this.element = $el("div.comfy-list");
-		this.element.style.display = "none";
-	}
-
-	get visible() {
-		return this.element.style.display !== "none";
-	}
-
-	async load() {
-		const items = await api.getItems(this.#type);
-		this.element.replaceChildren(
-			...Object.keys(items).flatMap((section) => [
-				$el("h4", {
-					textContent: section,
-				}),
-				$el("div.comfy-list-items", [
-					...(this.#reverse ? items[section].reverse() : items[section]).map((item) => {
-						// Allow items to specify a custom remove action (e.g. for interrupt current prompt)
-						const removeAction = item.remove || {
-							name: "Delete",
-							cb: () => api.deleteItem(this.#type, item.prompt[1]),
-						};
-						return $el("div", {textContent: item.prompt[0] + ": "}, [
-							$el("button", {
-								textContent: "Load",
-								onclick: async () => {
-									await app.loadGraphData(item.prompt[3].extra_pnginfo.workflow, true, false);
-									if (item.outputs) {
-										app.nodeOutputs = item.outputs;
-									}
-								},
-							}),
-							$el("button", {
-								textContent: removeAction.name,
-								onclick: async () => {
-									await removeAction.cb();
-									await this.update();
-								},
-							}),
-						]);
-					}),
-				]),
-			]),
-			$el("div.comfy-list-actions", [
-				$el("button", {
-					textContent: "Clear " + this.#text,
-					onclick: async () => {
-						await api.clearItems(this.#type);
-						await this.load();
-					},
-				}),
-				$el("button", {textContent: "Refresh", onclick: () => this.load()}),
-			])
-		);
-	}
-
-	async update() {
-		if (this.visible) {
-			await this.load();
-		}
-	}
-
-	async show() {
-		this.element.style.display = "block";
-		this.button.textContent = "Close";
-
-		await this.load();
-	}
-
-	hide() {
-		this.element.style.display = "none";
-		this.button.textContent = "View " + this.#text;
-	}
-
-	toggle() {
-		if (this.visible) {
-			this.hide();
-			return false;
-		} else {
-			this.show();
-			return true;
-		}
-	}
-}
-
-export class ComfyUI {
-	constructor(app) {
-		this.app = app;
-		this.dialog = new ComfyDialog();
-		this.settings = new ComfySettingsDialog(app);
-
-		this.batchCount = 1;
-		this.lastQueueSize = 0;
-		this.queue = new ComfyList("Queue");
-		this.history = new ComfyList("History", "history", true);
-
-		api.addEventListener("status", () => {
-			this.queue.update();
-			this.history.update();
-		});
-
-		const confirmClear = this.settings.addSetting({
-			id: "Comfy.ConfirmClear",
-			name: "Require confirmation when clearing workflow",
-			type: "boolean",
-			defaultValue: true,
-		});
-
-		const promptFilename = this.settings.addSetting({
-			id: "Comfy.PromptFilename",
-			name: "Prompt for filename when saving workflow",
-			type: "boolean",
-			defaultValue: true,
-		});
-
-		/**
-		 * file format for preview
-		 *
-		 * format;quality
-		 *
-		 * ex)
-		 * webp;50 -> webp, quality 50
-		 * jpeg;80 -> rgb, jpeg, quality 80
-		 *
-		 * @type {string}
-		 */
-		const previewImage = this.settings.addSetting({
-			id: "Comfy.PreviewFormat",
-			name: "When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.",
-			type: "text",
-			defaultValue: "",
-		});
-
-		this.settings.addSetting({
-			id: "Comfy.DisableSliders",
-			name: "Disable sliders.",
-			type: "boolean",
-			defaultValue: false,
-		});
-
-		this.settings.addSetting({
-			id: "Comfy.DisableFloatRounding",
-			name: "Disable rounding floats (requires page reload).",
-			type: "boolean",
-			defaultValue: false,
-		});
-
-		this.settings.addSetting({
-			id: "Comfy.FloatRoundingPrecision",
-			name: "Decimal places [0 = auto] (requires page reload).",
-			type: "slider",
-			attrs: {
-				min: 0,
-				max: 6,
-				step: 1,
-			},
-			defaultValue: 0,
-		});
-
-		const fileInput = $el("input", {
-			id: "comfy-file-input",
-			type: "file",
-			accept: ".json,image/png,.latent,.safetensors,image/webp,audio/flac",
-			style: {display: "none"},
-			parent: document.body,
-			onchange: () => {
-				app.handleFile(fileInput.files[0]);
-			},
-		});
-
-		this.loadFile = () => fileInput.click();
-
-		const autoQueueModeEl = toggleSwitch(
-			"autoQueueMode",
-			[
-				{ text: "instant", tooltip: "A new prompt will be queued as soon as the queue reaches 0" },
-				{ text: "change", tooltip: "A new prompt will be queued when the queue is at 0 and the graph is/has changed" },
-			],
-			{
-				onChange: (value) => {
-					this.autoQueueMode = value.item.value;
-				},
-			}
-		);
-		autoQueueModeEl.style.display = "none";
-
-		api.addEventListener("graphChanged", () => {
-			if (this.autoQueueMode === "change" && this.autoQueueEnabled === true) {
-				if (this.lastQueueSize === 0) {
-					this.graphHasChanged = false;
-					app.queuePrompt(0, this.batchCount);
-				} else {
-					this.graphHasChanged = true;
-				}
-			}
-		});
-
-		this.menuHamburger = $el(
-			"div.comfy-menu-hamburger",
-			{
-				parent: document.body,
-				onclick: () => {
-					this.menuContainer.style.display = "block";
-					this.menuHamburger.style.display = "none";
-				},
-			},
-			[$el("div"), $el("div"), $el("div")]
-		);
-
-		this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [
-			$el("div.drag-handle.comfy-menu-header", {
-				style: {
-					overflow: "hidden",
-					position: "relative",
-					width: "100%",
-					cursor: "default"
-				}
-			}, 	[
-				$el("span.drag-handle"),
-				$el("span.comfy-menu-queue-size", { $: (q) => (this.queueSize = q) }),
-				$el("div.comfy-menu-actions", [
-					$el("button.comfy-settings-btn", {
-						textContent: "⚙️",
-						onclick: () => this.settings.show(),
-					}),
-					$el("button.comfy-close-menu-btn", {
-						textContent: "\u00d7",
-						onclick: () => {
-							this.menuContainer.style.display = "none";
-							this.menuHamburger.style.display = "flex";
-						},
-					}),
-				]),
-			]),
-			$el("button.comfy-queue-btn", {
-				id: "queue-button",
-				textContent: "Queue Prompt",
-				onclick: () => app.queuePrompt(0, this.batchCount),
-			}),
-			$el("div", {}, [
-				$el("label", {innerHTML: "Extra options"}, [
-					$el("input", {
-						type: "checkbox",
-						onchange: (i) => {
-							document.getElementById("extraOptions").style.display = i.srcElement.checked ? "block" : "none";
-							this.batchCount = i.srcElement.checked ? document.getElementById("batchCountInputRange").value : 1;
-							document.getElementById("autoQueueCheckbox").checked = false;
-							this.autoQueueEnabled = false;
-						},
-					}),
-				]),
-			]),
-			$el("div", {id: "extraOptions", style: {width: "100%", display: "none"}}, [
-				$el("div",[
-
-					$el("label", {innerHTML: "Batch count"}),
-					$el("input", {
-						id: "batchCountInputNumber",
-						type: "number",
-						value: this.batchCount,
-						min: "1",
-						style: {width: "35%", "margin-left": "0.4em"},
-						oninput: (i) => {
-							this.batchCount = i.target.value;
-							document.getElementById("batchCountInputRange").value = this.batchCount;
-						},
-					}),
-					$el("input", {
-						id: "batchCountInputRange",
-						type: "range",
-						min: "1",
-						max: "100",
-						value: this.batchCount,
-						oninput: (i) => {
-							this.batchCount = i.srcElement.value;
-							document.getElementById("batchCountInputNumber").value = i.srcElement.value;
-						},
-					}),		
-				]),
-				$el("div",[
-					$el("label",{
-						for:"autoQueueCheckbox",
-						innerHTML: "Auto Queue"
-					}),
-					$el("input", {
-						id: "autoQueueCheckbox",
-						type: "checkbox",
-						checked: false,
-						title: "Automatically queue prompt when the queue size hits 0",
-						onchange: (e) => {
-							this.autoQueueEnabled = e.target.checked;
-							autoQueueModeEl.style.display = this.autoQueueEnabled ? "" : "none";
-						}
-					}),
-					autoQueueModeEl
-				])
-			]),
-			$el("div.comfy-menu-btns", [
-				$el("button", {
-					id: "queue-front-button",
-					textContent: "Queue Front",
-					onclick: () => app.queuePrompt(-1, this.batchCount)
-				}),
-				$el("button", {
-					$: (b) => (this.queue.button = b),
-					id: "comfy-view-queue-button",
-					textContent: "View Queue",
-					onclick: () => {
-						this.history.hide();
-						this.queue.toggle();
-					},
-				}),
-				$el("button", {
-					$: (b) => (this.history.button = b),
-					id: "comfy-view-history-button",
-					textContent: "View History",
-					onclick: () => {
-						this.queue.hide();
-						this.history.toggle();
-					},
-				}),
-			]),
-			this.queue.element,
-			this.history.element,
-			$el("button", {
-				id: "comfy-save-button",
-				textContent: "Save",
-				onclick: () => {
-					let filename = "workflow.json";
-					if (promptFilename.value) {
-						filename = prompt("Save workflow as:", filename);
-						if (!filename) return;
-						if (!filename.toLowerCase().endsWith(".json")) {
-							filename += ".json";
-						}
-					}
-					app.graphToPrompt().then(p=>{
-						const json = JSON.stringify(p.workflow, null, 2); // convert the data to a JSON string
-						const blob = new Blob([json], {type: "application/json"});
-						const url = URL.createObjectURL(blob);
-						const a = $el("a", {
-							href: url,
-							download: filename,
-							style: {display: "none"},
-							parent: document.body,
-						});
-						a.click();
-						setTimeout(function () {
-							a.remove();
-							window.URL.revokeObjectURL(url);
-						}, 0);
-					});
-				},
-			}),
-			$el("button", {
-				id: "comfy-dev-save-api-button",
-				textContent: "Save (API Format)",
-				style: {width: "100%", display: "none"},
-				onclick: () => {
-					let filename = "workflow_api.json";
-					if (promptFilename.value) {
-						filename = prompt("Save workflow (API) as:", filename);
-						if (!filename) return;
-						if (!filename.toLowerCase().endsWith(".json")) {
-							filename += ".json";
-						}
-					}
-					app.graphToPrompt().then(p=>{
-						const json = JSON.stringify(p.output, null, 2); // convert the data to a JSON string
-						const blob = new Blob([json], {type: "application/json"});
-						const url = URL.createObjectURL(blob);
-						const a = $el("a", {
-							href: url,
-							download: filename,
-							style: {display: "none"},
-							parent: document.body,
-						});
-						a.click();
-						setTimeout(function () {
-							a.remove();
-							window.URL.revokeObjectURL(url);
-						}, 0);
-					});
-				},
-			}),
-			$el("button", {id: "comfy-load-button", textContent: "Load", onclick: () => fileInput.click()}),
-			$el("button", {
-				id: "comfy-refresh-button",
-				textContent: "Refresh",
-				onclick: () => app.refreshComboInNodes()
-			}),
-			$el("button", {id: "comfy-clipspace-button", textContent: "Clipspace", onclick: () => app.openClipspace()}),
-			$el("button", {
-				id: "comfy-clear-button", textContent: "Clear", onclick: () => {
-					if (!confirmClear.value || confirm("Clear workflow?")) {
-						app.clean();
-						app.graph.clear();
-						app.resetView();
-					}
-				}
-			}),
-			$el("button", {
-				id: "comfy-load-default-button", textContent: "Load Default", onclick: async () => {
-					if (!confirmClear.value || confirm("Load default workflow?")) {
-						app.resetView();
-						await app.loadGraphData()
-					}
-				}
-			}),
-			$el("button", {
-				id: "comfy-reset-view-button", textContent: "Reset View", onclick: async () => {
-					app.resetView();
-				}
-			}),
-		]);
-
-		const devMode = this.settings.addSetting({
-			id: "Comfy.DevMode",
-			name: "Enable Dev mode Options",
-			type: "boolean",
-			defaultValue: false,
-			onChange: function(value) { document.getElementById("comfy-dev-save-api-button").style.display = value ? "flex" : "none"},
-		});
-
-		this.restoreMenuPosition = dragElement(this.menuContainer, this.settings);
-
-		this.setStatus({exec_info: {queue_remaining: "X"}});
-	}
-
-	setStatus(status) {
-		this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
-		if (status) {
-			if (
-				this.lastQueueSize != 0 &&
-				status.exec_info.queue_remaining == 0 &&
-				this.autoQueueEnabled &&
-				(this.autoQueueMode === "instant" || this.graphHasChanged) &&
-				!app.lastExecutionError
-			) {
-				app.queuePrompt(0, this.batchCount);
-				status.exec_info.queue_remaining += this.batchCount;
-				this.graphHasChanged = false;
-			}
-			this.lastQueueSize = status.exec_info.queue_remaining;
-		}
-	}
-}

web/scripts/ui/components/asyncDialog.js

@@ -1,64 +1,2 @@
-import { ComfyDialog } from "../dialog.js";
+// Shim for scripts\ui\components\asyncDialog.ts
-import { $el } from "../../ui.js";
+export const ComfyAsyncDialog = window.comfyAPI.asyncDialog.ComfyAsyncDialog;
-
-export class ComfyAsyncDialog extends ComfyDialog {
-	#resolve;
-
-	constructor(actions) {
-		super(
-			"dialog.comfy-dialog.comfyui-dialog",
-			actions?.map((opt) => {
-				if (typeof opt === "string") {
-					opt = { text: opt };
-				}
-				return $el("button.comfyui-button", {
-					type: "button",
-					textContent: opt.text,
-					onclick: () => this.close(opt.value ?? opt.text),
-				});
-			})
-		);
-	}
-
-	show(html) {
-		this.element.addEventListener("close", () => {
-			this.close();
-		});
-
-		super.show(html);
-
-		return new Promise((resolve) => {
-			this.#resolve = resolve;
-		});
-	}
-
-	showModal(html) {
-		this.element.addEventListener("close", () => {
-			this.close();
-		});
-
-		super.show(html);
-		this.element.showModal();
-
-		return new Promise((resolve) => {
-			this.#resolve = resolve;
-		});
-	}
-
-	close(result = null) {
-		this.#resolve(result);
-		this.element.close();
-		super.close();
-	}
-
-	static async prompt({ title = null, message, actions }) {
-		const dialog = new ComfyAsyncDialog(actions);
-		const content = [$el("span", message)];
-		if (title) {
-			content.unshift($el("h3", title));
-		}
-		const res = await dialog.showModal(content);
-		dialog.element.remove();
-		return res;
-	}
-}

web/scripts/ui/components/button.js

@@ -1,163 +1,2 @@
-// @ts-check
+// Shim for scripts\ui\components\button.ts
-
+export const ComfyButton = window.comfyAPI.button.ComfyButton;
-import { $el } from "../../ui.js";
-import { applyClasses, toggleElement } from "../utils.js";
-import { prop } from "../../utils.js";
-
-/**
- * @typedef {{
- *    icon?: string;
- *    overIcon?: string;
- *    iconSize?: number;
- *    content?: string | HTMLElement;
- *    tooltip?: string;
- *    enabled?: boolean;
- *    action?: (e: Event, btn: ComfyButton) => void,
- *    classList?: import("../utils.js").ClassList,
- * 	  visibilitySetting?: { id: string, showValue: any },
- * 	  app?: import("../../app.js").ComfyApp
- * }} ComfyButtonProps
- */
-export class ComfyButton {
-	#over = 0;
-	#popupOpen = false;
-	isOver = false;	
-	iconElement = $el("i.mdi");
-	contentElement = $el("span");
-	/**
-	 * @type {import("./popup.js").ComfyPopup}
-	 */
-	popup;
-
-	/**
-	 * @param {ComfyButtonProps} opts
-	 */
-	constructor({
-		icon,
-		overIcon,
-		iconSize,
-		content,
-		tooltip,
-		action,
-		classList = "comfyui-button",
-		visibilitySetting,
-		app,
-		enabled = true,
-	}) {
-		this.element = $el("button", {
-			onmouseenter: () => {
-				this.isOver = true;
-				if(this.overIcon) {
-					this.updateIcon();
-				}
-			},
-			onmouseleave: () => {
-				this.isOver = false;
-				if(this.overIcon) {
-					this.updateIcon();
-				}
-			}
-
-		}, [this.iconElement, this.contentElement]);
-
-		this.icon = prop(this, "icon", icon, toggleElement(this.iconElement, { onShow: this.updateIcon }));
-		this.overIcon = prop(this, "overIcon", overIcon, () => {
-			if(this.isOver) {
-				this.updateIcon();
-			}
-		});
-		this.iconSize = prop(this, "iconSize", iconSize, this.updateIcon);
-		this.content = prop(
-			this,
-			"content",
-			content,
-			toggleElement(this.contentElement, {
-				onShow: (el, v) => {
-					if (typeof v === "string") {
-						el.textContent = v;
-					} else {
-						el.replaceChildren(v);
-					}
-				},
-			})
-		);
-
-		this.tooltip = prop(this, "tooltip", tooltip, (v) => {
-			if (v) {
-				this.element.title = v;
-			} else {
-				this.element.removeAttribute("title");
-			}
-		});
-		this.classList = prop(this, "classList", classList, this.updateClasses);
-		this.hidden = prop(this, "hidden", false, this.updateClasses);
-		this.enabled = prop(this, "enabled", enabled, () => {
-			this.updateClasses();
-			this.element.disabled = !this.enabled;
-		});
-		this.action = prop(this, "action", action);
-		this.element.addEventListener("click", (e) => {
-			if (this.popup) {
-				// we are either a touch device or triggered by click not hover
-				if (!this.#over) {
-					this.popup.toggle();
-				}
-			}
-			this.action?.(e, this);
-		});
-
-		if (visibilitySetting?.id) {
-			const settingUpdated = () => {
-				this.hidden = app.ui.settings.getSettingValue(visibilitySetting.id) !== visibilitySetting.showValue;
-			};
-			app.ui.settings.addEventListener(visibilitySetting.id + ".change", settingUpdated);
-			settingUpdated();
-		}
-	}
-
-	updateIcon = () => (this.iconElement.className = `mdi mdi-${(this.isOver && this.overIcon) || this.icon}${this.iconSize ? " mdi-" + this.iconSize + "px" : ""}`);
-	updateClasses = () => {
-		const internalClasses = [];
-		if (this.hidden) {
-			internalClasses.push("hidden");
-		}
-		if (!this.enabled) {
-			internalClasses.push("disabled");
-		}
-		if (this.popup) {
-			if (this.#popupOpen) {
-				internalClasses.push("popup-open");
-			} else {
-				internalClasses.push("popup-closed");
-			}
-		}
-		applyClasses(this.element, this.classList, ...internalClasses);
-	};
-
-	/**
-	 *
-	 * @param { import("./popup.js").ComfyPopup } popup
-	 * @param { "click" | "hover" } mode
-	 */
-	withPopup(popup, mode = "click") {
-		this.popup = popup;
-
-		if (mode === "hover") {
-			for (const el of [this.element, this.popup.element]) {
-				el.addEventListener("mouseenter", () => {
-					this.popup.open = !!++this.#over;
-				});
-				el.addEventListener("mouseleave", () => {
-					this.popup.open = !!--this.#over;
-				});
-			}
-		}
-
-		popup.addEventListener("change", () => {
-			this.#popupOpen = popup.open;
-			this.updateClasses();
-		});
-
-		return this;
-	}
-}

web/scripts/ui/components/buttonGroup.js

@@ -1,45 +1,2 @@
-// @ts-check
+// Shim for scripts\ui\components\buttonGroup.ts
-
+export const ComfyButtonGroup = window.comfyAPI.buttonGroup.ComfyButtonGroup;
-import { $el } from "../../ui.js";
-import { ComfyButton } from "./button.js";
-import { prop } from "../../utils.js";
-
-export class ComfyButtonGroup {
-	element = $el("div.comfyui-button-group");
-
-	/** @param {Array<ComfyButton | HTMLElement>} buttons */
-	constructor(...buttons) {
-		this.buttons = prop(this, "buttons", buttons, () => this.update());
-	}
-
-	/**
-	 * @param {ComfyButton} button
-	 * @param {number} index
-	 */
-	insert(button, index) {
-		this.buttons.splice(index, 0, button);
-		this.update();
-	}
-
-	/** @param {ComfyButton} button */
-	append(button) {
-		this.buttons.push(button);
-		this.update();
-	}
-
-	/** @param {ComfyButton|number} indexOrButton */
-	remove(indexOrButton) {
-		if (typeof indexOrButton !== "number") {
-			indexOrButton = this.buttons.indexOf(indexOrButton);
-		}
-		if (indexOrButton > -1) {
-			const r = this.buttons.splice(indexOrButton, 1);
-			this.update();
-			return r;
-		}
-	}
-
-	update() {
-		this.element.replaceChildren(...this.buttons.map((b) => b["element"] ?? b));
-	}
-}

web/scripts/ui/components/popup.js

@@ -1,128 +1,2 @@
-// @ts-check
+// Shim for scripts\ui\components\popup.ts
-
+export const ComfyPopup = window.comfyAPI.popup.ComfyPopup;
-import { prop } from "../../utils.js";
-import { $el } from "../../ui.js";
-import { applyClasses } from "../utils.js";
-
-export class ComfyPopup extends EventTarget {
-	element = $el("div.comfyui-popup");
-
-	/**
-	 * @param {{
-	 *     target: HTMLElement,
-	 *      container?: HTMLElement,
-	 *      classList?: import("../utils.js").ClassList,
-	 * 		ignoreTarget?: boolean,
-	 * 		closeOnEscape?: boolean,
-	 * 		position?: "absolute" | "relative",
-	 * 		horizontal?: "left" | "right"
-	 * }} param0
-	 * @param  {...HTMLElement} children
-	 */
-	constructor(
-		{
-			target,
-			container = document.body,
-			classList = "",
-			ignoreTarget = true,
-			closeOnEscape = true,
-			position = "absolute",
-			horizontal = "left",
-		},
-		...children
-	) {
-		super();
-		this.target = target;
-		this.ignoreTarget = ignoreTarget;
-		this.container = container;
-		this.position = position;
-		this.closeOnEscape = closeOnEscape;
-		this.horizontal = horizontal;
-
-		container.append(this.element);
-
-		this.children = prop(this, "children", children, () => {
-			this.element.replaceChildren(...this.children);
-			this.update();
-		});
-		this.classList = prop(this, "classList", classList, () => applyClasses(this.element, this.classList, "comfyui-popup", horizontal));
-		this.open = prop(this, "open", false, (v, o) => {
-			if (v === o) return;
-			if (v) {
-				this.#show();
-			} else {
-				this.#hide();
-			}
-		});
-	}
-
-	toggle() {
-		this.open = !this.open;
-	}
-
-	#hide() {
-		this.element.classList.remove("open");
-		window.removeEventListener("resize", this.update);
-		window.removeEventListener("click", this.#clickHandler, { capture: true });
-		window.removeEventListener("keydown", this.#escHandler, { capture: true });
-
-		this.dispatchEvent(new CustomEvent("close"));
-		this.dispatchEvent(new CustomEvent("change"));
-	}
-
-	#show() {
-		this.element.classList.add("open");
-		this.update();
-
-		window.addEventListener("resize", this.update);
-		window.addEventListener("click", this.#clickHandler, { capture: true });
-		if (this.closeOnEscape) {
-			window.addEventListener("keydown", this.#escHandler, { capture: true });
-		}
-
-		this.dispatchEvent(new CustomEvent("open"));
-		this.dispatchEvent(new CustomEvent("change"));
-	}
-
-	#escHandler = (e) => {
-		if (e.key === "Escape") {
-			this.open = false;
-			e.preventDefault();
-			e.stopImmediatePropagation();
-		}
-	};
-
-	#clickHandler = (e) => {
-		/** @type {any} */
-		const target = e.target;
-		if (!this.element.contains(target) && this.ignoreTarget && !this.target.contains(target)) {
-			this.open = false;
-		}
-	};
-
-	update = () => {
-		const rect = this.target.getBoundingClientRect();
-		this.element.style.setProperty("--bottom", "unset");
-		if (this.position === "absolute") {
-			if (this.horizontal === "left") {
-				this.element.style.setProperty("--left", rect.left + "px");
-			} else {
-				this.element.style.setProperty("--left", rect.right - this.element.clientWidth + "px");
-			}
-			this.element.style.setProperty("--top", rect.bottom + "px");
-			this.element.style.setProperty("--limit", rect.bottom + "px");
-		} else {
-			this.element.style.setProperty("--left", 0 + "px");
-			this.element.style.setProperty("--top", rect.height + "px");
-			this.element.style.setProperty("--limit", rect.height + "px");
-		}
-
-		const thisRect = this.element.getBoundingClientRect();
-		if (thisRect.height < 30) {
-			// Move up instead
-			this.element.style.setProperty("--top", "unset");
-			this.element.style.setProperty("--bottom", rect.height + 5 + "px");
-			this.element.style.setProperty("--limit", rect.height + 5 + "px");
-		}
-	};
-}

web/scripts/ui/components/splitButton.js

@@ -1,43 +1,2 @@
-// @ts-check
+// Shim for scripts\ui\components\splitButton.ts
-
+export const ComfySplitButton = window.comfyAPI.splitButton.ComfySplitButton;
-import { $el } from "../../ui.js";
-import { ComfyButton } from "./button.js";
-import { prop } from "../../utils.js";
-import { ComfyPopup } from "./popup.js";
-
-export class ComfySplitButton {
-	/**
-	 *  @param {{
-	 * 		primary: ComfyButton,
-	 * 		mode?: "hover" | "click",
-	 * 		horizontal?: "left" | "right",
-	 * 		position?: "relative" | "absolute"
-	 *  }} param0
-	 *  @param {Array<ComfyButton> | Array<HTMLElement>} items
-	 */
-	constructor({ primary, mode, horizontal = "left", position = "relative" }, ...items) {
-		this.arrow = new ComfyButton({
-			icon: "chevron-down",
-		});
-		this.element = $el("div.comfyui-split-button" + (mode === "hover" ? ".hover" : ""), [
-			$el("div.comfyui-split-primary", primary.element),
-			$el("div.comfyui-split-arrow", this.arrow.element),
-		]);
-		this.popup = new ComfyPopup({
-			target: this.element,
-			container: position === "relative" ? this.element : document.body,
-			classList: "comfyui-split-button-popup" + (mode === "hover" ? " hover" : ""),
-			closeOnEscape: mode === "click",
-			position,
-			horizontal,
-		});
-
-		this.arrow.withPopup(this.popup, mode);
-
-		this.items = prop(this, "items", items, () => this.update());
-	}
-
-	update() {
-		this.popup.element.replaceChildren(...this.items.map((b) => b.element ?? b));
-	}
-}

web/scripts/ui/dialog.js

@@ -1,38 +1,2 @@
-import { $el } from "../ui.js";
+// Shim for scripts\ui\dialog.ts
-
+export const ComfyDialog = window.comfyAPI.dialog.ComfyDialog;
-export class ComfyDialog extends EventTarget {
-	#buttons;
-
-	constructor(type = "div", buttons = null) {
-		super();
-		this.#buttons = buttons;
-		this.element = $el(type + ".comfy-modal", { parent: document.body }, [
-			$el("div.comfy-modal-content", [$el("p", { $: (p) => (this.textElement = p) }), ...this.createButtons()]),
-		]);
-	}
-
-	createButtons() {
-		return (
-			this.#buttons ?? [
-				$el("button", {
-					type: "button",
-					textContent: "Close",
-					onclick: () => this.close(),
-				}),
-			]
-		);
-	}
-
-	close() {
-		this.element.style.display = "none";
-	}
-
-	show(html) {
-		if (typeof html === "string") {
-			this.textElement.innerHTML = html;
-		} else {
-			this.textElement.replaceChildren(...(html instanceof Array ? html : [html]));
-		}
-		this.element.style.display = "flex";
-	}
-}

web/scripts/ui/draggableList.js

@@ -1,287 +1,2 @@
-// @ts-check
+// Shim for scripts\ui\draggableList.ts
-/*
+export const DraggableList = window.comfyAPI.draggableList.DraggableList;
-	Original implementation:
-    https://github.com/TahaSh/drag-to-reorder
-    MIT License
-
-    Copyright (c) 2023 Taha Shashtari
-
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the Software is
-    furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in all
-    copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-    SOFTWARE.
-*/
-
-import { $el } from "../ui.js";
-
-$el("style", {
-    parent: document.head,
-    textContent: `
-        .draggable-item {
-            position: relative;
-            will-change: transform;
-            user-select: none;
-        }
-        .draggable-item.is-idle {
-            transition: 0.25s ease transform;
-        }
-        .draggable-item.is-draggable {
-            z-index: 10;
-        }
-    `
-});
-
-export class DraggableList extends EventTarget {
-	listContainer;
-	draggableItem;
-	pointerStartX;
-	pointerStartY;
-	scrollYMax;
-	itemsGap = 0;
-	items = [];
-	itemSelector;
-	handleClass = "drag-handle";
-	off = [];
-	offDrag = [];
-
-	constructor(element, itemSelector) {
-        super();
-		this.listContainer = element;
-        this.itemSelector = itemSelector;
-
-		if (!this.listContainer) return;
-
-		this.off.push(this.on(this.listContainer, "mousedown", this.dragStart));
-		this.off.push(this.on(this.listContainer, "touchstart", this.dragStart));
-		this.off.push(this.on(document, "mouseup", this.dragEnd));
-		this.off.push(this.on(document, "touchend", this.dragEnd));
-	}
-
-	getAllItems() {
-		if (!this.items?.length) {
-			this.items = Array.from(this.listContainer.querySelectorAll(this.itemSelector));
-			this.items.forEach((element) => {
-				element.classList.add("is-idle");
-			});
-		}
-		return this.items;
-	}
-
-	getIdleItems() {
-		return this.getAllItems().filter((item) => item.classList.contains("is-idle"));
-	}
-
-	isItemAbove(item) {
-		return item.hasAttribute("data-is-above");
-	}
-
-	isItemToggled(item) {
-		return item.hasAttribute("data-is-toggled");
-	}
-
-	on(source, event, listener, options) {
-		listener = listener.bind(this);
-		source.addEventListener(event, listener, options);
-		return () => source.removeEventListener(event, listener);
-	}
-
-	dragStart(e) {
-		if (e.target.classList.contains(this.handleClass)) {
-			this.draggableItem = e.target.closest(this.itemSelector);
-		}
-
-		if (!this.draggableItem) return;
-
-		this.pointerStartX = e.clientX || e.touches[0].clientX;
-		this.pointerStartY = e.clientY || e.touches[0].clientY;
-		this.scrollYMax = this.listContainer.scrollHeight - this.listContainer.clientHeight;
-
-		this.setItemsGap();
-		this.initDraggableItem();
-		this.initItemsState();
-
-		this.offDrag.push(this.on(document, "mousemove", this.drag));
-		this.offDrag.push(this.on(document, "touchmove", this.drag, { passive: false }));
-
-		this.dispatchEvent(
-			new CustomEvent("dragstart", {
-				detail: { element: this.draggableItem, position: this.getAllItems().indexOf(this.draggableItem) },
-			})
-		);
-	}
-
-	setItemsGap() {
-		if (this.getIdleItems().length <= 1) {
-			this.itemsGap = 0;
-			return;
-		}
-
-		const item1 = this.getIdleItems()[0];
-		const item2 = this.getIdleItems()[1];
-
-		const item1Rect = item1.getBoundingClientRect();
-		const item2Rect = item2.getBoundingClientRect();
-
-		this.itemsGap = Math.abs(item1Rect.bottom - item2Rect.top);
-	}
-
-	initItemsState() {
-		this.getIdleItems().forEach((item, i) => {
-			if (this.getAllItems().indexOf(this.draggableItem) > i) {
-				item.dataset.isAbove = "";
-			}
-		});
-	}
-
-	initDraggableItem() {
-		this.draggableItem.classList.remove("is-idle");
-		this.draggableItem.classList.add("is-draggable");
-	}
-
-	drag(e) {
-		if (!this.draggableItem) return;
-
-		e.preventDefault();
-
-		const clientX = e.clientX || e.touches[0].clientX;
-		const clientY = e.clientY || e.touches[0].clientY;
-
-		const listRect = this.listContainer.getBoundingClientRect();
-
-		if (clientY > listRect.bottom) {
-			if (this.listContainer.scrollTop < this.scrollYMax) {
-				this.listContainer.scrollBy(0, 10);
-				this.pointerStartY -= 10;
-			}
-		} else if (clientY < listRect.top && this.listContainer.scrollTop > 0) {
-			this.pointerStartY += 10;
-			this.listContainer.scrollBy(0, -10);
-		}
-
-		const pointerOffsetX = clientX - this.pointerStartX;
-		const pointerOffsetY = clientY - this.pointerStartY;
-
-		this.updateIdleItemsStateAndPosition();
-		this.draggableItem.style.transform = `translate(${pointerOffsetX}px, ${pointerOffsetY}px)`;
-	}
-
-	updateIdleItemsStateAndPosition() {
-		const draggableItemRect = this.draggableItem.getBoundingClientRect();
-		const draggableItemY = draggableItemRect.top + draggableItemRect.height / 2;
-
-		// Update state
-		this.getIdleItems().forEach((item) => {
-			const itemRect = item.getBoundingClientRect();
-			const itemY = itemRect.top + itemRect.height / 2;
-			if (this.isItemAbove(item)) {
-				if (draggableItemY <= itemY) {
-					item.dataset.isToggled = "";
-				} else {
-					delete item.dataset.isToggled;
-				}
-			} else {
-				if (draggableItemY >= itemY) {
-					item.dataset.isToggled = "";
-				} else {
-					delete item.dataset.isToggled;
-				}
-			}
-		});
-
-		// Update position
-		this.getIdleItems().forEach((item) => {
-			if (this.isItemToggled(item)) {
-				const direction = this.isItemAbove(item) ? 1 : -1;
-				item.style.transform = `translateY(${direction * (draggableItemRect.height + this.itemsGap)}px)`;
-			} else {
-				item.style.transform = "";
-			}
-		});
-	}
-
-	dragEnd() {
-		if (!this.draggableItem) return;
-
-		this.applyNewItemsOrder();
-		this.cleanup();
-	}
-
-	applyNewItemsOrder() {
-		const reorderedItems = [];
-
-		let oldPosition = -1;
-		this.getAllItems().forEach((item, index) => {
-			if (item === this.draggableItem) {
-				oldPosition = index;
-				return;
-			}
-			if (!this.isItemToggled(item)) {
-				reorderedItems[index] = item;
-				return;
-			}
-			const newIndex = this.isItemAbove(item) ? index + 1 : index - 1;
-			reorderedItems[newIndex] = item;
-		});
-
-		for (let index = 0; index < this.getAllItems().length; index++) {
-			const item = reorderedItems[index];
-			if (typeof item === "undefined") {
-				reorderedItems[index] = this.draggableItem;
-			}
-		}
-
-		reorderedItems.forEach((item) => {
-			this.listContainer.appendChild(item);
-		});
-
-		this.items = reorderedItems;
-
-		this.dispatchEvent(
-			new CustomEvent("dragend", {
-				detail: { element: this.draggableItem, oldPosition, newPosition: reorderedItems.indexOf(this.draggableItem) },
-			})
-		);
-	}
-
-	cleanup() {
-		this.itemsGap = 0;
-		this.items = [];
-		this.unsetDraggableItem();
-		this.unsetItemState();
-
-		this.offDrag.forEach((f) => f());
-		this.offDrag = [];
-	}
-
-	unsetDraggableItem() {
-		this.draggableItem.style = null;
-		this.draggableItem.classList.remove("is-draggable");
-		this.draggableItem.classList.add("is-idle");
-		this.draggableItem = null;
-	}
-
-	unsetItemState() {
-		this.getIdleItems().forEach((item, i) => {
-			delete item.dataset.isAbove;
-			delete item.dataset.isToggled;
-			item.style.transform = "";
-		});
-	}
-
-	dispose() {
-		this.off.forEach((f) => f());
-	}
-}

web/scripts/ui/imagePreview.js

@@ -1,97 +1,3 @@
-import { $el } from "../ui.js";
+// Shim for scripts\ui\imagePreview.ts
-
+export const calculateImageGrid = window.comfyAPI.imagePreview.calculateImageGrid;
-export function calculateImageGrid(imgs, dw, dh) {
+export const createImageHost = window.comfyAPI.imagePreview.createImageHost;
-	let best = 0;
-	let w = imgs[0].naturalWidth;
-	let h = imgs[0].naturalHeight;
-	const numImages = imgs.length;
-
-	let cellWidth, cellHeight, cols, rows, shiftX;
-	// compact style
-	for (let c = 1; c <= numImages; c++) {
-		const r = Math.ceil(numImages / c);
-		const cW = dw / c;
-		const cH = dh / r;
-		const scaleX = cW / w;
-		const scaleY = cH / h;
-
-		const scale = Math.min(scaleX, scaleY, 1);
-		const imageW = w * scale;
-		const imageH = h * scale;
-		const area = imageW * imageH * numImages;
-
-		if (area > best) {
-			best = area;
-			cellWidth = imageW;
-			cellHeight = imageH;
-			cols = c;
-			rows = r;
-			shiftX = c * ((cW - imageW) / 2);
-		}
-	}
-
-	return { cellWidth, cellHeight, cols, rows, shiftX };
-}
-
-export function createImageHost(node) {
-	const el = $el("div.comfy-img-preview");
-	let currentImgs;
-	let first = true;
-
-	function updateSize() {
-		let w = null;
-		let h = null;
-
-		if (currentImgs) {
-			let elH = el.clientHeight;
-			if (first) {
-				first = false;
-				// On first run, if we are small then grow a bit
-				if (elH < 190) {
-					elH = 190;
-				}
-				el.style.setProperty("--comfy-widget-min-height", elH);
-			} else {
-				el.style.setProperty("--comfy-widget-min-height", null);
-			}
-
-			const nw = node.size[0];
-			({ cellWidth: w, cellHeight: h } = calculateImageGrid(currentImgs, nw - 20, elH));
-			w += "px";
-			h += "px";
-
-			el.style.setProperty("--comfy-img-preview-width", w);
-			el.style.setProperty("--comfy-img-preview-height", h);
-		}
-	}
-	return {
-		el,
-		updateImages(imgs) {
-			if (imgs !== currentImgs) {
-				if (currentImgs == null) {
-					requestAnimationFrame(() => {
-						updateSize();
-					});
-				}
-				el.replaceChildren(...imgs);
-				currentImgs = imgs;
-				node.onResize(node.size);
-				node.graph.setDirtyCanvas(true, true);
-			}
-		},
-		getHeight() {
-			updateSize();
-		},
-		onDraw() {
-			// Element from point uses a hittest find elements so we need to toggle pointer events
-			el.style.pointerEvents = "all";
-			const over = document.elementFromPoint(app.canvas.mouse[0], app.canvas.mouse[1]);
-			el.style.pointerEvents = "none";
-
-			if(!over) return;
-			// Set the overIndex so Open Image etc work
-			const idx = currentImgs.indexOf(over);
-			node.overIndex = idx;
-		},
-	};
-}

web/scripts/ui/menu/index.js

@@ -1,302 +1,2 @@
-// @ts-check
+// Shim for scripts\ui\menu\index.ts
-
+export const ComfyAppMenu = window.comfyAPI.index.ComfyAppMenu;
-import { $el } from "../../ui.js";
-import { downloadBlob } from "../../utils.js";
-import { ComfyButton } from "../components/button.js";
-import { ComfyButtonGroup } from "../components/buttonGroup.js";
-import { ComfySplitButton } from "../components/splitButton.js";
-import { ComfyViewHistoryButton } from "./viewHistory.js";
-import { ComfyQueueButton } from "./queueButton.js";
-import { ComfyWorkflowsMenu } from "./workflows.js";
-import { ComfyViewQueueButton } from "./viewQueue.js";
-import { getInteruptButton } from "./interruptButton.js";
-
-const collapseOnMobile = (t) => {
-	(t.element ?? t).classList.add("comfyui-menu-mobile-collapse");
-	return t;
-};
-const showOnMobile = (t) => {
-	(t.element ?? t).classList.add("lt-lg-show");
-	return t;
-};
-
-export class ComfyAppMenu {
-	#sizeBreak = "lg";
-	#lastSizeBreaks = {
-		lg: null,
-		md: null,
-		sm: null,
-		xs: null,
-	};
-	#sizeBreaks = Object.keys(this.#lastSizeBreaks);
-	#cachedInnerSize = null;
-	#cacheTimeout = null;
-
-	/**
-	 * @param { import("../../app.js").ComfyApp } app
-	 */
-	constructor(app) {
-		this.app = app;
-
-		this.workflows = new ComfyWorkflowsMenu(app);
-		const getSaveButton = (t) =>
-			new ComfyButton({
-				icon: "content-save",
-				tooltip: "Save the current workflow",
-				action: () => app.workflowManager.activeWorkflow.save(),
-				content: t,
-			});
-
-		this.logo = $el("h1.comfyui-logo.nlg-hide", { title: "ComfyUI" }, "ComfyUI");
-		this.saveButton = new ComfySplitButton(
-			{
-				primary: getSaveButton(),
-				mode: "hover",
-				position: "absolute",
-			},
-			getSaveButton("Save"),
-			new ComfyButton({
-				icon: "content-save-edit",
-				content: "Save As",
-				tooltip: "Save the current graph as a new workflow",
-				action: () => app.workflowManager.activeWorkflow.save(true),
-			}),
-			new ComfyButton({
-				icon: "download",
-				content: "Export",
-				tooltip: "Export the current workflow as JSON",
-				action: () => this.exportWorkflow("workflow", "workflow"),
-			}),
-			new ComfyButton({
-				icon: "api",
-				content: "Export (API Format)",
-				tooltip: "Export the current workflow as JSON for use with the ComfyUI API",
-				action: () => this.exportWorkflow("workflow_api", "output"),
-				visibilitySetting: { id: "Comfy.DevMode", showValue: true },
-				app,
-			})
-		);
-		this.actionsGroup = new ComfyButtonGroup(
-			new ComfyButton({
-				icon: "refresh",
-				content: "Refresh",
-				tooltip: "Refresh widgets in nodes to find new models or files",
-				action: () => app.refreshComboInNodes(),
-			}),
-			new ComfyButton({
-				icon: "clipboard-edit-outline",
-				content: "Clipspace",
-				tooltip: "Open Clipspace window",
-				action: () => app["openClipspace"](),
-			}),
-			new ComfyButton({
-				icon: "fit-to-page-outline",
-				content: "Reset View",
-				tooltip: "Reset the canvas view",
-				action: () => app.resetView(),
-			}),
-			new ComfyButton({
-				icon: "cancel",
-				content: "Clear",
-				tooltip: "Clears current workflow",
-				action: () => {
-					if (!app.ui.settings.getSettingValue("Comfy.ConfirmClear", true) || confirm("Clear workflow?")) {
-						app.clean();
-						app.graph.clear();
-					}
-				},
-			})
-		);
-		this.settingsGroup = new ComfyButtonGroup(
-			new ComfyButton({
-				icon: "cog",
-				content: "Settings",
-				tooltip: "Open settings",
-				action: () => {
-					app.ui.settings.show();
-				},
-			})
-		);
-		this.viewGroup = new ComfyButtonGroup(
-			new ComfyViewHistoryButton(app).element,
-			new ComfyViewQueueButton(app).element,
-			getInteruptButton("nlg-hide").element
-		);
-		this.mobileMenuButton = new ComfyButton({
-			icon: "menu",
-			action: (_, btn) => {
-				btn.icon = this.element.classList.toggle("expanded") ? "menu-open" : "menu";
-				window.dispatchEvent(new Event("resize"));
-			},
-			classList: "comfyui-button comfyui-menu-button",
-		});
-
-		this.element = $el("nav.comfyui-menu.lg", { style: { display: "none" } }, [
-			this.logo,
-			this.workflows.element,
-			this.saveButton.element,
-			collapseOnMobile(this.actionsGroup).element,
-			$el("section.comfyui-menu-push"),
-			collapseOnMobile(this.settingsGroup).element,
-			collapseOnMobile(this.viewGroup).element,
-
-			getInteruptButton("lt-lg-show").element,
-			new ComfyQueueButton(app).element,
-			showOnMobile(this.mobileMenuButton).element,
-		]);
-
-		let resizeHandler;
-		this.menuPositionSetting = app.ui.settings.addSetting({
-			id: "Comfy.UseNewMenu",
-			defaultValue: "Disabled",
-			name: "[Beta] Use new menu and workflow management. Note: On small screens the menu will always be at the top.",
-			type: "combo",
-			options: ["Disabled", "Top", "Bottom"],
-			onChange: async (v) => {
-				if (v && v !== "Disabled") {
-					if (!resizeHandler) {
-						resizeHandler = () => {
-							this.calculateSizeBreak();
-						};
-						window.addEventListener("resize", resizeHandler);
-					}
-					this.updatePosition(v);
-				} else {
-					if (resizeHandler) {
-						window.removeEventListener("resize", resizeHandler);
-						resizeHandler = null;
-					}
-					document.body.style.removeProperty("display");
-					app.ui.menuContainer.style.removeProperty("display");
-					this.element.style.display = "none";
-					app.ui.restoreMenuPosition();
-				}
-				window.dispatchEvent(new Event("resize"));
-			},
-		});
-	}
-
-	updatePosition(v) {
-		document.body.style.display = "grid";
-		this.app.ui.menuContainer.style.display = "none";
-		this.element.style.removeProperty("display");
-		this.position = v;
-		if (v === "Bottom") {
-			this.app.bodyBottom.append(this.element);
-		} else {
-			this.app.bodyTop.prepend(this.element);
-		}
-		this.calculateSizeBreak();
-	}
-
-	updateSizeBreak(idx, prevIdx, direction) {
-		const newSize = this.#sizeBreaks[idx];
-		if (newSize === this.#sizeBreak) return;
-		this.#cachedInnerSize = null;
-		clearTimeout(this.#cacheTimeout);
-
-		this.#sizeBreak = this.#sizeBreaks[idx];
-		for (let i = 0; i < this.#sizeBreaks.length; i++) {
-			const sz = this.#sizeBreaks[i];
-			if (sz === this.#sizeBreak) {
-				this.element.classList.add(sz);
-			} else {
-				this.element.classList.remove(sz);
-			}
-			if (i < idx) {
-				this.element.classList.add("lt-" + sz);
-			} else {
-				this.element.classList.remove("lt-" + sz);
-			}
-		}
-
-		if (idx) {
-			// We're on a small screen, force the menu at the top
-			if (this.position !== "Top") {
-				this.updatePosition("Top");
-			}
-		} else if (this.position != this.menuPositionSetting.value) {
-			// Restore user position
-			this.updatePosition(this.menuPositionSetting.value);
-		}
-
-		// Allow multiple updates, but prevent bouncing
-		if (!direction) {
-			direction = prevIdx - idx;
-		} else if (direction != prevIdx - idx) {
-			return;
-		}
-		this.calculateSizeBreak(direction);
-	}
-
-	calculateSizeBreak(direction = 0) {
-		let idx = this.#sizeBreaks.indexOf(this.#sizeBreak);
-		const currIdx = idx;
-		const innerSize = this.calculateInnerSize(idx);
-		if (window.innerWidth >= this.#lastSizeBreaks[this.#sizeBreaks[idx - 1]]) {
-			if (idx > 0) {
-				idx--;
-			}
-		} else if (innerSize > this.element.clientWidth) {
-			this.#lastSizeBreaks[this.#sizeBreak] = Math.max(window.innerWidth, innerSize);
-			// We need to shrink
-			if (idx < this.#sizeBreaks.length - 1) {
-				idx++;
-			}
-		}
-
-		this.updateSizeBreak(idx, currIdx, direction);
-	}
-
-	calculateInnerSize(idx) {
-		// Cache the inner size to prevent too much calculation when resizing the window
-		clearTimeout(this.#cacheTimeout);
-		if (this.#cachedInnerSize) {
-			// Extend cache time
-			this.#cacheTimeout = setTimeout(() => (this.#cachedInnerSize = null), 100);
-		} else {
-			let innerSize = 0;
-			let count = 1;
-			for (const c of this.element.children) {
-				if (c.classList.contains("comfyui-menu-push")) continue; // ignore right push
-				if (idx && c.classList.contains("comfyui-menu-mobile-collapse")) continue; // ignore collapse items
-				innerSize += c.clientWidth;
-				count++;
-			}
-			innerSize += 8 * count;
-			this.#cachedInnerSize = innerSize;
-			this.#cacheTimeout = setTimeout(() => (this.#cachedInnerSize = null), 100);
-		}
-		return this.#cachedInnerSize;
-	}
-
-	/**
-	 * @param {string} defaultName
-	 */
-	getFilename(defaultName) {
-		if (this.app.ui.settings.getSettingValue("Comfy.PromptFilename", true)) {
-			defaultName = prompt("Save workflow as:", defaultName);
-			if (!defaultName) return;
-			if (!defaultName.toLowerCase().endsWith(".json")) {
-				defaultName += ".json";
-			}
-		}
-		return defaultName;
-	}
-
-	/**
-	 * @param {string} [filename]
-	 * @param { "workflow" | "output" } [promptProperty]
-	 */
-	async exportWorkflow(filename, promptProperty) {
-		if (this.app.workflowManager.activeWorkflow?.path) {
-			filename = this.app.workflowManager.activeWorkflow.name;
-		}
-		const p = await this.app.graphToPrompt();
-		const json = JSON.stringify(p[promptProperty], null, 2);
-		const blob = new Blob([json], { type: "application/json" });
-		const file = this.getFilename(filename);
-		if (!file) return;
-		downloadBlob(file, blob);
-	}
-}

web/scripts/ui/menu/interruptButton.js

@@ -1,23 +1,2 @@
-// @ts-check
+// Shim for scripts\ui\menu\interruptButton.ts
-
+export const getInterruptButton = window.comfyAPI.interruptButton.getInterruptButton;
-import { api } from "../../api.js";
-import { ComfyButton } from "../components/button.js";
-
-export function getInteruptButton(visibility) {
-	const btn = new ComfyButton({
-		icon: "close",
-		tooltip: "Cancel current generation",
-		enabled: false,
-		action: () => {
-			api.interrupt();
-		},
-		classList: ["comfyui-button", "comfyui-interrupt-button", visibility],
-	});
-
-	api.addEventListener("status", ({ detail }) => {
-		const sz = detail?.exec_info?.queue_remaining;
-		btn.enabled = sz > 0;
-	});
-
-	return btn;
-}

web/scripts/ui/menu/menu.css

@@ -1,710 +0,0 @@
-.relative {
-	position: relative;
-}
-.hidden {
-	display: none !important;
-}
-.mdi.rotate270::before {
-	transform: rotate(270deg);
-}
-
-/* Generic */
-.comfyui-button {
-	display: flex;
-	align-items: center;
-	gap: 0.5em;
-	cursor: pointer;
-	border: none;
-	border-radius: 4px;
-	padding: 4px 8px;
-	box-sizing: border-box;
-	margin: 0;
-	transition: box-shadow 0.1s;
-}
-
-.comfyui-button:active {
-	box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.5);
-}
-.comfyui-button:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
-.primary .comfyui-button,
-.primary.comfyui-button {
-	background-color: var(--primary-bg) !important;
-	color: var(--primary-fg) !important;
-}
-
-.primary .comfyui-button:not(:disabled):hover,
-.primary.comfyui-button:not(:disabled):hover {
-	background-color: var(--primary-hover-bg) !important;
-	color: var(--primary-hover-fg) !important;
-}
-
-/* Popup */
-.comfyui-popup {
-	position: absolute;
-	left: var(--left);
-	right: var(--right);
-	top: var(--top);
-	bottom: var(--bottom);
-	z-index: 2000;
-	max-height: calc(100vh - var(--limit) - 10px);
-	box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
-}
-
-.comfyui-popup:not(.open) {
-	display: none;
-}
-
-.comfyui-popup.right.open {
-	border-top-left-radius: 4px;
-	border-bottom-right-radius: 4px;
-	border-bottom-left-radius: 4px;
-	overflow: hidden;
-}
-/* Split button */
-.comfyui-split-button {
-	position: relative;
-	display: flex;
-}
-
-.comfyui-split-primary {
-	flex: auto;
-}
-
-.comfyui-split-primary .comfyui-button {
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
-	border-right: 1px solid var(--comfy-menu-bg);
-	width: 100%;
-}
-
-.comfyui-split-arrow .comfyui-button {
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-	padding-left: 2px;
-	padding-right: 2px;
-}
-
-.comfyui-split-button-popup {
-	white-space: nowrap;
-	background-color: var(--content-bg);
-	color: var(--content-fg);
-	display: flex;
-	flex-direction: column;
-	overflow: auto;
-}
-
-.comfyui-split-button-popup.hover {
-	z-index: 2001;
-}
-.comfyui-split-button-popup > .comfyui-button {
-	border: none;
-	background-color: transparent;
-	color: var(--fg-color);
-	padding: 8px 12px 8px 8px;
-}
-
-.comfyui-split-button-popup > .comfyui-button:not(:disabled):hover {
-	background-color: var(--comfy-input-bg);
-}
-
-/* Button group */
-.comfyui-button-group {
-	display: flex;
-	border-radius: 4px;
-	overflow: hidden;
-}
-
-.comfyui-button-group > .comfyui-button,
-.comfyui-button-group > .comfyui-button-wrapper > .comfyui-button {
-	padding: 4px 10px;
-	border-radius: 0;
-}
-
-/* Menu */
-.comfyui-menu {
-	width: 100vw;
-	background: var(--comfy-menu-bg);
-	color: var(--fg-color);
-	font-family: Arial, Helvetica, sans-serif;
-	font-size: 0.8em;
-	display: flex;
-	padding: 4px 8px;
-	align-items: center;
-	gap: 8px;
-	box-sizing: border-box;
-	z-index: 1000;
-	order: 0;
-	grid-column: 1/-1;
-	overflow: auto;
-	max-height: 90vh;
-}
-
-.comfyui-menu>* {
-	flex-shrink: 0;
-}
-.comfyui-menu .mdi::before {
-	font-size: 18px;
-}
-
-.comfyui-menu .comfyui-button {
-	background: var(--comfy-input-bg);
-	color: var(--fg-color);
-	white-space: nowrap;
-}
-
-.comfyui-menu .comfyui-button:not(:disabled):hover {
-	background: var(--border-color);
-	color: var(--content-fg);
-}
-
-.comfyui-menu .comfyui-split-button-popup > .comfyui-button {
-	border-radius: 0;
-	background-color: transparent;
-}
-
-.comfyui-menu .comfyui-split-button-popup > .comfyui-button:not(:disabled):hover {
-	background-color: var(--comfy-input-bg);
-}
-
-.comfyui-menu .comfyui-split-button-popup.left {
-	border-top-right-radius: 4px;
-	border-bottom-left-radius: 4px;
-	border-bottom-right-radius: 4px;
-}
-
-.comfyui-menu .comfyui-button.popup-open {
-	background-color: var(--content-bg);
-	color: var(--content-fg);
-}
-
-.comfyui-menu-push {
-	margin-left: -0.8em;
-	flex: auto;
-}
-
-.comfyui-logo {
-	font-size: 1.2em;
-	margin: 0;
-	user-select: none;
-	cursor: default;
-}
-
-/* Workflows */
-.comfyui-workflows-button {
-	flex-direction: row-reverse;
-	max-width: 200px;
-	position: relative;
-	z-index: 0;
-}
-
-.comfyui-workflows-button.popup-open {
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-}
-.comfyui-workflows-button.unsaved {
-	font-style: italic;
-}
-.comfyui-workflows-button-progress {
-	position: absolute;
-	top: 0;
-	left: 0;
-	background-color: green;
-	height: 100%;
-	border-radius: 4px;
-	z-index: -1;
-}
-
-.comfyui-workflows-button > span {
-	flex: auto;
-	text-align: left;
-	overflow: hidden;
-}
-.comfyui-workflows-button-inner {
-	display: flex;
-	align-items: center;
-	gap: 7px;
-	width: 150px;
-}
-.comfyui-workflows-label {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	direction: rtl;
-	flex: auto;
-	position: relative;
-}
-
-.comfyui-workflows-button.unsaved .comfyui-workflows-label {
-	padding-left: 8px;
-}
-
-.comfyui-workflows-button.unsaved .comfyui-workflows-label:after {
-	content: "*";
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-.comfyui-workflows-button-inner .mdi-graph::before {
-	transform: rotate(-90deg);
-}
-
-.comfyui-workflows-popup {
-	font-family: Arial, Helvetica, sans-serif;
-	font-size: 0.8em;
-	padding: 10px;
-	overflow: auto;
-	background-color: var(--content-bg);
-	color: var(--content-fg);
-	border-top-right-radius: 4px;
-	border-bottom-right-radius: 4px;
-	border-bottom-left-radius: 4px;
-	z-index: 400;
-}
-
-.comfyui-workflows-panel {
-	min-height: 150px;
-}
-
-.comfyui-workflows-panel .lds-ring {
-	transform: translate(-50%);
-	position: absolute;
-	left: 50%;
-	top: 75px;
-}
-
-.comfyui-workflows-panel h3 {
-	margin: 10px 0 10px 0;
-	font-size: 11px;
-	opacity: 0.8;
-}
-
-.comfyui-workflows-panel section header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-.comfy-ui-workflows-search .mdi {
-	position: relative;
-	top: 2px;
-	pointer-events: none;
-}
-.comfy-ui-workflows-search input {
-	background-color: var(--comfy-input-bg);
-	color: var(--input-text);
-	border: none;
-	border-radius: 4px;
-	padding: 4px 10px;
-	margin-left: -24px;
-	text-indent: 18px;
-}
-.comfy-ui-workflows-search input:placeholder-shown {
-	width: 10px;
-}
-.comfy-ui-workflows-search input:placeholder-shown:focus {
-	width: auto;
-}
-.comfyui-workflows-actions {
-	display: flex;
-	gap: 10px;
-	margin-bottom: 10px;
-}
-
-.comfyui-workflows-actions .comfyui-button {
-	background: var(--comfy-input-bg);
-	color: var(--input-text);
-}
-
-.comfyui-workflows-actions .comfyui-button:not(:disabled):hover {
-	background: var(--primary-bg);
-	color: var(--primary-fg);
-}
-
-.comfyui-workflows-favorites,
-.comfyui-workflows-open {
-	border-bottom: 1px solid var(--comfy-input-bg);
-	padding-bottom: 5px;
-	margin-bottom: 5px;
-}
-
-.comfyui-workflows-open .active {
-	font-weight: bold;
-	color: var(--primary-fg);
-}
-
-.comfyui-workflows-favorites:empty {
-	display: none;
-}
-
-.comfyui-workflows-tree {
-	padding: 0;
-	margin: 0;
-}
-
-.comfyui-workflows-tree:empty::after {
-	content: "No saved workflows";
-	display: block;
-	text-align: center;
-}
-.comfyui-workflows-tree > ul {
-	padding: 0;
-}
-
-.comfyui-workflows-tree > ul ul {
-	margin: 0;
-	padding: 0 0 0 25px;
-}
-
-.comfyui-workflows-tree:not(.filtered) .closed > ul {
-	display: none;
-}
-
-.comfyui-workflows-tree li,
-.comfyui-workflows-tree-file {
-	--item-height: 32px;
-	list-style-type: none;
-	height: var(--item-height);
-	display: flex;
-	align-items: center;
-	gap: 5px;
-	cursor: pointer;
-	user-select: none;
-}
-
-.comfyui-workflows-tree-file.active::before,
-.comfyui-workflows-tree li:hover::before,
-.comfyui-workflows-tree-file:hover::before {
-	content: "";
-	position: absolute;
-	width: 100%;
-	left: 0;
-	height: var(--item-height);
-	background-color: var(--content-hover-bg);
-	color: var(--content-hover-fg);
-	z-index: -1;
-}
-
-.comfyui-workflows-tree-file.active::before {
-	background-color: var(--primary-bg);
-	color: var(--primary-fg);
-}
-
-.comfyui-workflows-tree-file.running:not(:hover)::before {
-	content: "";
-	position: absolute;
-	width: var(--progress, 0);
-	left: 0;
-	height: var(--item-height);
-	background-color: green;
-	z-index: -1;
-}
-
-.comfyui-workflows-tree-file.unsaved span {
-	font-style: italic;
-}
-
-.comfyui-workflows-tree-file span {
-	flex: auto;
-}
-
-.comfyui-workflows-tree-file span + .comfyui-workflows-file-action {
-	margin-left: 10px;
-}
-
-.comfyui-workflows-tree-file .comfyui-workflows-file-action {
-	background-color: transparent;
-	color: var(--fg-color);
-	padding: 2px 4px;
-}
-
-.comfyui-workflows-tree-file.active .comfyui-workflows-file-action {
-	color: var(--primary-fg);
-}
-
-.lg ~ .comfyui-workflows-popup .comfyui-workflows-tree-file:not(:hover) .comfyui-workflows-file-action {
-	opacity: 0;
-}
-
-.comfyui-workflows-tree-file .comfyui-workflows-file-action:hover {
-	background-color: var(--primary-bg);
-	color: var(--primary-fg);
-}
-
-.comfyui-workflows-tree-file .comfyui-workflows-file-action-primary {
-	background-color: transparent;
-	color: var(--fg-color);
-	padding: 2px 4px;
-	margin: 0 -4px;
-}
-
-.comfyui-workflows-file-action-favorite .mdi-star {
-	color: orange;
-}
-
-/* View List */
-.comfyui-view-list-popup {
-	padding: 10px;
-	background-color: var(--content-bg);
-	color: var(--content-fg);
-	min-width: 170px;
-	min-height: 435px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	box-sizing: border-box;
-}
-.comfyui-view-list-popup h3 {
-	margin: 0 0 5px 0;
-}
-.comfyui-view-list-items {
-	width: 100%;
-	background: var(--comfy-menu-bg);
-	border-radius: 5px;
-	display: flex;
-	justify-content: center;
-	flex: auto;
-	align-items: center;
-	flex-direction: column;
-}
-.comfyui-view-list-items section {
-	max-height: 400px;
-	overflow: auto;
-	width: 100%;
-	display: grid;
-	grid-template-columns: auto auto auto;
-	align-items: center;
-	justify-content: center;
-	gap: 5px;
-	padding: 5px 0;
-}
-.comfyui-view-list-items section + section {
-	border-top: 1px solid var(--border-color);
-	margin-top: 10px;
-	padding-top: 5px;
-}
-.comfyui-view-list-items section h5 {
-	grid-column: 1 / 4;
-	text-align: center;
-	margin: 5px;
-}
-.comfyui-view-list-items span {
-	text-align: center;
-	padding: 0 2px;
-}
-.comfyui-view-list-popup header {
-	margin-bottom: 10px;
-	display: flex;
-	gap: 5px;
-}
-.comfyui-view-list-popup header .comfyui-button {
-	border: 1px solid transparent;
-}
-.comfyui-view-list-popup header .comfyui-button:not(:disabled):hover {
-	border: 1px solid var(--comfy-menu-bg);
-}
-/* Queue button */
-.comfyui-queue-button .comfyui-split-primary .comfyui-button {
-	padding-right: 12px;
-}
-.comfyui-queue-count {
-	margin-left: 5px;
-	border-radius: 10px;
-	background-color: rgb(8, 80, 153);
-	padding: 2px 4px;
-	font-size: 10px;
-	min-width: 1em;
-	display: inline-block;
-}
-/* Queue options*/
-.comfyui-queue-options {
-	padding: 10px;
-	font-family: Arial, Helvetica, sans-serif;
-	font-size: 12px;
-	display: flex;
-	gap: 10px;
-}
-
-.comfyui-queue-batch {
-	display: flex;
-	flex-direction: column;
-	border-right: 1px solid var(--comfy-menu-bg);
-	padding-right: 10px;
-	gap: 5px;
-}
-
-.comfyui-queue-batch input {
-	width: 145px;
-}
-
-.comfyui-queue-batch .comfyui-queue-batch-value {
-	width: 70px;
-}
-
-.comfyui-queue-mode {
-	display: flex;
-	flex-direction: column;
-}
-
-.comfyui-queue-mode span {
-	font-weight: bold;
-	margin-bottom: 2px;
-}
-
-.comfyui-queue-mode label {
-	display: flex;
-	flex-direction: row-reverse;
-	justify-content: start;
-	gap: 5px;
-	padding: 2px 0;
-}
-
-.comfyui-queue-mode label input {
-	padding: 0;
-	margin: 0;
-}
-
-/** Send to workflow widget selection dialog */
-.comfy-widget-selection-dialog {
-	border: none;
-}
-
-.comfy-widget-selection-dialog div {
-	color: var(--fg-color);
-	font-family: Arial, Helvetica, sans-serif;
-}
-
-.comfy-widget-selection-dialog h2 {
-	margin-top: 0;
-}
-
-.comfy-widget-selection-dialog section {
-	width: fit-content;
-	display: flex;
-	flex-direction: column;
-}
-
-.comfy-widget-selection-item {
-	display: flex;
-	gap: 10px;
-	align-items: center;
-}
-
-.comfy-widget-selection-item span {
-	margin-right: auto;
-}
-
-.comfy-widget-selection-item span::before {
-	content: '#' attr(data-id);
-	opacity: 0.5;
-	margin-right: 5px;
-}
-
-.comfy-modal .comfy-widget-selection-item button {
-	font-size: 1em;
-}
-
-/***** Responsive *****/
-.lg.comfyui-menu .lt-lg-show {
-	display: none !important;
-}
-.comfyui-menu:not(.lg) .nlg-hide {
-	display: none !important;
-}
-/** Large screen */
-.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-button span,
-.lg.comfyui-menu>.comfyui-menu-mobile-collapse.comfyui-button span {
-	display: none;
-}
-.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-popup .comfyui-button span {
-	display: unset;
-}
-
-/** Non large screen */
-.lt-lg.comfyui-menu {
-	flex-wrap: wrap;
-}
-
-.lt-lg.comfyui-menu > *:not(.comfyui-menu-mobile-collapse) {
-	order: 1;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
-	order: 9999;
-	width: 100%;
-}
-
-.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
-	order: -1;
-}
-
-.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-button {
-	top: unset;
-	bottom: 4px;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button-group {
-	flex-wrap: wrap;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button {
-	padding: 10px;
-}
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button-wrapper {
-	width: 100%;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-popup {
-	position: static;
-	background-color: var(--comfy-input-bg);
-	max-width: unset;
-	max-height: 50vh;
-	overflow: auto;
-}
-
-.lt-lg.comfyui-menu:not(.expanded) > .comfyui-menu-mobile-collapse {
-	display: none;
-}
-
-.lt-lg .comfyui-queue-button {
-	margin-right: 44px;
-}
-
-.lt-lg .comfyui-menu-button {
-	position: absolute;
-	top: 4px;
-	right: 8px;
-}
-
-.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-view-list-popup {
-	border-radius: 0;
-}
-
-.lt-lg.comfyui-menu .comfyui-workflows-popup {
-	width: 100vw;
-}
-
-/** Small */
-.lt-md .comfyui-workflows-button-inner {
-	width: unset !important;
-}
-.lt-md  .comfyui-workflows-label {
-	display: none;
-}
-
-/** Extra small */
-.lt-sm .comfyui-queue-button {
-	margin-right: 0;
-	width: 100%;
-}
-.lt-sm .comfyui-queue-button .comfyui-button {
-	justify-content: center;
-}
-.lt-sm .comfyui-interrupt-button {
-	margin-right: 45px;
-}
-.comfyui-body-bottom .lt-sm.comfyui-menu > .comfyui-menu-button{
-	bottom: 41px;
-}

web/scripts/ui/menu/queueButton.js

@@ -1,93 +1,2 @@
-// @ts-check
+// Shim for scripts\ui\menu\queueButton.ts
-
+export const ComfyQueueButton = window.comfyAPI.queueButton.ComfyQueueButton;
-import { ComfyButton } from "../components/button.js";
-import { $el } from "../../ui.js";
-import { api } from "../../api.js";
-import { ComfySplitButton } from "../components/splitButton.js";
-import { ComfyQueueOptions } from "./queueOptions.js";
-import { prop } from "../../utils.js";
-
-export class ComfyQueueButton {
-	element = $el("div.comfyui-queue-button");
-	#internalQueueSize = 0;
-
-	queuePrompt = async (e) => {
-		this.#internalQueueSize += this.queueOptions.batchCount;
-		// Hold shift to queue front, event is undefined when auto-queue is enabled
-		await this.app.queuePrompt(e?.shiftKey ? -1 : 0, this.queueOptions.batchCount);
-	};
-
-	constructor(app) {
-		this.app = app;
-		this.queueSizeElement = $el("span.comfyui-queue-count", {
-			textContent: "?",
-		});
-
-		const queue = new ComfyButton({
-			content: $el("div", [
-				$el("span", {
-					textContent: "Queue",
-				}),
-				this.queueSizeElement,
-			]),
-			icon: "play",
-			classList: "comfyui-button",
-			action: this.queuePrompt,
-		});
-
-		this.queueOptions = new ComfyQueueOptions(app);
-
-		const btn = new ComfySplitButton(
-			{
-				primary: queue,
-				mode: "click",
-				position: "absolute",
-				horizontal: "right",
-			},
-			this.queueOptions.element
-		);
-		btn.element.classList.add("primary");
-		this.element.append(btn.element);
-
-		this.autoQueueMode = prop(this, "autoQueueMode", "", () => {
-			switch (this.autoQueueMode) {
-				case "instant":
-					queue.icon = "infinity";
-					break;
-				case "change":
-					queue.icon = "auto-mode";
-					break;
-				default:
-					queue.icon = "play";
-					break;
-			}
-		});
-
-		this.queueOptions.addEventListener("autoQueueMode", (e) => (this.autoQueueMode = e["detail"]));
-
-		api.addEventListener("graphChanged", () => {
-			if (this.autoQueueMode === "change") {
-				if (this.#internalQueueSize) {
-					this.graphHasChanged = true;
-				} else {
-					this.graphHasChanged = false;
-					this.queuePrompt();
-				}
-			}
-		});
-
-		api.addEventListener("status", ({ detail }) => {
-			this.#internalQueueSize = detail?.exec_info?.queue_remaining;
-			if (this.#internalQueueSize != null) {
-				this.queueSizeElement.textContent = this.#internalQueueSize > 99 ? "99+" : this.#internalQueueSize + "";
-				this.queueSizeElement.title = `${this.#internalQueueSize} prompts in queue`;
-				if (!this.#internalQueueSize && !app.lastExecutionError) {
-					if (this.autoQueueMode === "instant" || (this.autoQueueMode === "change" && this.graphHasChanged)) {
-						this.graphHasChanged = false;
-						this.queuePrompt();
-					}
-				}
-			}
-		});
-	}
-}

web/scripts/ui/menu/queueOptions.js

@@ -1,77 +1,2 @@
-// @ts-check
+// Shim for scripts\ui\menu\queueOptions.ts
-
+export const ComfyQueueOptions = window.comfyAPI.queueOptions.ComfyQueueOptions;
-import { $el } from "../../ui.js";
-import { prop } from "../../utils.js";
-
-export class ComfyQueueOptions extends EventTarget {
-	element = $el("div.comfyui-queue-options");
-
-	constructor(app) {
-		super();
-		this.app = app;
-
-		this.batchCountInput = $el("input", {
-			className: "comfyui-queue-batch-value",
-			type: "number",
-			min: "1",
-			value: "1",
-			oninput: () => (this.batchCount = +this.batchCountInput.value),
-		});
-
-		this.batchCountRange = $el("input", {
-			type: "range",
-			min: "1",
-			max: "100",
-			value: "1",
-			oninput: () => (this.batchCount = +this.batchCountRange.value),
-		});
-
-		this.element.append(
-			$el("div.comfyui-queue-batch", [
-				$el(
-					"label",
-					{
-						textContent: "Batch count: ",
-					},
-					this.batchCountInput
-				),
-				this.batchCountRange,
-			])
-		);
-
-		const createOption = (text, value, checked = false) =>
-			$el(
-				"label",
-				{ textContent: text },
-				$el("input", {
-					type: "radio",
-					name: "AutoQueueMode",
-					checked,
-					value,
-					oninput: (e) => (this.autoQueueMode = e.target["value"]),
-				})
-			);
-
-		this.autoQueueEl = $el("div.comfyui-queue-mode", [
-			$el("span", "Auto Queue:"),
-			createOption("Disabled", "", true),
-			createOption("Instant", "instant"),
-			createOption("On Change", "change"),
-		]);
-
-		this.element.append(this.autoQueueEl);
-
-		this.batchCount = prop(this, "batchCount", 1, () => {
-			this.batchCountInput.value = this.batchCount + "";
-			this.batchCountRange.value = this.batchCount + "";
-		});
-
-		this.autoQueueMode = prop(this, "autoQueueMode", "Disabled", () => {
-			this.dispatchEvent(
-				new CustomEvent("autoQueueMode", {
-					detail: this.autoQueueMode,
-				})
-			);
-		});
-	}
-}

web/scripts/ui/menu/viewHistory.js

@@ -1,27 +0,0 @@
-// @ts-check
-
-import { ComfyButton } from "../components/button.js";
-import { ComfyViewList, ComfyViewListButton } from "./viewList.js";
-
-export class ComfyViewHistoryButton extends ComfyViewListButton {
-	constructor(app) {
-		super(app, {
-			button: new ComfyButton({
-				content: "View History",
-				icon: "history",
-				tooltip: "View history",
-				classList: "comfyui-button comfyui-history-button",
-			}),
-			list: ComfyViewHistoryList,
-			mode: "History",
-		});
-	}
-}
-
-export class ComfyViewHistoryList extends ComfyViewList {
-	async loadItems() {
-		const items = await super.loadItems();
-		items["History"].reverse();
-		return items;
-	}
-}

web/scripts/ui/menu/viewList.js

@@ -1,203 +0,0 @@
-// @ts-check
-
-import { ComfyButton } from "../components/button.js";
-import { $el } from "../../ui.js";
-import { api } from "../../api.js";
-import { ComfyPopup } from "../components/popup.js";
-
-export class ComfyViewListButton {
-	get open() {
-		return this.popup.open;
-	}
-
-	set open(open) {
-		this.popup.open = open;
-	}
-
-	constructor(app, { button, list, mode }) {
-		this.app = app;
-		this.button = button;
-		this.element = $el("div.comfyui-button-wrapper", this.button.element);
-		this.popup = new ComfyPopup({
-			target: this.element,
-			container: this.element,
-			horizontal: "right",
-		});
-		this.list = new (list ?? ComfyViewList)(app, mode, this.popup);
-		this.popup.children = [this.list.element];
-		this.popup.addEventListener("open", () => {
-			this.list.update();
-		});
-		this.popup.addEventListener("close", () => {
-			this.list.close();
-		});
-		this.button.withPopup(this.popup);
-
-		api.addEventListener("status", () => {
-			if (this.popup.open) {
-				this.popup.update();
-			}
-		});
-	}
-}
-
-export class ComfyViewList {
-	popup;
-
-	constructor(app, mode, popup) {
-		this.app = app;
-		this.mode = mode;
-		this.popup = popup;
-		this.type = mode.toLowerCase();
-
-		this.items = $el(`div.comfyui-${this.type}-items.comfyui-view-list-items`);
-		this.clear = new ComfyButton({
-			icon: "cancel",
-			content: "Clear",
-			action: async () => {
-				this.showSpinner(false);
-				await api.clearItems(this.type);
-				await this.update();
-			},
-		});
-
-		this.refresh = new ComfyButton({
-			icon: "refresh",
-			content: "Refresh",
-			action: async () => {
-				await this.update(false);
-			},
-		});
-
-		this.element = $el(`div.comfyui-${this.type}-popup.comfyui-view-list-popup`, [
-			$el("h3", mode),
-			$el("header", [this.clear.element, this.refresh.element]),
-			this.items,
-		]);
-
-		api.addEventListener("status", () => {
-			if (this.popup.open) {
-				this.update();
-			}
-		});
-	}
-
-	async close() {
-		this.items.replaceChildren();
-	}
-
-	async update(resize = true) {
-		this.showSpinner(resize);
-		const res = await this.loadItems();
-		let any = false;
-
-		const names = Object.keys(res);
-		const sections = names
-			.map((section) => {
-				const items = res[section];
-				if (items?.length) {
-					any = true;
-				} else {
-					return;
-				}
-
-				const rows = [];
-				if (names.length > 1) {
-					rows.push($el("h5", section));
-				}
-				rows.push(...items.flatMap((item) => this.createRow(item, section)));
-				return $el("section", rows);
-			})
-			.filter(Boolean);
-
-		if (any) {
-			this.items.replaceChildren(...sections);
-		} else {
-			this.items.replaceChildren($el("h5", "None"));
-		}
-
-		this.popup.update();
-		this.clear.enabled = this.refresh.enabled = true;
-		this.element.style.removeProperty("height");
-	}
-
-	showSpinner(resize = true) {
-		// if (!this.spinner) {
-		// 	this.spinner = createSpinner();
-		// }
-		// if (!resize) {
-		// 	this.element.style.height = this.element.clientHeight + "px";
-		// }
-		// this.clear.enabled = this.refresh.enabled = false;
-		// this.items.replaceChildren(
-		// 	$el(
-		// 		"div",
-		// 		{
-		// 			style: {
-		// 				fontSize: "18px",
-		// 			},
-		// 		},
-		// 		this.spinner
-		// 	)
-		// );
-		// this.popup.update();
-	}
-
-	async loadItems() {
-		return await api.getItems(this.type);
-	}
-
-	getRow(item, section) {
-		return {
-			text: item.prompt[0] + "",
-			actions: [
-				{
-					text: "Load",
-					action: async () => {
-						try {
-							await this.app.loadGraphData(item.prompt[3].extra_pnginfo.workflow);
-							if (item.outputs) {
-								this.app.nodeOutputs = item.outputs;
-							}
-						} catch (error) {
-							alert("Error loading workflow: " + error.message);
-							console.error(error);
-						}
-					},
-				},
-				{
-					text: "Delete",
-					action: async () => {
-						try {
-							await api.deleteItem(this.type, item.prompt[1]);
-							this.update();
-						} catch (error) {}
-					},
-				},
-			],
-		};
-	}
-
-	createRow = (item, section) => {
-		const row = this.getRow(item, section);
-		return [
-			$el("span", row.text),
-			...row.actions.map(
-				(a) =>
-					new ComfyButton({
-						content: a.text,
-						action: async (e, btn) => {
-							btn.enabled = false;
-							try {
-								await a.action();
-							} catch (error) {
-								throw error;
-							} finally {
-								btn.enabled = true;
-							}
-						},
-					}).element
-			),
-		];
-	};
-}

web/scripts/ui/menu/viewQueue.js

@@ -1,55 +0,0 @@
-// @ts-check
-
-import { ComfyButton } from "../components/button.js";
-import { ComfyViewList, ComfyViewListButton } from "./viewList.js";
-import { api } from "../../api.js";
-
-export class ComfyViewQueueButton extends ComfyViewListButton {
-	constructor(app) {
-		super(app, {
-			button: new ComfyButton({
-				content: "View Queue",
-				icon: "format-list-numbered",
-				tooltip: "View queue",
-				classList: "comfyui-button comfyui-queue-button",
-			}),
-			list: ComfyViewQueueList,
-			mode: "Queue",
-		});
-	}
-}
-
-export class ComfyViewQueueList extends ComfyViewList {
-	getRow = (item, section) => {
-		if (section !== "Running") {
-			return super.getRow(item, section);
-		}
-		return {
-			text: item.prompt[0] + "",
-			actions: [
-				{
-					text: "Load",
-					action: async () => {
-						try {
-							await this.app.loadGraphData(item.prompt[3].extra_pnginfo.workflow);
-							if (item.outputs) {
-								this.app.nodeOutputs = item.outputs;
-							}
-						} catch (error) {
-							alert("Error loading workflow: " + error.message);
-							console.error(error);
-						}
-					},
-				},
-				{
-					text: "Cancel",
-					action: async () => {
-						try {
-							await api.interrupt();
-						} catch (error) {}
-					},
-				},
-			],
-		};
-	}
-}

web/scripts/ui/menu/workflows.js

@@ -1,770 +1,3 @@
-// @ts-check
+// Shim for scripts\ui\menu\workflows.ts
-
+export const ComfyWorkflowsMenu = window.comfyAPI.workflows.ComfyWorkflowsMenu;
-import { ComfyButton } from "../components/button.js";
+export const ComfyWorkflowsContent = window.comfyAPI.workflows.ComfyWorkflowsContent;
-import { prop, getStorageValue, setStorageValue } from "../../utils.js";
-import { $el } from "../../ui.js";
-import { api } from "../../api.js";
-import { ComfyPopup } from "../components/popup.js";
-import { createSpinner } from "../spinner.js";
-import { ComfyWorkflow, trimJsonExt } from "../../workflows.js";
-import { ComfyAsyncDialog } from "../components/asyncDialog.js";
-
-export class ComfyWorkflowsMenu {
-	#first = true;
-	element = $el("div.comfyui-workflows");
-
-	get open() {
-		return this.popup.open;
-	}
-
-	set open(open) {
-		this.popup.open = open;
-	}
-
-	/**
-	 * @param {import("../../app.js").ComfyApp} app
-	 */
-	constructor(app) {
-		this.app = app;
-		this.#bindEvents();
-
-		const classList = {
-			"comfyui-workflows-button": true,
-			"comfyui-button": true,
-			unsaved: getStorageValue("Comfy.PreviousWorkflowUnsaved") === "true",
-			running: false,
-		};
-		this.buttonProgress = $el("div.comfyui-workflows-button-progress");
-		this.workflowLabel = $el("span.comfyui-workflows-label", "");
-		this.button = new ComfyButton({
-			content: $el("div.comfyui-workflows-button-inner", [$el("i.mdi.mdi-graph"), this.workflowLabel, this.buttonProgress]),
-			icon: "chevron-down",
-			classList,
-		});
-
-		this.element.append(this.button.element);
-
-		this.popup = new ComfyPopup({ target: this.element, classList: "comfyui-workflows-popup" });
-		this.content = new ComfyWorkflowsContent(app, this.popup);
-		this.popup.children = [this.content.element];
-		this.popup.addEventListener("change", () => {
-			this.button.icon = "chevron-" + (this.popup.open ? "up" : "down");
-		});
-		this.button.withPopup(this.popup);
-
-		this.unsaved = prop(this, "unsaved", classList.unsaved, (v) => {
-			classList.unsaved = v;
-			this.button.classList = classList;
-			setStorageValue("Comfy.PreviousWorkflowUnsaved", v);
-		});
-	}
-
-	#updateProgress = () => {
-		const prompt = this.app.workflowManager.activePrompt;
-		let percent = 0;
-		if (this.app.workflowManager.activeWorkflow === prompt?.workflow) {
-			const total = Object.values(prompt.nodes);
-			const done = total.filter(Boolean);
-			percent = (done.length / total.length) * 100;
-		}
-		this.buttonProgress.style.width = percent + "%";
-	};
-
-	#updateActive = () => {
-		const active = this.app.workflowManager.activeWorkflow;
-		this.button.tooltip = active.path;
-		this.workflowLabel.textContent = active.name;
-		this.unsaved = active.unsaved;
-
-		if (this.#first) {
-			this.#first = false;
-			this.content.load();
-		}
-
-		this.#updateProgress();
-	};
-
-	#bindEvents() {
-		this.app.workflowManager.addEventListener("changeWorkflow", this.#updateActive);
-		this.app.workflowManager.addEventListener("rename", this.#updateActive);
-		this.app.workflowManager.addEventListener("delete", this.#updateActive);
-
-		this.app.workflowManager.addEventListener("save", () => {
-			this.unsaved = this.app.workflowManager.activeWorkflow.unsaved;
-		});
-
-		this.app.workflowManager.addEventListener("execute", (e) => {
-			this.#updateProgress();
-		});
-
-		api.addEventListener("graphChanged", () => {
-			this.unsaved = true;
-		});
-	}
-
-	#getMenuOptions(callback) {
-		const menu = [];
-		const directories = new Map();
-		for (const workflow of this.app.workflowManager.workflows || []) {
-			const path = workflow.pathParts;
-			if (!path) continue;
-			let parent = menu;
-			let currentPath = "";
-			for (let i = 0; i < path.length - 1; i++) {
-				currentPath += "/" + path[i];
-				let newParent = directories.get(currentPath);
-				if (!newParent) {
-					newParent = {
-						title: path[i],
-						has_submenu: true,
-						submenu: {
-							options: [],
-						},
-					};
-					parent.push(newParent);
-					newParent = newParent.submenu.options;
-					directories.set(currentPath, newParent);
-				}
-				parent = newParent;
-			}
-			parent.push({
-				title: trimJsonExt(path[path.length - 1]),
-				callback: () => callback(workflow),
-			});
-		}
-		return menu;
-	}
-
-	#getFavoriteMenuOptions(callback) {
-		const menu = [];
-		for (const workflow of this.app.workflowManager.workflows || []) {
-			if (workflow.isFavorite) {
-				menu.push({
-					title: "⭐ " + workflow.name,
-					callback: () => callback(workflow),
-				});
-			}
-		}
-		return menu;
-	}
-
-	/**
-	 * @param {import("../../app.js").ComfyApp} app
-	 */
-	registerExtension(app) {
-		const self = this;
-		app.registerExtension({
-			name: "Comfy.Workflows",
-			async beforeRegisterNodeDef(nodeType) {
-				function getImageWidget(node) {
-					const inputs = { ...node.constructor?.nodeData?.input?.required, ...node.constructor?.nodeData?.input?.optional };
-					for (const input in inputs) {
-						if (inputs[input][0] === "IMAGEUPLOAD") {
-							const imageWidget = node.widgets.find((w) => w.name === (inputs[input]?.[1]?.widget ?? "image"));
-							if (imageWidget) return imageWidget;
-						}
-					}
-				}
-
-				function setWidgetImage(node, widget, img) {
-					const url = new URL(img.src);
-					const filename = url.searchParams.get("filename");
-					const subfolder = url.searchParams.get("subfolder");
-					const type = url.searchParams.get("type");
-					const imageId = `${subfolder ? subfolder + "/" : ""}${filename} [${type}]`;
-					widget.value = imageId;
-					node.imgs = [img];
-					app.graph.setDirtyCanvas(true, true);
-				}
-
-				/**
-				 * @param {HTMLImageElement} img
-				 * @param {ComfyWorkflow} workflow
-				 */
-				async function sendToWorkflow(img, workflow) {
-					const openWorkflow = app.workflowManager.openWorkflows.find((w) => w.path === workflow.path);
-					if (openWorkflow) {
-						workflow = openWorkflow;
-					}
-
-					await workflow.load();
-					let options = [];
-					const nodes = app.graph.computeExecutionOrder(false);
-					for (const node of nodes) {
-						const widget = getImageWidget(node);
-						if (widget == null) continue;
-
-						if (node.title?.toLowerCase().includes("input")) {
-							options = [{ widget, node }];
-							break;
-						} else {
-							options.push({ widget, node });
-						}
-					}
-
-					if (!options.length) {
-						alert("No image nodes have been found in this workflow!");
-						return;
-					} else if (options.length > 1) {
-						const dialog = new WidgetSelectionDialog(options);
-						const res = await dialog.show(app);
-						if (!res) return;
-						options = [res];
-					}
-
-					setWidgetImage(options[0].node, options[0].widget, img);
-				}
-
-				const getExtraMenuOptions = nodeType.prototype["getExtraMenuOptions"];
-				nodeType.prototype["getExtraMenuOptions"] = function (_, options) {
-					const r = getExtraMenuOptions?.apply?.(this, arguments);
-
-					const setting = app.ui.settings.getSettingValue("Comfy.UseNewMenu", false);
-					if (setting && setting != "Disabled") {
-						const t = /** @type { {imageIndex?: number, overIndex?: number, imgs: string[]} } */ /** @type {any} */ (this);
-						let img;
-						if (t.imageIndex != null) {
-							// An image is selected so select that
-							img = t.imgs?.[t.imageIndex];
-						} else if (t.overIndex != null) {
-							// No image is selected but one is hovered
-							img = t.img?.s[t.overIndex];
-						}
-
-						if (img) {
-							let pos = options.findIndex((o) => o.content === "Save Image");
-							if (pos === -1) {
-								pos = 0;
-							} else {
-								pos++;
-							}
-
-							options.splice(pos, 0, {
-								content: "Send to workflow",
-								has_submenu: true,
-								submenu: {
-									options: [
-										{
-											callback: () => sendToWorkflow(img, app.workflowManager.activeWorkflow),
-											title: "[Current workflow]",
-										},
-										...self.#getFavoriteMenuOptions(sendToWorkflow.bind(null, img)),
-										null,
-										...self.#getMenuOptions(sendToWorkflow.bind(null, img)),
-									],
-								},
-							});
-						}
-					}
-
-					return r;
-				};
-			},
-		});
-	}
-}
-
-export class ComfyWorkflowsContent {
-	element = $el("div.comfyui-workflows-panel");
-	treeState = {};
-	treeFiles = {};
-	/** @type { Map<ComfyWorkflow, WorkflowElement> } */
-	openFiles = new Map();
-	/** @type {WorkflowElement} */
-	activeElement = null;
-
-	/**
-	 * @param {import("../../app.js").ComfyApp} app
-	 * @param {ComfyPopup} popup
-	 */
-	constructor(app, popup) {
-		this.app = app;
-		this.popup = popup;
-		this.actions = $el("div.comfyui-workflows-actions", [
-			new ComfyButton({
-				content: "Default",
-				icon: "file-code",
-				iconSize: 18,
-				classList: "comfyui-button primary",
-				tooltip: "Load default workflow",
-				action: () => {
-					popup.open = false;
-					app.loadGraphData();
-					app.resetView();
-				},
-			}).element,
-			new ComfyButton({
-				content: "Browse",
-				icon: "folder",
-				iconSize: 18,
-				tooltip: "Browse for an image or exported workflow",
-				action: () => {
-					popup.open = false;
-					app.ui.loadFile();
-				},
-			}).element,
-			new ComfyButton({
-				content: "Blank",
-				icon: "plus-thick",
-				iconSize: 18,
-				tooltip: "Create a new blank workflow",
-				action: () => {
-					app.workflowManager.setWorkflow(null);
-					app.clean();
-					app.graph.clear();
-					app.workflowManager.activeWorkflow.track();
-					popup.open = false;
-				},
-			}).element,
-		]);
-
-		this.spinner = createSpinner();
-		this.element.replaceChildren(this.actions, this.spinner);
-
-		this.popup.addEventListener("open", () => this.load());
-		this.popup.addEventListener("close", () => this.element.replaceChildren(this.actions, this.spinner));
-
-		this.app.workflowManager.addEventListener("favorite", (e) => {
-			const workflow = e["detail"];
-			const button = this.treeFiles[workflow.path]?.primary;
-			if (!button) return; // Can happen when a workflow is renamed
-			button.icon = this.#getFavoriteIcon(workflow);
-			button.overIcon = this.#getFavoriteOverIcon(workflow);
-			this.updateFavorites();
-		});
-
-		for (const e of ["save", "open", "close", "changeWorkflow"]) {
-			// TODO: dont be lazy and just update the specific element
-			app.workflowManager.addEventListener(e, () => this.updateOpen());
-		}
-		this.app.workflowManager.addEventListener("rename", () => this.load());
-		this.app.workflowManager.addEventListener("execute", (e) => this.#updateActive());
-	}
-
-	async load() {
-		await this.app.workflowManager.loadWorkflows();
-		this.updateTree();
-		this.updateFavorites();
-		this.updateOpen();
-		this.element.replaceChildren(this.actions, this.openElement, this.favoritesElement, this.treeElement);
-	}
-
-	updateOpen() {
-		const current = this.openElement;
-		this.openFiles.clear();
-
-		this.openElement = $el("div.comfyui-workflows-open", [
-			$el("h3", "Open"),
-			...this.app.workflowManager.openWorkflows.map((w) => {
-				const wrapper = new WorkflowElement(this, w, {
-					primary: { element: $el("i.mdi.mdi-18px.mdi-progress-pencil") },
-					buttons: [
-						this.#getRenameButton(w),
-						new ComfyButton({
-							icon: "close",
-							iconSize: 18,
-							classList: "comfyui-button comfyui-workflows-file-action",
-							tooltip: "Close workflow",
-							action: (e) => {
-								e.stopImmediatePropagation();
-								this.app.workflowManager.closeWorkflow(w);
-							},
-						}),
-					],
-				});
-				if (w.unsaved) {
-					wrapper.element.classList.add("unsaved");
-				}
-				if(w === this.app.workflowManager.activeWorkflow) {
-					wrapper.element.classList.add("active");
-				}
-
-				this.openFiles.set(w, wrapper);
-				return wrapper.element;
-			}),
-		]);
-
-		this.#updateActive();
-		current?.replaceWith(this.openElement);
-	}
-
-	updateFavorites() {
-		const current = this.favoritesElement;
-		const favorites = [...this.app.workflowManager.workflows.filter((w) => w.isFavorite)];
-
-		this.favoritesElement = $el("div.comfyui-workflows-favorites", [
-			$el("h3", "Favorites"),
-			...favorites
-				.map((w) => {
-					return this.#getWorkflowElement(w).element;
-				})
-				.filter(Boolean),
-		]);
-
-		current?.replaceWith(this.favoritesElement);
-	}
-
-	filterTree() {
-		if (!this.filterText) {
-			this.treeRoot.classList.remove("filtered");
-			// Unfilter whole tree
-			for (const item of Object.values(this.treeFiles)) {
-				item.element.parentElement.style.removeProperty("display");
-				this.showTreeParents(item.element.parentElement);
-			}
-			return;
-		}
-		this.treeRoot.classList.add("filtered");
-		const searchTerms = this.filterText.toLocaleLowerCase().split(" ");
-		for (const item of Object.values(this.treeFiles)) {
-			const parts = item.workflow.pathParts;
-			let termIndex = 0;
-			let valid = false;
-			for (const part of parts) {
-				let currentIndex = 0;
-				do {
-					currentIndex = part.indexOf(searchTerms[termIndex], currentIndex);
-					if (currentIndex > -1) currentIndex += searchTerms[termIndex].length;
-				} while (currentIndex !== -1 && ++termIndex < searchTerms.length);
-
-				if (termIndex >= searchTerms.length) {
-					valid = true;
-					break;
-				}
-			}
-			if (valid) {
-				item.element.parentElement.style.removeProperty("display");
-				this.showTreeParents(item.element.parentElement);
-			} else {
-				item.element.parentElement.style.display = "none";
-				this.hideTreeParents(item.element.parentElement);
-			}
-		}
-	}
-
-	hideTreeParents(element) {
-		// Hide all parents if no children are visible
-		if (element.parentElement?.classList.contains("comfyui-workflows-tree") === false) {
-			for (let i = 1; i < element.parentElement.children.length; i++) {
-				const c = element.parentElement.children[i];
-				if (c.style.display !== "none") {
-					return;
-				}
-			}
-			element.parentElement.style.display = "none";
-			this.hideTreeParents(element.parentElement);
-		}
-	}
-
-	showTreeParents(element) {
-		if (element.parentElement?.classList.contains("comfyui-workflows-tree") === false) {
-			element.parentElement.style.removeProperty("display");
-			this.showTreeParents(element.parentElement);
-		}
-	}
-
-	updateTree() {
-		const current = this.treeElement;
-		const nodes = {};
-		let typingTimeout;
-
-		this.treeFiles = {};
-		this.treeRoot = $el("ul.comfyui-workflows-tree");
-		this.treeElement = $el("section", [
-			$el("header", [
-				$el("h3", "Browse"),
-				$el("div.comfy-ui-workflows-search", [
-					$el("i.mdi.mdi-18px.mdi-magnify"),
-					$el("input", {
-						placeholder: "Search",
-						value: this.filterText ?? "",
-						oninput: (e) => {
-							this.filterText = e.target["value"]?.trim();
-							clearTimeout(typingTimeout);
-							typingTimeout = setTimeout(() => this.filterTree(), 250);
-						},
-					}),
-				]),
-			]),
-			this.treeRoot,
-		]);
-
-		for (const workflow of this.app.workflowManager.workflows) {
-			if (!workflow.pathParts) continue;
-
-			let currentPath = "";
-			let currentRoot = this.treeRoot;
-
-			for (let i = 0; i < workflow.pathParts.length; i++) {
-				currentPath += (currentPath ? "\\" : "") + workflow.pathParts[i];
-				const parentNode = nodes[currentPath] ?? this.#createNode(currentPath, workflow, i, currentRoot);
-
-				nodes[currentPath] = parentNode;
-				currentRoot = parentNode;
-			}
-		}
-
-		current?.replaceWith(this.treeElement);
-		this.filterTree();
-	}
-
-	#expandNode(el, workflow, thisPath, i) {
-		const expanded = !el.classList.toggle("closed");
-		if (expanded) {
-			let c = "";
-			for (let j = 0; j <= i; j++) {
-				c += (c ? "\\" : "") + workflow.pathParts[j];
-				this.treeState[c] = true;
-			}
-		} else {
-			let c = thisPath;
-			for (let j = i + 1; j < workflow.pathParts.length; j++) {
-				c += (c ? "\\" : "") + workflow.pathParts[j];
-				delete this.treeState[c];
-			}
-			delete this.treeState[thisPath];
-		}
-	}
-
-	#updateActive() {
-		this.#removeActive();
-
-		const active = this.app.workflowManager.activePrompt;
-		if (!active?.workflow) return;
-
-		const open = this.openFiles.get(active.workflow);
-		if (!open) return;
-
-		this.activeElement = open;
-
-		const total = Object.values(active.nodes);
-		const done = total.filter(Boolean);
-		const percent = done.length / total.length;
-		open.element.classList.add("running");
-		open.element.style.setProperty("--progress", percent * 100 + "%");
-		open.primary.element.classList.remove("mdi-progress-pencil");
-		open.primary.element.classList.add("mdi-play");
-	}
-
-	#removeActive() {
-		if (!this.activeElement) return;
-		this.activeElement.element.classList.remove("running");
-		this.activeElement.element.style.removeProperty("--progress");
-		this.activeElement.primary.element.classList.add("mdi-progress-pencil");
-		this.activeElement.primary.element.classList.remove("mdi-play");
-	}
-
-	/** @param {ComfyWorkflow} workflow */
-	#getFavoriteIcon(workflow) {
-		return workflow.isFavorite ? "star" : "file-outline";
-	}
-
-	/** @param {ComfyWorkflow} workflow */
-	#getFavoriteOverIcon(workflow) {
-		return workflow.isFavorite ? "star-off" : "star-outline";
-	}
-
-	/** @param {ComfyWorkflow} workflow */
-	#getFavoriteTooltip(workflow) {
-		return workflow.isFavorite ? "Remove this workflow from your favorites" : "Add this workflow to your favorites";
-	}
-
-	/** @param {ComfyWorkflow} workflow */
-	#getFavoriteButton(workflow, primary) {
-		return new ComfyButton({
-			icon: this.#getFavoriteIcon(workflow),
-			overIcon: this.#getFavoriteOverIcon(workflow),
-			iconSize: 18,
-			classList: "comfyui-button comfyui-workflows-file-action-favorite" + (primary ? " comfyui-workflows-file-action-primary" : ""),
-			tooltip: this.#getFavoriteTooltip(workflow),
-			action: (e) => {
-				e.stopImmediatePropagation();
-				workflow.favorite(!workflow.isFavorite);
-			},
-		});
-	}
-
-	/** @param {ComfyWorkflow} workflow */
-	#getDeleteButton(workflow) {
-		const deleteButton = new ComfyButton({
-			icon: "delete",
-			tooltip: "Delete this workflow",
-			classList: "comfyui-button comfyui-workflows-file-action",
-			iconSize: 18,
-			action: async (e, btn) => {
-				e.stopImmediatePropagation();
-
-				if (btn.icon === "delete-empty") {
-					btn.enabled = false;
-					await workflow.delete();
-					await this.load();
-				} else {
-					btn.icon = "delete-empty";
-					btn.element.style.background = "red";
-				}
-			},
-		});
-		deleteButton.element.addEventListener("mouseleave", () => {
-			deleteButton.icon = "delete";
-			deleteButton.element.style.removeProperty("background");
-		});
-		return deleteButton;
-	}
-
-	/** @param {ComfyWorkflow} workflow */
-	#getInsertButton(workflow) {
-		return new ComfyButton({
-			icon: "file-move-outline",
-			iconSize: 18,
-			tooltip: "Insert this workflow into the current workflow",
-			classList: "comfyui-button comfyui-workflows-file-action",
-			action: (e) => {
-				if (!this.app.shiftDown) {
-					this.popup.open = false;
-				}
-				e.stopImmediatePropagation();
-				if (!this.app.shiftDown) {
-					this.popup.open = false;
-				}
-				workflow.insert();
-			},
-		});
-	}
-
-	/** @param {ComfyWorkflow} workflow */
-	#getRenameButton(workflow) {
-		return new ComfyButton({
-			icon: "pencil",
-			tooltip: workflow.path ? "Rename this workflow" : "This workflow can't be renamed as it hasn't been saved.",
-			classList: "comfyui-button comfyui-workflows-file-action",
-			iconSize: 18,
-			enabled: !!workflow.path,
-			action: async (e) => {
-				e.stopImmediatePropagation();
-				const newName = prompt("Enter new name", workflow.path);
-				if (newName) {
-					await workflow.rename(newName);
-				}
-			},
-		});
-	}
-
-	/** @param {ComfyWorkflow} workflow */
-	#getWorkflowElement(workflow) {
-		return new WorkflowElement(this, workflow, {
-			primary: this.#getFavoriteButton(workflow, true),
-			buttons: [this.#getInsertButton(workflow), this.#getRenameButton(workflow), this.#getDeleteButton(workflow)],
-		});
-	}
-
-	/** @param {ComfyWorkflow} workflow */
-	#createLeafNode(workflow) {
-		const fileNode = this.#getWorkflowElement(workflow);
-		this.treeFiles[workflow.path] = fileNode;
-		return fileNode;
-	}
-
-	#createNode(currentPath, workflow, i, currentRoot) {
-		const part = workflow.pathParts[i];
-
-		const parentNode = $el("ul" + (this.treeState[currentPath] ? "" : ".closed"), {
-			$: (el) => {
-				el.onclick = (e) => {
-					this.#expandNode(el, workflow, currentPath, i);
-					e.stopImmediatePropagation();
-				};
-			},
-		});
-		currentRoot.append(parentNode);
-
-		// Create a node for the current part and an inner UL for its children if it isnt a leaf node
-		const leaf = i === workflow.pathParts.length - 1;
-		let nodeElement;
-		if (leaf) {
-			nodeElement = this.#createLeafNode(workflow).element;
-		} else {
-			nodeElement = $el("li", [$el("i.mdi.mdi-18px.mdi-folder"), $el("span", part)]);
-		}
-		parentNode.append(nodeElement);
-		return parentNode;
-	}
-}
-
-class WorkflowElement {
-	/**
-	 * @param { ComfyWorkflowsContent } parent
-	 * @param { ComfyWorkflow } workflow
-	 */
-	constructor(parent, workflow, { tagName = "li", primary, buttons }) {
-		this.parent = parent;
-		this.workflow = workflow;
-		this.primary = primary;
-		this.buttons = buttons;
-
-		this.element = $el(
-			tagName + ".comfyui-workflows-tree-file",
-			{
-				onclick: () => {
-					workflow.load();
-					this.parent.popup.open = false;
-				},
-				title: this.workflow.path,
-			},
-			[this.primary?.element, $el("span", workflow.name), ...buttons.map((b) => b.element)]
-		);
-	}
-}
-
-class WidgetSelectionDialog extends ComfyAsyncDialog {
-	#options;
-
-	/**
-	 * @param {Array<{widget: {name: string}, node: {pos: [number, number], title: string, id: string, type: string}}>} options
-	 */
-	constructor(options) {
-		super();
-		this.#options = options;
-	}
-
-	show(app) {
-		this.element.classList.add("comfy-widget-selection-dialog");
-		return super.show(
-			$el("div", [
-				$el("h2", "Select image target"),
-				$el(
-					"p",
-					"This workflow has multiple image loader nodes, you can rename a node to include 'input' in the title for it to be automatically selected, or select one below."
-				),
-				$el(
-					"section",
-					this.#options.map((opt) => {
-						return $el("div.comfy-widget-selection-item", [
-							$el("span", { dataset: { id: opt.node.id } }, `${opt.node.title ?? opt.node.type} ${opt.widget.name}`),
-							$el(
-								"button.comfyui-button",
-								{
-									onclick: () => {
-										app.canvas.ds.offset[0] = -opt.node.pos[0] + 50;
-										app.canvas.ds.offset[1] = -opt.node.pos[1] + 50;
-										app.canvas.selectNode(opt.node);
-										app.graph.setDirtyCanvas(true, true);
-									},
-								},
-								"Show"
-							),
-							$el(
-								"button.comfyui-button.primary",
-								{
-									onclick: () => {
-										this.close(opt);
-									},
-								},
-								"Select"
-							),
-						]);
-					})
-				),
-			])
-		);
-	}
-}

web/scripts/ui/settings.js

@@ -1,333 +1,2 @@
-import { $el } from "../ui.js";
+// Shim for scripts\ui\settings.ts
-import { api } from "../api.js";
+export const ComfySettingsDialog = window.comfyAPI.settings.ComfySettingsDialog;
-import { ComfyDialog } from "./dialog.js";
-
-export class ComfySettingsDialog extends ComfyDialog {
-	constructor(app) {
-		super();
-		this.app = app;
-		this.settingsValues = {};
-		this.settingsLookup = {};
-		this.element = $el(
-			"dialog",
-			{
-				id: "comfy-settings-dialog",
-				parent: document.body,
-			},
-			[
-				$el("table.comfy-modal-content.comfy-table", [
-					$el(
-						"caption",
-						{ textContent: "Settings" },
-						$el("button.comfy-btn", {
-							type: "button",
-							textContent: "\u00d7",
-							onclick: () => {
-								this.element.close();
-							},
-						})
-					),
-					$el("tbody", { $: (tbody) => (this.textElement = tbody) }),
-					$el("button", {
-						type: "button",
-						textContent: "Close",
-						style: {
-							cursor: "pointer",
-						},
-						onclick: () => {
-							this.element.close();
-						},
-					}),
-				]),
-			]
-		);
-	}
-
-	get settings() {
-		return Object.values(this.settingsLookup);
-	}
-
-	#dispatchChange(id, value, oldValue) {
-		this.dispatchEvent(
-			new CustomEvent(id + ".change", {
-				detail: {
-					value,
-					oldValue
-				},
-			})
-		);
-	}
-
-	async load() {
-		if (this.app.storageLocation === "browser") {
-			this.settingsValues = localStorage;
-		} else {
-			this.settingsValues = await api.getSettings();
-		}
-
-		// Trigger onChange for any settings added before load
-		for (const id in this.settingsLookup) {
-			const value = this.settingsValues[this.getId(id)];
-			this.settingsLookup[id].onChange?.(value);
-			this.#dispatchChange(id, value);
-		}
-	}
-
-	getId(id) {
-		if (this.app.storageLocation === "browser") {
-			id = "Comfy.Settings." + id;
-		}
-		return id;
-	}
-
-	getSettingValue(id, defaultValue) {
-		let value = this.settingsValues[this.getId(id)];
-		if(value != null) {
-			if(this.app.storageLocation === "browser") {
-				try {
-					value = JSON.parse(value);
-				} catch (error) {
-				}
-			}
-		}
-		return value ?? defaultValue;
-	}
-
-	async setSettingValueAsync(id, value) {
-		const json = JSON.stringify(value);
-		localStorage["Comfy.Settings." + id] = json; // backwards compatibility for extensions keep setting in storage
-
-		let oldValue = this.getSettingValue(id, undefined);
-		this.settingsValues[this.getId(id)] = value;
-
-		if (id in this.settingsLookup) {
-			this.settingsLookup[id].onChange?.(value, oldValue);
-		}
-		this.#dispatchChange(id, value, oldValue);
-
-		await api.storeSetting(id, value);
-	}
-
-	setSettingValue(id, value) {
-		this.setSettingValueAsync(id, value).catch((err) => {
-			alert(`Error saving setting '${id}'`);
-			console.error(err);
-		});
-	}
-
-	addSetting({ id, name, type, defaultValue, onChange, attrs = {}, tooltip = "", options = undefined }) {
-		if (!id) {
-			throw new Error("Settings must have an ID");
-		}
-
-		if (id in this.settingsLookup) {
-			throw new Error(`Setting ${id} of type ${type} must have a unique ID.`);
-		}
-
-		let skipOnChange = false;
-		let value = this.getSettingValue(id);
-		if (value == null) {
-			if (this.app.isNewUserSession) {
-				// Check if we have a localStorage value but not a setting value and we are a new user
-				const localValue = localStorage["Comfy.Settings." + id];
-				if (localValue) {
-					value = JSON.parse(localValue);
-					this.setSettingValue(id, value); // Store on the server
-				}
-			}
-			if (value == null) {
-				value = defaultValue;
-			}
-		}
-
-		// Trigger initial setting of value
-		if (!skipOnChange) {
-			onChange?.(value, undefined);
-		}
-
-		this.settingsLookup[id] = {
-			id,
-			onChange,
-			name,
-			render: () => {
-				if (type === "hidden") return;
-
-				const setter = (v) => {
-					if (onChange) {
-						onChange(v, value);
-					}
-
-					this.setSettingValue(id, v);
-					value = v;
-				};
-				value = this.getSettingValue(id, defaultValue);
-
-				let element;
-				const htmlID = id.replaceAll(".", "-");
-
-				const labelCell = $el("td", [
-					$el("label", {
-						for: htmlID,
-						classList: [tooltip !== "" ? "comfy-tooltip-indicator" : ""],
-						textContent: name,
-					}),
-				]);
-
-				if (typeof type === "function") {
-					element = type(name, setter, value, attrs);
-				} else {
-					switch (type) {
-						case "boolean":
-							element = $el("tr", [
-								labelCell,
-								$el("td", [
-									$el("input", {
-										id: htmlID,
-										type: "checkbox",
-										checked: value,
-										onchange: (event) => {
-											const isChecked = event.target.checked;
-											if (onChange !== undefined) {
-												onChange(isChecked);
-											}
-											this.setSettingValue(id, isChecked);
-										},
-									}),
-								]),
-							]);
-							break;
-						case "number":
-							element = $el("tr", [
-								labelCell,
-								$el("td", [
-									$el("input", {
-										type,
-										value,
-										id: htmlID,
-										oninput: (e) => {
-											setter(e.target.value);
-										},
-										...attrs,
-									}),
-								]),
-							]);
-							break;
-						case "slider":
-							element = $el("tr", [
-								labelCell,
-								$el("td", [
-									$el(
-										"div",
-										{
-											style: {
-												display: "grid",
-												gridAutoFlow: "column",
-											},
-										},
-										[
-											$el("input", {
-												...attrs,
-												value,
-												type: "range",
-												oninput: (e) => {
-													setter(e.target.value);
-													e.target.nextElementSibling.value = e.target.value;
-												},
-											}),
-											$el("input", {
-												...attrs,
-												value,
-												id: htmlID,
-												type: "number",
-												style: { maxWidth: "4rem" },
-												oninput: (e) => {
-													setter(e.target.value);
-													e.target.previousElementSibling.value = e.target.value;
-												},
-											}),
-										]
-									),
-								]),
-							]);
-							break;
-						case "combo":
-							element = $el("tr", [
-								labelCell,
-								$el("td", [
-									$el(
-										"select",
-										{
-											oninput: (e) => {
-												setter(e.target.value);
-											},
-										},
-										(typeof options === "function" ? options(value) : options || []).map((opt) => {
-											if (typeof opt === "string") {
-												opt = { text: opt };
-											}
-											const v = opt.value ?? opt.text;
-											return $el("option", {
-												value: v,
-												textContent: opt.text,
-												selected: value + "" === v + "",
-											});
-										})
-									),
-								]),
-							]);
-							break;
-						case "text":
-						default:
-							if (type !== "text") {
-								console.warn(`Unsupported setting type '${type}, defaulting to text`);
-							}
-
-							element = $el("tr", [
-								labelCell,
-								$el("td", [
-									$el("input", {
-										value,
-										id: htmlID,
-										oninput: (e) => {
-											setter(e.target.value);
-										},
-										...attrs,
-									}),
-								]),
-							]);
-							break;
-					}
-				}
-				if (tooltip) {
-					element.title = tooltip;
-				}
-
-				return element;
-			},
-		};
-
-		const self = this;
-		return {
-			get value() {
-				return self.getSettingValue(id, defaultValue);
-			},
-			set value(v) {
-				self.setSettingValue(id, v);
-			},
-		};
-	}
-
-	show() {
-		this.textElement.replaceChildren(
-			$el(
-				"tr",
-				{
-					style: { display: "none" },
-				},
-				[$el("th"), $el("th", { style: { width: "33%" } })]
-			),
-			...this.settings.sort((a, b) => a.name.localeCompare(b.name)).map((s) => s.render()).filter(Boolean)
-		);
-		this.element.showModal();
-	}
-}

web/scripts/ui/spinner.css

@@ -1,34 +0,0 @@
-.lds-ring {
-	display: inline-block;
-	position: relative;
-	width: 1em;
-	height: 1em;
-}
-.lds-ring div {
-	box-sizing: border-box;
-	display: block;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	border: 0.15em solid #fff;
-	border-radius: 50%;
-	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-	border-color: #fff transparent transparent transparent;
-}
-.lds-ring div:nth-child(1) {
-	animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-	animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-	animation-delay: -0.15s;
-}
-@keyframes lds-ring {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}

web/scripts/ui/spinner.js

@@ -1,9 +1,2 @@
-import { addStylesheet } from "../utils.js";
+// Shim for scripts\ui\spinner.ts
-
+export const createSpinner = window.comfyAPI.spinner.createSpinner;
-addStylesheet(import.meta.url);
-
-export function createSpinner() {
-	const div = document.createElement("div");
-	div.innerHTML = `<div class="lds-ring"><div></div><div></div><div></div><div></div></div>`;
-	return div.firstElementChild;
-}

web/scripts/ui/toggleSwitch.js

@@ -1,60 +1,2 @@
-import { $el } from "../ui.js";
+// Shim for scripts\ui\toggleSwitch.ts
-
+export const toggleSwitch = window.comfyAPI.toggleSwitch.toggleSwitch;
-/**
- * @typedef { { text: string, value?: string, tooltip?: string } } ToggleSwitchItem
- */
-/**
- * Creates a toggle switch element
- * @param { string } name
- * @param { Array<string | ToggleSwitchItem } items
- * @param { Object } [opts]
- * @param { (e: { item: ToggleSwitchItem, prev?: ToggleSwitchItem }) => void } [opts.onChange]
- */
-export function toggleSwitch(name, items, { onChange } = {}) {
-	let selectedIndex;
-	let elements;
-	
-	function updateSelected(index) {
-		if (selectedIndex != null) {
-			elements[selectedIndex].classList.remove("comfy-toggle-selected");
-		}
-		onChange?.({ item: items[index], prev: selectedIndex == null ? undefined : items[selectedIndex] });
-		selectedIndex = index;
-		elements[selectedIndex].classList.add("comfy-toggle-selected");
-	}
-
-	elements = items.map((item, i) => {
-		if (typeof item === "string") item = { text: item };
-		if (!item.value) item.value = item.text;
-
-		const toggle = $el(
-			"label",
-			{
-				textContent: item.text,
-				title: item.tooltip ?? "",
-			},
-			$el("input", {
-				name,
-				type: "radio",
-				value: item.value ?? item.text,
-				checked: item.selected,
-				onchange: () => {
-					updateSelected(i);
-				},
-			})
-		);
-		if (item.selected) {
-			updateSelected(i);
-		}
-		return toggle;
-	});
-
-	const container = $el("div.comfy-toggle-switch", elements);
-
-	if (selectedIndex == null) {
-		elements[0].children[0].checked = true;
-		updateSelected(0);
-	}
-
-	return container;
-}

web/scripts/ui/userSelection.js

@@ -1,114 +1,2 @@
-import { api } from "../api.js";
+// Shim for scripts\ui\userSelection.ts
-import { $el } from "../ui.js";
+export const UserSelectionScreen = window.comfyAPI.userSelection.UserSelectionScreen;
-import { addStylesheet } from "../utils.js";
-import { createSpinner } from "./spinner.js";
-
-export class UserSelectionScreen {
-	async show(users, user) {
-		// This will rarely be hit so move the loading to on demand
-		await addStylesheet(import.meta.url);
-		const userSelection = document.getElementById("comfy-user-selection");
-		userSelection.style.display = "";
-		return new Promise((resolve) => {
-			const input = userSelection.getElementsByTagName("input")[0];
-			const select = userSelection.getElementsByTagName("select")[0];
-			const inputSection = input.closest("section");
-			const selectSection = select.closest("section");
-			const form = userSelection.getElementsByTagName("form")[0];
-			const error = userSelection.getElementsByClassName("comfy-user-error")[0];
-			const button = userSelection.getElementsByClassName("comfy-user-button-next")[0];
-
-			let inputActive = null;
-			input.addEventListener("focus", () => {
-				inputSection.classList.add("selected");
-				selectSection.classList.remove("selected");
-				inputActive = true;
-			});
-			select.addEventListener("focus", () => {
-				inputSection.classList.remove("selected");
-				selectSection.classList.add("selected");
-				inputActive = false;
-				select.style.color = "";
-			});
-			select.addEventListener("blur", () => {
-				if (!select.value) {
-					select.style.color = "var(--descrip-text)";
-				}
-			});
-
-			form.addEventListener("submit", async (e) => {
-				e.preventDefault();
-				if (inputActive == null) {
-					error.textContent = "Please enter a username or select an existing user.";
-				} else if (inputActive) {
-					const username = input.value.trim();
-					if (!username) {
-						error.textContent = "Please enter a username.";
-						return;
-					}
-
-					// Create new user
-					input.disabled = select.disabled = input.readonly = select.readonly = true;
-					const spinner = createSpinner();
-					button.prepend(spinner);
-					try {
-						const resp = await api.createUser(username);
-						if (resp.status >= 300) {
-							let message = "Error creating user: " + resp.status + " " + resp.statusText;
-							try {
-								const res = await resp.json();								
-								if(res.error) {
-									message = res.error;
-								}
-							} catch (error) {
-							}
-							throw new Error(message);
-						}
-
-						resolve({ username, userId: await resp.json(), created: true });
-					} catch (err) {
-						spinner.remove();
-						error.textContent = err.message ?? err.statusText ?? err ?? "An unknown error occurred.";
-						input.disabled = select.disabled = input.readonly = select.readonly = false;
-						return;
-					}
-				} else if (!select.value) {
-					error.textContent = "Please select an existing user.";
-					return;
-				} else {
-					resolve({ username: users[select.value], userId: select.value, created: false });
-				}
-			});
-
-			if (user) {
-				const name = localStorage["Comfy.userName"];
-				if (name) {
-					input.value = name;
-				}
-			}
-			if (input.value) {
-				// Focus the input, do this separately as sometimes browsers like to fill in the value
-				input.focus();
-			}
-
-			const userIds = Object.keys(users ?? {});
-			if (userIds.length) {
-				for (const u of userIds) {
-					$el("option", { textContent: users[u], value: u, parent: select });
-				}
-				select.style.color = "var(--descrip-text)";
-
-				if (select.value) {
-					// Focus the select, do this separately as sometimes browsers like to fill in the value
-					select.focus();
-				}
-			} else {
-				userSelection.classList.add("no-users");
-				input.focus();
-			}
-		}).then((r) => {
-			userSelection.remove();
-			return r;
-		});
-	}
-}

web/scripts/ui/utils.js

@@ -1,56 +1,3 @@
-/**
+// Shim for scripts\ui\utils.ts
- * @typedef {  string | string[] | Record<string, boolean> } ClassList
+export const applyClasses = window.comfyAPI.utils.applyClasses;
- */
+export const toggleElement = window.comfyAPI.utils.toggleElement;
-
-/**
- * @param { HTMLElement } element
- * @param { ClassList } classList
- * @param { string[] } requiredClasses
- */
-export function applyClasses(element, classList, ...requiredClasses) {
-	classList ??= "";
-
-	let str;
-	if (typeof classList === "string") {
-		str = classList;
-	} else if (classList instanceof Array) {
-		str = classList.join(" ");
-	} else {
-		str = Object.entries(classList).reduce((p, c) => {
-			if (c[1]) {
-				p += (p.length ? " " : "") + c[0];
-			}
-			return p;
-		}, "");
-	}
-	element.className = str;
-	if (requiredClasses) {
-		element.classList.add(...requiredClasses);
-	}
-}
-
-/**
- * @param { HTMLElement } element
- * @param { { onHide?: (el: HTMLElement) => void, onShow?: (el: HTMLElement, value) => void } } [param1]
- * @returns
- */
-export function toggleElement(element, { onHide, onShow } = {}) {
-	let placeholder;
-	let hidden;
-	return (value) => {
-		if (value) {
-			if (hidden) {
-				hidden = false;
-				placeholder.replaceWith(element);
-			}
-			onShow?.(element, value);
-		} else {
-			if (!placeholder) {
-				placeholder = document.createComment("");
-			}
-			hidden = true;
-			element.replaceWith(placeholder);
-			onHide?.(element);
-		}
-	};
-}

web/scripts/utils.js

@@ -1,156 +1,8 @@
-import { $el } from "./ui.js";
+// Shim for scripts\utils.ts
-import { api } from "./api.js";
+export const clone = window.comfyAPI.utils.clone;
-
+export const applyTextReplacements = window.comfyAPI.utils.applyTextReplacements;
-// Simple date formatter
+export const addStylesheet = window.comfyAPI.utils.addStylesheet;
-const parts = {
+export const downloadBlob = window.comfyAPI.utils.downloadBlob;
-	d: (d) => d.getDate(),
+export const prop = window.comfyAPI.utils.prop;
-	M: (d) => d.getMonth() + 1,
+export const getStorageValue = window.comfyAPI.utils.getStorageValue;
-	h: (d) => d.getHours(),
+export const setStorageValue = window.comfyAPI.utils.setStorageValue;
-	m: (d) => d.getMinutes(),
-	s: (d) => d.getSeconds(),
-};
-const format =
-	Object.keys(parts)
-		.map((k) => k + k + "?")
-		.join("|") + "|yyy?y?";
-
-function formatDate(text, date) {
-	return text.replace(new RegExp(format, "g"), function (text) {
-		if (text === "yy") return (date.getFullYear() + "").substring(2);
-		if (text === "yyyy") return date.getFullYear();
-		if (text[0] in parts) {
-			const p = parts[text[0]](date);
-			return (p + "").padStart(text.length, "0");
-		}
-		return text;
-	});
-}
-
-
-export function clone(obj) {
-	try {
-		if (typeof structuredClone !== "undefined") {
-			return structuredClone(obj);
-		}
-	} catch (error) {
-		// structuredClone is stricter than using JSON.parse/stringify so fallback to that
-	}
-
-	return JSON.parse(JSON.stringify(obj));
-}
-
-export function applyTextReplacements(app, value) {
-	return value.replace(/%([^%]+)%/g, function (match, text) {
-		const split = text.split(".");
-		if (split.length !== 2) {
-			// Special handling for dates
-			if (split[0].startsWith("date:")) {
-				return formatDate(split[0].substring(5), new Date());
-			}
-
-			if (text !== "width" && text !== "height") {
-				// Dont warn on standard replacements
-				console.warn("Invalid replacement pattern", text);
-			}
-			return match;
-		}
-
-		// Find node with matching S&R property name
-		let nodes = app.graph._nodes.filter((n) => n.properties?.["Node name for S&R"] === split[0]);
-		// If we cant, see if there is a node with that title
-		if (!nodes.length) {
-			nodes = app.graph._nodes.filter((n) => n.title === split[0]);
-		}
-		if (!nodes.length) {
-			console.warn("Unable to find node", split[0]);
-			return match;
-		}
-
-		if (nodes.length > 1) {
-			console.warn("Multiple nodes matched", split[0], "using first match");
-		}
-
-		const node = nodes[0];
-
-		const widget = node.widgets?.find((w) => w.name === split[1]);
-		if (!widget) {
-			console.warn("Unable to find widget", split[1], "on node", split[0], node);
-			return match;
-		}
-
-		return ((widget.value ?? "") + "").replaceAll(/\/|\\/g, "_");
-	});
-}
-
-export async function addStylesheet(urlOrFile, relativeTo) {
-	return new Promise((res, rej) => {
-		let url;
-		if (urlOrFile.endsWith(".js")) {
-			url = urlOrFile.substr(0, urlOrFile.length - 2) + "css";
-		} else {
-			url = new URL(urlOrFile, relativeTo ?? `${window.location.protocol}//${window.location.host}`).toString();
-		}
-		$el("link", {
-			parent: document.head,
-			rel: "stylesheet",
-			type: "text/css",
-			href: url,
-			onload: res,
-			onerror: rej,
-		});
-	});
-}
-
-/**
- * @param { string } filename
- * @param { Blob } blob
- */
-export function downloadBlob(filename, blob) {
-	const url = URL.createObjectURL(blob);
-	const a = $el("a", {
-		href: url,
-		download: filename,
-		style: { display: "none" },
-		parent: document.body,
-	});
-	a.click();
-	setTimeout(function () {
-		a.remove();
-		window.URL.revokeObjectURL(url);
-	}, 0);
-}
-
-/**
- * @template T
- * @param {string} name
- * @param {T} [defaultValue]
- * @param {(currentValue: any, previousValue: any)=>void} [onChanged]
- * @returns {T}
- */
-export function prop(target, name, defaultValue, onChanged) {
-	let currentValue;
-	Object.defineProperty(target, name, {
-		get() {
-			return currentValue;
-		},
-		set(newValue) {
-			const prevValue = currentValue;
-			currentValue = newValue;
-			onChanged?.(currentValue, prevValue, target, name);
-		},
-	});
-	return defaultValue;
-}
-
-export function getStorageValue(id) {
-	const clientId = api.clientId ?? api.initialClientId;
-	return (clientId && sessionStorage.getItem(`${id}:${clientId}`)) ?? localStorage.getItem(id);
-}
-
-export function setStorageValue(id, value) {
-	const clientId = api.clientId ?? api.initialClientId;
-	if (clientId) {
-		sessionStorage.setItem(`${id}:${clientId}`, value);
-	}
-	localStorage.setItem(id, value);
-}

web/scripts/widgets.js

@@ -1,533 +1,6 @@
-import { api } from "./api.js"
+// Shim for scripts\widgets.ts
-import "./domWidget.js";
+export const updateControlWidgetLabel = window.comfyAPI.widgets.updateControlWidgetLabel;
-
+export const addValueControlWidget = window.comfyAPI.widgets.addValueControlWidget;
-let controlValueRunBefore = false;
+export const addValueControlWidgets = window.comfyAPI.widgets.addValueControlWidgets;
-export function updateControlWidgetLabel(widget) {
+export const initWidgets = window.comfyAPI.widgets.initWidgets;
-	let replacement = "after";
+export const ComfyWidgets = window.comfyAPI.widgets.ComfyWidgets;
-	let find = "before";
-	if (controlValueRunBefore) {
-		[find, replacement] = [replacement, find]
-	}
-	widget.label = (widget.label ?? widget.name).replace(find, replacement);
-}
-
-const IS_CONTROL_WIDGET = Symbol();
-const HAS_EXECUTED = Symbol();
-
-function getNumberDefaults(inputData, defaultStep, precision, enable_rounding) {
-	let defaultVal = inputData[1]["default"];
-	let { min, max, step, round} = inputData[1];
-
-	if (defaultVal == undefined) defaultVal = 0;
-	if (min == undefined) min = 0;
-	if (max == undefined) max = 2048;
-	if (step == undefined) step = defaultStep;
-	// precision is the number of decimal places to show.
-	// by default, display the the smallest number of decimal places such that changes of size step are visible.
-	if (precision == undefined) {
-		precision = Math.max(-Math.floor(Math.log10(step)),0);
-	}
-
-	if (enable_rounding && (round == undefined || round === true)) {
-		// by default, round the value to those decimal places shown.
-		round = Math.round(1000000*Math.pow(0.1,precision))/1000000;
-	}
-
-	return { val: defaultVal, config: { min, max, step: 10.0 * step, round, precision } };
-}
-
-export function addValueControlWidget(node, targetWidget, defaultValue = "randomize", values, widgetName, inputData) {
-	let name = inputData[1]?.control_after_generate;
-	if(typeof name !== "string") {
-		name = widgetName;
-	}
-	const widgets = addValueControlWidgets(node, targetWidget, defaultValue, {
-		addFilterList: false,
-		controlAfterGenerateName: name
-	}, inputData);
-	return widgets[0];
-}
-
-export function addValueControlWidgets(node, targetWidget, defaultValue = "randomize", options, inputData) {
-	if (!defaultValue) defaultValue = "randomize";
-	if (!options) options = {};
-
-	const getName = (defaultName, optionName) => {
-		let name = defaultName;
-		if (options[optionName]) {
-			name = options[optionName];
-		} else if (typeof inputData?.[1]?.[defaultName] === "string") {
-			name = inputData?.[1]?.[defaultName];
-		} else if (inputData?.[1]?.control_prefix) {
-			name = inputData?.[1]?.control_prefix + " " + name
-		}
-		return name;
-	}
-
-	const widgets = [];
-	const valueControl = node.addWidget(
-		"combo",
-		getName("control_after_generate", "controlAfterGenerateName"),
-		defaultValue,
-		function () {},
-		{
-			values: ["fixed", "increment", "decrement", "randomize"],
-			serialize: false, // Don't include this in prompt.
-		}
-	);
-	valueControl.tooltip = "Allows the linked widget to be changed automatically, for example randomizing the noise seed.";
-	valueControl[IS_CONTROL_WIDGET] = true;
-	updateControlWidgetLabel(valueControl);
-	widgets.push(valueControl);
-
-	const isCombo = targetWidget.type === "combo";
-	let comboFilter;
-	if (isCombo) {
-		valueControl.options.values.push("increment-wrap");
-	}
-	if (isCombo && options.addFilterList !== false) {
-		comboFilter = node.addWidget(
-			"string",
-			getName("control_filter_list", "controlFilterListName"),
-			"",
-			function () {},
-			{
-				serialize: false, // Don't include this in prompt.
-			}
-		);
-		updateControlWidgetLabel(comboFilter);
-		comboFilter.tooltip = "Allows for filtering the list of values when changing the value via the control generate mode. Allows for RegEx matches in the format /abc/ to only filter to values containing 'abc'."
-
-		widgets.push(comboFilter);
-	}
-
-	const applyWidgetControl = () => {
-		var v = valueControl.value;
-
-		if (isCombo && v !== "fixed") {
-			let values = targetWidget.options.values;
-			const filter = comboFilter?.value;
-			if (filter) {
-				let check;
-				if (filter.startsWith("/") && filter.endsWith("/")) {
-					try {
-						const regex = new RegExp(filter.substring(1, filter.length - 1));
-						check = (item) => regex.test(item);
-					} catch (error) {
-						console.error("Error constructing RegExp filter for node " + node.id, filter, error);
-					}
-				}
-				if (!check) {
-					const lower = filter.toLocaleLowerCase();
-					check = (item) => item.toLocaleLowerCase().includes(lower);
-				}
-				values = values.filter(item => check(item));
-				if (!values.length && targetWidget.options.values.length) {
-					console.warn("Filter for node " + node.id + " has filtered out all items", filter);
-				}
-			}
-			let current_index = values.indexOf(targetWidget.value);
-			let current_length = values.length;
-
-			switch (v) {
-				case "increment":
-					current_index += 1;
-					break;
-				case "increment-wrap":
-					current_index += 1;
-					if ( current_index >= current_length ) {
-					    current_index = 0;
-					}
-					break;
-				case "decrement":
-					current_index -= 1;
-					break;
-				case "randomize":
-					current_index = Math.floor(Math.random() * current_length);
-				default:
-					break;
-			}
-			current_index = Math.max(0, current_index);
-			current_index = Math.min(current_length - 1, current_index);
-			if (current_index >= 0) {
-				let value = values[current_index];
-				targetWidget.value = value;
-				targetWidget.callback(value);
-			}
-		} else {
-			//number
-			let min = targetWidget.options.min;
-			let max = targetWidget.options.max;
-			// limit to something that javascript can handle
-			max = Math.min(1125899906842624, max);
-			min = Math.max(-1125899906842624, min);
-			let range = (max - min) / (targetWidget.options.step / 10);
-
-			//adjust values based on valueControl Behaviour
-			switch (v) {
-				case "fixed":
-					break;
-				case "increment":
-					targetWidget.value += targetWidget.options.step / 10;
-					break;
-				case "decrement":
-					targetWidget.value -= targetWidget.options.step / 10;
-					break;
-				case "randomize":
-					targetWidget.value = Math.floor(Math.random() * range) * (targetWidget.options.step / 10) + min;
-				default:
-					break;
-			}
-			/*check if values are over or under their respective
-			 * ranges and set them to min or max.*/
-			if (targetWidget.value < min) targetWidget.value = min;
-
-			if (targetWidget.value > max)
-				targetWidget.value = max;
-			targetWidget.callback(targetWidget.value);
-		}
-	};
-
-	valueControl.beforeQueued = () => {
-		if (controlValueRunBefore) {
-			// Don't run on first execution
-			if (valueControl[HAS_EXECUTED]) {
-				applyWidgetControl();
-			}
-		}
-		valueControl[HAS_EXECUTED] = true;
-	};
-
-	valueControl.afterQueued = () => {
-		if (!controlValueRunBefore) {
-			applyWidgetControl();
-		}
-	};
-
-	return widgets;
-};
-
-function seedWidget(node, inputName, inputData, app, widgetName) {
-	const seed = createIntWidget(node, inputName, inputData, app, true);
-	const seedControl = addValueControlWidget(node, seed.widget, "randomize", undefined, widgetName, inputData);
-
-	seed.widget.linkedWidgets = [seedControl];
-	return seed;
-}
-
-function createIntWidget(node, inputName, inputData, app, isSeedInput) {
-	const control = inputData[1]?.control_after_generate;
-	if (!isSeedInput && control) {
-		return seedWidget(node, inputName, inputData, app, typeof control === "string" ? control : undefined);
-	}
-
-	let widgetType = isSlider(inputData[1]["display"], app);
-	const { val, config } = getNumberDefaults(inputData, 1, 0, true);
-	Object.assign(config, { precision: 0 });
-	return {
-		widget: node.addWidget(
-			widgetType,
-			inputName,
-			val,
-			function (v) {
-				const s = this.options.step / 10;
-				let sh = this.options.min % s;
-				if (isNaN(sh)) {
-					sh = 0;
-				}
-				this.value = Math.round((v - sh) / s) * s + sh;
-			},
-			config
-		),
-	};
-}
-
-function addMultilineWidget(node, name, opts, app) {
-	const inputEl = document.createElement("textarea");
-	inputEl.className = "comfy-multiline-input";
-	inputEl.value = opts.defaultVal;
-	inputEl.placeholder = opts.placeholder || name;
-
-	const widget = node.addDOMWidget(name, "customtext", inputEl, {
-		getValue() {
-			return inputEl.value;
-		},
-		setValue(v) {
-			inputEl.value = v;
-		},
-	});
-	widget.inputEl = inputEl;
-
-	inputEl.addEventListener("input", () => {
-		widget.callback?.(widget.value);
-	});
-
-	return { minWidth: 400, minHeight: 200, widget };
-}
-
-function isSlider(display, app) {
-	if (app.ui.settings.getSettingValue("Comfy.DisableSliders")) {
-		return "number"
-	}
-
-	return (display==="slider") ? "slider" : "number"
-}
-
-export function initWidgets(app) {
-	app.ui.settings.addSetting({
-		id: "Comfy.WidgetControlMode",
-		name: "Widget Value Control Mode",
-		type: "combo",
-		defaultValue: "after",
-		options: ["before", "after"],
-		tooltip: "Controls when widget values are updated (randomize/increment/decrement), either before the prompt is queued or after.",
-		onChange(value) {
-			controlValueRunBefore = value === "before";
-			for (const n of app.graph._nodes) {
-				if (!n.widgets) continue;
-				for (const w of n.widgets) {
-					if (w[IS_CONTROL_WIDGET]) {
-						updateControlWidgetLabel(w);
-						if (w.linkedWidgets) {
-							for (const l of w.linkedWidgets) {
-								updateControlWidgetLabel(l);
-							}
-						}
-					}
-				}
-			}
-			app.graph.setDirtyCanvas(true);
-		},
-	});
-}
-
-export const ComfyWidgets = {
-	"INT:seed": seedWidget,
-	"INT:noise_seed": seedWidget,
-	FLOAT(node, inputName, inputData, app) {
-		let widgetType = isSlider(inputData[1]["display"], app);
-		let precision = app.ui.settings.getSettingValue("Comfy.FloatRoundingPrecision");
-		let disable_rounding = app.ui.settings.getSettingValue("Comfy.DisableFloatRounding")
-		if (precision == 0) precision = undefined;
-		const { val, config } = getNumberDefaults(inputData, 0.5, precision, !disable_rounding);
-		return { widget: node.addWidget(widgetType, inputName, val,
-			function (v) {
-				if (config.round) {
-					this.value = Math.round((v + Number.EPSILON)/config.round)*config.round;
-					if (this.value > config.max) this.value = config.max;
-					if (this.value < config.min) this.value = config.min;
-				} else {
-					this.value = v;
-				}
-			}, config) };
-	},
-	INT(node, inputName, inputData, app) {
-		return createIntWidget(node, inputName, inputData, app);
-	},
-	BOOLEAN(node, inputName, inputData) {
-		let defaultVal = false;
-		let options = {};
-		if (inputData[1]) {
-			if (inputData[1].default)
-				defaultVal = inputData[1].default;
-			if (inputData[1].label_on)
-				options["on"] = inputData[1].label_on;
-			if (inputData[1].label_off)
-				options["off"] = inputData[1].label_off;
-		}
-		return {
-			widget: node.addWidget(
-				"toggle",
-				inputName,
-				defaultVal,
-				() => {},
-				options,
-				)
-		};
-	},
-	STRING(node, inputName, inputData, app) {
-		const defaultVal = inputData[1].default || "";
-		const multiline = !!inputData[1].multiline;
-
-		let res;
-		if (multiline) {
-			res = addMultilineWidget(node, inputName, { defaultVal, ...inputData[1] }, app);
-		} else {
-			res = { widget: node.addWidget("text", inputName, defaultVal, () => {}, {}) };
-		}
-
-		if(inputData[1].dynamicPrompts != undefined)
-			res.widget.dynamicPrompts = inputData[1].dynamicPrompts;
-
-		return res;
-	},
-	COMBO(node, inputName, inputData) {
-		const type = inputData[0];
-		let defaultValue = type[0];
-		if (inputData[1] && inputData[1].default) {
-			defaultValue = inputData[1].default;
-		}
-		const res = { widget: node.addWidget("combo", inputName, defaultValue, () => {}, { values: type }) };
-		if (inputData[1]?.control_after_generate) {
-			res.widget.linkedWidgets = addValueControlWidgets(node, res.widget, undefined, undefined, inputData);
-		}
-		return res;
-	},
-	IMAGEUPLOAD(node, inputName, inputData, app) {
-		const imageWidget = node.widgets.find((w) => w.name === (inputData[1]?.widget ?? "image"));
-		let uploadWidget;
-
-		function showImage(name) {
-			const img = new Image();
-			img.onload = () => {
-				node.imgs = [img];
-				app.graph.setDirtyCanvas(true);
-			};
-			let folder_separator = name.lastIndexOf("/");
-			let subfolder = "";
-			if (folder_separator > -1) {
-				subfolder = name.substring(0, folder_separator);
-				name = name.substring(folder_separator + 1);
-			}
-			img.src = api.apiURL(`/view?filename=${encodeURIComponent(name)}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}${app.getRandParam()}`);
-			node.setSizeForImage?.();
-		}
-
-		var default_value = imageWidget.value;
-		Object.defineProperty(imageWidget, "value", {
-			set : function(value) {
-				this._real_value = value;
-			},
-
-			get : function() {
-				let value = "";
-				if (this._real_value) {
-					value = this._real_value;
-				} else {
-					return default_value;
-				}
-
-				if (value.filename) {
-					let real_value = value;
-					value = "";
-					if (real_value.subfolder) {
-						value = real_value.subfolder + "/";
-					}
-
-					value += real_value.filename;
-
-					if(real_value.type && real_value.type !== "input")
-						value += ` [${real_value.type}]`;
-				}
-				return value;
-			}
-		});
-
-		// Add our own callback to the combo widget to render an image when it changes
-		const cb = node.callback;
-		imageWidget.callback = function () {
-			showImage(imageWidget.value);
-			if (cb) {
-				return cb.apply(this, arguments);
-			}
-		};
-
-		// On load if we have a value then render the image
-		// The value isnt set immediately so we need to wait a moment
-		// No change callbacks seem to be fired on initial setting of the value
-		requestAnimationFrame(() => {
-			if (imageWidget.value) {
-				showImage(imageWidget.value);
-			}
-		});
-
-		async function uploadFile(file, updateNode, pasted = false) {
-			try {
-				// Wrap file in formdata so it includes filename
-				const body = new FormData();
-				body.append("image", file);
-				if (pasted) body.append("subfolder", "pasted");
-				const resp = await api.fetchApi("/upload/image", {
-					method: "POST",
-					body,
-				});
-
-				if (resp.status === 200) {
-					const data = await resp.json();
-					// Add the file to the dropdown list and update the widget value
-					let path = data.name;
-					if (data.subfolder) path = data.subfolder + "/" + path;
-
-					if (!imageWidget.options.values.includes(path)) {
-						imageWidget.options.values.push(path);
-					}
-
-					if (updateNode) {
-						showImage(path);
-						imageWidget.value = path;
-					}
-				} else {
-					alert(resp.status + " - " + resp.statusText);
-				}
-			} catch (error) {
-				alert(error);
-			}
-		}
-
-		const fileInput = document.createElement("input");
-		Object.assign(fileInput, {
-			type: "file",
-			accept: "image/jpeg,image/png,image/webp",
-			style: "display: none",
-			onchange: async () => {
-				if (fileInput.files.length) {
-					await uploadFile(fileInput.files[0], true);
-				}
-			},
-		});
-		document.body.append(fileInput);
-
-		// Create the button widget for selecting the files
-		uploadWidget = node.addWidget("button", inputName, "image", () => {
-			fileInput.click();
-		});
-		uploadWidget.label = "choose file to upload";
-		uploadWidget.serialize = false;
-
-		// Add handler to check if an image is being dragged over our node
-		node.onDragOver = function (e) {
-			if (e.dataTransfer && e.dataTransfer.items) {
-				const image = [...e.dataTransfer.items].find((f) => f.kind === "file");
-				return !!image;
-			}
-
-			return false;
-		};
-
-		// On drop upload files
-		node.onDragDrop = function (e) {
-			console.log("onDragDrop called");
-			let handled = false;
-			for (const file of e.dataTransfer.files) {
-				if (file.type.startsWith("image/")) {
-					uploadFile(file, !handled); // Dont await these, any order is fine, only update on first one
-					handled = true;
-				}
-			}
-
-			return handled;
-		};
-
-		node.pasteFile = function(file) {
-			if (file.type.startsWith("image/")) {
-				const is_pasted = (file.name === "image.png") &&
-								  (file.lastModified - Date.now() < 2000);
-				uploadFile(file, true, is_pasted);
-				return true;
-			}
-			return false;
-		}
-
-		return { widget: uploadWidget };
-	},
-};

web/scripts/workflows.js

@@ -1,450 +1,4 @@
-// @ts-check
+// Shim for scripts\workflows.ts
-
+export const trimJsonExt = window.comfyAPI.workflows.trimJsonExt;
-import { api } from "./api.js";
+export const ComfyWorkflowManager = window.comfyAPI.workflows.ComfyWorkflowManager;
-import { ChangeTracker } from "./changeTracker.js";
+export const ComfyWorkflow = window.comfyAPI.workflows.ComfyWorkflow;
-import { ComfyAsyncDialog } from "./ui/components/asyncDialog.js";
-import { getStorageValue, setStorageValue } from "./utils.js";
-
-function appendJsonExt(path) {
-	if (!path.toLowerCase().endsWith(".json")) {
-		path += ".json";
-	}
-	return path;
-}
-
-export function trimJsonExt(path) {
-	return path?.replace(/\.json$/, "");
-}
-
-export class ComfyWorkflowManager extends EventTarget {
-	/** @type {string | null} */
-	#activePromptId = null;
-	#unsavedCount = 0;
-	#activeWorkflow;
-
-	/** @type {Record<string, ComfyWorkflow>} */
-	workflowLookup = {};
-	/** @type {Array<ComfyWorkflow>} */
-	workflows = [];
-	/** @type {Array<ComfyWorkflow>} */
-	openWorkflows = [];
-	/** @type {Record<string, {workflow?: ComfyWorkflow, nodes?: Record<string, boolean>}>} */
-	queuedPrompts = {};
-
-	get activeWorkflow() {
-		return this.#activeWorkflow ?? this.openWorkflows[0];
-	}
-
-	get activePromptId() {
-		return this.#activePromptId;
-	}
-
-	get activePrompt() {
-		return this.queuedPrompts[this.#activePromptId];
-	}
-
-	/**
-	 * @param {import("./app.js").ComfyApp} app
-	 */
-	constructor(app) {
-		super();
-		this.app = app;
-		ChangeTracker.init(app);
-
-		this.#bindExecutionEvents();
-	}
-
-	#bindExecutionEvents() {
-		// TODO: on reload, set active prompt based on the latest ws message
-
-		const emit = () => this.dispatchEvent(new CustomEvent("execute", { detail: this.activePrompt }));
-		let executing = null;
-		api.addEventListener("execution_start", (e) => {
-			this.#activePromptId = e.detail.prompt_id;
-
-			// This event can fire before the event is stored, so put a placeholder
-			this.queuedPrompts[this.#activePromptId] ??= { nodes: {} };
-			emit();
-		});
-		api.addEventListener("execution_cached", (e) => {
-			if (!this.activePrompt) return;
-			for (const n of e.detail.nodes) {
-				this.activePrompt.nodes[n] = true;
-			}
-			emit();
-		});
-		api.addEventListener("executed", (e) => {
-			if (!this.activePrompt) return;
-			this.activePrompt.nodes[e.detail.node] = true;
-			emit();
-		});
-		api.addEventListener("executing", (e) => {
-			if (!this.activePrompt) return;
-
-			if (executing) {
-				// Seems sometimes nodes that are cached fire executing but not executed
-				this.activePrompt.nodes[executing] = true;
-			}
-			executing = e.detail;
-			if (!executing) {
-				delete this.queuedPrompts[this.#activePromptId];
-				this.#activePromptId = null;
-			}
-			emit();
-		});
-	}
-
-	async loadWorkflows() {
-		try {
-			let favorites;
-			const resp = await api.getUserData("workflows/.index.json");
-			let info;
-			if (resp.status === 200) {
-				info = await resp.json();
-				favorites = new Set(info?.favorites ?? []);
-			} else {
-				favorites = new Set();
-			}
-
-			const workflows = (await api.listUserData("workflows", true, true)).map((w) => {
-				let workflow = this.workflowLookup[w[0]];
-				if (!workflow) {
-					workflow = new ComfyWorkflow(this, w[0], w.slice(1), favorites.has(w[0]));
-					this.workflowLookup[workflow.path] = workflow;
-				}
-				return workflow;
-			});
-
-			this.workflows = workflows;
-		} catch (error) {
-			alert("Error loading workflows: " + (error.message ?? error));
-			this.workflows = [];
-		}
-	}
-
-	async saveWorkflowMetadata() {
-		await api.storeUserData("workflows/.index.json", {
-			favorites: [...this.workflows.filter((w) => w.isFavorite).map((w) => w.path)],
-		});
-	}
-
-	/**
-	 * @param {string | ComfyWorkflow | null} workflow
-	 */
-	setWorkflow(workflow) {
-		if (workflow && typeof workflow === "string") {
-			// Selected by path, i.e. on reload of last workflow
-			const found = this.workflows.find((w) => w.path === workflow);
-			if (found) {
-				workflow = found;
-				workflow.unsaved = !workflow || getStorageValue("Comfy.PreviousWorkflowUnsaved") === "true";
-			}
-		}
-
-		if (!(workflow instanceof ComfyWorkflow)) {
-			// Still not found, either reloading a deleted workflow or blank
-			workflow = new ComfyWorkflow(this, workflow || "Unsaved Workflow" + (this.#unsavedCount++ ? ` (${this.#unsavedCount})` : ""));
-		}
-
-		const index = this.openWorkflows.indexOf(workflow);
-		if (index === -1) {
-			// Opening a new workflow
-			this.openWorkflows.push(workflow);
-		}
-
-		this.#activeWorkflow = workflow;
-
-		setStorageValue("Comfy.PreviousWorkflow", this.activeWorkflow.path ?? "");
-		this.dispatchEvent(new CustomEvent("changeWorkflow"));
-	}
-
-	storePrompt({ nodes, id }) {
-		this.queuedPrompts[id] ??= {};
-		this.queuedPrompts[id].nodes = {
-			...nodes.reduce((p, n) => {
-				p[n] = false;
-				return p;
-			}, {}),
-			...this.queuedPrompts[id].nodes,
-		};
-		this.queuedPrompts[id].workflow = this.activeWorkflow;
-	}
-
-	/**
-	 * @param {ComfyWorkflow} workflow
-	 */
-	async closeWorkflow(workflow, warnIfUnsaved = true) {
-		if (!workflow.isOpen) {
-			return true;
-		}
-		if (workflow.unsaved && warnIfUnsaved) {
-			const res = await ComfyAsyncDialog.prompt({
-				title: "Save Changes?",
-				message: `Do you want to save changes to "${workflow.path ?? workflow.name}" before closing?`,
-				actions: ["Yes", "No", "Cancel"],
-			});
-			if (res === "Yes") {
-				const active = this.activeWorkflow;
-				if (active !== workflow) {
-					// We need to switch to the workflow to save it
-					await workflow.load();
-				}
-
-				if (!(await workflow.save())) {
-					// Save was canceled, restore the previous workflow
-					if (active !== workflow) {
-						await active.load();
-					}
-					return;
-				}
-			} else if (res === "Cancel") {
-				return;
-			}
-		}
-		workflow.changeTracker = null;
-		this.openWorkflows.splice(this.openWorkflows.indexOf(workflow), 1);
-		if (this.openWorkflows.length) {
-			this.#activeWorkflow = this.openWorkflows[0];
-			await this.#activeWorkflow.load();
-		} else {
-			// Load default
-			await this.app.loadGraphData();
-		}
-	}
-}
-
-export class ComfyWorkflow {
-	#name;
-	#path;
-	#pathParts;
-	#isFavorite = false;
-	/** @type {ChangeTracker | null} */
-	changeTracker = null;
-	unsaved = false;
-
-	get name() {
-		return this.#name;
-	}
-
-	get path() {
-		return this.#path;
-	}
-
-	get pathParts() {
-		return this.#pathParts;
-	}
-
-	get isFavorite() {
-		return this.#isFavorite;
-	}
-
-	get isOpen() {
-		return !!this.changeTracker;
-	}
-
-	/**
-	 * @overload
-	 * @param {ComfyWorkflowManager} manager
-	 * @param {string} path
-	 */
-	/**
-	 * @overload
-	 * @param {ComfyWorkflowManager} manager
-	 * @param {string} path
-	 * @param {string[]} pathParts
-	 * @param {boolean} isFavorite
-	 */
-	/**
-	 * @param {ComfyWorkflowManager} manager
-	 * @param {string} path
-	 * @param {string[]} [pathParts]
-	 * @param {boolean} [isFavorite]
-	 */
-	constructor(manager, path, pathParts, isFavorite) {
-		this.manager = manager;
-		if (pathParts) {
-			this.#updatePath(path, pathParts);
-			this.#isFavorite = isFavorite;
-		} else {
-			this.#name = path;
-			this.unsaved = true;
-		}
-	}
-
-	/**
-	 * @param {string} path
-	 * @param {string[]} [pathParts]
-	 */
-	#updatePath(path, pathParts) {
-		this.#path = path;
-
-		if (!pathParts) {
-			if (!path.includes("\\")) {
-				pathParts = path.split("/");
-			} else {
-				pathParts = path.split("\\");
-			}
-		}
-
-		this.#pathParts = pathParts;
-		this.#name = trimJsonExt(pathParts[pathParts.length - 1]);
-	}
-
-	async getWorkflowData() {
-		const resp = await api.getUserData("workflows/" + this.path);
-		if (resp.status !== 200) {
-			alert(`Error loading workflow file '${this.path}': ${resp.status} ${resp.statusText}`);
-			return;
-		}
-		return await resp.json();
-	}
-
-	load = async () => {
-		if (this.isOpen) {
-			await this.manager.app.loadGraphData(this.changeTracker.activeState, true, true, this);
-		} else {
-			const data = await this.getWorkflowData();
-			if (!data) return;
-			await this.manager.app.loadGraphData(data, true, true, this);
-		}
-	};
-
-	async save(saveAs = false) {
-		if (!this.path || saveAs) {
-			return !!(await this.#save(null, false));
-		} else {
-			return !!(await this.#save(this.path, true));
-		}
-	}
-
-	/**
-	 * @param {boolean} value
-	 */
-	async favorite(value) {
-		try {
-			if (this.#isFavorite === value) return;
-			this.#isFavorite = value;
-			await this.manager.saveWorkflowMetadata();
-			this.manager.dispatchEvent(new CustomEvent("favorite", { detail: this }));
-		} catch (error) {
-			alert("Error favoriting workflow " + this.path + "\n" + (error.message ?? error));
-		}
-	}
-
-	/**
-	 * @param {string} path
-	 */
-	async rename(path) {
-		path = appendJsonExt(path);
-		let resp = await api.moveUserData("workflows/" + this.path, "workflows/" + path);
-
-		if (resp.status === 409) {
-			if (!confirm(`Workflow '${path}' already exists, do you want to overwrite it?`)) return resp;
-			resp = await api.moveUserData("workflows/" + this.path, "workflows/" + path, { overwrite: true });
-		}
-
-		if (resp.status !== 200) {
-			alert(`Error renaming workflow file '${this.path}': ${resp.status} ${resp.statusText}`);
-			return;
-		}
-
-		const isFav = this.isFavorite;
-		if (isFav) {
-			await this.favorite(false);
-		}
-		path = (await resp.json()).substring("workflows/".length);
-		this.#updatePath(path, null);
-		if (isFav) {
-			await this.favorite(true);
-		}
-		this.manager.dispatchEvent(new CustomEvent("rename", { detail: this }));
-		setStorageValue("Comfy.PreviousWorkflow", this.path ?? "");
-	}
-
-	async insert() {
-		const data = await this.getWorkflowData();
-		if (!data) return;
-
-		const old = localStorage.getItem("litegrapheditor_clipboard");
-		const graph = new LGraph(data);
-		const canvas = new LGraphCanvas(null, graph, { skip_events: true, skip_render: true });
-		canvas.selectNodes();
-		canvas.copyToClipboard();
-		this.manager.app.canvas.pasteFromClipboard();
-		localStorage.setItem("litegrapheditor_clipboard", old);
-	}
-
-	async delete() {
-		// TODO: fix delete of current workflow - should mark workflow as unsaved and when saving use old name by default
-
-		try {
-			if (this.isFavorite) {
-				await this.favorite(false);
-			}
-			await api.deleteUserData("workflows/" + this.path);
-			this.unsaved = true;
-			this.#path = null;
-			this.#pathParts = null;
-			this.manager.workflows.splice(this.manager.workflows.indexOf(this), 1);
-			this.manager.dispatchEvent(new CustomEvent("delete", { detail: this }));
-		} catch (error) {
-			alert(`Error deleting workflow: ${error.message || error}`);
-		}
-	}
-
-	track() {
-		if (this.changeTracker) {
-			this.changeTracker.restore();
-		} else {
-			this.changeTracker = new ChangeTracker(this);
-		}
-	}
-
-	/**
-	 * @param {string|null} path
-	 * @param {boolean} overwrite
-	 */
-	async #save(path, overwrite) {
-		if (!path) {
-			path = prompt("Save workflow as:", trimJsonExt(this.path) ?? this.name ?? "workflow");
-			if (!path) return;
-		}
-
-		path = appendJsonExt(path);
-
-		const p = await this.manager.app.graphToPrompt();
-		const json = JSON.stringify(p.workflow, null, 2);
-		let resp = await api.storeUserData("workflows/" + path, json, { stringify: false, throwOnError: false, overwrite });
-		if (resp.status === 409) {
-			if (!confirm(`Workflow '${path}' already exists, do you want to overwrite it?`)) return;
-			resp = await api.storeUserData("workflows/" + path, json, { stringify: false });
-		}
-
-		if (resp.status !== 200) {
-			alert(`Error saving workflow '${this.path}': ${resp.status} ${resp.statusText}`);
-			return;
-		}
-
-		path = (await resp.json()).substring("workflows/".length);
-
-		if (!this.path) {
-			// Saved new workflow, patch this instance
-			this.#updatePath(path, null);
-			await this.manager.loadWorkflows();
-			this.unsaved = false;
-			this.manager.dispatchEvent(new CustomEvent("rename", { detail: this }));
-			setStorageValue("Comfy.PreviousWorkflow", this.path ?? "");
-		} else if (path !== this.path) {
-			// Saved as, open the new copy
-			await this.manager.loadWorkflows();
-			const workflow = this.manager.workflowLookup[path];
-			await workflow.load();
-		} else {
-			// Normal save
-			this.unsaved = false;
-			this.manager.dispatchEvent(new CustomEvent("save", { detail: this }));
-		}
-
-		return true;
-	}
-}