fix(setup): reload the app after adding the localstorage values

The current problem is that if you do `localsStorage.setItem()` the value is changed, but comfyUI doesn't detect the change because `ComfyActionbar` was already mounted. This is a quick fix where we basically trigger a reload of the app after docking the menu position.
2024-12-17 02:04:09 -06:00
12 changed files with 191 additions and 1614 deletions
@@ -1,3 +1,2 @@
 __pycache__
-.DS_Store
+.DS_Store
 file-hash-cache.json
@@ -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
@@ -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)"}
@@ -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)"
 }
@@ -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:
-        # Try both input_id and default_value_url
+            if input_id.startswith('http'):
-        urls_to_try = [url for url in [input_id, default_value_url] if url]
+                import requests
-        
+                from io import BytesIO
-        print(default_value_url)
+                print("Fetching image from url: ", input_id)
-        
+                response = requests.get(input_id)
-        for url in urls_to_try:
+                image = Image.open(BytesIO(response.content))
-            try:
+            elif input_id.startswith('data:image/png;base64,') or input_id.startswith('data:image/jpeg;base64,') or input_id.startswith('data:image/jpg;base64,'):
-                if url.startswith('http'):
+                import base64
-                    import requests
+                from io import BytesIO
-                    from io import BytesIO
+                print("Decoding base64 image")
-                    print(f"Fetching image from url: {url}")
+                base64_image = input_id[input_id.find(",")+1:]
-                    response = requests.get(url)
+                decoded_image = base64.b64decode(base64_image)
-                    image = Image.open(BytesIO(response.content))
+                image = Image.open(BytesIO(decoded_image))
-                    break
+            else:
-                elif url.startswith(('data:image/png;base64,', 'data:image/jpeg;base64,', 'data:image/jpg;base64,')):
+                raise ValueError("Invalid image url provided.")
-                    import base64
+
-                    from io import BytesIO
+            image = ImageOps.exif_transpose(image)
-                    print("Decoding base64 image")
+            image = image.convert("RGB")
-                    base64_image = url[url.find(",")+1:]
+            image = np.array(image).astype(np.float32) / 255.0
-                    decoded_image = base64.b64decode(base64_image)
+            image = torch.from_numpy(image)[None,]
-                    image = Image.open(BytesIO(decoded_image))
+            return [image]
-                    break
+        except:
-            except:
+            return [image]
                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]
 NODE_CLASS_MAPPINGS = {"ComfyUIDeployExternalImage": ComfyUIDeployExternalImage}
@@ -1,100 +0,0 @@
 import os
 import json
 import numpy as np
 from PIL import Image
 from PIL.PngImagePlugin import PngInfo
 import folder_paths
 class ComfyDeployOutputImage:
    def __init__(self):
        self.output_dir = folder_paths.get_output_directory()
        self.type = "output"
        self.prefix_append = ""
        self.compress_level = 4
    @classmethod
    def INPUT_TYPES(s):
        return {
            "required": {
                "images": ("IMAGE", {"tooltip": "The images to save."}),
                "filename_prefix": (
                    "STRING",
                    {
                        "default": "ComfyUI",
                        "tooltip": "The prefix for the file to save. This may include formatting information such as %date:yyyy-MM-dd% or %Empty Latent Image.width% to include values from nodes.",
                    },
                ),
                "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"},
        }
    RETURN_TYPES = ()
    FUNCTION = "run"
    OUTPUT_NODE = True
    CATEGORY = "output"
    DESCRIPTION = "Saves the input images to your ComfyUI output directory."
    def run(
        self,
        images,
        filename_prefix="ComfyUI",
        file_type="png",
        quality=80,
        output_id="output_images",
        prompt=None,
        extra_pnginfo=None,
    ):
        filename_prefix += self.prefix_append
        full_output_folder, filename, counter, subfolder, filename_prefix = (
            folder_paths.get_save_image_path(
                filename_prefix, self.output_dir, images[0].shape[1], images[0].shape[0]
            )
        )
        results = list()
        for batch_number, image in enumerate(images):
            i = 255.0 * image.cpu().numpy()
            img = Image.fromarray(np.clip(i, 0, 255).astype(np.uint8))
            metadata = PngInfo()
            if prompt is not None:
                metadata.add_text("prompt", json.dumps(prompt))
            if extra_pnginfo is not None:
                for x in extra_pnginfo:
                    metadata.add_text(x, json.dumps(extra_pnginfo[x]))
            filename_with_batch_num = filename.replace("%batch_num%", str(batch_number))
            file = f"{filename_with_batch_num}_{counter:05}_.{file_type}"
            file_path = os.path.join(full_output_folder, file)
            if file_type == "png":
                img.save(
                    file_path, pnginfo=metadata, compress_level=self.compress_level
                )
            elif file_type == "jpg":
                img.save(file_path, quality=quality, optimize=True)
            elif file_type == "webp":
                img.save(file_path, quality=quality)
            results.append(
                {
                    "filename": file,
                    "subfolder": subfolder,
                    "type": self.type,
                    "output_id": output_id,
                }
            )
            counter += 1
        return {"ui": {"images": results}}
 NODE_CLASS_MAPPINGS = {"ComfyDeployOutputImage": ComfyDeployOutputImage}
 NODE_DISPLAY_NAME_MAPPINGS = {"ComfyDeployOutputImage": "Image Output (ComfyDeploy)"}
@@ -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]
@@ -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;
@@ -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;
@@ -1,11 +1,8 @@
-import { app } from "../../scripts/app.js";
+import { app } from "./app.js";
-import { api } from "../../scripts/api.js";
+import { api } from "./api.js";
-// import { LGraphNode } from "../../scripts/widgets.js";
+import { ComfyWidgets, LGraphNode } from "./widgets.js";
 LGraphNode = LiteGraph.LGraphNode;
 import { ComfyDialog, $el } from "../../scripts/ui.js";
 import { generateDependencyGraph } from "https://esm.sh/comfyui-json@0.1.25";
-import { ComfyDeploy } from "https://esm.sh/comfydeploy@2.0.0-beta.69";
+import { ComfyDeploy } from "https://esm.sh/comfydeploy@0.0.19-beta.30";
 const styles = `
 .comfydeploy-menu-item {
@@ -50,14 +47,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);
@@ -494,13 +483,6 @@ const ext = {
      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
@@ -627,78 +609,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 +636,6 @@ const ext = {
            }
            console.log("loadGraphData");
            app.loadGraphData(comfyUIWorkflow);
            sendEventToCD("graph_loaded");
          }
        } else if (message.type === "deploy") {
          // deployWorkflow();
@@ -741,35 +650,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();
@@ -867,9 +752,10 @@ const ext = {
        );
        await app.ui.settings.setSettingValueAsync(
          "Comfy.Sidebar.Location",
-          "left",
+          "right",
        );
-        // localStorage.setItem("Comfy.MenuPosition.Docked", "true");
+        localStorage.setItem("Comfy.MenuPosition.Docked", "true");
        window.location.reload();
        console.log("native mode manmanman");
      } catch (error) {
        console.error("Error setting validation to false", error);
@@ -1402,6 +1288,8 @@ function addButton() {
 app.registerExtension(ext);
 import { ComfyDialog, $el } from "../../scripts/ui.js";
 export class InfoDialog extends ComfyDialog {
  constructor() {
    super();
@@ -1872,7 +1760,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 +1860,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 +1877,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 +1892,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: {},
  });
 }
@@ -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;