Merge branch 'comfyanonymous:master' into master

2026-01-14 00:00:57 +08:00 · 2024-10-10 10:30:17 +03:00 · 2024-10-10 10:30:17 +03:00 · f9eab05f54
commit f9eab05f54
parent 21d9bef158 5f9d5a244b
44 changed files with 71425 additions and 55126 deletions
--- a/.github/workflows/pullrequest-ci-run.yml
+++ b/.github/workflows/pullrequest-ci-run.yml
@ -23,7 +23,7 @@ jobs:
            runner_label: [self-hosted, Linux]
            flags: ""
          - os: windows
-            runner_label: [self-hosted, win]
+            runner_label: [self-hosted, Windows]
            flags: ""
    runs-on: ${{ matrix.runner_label }}
    steps:
--- a/.github/workflows/test-ci.yml
+++ b/.github/workflows/test-ci.yml
@ -32,7 +32,7 @@ jobs:
            runner_label: [self-hosted, Linux]
            flags: ""
          - os: windows
-            runner_label: [self-hosted, win]
+            runner_label: [self-hosted, Windows]
            flags: ""
    runs-on: ${{ matrix.runner_label }}
    steps:
@ -55,7 +55,7 @@ jobs:
        torch_version: ["nightly"]
        include:
          - os: windows
-            runner_label: [self-hosted, win]
+            runner_label: [self-hosted, Windows]
            flags: ""
    runs-on: ${{ matrix.runner_label }}
    steps:
--- a/comfy/model_base.py
+++ b/comfy/model_base.py
@ -96,7 +96,7 @@ class BaseModel(torch.nn.Module):

        if not unet_config.get("disable_unet_model_creation", False):
            if model_config.custom_operations is None:
-                operations = comfy.ops.pick_operations(unet_config.get("dtype", None), self.manual_cast_dtype)
+                operations = comfy.ops.pick_operations(unet_config.get("dtype", None), self.manual_cast_dtype, fp8_optimizations=model_config.optimizations.get("fp8", False))
            else:
                operations = model_config.custom_operations
            self.diffusion_model = unet_model(**unet_config, device=device, operations=operations)
--- a/comfy/model_management.py
+++ b/comfy/model_management.py
@ -145,7 +145,7 @@ total_ram = psutil.virtual_memory().total / (1024 * 1024)
 logging.info("Total VRAM {:0.0f} MB, total RAM {:0.0f} MB".format(total_vram, total_ram))

 try:
-    logging.info("pytorch version: {}".format(torch.version.__version__))
+    logging.info("pytorch version: {}".format(torch_version))
 except:
    pass

@ -913,7 +913,7 @@ def force_upcast_attention_dtype():
    upcast = args.force_upcast_attention
    try:
        macos_version = tuple(int(n) for n in platform.mac_ver()[0].split("."))
-        if (14, 5) <= macos_version < (14, 7):  # black image bug on recent versions of MacOS
+        if (14, 5) <= macos_version <= (15, 0, 1):  # black image bug on recent versions of macOS
            upcast = True
    except:
        pass
@ -1079,6 +1079,9 @@ def should_use_bf16(device=None, model_params=0, prioritize_performance=True, ma
    return False

 def supports_fp8_compute(device=None):
+    if not is_nvidia():
+        return False
+
    props = torch.cuda.get_device_properties(device)
    if props.major >= 9:
        return True
@ -1086,6 +1089,14 @@ def supports_fp8_compute(device=None):
        return False
    if props.minor < 9:
        return False
+
+    if int(torch_version[0]) < 2 or (int(torch_version[0]) == 2 and int(torch_version[2]) < 3):
+        return False
+
+    if WINDOWS:
+        if (int(torch_version[0]) == 2 and int(torch_version[2]) < 4):
+            return False
+
    return True

 def soft_empty_cache(force=False):
--- a/comfy/ops.py
+++ b/comfy/ops.py
@ -299,7 +299,11 @@ class fp8_ops(manual_cast):
            return torch.nn.functional.linear(input, weight, bias)


-def pick_operations(weight_dtype, compute_dtype, load_device=None, disable_fast_fp8=False):
+def pick_operations(weight_dtype, compute_dtype, load_device=None, disable_fast_fp8=False, fp8_optimizations=False):
+    if comfy.model_management.supports_fp8_compute(load_device):
+        if (fp8_optimizations or args.fast) and not disable_fast_fp8:
+            return fp8_ops
+
    if compute_dtype is None or weight_dtype == compute_dtype:
        return disable_weight_init
    if args.fast and not disable_fast_fp8:
--- a/comfy/sd.py
+++ b/comfy/sd.py
@ -347,7 +347,7 @@ class VAE:
            memory_used = self.memory_used_encode(pixel_samples.shape, self.vae_dtype)
            model_management.load_models_gpu([self.patcher], memory_required=memory_used)
            free_memory = model_management.get_free_memory(self.device)
-            batch_number = int(free_memory / memory_used)
+            batch_number = int(free_memory / max(1, memory_used))
            batch_number = max(1, batch_number)
            samples = torch.empty((pixel_samples.shape[0], self.latent_channels) + tuple(map(lambda a: a // self.downscale_ratio, pixel_samples.shape[2:])), device=self.output_device)
            for x in range(0, pixel_samples.shape[0], batch_number):
@ -433,6 +433,7 @@ def detect_te_model(sd):

 def load_text_encoder_state_dicts(state_dicts=[], embedding_directory=None, clip_type=CLIPType.STABLE_DIFFUSION, model_options={}):
    clip_data = state_dicts
+
    class EmptyClass:
        pass

@ -592,7 +593,6 @@ def load_state_dict_guess_config(sd, output_vae=True, output_clip=True, output_c

    if output_model:
        inital_load_device = model_management.unet_inital_load_device(parameters, unet_dtype)
-        offload_device = model_management.unet_offload_device()
        model = model_config.get_model(sd, diffusion_model_prefix, device=inital_load_device)
        model.load_model_weights(sd, diffusion_model_prefix)

@ -678,6 +678,9 @@ def load_diffusion_model_state_dict(sd, model_options={}): #load unet in diffuse
    manual_cast_dtype = model_management.unet_manual_cast(unet_dtype, load_device, model_config.supported_inference_dtypes)
    model_config.set_inference_dtype(unet_dtype, manual_cast_dtype)
    model_config.custom_operations = model_options.get("custom_operations", model_config.custom_operations)
+    if model_options.get("fp8_optimizations", False):
+        model_config.optimizations["fp8"] = True
+
    model = model_config.get_model(new_sd, "")
    model = model.to(offload_device)
    model.load_model_weights(new_sd, "")
--- a/comfy/supported_models_base.py
+++ b/comfy/supported_models_base.py
@ -49,6 +49,7 @@ class BASE:

    manual_cast_dtype = None
    custom_operations = None
+    optimizations = {"fp8": False}

    @classmethod
    def matches(s, unet_config, state_dict=None):
--- a/nodes.py
+++ b/nodes.py
@ -861,7 +861,7 @@ class UNETLoader:
    @classmethod
    def INPUT_TYPES(s):
        return {"required": { "unet_name": (folder_paths.get_filename_list("diffusion_models"), ),
-                              "weight_dtype": (["default", "fp8_e4m3fn", "fp8_e5m2"],)
+                              "weight_dtype": (["default", "fp8_e4m3fn", "fp8_e4m3fn_fast", "fp8_e5m2"],)
                             }}
    RETURN_TYPES = ("MODEL",)
    FUNCTION = "load_unet"
@ -872,6 +872,9 @@ class UNETLoader:
        model_options = {}
        if weight_dtype == "fp8_e4m3fn":
            model_options["dtype"] = torch.float8_e4m3fn
+        elif weight_dtype == "fp8_e4m3fn_fast":
+            model_options["dtype"] = torch.float8_e4m3fn
+            model_options["fp8_optimizations"] = True
        elif weight_dtype == "fp8_e5m2":
            model_options["dtype"] = torch.float8_e5m2

--- a/web/assets/GraphView-7s8GuCc1.css
+++ b/web/assets/GraphView-7s8GuCc1.css
@ -1,158 +0,0 @@
-
-.group-title-editor.node-title-editor[data-v-fc3f26e3] {
-  z-index: 9999;
-  padding: 0.25rem;
-}
-[data-v-fc3f26e3] .editable-text {
-  width: 100%;
-  height: 100%;
-}
-[data-v-fc3f26e3] .editable-text input {
-  width: 100%;
-  height: 100%;
-  /* Override the default font size */
-  font-size: inherit;
-}
-
-.side-bar-button-icon {
-  font-size: var(--sidebar-icon-size) !important;
-}
-.side-bar-button-selected .side-bar-button-icon {
-  font-size: var(--sidebar-icon-size) !important;
-  font-weight: bold;
-}
-
-.side-bar-button[data-v-caa3ee9c] {
-  width: var(--sidebar-width);
-  height: var(--sidebar-width);
-  border-radius: 0;
-}
-.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c],
-.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover {
-  border-left: 4px solid var(--p-button-text-primary-color);
-}
-.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c],
-.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover {
-  border-right: 4px solid var(--p-button-text-primary-color);
-}
-
-:root {
-  --sidebar-width: 64px;
-  --sidebar-icon-size: 1.5rem;
-}
-:root .small-sidebar {
-  --sidebar-width: 40px;
-  --sidebar-icon-size: 1rem;
-}
-
-.side-tool-bar-container[data-v-ed7a1148] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  pointer-events: auto;
-
-  width: var(--sidebar-width);
-  height: 100%;
-
-  background-color: var(--comfy-menu-bg);
-  color: var(--fg-color);
-}
-.side-tool-bar-end[data-v-ed7a1148] {
-  align-self: flex-end;
-  margin-top: auto;
-}
-.sidebar-content-container[data-v-ed7a1148] {
-  height: 100%;
-  overflow-y: auto;
-}
-
-.p-splitter-gutter {
-  pointer-events: auto;
-}
-.gutter-hidden {
-  display: none !important;
-}
-
-.side-bar-panel[data-v-edca8328] {
-  background-color: var(--bg-color);
-  pointer-events: auto;
-}
-.splitter-overlay[data-v-edca8328] {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: transparent;
-  pointer-events: none;
-  /* Set it the same as the ComfyUI menu */
-  /* Note: Lite-graph DOM widgets have the same z-index as the node id, so
-  999 should be sufficient to make sure splitter overlays on node's DOM
-  widgets */
-  z-index: 999;
-  border: none;
-}
-
-[data-v-37f672ab] .highlight {
-  background-color: var(--p-primary-color);
-  color: var(--p-primary-contrast-color);
-  font-weight: bold;
-  border-radius: 0.25rem;
-  padding: 0rem 0.125rem;
-  margin: -0.125rem 0.125rem;
-}
-
-.comfy-vue-node-search-container[data-v-2d409367] {
-  display: flex;
-  width: 100%;
-  min-width: 26rem;
-  align-items: center;
-  justify-content: center;
-}
-.comfy-vue-node-search-container[data-v-2d409367] * {
-  pointer-events: auto;
-}
-.comfy-vue-node-preview-container[data-v-2d409367] {
-  position: absolute;
-  left: -350px;
-  top: 50px;
-}
-.comfy-vue-node-search-box[data-v-2d409367] {
-  z-index: 10;
-  flex-grow: 1;
-}
-._filter-button[data-v-2d409367] {
-  z-index: 10;
-}
-._dialog[data-v-2d409367] {
-  min-width: 26rem;
-}
-
-.invisible-dialog-root {
-  width: 30%;
-  min-width: 24rem;
-  max-width: 48rem;
-  border: 0 !important;
-  background-color: transparent !important;
-  margin-top: 25vh;
-}
-.node-search-box-dialog-mask {
-  align-items: flex-start !important;
-}
-
-.node-tooltip[data-v-0a4402f9] {
-  background: var(--comfy-input-bg);
-  border-radius: 5px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-  color: var(--input-text);
-  font-family: sans-serif;
-  left: 0;
-  max-width: 30vw;
-  padding: 4px 8px;
-  position: absolute;
-  top: 0;
-  transform: translate(5px, calc(-100% - 5px));
-  white-space: pre-wrap;
-  z-index: 99999;
-}
--- a/web/assets/GraphView-BGt8GmeB.css
+++ b/web/assets/GraphView-BGt8GmeB.css
@ -0,0 +1,792 @@
+
+.editable-text[data-v-54da6fc9] {
+  display: inline;
+}
+.editable-text input[data-v-54da6fc9] {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.group-title-editor.node-title-editor[data-v-fc3f26e3] {
+  z-index: 9999;
+  padding: 0.25rem;
+}
+[data-v-fc3f26e3] .editable-text {
+  width: 100%;
+  height: 100%;
+}
+[data-v-fc3f26e3] .editable-text input {
+  width: 100%;
+  height: 100%;
+  /* Override the default font size */
+  font-size: inherit;
+}
+
+.side-bar-button-icon {
+  font-size: var(--sidebar-icon-size) !important;
+}
+.side-bar-button-selected .side-bar-button-icon {
+  font-size: var(--sidebar-icon-size) !important;
+  font-weight: bold;
+}
+
+.side-bar-button[data-v-caa3ee9c] {
+  width: var(--sidebar-width);
+  height: var(--sidebar-width);
+  border-radius: 0;
+}
+.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c],
+.comfyui-body-left .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover {
+  border-left: 4px solid var(--p-button-text-primary-color);
+}
+.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c],
+.comfyui-body-right .side-bar-button.side-bar-button-selected[data-v-caa3ee9c]:hover {
+  border-right: 4px solid var(--p-button-text-primary-color);
+}
+
+:root {
+  --sidebar-width: 64px;
+  --sidebar-icon-size: 1.5rem;
+}
+:root .small-sidebar {
+  --sidebar-width: 40px;
+  --sidebar-icon-size: 1rem;
+}
+
+.side-tool-bar-container[data-v-4da64512] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  pointer-events: auto;
+
+  width: var(--sidebar-width);
+  height: 100%;
+
+  background-color: var(--comfy-menu-bg);
+  color: var(--fg-color);
+}
+.side-tool-bar-end[data-v-4da64512] {
+  align-self: flex-end;
+  margin-top: auto;
+}
+.sidebar-content-container[data-v-4da64512] {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.p-splitter-gutter {
+  pointer-events: auto;
+}
+.gutter-hidden {
+  display: none !important;
+}
+
+.side-bar-panel[data-v-b9df3042] {
+  background-color: var(--bg-color);
+  pointer-events: auto;
+}
+.splitter-overlay[data-v-b9df3042] {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: transparent;
+  pointer-events: none;
+  /* Set it the same as the ComfyUI menu */
+  /* Note: Lite-graph DOM widgets have the same z-index as the node id, so
+  999 should be sufficient to make sure splitter overlays on node's DOM
+  widgets */
+  z-index: 999;
+  border: none;
+}
+
+._content[data-v-e7b35fd9] {
+
+    display: flex;
+
+    flex-direction: column
+}
+._content[data-v-e7b35fd9] > :not([hidden]) ~ :not([hidden]) {
+
+    --tw-space-y-reverse: 0;
+
+    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+
+    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
+}
+._footer[data-v-e7b35fd9] {
+
+    display: flex;
+
+    flex-direction: column;
+
+    align-items: flex-end;
+
+    padding-top: 1rem
+}
+
+[data-v-37f672ab] .highlight {
+  background-color: var(--p-primary-color);
+  color: var(--p-primary-contrast-color);
+  font-weight: bold;
+  border-radius: 0.25rem;
+  padding: 0rem 0.125rem;
+  margin: -0.125rem 0.125rem;
+}
+
+.slot_row[data-v-ff07c900] {
+  padding: 2px;
+}
+
+/* Original N-Sidebar styles */
+._sb_dot[data-v-ff07c900] {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: grey;
+}
+.node_header[data-v-ff07c900] {
+  line-height: 1;
+  padding: 8px 13px 7px;
+  margin-bottom: 5px;
+  font-size: 15px;
+  text-wrap: nowrap;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.headdot[data-v-ff07c900] {
+  width: 10px;
+  height: 10px;
+  float: inline-start;
+  margin-right: 8px;
+}
+.IMAGE[data-v-ff07c900] {
+  background-color: #64b5f6;
+}
+.VAE[data-v-ff07c900] {
+  background-color: #ff6e6e;
+}
+.LATENT[data-v-ff07c900] {
+  background-color: #ff9cf9;
+}
+.MASK[data-v-ff07c900] {
+  background-color: #81c784;
+}
+.CONDITIONING[data-v-ff07c900] {
+  background-color: #ffa931;
+}
+.CLIP[data-v-ff07c900] {
+  background-color: #ffd500;
+}
+.MODEL[data-v-ff07c900] {
+  background-color: #b39ddb;
+}
+.CONTROL_NET[data-v-ff07c900] {
+  background-color: #a5d6a7;
+}
+._sb_node_preview[data-v-ff07c900] {
+  background-color: var(--comfy-menu-bg);
+  font-family: 'Open Sans', sans-serif;
+  font-size: small;
+  color: var(--descrip-text);
+  border: 1px solid var(--descrip-text);
+  min-width: 300px;
+  width: -moz-min-content;
+  width: min-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  z-index: 9999;
+  border-radius: 12px;
+  overflow: hidden;
+  font-size: 12px;
+  padding-bottom: 10px;
+}
+._sb_node_preview ._sb_description[data-v-ff07c900] {
+  margin: 10px;
+  padding: 6px;
+  background: var(--border-color);
+  border-radius: 5px;
+  font-style: italic;
+  font-weight: 500;
+  font-size: 0.9rem;
+  word-break: break-word;
+}
+._sb_table[data-v-ff07c900] {
+  display: grid;
+
+  grid-column-gap: 10px;
+  /* Spazio tra le colonne */
+  width: 100%;
+  /* Imposta la larghezza della tabella al 100% del contenitore */
+}
+._sb_row[data-v-ff07c900] {
+  display: grid;
+  grid-template-columns: 10px 1fr 1fr 1fr 10px;
+  grid-column-gap: 10px;
+  align-items: center;
+  padding-left: 9px;
+  padding-right: 9px;
+}
+._sb_row_string[data-v-ff07c900] {
+  grid-template-columns: 10px 1fr 1fr 10fr 1fr;
+}
+._sb_col[data-v-ff07c900] {
+  border: 0px solid #000;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: row-reverse;
+  flex-wrap: nowrap;
+  align-content: flex-start;
+  justify-content: flex-end;
+}
+._sb_inherit[data-v-ff07c900] {
+  display: inherit;
+}
+._long_field[data-v-ff07c900] {
+  background: var(--bg-color);
+  border: 2px solid var(--border-color);
+  margin: 5px 5px 0 5px;
+  border-radius: 10px;
+  line-height: 1.7;
+  text-wrap: nowrap;
+}
+._sb_arrow[data-v-ff07c900] {
+  color: var(--fg-color);
+}
+._sb_preview_badge[data-v-ff07c900] {
+  text-align: center;
+  background: var(--comfy-input-bg);
+  font-weight: bold;
+  color: var(--error-text);
+}
+
+.comfy-vue-node-search-container[data-v-2d409367] {
+  display: flex;
+  width: 100%;
+  min-width: 26rem;
+  align-items: center;
+  justify-content: center;
+}
+.comfy-vue-node-search-container[data-v-2d409367] * {
+  pointer-events: auto;
+}
+.comfy-vue-node-preview-container[data-v-2d409367] {
+  position: absolute;
+  left: -350px;
+  top: 50px;
+}
+.comfy-vue-node-search-box[data-v-2d409367] {
+  z-index: 10;
+  flex-grow: 1;
+}
+._filter-button[data-v-2d409367] {
+  z-index: 10;
+}
+._dialog[data-v-2d409367] {
+  min-width: 26rem;
+}
+
+.invisible-dialog-root {
+  width: 60%;
+  min-width: 24rem;
+  max-width: 48rem;
+  border: 0 !important;
+  background-color: transparent !important;
+  margin-top: 25vh;
+  margin-left: 400px;
+}
+@media all and (max-width: 768px) {
+.invisible-dialog-root {
+    margin-left: 0px;
+}
+}
+.node-search-box-dialog-mask {
+  align-items: flex-start !important;
+}
+
+.node-tooltip[data-v-0a4402f9] {
+  background: var(--comfy-input-bg);
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  color: var(--input-text);
+  font-family: sans-serif;
+  left: 0;
+  max-width: 30vw;
+  padding: 4px 8px;
+  position: absolute;
+  top: 0;
+  transform: translate(5px, calc(-100% - 5px));
+  white-space: pre-wrap;
+  z-index: 99999;
+}
+
+.p-buttongroup-vertical[data-v-ce8bd6ac] {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--p-button-border-radius);
+  overflow: hidden;
+  border: 1px solid var(--p-panel-border-color);
+}
+.p-buttongroup-vertical .p-button[data-v-ce8bd6ac] {
+  margin: 0;
+  border-radius: 0;
+}
+
+.comfy-image-wrap[data-v-9bc23daf] {
+  display: contents;
+}
+.comfy-image-blur[data-v-9bc23daf] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.comfy-image-main[data-v-9bc23daf] {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+  z-index: 1;
+}
+.contain .comfy-image-wrap[data-v-9bc23daf] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.contain .comfy-image-main[data-v-9bc23daf] {
+  -o-object-fit: contain;
+     object-fit: contain;
+  -webkit-backdrop-filter: blur(10px);
+          backdrop-filter: blur(10px);
+  position: absolute;
+}
+.broken-image-placeholder[data-v-9bc23daf] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  margin: 2rem;
+}
+.broken-image-placeholder i[data-v-9bc23daf] {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.result-container[data-v-d9c060ae] {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.image-preview-mask[data-v-d9c060ae] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 1;
+}
+.result-container:hover .image-preview-mask[data-v-d9c060ae] {
+  opacity: 1;
+}
+
+.task-result-preview[data-v-d4c8a1fe] {
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.task-result-preview i[data-v-d4c8a1fe],
+.task-result-preview span[data-v-d4c8a1fe] {
+  font-size: 2rem;
+}
+.task-item[data-v-d4c8a1fe] {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+.task-item-details[data-v-d4c8a1fe] {
+  position: absolute;
+  bottom: 0;
+  padding: 0.6rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  z-index: 1;
+}
+.task-node-link[data-v-d4c8a1fe] {
+  padding: 2px;
+}
+
+/* In dark mode, transparent background color for tags is not ideal for tags that
+are floating on top of images. */
+.tag-wrapper[data-v-d4c8a1fe] {
+  background-color: var(--p-primary-contrast-color);
+  border-radius: 6px;
+  display: inline-flex;
+}
+.node-name-tag[data-v-d4c8a1fe] {
+  word-break: break-all;
+}
+.status-tag-group[data-v-d4c8a1fe] {
+  display: flex;
+  flex-direction: column;
+}
+.progress-preview-img[data-v-d4c8a1fe] {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+}
+
+/* PrimeVue's galleria teleports the fullscreen gallery out of subtree so we
+cannot use scoped style here. */
+img.galleria-image {
+  max-width: 100vw;
+  max-height: 100vh;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.p-galleria-close-button {
+  /* Set z-index so the close button doesn't get hidden behind the image when image is large */
+  z-index: 1;
+}
+
+.comfy-vue-side-bar-container[data-v-1b0a8fe3] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+.comfy-vue-side-bar-header[data-v-1b0a8fe3] {
+  flex-shrink: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  border-radius: 0;
+  padding: 0.25rem 1rem;
+  min-height: 2.5rem;
+}
+.comfy-vue-side-bar-header-span[data-v-1b0a8fe3] {
+  font-size: small;
+}
+.comfy-vue-side-bar-body[data-v-1b0a8fe3] {
+  flex-grow: 1;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+.comfy-vue-side-bar-body[data-v-1b0a8fe3]::-webkit-scrollbar {
+  width: 1px;
+}
+.comfy-vue-side-bar-body[data-v-1b0a8fe3]::-webkit-scrollbar-thumb {
+  background-color: transparent;
+}
+
+.scroll-container[data-v-08fa89b1] {
+  height: 100%;
+  overflow-y: auto;
+}
+.queue-grid[data-v-08fa89b1] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  padding: 0.5rem;
+  gap: 0.5rem;
+}
+
+.tree-node[data-v-633e27ab] {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.leaf-count-badge[data-v-633e27ab] {
+  margin-left: 0.5rem;
+}
+.node-content[data-v-633e27ab] {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+.leaf-label[data-v-633e27ab] {
+  margin-left: 0.5rem;
+}
+[data-v-633e27ab] .editable-text span {
+  word-break: break-all;
+}
+
+[data-v-bd7bae90] .tree-explorer-node-label {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: var(--p-tree-node-gap);
+  flex-grow: 1;
+}
+
+/*
+ * The following styles are necessary to avoid layout shift when dragging nodes over folders.
+ * By setting the position to relative on the parent and using an absolutely positioned pseudo-element,
+ * we can create a visual indicator for the drop target without affecting the layout of other elements.
+ */
+[data-v-bd7bae90] .p-tree-node-content:has(.tree-folder) {
+  position: relative;
+}
+[data-v-bd7bae90] .p-tree-node-content:has(.tree-folder.can-drop)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid var(--p-content-color);
+  pointer-events: none;
+}
+
+.node-lib-node-container[data-v-90dfee08] {
+    height: 100%;
+    width: 100%
+}
+
+.p-selectbutton .p-button[data-v-91077f2a] {
+  padding: 0.5rem;
+}
+.p-selectbutton .p-button .pi[data-v-91077f2a] {
+  font-size: 1.5rem;
+}
+.field[data-v-91077f2a] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.color-picker-container[data-v-91077f2a] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.node-lib-filter-popup {
+  margin-left: -13px;
+}
+
+[data-v-f6a7371a] .comfy-vue-side-bar-body {
+  background: var(--p-tree-background);
+}
+[data-v-f6a7371a] .node-lib-bookmark-tree-explorer {
+  padding-bottom: 2px;
+}
+[data-v-f6a7371a] .p-divider {
+  margin: var(--comfy-tree-explorer-item-padding) 0px;
+}
+
+.model_preview[data-v-32e6c4d9] {
+  background-color: var(--comfy-menu-bg);
+  font-family: 'Open Sans', sans-serif;
+  color: var(--descrip-text);
+  border: 1px solid var(--descrip-text);
+  min-width: 300px;
+  max-width: 500px;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  z-index: 9999;
+  border-radius: 12px;
+  overflow: hidden;
+  font-size: 12px;
+  padding: 10px;
+}
+.model_preview_image[data-v-32e6c4d9] {
+  margin: auto;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.model_preview_image img[data-v-32e6c4d9] {
+  max-width: 100%;
+  max-height: 150px;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.model_preview_title[data-v-32e6c4d9] {
+  font-weight: bold;
+  text-align: center;
+  font-size: 14px;
+}
+.model_preview_top_container[data-v-32e6c4d9] {
+  text-align: center;
+  line-height: 0.5;
+}
+.model_preview_filename[data-v-32e6c4d9],
+.model_preview_author[data-v-32e6c4d9],
+.model_preview_architecture[data-v-32e6c4d9] {
+  display: inline-block;
+  text-align: center;
+  margin: 5px;
+  font-size: 10px;
+}
+.model_preview_prefix[data-v-32e6c4d9] {
+  font-weight: bold;
+}
+
+.model-lib-model-icon-container[data-v-70b69131] {
+  display: inline-block;
+  position: relative;
+  left: 0;
+  height: 1.5rem;
+  vertical-align: top;
+  width: 0px;
+}
+.model-lib-model-icon[data-v-70b69131] {
+  background-size: cover;
+  background-position: center;
+  display: inline-block;
+  position: relative;
+  left: -2.5rem;
+  height: 2rem;
+  width: 2rem;
+  vertical-align: top;
+}
+
+.pi-fake-spacer {
+  height: 1px;
+  width: 16px;
+}
+
+[data-v-74b01bce] .comfy-vue-side-bar-body {
+  background: var(--p-tree-background);
+}
+
+[data-v-d2d58252] .comfy-vue-side-bar-body {
+  background: var(--p-tree-background);
+}
+
+[data-v-84e785b8] .p-togglebutton::before {
+  display: none
+}
+[data-v-84e785b8] .p-togglebutton {
+  position: relative;
+  flex-shrink: 0;
+  border-radius: 0px;
+  background-color: transparent;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem
+}
+[data-v-84e785b8] .p-togglebutton.p-togglebutton-checked {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--p-button-text-primary-color)
+}
+[data-v-84e785b8] .p-togglebutton-checked .close-button,[data-v-84e785b8] .p-togglebutton:hover .close-button {
+  visibility: visible
+}
+.status-indicator[data-v-84e785b8] {
+  position: absolute;
+  font-weight: 700;
+  font-size: 1.5rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%)
+}
+[data-v-84e785b8] .p-togglebutton:hover .status-indicator {
+  display: none
+}
+[data-v-84e785b8] .p-togglebutton .close-button {
+  visibility: hidden
+}
+
+.top-menubar[data-v-2ec1b620] .p-menubar-item-link svg {
+  display: none;
+}
+[data-v-2ec1b620] .p-menubar-submenu.dropdown-direction-up {
+  top: auto;
+  bottom: 100%;
+  flex-direction: column-reverse;
+}
+.keybinding-tag[data-v-2ec1b620] {
+  background: var(--p-content-hover-background);
+  border-color: var(--p-content-border-color);
+  border-style: solid;
+}
+
+[data-v-713442be] .p-inputtext {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.comfyui-queue-button[data-v-fcd3efcd] .p-splitbutton-dropdown {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.actionbar[data-v-bc6c78dd] {
+  pointer-events: all;
+  position: fixed;
+  z-index: 1000;
+}
+.actionbar.is-docked[data-v-bc6c78dd] {
+  position: static;
+  border-style: none;
+  background-color: transparent;
+  padding: 0px;
+}
+.actionbar.is-dragging[data-v-bc6c78dd] {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+[data-v-bc6c78dd] .p-panel-content {
+  padding: 0.25rem;
+}
+[data-v-bc6c78dd] .p-panel-header {
+  display: none;
+}
+
+.comfyui-menu[data-v-b13fdc92] {
+  width: 100vw;
+  background: var(--comfy-menu-bg);
+  color: var(--fg-color);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.8em;
+  box-sizing: border-box;
+  z-index: 1000;
+  order: 0;
+  grid-column: 1/-1;
+  max-height: 90vh;
+}
+.comfyui-menu.dropzone[data-v-b13fdc92] {
+  background: var(--p-highlight-background);
+}
+.comfyui-menu.dropzone-active[data-v-b13fdc92] {
+  background: var(--p-highlight-background-focus);
+}
+.comfyui-logo[data-v-b13fdc92] {
+  font-size: 1.2em;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default;
+}
--- a/web/assets/GraphView-BeahKroI.js
+++ b/web/assets/GraphView-BeahKroI.js
--- a/web/assets/GraphView-BeahKroI.js.map
+++ b/web/assets/GraphView-BeahKroI.js.map
--- a/web/assets/GraphView-CVV2XJjS.js
+++ b/web/assets/GraphView-CVV2XJjS.js
--- a/web/assets/GraphView-CVV2XJjS.js.map
+++ b/web/assets/GraphView-CVV2XJjS.js.map
--- a/web/assets/colorPalette-D5oi2-2V.js
+++ b/web/assets/colorPalette-D5oi2-2V.js
@ -0,0 +1,865 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { k as app, aP as LGraphCanvas, bO as useToastStore, ca as $el, z as LiteGraph } from "./index-DGAbdBYF.js";
+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",
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        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",
+        BADGE_FG_COLOR: "#FFF",
+        BADGE_BG_COLOR: "#0F1F0F"
+      },
+      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",
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        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",
+        BADGE_FG_COLOR: "#000",
+        BADGE_BG_COLOR: "#FFF"
+      },
+      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
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        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",
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        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",
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        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",
+        NODE_BYPASS_BGCOLOR: "#FF00FF",
+        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 = {
+  select: null
+};
+const getCustomColorPalettes = /* @__PURE__ */ __name(() => {
+  return app.ui.settings.getSettingValue(idCustomColorPalettes, {});
+}, "getCustomColorPalettes");
+const setCustomColorPalettes = /* @__PURE__ */ __name((customColorPalettes) => {
+  return app.ui.settings.setSettingValue(
+    idCustomColorPalettes,
+    customColorPalettes
+  );
+}, "setCustomColorPalettes");
+const defaultColorPalette = colorPalettes[defaultColorPaletteId];
+const getColorPalette = /* @__PURE__ */ __name((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];
+}, "getColorPalette");
+const setColorPalette = /* @__PURE__ */ __name((colorPaletteId) => {
+  app.ui.settings.setSettingValue(id, colorPaletteId);
+}, "setColorPalette");
+app.registerExtension({
+  name: id,
+  init() {
+    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;
+    };
+  },
+  addCustomNodeDefs(node_defs) {
+    const sortObjectKeys = /* @__PURE__ */ __name((unordered) => {
+      return Object.keys(unordered).sort().reduce((obj, key) => {
+        obj[key] = unordered[key];
+        return obj;
+      }, {});
+    }, "sortObjectKeys");
+    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"] !== void 0) {
+          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;
+    }
+    __name(getSlotTypes, "getSlotTypes");
+    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;
+    }
+    __name(completeColorPalette, "completeColorPalette");
+    const getColorPaletteTemplate = /* @__PURE__ */ __name(async () => {
+      let colorPalette = {
+        id: "my_color_palette_unique_id",
+        name: "My Color Palette",
+        colors: {
+          node_slot: {},
+          litegraph_base: {},
+          comfy_base: {}
+        }
+      };
+      const defaultColorPalette2 = colorPalettes[defaultColorPaletteId];
+      for (const key in defaultColorPalette2.colors.litegraph_base) {
+        if (!colorPalette.colors.litegraph_base[key]) {
+          colorPalette.colors.litegraph_base[key] = "";
+        }
+      }
+      for (const key in defaultColorPalette2.colors.comfy_base) {
+        if (!colorPalette.colors.comfy_base[key]) {
+          colorPalette.colors.comfy_base[key] = "";
+        }
+      }
+      return completeColorPalette(colorPalette);
+    }, "getColorPaletteTemplate");
+    const addCustomColorPalette = /* @__PURE__ */ __name(async (colorPalette) => {
+      if (typeof colorPalette !== "object") {
+        useToastStore().addAlert("Invalid color palette.");
+        return;
+      }
+      if (!colorPalette.id) {
+        useToastStore().addAlert("Color palette missing id.");
+        return;
+      }
+      if (!colorPalette.name) {
+        useToastStore().addAlert("Color palette missing name.");
+        return;
+      }
+      if (!colorPalette.colors) {
+        useToastStore().addAlert("Color palette missing colors.");
+        return;
+      }
+      if (colorPalette.colors.node_slot && typeof colorPalette.colors.node_slot !== "object") {
+        useToastStore().addAlert("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);
+    }, "addCustomColorPalette");
+    const deleteCustomColorPalette = /* @__PURE__ */ __name(async (colorPaletteId) => {
+      const customColorPalettes = getCustomColorPalettes();
+      delete customColorPalettes[colorPaletteId];
+      setCustomColorPalettes(customColorPalettes);
+      for (const opt of els.select.childNodes) {
+        const option = opt;
+        if (option.value === defaultColorPaletteId) {
+          option.selected = true;
+        }
+        if (option.value === "custom_" + colorPaletteId) {
+          els.select.removeChild(option);
+        }
+      }
+      setColorPalette(defaultColorPaletteId);
+      await loadColorPalette(getColorPalette());
+    }, "deleteCustomColorPalette");
+    const loadColorPalette = /* @__PURE__ */ __name(async (colorPalette) => {
+      colorPalette = await completeColorPalette(colorPalette);
+      if (colorPalette.colors) {
+        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
+          );
+        }
+        if (colorPalette.colors.litegraph_base) {
+          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];
+            }
+          }
+        }
+        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]
+            );
+          }
+        }
+        if (colorPalette.colors.litegraph_base.NODE_BYPASS_BGCOLOR) {
+          app.bypassBgColor = colorPalette.colors.litegraph_base.NODE_BYPASS_BGCOLOR;
+        }
+        app.canvas.draw(true, true);
+      }
+    }, "loadColorPalette");
+    const fileInput = $el("input", {
+      type: "file",
+      accept: ".json",
+      style: { display: "none" },
+      parent: document.body,
+      onchange: /* @__PURE__ */ __name(() => {
+        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);
+        }
+      }, "onchange")
+    });
+    app.ui.settings.addSetting({
+      id,
+      category: ["Comfy", "ColorPalette"],
+      name: "Color Palette",
+      type: /* @__PURE__ */ __name((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: /* @__PURE__ */ __name((e) => {
+              setter(e.target.value);
+            }, "onchange")
+          },
+          options
+        );
+        return $el("tr", [
+          $el("td", [
+            els.select,
+            $el(
+              "div",
+              {
+                style: {
+                  display: "grid",
+                  gap: "4px",
+                  gridAutoFlow: "column"
+                }
+              },
+              [
+                $el("input", {
+                  type: "button",
+                  value: "Export",
+                  onclick: /* @__PURE__ */ __name(async () => {
+                    const colorPaletteId = app.ui.settings.getSettingValue(
+                      id,
+                      defaultColorPaletteId
+                    );
+                    const colorPalette = await completeColorPalette(
+                      getColorPalette(colorPaletteId)
+                    );
+                    const json = JSON.stringify(colorPalette, null, 2);
+                    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);
+                  }, "onclick")
+                }),
+                $el("input", {
+                  type: "button",
+                  value: "Import",
+                  onclick: /* @__PURE__ */ __name(() => {
+                    fileInput.click();
+                  }, "onclick")
+                }),
+                $el("input", {
+                  type: "button",
+                  value: "Template",
+                  onclick: /* @__PURE__ */ __name(async () => {
+                    const colorPalette = await getColorPaletteTemplate();
+                    const json = JSON.stringify(colorPalette, null, 2);
+                    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);
+                  }, "onclick")
+                }),
+                $el("input", {
+                  type: "button",
+                  value: "Delete",
+                  onclick: /* @__PURE__ */ __name(async () => {
+                    let colorPaletteId = app.ui.settings.getSettingValue(
+                      id,
+                      defaultColorPaletteId
+                    );
+                    if (colorPalettes[colorPaletteId]) {
+                      useToastStore().addAlert(
+                        "You cannot delete a built-in color palette."
+                      );
+                      return;
+                    }
+                    if (colorPaletteId.startsWith("custom_")) {
+                      colorPaletteId = colorPaletteId.substr(7);
+                    }
+                    await deleteCustomColorPalette(colorPaletteId);
+                  }, "onclick")
+                })
+              ]
+            )
+          ])
+        ]);
+      }, "type"),
+      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 === void 0 || CLEAR_BACKGROUND_COLOR === void 0) {
+          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);
+      }
+    });
+  }
+});
+window.comfyAPI = window.comfyAPI || {};
+window.comfyAPI.colorPalette = window.comfyAPI.colorPalette || {};
+window.comfyAPI.colorPalette.defaultColorPalette = defaultColorPalette;
+window.comfyAPI.colorPalette.getColorPalette = getColorPalette;
+export {
+  defaultColorPalette as d,
+  getColorPalette as g
+};
+//# sourceMappingURL=colorPalette-D5oi2-2V.js.map
--- a/web/assets/colorPalette-D5oi2-2V.js.map
+++ b/web/assets/colorPalette-D5oi2-2V.js.map
--- a/web/assets/index-BHJGjcJh.css
+++ b/web/assets/index-BHJGjcJh.css
--- a/web/assets/index-BMC1ey-i.js
+++ b/web/assets/index-BMC1ey-i.js
@ -1,6 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { aM as ComfyDialog, aN as $el, aO as ComfyApp, c as app, k as LiteGraph, aH as LGraphCanvas, e as LGraphNode, aP as applyTextReplacements, aQ as ComfyWidgets, aR as addValueControlWidgets, aS as DraggableList, av as useNodeDefStore, aT as api, L as LGraphGroup, aU as useToastStore, at as NodeSourceType, aV as NodeBadgeMode, u as useSettingStore, q as computed, aW as getColorPalette, w as watch, aX as BadgePosition, aJ as LGraphBadge$1, aY as _, aZ as defaultColorPalette } from "./index-exUB01hM.js";
+import { c9 as ComfyDialog, ca as $el, cb as ComfyApp, k as app, z as LiteGraph, aP as LGraphCanvas, cc as DraggableList, bO as useToastStore, aq as useNodeDefStore, b4 as api, L as LGraphGroup, cd as KeyComboImpl, aT as useKeybindingStore, aL as useCommandStore, l as LGraphNode, ce as ComfyWidgets, cf as applyTextReplacements, aA as NodeSourceType, cg as NodeBadgeMode, h as useSettingStore, F as computed, w as watch, ch as BadgePosition, aR as LGraphBadge, au as _ } from "./index-DGAbdBYF.js";
+import { g as getColorPalette, d as defaultColorPalette } from "./colorPalette-D5oi2-2V.js";
+import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs-DdoWwzg5.js";
 class ClipspaceDialog extends ComfyDialog {
  static {
    __name(this, "ClipspaceDialog");
@ -423,731 +425,6 @@ app.registerExtension({
    window.addEventListener("keydown", editAttention);
  }
 });
-const CONVERTED_TYPE = "converted-widget";
-const VALID_TYPES = ["STRING", "combo", "number", "toggle", "BOOLEAN"];
-const CONFIG = Symbol();
-const GET_CONFIG = Symbol();
-const TARGET = Symbol();
-const replacePropertyName = "Run widget replace on values";
-class PrimitiveNode extends LGraphNode {
-  static {
-    __name(this, "PrimitiveNode");
-  }
-  controlValues;
-  lastType;
-  static category;
-  constructor(title) {
-    super(title);
-    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 links2 = [];
-      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") {
-          links2 = links2.concat(get_links(n));
-        } else {
-          links2.push(l);
-        }
-      }
-      return links2;
-    }
-    __name(get_links, "get_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 (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;
-      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];
-          }
-        }
-      }
-      this.#mergeWidgetConfig();
-    }
-  }
-  onConnectionsChange(_2, index, connected) {
-    if (app.configuringGraph) {
-      return;
-    }
-    const links = this.outputs[0].links;
-    if (connected) {
-      if (links?.length && !this.widgets?.length) {
-        this.#onFirstConnection();
-      }
-    } else {
-      this.#mergeWidgetConfig();
-      if (!links?.length) {
-        this.onLastDisconnect();
-      }
-    }
-  }
-  onConnectOutput(slot, type, input, target_node, target_slot) {
-    if (!input.widget) {
-      if (!(input.type in ComfyWidgets)) return false;
-    }
-    if (this.outputs[slot].links?.length) {
-      const valid = this.#isValidConnection(input);
-      if (valid) {
-        this.applyToGraph([{ target_id: target_node.id, target_slot }]);
-      }
-      return valid;
-    }
-  }
-  #onFirstConnection(recreating) {
-    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, {}] };
-    } else {
-      widget = input.widget;
-    }
-    const config = widget[GET_CONFIG]?.();
-    if (!config) return;
-    const { type } = getWidgetType(config);
-    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";
-    }
-    const size = this.size;
-    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,
-        void 0,
-        inputData
-      );
-      let filter = this.widgets_values?.[2];
-      if (filter && this.widgets.length === 3) {
-        this.widgets[2].value = filter;
-      }
-    }
-    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];
-      }
-    }
-    const callback = widget.callback;
-    const self = this;
-    widget.callback = function() {
-      const r = callback ? callback.apply(this, arguments) : void 0;
-      self.applyToGraph();
-      return r;
-    };
-    this.size = [
-      Math.max(this.size[0], size[0]),
-      Math.max(this.size[1], size[1])
-    ];
-    if (!recreating) {
-      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() {
-    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) {
-      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;
-      const theirNode = app.graph.getNodeById(link.target_id);
-      const theirInput = theirNode.inputs[link.target_slot];
-      this.#isValidConnection(theirInput, hasConfig);
-    }
-  }
-  #isValidConnection(input, forceUpdate) {
-    const output = this.outputs[0];
-    const config2 = input.widget[GET_CONFIG]();
-    return !!mergeIfValid.call(
-      this,
-      output,
-      config2,
-      forceUpdate,
-      this.recreateWidget
-    );
-  }
-  #removeWidgets() {
-    if (this.widgets) {
-      for (const w of this.widgets) {
-        if (w.onRemove) {
-          w.onRemove();
-        }
-      }
-      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() {
-    this.outputs[0].type = "*";
-    this.outputs[0].name = "connect to widget input";
-    delete this.outputs[0].widget;
-    this.#removeWidgets();
-  }
-}
-function getWidgetConfig(slot) {
-  return slot.widget[CONFIG] ?? slot.widget[GET_CONFIG]();
-}
-__name(getWidgetConfig, "getWidgetConfig");
-function getConfig(widgetName) {
-  const { nodeData } = this.constructor;
-  return nodeData?.input?.required?.[widgetName] ?? nodeData?.input?.optional?.[widgetName];
-}
-__name(getConfig, "getConfig");
-function isConvertibleWidget(widget, config) {
-  return (VALID_TYPES.includes(widget.type) || VALID_TYPES.includes(config[0])) && !widget.options?.forceInput;
-}
-__name(isConvertibleWidget, "isConvertibleWidget");
-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];
-  widget.type = CONVERTED_TYPE + suffix;
-  widget.serializeValue = () => {
-    if (!node.inputs) {
-      return void 0;
-    }
-    let node_input = node.inputs.find((i) => i.widget?.name === widget.name);
-    if (!node_input || !node_input.link) {
-      return void 0;
-    }
-    return widget.origSerializeValue ? widget.origSerializeValue() : widget.value;
-  };
-  if (widget.linkedWidgets) {
-    for (const w of widget.linkedWidgets) {
-      hideWidget(node, w, ":" + widget.name);
-    }
-  }
-}
-__name(hideWidget, "hideWidget");
-function showWidget(widget) {
-  widget.type = widget.origType;
-  widget.computeSize = widget.origComputeSize;
-  widget.serializeValue = widget.origSerializeValue;
-  delete widget.origType;
-  delete widget.origComputeSize;
-  delete widget.origSerializeValue;
-  if (widget.linkedWidgets) {
-    for (const w of widget.linkedWidgets) {
-      showWidget(w);
-    }
-  }
-}
-__name(showWidget, "showWidget");
-function convertToInput(node, widget, config) {
-  hideWidget(node, widget);
-  const { type } = getWidgetType(config);
-  const sz = node.size;
-  const inputIsOptional = !!widget.options?.inputIsOptional;
-  node.addInput(widget.name, type, {
-    // @ts-expect-error GET_CONFIG is not defined in LiteGraph
-    widget: { name: widget.name, [GET_CONFIG]: () => config },
-    // @ts-expect-error LiteGraph.SlotShape is not typed.
-    ...inputIsOptional ? { shape: LiteGraph.SlotShape.HollowCircle } : {}
-  });
-  for (const widget2 of node.widgets) {
-    widget2.last_y += LiteGraph.NODE_SLOT_HEIGHT;
-  }
-  node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
-}
-__name(convertToInput, "convertToInput");
-function convertToWidget(node, widget) {
-  showWidget(widget);
-  const sz = node.size;
-  node.removeInput(node.inputs.findIndex((i) => i.widget?.name === widget.name));
-  for (const widget2 of node.widgets) {
-    widget2.last_y -= LiteGraph.NODE_SLOT_HEIGHT;
-  }
-  node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
-}
-__name(convertToWidget, "convertToWidget");
-function getWidgetType(config) {
-  let type = config[0];
-  if (type instanceof Array) {
-    type = "COMBO";
-  }
-  return { type };
-}
-__name(getWidgetType, "getWidgetType");
-function isValidCombo(combo, obj) {
-  if (!(obj instanceof Array)) {
-    console.log(`connection rejected: tried to connect combo to ${obj}`);
-    return false;
-  }
-  if (combo.length !== obj.length) {
-    console.log(`connection rejected: combo lists dont match`);
-    return false;
-  }
-  if (combo.find((v, i) => obj[i] !== v)) {
-    console.log(`connection rejected: combo lists dont match`);
-    return false;
-  }
-  return true;
-}
-__name(isValidCombo, "isValidCombo");
-function isPrimitiveNode(node) {
-  return node.type === "PrimitiveNode";
-}
-__name(isPrimitiveNode, "isPrimitiveNode");
-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 (isPrimitiveNode(originNode)) {
-        if (config) {
-          originNode.recreateWidget();
-        } else if (!app.configuringGraph) {
-          originNode.disconnectOutput(0);
-          originNode.onLastDisconnect();
-        }
-      }
-    }
-  }
-}
-__name(setWidgetConfig, "setWidgetConfig");
-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;
-  } else if (config1[0] !== config2[0]) {
-    console.log(`connection rejected: types dont match`, config1[0], config2[0]);
-    return;
-  }
-  const keys = /* @__PURE__ */ new Set([
-    ...Object.keys(config1[1] ?? {}),
-    ...Object.keys(config2[1] ?? {})
-  ]);
-  let customConfig;
-  const getCustomConfig = /* @__PURE__ */ __name(() => {
-    if (!customConfig) {
-      if (typeof structuredClone === "undefined") {
-        customConfig = JSON.parse(JSON.stringify(config1[1] ?? {}));
-      } else {
-        customConfig = structuredClone(config1[1] ?? {});
-      }
-    }
-    return customConfig;
-  }, "getCustomConfig");
-  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;
-          }
-          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;
-          }
-          getCustomConfig()[k] = v1 == null ? v2 : v2 == null ? v1 : Math.min(v1, v2);
-          continue;
-        } else if (k === "step") {
-          let step;
-          if (v1 == null) {
-            step = v2;
-          } else if (v2 == null) {
-            step = v1;
-          } else {
-            if (v1 < v2) {
-              const a = v2;
-              v2 = v1;
-              v1 = a;
-            }
-            if (v1 % v2) {
-              console.log(
-                "connection rejected: steps not divisible",
-                "current:",
-                v1,
-                "new:",
-                v2
-              );
-              return;
-            }
-            step = v1;
-          }
-          getCustomConfig()[k] = step;
-          continue;
-        }
-      }
-      console.log(`connection rejected: config ${k} values dont match`, v1, v2);
-      return;
-    }
-  }
-  if (customConfig || forceUpdate) {
-    if (customConfig) {
-      output.widget[CONFIG] = [config1[0], customConfig];
-    }
-    const widget = recreateWidget?.call(this);
-    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 };
-}
-__name(mergeIfValid, "mergeIfValid");
-let useConversionSubmenusSetting;
-app.registerExtension({
-  name: "Comfy.WidgetInputs",
-  init() {
-    useConversionSubmenusSetting = app.ui.settings.addSetting({
-      id: "Comfy.NodeInputConversionSubmenus",
-      name: "In the node context menu, place the entries that convert between input/widget in sub-menus.",
-      type: "boolean",
-      defaultValue: true
-    });
-  },
-  async beforeRegisterNodeDef(nodeType, nodeData, app2) {
-    const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
-    nodeType.prototype.convertWidgetToInput = function(widget) {
-      const config = getConfig.call(this, widget.name) ?? [
-        widget.type,
-        widget.options || {}
-      ];
-      if (!isConvertibleWidget(widget, config)) return false;
-      convertToInput(this, widget, config);
-      return true;
-    };
-    nodeType.prototype.getExtraMenuOptions = function(_2, options) {
-      const r = origGetExtraMenuOptions ? origGetExtraMenuOptions.apply(this, arguments) : void 0;
-      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: /* @__PURE__ */ __name(() => convertToWidget(this, w), "callback")
-            });
-          } else {
-            const config = getConfig.call(this, w.name) ?? [
-              w.type,
-              w.options || {}
-            ];
-            if (isConvertibleWidget(w, config)) {
-              toInput.push({
-                content: `Convert ${w.name} to input`,
-                callback: /* @__PURE__ */ __name(() => convertToInput(this, w, config), "callback")
-              });
-            }
-          }
-        }
-        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;
-      this.widgets ??= [];
-      for (const input of this.inputs) {
-        if (input.widget) {
-          if (!input.widget[GET_CONFIG]) {
-            input.widget[GET_CONFIG] = () => getConfig.call(this, input.widget.name);
-          }
-          if (input.widget.config) {
-            if (input.widget.config[0] instanceof Array) {
-              input.type = "COMBO";
-              const link = app2.graph.links[input.link];
-              if (link) {
-                link.type = input.type;
-              }
-            }
-            delete input.widget.config;
-          }
-          const w = this.widgets.find((w2) => w2.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) : void 0;
-      if (!app2.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) : void 0;
-      if (!app2.configuringGraph && this.inputs) {
-        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((w2) => w2.name === input.widget.name);
-            if (w) {
-              hideWidget(this, w);
-            }
-          }
-        }
-      }
-      return r;
-    };
-    function isNodeAtPos(pos) {
-      for (const n of app2.graph.nodes) {
-        if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
-          return true;
-        }
-      }
-      return false;
-    }
-    __name(isNodeAtPos, "isNodeAtPos");
-    const origOnInputDblClick = nodeType.prototype.onInputDblClick;
-    const ignoreDblClick = Symbol();
-    nodeType.prototype.onInputDblClick = function(slot) {
-      const r = origOnInputDblClick ? origOnInputDblClick.apply(this, arguments) : void 0;
-      const input = this.inputs[slot];
-      if (!input.widget || !input[ignoreDblClick]) {
-        if (!(input.type in ComfyWidgets) && !(input.widget[GET_CONFIG]?.()?.[0] instanceof Array)) {
-          return r;
-        }
-      }
-      const node = LiteGraph.createNode("PrimitiveNode");
-      app2.graph.add(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;
-      input[ignoreDblClick] = true;
-      setTimeout(() => {
-        delete input[ignoreDblClick];
-      }, 300);
-      return r;
-    };
-    const onConnectInput = nodeType.prototype.onConnectInput;
-    nodeType.prototype.onConnectInput = function(targetSlot, type, output, originNode, originSlot) {
-      const v = onConnectInput?.(this, arguments);
-      if (type !== "COMBO") return v;
-      if (originNode.outputs[originSlot].widget) return v;
-      const targetCombo = this.inputs[targetSlot].widget?.[GET_CONFIG]?.()?.[0];
-      if (!targetCombo || !(targetCombo instanceof Array)) return v;
-      const originConfig = originNode.constructor?.nodeData?.output?.[originSlot];
-      if (!originConfig || !isValidCombo(targetCombo, originConfig)) {
-        return false;
-      }
-      return v;
-    };
-  },
-  registerCustomNodes() {
-    LiteGraph.registerNodeType(
-      "PrimitiveNode",
-      Object.assign(PrimitiveNode, {
-        title: "Primitive"
-      })
-    );
-    PrimitiveNode.category = "utils";
-  }
-});
-window.comfyAPI = window.comfyAPI || {};
-window.comfyAPI.widgetInputs = window.comfyAPI.widgetInputs || {};
-window.comfyAPI.widgetInputs.getWidgetConfig = getWidgetConfig;
-window.comfyAPI.widgetInputs.setWidgetConfig = setWidgetConfig;
-window.comfyAPI.widgetInputs.mergeIfValid = mergeIfValid;
 const ORDER = Symbol();
 const PREFIX$1 = "workflow";
 const SEPARATOR$1 = ">";
@ -1478,7 +755,7 @@ class ManageGroupDialog extends ComfyDialog {
                (n) => n.type === `${PREFIX$1}${SEPARATOR$1}` + this.selectedGroup
              );
              if (node) {
-                alert(
+                useToastStore().addAlert(
                  "This group node is in use in the current workflow, please first remove these."
                );
                return;
@ -1633,7 +910,7 @@ class GroupNodeBuilder {
    const used = Workflow.isInUseGroupNode(name);
    switch (used) {
      case Workflow.InUse.InWorkflow:
-        alert(
+        useToastStore().addAlert(
          "An in use group node with this name already exists embedded in this workflow, please remove any instances or use a new name."
        );
        return;
@ -2096,16 +1373,6 @@ class GroupNodeConfig {
    }
  }
  static async registerFromWorkflow(groupNodes, missingNodeTypes) {
-    const clean = app.clean;
-    app.clean = function() {
-      for (const g in groupNodes) {
-        try {
-          LiteGraph.unregisterNodeType(`${PREFIX}${SEPARATOR}` + g);
-        } catch (error) {
-        }
-      }
-      app.clean = clean;
-    };
    for (const g in groupNodes) {
      const groupData = groupNodes[g];
      let hasMissing = false;
@ -2757,6 +2024,9 @@ const ext$1 = {
  nodeCreated(node) {
    if (GroupNodeHandler.isGroupNode(node)) {
      node[GROUP] = new GroupNodeHandler(node);
+      if (node.title && node[GROUP]?.groupData?.nodeData) {
+        Workflow.storeGroupNode(node.title, node[GROUP].groupData.nodeData);
+      }
    }
  },
  async refreshComboInNodes(defs) {
@ -3030,37 +2300,21 @@ app.registerExtension({
  name: "Comfy.Keybinds",
  init() {
    const keybindListener = /* @__PURE__ */ __name(async function(event) {
-      const modifierPressed = event.ctrlKey || event.metaKey;
-      if (modifierPressed && event.key === "Enter") {
-        if (event.altKey) {
-          await api.interrupt();
-          useToastStore().add({
-            severity: "info",
-            summary: "Interrupted",
-            detail: "Execution has been interrupted",
-            life: 1e3
-          });
-          return;
-        }
-        app.queuePrompt(event.shiftKey ? -1 : 0).then();
+      if (!app.vueAppReady) return;
+      const keyCombo = KeyComboImpl.fromEvent(event);
+      if (keyCombo.isModifier) {
        return;
      }
      const target = event.composedPath()[0];
-      if (target.tagName === "TEXTAREA" || target.tagName === "INPUT" || target.tagName === "SPAN" && target.classList.contains("property_value")) {
+      if (!keyCombo.hasModifier && (target.tagName === "TEXTAREA" || target.tagName === "INPUT" || target.tagName === "SPAN" && target.classList.contains("property_value"))) {
        return;
      }
-      const modifierKeyIdMap = {
-        s: "#comfy-save-button",
-        o: "#comfy-file-input",
-        Backspace: "#comfy-clear-button",
-        d: "#comfy-load-default-button",
-        g: "#comfy-group-selected-nodes-button"
-      };
-      const modifierKeybindId = modifierKeyIdMap[event.key];
-      if (modifierPressed && modifierKeybindId) {
+      const keybindingStore = useKeybindingStore();
+      const commandStore = useCommandStore();
+      const keybinding = keybindingStore.getKeybinding(keyCombo);
+      if (keybinding && keybinding.targetSelector !== "#graph-canvas") {
+        await commandStore.execute(keybinding.commandId);
        event.preventDefault();
-        const elem = document.querySelector(modifierKeybindId);
-        elem.click();
        return;
      }
      if (event.ctrlKey || event.altKey || event.metaKey) {
@ -3079,18 +2333,8 @@ app.registerExtension({
          d.close();
        });
      }
-      const keyIdMap = {
-        q: ".queue-tab-button.side-bar-button",
-        h: ".queue-tab-button.side-bar-button",
-        r: "#comfy-refresh-button"
-      };
-      const buttonId = keyIdMap[event.key];
-      if (buttonId) {
-        const button = document.querySelector(buttonId);
-        button.click();
-      }
    }, "keybindListener");
-    window.addEventListener("keydown", keybindListener, true);
+    window.addEventListener("keydown", keybindListener);
  }
 });
 const id$1 = "Comfy.LinkRenderMode";
@ -3103,15 +2347,20 @@ const ext = {
      name: "Link Render Mode",
      defaultValue: 2,
      type: "combo",
-      // @ts-expect-error
-      options: [...LiteGraph.LINK_RENDER_MODES, "Hidden"].map((m, i) => ({
-        value: i,
-        text: m,
-        selected: i == app2.canvas.links_render_mode
-      })),
+      options: [
+        { value: LiteGraph.STRAIGHT_LINK, text: "Straight" },
+        { value: LiteGraph.LINEAR_LINK, text: "Linear" },
+        { value: LiteGraph.SPLINE_LINK, text: "Spline" },
+        { value: LiteGraph.HIDDEN_LINK, text: "Hidden" }
+      ],
      onChange(value) {
        app2.canvas.links_render_mode = +value;
-        app2.graph.setDirtyCanvas(true);
+        app2.canvas.setDirty(
+          /* fg */
+          false,
+          /* bg */
+          true
+        );
      }
    });
  }
@ -4140,7 +3389,7 @@ class ManageTemplates extends ComfyDialog {
        await api.storeUserData(file, templates, { stringify: false });
      } catch (error) {
        console.error(error);
-        alert(error.message);
+        useToastStore().addAlert(error.message);
      }
    } else {
      localStorage.setItem(id, JSON.stringify(this.templates));
@ -4169,7 +3418,7 @@ class ManageTemplates extends ComfyDialog {
  }
  exportAll() {
    if (this.templates.length == 0) {
-      alert("No templates to export.");
+      useToastStore().addAlert("No templates to export.");
      return;
    }
    const json = JSON.stringify({ templates: this.templates }, null, 2);
@ -4483,7 +3732,7 @@ app.registerExtension({
            this.onConnectionsChange(LiteGraph.INPUT, null, true, null);
          });
        };
-        this.onConnectionsChange = function(type, index, connected, link_info) {
+        this.onConnectionsChange = (type, index, connected, link_info) => {
          this.applyOrientation();
          if (connected && type === LiteGraph.OUTPUT) {
            const types = new Set(
@ -4661,6 +3910,7 @@ app.registerExtension({
            }, "callback")
          }
        );
+        return [];
      }
      applyOrientation() {
        this.horizontal = this.properties.horizontal;
@ -5112,7 +4362,7 @@ app.registerExtension({
        capture();
      } else if (!node.imgs?.length) {
        const err = `No webcam image captured`;
-        alert(err);
+        useToastStore().addAlert(err);
        throw new Error(err);
      }
      const blob = await new Promise((r) => canvas.toBlob(r));
@ -5128,7 +4378,7 @@ app.registerExtension({
      });
      if (resp.status !== 200) {
        const err = `Error uploading camera image: ${resp.status} - ${resp.statusText}`;
-        alert(err);
+        useToastStore().addAlert(err);
        throw new Error(err);
      }
      return `webcam/${name} [temp]`;
@ -5188,10 +4438,10 @@ async function uploadFile(audioWidget, audioUIWidget, file2, updateNode, pasted
        audioWidget.value = path;
      }
    } else {
-      alert(resp.status + " - " + resp.statusText);
+      useToastStore().addAlert(resp.status + " - " + resp.statusText);
    }
  } catch (error) {
-    alert(error);
+    useToastStore().addAlert(error);
  }
 }
 __name(uploadFile, "uploadFile");
@ -5390,7 +4640,7 @@ class NodeBadgeExtension {
    node.badgePosition = BadgePosition.TopRight;
    node.badge_enabled = true;
    const badge = computed(
-      () => new LGraphBadge$1({
+      () => new LGraphBadge({
        text: _.truncate(
          [
            getNodeIdBadgeText(node, this.nodeIdBadgeMode.value),
@ -5412,4 +4662,4 @@ class NodeBadgeExtension {
  }
 }
 app.registerExtension(new NodeBadgeExtension());
-//# sourceMappingURL=index-BX11rJu2.js.map
+//# sourceMappingURL=index-BMC1ey-i.js.map
--- a/web/assets/index-BMC1ey-i.js.map
+++ b/web/assets/index-BMC1ey-i.js.map
--- a/web/assets/index-BX11rJu2.js.map
+++ b/web/assets/index-BX11rJu2.js.map
--- a/web/assets/index-DGAbdBYF.js
+++ b/web/assets/index-DGAbdBYF.js
--- a/web/assets/index-DGAbdBYF.js.map
+++ b/web/assets/index-DGAbdBYF.js.map
--- a/web/assets/index-exUB01hM.js.map
+++ b/web/assets/index-exUB01hM.js.map
--- a/web/assets/userSelection-BdHSQXw0.js.map
+++ b/web/assets/userSelection-BdHSQXw0.js.map
--- a/web/assets/userSelection-CmI-fOSC.css
+++ b/web/assets/userSelection-CmI-fOSC.css
@ -1,3 +1,37 @@
+.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);
+  }
+}
 .comfy-user-selection {
    width: 100vw;
    height: 100vh;
--- a/web/assets/userSelection-Duxc-t_S.js
+++ b/web/assets/userSelection-Duxc-t_S.js
@ -1,6 +1,15 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { a_ as createSpinner, aT as api, aN as $el } from "./index-exUB01hM.js";
+import { b4 as api, ca as $el } from "./index-DGAbdBYF.js";
+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;
+}
+__name(createSpinner, "createSpinner");
+window.comfyAPI = window.comfyAPI || {};
+window.comfyAPI.spinner = window.comfyAPI.spinner || {};
+window.comfyAPI.spinner.createSpinner = createSpinner;
 class UserSelectionScreen {
  static {
    __name(this, "UserSelectionScreen");
@ -117,4 +126,4 @@ window.comfyAPI.userSelection.UserSelectionScreen = UserSelectionScreen;
 export {
  UserSelectionScreen
 };
-//# sourceMappingURL=userSelection-BdHSQXw0.js.map
+//# sourceMappingURL=userSelection-Duxc-t_S.js.map
--- a/web/assets/userSelection-Duxc-t_S.js.map
+++ b/web/assets/userSelection-Duxc-t_S.js.map
--- a/web/assets/widgetInputs-DdoWwzg5.js
+++ b/web/assets/widgetInputs-DdoWwzg5.js
@ -0,0 +1,756 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { l as LGraphNode, k as app, cf as applyTextReplacements, ce as ComfyWidgets, ci as addValueControlWidgets, z as LiteGraph } from "./index-DGAbdBYF.js";
+const CONVERTED_TYPE = "converted-widget";
+const VALID_TYPES = [
+  "STRING",
+  "combo",
+  "number",
+  "toggle",
+  "BOOLEAN",
+  "text",
+  "string"
+];
+const CONFIG = Symbol();
+const GET_CONFIG = Symbol();
+const TARGET = Symbol();
+const replacePropertyName = "Run widget replace on values";
+class PrimitiveNode extends LGraphNode {
+  static {
+    __name(this, "PrimitiveNode");
+  }
+  controlValues;
+  lastType;
+  static category;
+  constructor(title) {
+    super(title);
+    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 links2 = [];
+      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") {
+          links2 = links2.concat(get_links(n));
+        } else {
+          links2.push(l);
+        }
+      }
+      return links2;
+    }
+    __name(get_links, "get_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 (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;
+      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];
+          }
+        }
+      }
+      this.#mergeWidgetConfig();
+    }
+  }
+  onConnectionsChange(_, index, connected) {
+    if (app.configuringGraph) {
+      return;
+    }
+    const links = this.outputs[0].links;
+    if (connected) {
+      if (links?.length && !this.widgets?.length) {
+        this.#onFirstConnection();
+      }
+    } else {
+      this.#mergeWidgetConfig();
+      if (!links?.length) {
+        this.onLastDisconnect();
+      }
+    }
+  }
+  onConnectOutput(slot, type, input, target_node, target_slot) {
+    if (!input.widget) {
+      if (!(input.type in ComfyWidgets)) return false;
+    }
+    if (this.outputs[slot].links?.length) {
+      const valid = this.#isValidConnection(input);
+      if (valid) {
+        this.applyToGraph([{ target_id: target_node.id, target_slot }]);
+      }
+      return valid;
+    }
+  }
+  #onFirstConnection(recreating) {
+    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, {}] };
+    } else {
+      widget = input.widget;
+    }
+    const config = widget[GET_CONFIG]?.();
+    if (!config) return;
+    const { type } = getWidgetType(config);
+    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";
+    }
+    const size = this.size;
+    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,
+        void 0,
+        inputData
+      );
+      let filter = this.widgets_values?.[2];
+      if (filter && this.widgets.length === 3) {
+        this.widgets[2].value = filter;
+      }
+    }
+    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];
+      }
+    }
+    const callback = widget.callback;
+    const self = this;
+    widget.callback = function() {
+      const r = callback ? callback.apply(this, arguments) : void 0;
+      self.applyToGraph();
+      return r;
+    };
+    this.size = [
+      Math.max(this.size[0], size[0]),
+      Math.max(this.size[1], size[1])
+    ];
+    if (!recreating) {
+      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() {
+    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) {
+      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;
+      const theirNode = app.graph.getNodeById(link.target_id);
+      const theirInput = theirNode.inputs[link.target_slot];
+      this.#isValidConnection(theirInput, hasConfig);
+    }
+  }
+  isValidWidgetLink(originSlot, targetNode, targetWidget) {
+    const config2 = getConfig.call(targetNode, targetWidget.name) ?? [
+      targetWidget.type,
+      targetWidget.options || {}
+    ];
+    if (!isConvertibleWidget(targetWidget, config2)) return false;
+    const output = this.outputs[originSlot];
+    if (!(output.widget?.[CONFIG] ?? output.widget?.[GET_CONFIG]())) {
+      return true;
+    }
+    return !!mergeIfValid.call(this, output, config2);
+  }
+  #isValidConnection(input, forceUpdate) {
+    const output = this.outputs[0];
+    const config2 = input.widget[GET_CONFIG]();
+    return !!mergeIfValid.call(
+      this,
+      output,
+      config2,
+      forceUpdate,
+      this.recreateWidget
+    );
+  }
+  #removeWidgets() {
+    if (this.widgets) {
+      for (const w of this.widgets) {
+        if (w.onRemove) {
+          w.onRemove();
+        }
+      }
+      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() {
+    this.outputs[0].type = "*";
+    this.outputs[0].name = "connect to widget input";
+    delete this.outputs[0].widget;
+    this.#removeWidgets();
+  }
+}
+function getWidgetConfig(slot) {
+  return slot.widget[CONFIG] ?? slot.widget[GET_CONFIG]();
+}
+__name(getWidgetConfig, "getWidgetConfig");
+function getConfig(widgetName) {
+  const { nodeData } = this.constructor;
+  return nodeData?.input?.required?.[widgetName] ?? nodeData?.input?.optional?.[widgetName];
+}
+__name(getConfig, "getConfig");
+function isConvertibleWidget(widget, config) {
+  return (VALID_TYPES.includes(widget.type) || VALID_TYPES.includes(config[0])) && !widget.options?.forceInput;
+}
+__name(isConvertibleWidget, "isConvertibleWidget");
+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];
+  widget.type = CONVERTED_TYPE + suffix;
+  widget.serializeValue = () => {
+    if (!node.inputs) {
+      return void 0;
+    }
+    let node_input = node.inputs.find((i) => i.widget?.name === widget.name);
+    if (!node_input || !node_input.link) {
+      return void 0;
+    }
+    return widget.origSerializeValue ? widget.origSerializeValue() : widget.value;
+  };
+  if (widget.linkedWidgets) {
+    for (const w of widget.linkedWidgets) {
+      hideWidget(node, w, ":" + widget.name);
+    }
+  }
+}
+__name(hideWidget, "hideWidget");
+function showWidget(widget) {
+  widget.type = widget.origType;
+  widget.computeSize = widget.origComputeSize;
+  widget.serializeValue = widget.origSerializeValue;
+  delete widget.origType;
+  delete widget.origComputeSize;
+  delete widget.origSerializeValue;
+  if (widget.linkedWidgets) {
+    for (const w of widget.linkedWidgets) {
+      showWidget(w);
+    }
+  }
+}
+__name(showWidget, "showWidget");
+function convertToInput(node, widget, config) {
+  hideWidget(node, widget);
+  const { type } = getWidgetType(config);
+  const sz = node.size;
+  const inputIsOptional = !!widget.options?.inputIsOptional;
+  const input = node.addInput(widget.name, type, {
+    widget: { name: widget.name, [GET_CONFIG]: () => config },
+    ...inputIsOptional ? { shape: LiteGraph.SlotShape.HollowCircle } : {}
+  });
+  for (const widget2 of node.widgets) {
+    widget2.last_y += LiteGraph.NODE_SLOT_HEIGHT;
+  }
+  node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
+  return input;
+}
+__name(convertToInput, "convertToInput");
+function convertToWidget(node, widget) {
+  showWidget(widget);
+  const sz = node.size;
+  node.removeInput(node.inputs.findIndex((i) => i.widget?.name === widget.name));
+  for (const widget2 of node.widgets) {
+    widget2.last_y -= LiteGraph.NODE_SLOT_HEIGHT;
+  }
+  node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
+}
+__name(convertToWidget, "convertToWidget");
+function getWidgetType(config) {
+  let type = config[0];
+  if (type instanceof Array) {
+    type = "COMBO";
+  }
+  return { type };
+}
+__name(getWidgetType, "getWidgetType");
+function isValidCombo(combo, obj) {
+  if (!(obj instanceof Array)) {
+    console.log(`connection rejected: tried to connect combo to ${obj}`);
+    return false;
+  }
+  if (combo.length !== obj.length) {
+    console.log(`connection rejected: combo lists dont match`);
+    return false;
+  }
+  if (combo.find((v, i) => obj[i] !== v)) {
+    console.log(`connection rejected: combo lists dont match`);
+    return false;
+  }
+  return true;
+}
+__name(isValidCombo, "isValidCombo");
+function isPrimitiveNode(node) {
+  return node.type === "PrimitiveNode";
+}
+__name(isPrimitiveNode, "isPrimitiveNode");
+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 (isPrimitiveNode(originNode)) {
+        if (config) {
+          originNode.recreateWidget();
+        } else if (!app.configuringGraph) {
+          originNode.disconnectOutput(0);
+          originNode.onLastDisconnect();
+        }
+      }
+    }
+  }
+}
+__name(setWidgetConfig, "setWidgetConfig");
+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;
+  } else if (config1[0] !== config2[0]) {
+    console.log(`connection rejected: types dont match`, config1[0], config2[0]);
+    return;
+  }
+  const keys = /* @__PURE__ */ new Set([
+    ...Object.keys(config1[1] ?? {}),
+    ...Object.keys(config2[1] ?? {})
+  ]);
+  let customConfig;
+  const getCustomConfig = /* @__PURE__ */ __name(() => {
+    if (!customConfig) {
+      if (typeof structuredClone === "undefined") {
+        customConfig = JSON.parse(JSON.stringify(config1[1] ?? {}));
+      } else {
+        customConfig = structuredClone(config1[1] ?? {});
+      }
+    }
+    return customConfig;
+  }, "getCustomConfig");
+  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;
+          }
+          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;
+          }
+          getCustomConfig()[k] = v1 == null ? v2 : v2 == null ? v1 : Math.min(v1, v2);
+          continue;
+        } else if (k === "step") {
+          let step;
+          if (v1 == null) {
+            step = v2;
+          } else if (v2 == null) {
+            step = v1;
+          } else {
+            if (v1 < v2) {
+              const a = v2;
+              v2 = v1;
+              v1 = a;
+            }
+            if (v1 % v2) {
+              console.log(
+                "connection rejected: steps not divisible",
+                "current:",
+                v1,
+                "new:",
+                v2
+              );
+              return;
+            }
+            step = v1;
+          }
+          getCustomConfig()[k] = step;
+          continue;
+        }
+      }
+      console.log(`connection rejected: config ${k} values dont match`, v1, v2);
+      return;
+    }
+  }
+  if (customConfig || forceUpdate) {
+    if (customConfig) {
+      output.widget[CONFIG] = [config1[0], customConfig];
+    }
+    const widget = recreateWidget?.call(this);
+    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 };
+}
+__name(mergeIfValid, "mergeIfValid");
+let useConversionSubmenusSetting;
+app.registerExtension({
+  name: "Comfy.WidgetInputs",
+  init() {
+    useConversionSubmenusSetting = app.ui.settings.addSetting({
+      id: "Comfy.NodeInputConversionSubmenus",
+      name: "In the node context menu, place the entries that convert between input/widget in sub-menus.",
+      type: "boolean",
+      defaultValue: true
+    });
+  },
+  async beforeRegisterNodeDef(nodeType, nodeData, app2) {
+    const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
+    nodeType.prototype.convertWidgetToInput = function(widget) {
+      const config = getConfig.call(this, widget.name) ?? [
+        widget.type,
+        widget.options || {}
+      ];
+      if (!isConvertibleWidget(widget, config)) return false;
+      if (widget.type?.startsWith(CONVERTED_TYPE)) return false;
+      convertToInput(this, widget, config);
+      return true;
+    };
+    nodeType.prototype.getExtraMenuOptions = function(_, options) {
+      const r = origGetExtraMenuOptions ? origGetExtraMenuOptions.apply(this, arguments) : void 0;
+      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: /* @__PURE__ */ __name(() => convertToWidget(this, w), "callback")
+            });
+          } else {
+            const config = getConfig.call(this, w.name) ?? [
+              w.type,
+              w.options || {}
+            ];
+            if (isConvertibleWidget(w, config)) {
+              toInput.push({
+                content: `Convert ${w.name} to input`,
+                callback: /* @__PURE__ */ __name(() => convertToInput(this, w, config), "callback")
+              });
+            }
+          }
+        }
+        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;
+      this.widgets ??= [];
+      for (const input of this.inputs) {
+        if (input.widget) {
+          if (!input.widget[GET_CONFIG]) {
+            input.widget[GET_CONFIG] = () => getConfig.call(this, input.widget.name);
+          }
+          if (input.widget.config) {
+            if (input.widget.config[0] instanceof Array) {
+              input.type = "COMBO";
+              const link = app2.graph.links[input.link];
+              if (link) {
+                link.type = input.type;
+              }
+            }
+            delete input.widget.config;
+          }
+          const w = this.widgets.find((w2) => w2.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) : void 0;
+      if (!app2.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) : void 0;
+      if (!app2.configuringGraph && this.inputs) {
+        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((w2) => w2.name === input.widget.name);
+            if (w) {
+              hideWidget(this, w);
+            }
+          }
+        }
+      }
+      return r;
+    };
+    function isNodeAtPos(pos) {
+      for (const n of app2.graph.nodes) {
+        if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
+          return true;
+        }
+      }
+      return false;
+    }
+    __name(isNodeAtPos, "isNodeAtPos");
+    const origOnInputDblClick = nodeType.prototype.onInputDblClick;
+    const ignoreDblClick = Symbol();
+    nodeType.prototype.onInputDblClick = function(slot) {
+      const r = origOnInputDblClick ? origOnInputDblClick.apply(this, arguments) : void 0;
+      const input = this.inputs[slot];
+      if (!input.widget || !input[ignoreDblClick]) {
+        if (!(input.type in ComfyWidgets) && !(input.widget[GET_CONFIG]?.()?.[0] instanceof Array)) {
+          return r;
+        }
+      }
+      const node = LiteGraph.createNode("PrimitiveNode");
+      app2.graph.add(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;
+      input[ignoreDblClick] = true;
+      setTimeout(() => {
+        delete input[ignoreDblClick];
+      }, 300);
+      return r;
+    };
+    const onConnectInput = nodeType.prototype.onConnectInput;
+    nodeType.prototype.onConnectInput = function(targetSlot, type, output, originNode, originSlot) {
+      const v = onConnectInput?.(this, arguments);
+      if (type !== "COMBO") return v;
+      if (originNode.outputs[originSlot].widget) return v;
+      const targetCombo = this.inputs[targetSlot].widget?.[GET_CONFIG]?.()?.[0];
+      if (!targetCombo || !(targetCombo instanceof Array)) return v;
+      const originConfig = originNode.constructor?.nodeData?.output?.[originSlot];
+      if (!originConfig || !isValidCombo(targetCombo, originConfig)) {
+        return false;
+      }
+      return v;
+    };
+  },
+  registerCustomNodes() {
+    LiteGraph.registerNodeType(
+      "PrimitiveNode",
+      Object.assign(PrimitiveNode, {
+        title: "Primitive"
+      })
+    );
+    PrimitiveNode.category = "utils";
+  }
+});
+window.comfyAPI = window.comfyAPI || {};
+window.comfyAPI.widgetInputs = window.comfyAPI.widgetInputs || {};
+window.comfyAPI.widgetInputs.getWidgetConfig = getWidgetConfig;
+window.comfyAPI.widgetInputs.convertToInput = convertToInput;
+window.comfyAPI.widgetInputs.setWidgetConfig = setWidgetConfig;
+window.comfyAPI.widgetInputs.mergeIfValid = mergeIfValid;
+export {
+  convertToInput,
+  getWidgetConfig,
+  mergeIfValid,
+  setWidgetConfig
+};
+//# sourceMappingURL=widgetInputs-DdoWwzg5.js.map
--- a/web/assets/widgetInputs-DdoWwzg5.js.map
+++ b/web/assets/widgetInputs-DdoWwzg5.js.map
--- a/web/extensions/core/widgetInputs.js
+++ b/web/extensions/core/widgetInputs.js
@ -1,4 +1,5 @@
 // Shim for extensions/core/widgetInputs.ts
 export const getWidgetConfig = window.comfyAPI.widgetInputs.getWidgetConfig;
+export const convertToInput = window.comfyAPI.widgetInputs.convertToInput;
 export const setWidgetConfig = window.comfyAPI.widgetInputs.setWidgetConfig;
 export const mergeIfValid = window.comfyAPI.widgetInputs.mergeIfValid;
--- a/web/index.html
+++ b/web/index.html
@ -6,10 +6,10 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="user.css" />
    <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
-    <script type="module" crossorigin src="./assets/index-exUB01hM.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-BLO-8JAe.css">
+    <script type="module" crossorigin src="./assets/index-DGAbdBYF.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BHJGjcJh.css">
  </head>
-  <body class="litegraph">
+  <body class="litegraph grid">
    <div id="vue-app"></div>
    <div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
      <main class="comfy-user-selection-inner">
--- a/web/scripts/changeTracker.js
+++ b/web/scripts/changeTracker.js
@ -1,2 +1,3 @@
 // Shim for scripts/changeTracker.ts
 export const ChangeTracker = window.comfyAPI.changeTracker.ChangeTracker;
+export const globalTracker = window.comfyAPI.changeTracker.globalTracker;
--- a/web/scripts/ui/menu/interruptButton.js
+++ b/web/scripts/ui/menu/interruptButton.js
@ -1,2 +0,0 @@
-// Shim for scripts/ui/menu/interruptButton.ts
-export const getInterruptButton = window.comfyAPI.interruptButton.getInterruptButton;
--- a/web/scripts/ui/menu/queueButton.js
+++ b/web/scripts/ui/menu/queueButton.js
@ -1,2 +0,0 @@
-// Shim for scripts/ui/menu/queueButton.ts
-export const ComfyQueueButton = window.comfyAPI.queueButton.ComfyQueueButton;
--- a/web/scripts/ui/menu/queueOptions.js
+++ b/web/scripts/ui/menu/queueOptions.js
@ -1,2 +0,0 @@
-// Shim for scripts/ui/menu/queueOptions.ts
-export const ComfyQueueOptions = window.comfyAPI.queueOptions.ComfyQueueOptions;
--- a/web/scripts/ui/menu/workflows.js
+++ b/web/scripts/ui/menu/workflows.js
@ -1,3 +0,0 @@
-// Shim for scripts/ui/menu/workflows.ts
-export const ComfyWorkflowsMenu = window.comfyAPI.workflows.ComfyWorkflowsMenu;
-export const ComfyWorkflowsContent = window.comfyAPI.workflows.ComfyWorkflowsContent;
--- a/web/templates/default.jpg
+++ b/web/templates/default.jpg
--- a/web/templates/default.json
+++ b/web/templates/default.json
@ -0,0 +1,356 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 7,
+      "type": "CLIPTextEncode",
+      "pos": [
+        413,
+        389
+      ],
+      "size": [
+        425.27801513671875,
+        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": [
+        422.84503173828125,
+        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": [
+        315,
+        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": [
+        315,
+        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": [
+        210,
+        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": [
+        210,
+        26
+      ],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 9
+        }
+      ],
+      "properties": {}
+    },
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [
+        26,
+        474
+      ],
+      "size": [
+        315,
+        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.safetensors"
+      ]
+    }
+  ],
+  "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,
+  "models": [{
+    "name": "v1-5-pruned-emaonly.safetensors",
+    "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly.safetensors?download=true",
+    "directory": "checkpoints"
+  }]
+}
--- a/web/templates/flux_schnell.jpg
+++ b/web/templates/flux_schnell.jpg
--- a/web/templates/flux_schnell.json
+++ b/web/templates/flux_schnell.json
@ -0,0 +1,420 @@
+{
+    "last_node_id": 36,
+    "last_link_id": 58,
+    "nodes": [
+      {
+        "id": 33,
+        "type": "CLIPTextEncode",
+        "pos": [
+          390,
+          400
+        ],
+        "size": {
+          "0": 422.84503173828125,
+          "1": 164.31304931640625
+        },
+        "flags": {
+          "collapsed": true
+        },
+        "order": 4,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "clip",
+            "type": "CLIP",
+            "link": 54,
+            "slot_index": 0
+          }
+        ],
+        "outputs": [
+          {
+            "name": "CONDITIONING",
+            "type": "CONDITIONING",
+            "links": [
+              55
+            ],
+            "slot_index": 0
+          }
+        ],
+        "title": "CLIP Text Encode (Negative Prompt)",
+        "properties": {
+          "Node name for S&R": "CLIPTextEncode"
+        },
+        "widgets_values": [
+          ""
+        ],
+        "color": "#322",
+        "bgcolor": "#533"
+      },
+      {
+        "id": 27,
+        "type": "EmptySD3LatentImage",
+        "pos": [
+          471,
+          455
+        ],
+        "size": {
+          "0": 315,
+          "1": 106
+        },
+        "flags": {},
+        "order": 0,
+        "mode": 0,
+        "outputs": [
+          {
+            "name": "LATENT",
+            "type": "LATENT",
+            "links": [
+              51
+            ],
+            "shape": 3,
+            "slot_index": 0
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "EmptySD3LatentImage"
+        },
+        "widgets_values": [
+          1024,
+          1024,
+          1
+        ],
+        "color": "#323",
+        "bgcolor": "#535"
+      },
+      {
+        "id": 8,
+        "type": "VAEDecode",
+        "pos": [
+          1151,
+          195
+        ],
+        "size": {
+          "0": 210,
+          "1": 46
+        },
+        "flags": {},
+        "order": 6,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "samples",
+            "type": "LATENT",
+            "link": 52
+          },
+          {
+            "name": "vae",
+            "type": "VAE",
+            "link": 46
+          }
+        ],
+        "outputs": [
+          {
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "links": [
+              9
+            ],
+            "slot_index": 0
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "VAEDecode"
+        }
+      },
+      {
+        "id": 9,
+        "type": "SaveImage",
+        "pos": [
+          1375,
+          194
+        ],
+        "size": {
+          "0": 985.3012084960938,
+          "1": 1060.3828125
+        },
+        "flags": {},
+        "order": 7,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "images",
+            "type": "IMAGE",
+            "link": 9
+          }
+        ],
+        "properties": {},
+        "widgets_values": [
+          "ComfyUI"
+        ]
+      },
+      {
+        "id": 31,
+        "type": "KSampler",
+        "pos": [
+          816,
+          192
+        ],
+        "size": {
+          "0": 315,
+          "1": 262
+        },
+        "flags": {},
+        "order": 5,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "model",
+            "type": "MODEL",
+            "link": 47
+          },
+          {
+            "name": "positive",
+            "type": "CONDITIONING",
+            "link": 58
+          },
+          {
+            "name": "negative",
+            "type": "CONDITIONING",
+            "link": 55
+          },
+          {
+            "name": "latent_image",
+            "type": "LATENT",
+            "link": 51
+          }
+        ],
+        "outputs": [
+          {
+            "name": "LATENT",
+            "type": "LATENT",
+            "links": [
+              52
+            ],
+            "shape": 3,
+            "slot_index": 0
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "KSampler"
+        },
+        "widgets_values": [
+          173805153958730,
+          "randomize",
+          4,
+          1,
+          "euler",
+          "simple",
+          1
+        ]
+      },
+      {
+        "id": 30,
+        "type": "CheckpointLoaderSimple",
+        "pos": [
+          48,
+          192
+        ],
+        "size": {
+          "0": 315,
+          "1": 98
+        },
+        "flags": {},
+        "order": 1,
+        "mode": 0,
+        "outputs": [
+          {
+            "name": "MODEL",
+            "type": "MODEL",
+            "links": [
+              47
+            ],
+            "shape": 3,
+            "slot_index": 0
+          },
+          {
+            "name": "CLIP",
+            "type": "CLIP",
+            "links": [
+              45,
+              54
+            ],
+            "shape": 3,
+            "slot_index": 1
+          },
+          {
+            "name": "VAE",
+            "type": "VAE",
+            "links": [
+              46
+            ],
+            "shape": 3,
+            "slot_index": 2
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "CheckpointLoaderSimple"
+        },
+        "widgets_values": [
+          "flux1-schnell-fp8.safetensors"
+        ]
+      },
+      {
+        "id": 6,
+        "type": "CLIPTextEncode",
+        "pos": [
+          384,
+          192
+        ],
+        "size": {
+          "0": 422.84503173828125,
+          "1": 164.31304931640625
+        },
+        "flags": {},
+        "order": 3,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "clip",
+            "type": "CLIP",
+            "link": 45
+          }
+        ],
+        "outputs": [
+          {
+            "name": "CONDITIONING",
+            "type": "CONDITIONING",
+            "links": [
+              58
+            ],
+            "slot_index": 0
+          }
+        ],
+        "title": "CLIP Text Encode (Positive Prompt)",
+        "properties": {
+          "Node name for S&R": "CLIPTextEncode"
+        },
+        "widgets_values": [
+          "a bottle with a beautiful rainbow galaxy inside it on top of a wooden table in the middle of a modern kitchen beside a plate of vegetables and mushrooms and a wine glasse that contains a planet earth with a plate with a half eaten apple pie on it"
+        ],
+        "color": "#232",
+        "bgcolor": "#353"
+      },
+      {
+        "id": 34,
+        "type": "Note",
+        "pos": [
+          831,
+          501
+        ],
+        "size": {
+          "0": 282.8617858886719,
+          "1": 164.08004760742188
+        },
+        "flags": {},
+        "order": 2,
+        "mode": 0,
+        "properties": {
+          "text": ""
+        },
+        "widgets_values": [
+          "Note that Flux dev and schnell do not have any negative prompt so CFG should be set to 1.0. Setting CFG to 1.0 means the negative prompt is ignored.\n\nThe schnell model is a distilled model that can generate a good image with only 4 steps."
+        ],
+        "color": "#432",
+        "bgcolor": "#653"
+      }
+    ],
+    "links": [
+      [
+        9,
+        8,
+        0,
+        9,
+        0,
+        "IMAGE"
+      ],
+      [
+        45,
+        30,
+        1,
+        6,
+        0,
+        "CLIP"
+      ],
+      [
+        46,
+        30,
+        2,
+        8,
+        1,
+        "VAE"
+      ],
+      [
+        47,
+        30,
+        0,
+        31,
+        0,
+        "MODEL"
+      ],
+      [
+        51,
+        27,
+        0,
+        31,
+        3,
+        "LATENT"
+      ],
+      [
+        52,
+        31,
+        0,
+        8,
+        0,
+        "LATENT"
+      ],
+      [
+        54,
+        30,
+        1,
+        33,
+        0,
+        "CLIP"
+      ],
+      [
+        55,
+        33,
+        0,
+        31,
+        2,
+        "CONDITIONING"
+      ],
+      [
+        58,
+        6,
+        0,
+        31,
+        1,
+        "CONDITIONING"
+      ]
+    ],
+    "groups": [],
+    "config": {},
+    "extra": {
+      "ds": {
+        "scale": 1.1,
+        "offset": [
+          0.6836674124529055,
+          1.8290357611967831
+        ]
+      }
+    },
+    "models": [
+      {
+        "name": "flux1-schnell-fp8.safetensors",
+        "url": "https://huggingface.co/Comfy-Org/flux1-schnell/resolve/main/flux1-schnell-fp8.safetensors?download=true",
+        "directory": "checkpoints"
+      }
+    ],
+    "version": 0.4
+  }
--- a/web/templates/image2image.jpg
+++ b/web/templates/image2image.jpg
--- a/web/templates/image2image.json
+++ b/web/templates/image2image.json
@ -0,0 +1,447 @@
+{
+  "last_node_id": 14,
+  "last_link_id": 17,
+  "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": 15
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [
+            6
+          ],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [
+        "watermark, text\n"
+      ]
+    },
+    {
+      "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": 14
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [
+            4
+          ],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [
+        "photograph of victorian woman with wings, sky clouds, meadow grass\n"
+      ]
+    },
+    {
+      "id": 8,
+      "type": "VAEDecode",
+      "pos": [
+        1209,
+        188
+      ],
+      "size": {
+        "0": 210,
+        "1": 46
+      },
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": 7
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 17
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            9
+          ],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      }
+    },
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": [
+        1451,
+        189
+      ],
+      "size": {
+        "0": 210,
+        "1": 58
+      },
+      "flags": {},
+      "order": 7,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 9
+        }
+      ],
+      "properties": {},
+      "widgets_values": [
+        "ComfyUI"
+      ]
+    },
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [
+        215.9799597167969,
+        703.6800268554688
+      ],
+      "size": [
+        315,
+        314.00002670288086
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [
+            10
+          ],
+          "slot_index": 0
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null,
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": [
+        "example.png",
+        "image"
+      ]
+    },
+    {
+      "id": 12,
+      "type": "VAEEncode",
+      "pos": [
+        614.979959716797,
+        707.6800268554688
+      ],
+      "size": {
+        "0": 210,
+        "1": 46
+      },
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "pixels",
+          "type": "IMAGE",
+          "link": 10
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 16
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [
+            11
+          ],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEEncode"
+      }
+    },
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": [
+        863,
+        186
+      ],
+      "size": {
+        "0": 315,
+        "1": 262
+      },
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": 13
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": 4
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": 6
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": 11
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [
+            7
+          ],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        280823642470253,
+        "randomize",
+        20,
+        8,
+        "dpmpp_2m",
+        "normal",
+        0.8700000000000001
+      ]
+    },
+    {
+      "id": 14,
+      "type": "CheckpointLoaderSimple",
+      "pos": [
+        19,
+        433
+      ],
+      "size": {
+        "0": 315,
+        "1": 98
+      },
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": [
+            13
+          ],
+          "shape": 3,
+          "slot_index": 0
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": [
+            14,
+            15
+          ],
+          "shape": 3,
+          "slot_index": 1
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": [
+            16,
+            17
+          ],
+          "shape": 3,
+          "slot_index": 2
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": [
+        "v1-5-pruned-emaonly.safetensors"
+      ]
+    }
+  ],
+  "links": [
+    [
+      4,
+      6,
+      0,
+      3,
+      1,
+      "CONDITIONING"
+    ],
+    [
+      6,
+      7,
+      0,
+      3,
+      2,
+      "CONDITIONING"
+    ],
+    [
+      7,
+      3,
+      0,
+      8,
+      0,
+      "LATENT"
+    ],
+    [
+      9,
+      8,
+      0,
+      9,
+      0,
+      "IMAGE"
+    ],
+    [
+      10,
+      10,
+      0,
+      12,
+      0,
+      "IMAGE"
+    ],
+    [
+      11,
+      12,
+      0,
+      3,
+      3,
+      "LATENT"
+    ],
+    [
+      13,
+      14,
+      0,
+      3,
+      0,
+      "MODEL"
+    ],
+    [
+      14,
+      14,
+      1,
+      6,
+      0,
+      "CLIP"
+    ],
+    [
+      15,
+      14,
+      1,
+      7,
+      0,
+      "CLIP"
+    ],
+    [
+      16,
+      14,
+      2,
+      12,
+      1,
+      "VAE"
+    ],
+    [
+      17,
+      14,
+      2,
+      8,
+      1,
+      "VAE"
+    ]
+  ],
+  "groups": [
+    {
+      "title": "Loading images",
+      "bounding": [
+        150,
+        630,
+        726,
+        171
+      ],
+      "color": "#3f789e"
+    }
+  ],
+  "config": {},
+  "extra": {},
+  "version": 0.4,
+  "models": [{
+    "name": "v1-5-pruned-emaonly.safetensors",
+    "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly.safetensors?download=true",
+    "directory": "checkpoints"
+  }]
+}
--- a/web/templates/upscale.jpg
+++ b/web/templates/upscale.jpg
--- a/web/templates/upscale.json
+++ b/web/templates/upscale.json
@ -0,0 +1,652 @@
+{
+    "last_node_id": 16,
+    "last_link_id": 23,
+    "nodes": [
+      {
+        "id": 8,
+        "type": "VAEDecode",
+        "pos": [
+          1235.7215957031258,
+          577.1878720703122
+        ],
+        "size": {
+          "0": 210,
+          "1": 46
+        },
+        "flags": {},
+        "order": 5,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "samples",
+            "type": "LATENT",
+            "link": 7
+          },
+          {
+            "name": "vae",
+            "type": "VAE",
+            "link": 21
+          }
+        ],
+        "outputs": [
+          {
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "links": [
+              9
+            ],
+            "slot_index": 0
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "VAEDecode"
+        }
+      },
+      {
+        "id": 10,
+        "type": "LatentUpscale",
+        "pos": [
+          1238,
+          170
+        ],
+        "size": {
+          "0": 315,
+          "1": 130
+        },
+        "flags": {},
+        "order": 6,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "samples",
+            "type": "LATENT",
+            "link": 10
+          }
+        ],
+        "outputs": [
+          {
+            "name": "LATENT",
+            "type": "LATENT",
+            "links": [
+              14
+            ]
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "LatentUpscale"
+        },
+        "widgets_values": [
+          "nearest-exact",
+          1152,
+          1152,
+          "disabled"
+        ]
+      },
+      {
+        "id": 13,
+        "type": "VAEDecode",
+        "pos": [
+          1961,
+          125
+        ],
+        "size": {
+          "0": 210,
+          "1": 46
+        },
+        "flags": {},
+        "order": 9,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "samples",
+            "type": "LATENT",
+            "link": 15
+          },
+          {
+            "name": "vae",
+            "type": "VAE",
+            "link": 22
+          }
+        ],
+        "outputs": [
+          {
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "links": [
+              17
+            ],
+            "slot_index": 0
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "VAEDecode"
+        }
+      },
+      {
+        "id": 6,
+        "type": "CLIPTextEncode",
+        "pos": [
+          374,
+          171
+        ],
+        "size": {
+          "0": 422.84503173828125,
+          "1": 164.31304931640625
+        },
+        "flags": {},
+        "order": 2,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "clip",
+            "type": "CLIP",
+            "link": 19
+          }
+        ],
+        "outputs": [
+          {
+            "name": "CONDITIONING",
+            "type": "CONDITIONING",
+            "links": [
+              4,
+              12
+            ],
+            "slot_index": 0
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "CLIPTextEncode"
+        },
+        "widgets_values": [
+          "masterpiece HDR victorian portrait painting of woman, blonde hair, mountain nature, blue sky\n"
+        ]
+      },
+      {
+        "id": 7,
+        "type": "CLIPTextEncode",
+        "pos": [
+          377,
+          381
+        ],
+        "size": {
+          "0": 425.27801513671875,
+          "1": 180.6060791015625
+        },
+        "flags": {},
+        "order": 3,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "clip",
+            "type": "CLIP",
+            "link": 20
+          }
+        ],
+        "outputs": [
+          {
+            "name": "CONDITIONING",
+            "type": "CONDITIONING",
+            "links": [
+              6,
+              13
+            ],
+            "slot_index": 0
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "CLIPTextEncode"
+        },
+        "widgets_values": [
+          "bad hands, text, watermark\n"
+        ]
+      },
+      {
+        "id": 5,
+        "type": "EmptyLatentImage",
+        "pos": [
+          435,
+          600
+        ],
+        "size": {
+          "0": 315,
+          "1": 106
+        },
+        "flags": {},
+        "order": 0,
+        "mode": 0,
+        "outputs": [
+          {
+            "name": "LATENT",
+            "type": "LATENT",
+            "links": [
+              2
+            ],
+            "slot_index": 0
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "EmptyLatentImage"
+        },
+        "widgets_values": [
+          768,
+          768,
+          1
+        ]
+      },
+      {
+        "id": 11,
+        "type": "KSampler",
+        "pos": [
+          1585,
+          114
+        ],
+        "size": {
+          "0": 315,
+          "1": 262
+        },
+        "flags": {},
+        "order": 8,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "model",
+            "type": "MODEL",
+            "link": 23,
+            "slot_index": 0
+          },
+          {
+            "name": "positive",
+            "type": "CONDITIONING",
+            "link": 12,
+            "slot_index": 1
+          },
+          {
+            "name": "negative",
+            "type": "CONDITIONING",
+            "link": 13,
+            "slot_index": 2
+          },
+          {
+            "name": "latent_image",
+            "type": "LATENT",
+            "link": 14,
+            "slot_index": 3
+          }
+        ],
+        "outputs": [
+          {
+            "name": "LATENT",
+            "type": "LATENT",
+            "links": [
+              15
+            ],
+            "slot_index": 0
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "KSampler"
+        },
+        "widgets_values": [
+          469771404043268,
+          "randomize",
+          14,
+          8,
+          "dpmpp_2m",
+          "simple",
+          0.5
+        ]
+      },
+      {
+        "id": 12,
+        "type": "SaveImage",
+        "pos": [
+          2203,
+          123
+        ],
+        "size": {
+          "0": 407.53717041015625,
+          "1": 468.13226318359375
+        },
+        "flags": {},
+        "order": 10,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "images",
+            "type": "IMAGE",
+            "link": 17
+          }
+        ],
+        "properties": {},
+        "widgets_values": [
+          "ComfyUI"
+        ]
+      },
+      {
+        "id": 3,
+        "type": "KSampler",
+        "pos": [
+          845,
+          172
+        ],
+        "size": {
+          "0": 315,
+          "1": 262
+        },
+        "flags": {},
+        "order": 4,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "model",
+            "type": "MODEL",
+            "link": 18
+          },
+          {
+            "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,
+              10
+            ],
+            "slot_index": 0
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "KSampler"
+        },
+        "widgets_values": [
+          89848141647836,
+          "randomize",
+          12,
+          8,
+          "dpmpp_sde",
+          "normal",
+          1
+        ]
+      },
+      {
+        "id": 16,
+        "type": "CheckpointLoaderSimple",
+        "pos": [
+          24,
+          315
+        ],
+        "size": {
+          "0": 315,
+          "1": 98
+        },
+        "flags": {},
+        "order": 1,
+        "mode": 0,
+        "outputs": [
+          {
+            "name": "MODEL",
+            "type": "MODEL",
+            "links": [
+              18,
+              23
+            ],
+            "slot_index": 0
+          },
+          {
+            "name": "CLIP",
+            "type": "CLIP",
+            "links": [
+              19,
+              20
+            ],
+            "slot_index": 1
+          },
+          {
+            "name": "VAE",
+            "type": "VAE",
+            "links": [
+              21,
+              22
+            ],
+            "slot_index": 2
+          }
+        ],
+        "properties": {
+          "Node name for S&R": "CheckpointLoaderSimple"
+        },
+        "widgets_values": [
+          "v2-1_768-ema-pruned.safetensors"
+        ]
+      },
+      {
+        "id": 9,
+        "type": "SaveImage",
+        "pos": [
+          1495.7215957031258,
+          576.1878720703122
+        ],
+        "size": [
+          232.9403301043692,
+          282.4336258387117
+        ],
+        "flags": {},
+        "order": 7,
+        "mode": 0,
+        "inputs": [
+          {
+            "name": "images",
+            "type": "IMAGE",
+            "link": 9
+          }
+        ],
+        "properties": {},
+        "widgets_values": [
+          "ComfyUI"
+        ]
+      }
+    ],
+    "links": [
+      [
+        2,
+        5,
+        0,
+        3,
+        3,
+        "LATENT"
+      ],
+      [
+        4,
+        6,
+        0,
+        3,
+        1,
+        "CONDITIONING"
+      ],
+      [
+        6,
+        7,
+        0,
+        3,
+        2,
+        "CONDITIONING"
+      ],
+      [
+        7,
+        3,
+        0,
+        8,
+        0,
+        "LATENT"
+      ],
+      [
+        9,
+        8,
+        0,
+        9,
+        0,
+        "IMAGE"
+      ],
+      [
+        10,
+        3,
+        0,
+        10,
+        0,
+        "LATENT"
+      ],
+      [
+        12,
+        6,
+        0,
+        11,
+        1,
+        "CONDITIONING"
+      ],
+      [
+        13,
+        7,
+        0,
+        11,
+        2,
+        "CONDITIONING"
+      ],
+      [
+        14,
+        10,
+        0,
+        11,
+        3,
+        "LATENT"
+      ],
+      [
+        15,
+        11,
+        0,
+        13,
+        0,
+        "LATENT"
+      ],
+      [
+        17,
+        13,
+        0,
+        12,
+        0,
+        "IMAGE"
+      ],
+      [
+        18,
+        16,
+        0,
+        3,
+        0,
+        "MODEL"
+      ],
+      [
+        19,
+        16,
+        1,
+        6,
+        0,
+        "CLIP"
+      ],
+      [
+        20,
+        16,
+        1,
+        7,
+        0,
+        "CLIP"
+      ],
+      [
+        21,
+        16,
+        2,
+        8,
+        1,
+        "VAE"
+      ],
+      [
+        22,
+        16,
+        2,
+        13,
+        1,
+        "VAE"
+      ],
+      [
+        23,
+        16,
+        0,
+        11,
+        0,
+        "MODEL"
+      ]
+    ],
+    "groups": [
+      {
+        "title": "Txt2Img",
+        "bounding": [
+          -1,
+          30,
+          1211,
+          708
+        ],
+        "color": "#a1309b"
+      },
+      {
+        "title": "Save Intermediate Image",
+        "bounding": [
+          1225,
+          500,
+          516,
+          196
+        ],
+        "color": "#3f789e"
+      },
+      {
+        "title": "Hires Fix",
+        "bounding": [
+          1224,
+          29,
+          710,
+          464
+        ],
+        "color": "#b58b2a"
+      },
+      {
+        "title": "Save Final Image",
+        "bounding": [
+          1949,
+          31,
+          483,
+          199
+        ],
+        "color": "#3f789e"
+      }
+    ],
+    "config": {},
+    "extra": {},
+    "version": 0.4,
+    "models": [
+      {
+        "name": "v2-1_768-ema-pruned.safetensors",
+        "url": "https://huggingface.co/stabilityai/stable-diffusion-2-1/resolve/main/v2-1_768-ema-pruned.safetensors?download=true",
+        "directory": "checkpoints"
+      }
+    ]
+  }