add: name

.gitignore

@@ -1,3 +1,2 @@
 __pycache__
-.DS_Store
-file-hash-cache.json
+.DS_Store

README.md

@@ -2,9 +2,6 @@
 
 Open source comfyui deployment platform, a `vercel` for generative workflow infra. (serverless hosted gpu with vertical intergation with comfyui)
 
-> [!NOTE]  
-> Im looking for creative hacker to join ComfyDeploy's core team! DM me on [twitter](https://x.com/BennyKokMusic)
-
 Join [Discord](https://discord.gg/EEYcQmdYZw) to chat more or visit [Comfy Deploy](https://comfydeploy.com/) to get started!
 
 Check out our latest [nextjs starter kit](https://github.com/BennyKok/comfyui-deploy-next-example) with Comfy Deploy

comfy-nodes/comfy_std_output.py

@@ -0,0 +1,46 @@
+import json
+
+
+class AnyType(str):
+    """A special class that is always equal in not equal comparisons. Credit to pythongosssss"""
+
+    def __ne__(self, __value: object) -> bool:
+        return False
+
+
+any = AnyType("*")
+
+
+class ComfyDeployStdOutputAny:
+    @classmethod
+    def INPUT_TYPES(cls):  # pylint: disable = invalid-name, missing-function-docstring
+        return {
+            "required": {
+                "name": ("STRING", {"default": "ComfyUI"}),
+                "source": (any, {}),  # Use "*" to accept any input type
+            },
+        }
+
+    CATEGORY = "output"
+    RETURN_TYPES = ()
+    FUNCTION = "run"
+    OUTPUT_NODE = True
+
+    def run(self, name, source=None):
+        value = "None"
+        if source is not None:
+            try:
+                value = json.dumps(source)
+            except Exception:
+                try:
+                    value = str(source)
+                except Exception:
+                    value = "source exists, but could not be serialized."
+
+        return {"ui": {name: (value,)}}
+
+
+NODE_CLASS_MAPPINGS = {"ComfyDeployStdOutputAny": ComfyDeployStdOutputAny}
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "ComfyDeployStdOutputAny": "Standard Any Output (ComfyDeploy)"
+}

comfy-nodes/comfy_std_output_image.py

@@ -6,7 +6,7 @@ from PIL.PngImagePlugin import PngInfo
 import folder_paths
 
 
-class ComfyDeployOutputImage:
+class ComfyDeployStdOutputImage:
     def __init__(self):
         self.output_dir = folder_paths.get_output_directory()
         self.type = "output"
@@ -27,10 +27,6 @@ class ComfyDeployOutputImage:
                 ),
                 "file_type": (["png", "jpg", "webp"], {"default": "webp"}),
                 "quality": ("INT", {"default": 80, "min": 1, "max": 100, "step": 1}),
-                "output_id": (
-                    "STRING",
-                    {"multiline": False, "default": "output_images"},
-                ),
             },
             "hidden": {"prompt": "PROMPT", "extra_pnginfo": "EXTRA_PNGINFO"},
         }
@@ -49,7 +45,6 @@ class ComfyDeployOutputImage:
         filename_prefix="ComfyUI",
         file_type="png",
         quality=80,
-        output_id="output_images",
         prompt=None,
         extra_pnginfo=None,
     ):
@@ -84,17 +79,14 @@ class ComfyDeployOutputImage:
                 img.save(file_path, quality=quality)
 
             results.append(
-                {
-                    "filename": file,
-                    "subfolder": subfolder,
-                    "type": self.type,
-                    "output_id": output_id,
-                }
+                {"filename": file, "subfolder": subfolder, "type": self.type}
             )
             counter += 1
 
         return {"ui": {"images": results}}
 
 
-NODE_CLASS_MAPPINGS = {"ComfyDeployOutputImage": ComfyDeployOutputImage}
-NODE_DISPLAY_NAME_MAPPINGS = {"ComfyDeployOutputImage": "Image Output (ComfyDeploy)"}
+NODE_CLASS_MAPPINGS = {"ComfyDeployStdOutputImage": ComfyDeployStdOutputImage}
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "ComfyDeployStdOutputImage": "Standard Image Output (ComfyDeploy)"
+}

comfy-nodes/external_audio.py

@@ -1,57 +0,0 @@
-import os
-import io
-import torchaudio
-from folder_paths import get_annotated_filepath
-
-class ComfyUIDeployExternalAudio:
-    RETURN_TYPES = ("AUDIO",)
-    RETURN_NAMES = ("audio",)
-    FUNCTION = "load_audio"
-    
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "input_id": (
-                    "STRING",
-                    {"multiline": False, "default": "input_audio"},
-                ),
-                "audio_file": ("STRING", {"default": ""}),
-            },
-            "optional": {
-                "default_value": ("AUDIO",),
-                "display_name": (
-                    "STRING",
-                    {"multiline": False, "default": ""},
-                ),
-                "description": (
-                    "STRING",
-                    {"multiline": False, "default": ""},
-                ),
-            }
-        }
-    
-    @classmethod
-    def VALIDATE_INPUTS(s, audio_file, **kwargs):
-        return True
-
-    def load_audio(self, input_id, audio_file, default_value=None, display_name=None, description=None):
-        if audio_file and audio_file != "":
-            if audio_file.startswith(('http://', 'https://')):
-                # Handle URL input
-                import requests
-                response = requests.get(audio_file)
-                audio_data = io.BytesIO(response.content)
-                waveform, sample_rate = torchaudio.load(audio_data)
-            else:
-                # Handle local file
-                audio_path = get_annotated_filepath(audio_file)
-                waveform, sample_rate = torchaudio.load(audio_path)
-            
-            audio = {"waveform": waveform.unsqueeze(0), "sample_rate": sample_rate}
-            return (audio,)
-        else:
-            return (default_value,)
-
-NODE_CLASS_MAPPINGS = {"ComfyUIDeployExternalAudio": ComfyUIDeployExternalAudio}
-NODE_DISPLAY_NAME_MAPPINGS = {"ComfyUIDeployExternalAudio": "External Audio (ComfyUI Deploy)"}

comfy-nodes/external_exr.py

@@ -1,109 +0,0 @@
-import os
-import io
-import cv2 as cv
-import numpy as np
-import torch
-import requests
-from folder_paths import get_annotated_filepath
-
-class ComfyUIDeployExternalEXR:
-    RETURN_TYPES = ("IMAGE", "MASK")
-    RETURN_NAMES = ("image", "mask") 
-    FUNCTION = "load_exr"
-    
-    @classmethod
-    def INPUT_TYPES(cls):
-        return {
-            "required": {
-                "input_id": (
-                    "STRING",
-                    {"multiline": False, "default": "input_exr"},
-                ),
-                "exr_file": ("STRING", {"default": ""}),
-                "tonemap": (["linear", "sRGB", "Reinhard"], {"default": "sRGB"}),
-            },
-            "optional": {
-                "default_image": ("IMAGE",),
-                "default_mask": ("MASK",),
-                "display_name": (
-                    "STRING", 
-                    {"multiline": False, "default": ""},
-                ),
-                "description": (
-                    "STRING",
-                    {"multiline": False, "default": ""},
-                ),
-            }
-        }
-
-    @classmethod
-    def VALIDATE_INPUTS(s, exr_file, **kwargs):
-        return True
-
-    def sRGBtoLinear(self, npArray):
-        less = npArray <= 0.0404482362771082
-        npArray[less] = npArray[less] / 12.92
-        npArray[~less] = np.power((npArray[~less] + 0.055) / 1.055, 2.4)
-
-    def linearToSRGB(self, npArray):
-        less = npArray <= 0.0031308
-        npArray[less] = npArray[less] * 12.92
-        npArray[~less] = np.power(npArray[~less], 1/2.4) * 1.055 - 0.055
-
-    def load_exr(self, input_id, exr_file, tonemap="sRGB", 
-                 default_image=None, default_mask=None,
-                 display_name=None, description=None):
-        try:
-            if exr_file and exr_file != "":
-                if exr_file.startswith(('http://', 'https://')):
-                    # Handle URL input
-                    response = requests.get(exr_file)
-                    # Write to temp buffer
-                    buffer = io.BytesIO(response.content)
-                    nparr = np.frombuffer(buffer.getvalue(), np.uint8)
-                    image = cv.imdecode(nparr, cv.IMREAD_UNCHANGED).astype(np.float32)
-                else:
-                    # Handle local file
-                    exr_path = get_annotated_filepath(exr_file)
-                    image = cv.imread(exr_path, cv.IMREAD_UNCHANGED).astype(np.float32)
-
-                if len(image.shape) == 2:
-                    image = np.repeat(image[..., np.newaxis], 3, axis=2)
-                
-                # Extract RGB and flip channels
-                rgb = np.flip(image[:,:,:3], 2).copy()
-                
-                # Apply tonemapping
-                if tonemap == "sRGB":
-                    self.linearToSRGB(rgb)
-                    rgb = np.clip(rgb, 0, 1)
-                elif tonemap == "Reinhard":
-                    rgb = np.clip(rgb, 0, None)
-                    rgb = rgb / (rgb + 1)
-                    self.linearToSRGB(rgb)
-                    rgb = np.clip(rgb, 0, 1)
-                
-                rgb = torch.unsqueeze(torch.from_numpy(rgb), 0)
-                
-                # Handle alpha/mask
-                mask = torch.zeros((1, image.shape[0], image.shape[1]), dtype=torch.float32)
-                if image.shape[2] > 3:
-                    mask[0] = torch.from_numpy(np.clip(image[:,:,3], 0, 1))
-
-                return (rgb, mask)
-            else:
-                # Return defaults if no file provided
-                return (default_image, default_mask)
-
-        except Exception as e:
-            print(f"Error loading EXR: {str(e)}")
-            # Return defaults on error
-            return (default_image, default_mask)
-
-NODE_CLASS_MAPPINGS = {
-    "ComfyUIDeployExternalEXR": ComfyUIDeployExternalEXR
-}
-
-NODE_DISPLAY_NAME_MAPPINGS = {
-    "ComfyUIDeployExternalEXR": "External EXR (ComfyUI Deploy)"
-}

comfy-nodes/external_image.py

@@ -21,9 +21,8 @@ class ComfyUIDeployExternalImage:
                 ),
                 "description": (
                     "STRING",
-                    {"multiline": False, "default": ""},
+                    {"multiline": True, "default": ""},
                 ),
-                "default_value_url": ("STRING", {"image_preview": True, "default": ""}),
             }
         }
 
@@ -34,44 +33,32 @@ class ComfyUIDeployExternalImage:
 
     CATEGORY = "image"
 
-    def run(self, input_id, default_value=None, display_name=None, description=None, default_value_url=None):
+    def run(self, input_id, default_value=None, display_name=None, description=None):
         image = default_value
-        
-        # Try both input_id and default_value_url
-        urls_to_try = [url for url in [input_id, default_value_url] if url]
-        
-        print(default_value_url)
-        
-        for url in urls_to_try:
-            try:
-                if url.startswith('http'):
-                    import requests
-                    from io import BytesIO
-                    print(f"Fetching image from url: {url}")
-                    response = requests.get(url)
-                    image = Image.open(BytesIO(response.content))
-                    break
-                elif url.startswith(('data:image/png;base64,', 'data:image/jpeg;base64,', 'data:image/jpg;base64,')):
-                    import base64
-                    from io import BytesIO
-                    print("Decoding base64 image")
-                    base64_image = url[url.find(",")+1:]
-                    decoded_image = base64.b64decode(base64_image)
-                    image = Image.open(BytesIO(decoded_image))
-                    break
-            except:
-                continue
-        
-        if image is not None:
-            try:
-                image = ImageOps.exif_transpose(image)
-                image = image.convert("RGB")
-                image = np.array(image).astype(np.float32) / 255.0
-                image = torch.from_numpy(image)[None,]
-            except:
-                pass
-                
-        return [image]
+        try:
+            if input_id.startswith('http'):
+                import requests
+                from io import BytesIO
+                print("Fetching image from url: ", input_id)
+                response = requests.get(input_id)
+                image = Image.open(BytesIO(response.content))
+            elif input_id.startswith('data:image/png;base64,') or input_id.startswith('data:image/jpeg;base64,') or input_id.startswith('data:image/jpg;base64,'):
+                import base64
+                from io import BytesIO
+                print("Decoding base64 image")
+                base64_image = input_id[input_id.find(",")+1:]
+                decoded_image = base64.b64decode(base64_image)
+                image = Image.open(BytesIO(decoded_image))
+            else:
+                raise ValueError("Invalid image url provided.")
+
+            image = ImageOps.exif_transpose(image)
+            image = image.convert("RGB")
+            image = np.array(image).astype(np.float32) / 255.0
+            image = torch.from_numpy(image)[None,]
+            return [image]
+        except:
+            return [image]
 
 
 NODE_CLASS_MAPPINGS = {"ComfyUIDeployExternalImage": ComfyUIDeployExternalImage}

comfy-nodes/external_lora.py

@@ -64,42 +64,32 @@ class ComfyUIDeployExternalLora:
         import os
         import uuid
 
-        if lora_url:
-            if lora_url.startswith("http"):
-                if lora_save_name:
-                    existing_loras = folder_paths.get_filename_list("loras")
-                    # Check if lora_save_name exists in the list
-                    if lora_save_name in existing_loras:
-                        print(f"using lora: {lora_save_name}")
-                        return (lora_save_name,)
-                else:
-                    lora_save_name = str(uuid.uuid4()) + ".safetensors"
-                print(lora_save_name)
-                print(folder_paths.folder_names_and_paths["loras"][0][0])
-                destination_path = os.path.join(
-                    folder_paths.folder_names_and_paths["loras"][0][0], lora_save_name
-                )
-                print(destination_path)
-                print(
-                    "Downloading external lora - "
-                    + lora_url
-                    + " to "
-                    + destination_path
-                )
-                response = requests.get(
-                    lora_url,
-                    headers={"User-Agent": "Mozilla/5.0"},
-                    allow_redirects=True,
-                )
-                with open(destination_path, "wb") as out_file:
-                    out_file.write(response.content)
-                print(f"Ext Lora loading: {lora_url} to {lora_save_name}")
-                return (lora_save_name,)
+        if lora_url and lora_url.startswith("http"):
+            if lora_save_name:
+                existing_loras = folder_paths.get_filename_list("loras")
+                # Check if lora_save_name exists in the list
+                if lora_save_name in existing_loras:
+                    print(f"using lora: {lora_save_name}")
+                    return (lora_save_name,)
             else:
-                print(f"Ext Lora loading: {lora_url}")
-                return (lora_url,)
+                lora_save_name = str(uuid.uuid4()) + ".safetensors"
+            print(lora_save_name)
+            print(folder_paths.folder_names_and_paths["loras"][0][0])
+            destination_path = os.path.join(
+                folder_paths.folder_names_and_paths["loras"][0][0], lora_save_name
+            )
+            print(destination_path)
+            print("Downloading external lora - " + lora_url + " to " + destination_path)
+            response = requests.get(
+                lora_url,
+                headers={"User-Agent": "Mozilla/5.0"},
+                allow_redirects=True,
+            )
+            with open(destination_path, "wb") as out_file:
+                out_file.write(response.content)
+            return (lora_save_name,)
         else:
-            print(f"Ext Lora loading: {default_lora_name}")
+            print(f"using lora: {default_lora_name}")
             return (default_lora_name,)
 
 

comfy-nodes/external_string_combine.py

@@ -1,53 +0,0 @@
-import re
-
-
-class StringFunction:
-    @classmethod
-    def INPUT_TYPES(s):
-        return {
-            "required": {
-                "action": (["append", "replace"], {}),
-                "tidy_tags": (["yes", "no"], {}),
-            },
-            "optional": {
-                "text_a": ("STRING", {"multiline": True, "dynamicPrompts": False}),
-                "text_b": ("STRING", {"multiline": True, "dynamicPrompts": False}),
-                "text_c": ("STRING", {"multiline": True, "dynamicPrompts": False}),
-            },
-        }
-
-    RETURN_TYPES = ("STRING",)
-    FUNCTION = "exec"
-    CATEGORY = "utils"
-    OUTPUT_NODE = True
-
-    def exec(self, action, tidy_tags, text_a="", text_b="", text_c=""):
-        tidy_tags = tidy_tags == "yes"
-        out = ""
-        if action == "append":
-            out = (", " if tidy_tags else "").join(
-                filter(None, [text_a, text_b, text_c])
-            )
-        else:
-            if text_c is None:
-                text_c = ""
-            if text_b.startswith("/") and text_b.endswith("/"):
-                regex = text_b[1:-1]
-                out = re.sub(regex, text_c, text_a)
-            else:
-                out = text_a.replace(text_b, text_c)
-        if tidy_tags:
-            out = re.sub(r"\s{2,}", " ", out)
-            out = out.replace(" ,", ",")
-            out = re.sub(r",{2,}", ",", out)
-            out = out.strip()
-        return {"ui": {"text": (out,)}, "result": (out,)}
-
-
-NODE_CLASS_MAPPINGS = {
-    "ComfyUIDeployStringCombine": StringFunction,
-}
-
-NODE_DISPLAY_NAME_MAPPINGS = {
-    "ComfyUIDeployStringCombine": "String Combine (ComfyUI Deploy)",
-}

pyproject.toml

@@ -2,7 +2,7 @@
 name = "comfyui-deploy"
 description = "Open source comfyui deployment platform, a vercel for generative workflow infra."
 version = "1.1.0"
-license = { file = "LICENSE" }
+license = "LICENSE"
 dependencies = ["aiofiles", "pydantic", "opencv-python", "imageio-ffmpeg"]
 
 [project.urls]

requirements.txt

@@ -3,5 +3,4 @@ pydantic
 opencv-python
 imageio-ffmpeg
 brotli
-tabulate
 # logfire

web-plugin/api.js

@@ -0,0 +1,4 @@
+/** @typedef {import('../../../web/scripts/api.js').api} API*/
+import { api as _api } from '../../scripts/api.js';
+/** @type {API} */
+export const api = _api;

web-plugin/app.js

@@ -0,0 +1,4 @@
+/** @typedef {import('../../../web/scripts/app.js').ComfyApp} ComfyApp*/
+import { app as _app } from '../../scripts/app.js';
+/** @type {ComfyApp} */
+export const app = _app;

web-plugin/index.js

@@ -1,44 +1,8 @@
-import { app } from "../../scripts/app.js";
-import { api } from "../../scripts/api.js";
-// import { LGraphNode } from "../../scripts/widgets.js";
-LGraphNode = LiteGraph.LGraphNode;
-import { ComfyDialog, $el } from "../../scripts/ui.js";
-
+import { app } from "./app.js";
+import { api } from "./api.js";
+import { ComfyWidgets, LGraphNode } from "./widgets.js";
 import { generateDependencyGraph } from "https://esm.sh/comfyui-json@0.1.25";
-import { ComfyDeploy } from "https://esm.sh/comfydeploy@2.0.0-beta.69";
-
-const styles = `
-.comfydeploy-menu-item {
-    background: linear-gradient(to right, rgba(74, 144, 226, 0.9), rgba(103, 178, 111, 0.9)) !important;
-    color: white !important;
-    position: relative !important;
-    padding-left: 20px !important;
-}
-
-.comfydeploy-menu-item:hover {
-    filter: brightness(1.1) !important;
-    cursor: pointer !important;
-}
-
-.comfydeploy-menu-item::before {
-    content: '';
-    position: absolute;
-    left: 4px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 12px;
-    height: 12px;
-    background-image: url('https://www.comfydeploy.com/icon.svg');
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-}
-`;
-
-// Add stylesheet to document
-const styleSheet = document.createElement("style");
-styleSheet.textContent = styles;
-document.head.appendChild(styleSheet);
+import { ComfyDeploy } from "https://esm.sh/comfydeploy@0.0.19-beta.30";
 
 const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="#888888" stroke-linecap="round" stroke-width="2"><path stroke-dasharray="60" stroke-dashoffset="60" stroke-opacity=".3" d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="1.3s" values="60;0"/></path><path stroke-dasharray="15" stroke-dashoffset="15" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg>`;
 
@@ -50,14 +14,6 @@ function sendEventToCD(event, data) {
   window.parent.postMessage(JSON.stringify(message), "*");
 }
 
-function sendDirectEventToCD(event, data) {
-  const message = {
-    type: event,
-    data: data,
-  };
-  window.parent.postMessage(message, "*");
-}
-
 function dispatchAPIEventData(data) {
   const msg = JSON.parse(data);
 
@@ -166,146 +122,6 @@ function setSelectedWorkflowInfo(info) {
   context.selectedWorkflowInfo = info;
 }
 
-const VALID_TYPES = [
-  "STRING",
-  "combo",
-  "number",
-  "toggle",
-  "BOOLEAN",
-  "text",
-  "string",
-];
-
-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);
-    }
-  }
-}
-
-function getWidgetType(config) {
-  let type = config[0];
-  if (type instanceof Array) {
-    type = "COMBO";
-  }
-  return { type };
-}
-
-const GET_CONFIG = Symbol();
-
-function convertToInput(node, widget, config) {
-  console.log(node);
-  if (node.type == "LoadImage") {
-    var inputNode = LiteGraph.createNode("ComfyUIDeployExternalImage");
-    console.log(widget);
-
-    const currentOutputsLinks = node.outputs[0].links;
-
-    // const index = node.inputs.findIndex((x) => x.name == widget.name);
-    // console.log(node.widgets_values, index);
-    // inputNode.configure({
-    //   widgets_values: ["input_text", widget.value],
-    // });
-    inputNode.pos = node.pos;
-    inputNode.id = ++app.graph.last_node_id;
-    // inputNode.pos[0] += node.size[0] + 40;
-    node.pos[0] -= inputNode.size[0] + 20;
-    console.log(inputNode);
-    console.log(app.graph);
-    app.graph.add(inputNode);
-
-    const links = app.graph.links;
-
-    console.log(currentOutputsLinks);
-
-    for (let i = 0; i < currentOutputsLinks.length; i++) {
-      const link = currentOutputsLinks[i];
-      const llink = links[link];
-      console.log(links[link]);
-      setTimeout(
-        () => inputNode.connect(0, llink.target_id, llink.target_slot),
-        100,
-      );
-    }
-
-    node.connect(0, inputNode, 0);
-
-    return null;
-  }
-
-  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])]);
-
-  if (type == "STRING") {
-    var inputNode = LiteGraph.createNode("ComfyUIDeployExternalText");
-    console.log(widget);
-    const index = node.inputs.findIndex((x) => x.name == widget.name);
-    console.log(node.widgets_values, index);
-    inputNode.configure({
-      widgets_values: ["input_text", widget.value],
-    });
-    inputNode.id = ++app.graph.last_node_id;
-    inputNode.pos = node.pos;
-    inputNode.pos[0] -= node.size[0] + 40;
-    console.log(inputNode);
-    console.log(app.graph);
-    app.graph.add(inputNode);
-    inputNode.connect(0, node, index);
-  }
-
-  return input;
-}
-
-const CONVERTED_TYPE = "converted-widget";
-
-function getConfig(widgetName) {
-  const { nodeData } = this.constructor;
-  return (
-    nodeData?.input?.required?.[widgetName] ??
-    nodeData?.input?.optional?.[widgetName]
-  );
-}
-
-function isConvertibleWidget(widget, config) {
-  return (
-    (VALID_TYPES.includes(widget.type) || VALID_TYPES.includes(config[0])) &&
-    !widget.options?.forceInput
-  );
-}
-
-var __defProp = Object.defineProperty;
-var __name = (target, value) =>
-  __defProp(target, "name", { value, configurable: true });
-
 /** @typedef {import('../../../web/types/comfy.js').ComfyExtension} ComfyExtension*/
 /** @type {ComfyExtension} */
 const ext = {
@@ -416,125 +232,6 @@ const ext = {
     }
   },
 
-  async beforeRegisterNodeDef(nodeType, nodeData, app2) {
-    const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
-    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 external input`,
-                callback: /* @__PURE__ */ __name(
-                  () => convertToInput(this, w, config),
-                  "callback",
-                ),
-                className: "comfydeploy-menu-item",
-              });
-            }
-          }
-        }
-        if (toInput.length) {
-          if (true) {
-            options.push();
-
-            let optionIndex = options.findIndex((o) => o.content === "Outputs");
-            if (optionIndex === -1) optionIndex = options.length;
-            else optionIndex++;
-            options.splice(
-              0,
-              0,
-              // {
-              //   content: "[ComfyDeploy] Convert to External Input",
-              //   submenu: {
-              //     options: toInput,
-              //   },
-              //   className: "comfydeploy-menu-item"
-              // },
-              ...toInput,
-              null,
-            );
-          } 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;
-    };
-
-    if (
-      nodeData?.input?.optional?.default_value_url?.[1]?.image_preview === true
-    ) {
-      nodeData.input.optional.default_value_url = ["IMAGEPREVIEW"];
-      console.log(nodeData.input.optional.default_value_url);
-    }
-
-    // const origonNodeCreated = nodeType.prototype.onNodeCreated;
-    // nodeType.prototype.onNodeCreated = function () {
-    //   const r = origonNodeCreated
-    //     ? origonNodeCreated.apply(this, arguments)
-    //     : void 0;
-
-    //   if (!this.widgets) {
-    //     return;
-    //   }
-
-    //   console.log(this.widgets);
-
-    //   this.widgets.forEach(element => {
-    //     if (element.type != "customtext") return
-
-    //     console.log(element.element);
-
-    //     const parent = element.element.parentElement
-
-    //     console.log(element.element.parentElement)
-    //     const btn = document.createElement("button");
-    //     // const div = document.createElement("div");
-    //     // parent.removeChild(element.element)
-    //     // div.appendChild(element.element)
-    //     // parent.appendChild(div)
-    //     // element.element = div
-    //     // console.log(element.element);
-    //     // btn.style = element.element.style
-    //   });
-
-    //   return r
-    // };
-  },
-
   registerCustomNodes() {
     /** @type {LGraphNode}*/
     class ComfyDeploy extends LGraphNode {
@@ -627,78 +324,6 @@ const ext = {
     ComfyDeploy.category = "deploy";
   },
 
-  getCustomWidgets() {
-    return {
-      IMAGEPREVIEW(node, inputName, inputData) {
-        // Find or create the URL input widget
-        const urlWidget = node.addWidget(
-          "string",
-          inputName,
-          /* value=*/ "",
-          () => {},
-          { serialize: true },
-        );
-
-        const buttonWidget = node.addWidget(
-          "button",
-          "Open Assets Browser",
-          /* value=*/ "",
-          () => {
-            sendEventToCD("assets", {
-              node: node.id,
-              inputName: inputName,
-            });
-            // console.log("load image");
-          },
-          { serialize: false },
-        );
-
-        console.log(node.widgets);
-
-        console.log("urlWidget", urlWidget);
-
-        // Add image preview functionality
-        function showImage(url) {
-          const img = new Image();
-          img.onload = () => {
-            node.imgs = [img];
-            app.graph.setDirtyCanvas(true);
-            node.setSizeForImage?.();
-          };
-          img.onerror = () => {
-            node.imgs = [];
-            app.graph.setDirtyCanvas(true);
-          };
-          img.src = url;
-        }
-
-        // Set up URL widget value handling
-        let default_value = urlWidget.value;
-        Object.defineProperty(urlWidget, "value", {
-          set: function (value) {
-            this._real_value = value;
-            // Preview image when URL changes
-            if (value) {
-              showImage(value);
-            }
-          },
-          get: function () {
-            return this._real_value || default_value;
-          },
-        });
-
-        // Show initial image if URL exists
-        requestAnimationFrame(() => {
-          if (urlWidget.value) {
-            showImage(urlWidget.value);
-          }
-        });
-
-        return { widget: urlWidget };
-      },
-    };
-  },
-
   async setup() {
     // const graphCanvas = document.getElementById("graph-canvas");
 
@@ -726,7 +351,6 @@ const ext = {
             }
             console.log("loadGraphData");
             app.loadGraphData(comfyUIWorkflow);
-            sendEventToCD("graph_loaded");
           }
         } else if (message.type === "deploy") {
           // deployWorkflow();
@@ -741,35 +365,11 @@ const ext = {
             console.warn("api.handlePromptGenerated is not a function");
           }
           sendEventToCD("cd_plugin_onQueuePrompt", prompt);
-        } else if (message.type === "configure_queue_buttons") {
-          addQueueButtons(message.data);
-        } else if (message.type === "configure_menu_right_buttons") {
-          addMenuRightButtons(message.data);
-        } else if (message.type === "configure_menu_buttons") {
-          addMenuButtons(message.data);
         } else if (message.type === "get_prompt") {
           const prompt = await app.graphToPrompt();
           sendEventToCD("cd_plugin_onGetPrompt", prompt);
         } else if (message.type === "event") {
           dispatchAPIEventData(message.data);
-        } else if (message.type === "update_widget") {
-          // New handler for updating widget values
-          const { nodeId, widgetName, value } = message.data;
-          const node = app.graph.getNodeById(nodeId);
-
-          if (!node) {
-            console.warn(`Node with ID ${nodeId} not found`);
-            return;
-          }
-
-          const widget = node.widgets?.find((w) => w.name === widgetName);
-          if (!widget) {
-            console.warn(`Widget ${widgetName} not found in node ${nodeId}`);
-            return;
-          }
-
-          widget.value = value;
-          app.graph.setDirtyCanvas(true);
         } else if (message.type === "add_node") {
           console.log("add node", message.data);
           app.graph.beforeChange();
@@ -863,13 +463,13 @@ const ext = {
         await app.ui.settings.setSettingValueAsync("Comfy.UseNewMenu", "Top");
         await app.ui.settings.setSettingValueAsync(
           "Comfy.Sidebar.Size",
-          "small",
+          "small"
         );
         await app.ui.settings.setSettingValueAsync(
           "Comfy.Sidebar.Location",
-          "left",
+          "right"
         );
-        // localStorage.setItem("Comfy.MenuPosition.Docked", "true");
+        localStorage.setItem("Comfy.MenuPosition.Docked", "true");
         console.log("native mode manmanman");
       } catch (error) {
         console.error("Error setting validation to false", error);
@@ -1402,6 +1002,8 @@ function addButton() {
 
 app.registerExtension(ext);
 
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+
 export class InfoDialog extends ComfyDialog {
   constructor() {
     super();
@@ -1872,7 +1474,7 @@ app.extensionManager.registerSidebarTab({
       <div style="padding: 20px;">
         <h3>Comfy Deploy</h3>
         <div id="deploy-container" style="margin-bottom: 20px;"></div>
-        <div id="workflows-container" style="display: none;">
+        <div id="workflows-container">
           <h4>Your Workflows</h4>
           <div id="workflows-loading" style="display: flex; justify-content: center; align-items: center; height: 100px;">
             ${loadingIcon}
@@ -1972,16 +1574,10 @@ async function loadWorkflowApi(versionId) {
 
 const orginal_fetch_api = api.fetchApi;
 api.fetchApi = async (route, options) => {
-  // console.log("Fetch API called with args:", route, options, ext.native_mode);
+  console.log("Fetch API called with args:", route, options, ext.native_mode);
 
   if (route.startsWith("/prompt") && ext.native_mode) {
     const info = await getSelectedWorkflowInfo();
-
-    if (!info.workflow_id) {
-      console.log("No workflow id found, fallback to original fetch");
-      return await orginal_fetch_api.call(api, route, options);
-    }
-
     console.log("info", info);
     if (info) {
       const body = JSON.parse(options.body);
@@ -1995,7 +1591,6 @@ api.fetchApi = async (route, options) => {
         workflow_id: info.workflow_id,
         native_run_api_endpoint: info.native_run_api_endpoint,
         gpu_event_id: info.gpu_event_id,
-        gpu: info.gpu,
       };
 
       return await fetch("/comfyui-deploy/run", {
@@ -2011,306 +1606,3 @@ api.fetchApi = async (route, options) => {
 
   return await orginal_fetch_api.call(api, route, options);
 };
-
-// Intercept window drag and drop events
-const originalDropHandler = document.ondrop;
-document.ondrop = async (e) => {
-  console.log("Drop event intercepted:", e);
-
-  // Prevent default browser behavior
-  e.preventDefault();
-
-  // Handle files if present
-  if (e.dataTransfer?.files?.length > 0) {
-    const files = Array.from(e.dataTransfer.files);
-
-    // Send file data to parent directly as JSON
-    sendDirectEventToCD("file_drop", {
-      files: files,
-      x: e.clientX,
-      y: e.clientY,
-      timestamp: Date.now(),
-    });
-  }
-
-  // Call original handler if exists
-  if (originalDropHandler) {
-    originalDropHandler(e);
-  }
-};
-
-const originalDragEnterHandler = document.ondragenter;
-document.ondragenter = (e) => {
-  // Prevent default to allow drop
-  e.preventDefault();
-
-  // Send dragenter event to parent directly as JSON
-  sendDirectEventToCD("file_dragenter", {
-    x: e.clientX,
-    y: e.clientY,
-    timestamp: Date.now(),
-  });
-
-  if (originalDragEnterHandler) {
-    originalDragEnterHandler(e);
-  }
-};
-
-const originalDragLeaveHandler = document.ondragleave;
-document.ondragleave = (e) => {
-  // Prevent default to allow drop
-  e.preventDefault();
-
-  // Send dragleave event to parent directly as JSON
-  sendDirectEventToCD("file_dragleave", {
-    x: e.clientX,
-    y: e.clientY,
-    timestamp: Date.now(),
-  });
-
-  if (originalDragLeaveHandler) {
-    originalDragLeaveHandler(e);
-  }
-};
-
-const originalDragOverHandler = document.ondragover;
-document.ondragover = (e) => {
-  // Prevent default to allow drop
-  e.preventDefault();
-
-  // Send dragover event to parent directly as JSON
-  sendDirectEventToCD("file_dragover", {
-    x: e.clientX,
-    y: e.clientY,
-    timestamp: Date.now(),
-  });
-
-  if (originalDragOverHandler) {
-    originalDragOverHandler(e);
-  }
-};
-
-// Function to create a single button
-function createQueueButton(config) {
-  const button = document.createElement("button");
-  button.id = `cd-button-${config.id}`;
-  button.className =
-    "p-button p-component p-button-icon-only p-button-secondary p-button-text";
-  button.innerHTML = `
-    <span class="p-button-icon pi ${config.icon}"></span>
-    <span class="p-button-label">&nbsp;</span>
-  `;
-  button.onclick = () => {
-    const eventData =
-      typeof config.eventData === "function"
-        ? config.eventData()
-        : config.eventData || {};
-    sendEventToCD(config.event, eventData);
-  };
-  button.setAttribute("data-pd-tooltip", config.tooltip);
-  return button;
-}
-
-// Function to add buttons to queue group
-function addQueueButtons(buttonConfigs = DEFAULT_BUTTONS) {
-  const queueButtonGroup = document.querySelector(".queue-button-group.flex");
-  if (!queueButtonGroup) return;
-
-  // Remove any existing CD buttons
-  const existingButtons =
-    queueButtonGroup.querySelectorAll('[id^="cd-button-"]');
-  existingButtons.forEach((button) => button.remove());
-
-  // Add new buttons
-  buttonConfigs.forEach((config) => {
-    const button = createQueueButton(config);
-    queueButtonGroup.appendChild(button);
-  });
-}
-
-// addMenuRightButtons([
-//   {
-//     id: "cd-button-save-image",
-//     icon: "pi-save",
-//     label: "Snapshot",
-//     tooltip: "Save the current image to your output directory.",
-//     event: "save_image",
-//     eventData: () => ({}),
-//   },
-// ]);
-
-// addMenuLeftButtons([
-//   {
-//     id: "cd-button-back",
-//     icon: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-//       <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-//     </svg>`,
-//     tooltip: "Go back to the previous page.",
-//     event: "back",
-//     eventData: () => ({}),
-//   },
-// ]);
-
-// addMenuButtons({
-//   containerSelector: "body > div.comfyui-body-top > div",
-//   buttonConfigs: [
-//     {
-//       id: "cd-button-workflow-1",
-//       icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 3l4 4l-4 4m-6-4h10M8 13l-4 4l4 4m-4-4h9"/></svg>`,
-//       label: "Workflow",
-//       tooltip: "Go to Workflow 1",
-//       event: "workflow_1",
-//       // btnClasses: "",
-//       eventData: () => ({}),
-//     },
-//     {
-//       id: "cd-button-workflow-3",
-//       // icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m16 3l4 4l-4 4m-6-4h10M8 13l-4 4l4 4m-4-4h9"/></svg>`,
-//       label: "v1",
-//       tooltip: "Go to Workflow 1",
-//       event: "workflow_1",
-//       // btnClasses: "",
-//       eventData: () => ({}),
-//     },
-//     {
-//       id: "cd-button-workflow-2",
-//       icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 3v6"/><circle cx="12" cy="12" r="3"/><path d="M12 15v6"/></g></svg>`,
-//       label: "Commit",
-//       tooltip: "Commit the current workflow",
-//       event: "commit",
-//       style: {
-//         backgroundColor: "oklch(.476 .114 61.907)",
-//       },
-//       eventData: () => ({}),
-//     },
-//   ],
-//   buttonIdPrefix: "cd-button-workflow-",
-//   insertBefore:
-//     "body > div.comfyui-body-top > div > div.flex-grow.min-w-0.app-drag.h-full",
-//   // containerStyle: { order: "3" }
-// });
-
-// addMenuButtons({
-//   containerSelector:
-//     "body > div.comfyui-body-top > div > div.flex-grow.min-w-0.app-drag.h-full",
-//   clearContainer: true,
-//   buttonConfigs: [],
-//   buttonIdPrefix: "cd-button-p-",
-//   containerStyle: { order: "-1" },
-// });
-
-// Function to add buttons to a menu container
-function addMenuButtons(options) {
-  const {
-    containerSelector,
-    buttonConfigs,
-    buttonIdPrefix = "cd-button-",
-    containerClass = "comfyui-button-group",
-    containerStyle = {},
-    clearContainer = false,
-    insertBefore = null, // New option to specify selector for insertion point
-  } = options;
-
-  const menuContainer = document.querySelector(containerSelector);
-
-  if (!menuContainer) return;
-
-  // Remove any existing CD buttons
-  const existingButtons = document.querySelectorAll(
-    `[id^="${buttonIdPrefix}"]`,
-  );
-  existingButtons.forEach((button) => button.remove());
-
-  const container = document.createElement("div");
-  container.className = containerClass;
-
-  // Apply container styles
-  Object.assign(container.style, containerStyle);
-
-  // Clear existing content if specified
-  if (clearContainer) {
-    menuContainer.innerHTML = "";
-  }
-
-  // Create and add buttons
-  buttonConfigs.forEach((config) => {
-    const button = createMenuButton({
-      ...config,
-      idPrefix: buttonIdPrefix,
-    });
-    container.appendChild(button);
-  });
-
-  // Insert before specified element if provided, otherwise append
-  if (insertBefore) {
-    const targetElement = menuContainer.querySelector(insertBefore);
-    if (targetElement) {
-      menuContainer.insertBefore(container, targetElement);
-    } else {
-      menuContainer.appendChild(container);
-    }
-  } else {
-    menuContainer.appendChild(container);
-  }
-}
-
-function createMenuButton(config) {
-  const {
-    id,
-    icon,
-    label,
-    btnClasses = "",
-    tooltip,
-    event,
-    eventData,
-    idPrefix,
-    style = {},
-  } = config;
-
-  const button = document.createElement("button");
-  button.id = `${idPrefix}${id}`;
-  button.className = `comfyui-button ${btnClasses}`;
-  Object.assign(button.style, style);
-
-  // Only add icon if provided
-  const iconHtml = icon
-    ? icon.startsWith("<svg")
-      ? icon
-      : `<span class="p-button-icon pi ${icon}"></span>`
-    : "";
-
-  button.innerHTML = `
-    ${iconHtml}
-    ${label ? `<span class="p-button-label text-sm">${label}</span>` : ""}
-  `;
-
-  button.onclick = () => {
-    const data =
-      typeof eventData === "function" ? eventData() : eventData || {};
-    sendEventToCD(event, data);
-  };
-
-  if (tooltip) {
-    button.setAttribute("data-pd-tooltip", tooltip);
-  }
-  return button;
-}
-
-// Refactored menu button functions
-function addMenuLeftButtons(buttonConfigs) {
-  addMenuButtons({
-    containerSelector: "body > div.comfyui-body-top > div",
-    buttonConfigs,
-    buttonIdPrefix: "cd-button-left-",
-    containerStyle: { order: "-1" },
-  });
-}
-
-function addMenuRightButtons(buttonConfigs) {
-  addMenuButtons({
-    containerSelector: ".comfyui-menu-right .flex",
-    buttonConfigs,
-    buttonIdPrefix: "cd-button-",
-    containerStyle: {},
-  });
-}

web-plugin/widgets.js

@@ -0,0 +1,18 @@
+// /** @typedef {import('../../../web/scripts/api.js').api} API*/
+// import { api as _api } from "../../scripts/api.js";
+// /** @type {API} */
+// export const api = _api;
+
+/** @typedef {typeof import('../../../web/scripts/widgets.js').ComfyWidgets} Widgets*/
+import { ComfyWidgets as _ComfyWidgets } from "../../scripts/widgets.js";
+
+/**
+ * @type {Widgets}
+ */
+export const ComfyWidgets = _ComfyWidgets;
+
+// import { LGraphNode as _LGraphNode } from "../../types/litegraph.js";
+
+/** @typedef {typeof import('../../../web/types/litegraph.js').LGraphNode} LGraphNode*/
+/** @type {LGraphNode}*/
+export const LGraphNode = LiteGraph.LGraphNode;