Add custom nodes, Civitai loras (LFS), and vast.ai setup script

Includes 30 custom nodes committed directly, 7 Civitai-exclusive
loras stored via Git LFS, and a setup script that installs all
dependencies and downloads HuggingFace-hosted models on vast.ai.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

custom_nodes/comfyui-manager/js/README.md

@@ -0,0 +1,50 @@
+# ComfyUI-Manager: Frontend (js)
+
+This directory contains the JavaScript frontend implementation for ComfyUI-Manager, providing the user interface components that interact with the backend API.
+
+## Core Components
+
+- **comfyui-manager.js**: Main entry point that initializes the manager UI and integrates with ComfyUI.
+- **custom-nodes-manager.js**: Implements the UI for browsing, installing, and managing custom nodes.
+- **model-manager.js**: Handles the model management interface for downloading and organizing AI models.
+- **components-manager.js**: Manages reusable workflow components system.
+- **snapshot.js**: Implements the snapshot system for backing up and restoring installations.
+
+## Sharing Components
+
+- **comfyui-share-common.js**: Base functionality for workflow sharing features.
+- **comfyui-share-copus.js**: Integration with the ComfyUI Copus sharing platform.
+- **comfyui-share-openart.js**: Integration with the OpenArt sharing platform.
+- **comfyui-share-youml.js**: Integration with the YouML sharing platform.
+
+## Utility Components
+
+- **cm-api.js**: Client-side API wrapper for communication with the backend.
+- **common.js**: Shared utilities and helper functions used across the frontend.
+- **node_fixer.js**: Utilities for fixing disconnected links and repairing malformed nodes by recreating them while preserving connections.
+- **popover-helper.js**: UI component for popup tooltips and contextual information.
+- **turbogrid.esm.js**: Grid component library - https://github.com/cenfun/turbogrid
+- **workflow-metadata.js**: Handles workflow metadata parsing, validation and cross-repository compatibility including versioning, dependencies tracking, and resource management.
+
+## Architecture
+
+The frontend follows a modular component-based architecture:
+
+1. **Integration Layer**: Connects with ComfyUI's existing UI system
+2. **Manager Components**: Individual functional UI components (node manager, model manager, etc.)
+3. **Sharing Components**: Platform-specific sharing implementations
+4. **Utility Layer**: Reusable UI components and helpers
+
+## Implementation Details
+
+- The frontend integrates directly with ComfyUI's UI system through `app.js`
+- Dialog-based UI for most manager functions to avoid cluttering the main interface
+- Asynchronous API calls to handle backend operations without blocking the UI
+
+## Styling
+
+CSS files are included for specific components:
+- **custom-nodes-manager.css**: Styling for the node management UI
+- **model-manager.css**: Styling for the model management UI
+
+This frontend implementation provides a comprehensive yet user-friendly interface for managing the ComfyUI ecosystem.

custom_nodes/comfyui-manager/js/cm-api.js

@@ -0,0 +1,67 @@
+import { api } from "../../scripts/api.js";
+import { app } from "../../scripts/app.js";
+import { sleep, customConfirm, customAlert, handle403Response, show_message } from "./common.js";
+
+async function tryInstallCustomNode(event) {
+	let msg = '-= [ComfyUI Manager] extension installation request =-\n\n';
+	msg += `The '${event.detail.sender}' extension requires the installation of the '${event.detail.target.title}' extension. `;
+
+	if(event.detail.target.installed == 'Disabled') {
+		msg += 'However, the extension is currently disabled. Would you like to enable it and reboot?'
+	}
+	else if(event.detail.target.installed == 'True') {
+		msg += 'However, it seems that the extension is in an import-fail state or is not compatible with the current version. Please address this issue.';
+	}
+	else {
+		msg += `Would you like to install it and reboot?`;
+	}
+
+	msg += `\n\nRequest message:\n${event.detail.msg}`;
+
+	if(event.detail.target.installed == 'True') {
+		customAlert(msg);
+		return;
+	}
+	const res = await customConfirm(msg);
+	if(res) {
+		if(event.detail.target.installed == 'Disabled') {
+			const response = await api.fetchApi(`/customnode/toggle_active`, {
+										method: 'POST',
+										headers: { 'Content-Type': 'application/json' },
+										body: JSON.stringify(event.detail.target)
+									});
+		}
+		else {
+			await sleep(300);
+			app.ui.dialog.show(`Installing... '${event.detail.target.title}'`);
+
+			const response = await api.fetchApi(`/customnode/install`, {
+										method: 'POST',
+										headers: { 'Content-Type': 'application/json' },
+										body: JSON.stringify(event.detail.target)
+									});
+
+			if(response.status == 403) {
+				await handle403Response(response);
+				return false;
+			}
+			else if(response.status == 400) {
+				let msg = await res.text();
+				show_message(msg);
+				return false;
+			}
+		}
+
+		let response = await api.fetchApi("/manager/reboot");
+		if(response.status == 403) {
+			await handle403Response(response);
+			return false;
+		}
+
+		await sleep(300);
+
+		app.ui.dialog.show(`Rebooting...`);
+	}
+}
+
+api.addEventListener("cm-api-try-install-customnode", tryInstallCustomNode);

custom_nodes/comfyui-manager/js/comfyui-gui-builder.js

@@ -0,0 +1,227 @@
+import { $el } from "../../scripts/ui.js";
+
+function normalizeContent(content) {
+	const tmp = document.createElement('div');
+	if (typeof content === 'string') {
+		tmp.innerHTML = content;
+		return Array.from(tmp.childNodes);
+	}
+	if (content instanceof Node) {
+		return content;
+	}
+	return content;
+}
+
+export function createSettingsCombo(label, content) {
+	const settingItem = $el("div.setting-item", {}, [
+		$el("div.flex.flex-row.items-center.gap-2",[
+				$el("div.form-label.flex.grow.items-center", [
+					$el("span.text-muted", { textContent: label },)
+				]),
+				$el("div.form-input.flex.justify-end",
+					[content]
+				)
+			]
+		)
+	]);
+	return settingItem;
+}
+
+export function buildGuiFrame(dialogId, title, iconClass, content, owner) {
+	const dialog_mask = $el("div.p-dialog-mask.p-overlay-mask.p-overlay-mask-enter", {
+		parent: document.body,
+		style: {
+			position: "fixed",
+			height: "100%",
+			width: "100%",
+			left: "0px",
+			top: "0px",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			pointerEvents: "auto",
+			zIndex: "1000"
+		},
+		onclick: (e) => {
+			if (e.target === dialog_mask) {
+				owner.close();
+			}
+		}
+		// data-pc-section="mask"
+	});
+
+	const header_actions = $el("div.p-dialog-header-actions", {
+			// [TODO]
+			// data-pc-section="headeractions"
+		}
+	);
+
+	const close_button = $el("button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-text.p-dialog-close-button", {
+			parent: header_actions,
+			type: "button",
+			ariaLabel: "Close",
+			onclick: () => owner.close(),
+			// "data-pc-name": "pcclosebutton",
+			// "data-p-disabled": "false",
+			// "data-p-severity": "secondary",
+			// "data-pc-group-section": "headericon",
+			// "data-pc-extend": "button",
+			// "data-pc-section": "root",
+			// [FIXME] Not sure how to do most of the SVG using $el
+			innerHTML: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon p-button-icon" aria-hidden="true"><path d="M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z" fill="currentColor"></path></svg><span class="p-button-label" data-pc-section="label">&nbsp;</span><!---->'
+		}
+	);
+
+	const dialog_header = $el("div.p-dialog-header", 
+		[
+			$el("div", [
+				$el("div",
+					{
+						id: "frame-title-container",
+					},
+					[
+						$el("h2.px-4", [
+							$el(iconClass, {
+								style: {
+									"font-size": "1.25rem",
+									"margin-right": ".5rem"
+								}
+							}),
+							$el("span", { textContent: title })
+						])
+					]
+					)
+				]),
+			header_actions
+		]
+	);
+
+	const contentFrame = $el("div.p-dialog-content", {}, normalizeContent(content));
+	const manager_dialog = $el("div.p-dialog.p-component.global-dialog", {
+			id: dialogId,
+			parent: dialog_mask,
+			style: {
+				'display': 'flex',
+				'flex-direction': 'column',
+				'pointer-events': 'auto',
+				'margin': '0px',
+			},
+			role: 'dialog',
+			ariaModal: 'true',
+			// [TODO]
+			// ariaLabbelledby: 'cm-title',
+			// maximized: 'false',
+			// data-pc-name: 'dialog',
+			// data-pc-section: 'root',
+			// data-pd-focustrap: 'true'
+		},
+		[ dialog_header, contentFrame ]
+	);
+
+	const hidden_accessible = $el("span.p-hidden-accessible.p-hidden-focusable", {
+		parent: manager_dialog,
+		tabindex: "0",
+		role: "presentation",
+		ariaHidden: "true",
+		"data-p-hidden-accessible": "true",
+		"data-p-hidden-focusable": "true",
+		"data-pc-section": "firstfocusableelement"
+	});
+
+	return dialog_mask;
+}
+
+export function buildGuiFrameCustomHeader(dialogId, customHeader, content, owner) {
+	const dialog_mask = $el("div.p-dialog-mask.p-overlay-mask.p-overlay-mask-enter", {
+		parent: document.body,
+		style: {
+			position: "fixed",
+			height: "100%",
+			width: "100%",
+			left: "0px",
+			top: "0px",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			pointerEvents: "auto",
+			zIndex: "1000"
+		},
+		onclick: (e) => {
+			if (e.target === dialog_mask) {
+				owner.close();
+			}
+		}
+		// data-pc-section="mask"
+	});
+
+	const header_actions = $el("div.p-dialog-header-actions", {
+			// [TODO]
+			// data-pc-section="headeractions"
+		}
+	);
+
+	const close_button = $el("button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-text.p-dialog-close-button", {
+			parent: header_actions,
+			type: "button",
+			ariaLabel: "Close",
+			onclick: () => owner.close(),
+			// "data-pc-name": "pcclosebutton",
+			// "data-p-disabled": "false",
+			// "data-p-severity": "secondary",
+			// "data-pc-group-section": "headericon",
+			// "data-pc-extend": "button",
+			// "data-pc-section": "root",
+			// [FIXME] Not sure how to do most of the SVG using $el
+			innerHTML: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon p-button-icon" aria-hidden="true"><path d="M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z" fill="currentColor"></path></svg><span class="p-button-label" data-pc-section="label">&nbsp;</span><!---->'
+		}
+	);
+
+	const _customHeader = normalizeContent(customHeader);
+	const dialog_header = $el("div.p-dialog-header",
+		[
+			$el("div", [
+				$el("div",
+					{
+						id: "frame-title-container",
+					},
+					Array.isArray(_customHeader) ? _customHeader : [_customHeader]
+					)
+				]),
+			header_actions
+		]
+	);
+
+	const contentFrame = $el("div.p-dialog-content", {}, normalizeContent(content));
+	const manager_dialog = $el("div.p-dialog.p-component.global-dialog", {
+			id: dialogId,
+			parent: dialog_mask,
+			style: {
+				'display': 'flex',
+				'flex-direction': 'column',
+				'pointer-events': 'auto',
+				'margin': '0px',
+			},
+			role: 'dialog',
+			ariaModal: 'true',
+			// [TODO]
+			// ariaLabbelledby: 'cm-title',
+			// maximized: 'false',
+			// data-pc-name: 'dialog',
+			// data-pc-section: 'root',
+			// data-pd-focustrap: 'true'
+		},
+		[ dialog_header, contentFrame ]
+	);
+
+	const hidden_accessible = $el("span.p-hidden-accessible.p-hidden-focusable", {
+		parent: manager_dialog,
+		tabindex: "0",
+		role: "presentation",
+		ariaHidden: "true",
+		"data-p-hidden-accessible": "true",
+		"data-p-hidden-focusable": "true",
+		"data-pc-section": "firstfocusableelement"
+	});
+
+	return dialog_mask;
+}

custom_nodes/comfyui-manager/js/comfyui-share-openart.js

@@ -0,0 +1,746 @@
+import {app} from "../../scripts/app.js";
+import {api} from "../../scripts/api.js";
+import {ComfyDialog, $el} from "../../scripts/ui.js";
+import { customAlert } from "./common.js";
+
+const LOCAL_STORAGE_KEY = "openart_comfy_workflow_key";
+const DEFAULT_HOMEPAGE_URL = "https://openart.ai/workflows/dev?developer=true";
+//const DEFAULT_HOMEPAGE_URL = "http://localhost:8080/workflows/dev?developer=true";
+
+const API_ENDPOINT = "https://openart.ai/api";
+//const API_ENDPOINT = "http://localhost:8080/api";
+
+const style = `
+  .openart-share-dialog a {
+    color: #f8f8f8;
+  }
+  .openart-share-dialog a:hover {
+    color: #007bff;
+  }
+  .output_label {
+    border: 5px solid transparent;
+  }
+  .output_label:hover {
+    border: 5px solid #59E8C6;
+  }
+  .output_label.checked {
+    border: 5px solid #59E8C6;
+  }
+`;
+
+// Shared component styles
+const sectionStyle = {
+  marginBottom: 0,
+  padding: 0,
+  borderRadius: "8px",
+  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+};
+
+export class OpenArtShareDialog extends ComfyDialog {
+  static instance = null;
+
+  constructor() {
+    super();
+    $el("style", {
+      textContent: style,
+      parent: document.head,
+    });
+    this.element = $el(
+      "div.comfy-modal.openart-share-dialog",
+      {
+        parent: document.body,
+        style: {
+          "overflow-y": "auto",
+        },
+      },
+      [$el("div.comfy-modal-content", {}, [...this.createButtons()])]
+    );
+    this.selectedOutputIndex = 0;
+    this.selectedNodeId = null;
+    this.uploadedImages = [];
+    this.selectedFile = null;
+  }
+
+  async readKey() {
+    let key = ""
+    try {
+      key = await api.fetchApi(`/manager/get_openart_auth`)
+        .then(response => response.json())
+        .then(data => {
+          return data.openart_key;
+        })
+        .catch(error => {
+          // console.log(error);
+        });
+    } catch (error) {
+      // console.log(error);
+    }
+    return key || "";
+  }
+
+  async saveKey(value) {
+    await api.fetchApi(`/manager/set_openart_auth`, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({
+        openart_key: value
+      })
+    });
+  }
+
+  createButtons() {
+    const inputStyle = {
+      display: "block",
+      minWidth: "500px",
+      width: "100%",
+      padding: "10px",
+      margin: "10px 0",
+      borderRadius: "4px",
+      border: "1px solid #ddd",
+      boxSizing: "border-box",
+    };
+
+    const hyperLinkStyle = {
+      display: "block",
+      marginBottom: "15px",
+      fontWeight: "bold",
+      fontSize: "14px",
+    };
+
+    const labelStyle = {
+      color: "#f8f8f8",
+      display: "block",
+      margin: "10px 0 0 0",
+      fontWeight: "bold",
+      textDecoration: "none",
+    };
+
+    const buttonStyle = {
+      padding: "10px 80px",
+      margin: "10px 5px",
+      borderRadius: "4px",
+      border: "none",
+      cursor: "pointer",
+      color: "#fff",
+      backgroundColor: "#007bff",
+    };
+
+    // upload images input
+    this.uploadImagesInput = $el("input", {
+      type: "file",
+      multiple: false,
+      style: inputStyle,
+      accept: "image/*",
+    });
+
+    this.uploadImagesInput.addEventListener("change", async (e) => {
+      const file = e.target.files[0];
+      if (!file) {
+        this.previewImage.src = "";
+        this.previewImage.style.display = "none";
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const imgData = e.target.result;
+        this.previewImage.src = imgData;
+        this.previewImage.style.display = "block";
+        this.selectedFile = null
+        // Once user uploads an image, we uncheck all radio buttons
+        this.radioButtons.forEach((ele) => {
+          ele.checked = false;
+          ele.parentElement.classList.remove("checked");
+        });
+
+        // Add the opacity style toggle here to indicate that they only need
+        // to upload one image or choose one from the outputs.
+        this.outputsSection.style.opacity = 0.35;
+        this.uploadImagesInput.style.opacity = 1;
+      };
+      reader.readAsDataURL(file);
+    });
+
+    // preview image
+    this.previewImage = $el("img", {
+      src: "",
+      style: {
+        width: "100%",
+        maxHeight: "100px",
+        objectFit: "contain",
+        display: "none",
+        marginTop: '10px',
+      },
+    });
+
+    this.keyInput = $el("input", {
+      type: "password",
+      placeholder: "Copy & paste your API key",
+      style: inputStyle,
+    });
+    this.NameInput = $el("input", {
+      type: "text",
+      placeholder: "Title (required)",
+      style: inputStyle,
+    });
+    this.descriptionInput = $el("textarea", {
+      placeholder: "Description (optional)",
+      style: {
+        ...inputStyle,
+        minHeight: "100px",
+      },
+    });
+
+    // Header Section
+    const headerSection = $el("h3", {
+      textContent: "Share your workflow to OpenArt",
+      size: 3,
+      color: "white",
+      style: {
+        'text-align': 'center',
+        color: 'var(--input-text)',
+        margin: '0 0 10px 0',
+      }
+    });
+
+    // LinkSection
+    this.communityLink = $el("a", {
+      style: hyperLinkStyle,
+      href: DEFAULT_HOMEPAGE_URL,
+      target: "_blank"
+    }, ["👉 Check out thousands of workflows shared from the community"])
+    this.getAPIKeyLink = $el("a", {
+      style: {
+        ...hyperLinkStyle,
+        color: "#59E8C6"
+      },
+      href: DEFAULT_HOMEPAGE_URL,
+      target: "_blank"
+    }, ["👉 Get your API key here"])
+    const linkSection = $el(
+      "div",
+      {
+        style: {
+          marginTop: "10px",
+          display: "flex",
+          flexDirection: "column",
+        },
+      },
+      [
+        this.communityLink,
+        this.getAPIKeyLink,
+      ]
+    );
+
+    // Account Section
+    const accountSection = $el("div", {style: sectionStyle}, [
+      $el("label", {style: labelStyle}, ["1️⃣ OpenArt API Key"]),
+      this.keyInput,
+    ]);
+
+    // Output Upload Section
+    const outputUploadSection = $el("div", {style: sectionStyle}, [
+      $el("label", {
+        style: {
+          ...labelStyle,
+          margin: "10px 0 0 0"
+        }
+      }, ["2️⃣ Image/Thumbnail (Required)"]),
+      this.previewImage,
+      this.uploadImagesInput,
+    ]);
+
+    // Outputs Section
+    this.outputsSection = $el("div", {
+      id: "selectOutputs",
+    }, []);
+
+    // Additional Inputs Section
+    const additionalInputsSection = $el("div", {style: sectionStyle}, [
+      $el("label", {style: labelStyle}, ["3️⃣ Workflow Information"]),
+      this.NameInput,
+      this.descriptionInput,
+    ]);
+
+    // OpenArt Contest Section
+    /*
+    this.joinContestCheckbox = $el("input", {
+      type: 'checkbox',
+      id: "join_contest"s
+    }, [])
+    this.joinContestDescription = $el("a", {
+      style: {
+        ...hyperLinkStyle,
+        display: 'inline-block',
+        color: "#59E8C6",
+        fontSize: '12px',
+        marginLeft: '10px',
+        marginBottom: 0,
+      },
+      href: "https://contest.openart.ai/",
+      target: "_blank"
+    }, ["🏆 I'm participating in the OpenArt workflow contest"])
+    this.joinContestLabel = $el("label", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+      }
+    }, [this.joinContestCheckbox, this.joinContestDescription])
+    const contestSection = $el("div", {style: sectionStyle}, [
+      this.joinContestLabel,
+    ]);
+    */
+
+    // Message Section
+    this.message = $el(
+      "div",
+      {
+        style: {
+          color: "#ff3d00",
+          textAlign: "center",
+          padding: "10px",
+          fontSize: "20px",
+        },
+      },
+      []
+    );
+
+    this.shareButton = $el("button", {
+      type: "submit",
+      textContent: "Share",
+      style: buttonStyle,
+      onclick: () => {
+        this.handleShareButtonClick();
+      },
+    });
+
+    // Share and Close Buttons
+    const buttonsSection = $el(
+      "div",
+      {
+        style: {
+          textAlign: "right",
+          marginTop: "20px",
+          display: "flex",
+          justifyContent: "space-between",
+        },
+      },
+      [
+        $el("button", {
+          type: "button",
+          textContent: "Close",
+          style: {
+            ...buttonStyle,
+            backgroundColor: undefined,
+          },
+          onclick: () => {
+            this.close();
+          },
+        }),
+        this.shareButton,
+      ]
+    );
+
+    // Composing the full layout
+    const layout = [
+      headerSection,
+      linkSection,
+      accountSection,
+      outputUploadSection,
+      this.outputsSection,
+      additionalInputsSection,
+      // contestSection,
+      this.message,
+      buttonsSection,
+    ];
+
+    return layout;
+  }
+
+  async fetchApi(path, options, statusText) {
+    if (statusText) {
+      this.message.textContent = statusText;
+    }
+    const addSearchParams = (url, params = {}) =>
+      new URL(
+        `${url.origin}${url.pathname}?${new URLSearchParams([
+          ...Array.from(url.searchParams.entries()),
+          ...Object.entries(params),
+        ])}`
+      );
+
+    const fullPath = addSearchParams(new URL(API_ENDPOINT + path), {
+      workflow_api_key: this.keyInput.value,
+    });
+
+    const response = await fetch(fullPath, options);
+
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    if (statusText) {
+      this.message.textContent = "";
+    }
+    const data = await response.json();
+    return {
+      ok: response.ok,
+      statusText: response.statusText,
+      status: response.status,
+      data,
+    };
+  }
+
+  async uploadThumbnail(uploadFile) {
+    const form = new FormData();
+    form.append("file", uploadFile);
+    try {
+      const res = await this.fetchApi(
+        `/workflows/upload_thumbnail`,
+        {
+          method: "POST",
+          body: form,
+        },
+        "Uploading thumbnail..."
+      );
+
+      if (res.ok && res.data) {
+        const {image_url, width, height} = res.data;
+        this.uploadedImages.push({
+          url: image_url,
+          width,
+          height,
+        });
+      }
+    } catch (e) {
+      if (e?.response?.status === 413) {
+        throw new Error("File size is too large (max 20MB)");
+      } else {
+        throw new Error("Error uploading thumbnail: " + e.message);
+      }
+    }
+  }
+
+  async handleShareButtonClick() {
+    this.message.textContent = "";
+    await this.saveKey(this.keyInput.value);
+    try {
+      this.shareButton.disabled = true;
+      this.shareButton.textContent = "Sharing...";
+      await this.share();
+    } catch (e) {
+      customAlert(e.message);
+    }
+    this.shareButton.disabled = false;
+    this.shareButton.textContent = "Share";
+  }
+
+  async share() {
+    const prompt = await app.graphToPrompt();
+    const workflowJSON = prompt["workflow"];
+    const workflowAPIJSON = prompt["output"];
+    const form_values = {
+      name: this.NameInput.value,
+      description: this.descriptionInput.value,
+    };
+
+    if (!this.keyInput.value) {
+      throw new Error("API key is required");
+    }
+
+    if (!this.uploadImagesInput.files[0] && !this.selectedFile) {
+      throw new Error("Thumbnail is required");
+    }
+
+    if (!form_values.name) {
+      throw new Error("Title is required");
+    }
+
+    const current_snapshot = await api.fetchApi(`/snapshot/get_current`)
+      .then(response => response.json())
+      .catch(error => {
+        // console.log(error);
+      });
+
+
+    if (!this.uploadedImages.length) {
+      if (this.selectedFile) {
+        await this.uploadThumbnail(this.selectedFile);
+      } else {
+        for (const file of this.uploadImagesInput.files) {
+          try {
+            await this.uploadThumbnail(file);
+          } catch (e) {
+            this.uploadedImages = [];
+            throw new Error(e.message);
+          }
+        }
+
+        if (this.uploadImagesInput.files.length === 0) {
+          throw new Error("No thumbnail uploaded");
+        }
+      }
+    }
+
+    // const join_contest = this.joinContestCheckbox.checked;
+
+    try {
+      const response = await this.fetchApi(
+        "/workflows/publish",
+        {
+          method: "POST",
+          headers: {"Content-Type": "application/json"},
+          body: JSON.stringify({
+            workflow_json: workflowJSON,
+            upload_images: this.uploadedImages,
+            form_values,
+            advanced_config: {
+              workflow_api_json: workflowAPIJSON,
+              snapshot: current_snapshot,
+            },
+            // join_contest,
+          }),
+        },
+        "Uploading workflow..."
+      );
+
+      if (response.ok) {
+        const {workflow_id} = response.data;
+        if (workflow_id) {
+          const url = `https://openart.ai/workflows/-/-/${workflow_id}`;
+          this.message.innerHTML = `Workflow has been shared successfully. <a href="${url}" target="_blank">Click here to view it.</a>`;
+          this.previewImage.src = "";
+          this.previewImage.style.display = "none";
+          this.uploadedImages = [];
+          this.NameInput.value = "";
+          this.descriptionInput.value = "";
+          this.radioButtons.forEach((ele) => {
+            ele.checked = false;
+            ele.parentElement.classList.remove("checked");
+          });
+          this.selectedOutputIndex = 0;
+          this.selectedNodeId = null;
+          this.selectedFile = null;
+        }
+      }
+    } catch (e) {
+      throw new Error("Error sharing workflow: " + e.message);
+    }
+  }
+
+  async fetchImageBlob(url) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return blob;
+  }
+
+  async show({potential_outputs, potential_output_nodes} = {}) {
+    // Sort `potential_output_nodes` by node ID to make the order always
+    // consistent, but we should also keep `potential_outputs` in the same
+    // order as `potential_output_nodes`.
+    const potential_output_to_order = {};
+    potential_output_nodes.forEach((node, index) => {
+      if (node.id in potential_output_to_order) {
+        potential_output_to_order[node.id][1].push(potential_outputs[index]);
+      } else {
+        potential_output_to_order[node.id] = [node, [potential_outputs[index]]];
+      }
+    })
+    // Sort the object `potential_output_to_order` by key (node ID)
+    const sorted_potential_output_to_order = Object.fromEntries(
+      Object.entries(potential_output_to_order).sort((a, b) => a[0].id - b[0].id)
+    );
+    const sorted_potential_outputs = []
+    const sorted_potential_output_nodes = []
+    for (const [key, value] of Object.entries(sorted_potential_output_to_order)) {
+      sorted_potential_output_nodes.push(value[0]);
+      sorted_potential_outputs.push(...value[1]);
+    }
+    potential_output_nodes = sorted_potential_output_nodes;
+    potential_outputs = sorted_potential_outputs;
+
+    this.message.innerHTML = "";
+    this.message.textContent = "";
+    this.element.style.display = "block";
+    this.previewImage.src = "";
+    this.previewImage.style.display = "none";
+    const key = await this.readKey();
+    this.keyInput.value = key;
+    this.uploadedImages = [];
+
+    // If `selectedNodeId` is provided, we will select the corresponding radio
+    // button for the node. In addition, we move the selected radio button to
+    // the top of the list.
+    if (this.selectedNodeId) {
+      const index = potential_output_nodes.findIndex(node => node.id === this.selectedNodeId);
+      if (index >= 0) {
+        this.selectedOutputIndex = index;
+      }
+    }
+
+    this.radioButtons = [];
+    const new_radio_buttons = $el("div",
+      {
+        id: "selectOutput-Options",
+        style: {
+          'overflow-y': 'scroll',
+          'max-height': '200px',
+
+          'display': 'grid',
+          'grid-template-columns': 'repeat(auto-fit, minmax(100px, 1fr))',
+          'grid-template-rows': 'auto',
+          'grid-column-gap': '10px',
+          'grid-row-gap': '10px',
+          'margin-bottom': '10px',
+          'padding': '10px',
+          'border-radius': '8px',
+          'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.05)',
+          'background-color': 'var(--bg-color)',
+        }
+      },
+      potential_outputs.map((output, index) => {
+        const {node_id} = output;
+        const radio_button = $el("input", {
+          type: 'radio',
+          name: "selectOutputImages",
+          value: index,
+          required: index === 0
+        }, [])
+        let radio_button_img;
+        let filename;
+        if (output.type === "image" || output.type === "temp") {
+          radio_button_img = $el("img", {
+            src: `/view?filename=${output.image.filename}&subfolder=${output.image.subfolder}&type=${output.image.type}`,
+            style: {
+              width: "100px",
+              height: "100px",
+              objectFit: "cover",
+              borderRadius: "5px"
+            }
+          }, []);
+          filename = output.image.filename
+        } else if (output.type === "output") {
+          radio_button_img = $el("img", {
+            src: output.output.value,
+            style: {
+              width: "auto",
+              height: "100px",
+              objectFit: "cover",
+              borderRadius: "5px"
+            }
+          }, []);
+          filename = output.filename
+        } else {
+          // unsupported output type
+          // this should never happen
+          // TODO
+          radio_button_img = $el("img", {
+            src: "",
+            style: {width: "auto", height: "100px"}
+          }, []);
+        }
+        const radio_button_text = $el("span", {
+          style: {
+            color: 'gray',
+            display: 'block',
+            fontSize: '12px',
+            overflowX: 'hidden',
+            textOverflow: 'ellipsis',
+            textWrap: 'nowrap',
+            maxWidth: '100px',
+          }
+        }, [output.title])
+        const node_id_chip = $el("span", {
+          style: {
+            color: '#FBFBFD',
+            display: 'block',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            fontSize: '12px',
+            overflowX: 'hidden',
+            padding: '2px 3px',
+            textOverflow: 'ellipsis',
+            textWrap: 'nowrap',
+            maxWidth: '100px',
+            position: 'absolute',
+            top: '3px',
+            left: '3px',
+            borderRadius: '3px',
+          }
+        }, [`Node: ${node_id}`])
+        radio_button.style.color = "var(--fg-color)";
+        radio_button.checked = this.selectedOutputIndex === index;
+
+        radio_button.onchange = async () => {
+          this.selectedOutputIndex = parseInt(radio_button.value);
+
+          // Remove the "checked" class from all radio buttons
+          this.radioButtons.forEach((ele) => {
+            ele.parentElement.classList.remove("checked");
+          });
+          radio_button.parentElement.classList.add("checked");
+
+          this.fetchImageBlob(radio_button_img.src).then((blob) => {
+            const file = new File([blob], filename, {
+              type: blob.type,
+            });
+            this.previewImage.src = radio_button_img.src;
+            this.previewImage.style.display = "block";
+            this.selectedFile = file;
+          })
+
+          // Add the opacity style toggle here to indicate that they only need
+          // to upload one image or choose one from the outputs.
+          this.outputsSection.style.opacity = 1;
+          this.uploadImagesInput.style.opacity = 0.35;
+        };
+
+        if (radio_button.checked) {
+          this.fetchImageBlob(radio_button_img.src).then((blob) => {
+            const file = new File([blob], filename, {
+              type: blob.type,
+            });
+            this.previewImage.src = radio_button_img.src;
+            this.previewImage.style.display = "block";
+            this.selectedFile = file;
+          })
+          // Add the opacity style toggle here to indicate that they only need
+          // to upload one image or choose one from the outputs.
+          this.outputsSection.style.opacity = 1;
+          this.uploadImagesInput.style.opacity = 0.35;
+        }
+
+        this.radioButtons.push(radio_button);
+
+        return $el(`label.output_label${radio_button.checked ? '.checked' : ''}`, {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            marginBottom: "10px",
+            cursor: "pointer",
+            position: 'relative',
+          }
+        }, [radio_button_img, radio_button_text, radio_button, node_id_chip]);
+      })
+    );
+
+    const header =
+      $el("p", {
+        textContent: this.radioButtons.length === 0 ? "Queue Prompt to see the outputs" : "Or choose one from the outputs (scroll to see all)",
+        size: 2,
+        color: "white",
+        style: {
+          color: 'var(--input-text)',
+          margin: '0 0 5px 0',
+          fontSize: '12px',
+        },
+      }, [])
+    this.outputsSection.innerHTML = "";
+    this.outputsSection.appendChild(header);
+    this.outputsSection.appendChild(new_radio_buttons);
+  }
+}

custom_nodes/comfyui-manager/js/comfyui-share-youml.js

@@ -0,0 +1,569 @@
+import {app} from "../../scripts/app.js";
+import {api} from "../../scripts/api.js";
+import {ComfyDialog, $el} from "../../scripts/ui.js";
+import { customAlert } from "./common.js";
+
+const BASE_URL = "https://youml.com";
+//const BASE_URL = "http://localhost:3000";
+const DEFAULT_HOMEPAGE_URL = `${BASE_URL}/?from=comfyui`;
+const TOKEN_PAGE_URL = `${BASE_URL}/my-token`;
+const API_ENDPOINT = `${BASE_URL}/api`;
+
+const style = `
+  .youml-share-dialog {
+    overflow-y: auto;
+  }
+  .youml-share-dialog .dialog-header {
+    text-align: center;
+    color: white;
+    margin: 0 0 10px 0;
+  }  
+  .youml-share-dialog .dialog-section {
+    margin-bottom: 0;
+    padding: 0;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }  
+  .youml-share-dialog input, .youml-share-dialog textarea {
+    display: block;
+    min-width: 500px;
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+   }
+  .youml-share-dialog textarea {
+    color: var(--input-text);
+    background-color: var(--comfy-input-bg);
+  } 
+  .youml-share-dialog .workflow-description {
+    min-height: 75px;
+  } 
+  .youml-share-dialog label {
+    color: #f8f8f8;
+    display: block;
+    margin: 5px 0 0 0;
+    font-weight: bold;
+    text-decoration: none;
+  }
+  .youml-share-dialog .action-button {  
+    padding: 10px 80px;
+    margin: 10px 5px;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+  }  
+  .youml-share-dialog .share-button {
+    color: #fff;
+    background-color: #007bff;
+  }  
+  .youml-share-dialog .close-button {  
+    background-color: none;
+  }
+  .youml-share-dialog .action-button-panel {  
+    text-align: right;    
+    display: flex;
+    justify-content: space-between;
+  }
+  .youml-share-dialog .status-message {  
+    color: #fd7909;
+    text-align: center;
+    padding: 5px;
+    font-size: 18px;
+  }
+  .youml-share-dialog .status-message a {  
+    color: white;
+  }  
+  .youml-share-dialog .output-panel {  
+    overflow: auto;
+    max-height: 180px;  
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    grid-template-rows: auto;
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+    margin-bottom: 10px;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    background-color: var(--bg-color);
+  }    
+  .youml-share-dialog .output-panel .output-image {  
+    width: 100px;
+    height: 100px;
+    objectFit: cover;
+    borderRadius: 5px;
+  } 
+  
+  .youml-share-dialog .output-panel .radio-button {
+    color:var(--fg-color);
+  }  
+  .youml-share-dialog .output-panel .radio-text {  
+    color: gray;
+    display: block;
+    font-size: 12px;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    max-width: 100px;
+  }
+  .youml-share-dialog .output-panel .node-id {  
+    color: #FBFBFD;
+    display: block;
+    background-color: rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+    overflow-x: hidden;
+    padding: 2px 3px;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    max-width: 100px;
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    border-radius: 3px;
+  }  
+  .youml-share-dialog .output-panel .output-label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+    cursor: pointer;
+    position: relative;
+    border: 5px solid transparent;
+  }
+  .youml-share-dialog .output-panel .output-label:hover {
+    border: 5px solid #007bff;
+  }
+  .youml-share-dialog .output-panel .output-label.checked {
+    border: 5px solid #007bff;
+  }  
+  .youml-share-dialog .missing-output-message{
+    color: #fd7909;
+    font-size: 16px;  
+    margin-bottom:10px  
+  }
+  .youml-share-dialog .select-output-message{
+    color: white;
+    margin-bottom:5px  
+  }
+`;
+
+export class YouMLShareDialog extends ComfyDialog {
+  static instance = null;
+
+  constructor() {
+    super();
+    $el("style", {
+      textContent: style,
+      parent: document.head,
+    });
+    this.element = $el(
+      "div.comfy-modal.youml-share-dialog",
+      {
+        parent: document.body,
+      },
+      [$el("div.comfy-modal-content", {}, [...this.createLayout()])]
+    );
+    this.selectedOutputIndex = 0;
+    this.selectedNodeId = null;
+    this.uploadedImages = [];
+    this.selectedFile = null;
+  }
+
+  async loadToken() {
+    let key = ""
+    try {
+      const response = await api.fetchApi(`/manager/youml/settings`)
+      const settings = await response.json()
+      return settings.token
+    } catch (error) {
+    }
+    return key || "";
+  }
+
+  async saveToken(value) {
+    await api.fetchApi(`/manager/youml/settings`, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({
+        token: value
+      })
+    });
+  }
+
+  createLayout() {
+    // Header Section
+    const headerSection = $el("h3.dialog-header", {
+      textContent: "Share your workflow to YouML.com",
+      size: 3,
+    });
+
+    // Workflow Info Section
+    this.nameInput = $el("input", {
+      type: "text",
+      placeholder: "Name (required)",
+    });
+    this.descriptionInput = $el("textarea.workflow-description", {
+      placeholder: "Description (optional, markdown supported)",
+    });
+    const workflowMetadata = $el("div.dialog-section", {}, [
+      $el("label", {}, ["Workflow info"]),
+      this.nameInput,
+      this.descriptionInput,
+    ]);
+
+    // Outputs Section
+    this.outputsSection = $el("div.dialog-section", {
+      id: "selectOutputs",
+    }, []);
+
+    const outputUploadSection = $el("div.dialog-section", {}, [
+      $el("label", {}, ["Thumbnail"]),
+      this.outputsSection,
+    ]);
+
+    // API Token Section
+    this.apiTokenInput = $el("input", {
+      type: "password",
+      placeholder: "Copy & paste your API token",
+    });
+    const getAPITokenButton = $el("button", {
+      href: DEFAULT_HOMEPAGE_URL,
+      target: "_blank",
+      onclick: () => window.open(TOKEN_PAGE_URL, "_blank"),
+    }, ["Get your API Token"])
+
+    const apiTokenSection = $el("div.dialog-section", {}, [
+      $el("label", {}, ["YouML API Token"]),
+      this.apiTokenInput,
+      getAPITokenButton,
+    ]);
+
+    // Message Section
+    this.message = $el("div.status-message", {}, []);
+
+    // Share and Close Buttons
+    this.shareButton = $el("button.action-button.share-button", {
+      type: "submit",
+      textContent: "Share",
+      onclick: () => {
+        this.handleShareButtonClick();
+      },
+    });
+
+    const buttonsSection = $el(
+      "div.action-button-panel",
+      {},
+      [
+        $el("button.action-button.close-button", {
+          type: "button",
+          textContent: "Close",
+          onclick: () => {
+            this.close();
+          },
+        }),
+        this.shareButton,
+      ]
+    );
+
+    // Composing the full layout
+    const layout = [
+      headerSection,
+      workflowMetadata,
+      outputUploadSection,
+      apiTokenSection,
+      this.message,
+      buttonsSection,
+    ];
+
+    return layout;
+  }
+
+  async fetchYoumlApi(path, options, statusText) {
+    if (statusText) {
+      this.message.textContent = statusText;
+    }
+
+    const fullPath = new URL(API_ENDPOINT + path)
+
+    const fetchOptions = Object.assign({}, options)
+
+    fetchOptions.headers = {
+      ...fetchOptions.headers,
+      "Authorization": `Bearer ${this.apiTokenInput.value}`,
+      "User-Agent": "ComfyUI-Manager-Youml/1.0.0",
+    }
+
+    const response = await fetch(fullPath, fetchOptions);
+
+    if (!response.ok) {
+      throw new Error(response.statusText + " " + (await response.text()));
+    }
+
+    if (statusText) {
+      this.message.textContent = "";
+    }
+    const data = await response.json();
+    return {
+      ok: response.ok,
+      statusText: response.statusText,
+      status: response.status,
+      data,
+    };
+  }
+
+  async uploadThumbnail(uploadFile, recipeId) {
+    const form = new FormData();
+    form.append("file", uploadFile, uploadFile.name);
+    try {
+      const res = await this.fetchYoumlApi(
+        `/v1/comfy/recipes/${recipeId}/thumbnail`,
+        {
+          method: "POST",
+          body: form,
+        },
+        "Uploading thumbnail..."
+      );
+
+    } catch (e) {
+      if (e?.response?.status === 413) {
+        throw new Error("File size is too large (max 20MB)");
+      } else {
+        throw new Error("Error uploading thumbnail: " + e.message);
+      }
+    }
+  }
+
+  async handleShareButtonClick() {
+    this.message.textContent = "";
+    await this.saveToken(this.apiTokenInput.value);
+    try {
+      this.shareButton.disabled = true;
+      this.shareButton.textContent = "Sharing...";
+      await this.share();
+    } catch (e) {
+      customAlert(e.message);
+    } finally {
+      this.shareButton.disabled = false;
+      this.shareButton.textContent = "Share";
+    }
+  }
+
+  async share() {
+    const prompt = await app.graphToPrompt();
+    const workflowJSON = prompt["workflow"];
+    const workflowAPIJSON = prompt["output"];
+    const form_values = {
+      name: this.nameInput.value,
+      description: this.descriptionInput.value,
+    };
+
+    if (!this.apiTokenInput.value) {
+      throw new Error("API token is required");
+    }
+
+    if (!this.selectedFile) {
+      throw new Error("Thumbnail is required");
+    }
+
+    if (!form_values.name) {
+      throw new Error("Title is required");
+    }
+
+
+    try {
+      let snapshotData = null;
+      try {
+        const snapshot = await api.fetchApi(`/snapshot/get_current`)
+        snapshotData = await snapshot.json()
+      } catch (e) {
+        console.error("Failed to get snapshot", e)
+      }
+
+      const request = {
+        name: this.nameInput.value,
+        description: this.descriptionInput.value,
+        workflowUiJson: JSON.stringify(workflowJSON),
+        workflowApiJson: JSON.stringify(workflowAPIJSON),
+      }
+
+      if (snapshotData) {
+        request.snapshotJson = JSON.stringify(snapshotData)
+      }
+
+      const response = await this.fetchYoumlApi(
+        "/v1/comfy/recipes",
+        {
+          method: "POST",
+          headers: {"Content-Type": "application/json"},
+          body: JSON.stringify(request),
+        },
+        "Uploading workflow..."
+      );
+
+      if (response.ok) {
+        const {id, recipePageUrl, editorPageUrl} = response.data;
+        if (id) {
+          let messagePrefix = "Workflow has been shared."
+          if (this.selectedFile) {
+            try {
+              await this.uploadThumbnail(this.selectedFile, id);
+            } catch (e) {
+              console.error("Thumbnail upload failed: ", e);
+              messagePrefix = "Workflow has been shared, but thumbnail upload failed. You can create a thumbnail on YouML later."
+            }
+          }
+          this.message.innerHTML = `${messagePrefix} To turn your workflow into an interactive app, ` +
+            `<a href="${recipePageUrl}" target="_blank">visit it on YouML</a>`;
+
+          this.uploadedImages = [];
+          this.nameInput.value = "";
+          this.descriptionInput.value = "";
+          this.radioButtons.forEach((ele) => {
+            ele.checked = false;
+            ele.parentElement.classList.remove("checked");
+          });
+          this.selectedOutputIndex = 0;
+          this.selectedNodeId = null;
+          this.selectedFile = null;
+        }
+      }
+    } catch (e) {
+      throw new Error("Error sharing workflow: " + e.message);
+    }
+  }
+
+  async fetchImageBlob(url) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return blob;
+  }
+
+  async show(potentialOutputs, potentialOutputNodes) {
+    const potentialOutputsToOrder = {};
+    potentialOutputNodes.forEach((node, index) => {
+      if (node.id in potentialOutputsToOrder) {
+        potentialOutputsToOrder[node.id][1].push(potentialOutputs[index]);
+      } else {
+        potentialOutputsToOrder[node.id] = [node, [potentialOutputs[index]]];
+      }
+    })
+    const sortedPotentialOutputsToOrder = Object.fromEntries(
+      Object.entries(potentialOutputsToOrder).sort((a, b) => a[0].id - b[0].id)
+    );
+    const sortedPotentialOutputs = []
+    const sortedPotentiaOutputNodes = []
+    for (const [key, value] of Object.entries(sortedPotentialOutputsToOrder)) {
+      sortedPotentiaOutputNodes.push(value[0]);
+      sortedPotentialOutputs.push(...value[1]);
+    }
+    potentialOutputNodes = sortedPotentiaOutputNodes;
+    potentialOutputs = sortedPotentialOutputs;
+
+
+    // If `selectedNodeId` is provided, we will select the corresponding radio
+    // button for the node. In addition, we move the selected radio button to
+    // the top of the list.
+    if (this.selectedNodeId) {
+      const index = potentialOutputNodes.findIndex(node => node.id === this.selectedNodeId);
+      if (index >= 0) {
+        this.selectedOutputIndex = index;
+      }
+    }
+
+    this.radioButtons = [];
+    const newRadioButtons = $el("div.output-panel",
+      {
+        id: "selectOutput-Options",
+      },
+      potentialOutputs.map((output, index) => {
+        const {node_id: nodeId} = output;
+        const radioButton = $el("input.radio-button", {
+          type: "radio",
+          name: "selectOutputImages",
+          value: index,
+          required: index === 0
+        }, [])
+        let radioButtonImage;
+        let filename;
+        if (output.type === "image" || output.type === "temp") {
+          radioButtonImage = $el("img.output-image", {
+            src: `/view?filename=${output.image.filename}&subfolder=${output.image.subfolder}&type=${output.image.type}`,
+          }, []);
+          filename = output.image.filename
+        } else if (output.type === "output") {
+          radioButtonImage = $el("img.output-image", {
+            src: output.output.value,
+          }, []);
+          filename = output.output.filename
+        } else {
+          radioButtonImage = $el("img.output-image", {
+            src: "",
+          }, []);
+        }
+        const radioButtonText = $el("span.radio-text", {}, [output.title])
+        const nodeIdChip = $el("span.node-id", {}, [`Node: ${nodeId}`])
+        radioButton.checked = this.selectedOutputIndex === index;
+
+        radioButton.onchange = async () => {
+          this.selectedOutputIndex = parseInt(radioButton.value);
+
+          // Remove the "checked" class from all radio buttons
+          this.radioButtons.forEach((ele) => {
+            ele.parentElement.classList.remove("checked");
+          });
+          radioButton.parentElement.classList.add("checked");
+
+          this.fetchImageBlob(radioButtonImage.src).then((blob) => {
+            const file = new File([blob], filename, {
+              type: blob.type,
+            });
+            this.selectedFile = file;
+          })
+        };
+
+        if (radioButton.checked) {
+          this.fetchImageBlob(radioButtonImage.src).then((blob) => {
+            const file = new File([blob], filename, {
+              type: blob.type,
+            });
+            this.selectedFile = file;
+          })
+        }
+
+        this.radioButtons.push(radioButton);
+
+        return $el(`label.output-label${radioButton.checked ? '.checked' : ''}`, {},
+          [radioButtonImage, radioButtonText, radioButton, nodeIdChip]);
+      })
+    );
+
+    let header;
+    if (this.radioButtons.length === 0) {
+      header = $el("div.missing-output-message", {textContent: "Queue Prompt to see the outputs and select a thumbnail"}, [])
+    } else {
+      header = $el("div.select-output-message", {textContent: "Choose one from the outputs (scroll to see all)"}, [])
+    }
+
+    this.outputsSection.innerHTML = "";
+    this.outputsSection.appendChild(header);
+    if (this.radioButtons.length > 0) {
+      this.outputsSection.appendChild(newRadioButtons);
+    }
+
+    this.message.innerHTML = "";
+    this.message.textContent = "";
+
+    const token = await this.loadToken();
+    this.apiTokenInput.value = token;
+    this.uploadedImages = [];
+
+    this.element.style.display = "block";
+  }
+}

custom_nodes/comfyui-manager/js/common.js

@@ -0,0 +1,670 @@
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
+import { $el, ComfyDialog } from "../../scripts/ui.js";
+import { getBestPosition, getPositionStyle, getRect } from './popover-helper.js';
+
+
+function internalCustomConfirm(message, confirmMessage, cancelMessage) {
+	return new Promise((resolve) => {
+		// transparent bg
+		const modalOverlay = document.createElement('div');
+		modalOverlay.style.position = 'fixed';
+		modalOverlay.style.top = 0;
+		modalOverlay.style.left = 0;
+		modalOverlay.style.width = '100%';
+		modalOverlay.style.height = '100%';
+		modalOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+		modalOverlay.style.display = 'flex';
+		modalOverlay.style.alignItems = 'center';
+		modalOverlay.style.justifyContent = 'center';
+		modalOverlay.style.zIndex = '1101';
+
+		// Modal window container (dark bg)
+		const modalDialog = document.createElement('div');
+		modalDialog.style.backgroundColor = '#333';
+		modalDialog.style.padding = '20px';
+		modalDialog.style.borderRadius = '4px';
+		modalDialog.style.maxWidth = '400px';
+		modalDialog.style.width = '80%';
+		modalDialog.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.5)';
+		modalDialog.style.color = '#fff';
+
+		// Display message
+		const modalMessage = document.createElement('p');
+		modalMessage.textContent = message;
+		modalMessage.style.margin = '0';
+		modalMessage.style.padding = '0 0 20px';
+		modalMessage.style.wordBreak = 'keep-all';
+
+		// Button container
+		const modalButtons = document.createElement('div');
+		modalButtons.style.display = 'flex';
+		modalButtons.style.justifyContent = 'flex-end';
+
+		// Confirm button (green)
+		const confirmButton = document.createElement('button');
+		if(confirmMessage)
+			confirmButton.textContent = confirmMessage;
+		else
+			confirmButton.textContent = 'Confirm';
+		confirmButton.style.marginLeft = '10px';
+		confirmButton.style.backgroundColor = '#28a745'; // green
+		confirmButton.style.color = '#fff';
+		confirmButton.style.border = 'none';
+		confirmButton.style.padding = '6px 12px';
+		confirmButton.style.borderRadius = '4px';
+		confirmButton.style.cursor = 'pointer';
+		confirmButton.style.fontWeight = 'bold';
+
+		// Cancel button (red)
+		const cancelButton = document.createElement('button');
+		if(cancelMessage)
+			cancelButton.textContent = cancelMessage;
+		else
+			cancelButton.textContent = 'Cancel';
+
+		cancelButton.style.marginLeft = '10px';
+		cancelButton.style.backgroundColor = '#dc3545'; // red
+		cancelButton.style.color = '#fff';
+		cancelButton.style.border = 'none';
+		cancelButton.style.padding = '6px 12px';
+		cancelButton.style.borderRadius = '4px';
+		cancelButton.style.cursor = 'pointer';
+		cancelButton.style.fontWeight = 'bold';
+
+		const closeModal = () => {
+			document.body.removeChild(modalOverlay);
+		};
+
+		confirmButton.addEventListener('click', () => {
+			closeModal();
+			resolve(true);
+		});
+
+		cancelButton.addEventListener('click', () => {
+			closeModal();
+			resolve(false);
+		});
+
+		modalButtons.appendChild(confirmButton);
+		modalButtons.appendChild(cancelButton);
+		modalDialog.appendChild(modalMessage);
+		modalDialog.appendChild(modalButtons);
+		modalOverlay.appendChild(modalDialog);
+		document.body.appendChild(modalOverlay);
+	});
+}
+
+export function show_message(msg) {
+	app.ui.dialog.show(msg);
+	app.ui.dialog.element.style.zIndex = 1100;
+}
+
+export async function handle403Response(res, defaultMessage) {
+	try {
+		const data = await res.json();
+		if(data.error === 'comfyui_outdated') {
+			show_message('ComfyUI version is outdated.<BR>Please update ComfyUI to use Manager normally.');
+		} else {
+			show_message(defaultMessage || 'This action is not allowed with this security level configuration.');
+		}
+	} catch {
+		show_message(defaultMessage || 'This action is not allowed with this security level configuration.');
+	}
+}
+
+export async function sleep(ms) {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export async function customConfirm(message) {
+	try {
+		let res = await
+			window['app'].extensionManager.dialog
+			.confirm({
+				title: 'Confirm',
+				message: message
+			});
+
+		return res;
+	}
+	catch {
+		let res = await internalCustomConfirm(message);
+		return res;
+	}
+}
+
+
+export function customAlert(message) {
+	try {
+		window['app'].extensionManager.toast.addAlert(message);
+	}
+	catch {
+		alert(message);
+	}
+}
+
+export function infoToast(summary, message) {
+	try {
+		app.extensionManager.toast.add({
+			severity: 'info',
+			summary: summary,
+			detail: message,
+			life: 3000
+		})
+	}
+	catch {
+		// do nothing
+	}
+}
+
+
+export async function customPrompt(title, message) {
+	try {
+		let res = await
+				window['app'].extensionManager.dialog
+				.prompt({
+					title: title,
+					message: message
+				});
+
+		return res;
+	}
+	catch {
+		return prompt(title, message)
+	}
+}
+
+
+export async function rebootAPI() {
+	if ('electronAPI' in window) {
+			window.electronAPI.restartApp();
+			return true;
+	}
+
+	const isConfirmed = await customConfirm("Are you sure you'd like to reboot the server?");
+	if (isConfirmed) {
+		try {
+			const response = await api.fetchApi("/manager/reboot");
+			if (response.status == 403) {
+				await handle403Response(response);
+				return false;
+			}
+		}
+		catch(exception) {}
+	}
+
+	return false;
+}
+
+
+export var manager_instance = null;
+
+export function setManagerInstance(obj) {
+	manager_instance = obj;
+}
+
+export function showToast(message, duration = 3000) {
+	const toast = $el("div.comfy-toast", {textContent: message});
+	document.body.appendChild(toast);
+	setTimeout(() => {
+		toast.classList.add("comfy-toast-fadeout");
+		setTimeout(() => toast.remove(), 500);
+	}, duration);
+}
+
+function isValidURL(url) {
+	if(url.includes('&'))
+		return false;
+
+	const http_pattern = /^(https?|ftp):\/\/[^\s$?#]+$/;
+	const ssh_pattern = /^(.+@|ssh:\/\/).+:.+$/;
+	return http_pattern.test(url) || ssh_pattern.test(url);
+}
+
+export async function install_pip(packages) {
+	if(packages.includes('&'))
+		app.ui.dialog.show(`Invalid PIP package enumeration: '${packages}'`);
+
+	const res = await api.fetchApi("/customnode/install/pip", {
+		method: "POST",
+		body: packages,
+	});
+
+	if(res.status == 403) {
+		await handle403Response(res);
+		return;
+	}
+
+	if(res.status == 200) {
+		show_message(`PIP package installation is processed.<br>To apply the pip packages, please click the <button id='cm-reboot-button3'><font size='3px'>RESTART</font></button> button in ComfyUI.`);
+
+		const rebootButton = document.getElementById('cm-reboot-button3');
+		const self = this;
+
+		rebootButton.addEventListener("click", rebootAPI);
+	}
+	else {
+		show_message(`Failed to install '${packages}'<BR>See terminal log.`);
+	}
+}
+
+export async function install_via_git_url(url, manager_dialog) {
+	if(!url) {
+		return;
+	}
+
+	if(!isValidURL(url)) {
+		show_message(`Invalid Git url '${url}'`);
+		return;
+	}
+
+	show_message(`Wait...<BR><BR>Installing '${url}'`);
+
+	const res = await api.fetchApi("/customnode/install/git_url", {
+		method: "POST",
+		body: url,
+	});
+
+	if(res.status == 403) {
+		await handle403Response(res);
+		return;
+	}
+
+	if(res.status == 200) {
+		show_message(`'${url}' is installed<BR>To apply the installed custom node, please <button id='cm-reboot-button4'><font size='3px'>RESTART</font></button> ComfyUI.`);
+
+		const rebootButton = document.getElementById('cm-reboot-button4');
+		const self = this;
+
+		rebootButton.addEventListener("click",
+			async function() {
+				if(await rebootAPI()) {
+					manager_instance.close();
+				}
+			});
+	}
+	else {
+		show_message(`Failed to install '${url}'<BR>See terminal log.`);
+	}
+}
+
+export async function free_models(free_execution_cache) {
+	try {
+		let mode = "";
+		if(free_execution_cache) {
+			mode = '{"unload_models": true, "free_memory": true}';
+		}
+		else {
+			mode = '{"unload_models": true}';
+		}
+
+		let res = await api.fetchApi(`/free`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: mode
+		});
+
+		if (res.status == 200) {
+			if(free_execution_cache) {
+				showToast("'Models' and 'Execution Cache' have been cleared.", 3000);
+			}
+			else {
+				showToast("Models' have been unloaded.", 3000);
+			}
+		} else {
+			showToast('Unloading of models failed. Installed ComfyUI may be an outdated version.', 5000);
+		}
+	} catch (error) {
+		showToast('An error occurred while trying to unload models.', 5000);
+	}
+}
+
+export function md5(inputString) {
+	const hc = '0123456789abcdef';
+	const rh = n => {let j,s='';for(j=0;j<=3;j++) s+=hc.charAt((n>>(j*8+4))&0x0F)+hc.charAt((n>>(j*8))&0x0F);return s;}
+	const ad = (x,y) => {let l=(x&0xFFFF)+(y&0xFFFF);let m=(x>>16)+(y>>16)+(l>>16);return (m<<16)|(l&0xFFFF);}
+	const rl = (n,c) => (n<<c)|(n>>>(32-c));
+	const cm = (q,a,b,x,s,t) => ad(rl(ad(ad(a,q),ad(x,t)),s),b);
+	const ff = (a,b,c,d,x,s,t) => cm((b&c)|((~b)&d),a,b,x,s,t);
+	const gg = (a,b,c,d,x,s,t) => cm((b&d)|(c&(~d)),a,b,x,s,t);
+	const hh = (a,b,c,d,x,s,t) => cm(b^c^d,a,b,x,s,t);
+	const ii = (a,b,c,d,x,s,t) => cm(c^(b|(~d)),a,b,x,s,t);
+	const sb = x => {
+	let i;const nblk=((x.length+8)>>6)+1;const blks=[];for(i=0;i<nblk*16;i++) { blks[i]=0 };
+	for(i=0;i<x.length;i++) {blks[i>>2]|=x.charCodeAt(i)<<((i%4)*8);}
+		blks[i>>2]|=0x80<<((i%4)*8);blks[nblk*16-2]=x.length*8;return blks;
+	}
+	let i,x=sb(inputString),a=1732584193,b=-271733879,c=-1732584194,d=271733878,olda,oldb,oldc,oldd;
+	for(i=0;i<x.length;i+=16) {olda=a;oldb=b;oldc=c;oldd=d;
+		a=ff(a,b,c,d,x[i+ 0], 7, -680876936);d=ff(d,a,b,c,x[i+ 1],12, -389564586);c=ff(c,d,a,b,x[i+ 2],17,  606105819);
+		b=ff(b,c,d,a,x[i+ 3],22,-1044525330);a=ff(a,b,c,d,x[i+ 4], 7, -176418897);d=ff(d,a,b,c,x[i+ 5],12, 1200080426);
+		c=ff(c,d,a,b,x[i+ 6],17,-1473231341);b=ff(b,c,d,a,x[i+ 7],22,  -45705983);a=ff(a,b,c,d,x[i+ 8], 7, 1770035416);
+		d=ff(d,a,b,c,x[i+ 9],12,-1958414417);c=ff(c,d,a,b,x[i+10],17,     -42063);b=ff(b,c,d,a,x[i+11],22,-1990404162);
+		a=ff(a,b,c,d,x[i+12], 7, 1804603682);d=ff(d,a,b,c,x[i+13],12,  -40341101);c=ff(c,d,a,b,x[i+14],17,-1502002290);
+		b=ff(b,c,d,a,x[i+15],22, 1236535329);a=gg(a,b,c,d,x[i+ 1], 5, -165796510);d=gg(d,a,b,c,x[i+ 6], 9,-1069501632);
+		c=gg(c,d,a,b,x[i+11],14,  643717713);b=gg(b,c,d,a,x[i+ 0],20, -373897302);a=gg(a,b,c,d,x[i+ 5], 5, -701558691);
+		d=gg(d,a,b,c,x[i+10], 9,   38016083);c=gg(c,d,a,b,x[i+15],14, -660478335);b=gg(b,c,d,a,x[i+ 4],20, -405537848);
+		a=gg(a,b,c,d,x[i+ 9], 5,  568446438);d=gg(d,a,b,c,x[i+14], 9,-1019803690);c=gg(c,d,a,b,x[i+ 3],14, -187363961);
+		b=gg(b,c,d,a,x[i+ 8],20, 1163531501);a=gg(a,b,c,d,x[i+13], 5,-1444681467);d=gg(d,a,b,c,x[i+ 2], 9,  -51403784);
+		c=gg(c,d,a,b,x[i+ 7],14, 1735328473);b=gg(b,c,d,a,x[i+12],20,-1926607734);a=hh(a,b,c,d,x[i+ 5], 4,    -378558);
+		d=hh(d,a,b,c,x[i+ 8],11,-2022574463);c=hh(c,d,a,b,x[i+11],16, 1839030562);b=hh(b,c,d,a,x[i+14],23,  -35309556);
+		a=hh(a,b,c,d,x[i+ 1], 4,-1530992060);d=hh(d,a,b,c,x[i+ 4],11, 1272893353);c=hh(c,d,a,b,x[i+ 7],16, -155497632);
+		b=hh(b,c,d,a,x[i+10],23,-1094730640);a=hh(a,b,c,d,x[i+13], 4,  681279174);d=hh(d,a,b,c,x[i+ 0],11, -358537222);
+		c=hh(c,d,a,b,x[i+ 3],16, -722521979);b=hh(b,c,d,a,x[i+ 6],23,   76029189);a=hh(a,b,c,d,x[i+ 9], 4, -640364487);
+		d=hh(d,a,b,c,x[i+12],11, -421815835);c=hh(c,d,a,b,x[i+15],16,  530742520);b=hh(b,c,d,a,x[i+ 2],23, -995338651);
+		a=ii(a,b,c,d,x[i+ 0], 6, -198630844);d=ii(d,a,b,c,x[i+ 7],10, 1126891415);c=ii(c,d,a,b,x[i+14],15,-1416354905);
+		b=ii(b,c,d,a,x[i+ 5],21,  -57434055);a=ii(a,b,c,d,x[i+12], 6, 1700485571);d=ii(d,a,b,c,x[i+ 3],10,-1894986606);
+		c=ii(c,d,a,b,x[i+10],15,   -1051523);b=ii(b,c,d,a,x[i+ 1],21,-2054922799);a=ii(a,b,c,d,x[i+ 8], 6, 1873313359);
+		d=ii(d,a,b,c,x[i+15],10,  -30611744);c=ii(c,d,a,b,x[i+ 6],15,-1560198380);b=ii(b,c,d,a,x[i+13],21, 1309151649);
+		a=ii(a,b,c,d,x[i+ 4], 6, -145523070);d=ii(d,a,b,c,x[i+11],10,-1120210379);c=ii(c,d,a,b,x[i+ 2],15,  718787259);
+		b=ii(b,c,d,a,x[i+ 9],21, -343485551);a=ad(a,olda);b=ad(b,oldb);c=ad(c,oldc);d=ad(d,oldd);
+	}
+	return rh(a)+rh(b)+rh(c)+rh(d);
+}
+
+export async function fetchData(route, options) {
+	let err;
+	const res = await api.fetchApi(route, options).catch(e => {
+		err = e;
+	});
+
+	if (!res) {
+		return {
+			status: 400,
+			error: new Error("Unknown Error")
+		}
+	}
+
+	const { status, statusText } = res;
+	if (err) {
+		return {
+			status,
+			error: err
+		}
+	}
+
+	if (status !== 200) {
+		return {
+			status,
+			error: new Error(statusText || "Unknown Error")
+		}
+	}
+
+	const data = await res.json();
+	if (!data) {
+		return {
+			status,
+			error: new Error(`Failed to load data: ${route}`)
+		}
+	}
+	return {
+		status,
+		data
+	}
+}
+
+// https://cenfun.github.io/open-icons/
+export const icons = {
+	search: '<svg viewBox="0 0 24 24" width="100%" height="100%" pointer-events="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-4.486-4.494M19 10.5a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0"/></svg>',
+	conflicts: '<svg viewBox="0 0 400 400" width="100%" height="100%" pointer-events="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m397.2 350.4.2-.2-180-320-.2.2C213.8 24.2 207.4 20 200 20s-13.8 4.2-17.2 10.4l-.2-.2-180 320 .2.2c-1.6 2.8-2.8 6-2.8 9.6 0 11 9 20 20 20h360c11 0 20-9 20-20 0-3.6-1.2-6.8-2.8-9.6M220 340h-40v-40h40zm0-60h-40V120h40z"/></svg>',
+	passed: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.667 426.667"><path fill="#6AC259" d="M213.333,0C95.518,0,0,95.514,0,213.333s95.518,213.333,213.333,213.333c117.828,0,213.333-95.514,213.333-213.333S331.157,0,213.333,0z M174.199,322.918l-93.935-93.931l31.309-31.309l62.626,62.622l140.894-140.898l31.309,31.309L174.199,322.918z"/></svg>',
+	download: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="100%" height="100%" viewBox="0 0 32 32"><path fill="currentColor" d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10l10-10z"></path></svg>',
+	close: '<svg xmlns="http://www.w3.org/2000/svg" pointer-events="none" width="100%" height="100%" viewBox="0 0 16 16"><g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="m7.116 8-4.558 4.558.884.884L8 8.884l4.558 4.558.884-.884L8.884 8l4.558-4.558-.884-.884L8 7.116 3.442 2.558l-.884.884L7.116 8z"/></g></svg>',
+	arrowRight: '<svg xmlns="http://www.w3.org/2000/svg" pointer-events="none" width="100%" height="100%" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="m2.542 2.154 7.254 7.26c.136.14.204.302.204.483a.73.73 0 0 1-.204.5l-7.575 7.398c-.383.317-.724.317-1.022 0-.299-.317-.299-.643 0-.98l7.08-6.918-6.754-6.763c-.237-.343-.215-.654.066-.935.281-.28.598-.295.951-.045Zm9 0 7.254 7.26c.136.14.204.302.204.483a.73.73 0 0 1-.204.5l-7.575 7.398c-.383.317-.724.317-1.022 0-.299-.317-.299-.643 0-.98l7.08-6.918-6.754-6.763c-.237-.343-.215-.654.066-.935.281-.28.598-.295.951-.045Z"/></svg>'
+}
+
+export function sanitizeHTML(str) {
+	return str
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#039;");
+}
+
+export function showTerminal() {
+	try {
+		const panel = app.extensionManager.bottomPanel;
+		const isTerminalVisible = panel.bottomPanelVisible && panel.activeBottomPanelTab.id === 'logs-terminal';
+		if (!isTerminalVisible)
+			panel.toggleBottomPanelTab('logs-terminal');
+	}
+	catch(exception) {
+		// do nothing
+	}
+}
+
+let need_restart = false;
+
+export function setNeedRestart(value) {
+	need_restart = value;
+}
+
+async function onReconnected(event) {
+	if(need_restart) {
+		setNeedRestart(false);
+
+		const confirmed = await customConfirm("To apply the changes to the node pack's installation status, you need to refresh the browser. Would you like to refresh?");
+		if (!confirmed) {
+			return;
+		}
+
+		window.location.reload(true);
+	}
+}
+
+api.addEventListener('reconnected', onReconnected);
+
+const storeId = "comfyui-manager-grid";
+let timeId;
+export function storeColumnWidth(gridId, columnItem) {
+	clearTimeout(timeId);
+	timeId = setTimeout(() => {
+		let data = {};
+		const dataStr = localStorage.getItem(storeId);
+		if (dataStr) {
+			try {
+				data = JSON.parse(dataStr);
+			} catch (e) {}
+		}
+
+		if (!data[gridId]) {
+			data[gridId] =  {};
+		}
+
+		data[gridId][columnItem.id] = columnItem.width;
+
+		localStorage.setItem(storeId, JSON.stringify(data));
+
+	}, 200)
+}
+
+export function restoreColumnWidth(gridId, columns) {
+	const dataStr = localStorage.getItem(storeId);
+	if (!dataStr) {
+		return;
+	}
+	let data;
+	try {
+		data = JSON.parse(dataStr);
+	} catch (e) {}
+	if(!data) {
+		return;
+	}
+	const widthMap = data[gridId];
+	if (!widthMap) {
+		return;
+	}
+
+	columns.forEach(columnItem => {
+		const w = widthMap[columnItem.id];
+		if (w) {
+			columnItem.width = w;
+		}
+	});
+
+}
+
+export function getTimeAgo(dateStr) {
+	const date = new Date(dateStr);
+
+	if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+		return "";
+	}
+
+	const units = [
+		{ max: 2760000, value: 60000, name: 'minute', past: 'a minute ago', future: 'in a minute' },
+		{ max: 72000000, value: 3600000, name: 'hour', past: 'an hour ago', future: 'in an hour' },
+		{ max: 518400000, value: 86400000, name: 'day', past: 'yesterday', future: 'tomorrow' },
+		{ max: 2419200000, value: 604800000, name: 'week', past: 'last week', future: 'in a week' },
+		{ max: 28512000000, value: 2592000000, name: 'month', past: 'last month', future: 'in a month' }
+	];
+    const diff = Date.now() - date.getTime();
+    // less than a minute
+    if (Math.abs(diff) < 60000)
+        return 'just now';
+    for (let i = 0; i < units.length; i++) {
+        if (Math.abs(diff) < units[i].max) {
+            return format(diff, units[i].value, units[i].name, units[i].past, units[i].future, diff < 0);
+        }
+    }
+    function format(diff, divisor, unit, past, future, isInTheFuture) {
+		const val = Math.round(Math.abs(diff) / divisor);
+		if (isInTheFuture)
+			return val <= 1 ? future : 'in ' + val + ' ' + unit + 's';
+		return val <= 1 ? past : val + ' ' + unit + 's ago';
+	}
+    return format(diff, 31536000000, 'year', 'last year', 'in a year', diff < 0);
+};
+
+export const loadCss = (cssFile) => {
+	const cssPath = import.meta.resolve(cssFile);
+	//console.log(cssPath);
+	const $link = document.createElement("link");
+	$link.setAttribute("rel", 'stylesheet');
+	$link.setAttribute("href", cssPath);
+	document.head.appendChild($link);
+};
+
+export const copyText = (text) => {
+	return new Promise((resolve) => {
+		let err;
+		try {
+			navigator.clipboard.writeText(text);
+		} catch (e) {
+			err = e;
+		}
+		if (err) {
+			resolve(false);
+		} else {
+			resolve(true);
+		}
+	});
+};
+
+function renderPopover($elem, target, options = {}) {
+	// async microtask
+	queueMicrotask(() => {
+		
+		const containerRect = getRect(window);
+		const targetRect = getRect(target);
+		const elemRect = getRect($elem);
+
+		const positionInfo = getBestPosition(
+			containerRect,
+			targetRect,
+			elemRect,
+			options.positions
+		);
+		const style = getPositionStyle(positionInfo, {
+			bgColor: options.bgColor,
+			borderColor: options.borderColor,
+			borderRadius: options.borderRadius
+		});
+
+		$elem.style.top = positionInfo.top + "px";
+		$elem.style.left = positionInfo.left + "px";
+		$elem.style.background = style.background;
+	
+	});
+}
+
+let $popover;
+export function hidePopover() {
+	if ($popover) {
+		$popover.remove();
+		$popover = null;
+	}
+}
+export function showPopover(target, text, className, options) {
+	hidePopover();
+	$popover = document.createElement("div");
+	$popover.className = ['cn-popover', className].filter(it => it).join(" ");
+	document.body.appendChild($popover);
+	$popover.innerHTML = text;
+	$popover.style.display = "block";
+	renderPopover($popover, target, {
+		borderRadius: 10,
+		... options
+	});
+}
+
+let $tooltip;
+export function hideTooltip(target) {
+	if ($tooltip) {
+		$tooltip.style.display = "none";
+		$tooltip.innerHTML = "";
+		$tooltip.style.top = "0px";
+		$tooltip.style.left = "0px";
+	}
+}
+export function showTooltip(target, text, className = 'cn-tooltip', styleMap = {}) {
+	if (!$tooltip) {
+		$tooltip = document.createElement("div");
+		$tooltip.className = className;
+		$tooltip.style.cssText = `
+			pointer-events: none;
+			position: fixed;
+			z-index: 10001;
+			padding: 20px;
+			color: #1e1e1e;
+			max-width: 350px;
+			filter: drop-shadow(1px 5px 5px rgb(0 0 0 / 30%));
+			${Object.keys(styleMap).map(k=>k+":"+styleMap[k]+";").join("")}
+		`;
+		document.body.appendChild($tooltip);
+	}
+
+	$tooltip.innerHTML = text;
+	$tooltip.style.display = "block";
+	renderPopover($tooltip, target, {
+		positions: ['top', 'bottom', 'right', 'center'],
+		bgColor: "#ffffff",
+		borderColor: "#cccccc",
+		borderRadius: 5
+	});
+}
+
+function initTooltip () {
+	const mouseenterHandler = (e) => {
+        const target = e.target;
+        const text = target.getAttribute('tooltip');
+        if (text) {
+            showTooltip(target, text);
+        }
+    };
+	const mouseleaveHandler = (e) => {
+        const target = e.target;
+        const text = target.getAttribute('tooltip');
+        if (text) {
+            hideTooltip(target);
+        }
+    };
+	document.body.removeEventListener('mouseenter', mouseenterHandler, true);
+	document.body.removeEventListener('mouseleave', mouseleaveHandler, true);
+	document.body.addEventListener('mouseenter', mouseenterHandler, true);
+    document.body.addEventListener('mouseleave', mouseleaveHandler, true);
+}
+
+initTooltip();

custom_nodes/comfyui-manager/js/components-manager.js

@@ -0,0 +1,812 @@
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js"
+import { sleep, show_message, customConfirm, customAlert } from "./common.js";
+import { GroupNodeConfig, GroupNodeHandler } from "../../extensions/core/groupNode.js";
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+
+const SEPARATOR = ">"
+
+let pack_map = {};
+let rpack_map = {};
+
+export function getPureName(node) {
+	// group nodes/
+	let category = null;
+	if(node.category) {
+		category = node.category.substring(12);
+	}
+	else {
+		category = node.constructor.category?.substring(12);
+	}
+	if(category) {
+		let purename = node.comfyClass.substring(category.length+1);
+		return purename;
+	}
+	else if(node.comfyClass.startsWith('workflow/') || node.comfyClass.startsWith(`workflow${SEPARATOR}`)) {
+		return node.comfyClass.substring(9);
+	}
+	else {
+		return node.comfyClass;
+	}
+}
+
+function isValidVersionString(version) {
+	const versionPattern = /^(\d+)\.(\d+)(\.(\d+))?$/;
+	
+	const match = version.match(versionPattern);
+
+	return match !== null &&
+			parseInt(match[1], 10) >= 0 &&
+			parseInt(match[2], 10) >= 0 &&
+			(!match[3] || parseInt(match[4], 10) >= 0);
+}
+
+function register_pack_map(name, data) {
+	if(data.packname) {
+		pack_map[data.packname] = name;
+		rpack_map[name] = data;
+	}
+	else {
+		rpack_map[name] = data;
+	}
+}
+
+function storeGroupNode(name, data, register=true) {
+	let extra = app.graph.extra;
+	if (!extra) app.graph.extra = extra = {};
+	let groupNodes = extra.groupNodes;
+	if (!groupNodes) extra.groupNodes = groupNodes = {};
+	groupNodes[name] = data;
+
+	if(register) {
+		register_pack_map(name, data);
+	}
+}
+
+export async function load_components() {
+	let data = await api.fetchApi('/manager/component/loads', {method: "POST"});
+	let components = await data.json();
+
+	let start_time = Date.now();
+	let failed = [];
+	let failed2 = [];
+
+	for(let name in components) {
+		if(app.graph.extra?.groupNodes?.[name]) {
+			if(data) {
+				let data = components[name];
+
+				let category = data.packname;
+				if(data.category) {
+					category += SEPARATOR + data.category;
+				}
+				if(category == '') {
+					category = 'components';
+				}
+
+				const config = new GroupNodeConfig(name, data);
+				await config.registerType(category);
+
+				register_pack_map(name, data);
+				continue;
+			}
+		}
+
+		let nodeData = components[name];
+
+		storeGroupNode(name, nodeData);
+
+		const config = new GroupNodeConfig(name, nodeData);
+
+		while(true) {
+			try {
+				let category = nodeData.packname;
+				if(nodeData.category) {
+					category += SEPARATOR + nodeData.category;
+				}
+				if(category == '') {
+					category = 'components';
+				}
+
+				await config.registerType(category);
+				register_pack_map(name, nodeData);
+				break;
+			}
+			catch {
+				let elapsed_time = Date.now() - start_time;
+				if (elapsed_time > 5000) {
+					failed.push(name);
+					break;
+				} else {
+					await sleep(100);
+				}
+			}
+		}
+	}
+
+	// fallback1
+	for(let i in failed) {
+		let name = failed[i];
+
+		if(app.graph.extra?.groupNodes?.[name]) {
+			continue;
+		}
+
+		let nodeData = components[name];
+
+		storeGroupNode(name, nodeData);
+
+		const config = new GroupNodeConfig(name, nodeData);
+		while(true) {
+			try {
+				let category = nodeData.packname;
+				if(nodeData.workflow.category) {
+					category += SEPARATOR + nodeData.category;
+				}
+				if(category == '') {
+					category = 'components';
+				}
+
+				await config.registerType(category);
+				register_pack_map(name, nodeData);
+				break;
+			}
+			catch {
+				let elapsed_time = Date.now() - start_time;
+				if (elapsed_time > 10000) {
+					failed2.push(name);
+					break;
+				} else {
+					await sleep(100);
+				}
+			}
+		}
+	}
+
+	// fallback2
+	for(let name in failed2) {
+		let name = failed2[i];
+
+		let nodeData = components[name];
+
+		storeGroupNode(name, nodeData);
+
+		const config = new GroupNodeConfig(name, nodeData);
+		while(true) {
+			try {
+				let category = nodeData.workflow.packname;
+				if(nodeData.workflow.category) {
+					category += SEPARATOR + nodeData.category;
+				}
+				if(category == '') {
+					category = 'components';
+				}
+
+				await config.registerType(category);
+				register_pack_map(name, nodeData);
+				break;
+			}
+			catch {
+				let elapsed_time = Date.now() - start_time;
+				if (elapsed_time > 30000) {
+					failed.push(name);
+					break;
+				} else {
+					await sleep(100);
+				}
+			}
+		}
+	}
+}
+
+async function save_as_component(node, version, author, prefix, nodename, packname, category) {
+	let component_name = `${prefix}::${nodename}`;
+
+	let subgraph = app.graph.extra?.groupNodes?.[component_name];
+	if(!subgraph) {
+		subgraph = app.graph.extra?.groupNodes?.[getPureName(node)];
+	}
+
+	subgraph.version = version;
+	subgraph.author = author;
+	subgraph.datetime = Date.now();
+	subgraph.packname = packname;
+	subgraph.category = category;
+
+	let body =
+		{
+			name: component_name,
+			workflow: subgraph
+		};
+
+	pack_map[packname] = component_name;
+	rpack_map[component_name] = subgraph;
+
+	const res = await api.fetchApi('/manager/component/save', {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify(body),
+		});
+
+	if(res.status == 200) {
+		storeGroupNode(component_name, subgraph);
+		const config = new GroupNodeConfig(component_name, subgraph);
+
+		let category = body.workflow.packname;
+		if(body.workflow.category) {
+			category += SEPARATOR + body.workflow.category;
+		}
+		if(category == '') {
+			category = 'components';
+		}
+
+		await config.registerType(category);
+
+		let path = await res.text();
+		show_message(`Component '${component_name}' is saved into:\n${path}`);
+	}
+	else
+		show_message(`Failed to save component.`);
+}
+
+async function import_component(component_name, component, mode) {
+	if(mode) {
+		let body =
+			{
+				name: component_name,
+				workflow: component
+			};
+
+		const res = await api.fetchApi('/manager/component/save', {
+						method: "POST",
+						headers: { "Content-Type": "application/json", },
+						body: JSON.stringify(body)
+					});
+	}
+
+	let category = component.packname;
+	if(component.category) {
+		category += SEPARATOR + component.category;
+	}
+	if(category == '') {
+		category = 'components';
+	}
+
+	storeGroupNode(component_name, component);
+	const config = new GroupNodeConfig(component_name, component);
+	await config.registerType(category);
+}
+
+function restore_to_loaded_component(component_name) {
+	if(rpack_map[component_name]) {
+		let component = rpack_map[component_name];
+		storeGroupNode(component_name, component, false);
+		const config = new GroupNodeConfig(component_name, component);
+		config.registerType(component.category);
+	}
+}
+
+// Using a timestamp prevents duplicate pastes and ensures the prevention of re-deletion of litegrapheditor_clipboard.
+let last_paste_timestamp = null;
+
+function versionCompare(v1, v2) {
+	let ver1;
+	let ver2;
+	if(v1 && v1 != '') {
+		ver1 = v1.split('.');
+		ver1[0] = parseInt(ver1[0]);
+		ver1[1] = parseInt(ver1[1]);
+		if(ver1.length == 2)
+			ver1.push(0);
+		else
+			ver1[2] = parseInt(ver2[2]);
+	}
+	else {
+		ver1 = [0,0,0];
+	}
+
+	if(v2 && v2 != '') {
+		ver2 = v2.split('.');
+		ver2[0] = parseInt(ver2[0]);
+		ver2[1] = parseInt(ver2[1]);
+		if(ver2.length == 2)
+			ver2.push(0);
+		else
+			ver2[2] = parseInt(ver2[2]);
+	}
+	else {
+		ver2 = [0,0,0];
+	}
+
+	if(ver1[0] > ver2[0])
+		return -1;
+	else if(ver1[0] < ver2[0])
+		return 1;
+
+	if(ver1[1] > ver2[1])
+		return -1;
+	else if(ver1[1] < ver2[1])
+		return 1;
+
+	if(ver1[2] > ver2[2])
+		return -1;
+	else if(ver1[2] < ver2[2])
+		return 1;
+
+	return 0;
+}
+
+function checkVersion(name, component) {
+	let msg = '';
+	if(rpack_map[name]) {
+		let old_version = rpack_map[name].version;
+		if(!old_version || old_version == '') {
+			msg = `  '${name}' Upgrade (V0.0 -> V${component.version})`;
+		}
+		else {
+			let c = versionCompare(old_version, component.version);
+			if(c < 0) {
+				msg = `  '${name}' Downgrade (V${old_version} -> V${component.version})`;
+			}
+			else if(c > 0) {
+				msg = `  '${name}' Upgrade (V${old_version} -> V${component.version})`;
+			}
+			else {
+				msg = `  '${name}' Same version (V${component.version})`;
+			}
+		}
+	}
+	else {
+		msg = `'${name}' NEW (V${component.version})`;
+	}
+
+	return msg;
+}
+
+async function handle_import_components(components) {
+	let msg = 'Components:\n';
+	let cnt = 0;
+	for(let name in components) {
+		let component = components[name];
+		let v = checkVersion(name, component);
+
+		if(cnt < 10) {
+			msg += v + '\n';
+		}
+		else if (cnt == 10) {
+			msg += '...\n';
+		}
+		else {
+			// do nothing
+		}
+
+		cnt++;
+	}
+
+	let last_name = null;
+	msg += '\nWill you load components?\n';
+	const confirmed = await customConfirm(msg);
+	if(confirmed) {
+		const mode = await customConfirm('\nWill you save components?\n(cancel=load without save)');
+
+		for(let name in components) {
+			let component = components[name];
+			import_component(name, component, mode);
+			last_name = name;
+		}
+
+		if(mode) {
+			show_message('Components are saved.');
+		}
+		else {
+			show_message('Components are loaded.');
+		}
+	}
+
+	if(cnt == 1 && last_name) {
+		const node = LiteGraph.createNode(`workflow${SEPARATOR}${last_name}`);
+		node.pos = [app.canvas.graph_mouse[0], app.canvas.graph_mouse[1]];
+		app.canvas.graph.add(node, false);
+	}
+}
+
+async function handlePaste(e) {
+	let data = (e.clipboardData || window.clipboardData);
+	const items = data.items;
+	for(const item of items) {
+		if(item.kind == 'string' && item.type == 'text/plain') {
+			data = data.getData("text/plain");
+			try {
+				let json_data = JSON.parse(data);
+				if(json_data.kind == 'ComfyUI Components' && last_paste_timestamp != json_data.timestamp) {
+					last_paste_timestamp = json_data.timestamp;
+					await handle_import_components(json_data.components);
+
+					// disable paste node
+					localStorage.removeItem("litegrapheditor_clipboard", null);
+				}
+				else {
+					console.log('This components are already pasted: ignored');
+				}
+			}
+			catch {
+				// nothing to do
+			}
+		}
+	}
+}
+
+document.addEventListener("paste", handlePaste);
+
+
+export class ComponentBuilderDialog extends ComfyDialog {
+	constructor() {
+		super();
+	}
+
+	clear() {
+		while (this.element.children.length) {
+			this.element.removeChild(this.element.children[0]);
+		}
+	}
+
+	show() {
+		this.invalidateControl();
+
+		this.element.style.display = "block";
+		this.element.style.zIndex = 1099;
+		this.element.style.width = "500px";
+		this.element.style.height = "480px";
+	}
+
+	invalidateControl() {
+		this.clear();
+
+		let self = this;
+
+		const close_button = $el("button", { id: "cm-close-button", type: "button", textContent: "Close", onclick: () => self.close() });
+		this.save_button = $el("button",
+					{ id: "cm-save-button", type: "button", textContent: "Save", onclick: () =>
+							{
+								save_as_component(self.target_node, self.version_string.value.trim(), self.author.value.trim(), self.node_prefix.value.trim(),
+												  self.getNodeName(), self.getPackName(), self.category.value.trim());
+							}
+					});
+
+		let default_nodename = getPureName(this.target_node).trim();
+
+		let groupNode = app.graph.extra.groupNodes[default_nodename];
+		let default_packname = groupNode.packname;
+		if(!default_packname) {
+			default_packname = '';
+		}
+
+		let default_category = groupNode.category;
+		if(!default_category) {
+			default_category = '';
+		}
+
+		this.default_ver = groupNode.version;
+		if(!this.default_ver) {
+			this.default_ver = '0.0';
+		}
+
+		let default_author = groupNode.author;
+		if(!default_author) {
+			default_author = '';
+		}
+
+		let delimiterIndex = default_nodename.indexOf('::');
+		let default_prefix = "";
+		if(delimiterIndex != -1) {
+			default_prefix = default_nodename.substring(0, delimiterIndex);
+			default_nodename = default_nodename.substring(delimiterIndex + 2);
+		}
+
+		if(!default_prefix) {
+			this.save_button.disabled = true;
+		}
+
+		this.pack_list = this.createPackListCombo();
+
+		let version_string = this.createLabeledInput('input version (e.g. 1.0)', '*Version : ',  this.default_ver);
+		this.version_string = version_string[1];
+		this.version_string.disabled = true;
+
+		let author = this.createLabeledInput('input author (e.g. Dr.Lt.Data)', 'Author : ',  default_author);
+		this.author = author[1];
+
+		let node_prefix = this.createLabeledInput('input node prefix (e.g. mypack)', '*Prefix : ',  default_prefix);
+		this.node_prefix = node_prefix[1];
+
+		let manual_nodename = this.createLabeledInput('input node name (e.g. MAKE_BASIC_PIPE)', 'Nodename : ', default_nodename);
+		this.manual_nodename = manual_nodename[1];
+
+		let manual_packname = this.createLabeledInput('input pack name (e.g. mypack)', 'Packname : ',  default_packname);
+		this.manual_packname = manual_packname[1];
+
+		let category = this.createLabeledInput('input category (e.g. util/pipe)', 'Category : ',  default_category);
+		this.category = category[1];
+
+		this.node_label = this.createNodeLabel();
+
+		let author_mode = this.createAuthorModeCheck();
+		this.author_mode = author_mode[0];
+
+		const content =
+				$el("div.comfy-modal-content",
+					[
+						$el("tr.cm-title", {}, [
+								$el("font", {size:6, color:"white"}, [`ComfyUI-Manager: Component Builder`])]
+							),
+						$el("br", {}, []),
+						$el("div.cm-menu-container",
+							[
+								author_mode[0],
+								author_mode[1],
+								category[0],
+								author[0],
+								node_prefix[0],
+								manual_nodename[0],
+								manual_packname[0],
+								version_string[0],
+								this.pack_list,
+								$el("br", {}, []),
+								this.node_label
+							]),
+
+						$el("br", {}, []),
+						this.save_button,
+						close_button,
+					]
+				);
+
+		content.style.width = '100%';
+		content.style.height = '100%';
+
+		this.element = $el("div.comfy-modal", { id:'cm-manager-dialog', parent: document.body }, [ content ]);
+	}
+
+	validateInput() {
+		let msg = "";
+
+		if(!isValidVersionString(this.version_string.value)) {
+			msg += 'Invalid version string: '+event.value+"\n";
+		}
+
+		if(this.node_prefix.value.trim() == '') {
+			msg += 'Node prefix cannot be empty\n';
+		}
+
+		if(this.manual_nodename.value.trim() == '') {
+			msg += 'Node name cannot be empty\n';
+		}
+
+		if(msg != '') {
+//			alert(msg);
+		}
+
+		this.save_button.disabled = msg != "";
+	}
+
+	getPackName() {
+		if(this.pack_list.selectedIndex == 0) {
+			return this.manual_packname.value.trim();
+		}
+
+		return this.pack_list.value.trim();
+	}
+
+	getNodeName() {
+		if(this.manual_nodename.value.trim() != '') {
+			return this.manual_nodename.value.trim();
+		}
+
+		return getPureName(this.target_node);
+	}
+
+	createAuthorModeCheck() {
+		let check = $el("input",{type:'checkbox', id:"author-mode"},[])
+		const check_label = $el("label",{for:"author-mode"},["Enable author mode"]);
+		check_label.style.color = "var(--fg-color)";
+		check_label.style.cursor = "pointer";
+		check.checked = false;
+
+		let self = this;
+		check.onchange = () => {
+			self.version_string.disabled = !check.checked;
+
+			if(!check.checked) {
+				self.version_string.value = self.default_ver;
+			}
+			else {
+				customAlert('If you are not the author, it is not recommended to change the version, as it may cause component update issues.');
+			}
+		};
+
+		return [check, check_label];
+	}
+
+	createNodeLabel() {
+		let label = $el('p');
+		label.className = 'cb-node-label';
+		if(this.target_node.comfyClass.includes('::'))
+			label.textContent = getPureName(this.target_node);
+		else
+			label.textContent = " _::" + getPureName(this.target_node);
+		return label;
+	}
+
+	createLabeledInput(placeholder, label, value) {
+		let textbox = $el('input.cb-widget-input', {type:'text', placeholder:placeholder, value:value}, []);
+
+		let self = this;
+		textbox.onchange = () => {
+			this.validateInput.call(self);
+			this.node_label.textContent = this.node_prefix.value + "::" + this.manual_nodename.value;
+		}
+		let row = $el('span.cb-widget', {}, [ $el('span.cb-widget-input-label', label), textbox]);
+
+		return [row, textbox];
+	}
+
+	createPackListCombo() {
+		let combo = document.createElement("select");
+		combo.className = "cb-widget";
+		let default_packname_option = { value: '##manual', text: 'Packname: Manual' };
+
+		combo.appendChild($el('option', default_packname_option, []));
+		for(let name in pack_map) {
+			combo.appendChild($el('option', { value: name, text: 'Packname: '+ name }, []));
+		}
+
+		let self = this;
+		combo.onchange = function () {
+			if(combo.selectedIndex == 0) {
+				self.manual_packname.disabled = false;
+			}
+			else {
+				self.manual_packname.disabled = true;
+			}
+		};
+
+		return combo;
+	}
+}
+
+let orig_handleFile = app.handleFile;
+
+async function handleFile(file) {
+	if (file.name?.endsWith(".json") || file.name?.endsWith(".pack")) {
+		const reader = new FileReader();
+		reader.onload = async () => {
+			let is_component = false;
+			const jsonContent = JSON.parse(reader.result);
+			for(let name in jsonContent) {
+				let cand = jsonContent[name];
+				is_component = cand.datetime && cand.version;
+				break;
+			}
+
+			if(is_component) {
+				await handle_import_components(jsonContent);
+			}
+			else {
+				orig_handleFile.call(app, file);
+			}
+		};
+		reader.readAsText(file);
+
+		return;
+	}
+
+	orig_handleFile.call(app, file);
+}
+
+app.handleFile = handleFile;
+
+let current_component_policy = 'workflow';
+try {
+	api.fetchApi('/manager/policy/component')
+		.then(response => response.text())
+		.then(data => { current_component_policy = data; });
+}
+catch {}
+
+function getChangedVersion(groupNodes) {
+	if(!Object.keys(pack_map).length || !groupNodes)
+		return null;
+
+	let res = {};
+	for(let component_name in groupNodes) {
+		let data = groupNodes[component_name];
+
+		if(rpack_map[component_name]) {
+			let v = versionCompare(data.version, rpack_map[component_name].version);
+			res[component_name] = v;
+		}
+	}
+
+	return res;
+}
+
+const loadGraphData = app.loadGraphData;
+app.loadGraphData = async function () {
+	if(arguments.length == 0)
+		return await loadGraphData.apply(this, arguments);
+
+	let graphData = arguments[0];
+	let groupNodes = graphData.extra?.groupNodes;
+	let res = getChangedVersion(groupNodes);
+
+	if(res) {
+		let target_components = null;
+		switch(current_component_policy) {
+		case 'higher':
+			target_components = Object.keys(res).filter(key => res[key] == 1);
+			break;
+
+		case 'mine':
+			target_components = Object.keys(res);
+			break;
+
+		default:
+			// do nothing
+		}
+
+		if(target_components) {
+			for(let i in target_components) {
+				let component_name = target_components[i];
+				let component = rpack_map[component_name];
+				if(component && graphData.extra?.groupNodes) {
+					graphData.extra.groupNodes[component_name] = component;
+				}
+			}
+		}
+	}
+	else {
+		console.log('Empty components: policy ignored');
+	}
+
+	arguments[0] = graphData;
+	return await loadGraphData.apply(this, arguments);
+};
+
+export function set_component_policy(v) {
+	current_component_policy = v;
+}
+
+let graphToPrompt = app.graphToPrompt;
+app.graphToPrompt = async function () {
+	let p = await graphToPrompt.call(app);
+	try {
+		let groupNodes = p.workflow.extra?.groupNodes;
+		if(groupNodes) {
+			p.workflow.extra = { ... p.workflow.extra};
+
+			// get used group nodes
+			let used_group_nodes = new Set();
+			for(let node of p.workflow.nodes) {
+				if(node.type.startsWith(`workflow/`) || node.type.startsWith(`workflow${SEPARATOR}`)) {
+					used_group_nodes.add(node.type.substring(9));
+				}
+			}
+
+			// remove unused group nodes
+			let new_groupNodes = {};
+			for (let key in p.workflow.extra.groupNodes) {
+				if (used_group_nodes.has(key)) {
+					new_groupNodes[key] = p.workflow.extra.groupNodes[key];
+				}
+			}
+			p.workflow.extra.groupNodes = new_groupNodes;
+		}
+	}
+	catch(e) {
+		console.log(`Failed to filtering group nodes: ${e}`);
+	}
+
+	return p;
+}

custom_nodes/comfyui-manager/js/custom-nodes-manager.css

@@ -0,0 +1,729 @@
+.cn-manager {
+	--grid-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+	z-index: 1099;
+	width: 80vw;
+	height: 75vh;
+	min-height: 30em;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	color: var(--fg-color);
+	font-family: arial, sans-serif;
+	text-underline-offset: 3px;
+	outline: none;
+	margin: calc(var(--spacing)*2);
+}
+
+.cn-manager .cn-flex-auto {
+	flex: auto;
+}
+
+.cn-manager button {
+	width: auto;
+	position: relative;
+	overflow: hidden;
+	font-size: 16px;
+	color: var(--input-text);
+	background-color: var(--comfy-input-bg);
+	border-color: var(--border-color);
+	margin: 0;
+	min-width: 100px;
+}
+
+.cn-manager button:hover {
+	filter: brightness(125%);
+}
+
+.cn-manager button:disabled,
+.cn-manager input:disabled,
+.cn-manager select:disabled {
+	color: gray;
+}
+
+.cn-manager button:disabled {
+	background-color: var(--comfy-input-bg);
+}
+
+.cn-manager .cn-manager-restart {
+	display: none;
+	background-color: #500000 !important;
+	border-color: #88181b !important;
+	color: white !important;
+}
+
+.cn-manager .cn-manager-restart:hover {
+	background-color: #88181b !important;
+}
+
+.cn-manager .cn-manager-stop {
+	display: none;
+	background-color: #500000;
+	color: white;
+}
+
+.cn-manager .cn-manager-back {
+	align-items: center;
+	justify-content: center;
+}
+
+.arrow-icon {
+	height: 1em;
+	width: 1em;
+	margin-right: 5px;
+	transform: translateY(2px);
+}
+
+.cn-icon {
+	display: block;
+	width: 16px;
+	height: 16px;
+}
+
+.cn-icon svg {
+	display: block;
+	margin: 0;
+	pointer-events: none;
+}
+
+.cn-manager-header {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+	align-items: center;
+}
+
+.cn-manager-header label {
+	display: flex;
+	gap: 5px;
+	align-items: center;
+}
+
+.cn-manager-filter {
+	height: 28px;
+	line-height: 28px;
+
+	cursor: pointer;
+	padding: 0.5em 0.5em;
+	border: 1px solid var(--border-color);
+	border-radius: 6px;
+	background: var(--comfy-input-bg);
+}
+
+.cn-manager-filter:hover {
+	filter: brightness(125%);
+}
+
+.cn-manager-keywords {
+	height: 28px;
+	line-height: 28px;
+	padding: 0 5px 0 26px;
+	background: var(--comfy-input-bg);
+	background-size: 16px;
+	background-position: 5px center;
+	background-repeat: no-repeat;
+	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20pointer-events%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23888%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m21%2021-4.486-4.494M19%2010.5a8.5%208.5%200%201%201-17%200%208.5%208.5%200%200%201%2017%200%22%2F%3E%3C%2Fsvg%3E");
+
+	border: 1px solid var(--border-color);
+	border-radius: 6px;
+
+	outline-color: transparent;
+}
+
+.cn-manager-status {
+	padding-left: 10px;
+}
+
+.cn-manager-grid {
+	flex: auto;
+	border: 1px solid var(--border-color);
+	overflow: hidden;
+	position: relative;
+}
+
+.cn-manager-selection {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	align-items: center;
+}
+
+.cn-manager-message {
+	position: relative;
+}
+
+.cn-manager-footer {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	align-items: center;
+}
+
+.cn-manager-grid .tg-turbogrid {
+	font-family: var(--grid-font);
+	font-size: 15px;
+	background: var(--bg-color);
+}
+
+.cn-manager-grid .tg-turbogrid .tg-highlight::after {
+	position: absolute;
+	top: 0;
+	left: 0;
+	content: "";
+	display: block;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	background-color: #80bdff11;
+	pointer-events: none;
+}
+
+.cn-manager-grid .cn-pack-name a {
+	color: skyblue;
+	text-decoration: none;
+	word-break: break-word;
+}
+
+.cn-manager-grid .cn-pack-desc a {
+	color: #5555FF;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+.cn-manager-grid .tg-cell a:hover {
+	text-decoration: underline;
+}
+
+.cn-manager-grid .cn-pack-version {
+	line-height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	height: 100%;
+	gap: 5px;
+}
+
+.cn-manager-grid .cn-pack-nodes {
+	line-height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	gap: 5px;
+	cursor: pointer;
+	height: 100%;
+}
+
+.cn-manager-grid .cn-pack-nodes:hover {
+	text-decoration: underline;
+}
+
+.cn-manager-grid .cn-pack-conflicts {
+	color: orange;
+}
+
+.cn-popover {
+	position: fixed;
+	z-index: 10000;
+	padding: 20px;
+	color: #1e1e1e;
+	filter: drop-shadow(1px 5px 5px rgb(0 0 0 / 30%));
+	overflow: hidden;
+}
+
+.cn-flyover {
+	position: absolute;
+    top: 0;
+	right: 0;
+    z-index: 1000;
+    display: none;
+    width: 50%;
+    height: 100%;
+    background-color: var(--comfy-menu-bg);
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+	flex-direction: column;
+}
+
+.cn-flyover::before {
+    position: absolute;
+    top: 0;
+    content: "";
+    z-index: 10;
+    display: block;
+    width: 10px;
+    height: 100%;
+    pointer-events: none;
+	left: -10px;
+    background-image: linear-gradient(to left, rgb(0 0 0 / 20%), rgb(0 0 0 / 0%));
+}
+
+.cn-flyover-header {
+	height: 45px;
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	border-bottom: 1px solid var(--border-color);
+}
+
+.cn-flyover-close {
+	display: flex;
+	align-items: center;
+	padding: 0 10px;
+	justify-content: center;
+	cursor: pointer;
+	opacity: 0.8;
+	height: 100%;
+}
+
+.cn-flyover-close:hover {
+	opacity: 1;
+}
+
+.cn-flyover-close svg {
+	display: block;
+	margin: 0;
+	pointer-events: none;
+	width: 20px;
+	height: 20px;
+}
+
+.cn-flyover-title {
+	display: flex;
+	align-items: center;
+	font-weight: bold;
+	gap: 10px;
+	flex: auto;
+}
+
+.cn-flyover-body {
+	height: calc(100% - 45px);
+	overflow-y: auto;
+	position: relative;
+	background-color: var(--comfy-menu-secondary-bg);
+}
+
+@keyframes cn-slide-in-right {
+    from {
+        visibility: visible;
+        transform: translate3d(100%, 0, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.cn-slide-in-right {
+    animation-name: cn-slide-in-right;
+}
+
+@keyframes cn-slide-out-right {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+
+    to {
+        visibility: hidden;
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+.cn-slide-out-right {
+    animation-name: cn-slide-out-right;
+}
+
+.cn-nodes-list {
+	width: 100%;
+}
+
+.cn-nodes-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.cn-nodes-row:nth-child(odd) {
+	background-color: rgb(0 0 0 / 5%);
+}
+
+.cn-nodes-row:hover {
+    background-color: rgb(0 0 0 / 10%);
+}
+
+.cn-nodes-sn {
+	text-align: right;
+	min-width: 35px;
+	color: var(--drag-text);
+	flex-shrink: 0;
+	font-size: 12px;
+	padding: 8px 5px;
+}
+
+.cn-nodes-name {
+	cursor: pointer;
+	white-space: nowrap;
+	flex-shrink: 0;
+	position: relative;
+	padding: 8px 5px;
+}
+
+.cn-nodes-name::after {
+	content: attr(action);
+	position: absolute;
+	pointer-events: none;
+	top: 50%;
+	left: 100%;
+	transform: translate(5px, -50%);
+	font-size: 12px;
+	color: var(--drag-text);
+	background-color: var(--comfy-input-bg);
+	border-radius: 10px;
+	border: 1px solid var(--border-color);
+	padding: 3px 8px;
+	display: none;
+}
+
+.cn-nodes-name.action::after {
+	display: block;
+}
+
+.cn-nodes-name:hover {
+	text-decoration: underline;
+}
+
+.cn-nodes-conflict .cn-nodes-name,
+.cn-nodes-conflict .cn-icon {
+	color: orange;
+}
+
+.cn-conflicts-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+	align-items: center;
+	padding: 5px 0;
+}
+
+.cn-conflicts-list b {
+	font-weight: normal;
+	color: var(--descrip-text);
+}
+
+.cn-nodes-pack {
+	cursor: pointer;
+	color: skyblue;
+}
+
+.cn-nodes-pack:hover {
+	text-decoration: underline;
+}
+
+.cn-pack-badge {
+	font-size: 12px;
+	font-weight: normal;
+	background-color: var(--comfy-input-bg);
+	border-radius: 10px;
+	border: 1px solid var(--border-color);
+	padding: 3px 8px;
+	color: var(--error-text);
+}
+
+.cn-preview {
+	min-width: 300px;
+	max-width: 500px;
+	min-height: 120px;
+	overflow: hidden;
+  	font-size: 12px;
+	pointer-events: none;
+	padding: 12px;
+	color: var(--fg-color);
+}
+
+.cn-preview-header {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	border-bottom: 1px solid var(--comfy-input-bg);
+	padding: 5px 10px;
+}
+
+.cn-preview-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: grey;
+	position: relative;
+	filter: drop-shadow(1px 2px 3px rgb(0 0 0 / 30%));
+}
+
+.cn-preview-dot.cn-preview-optional::after {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background-color: var(--comfy-input-bg);
+	border-radius: 50%;
+	width: 3px;
+  	height: 3px;
+}
+
+.cn-preview-dot.cn-preview-grid {
+	border-radius: 0;
+}
+
+.cn-preview-dot.cn-preview-grid::before {
+	content: '';
+	position: absolute;
+	border-left: 1px solid var(--comfy-input-bg);
+	border-right: 1px solid var(--comfy-input-bg);
+	width: 4px;
+	height: 100%;
+	left: 2px;
+	top: 0;
+	z-index: 1;
+}
+
+.cn-preview-dot.cn-preview-grid::after {
+	content: '';
+	position: absolute;
+	border-top: 1px solid var(--comfy-input-bg);
+	border-bottom: 1px solid var(--comfy-input-bg);
+	width: 100%;
+	height: 4px;
+	left: 0;
+	top: 2px;
+	z-index: 1;
+}
+
+.cn-preview-name {
+	flex: auto;
+	font-size: 14px;
+}
+
+.cn-preview-io {
+	display: flex;
+	justify-content: space-between;
+	padding: 10px 10px;
+}
+
+.cn-preview-column > div {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+	height: 18px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.cn-preview-input {
+	justify-content: flex-start;
+}
+
+.cn-preview-output {
+	justify-content: flex-end;
+}
+
+.cn-preview-list {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	padding: 0 10px 10px 10px;
+}
+
+.cn-preview-switch {
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--bg-color);
+	border: 2px solid var(--border-color);
+	border-radius: 10px;
+	text-wrap: nowrap;
+	padding: 2px 20px;
+	gap: 10px;
+}
+
+.cn-preview-switch::before,
+.cn-preview-switch::after {
+	position: absolute;
+	pointer-events: none;
+	top: 50%;
+	transform: translate(0, -50%);
+	color: var(--fg-color);
+	opacity: 0.8;
+}
+
+.cn-preview-switch::before {
+	content: "◀";
+	left: 5px;
+}
+
+.cn-preview-switch::after {
+	content: "▶";
+	right: 5px;
+}
+
+.cn-preview-value {
+	color: var(--descrip-text);
+}
+
+.cn-preview-string {
+	min-height: 30px;
+	max-height: 300px;
+	background: var(--bg-color);
+	color: var(--descrip-text);
+	border-radius: 3px;
+	padding: 3px 5px;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.cn-preview-description {
+	margin: 0px 10px 10px 10px;
+	padding: 6px;
+	background: var(--border-color);
+	color: var(--descrip-text);
+	border-radius: 5px;
+	font-style: italic;
+	word-break: break-word;
+}
+
+.cn-tag-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+	align-items: center;
+	margin-bottom: 5px;
+}
+
+.cn-tag-list > div {
+	background-color: var(--border-color);
+	border-radius: 5px;
+	padding: 0 5px;
+}
+
+.cn-install-buttons {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	padding: 3px;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+}
+
+.cn-install-buttons button {
+	padding: 4px 8px;
+}
+
+.cn-selected-buttons {
+	display: flex;
+	gap: 5px;
+	align-items: center;
+	padding-right: 20px;
+}
+
+.cn-manager .cn-btn-enable {
+	background-color: #333399;
+	color: white;
+}
+
+.cn-manager .cn-btn-disable {
+	background-color: #442277;
+	color: white;
+}
+
+.cn-manager .cn-btn-update {
+	background-color: #1155AA;
+	color: white;
+}
+
+.cn-manager .cn-btn-try-update {
+	background-color: Gray;
+	color: white;
+}
+
+.cn-manager .cn-btn-try-fix {
+	background-color: #6495ED;
+	color: white;
+}
+
+.cn-manager .cn-btn-import-failed {
+	background-color: #AA1111;
+    font-size: 10px;
+	font-weight: bold;
+	color: white;
+}
+
+.cn-manager .cn-btn-install {
+	background-color: black;
+	color: white;
+}
+
+.cn-manager .cn-btn-try-install {
+	background-color: Gray;
+	color: white;
+}
+
+.cn-manager .cn-btn-uninstall {
+	background-color: #993333;
+	color: white;
+}
+
+.cn-manager .cn-btn-reinstall {
+	background-color: #993333;
+	color: white;
+}
+
+.cn-manager .cn-btn-switch {
+	background-color: #448833;
+	color: white;
+
+}
+
+@keyframes cn-btn-loading-bg {
+	0% {
+		left: 0;
+	}
+	100% {
+		left: -105px;
+	}
+}
+
+.cn-manager button.cn-btn-loading {
+	position: relative;
+	overflow: hidden;
+	border-color: rgb(0 119 207 / 80%);
+	background-color: var(--comfy-input-bg);
+}
+
+.cn-manager button.cn-btn-loading::after {
+	position: absolute;
+	top: 0;
+	left: 0;
+	content: "";
+	width: 500px;
+	height: 100%;
+	background-image: repeating-linear-gradient(
+		-45deg,
+		rgb(0 119 207 / 30%),
+		rgb(0 119 207 / 30%) 10px,
+		transparent 10px,
+		transparent 15px
+	);
+	animation: cn-btn-loading-bg 2s linear infinite;
+}
+
+.cn-manager-light .cn-pack-name a {
+	color: blue;
+}
+
+.cn-manager-light .cm-warn-note {
+	background-color: #ccc !important;
+}
+
+.cn-manager-light .cn-btn-install {
+	background-color: #333;
+}

custom_nodes/comfyui-manager/js/model-manager.css

@@ -0,0 +1,237 @@
+.cmm-manager {
+	--grid-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+	z-index: 1099;
+	width: 80vw;
+	height: 75vh;
+	min-height: 30em;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	color: var(--fg-color);
+	font-family: arial, sans-serif;
+	margin: calc(var(--spacing)*2);
+}
+
+.cmm-manager .cmm-flex-auto {
+	flex: auto;
+}
+
+.cmm-manager button {
+	font-size: 16px;
+	color: var(--input-text);
+    background-color: var(--comfy-input-bg);
+    border-color: var(--border-color);
+    margin: 0;
+	min-width: 100px;
+}
+
+.cmm-manager button:hover {
+	filter: brightness(125%);
+}
+
+.cmm-manager button:disabled,
+.cmm-manager input:disabled,
+.cmm-manager select:disabled {
+	color: gray;
+}
+
+.cmm-manager button:disabled {
+	background-color: var(--comfy-input-bg);
+}
+
+.cmm-manager .cmm-manager-refresh {
+	display: none;
+	background-color: #000080 !important;
+	color: white;
+}
+
+.cmm-manager .cmm-manager-stop {
+	display: none;
+	background-color: #500000;
+	color: white;
+}
+
+.cmm-manager-header {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+	align-items: center;
+}
+
+.cmm-manager-header label {
+	display: flex;
+	gap: 5px;
+	align-items: center;
+}
+
+.cmm-manager-type,
+.cmm-manager-base,
+.cmm-manager-filter {
+	height: 28px;
+	line-height: 28px;
+
+	cursor: pointer;
+	padding: 0.5em 0.5em;
+	border: 1px solid var(--border-color);
+	border-radius: 6px;
+	background: var(--comfy-input-bg);
+}
+
+.cmm-manager-type:hover,
+.cmm-manager-base:hover,
+.cmm-manager-filter:hover {
+	filter: brightness(125%);
+}
+
+.cmm-manager-keywords {
+	height: 28px;
+	line-height: 28px;
+	padding: 0 5px 0 26px;
+	background: var(--comfy-input-bg);
+	background-size: 16px;
+	background-position: 5px center;
+	background-repeat: no-repeat;
+	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20pointer-events%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23888%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m21%2021-4.486-4.494M19%2010.5a8.5%208.5%200%201%201-17%200%208.5%208.5%200%200%201%2017%200%22%2F%3E%3C%2Fsvg%3E");
+
+	border: 1px solid var(--border-color);
+	border-radius: 6px;
+
+	outline-color: transparent;
+}
+
+.cmm-manager-status {
+	padding-left: 10px;
+}
+
+.cmm-manager-grid {
+	flex: auto;
+	border: 1px solid var(--border-color);
+	overflow: hidden;
+}
+
+.cmm-manager-selection {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	align-items: center;
+}
+
+.cmm-manager-footer {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	align-items: center;
+}
+
+.cmm-manager-grid .tg-turbogrid {
+	font-family: var(--grid-font);
+	font-size: 15px;
+	background: var(--bg-color);
+}
+
+.cmm-manager-grid .cmm-node-name a {
+	color: skyblue;
+	text-decoration: none;
+	word-break: break-word;
+}
+
+.cmm-manager-grid .cmm-node-desc a {
+	color: #5555FF;
+    font-weight: bold;
+	text-decoration: none;
+}
+
+.cmm-manager-grid .tg-cell a:hover {
+	text-decoration: underline;
+}
+
+.cmm-icon-passed {
+	width: 20px;
+	height: 20px;
+	position: absolute;
+	left: calc(50% - 10px);
+	top: calc(50% - 10px);
+}
+
+.cmm-manager .cmm-btn-enable {
+	background-color: blue;
+	color: white;
+}
+
+.cmm-manager .cmm-btn-disable {
+	background-color: MediumSlateBlue;
+	color: white;
+}
+
+.cmm-manager .cmm-btn-install {
+	background-color: black;
+	color: white;
+}
+
+.cmm-btn-install {
+	padding: 4px 8px;
+}
+
+.cmm-btn-download {
+	width: 18px;
+	height: 18px;
+	position: absolute;
+	left: calc(50% - 10px);
+	top: calc(50% - 10px);
+	cursor: pointer;
+	opacity: 0.8;
+	color: #fff;
+}
+
+.cmm-btn-download:hover {
+	opacity: 1;
+}
+
+.cmm-manager-light .cmm-btn-download {
+	color: #000;
+}
+
+@keyframes cmm-btn-loading-bg {
+    0% {
+        left: 0;
+    }
+    100% {
+        left: -105px;
+    }
+}
+
+.cmm-manager button.cmm-btn-loading {
+    position: relative;
+    overflow: hidden;
+    border-color: rgb(0 119 207 / 80%);
+	background-color: var(--comfy-input-bg);
+}
+
+.cmm-manager button.cmm-btn-loading::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: "";
+    width: 500px;
+    height: 100%;
+    background-image: repeating-linear-gradient(
+        -45deg,
+        rgb(0 119 207 / 30%),
+        rgb(0 119 207 / 30%) 10px,
+        transparent 10px,
+        transparent 15px
+    );
+    animation: cmm-btn-loading-bg 2s linear infinite;
+}
+
+.cmm-manager-light .cmm-node-name a {
+	color: blue;
+}
+
+.cmm-manager-light .cm-warn-note {
+	background-color: #ccc !important;
+}
+
+.cmm-manager-light .cmm-btn-install {
+	background-color: #333;
+}

custom_nodes/comfyui-manager/js/model-manager.js

@@ -0,0 +1,824 @@
+import { app } from "../../scripts/app.js";
+import { $el } from "../../scripts/ui.js";
+import {
+	manager_instance, rebootAPI,
+	fetchData, md5, icons, show_message, customAlert, infoToast, showTerminal,
+	storeColumnWidth, restoreColumnWidth, loadCss, handle403Response
+} from  "./common.js";
+import { api } from "../../scripts/api.js";
+
+// https://cenfun.github.io/turbogrid/api.html
+import TG from "./turbogrid.esm.js";
+import { buildGuiFrameCustomHeader,  createSettingsCombo } from "./comfyui-gui-builder.js";
+
+loadCss("./model-manager.css");
+
+const gridId = "model";
+
+const pageHtml = `
+<div class="cmm-manager cmm-manager-dark">
+	<div class="cmm-manager-grid"></div>
+	<div class="cmm-manager-selection"></div>
+	<div class="cmm-manager-message"></div>
+	<div class="cmm-manager-footer">
+		<button class="cmm-manager-refresh p-button p-component">Refresh</button>
+		<button class="cmm-manager-stop p-button p-component">Stop</button>
+		<div class="cmm-flex-auto"></div>
+	</div>
+</div>
+`;
+
+export class ModelManager {
+	static instance = null;
+
+	constructor(app, manager_dialog) {
+		this.app = app;
+		this.manager_dialog = manager_dialog;
+		this.id = "cmm-manager";
+
+		this.filter = '';
+		this.type = '';
+		this.base = '';
+		this.keywords = '';
+
+		this.init();
+
+		api.addEventListener("cm-queue-status", this.onQueueStatus);
+	}
+
+	init() {
+		const header = $el("div.cmm-manager-header", {}, [
+			createSettingsCombo("Filter", $el("select.cmm-manager-filter")),
+			createSettingsCombo("Type", $el("select.cmm-manager-type")),
+			createSettingsCombo("Base", $el("select.cmm-manager-base")),
+			$el("input.cmm-manager-keywords.p-inputtext.p-component", { type: "search", placeholder: "Search" }),
+			$el("div.cmm-manager-status"),
+			$el("div.cmm-flex-auto")
+		]);
+
+		const frame = buildGuiFrameCustomHeader(
+			'cmm-manager-dialog', // dialog id
+			header, // custom header element
+			pageHtml, // dialog content element
+			this
+		);	// send this so we can attach close functions
+
+		this.element = frame;
+		this.initFilter();
+		this.bindEvents();
+		this.initGrid();
+	}
+
+	initFilter() {
+		
+		this.filterList = [{
+			label: "All",
+			value: ""
+		}, {
+			label: "Installed",
+			value: "installed"
+		}, {
+			label: "Not Installed",
+			value: "not_installed"
+		}, {
+			label: "In Workflow",
+			value: "in_workflow"
+		}];
+
+		this.typeList = [{
+			label: "All",
+			value: ""
+		}];
+
+		this.baseList = [{
+			label: "All",
+			value: ""
+		}];
+
+		this.updateFilter();
+		
+	}
+
+	updateFilter() {
+		const $filter  = this.element.querySelector(".cmm-manager-filter");
+		$filter.innerHTML = this.filterList.map(item => {
+			const selected = item.value === this.filter ? " selected" : "";
+			return `<option value="${item.value}"${selected}>${item.label}</option>`
+		}).join("");
+
+		const $type  = this.element.querySelector(".cmm-manager-type");
+		$type.innerHTML = this.typeList.map(item => {
+			const selected = item.value === this.type ? " selected" : "";
+			return `<option value="${item.value}"${selected}>${item.label}</option>`
+		}).join("");
+
+		const $base  = this.element.querySelector(".cmm-manager-base");
+		$base.innerHTML = this.baseList.map(item => {
+			const selected = item.value === this.base ? " selected" : "";
+			return `<option value="${item.value}"${selected}>${item.label}</option>`
+		}).join("");
+
+	}
+
+	bindEvents() {
+		const eventsMap = {
+			".cmm-manager-filter": {
+				change: (e) => {
+					this.filter = e.target.value;
+					this.updateGrid();
+				}
+			},
+			".cmm-manager-type": {
+				change: (e) => {
+					this.type = e.target.value;
+					this.updateGrid();
+				}
+			},
+			".cmm-manager-base": {
+				change: (e) => {
+					this.base = e.target.value;
+					this.updateGrid();
+				}
+			},
+
+			".cmm-manager-keywords": {
+				input: (e) => {
+					const keywords = `${e.target.value}`.trim();
+					if (keywords !== this.keywords) {
+						this.keywords = keywords;
+						this.updateGrid();
+					}
+				},
+				focus: (e) => e.target.select()
+			},
+
+			".cmm-manager-selection": {
+				click: (e) => {
+					const target = e.target;
+					const mode = target.getAttribute("mode");
+					if (mode === "install") {
+						this.installModels(this.selectedModels, target);
+					}
+				}
+			},
+
+			".cmm-manager-refresh": {
+				click: () => {
+					app.refreshComboInNodes();
+				}
+			},
+
+			".cmm-manager-stop": {
+				click: () => {
+					api.fetchApi('/manager/queue/reset');
+					infoToast('Cancel', 'Remaining tasks will stop after completing the current task.');
+				}
+			},
+
+			".cmm-manager-back": {
+				click: (e) => {
+				    this.close()
+				    manager_instance.show();
+				}
+			}
+		};
+		Object.keys(eventsMap).forEach(selector => {
+			const target = this.element.querySelector(selector);
+			if (target) {
+				const events = eventsMap[selector];
+				if (events) {
+					Object.keys(events).forEach(type => {
+						target.addEventListener(type, events[type]);
+					});
+				}
+			}
+		});
+	}
+
+	// ===========================================================================================
+
+	initGrid() {
+		const container = this.element.querySelector(".cmm-manager-grid");
+		const grid = new TG.Grid(container);
+		this.grid = grid;
+		
+		grid.bind('onUpdated', (e, d) => {
+
+			this.showStatus(`${grid.viewRows.length.toLocaleString()} external models`);
+
+        });
+
+		grid.bind('onSelectChanged', (e, changes) => {
+            this.renderSelected();
+        });
+
+		grid.bind("onColumnWidthChanged", (e, columnItem) => {
+			storeColumnWidth(gridId, columnItem)
+		});
+
+		grid.bind('onClick', (e, d) => {
+			const { rowItem } = d;
+			const target = d.e.target;
+			const mode = target.getAttribute("mode");
+			if (mode === "install") {
+				this.installModels([rowItem], target);
+			}
+
+        });
+
+		grid.setOption({
+			theme: 'dark',
+
+			selectVisible: true,
+			selectMultiple: true,
+			selectAllVisible: true,
+
+			textSelectable: true,
+			scrollbarRound: true,
+
+			frozenColumn: 1,
+			rowNotFound: "No Results",
+
+			rowHeight: 40,
+			bindWindowResize: true,
+			bindContainerResize: true,
+
+			cellResizeObserver: (rowItem, columnItem) => {
+				const autoHeightColumns = ['name', 'description'];
+				return autoHeightColumns.includes(columnItem.id)
+			},
+
+			// updateGrid handler for filter and keywords
+			rowFilter: (rowItem) => {
+
+				const searchableColumns = ["name", "type", "base", "description", "filename", "save_path"];
+				const models_extensions = ['.ckpt', '.pt', '.pt2', '.bin', '.pth', '.safetensors', '.pkl', '.sft'];
+
+				let shouldShown = grid.highlightKeywordsFilter(rowItem, searchableColumns, this.keywords);
+
+				if (shouldShown) {
+					if(this.filter) {
+						if (this.filter == "in_workflow") {
+							rowItem.in_workflow = null;
+							if (Array.isArray(app.graph._nodes)) {
+								app.graph._nodes.forEach((item, i) => {
+									if (Array.isArray(item.widgets_values)) {
+										item.widgets_values.forEach((_item, i) => {
+											if (rowItem.in_workflow === null && _item !== null && models_extensions.includes("." + _item.toString().split('.').pop())) {
+												let filename = _item.match(/([^\/]+)(?=\.\w+$)/)[0];
+												if (grid.highlightKeywordsFilter(rowItem, searchableColumns, filename)) {
+													rowItem.in_workflow = "True";
+													grid.highlightKeywordsFilter(rowItem, searchableColumns, "");
+												}
+											}
+										});
+									}
+								});
+							}
+						}
+						return ((this.filter == "installed" && rowItem.installed == "True") || (this.filter == "not_installed" && rowItem.installed == "False") || (this.filter == "in_workflow" && rowItem.in_workflow == "True"));
+					}
+
+					if(this.type && rowItem.type !== this.type) {
+						return false;
+					}
+
+					if(this.base && rowItem.base !== this.base) {
+						return false;
+					}
+
+				}
+
+				return shouldShown;
+			}
+		});
+
+	}
+
+	renderGrid() {
+
+		// update theme
+		const colorPalette = this.app.ui.settings.settingsValues['Comfy.ColorPalette'];
+		Array.from(this.element.classList).forEach(cn => {
+			if (cn.startsWith("cmm-manager-")) {
+				this.element.classList.remove(cn);
+			}
+		});
+		this.element.classList.add(`cmm-manager-${colorPalette}`);
+
+		const options = {
+			theme: colorPalette === "light" ? "" : "dark"
+		};
+
+		const rows = this.modelList || [];
+
+		const columns = [{
+			id: 'id',
+			name: 'ID',
+			width: 50,
+			align: 'center'
+		}, {
+			id: 'name',
+			name: 'Name',
+			width: 200,
+			minWidth: 100,
+			maxWidth: 500,
+			classMap: 'cmm-node-name',
+			formatter: function(name, rowItem, columnItem, cellNode) {
+				return `<a href=${rowItem.reference} target="_blank"><b>${name}</b></a>`;
+			}
+		}, {
+			id: 'installed',
+			name: 'Install',
+			width: 130,
+			minWidth: 110,
+			maxWidth: 200,
+			sortable: false,
+			align: 'center',
+			formatter: (installed, rowItem, columnItem) => {
+				if (rowItem.refresh) {
+					return `<font color="red">Refresh Required</span>`;
+				}
+				if (installed === "True") {
+					return `<div class="cmm-icon-passed">${icons.passed}</div>`;
+				}
+				return `<button class="cmm-btn-install p-button p-component" mode="install">Install</button>`;
+			}
+		}, {
+			id: 'url',
+			name: '',
+			width: 50,
+			sortable: false,
+			align: 'center',
+			formatter: (url, rowItem, columnItem) => {
+				return `<a class="cmm-btn-download" tooltip="Download file" href="${url}" target="_blank">${icons.download}</a>`;
+			}
+		}, {
+			id: 'size',
+			name: 'Size',
+			width: 100,
+			formatter: (size) => {
+				if (typeof size === "number") {
+					return this.formatSize(size);
+				}
+				return size;
+			}
+		}, {
+			id: 'type',
+			name: 'Type',
+			width: 100
+		}, {
+			id: 'base',
+			name: 'Base'
+		}, {
+			id: 'description',
+			name: 'Description',
+			width: 400,
+			maxWidth: 5000,
+			classMap: 'cmm-node-desc'
+		}, {
+			id: "save_path",
+			name: 'Save Path',
+			width: 200
+		}, {
+			id: 'filename',
+			name: 'Filename',
+			width: 200
+		}];
+
+		restoreColumnWidth(gridId, columns);
+
+		this.grid.setData({
+			options,
+			rows,
+			columns
+		});
+
+		this.grid.render();
+		
+	}
+
+	updateGrid() {
+		if (this.grid) {
+			this.grid.update();
+		}
+	}
+
+	// ===========================================================================================
+
+	renderSelected() {
+		const selectedList = this.grid.getSelectedRows();
+		if (!selectedList.length) {
+			this.showSelection("");
+			this.selectedModels = [];
+			return;
+		}
+
+		this.selectedModels = selectedList;
+		this.showSelection(`<span>Selected <b>${selectedList.length}</b> models <button class="cmm-btn-install p-button p-component" mode="install">Install</button>`);
+	}
+
+	focusInstall(item) {
+		const cellNode = this.grid.getCellNode(item, "installed");
+		if (cellNode) {
+			const cellBtn = cellNode.querySelector(`button[mode="install"]`);
+			if (cellBtn) {
+				cellBtn.classList.add("cmm-btn-loading");
+				return true
+			}
+		}
+	}
+
+	async installModels(list, btn) {
+		let stats = await api.fetchApi('/manager/queue/status');
+
+		stats = await stats.json();
+		if(stats.is_processing) {
+			customAlert(`[ComfyUI-Manager] There are already tasks in progress. Please try again after it is completed. (${stats.done_count}/${stats.total_count})`);
+			return;
+		}
+
+		btn.classList.add("cmm-btn-loading");
+		this.showError("");
+
+		let needRefresh = false;
+		let errorMsg = "";
+
+		await api.fetchApi('/manager/queue/reset');
+
+		let target_items = [];
+
+		for (const item of list) {
+			this.grid.scrollRowIntoView(item);
+			target_items.push(item);
+
+			if (!this.focusInstall(item)) {
+				this.grid.onNextUpdated(() => {
+					this.focusInstall(item);
+				});
+			}
+
+			this.showStatus(`Install ${item.name} ...`);
+
+			const data = item.originalData;
+			data.ui_id = item.hash;
+
+			const res = await api.fetchApi(`/manager/queue/install_model`, {
+				method: 'POST',
+				body: JSON.stringify(data)
+			});
+
+			if (res.status != 200) {
+				errorMsg = `'${item.name}': `;
+
+				if(res.status == 403) {
+					try {
+						const data = await res.json();
+						if(data.error === 'comfyui_outdated') {
+							errorMsg += `ComfyUI version is outdated. Please update ComfyUI to use Manager normally.\n`;
+						} else {
+							errorMsg += `This action is not allowed with this security level configuration.\n`;
+						}
+					} catch {
+						errorMsg += `This action is not allowed with this security level configuration.\n`;
+					}
+				} else {
+					errorMsg += await res.text() + '\n';
+				}
+
+				break;
+			}
+		}
+
+		this.install_context = {btn: btn, targets: target_items};
+
+		if(errorMsg) {
+			this.showError(errorMsg);
+			show_message("[Installation Errors]\n"+errorMsg);
+
+			// reset
+			for(let k in target_items) {
+				const item = target_items[k];
+				this.grid.updateCell(item, "installed");
+			}
+		}
+		else {
+			await api.fetchApi('/manager/queue/start');
+			this.showStop();
+			showTerminal();
+		}
+	}
+
+	async onQueueStatus(event) {
+		let self = ModelManager.instance;
+
+		if(event.detail.status == 'in_progress' && event.detail.ui_target == 'model_manager') {
+			const hash = event.detail.target;
+
+			const item = self.grid.getRowItemBy("hash", hash);
+
+			item.refresh = true;
+			self.grid.setRowSelected(item, false);
+			item.selectable = false;
+//			self.grid.updateCell(item, "tg-column-select");
+			self.grid.updateRow(item);
+		}
+		else if(event.detail.status == 'done') {
+			self.hideStop();
+			self.onQueueCompleted(event.detail);
+		}
+	}
+
+	async onQueueCompleted(info) {
+		let result = info.model_result;
+
+		if(result.length == 0) {
+			return;
+		}
+
+		let self = ModelManager.instance;
+
+		if(!self.install_context) {
+			return;
+		}
+
+		let btn = self.install_context.btn;
+
+		self.hideLoading();
+		btn.classList.remove("cmm-btn-loading");
+
+		let errorMsg = "";
+
+		for(let hash in result){
+			let v = result[hash];
+
+			if(v != 'success')
+				errorMsg += v + '\n';
+		}
+
+		for(let k in self.install_context.targets) {
+			let item = self.install_context.targets[k];
+			self.grid.updateCell(item, "installed");
+		}
+
+		if (errorMsg) {
+			self.showError(errorMsg);
+			show_message("Installation Error:\n"+errorMsg);
+		} else {
+			self.showStatus(`Install ${result.length} models successfully`);
+		}
+
+		self.showRefresh();
+		self.showMessage(`To apply the installed model, please click the 'Refresh' button.`, "red")
+
+		infoToast('Tasks done', `[ComfyUI-Manager] All model downloading tasks in the queue have been completed.\n${info.done_count}/${info.total_count}`);
+		self.install_context = undefined;
+	}
+
+	getModelList(models) {
+		const typeMap = new Map();
+		const baseMap = new Map();
+
+		models.forEach((item, i) => {
+			const { type, base, name, reference, installed } = item;
+			item.originalData = JSON.parse(JSON.stringify(item));
+			item.size = this.sizeToBytes(item.size);
+			item.hash = md5(name + reference);
+			item.id = i + 1;
+
+			if (installed === "True") {
+				item.selectable = false;
+			}
+
+			typeMap.set(type, type);
+			baseMap.set(base, base);
+
+		});
+
+		const typeList = [];
+		typeMap.forEach(type => {
+			typeList.push({
+				label: type,
+				value: type
+			});
+		});
+		typeList.sort((a,b)=> {
+			const au = a.label.toUpperCase();
+        	const bu = b.label.toUpperCase();
+        	if (au !== bu) {
+            	return au > bu ? 1 : -1;
+			}
+			return 0;
+		});
+		this.typeList = [{
+			label: "All",
+			value: ""
+		}].concat(typeList);
+
+
+		const baseList = [];
+		baseMap.forEach(base => {
+			baseList.push({
+				label: base,
+				value: base
+			});
+		});
+		baseList.sort((a,b)=> {
+			const au = a.label.toUpperCase();
+        	const bu = b.label.toUpperCase();
+        	if (au !== bu) {
+            	return au > bu ? 1 : -1;
+			}
+			return 0;
+		});
+		this.baseList = [{
+			label: "All",
+			value: ""
+		}].concat(baseList);
+
+		return models;
+	}
+
+	// ===========================================================================================
+
+	async loadData() {
+
+		this.showLoading();
+
+		this.showStatus(`Loading external model list ...`);
+
+		const mode = manager_instance.datasrc_combo.value;
+
+		const res = await fetchData(`/externalmodel/getlist?mode=${mode}`);
+		if (res.error) {
+			this.showError("Failed to get external model list.");
+			this.hideLoading();
+			return
+		}
+		
+		const { models } = res.data;
+
+		this.modelList = this.getModelList(models);
+		// console.log("models", this.modelList);
+
+		this.updateFilter();
+		
+		this.renderGrid();
+
+		this.hideLoading();
+		
+	}
+
+	// ===========================================================================================
+
+	formatSize(v) {
+		const base = 1000;
+        const units = ['', 'K', 'M', 'G', 'T', 'P'];
+        const space = '';
+        const postfix = 'B';
+		if (v <= 0) {
+			return `0${space}${postfix}`;
+		}
+		for (let i = 0, l = units.length; i < l; i++) {
+			const min = Math.pow(base, i);
+			const max = Math.pow(base, i + 1);
+			if (v > min && v <= max) {
+				const unit = units[i];
+				if (unit) {
+					const n = v / min;
+					const nl = n.toString().split('.')[0].length;
+					const fl = Math.max(3 - nl, 1);
+					v = n.toFixed(fl);
+				}
+				v = v + space + unit + postfix;
+				break;
+			}
+		}
+		return v;
+	}
+
+	// for size sort
+	sizeToBytes(v) {
+		if (typeof v === "number") {
+			return v;
+		}
+		if (typeof v === "string") {
+			const n = parseFloat(v);
+			const unit = v.replace(/[0-9.B]+/g, "").trim().toUpperCase();
+			if (unit === "K") {
+				return n * 1000;
+			}
+			if (unit === "M") {
+				return n * 1000 * 1000;
+			}
+			if (unit === "G") {
+				return n * 1000 * 1000 * 1000;
+			}
+			if (unit === "T") {
+				return n * 1000 * 1000 * 1000 * 1000;
+			}
+		}
+		return v;
+	}
+
+	showSelection(msg) {
+		this.element.querySelector(".cmm-manager-selection").innerHTML = msg;
+	}
+
+	showError(err) {
+		this.showMessage(err, "red");
+	}
+
+	showMessage(msg, color) {
+		if (color) {
+			msg = `<font color="${color}">${msg}</font>`;
+		}
+		this.element.querySelector(".cmm-manager-message").innerHTML = msg;
+	}
+
+	showStatus(msg, color) {
+		if (color) {
+			msg = `<font color="${color}">${msg}</font>`;
+		}
+		this.element.querySelector(".cmm-manager-status").innerHTML = msg;
+	}
+
+	showLoading() {
+//		this.setDisabled(true);
+		if (this.grid) {
+			this.grid.showLoading();
+			this.grid.showMask({
+				opacity: 0.05
+			});
+		}
+	}
+
+	hideLoading() {
+//		this.setDisabled(false);
+		if (this.grid) {
+			this.grid.hideLoading();
+			this.grid.hideMask();
+		}
+	}
+
+	setDisabled(disabled) {
+		const $close = this.element.querySelector(".cmm-manager-close");
+		const $refresh = this.element.querySelector(".cmm-manager-refresh");
+		const $stop = this.element.querySelector(".cmm-manager-stop");
+
+		const list = [
+			".cmm-manager-header input",
+			".cmm-manager-header select",
+			".cmm-manager-footer button",
+			".cmm-manager-selection button"
+		].map(s => {
+			return Array.from(this.element.querySelectorAll(s));
+		})
+		.flat()
+		.filter(it => {
+			return it !== $close && it !== $refresh && it !== $stop;
+		});
+		
+		list.forEach($elem => {
+			if (disabled) {
+				$elem.setAttribute("disabled", "disabled");
+			} else {
+				$elem.removeAttribute("disabled");
+			}
+		});
+
+		Array.from(this.element.querySelectorAll(".cmm-btn-loading")).forEach($elem => {
+			$elem.classList.remove("cmm-btn-loading");
+		});
+
+	}
+
+	showRefresh() {
+		this.element.querySelector(".cmm-manager-refresh").style.display = "block";
+	}
+
+	showStop() {
+		this.element.querySelector(".cmm-manager-stop").style.display = "block";
+	}
+
+	hideStop() {
+		this.element.querySelector(".cmm-manager-stop").style.display = "none";
+	}
+
+	setKeywords(keywords = "") {
+		this.keywords = keywords;
+		this.element.querySelector(".cmm-manager-keywords").value = keywords;
+	}
+
+	show() {
+		this.element.style.display = "flex";
+		this.setKeywords("");
+		this.showSelection("");
+		this.showMessage("");
+		this.loadData();
+	}
+
+	close() {
+		this.element.style.display = "none";
+	}
+}

custom_nodes/comfyui-manager/js/node_fixer.js

@@ -0,0 +1,161 @@
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
+
+function addMenuHandler(nodeType, cb) {
+	const getOpts = nodeType.prototype.getExtraMenuOptions;
+	nodeType.prototype.getExtraMenuOptions = function () {
+		const r = getOpts.apply(this, arguments);
+		cb.apply(this, arguments);
+		return r;
+	};
+}
+
+function distance(node1, node2) {
+	let dx = (node1.pos[0] + node1.size[0]/2) - (node2.pos[0] + node2.size[0]/2);
+	let dy = (node1.pos[1] + node1.size[1]/2) - (node2.pos[1] + node2.size[1]/2);
+	return Math.sqrt(dx * dx + dy * dy);
+}
+
+function lookup_nearest_nodes(node) {
+	let nearest_distance = Infinity;
+	let nearest_node = null;
+	for(let other of app.graph._nodes) {
+		if(other === node)
+			continue;
+
+		let dist = distance(node, other);
+		if (dist < nearest_distance && dist < 1000) {
+			nearest_distance = dist;
+			nearest_node = other;
+		}
+	}
+
+	return nearest_node;
+}
+
+function lookup_nearest_inputs(node) {
+	let input_map = {};
+
+	for(let i in node.inputs) {
+		let input = node.inputs[i];
+
+		if(input.link || input_map[input.type])
+			continue;
+
+		input_map[input.type] = {distance: Infinity, input_name: input.name, node: null, slot: null};
+	}
+
+	let x = node.pos[0];
+	let y = node.pos[1] + node.size[1]/2;
+
+	for(let other of app.graph._nodes) {
+		if(other === node || !other.outputs)
+			continue;
+
+		let dx = x - (other.pos[0] + other.size[0]);
+		let dy = y - (other.pos[1] + other.size[1]/2);
+
+		if(dx < 0)
+			continue;
+
+		let dist = Math.sqrt(dx * dx + dy * dy);
+
+		for(let input_type in input_map) {
+			for(let j in other.outputs) {
+				let output = other.outputs[j];
+				if(output.type == input_type) {
+					if(input_map[input_type].distance > dist) {
+						input_map[input_type].distance = dist;
+						input_map[input_type].node = other;
+						input_map[input_type].slot = parseInt(j);
+					}
+				}
+			}
+		}
+	}
+
+	let res = {};
+	for (let i in input_map) {
+		if (input_map[i].node) {
+			res[i] = input_map[i];
+		}
+	}
+
+	return res;
+}
+
+function connect_inputs(nearest_inputs, node) {
+	for(let i in nearest_inputs) {
+		let info = nearest_inputs[i];
+		info.node.connect(info.slot, node.id, info.input_name);
+	}
+}
+
+function node_info_copy(src, dest, connect_both, copy_shape) {
+	// copy input connections
+	for(let i in src.inputs) {
+		let input = src.inputs[i];
+		if (input.widget !== undefined) {
+			const destWidget = dest.widgets.find(x => x.name === input.widget.name);
+			dest.convertWidgetToInput(destWidget);
+		}
+		if(input.link) {
+			let link = app.graph.links[input.link];
+			let src_node = app.graph.getNodeById(link.origin_id);
+			src_node.connect(link.origin_slot, dest.id, input.name);
+		}
+	}
+
+	// copy output connections
+	if(connect_both) {
+		let output_links = {};
+		for(let i in src.outputs) {
+			let output = src.outputs[i];
+			if(output.links) {
+				let links = [];
+				for(let j in output.links) {
+					links.push(app.graph.links[output.links[j]]);
+				}
+				output_links[output.name] = links;
+			}
+		}
+
+		for(let i in dest.outputs) {
+			let links = output_links[dest.outputs[i].name];
+			if(links) {
+				for(let j in links) {
+					let link = links[j];
+					let target_node = app.graph.getNodeById(link.target_id);
+					dest.connect(parseInt(i), target_node, link.target_slot);
+				}
+			}
+		}
+	}
+
+	if(copy_shape) {
+		dest.color = src.color;
+		dest.bgcolor = src.bgcolor;
+		dest.size = max(src.size, dest.size);
+	}
+
+	app.graph.afterChange();
+}
+
+app.registerExtension({
+	name: "Comfy.Manager.NodeFixer",
+	beforeRegisterNodeDef(nodeType, nodeData, app) {
+		addMenuHandler(nodeType, function (_, options) {
+			options.push({
+				content: "Fix node (recreate)",
+				callback: () => {
+					let new_node = LiteGraph.createNode(nodeType.comfyClass);
+					new_node.pos = [this.pos[0], this.pos[1]];
+					app.canvas.graph.add(new_node, false);
+					node_info_copy(this, new_node, true);
+					app.canvas.graph.remove(this);
+					requestAnimationFrame(() => app.canvas.setDirty(true, true))
+				},
+			});
+		});
+	}
+});

custom_nodes/comfyui-manager/js/popover-helper.js

@@ -0,0 +1,619 @@
+const hasOwn = function(obj, key) {
+    return Object.prototype.hasOwnProperty.call(obj, key);
+};
+
+const isNum = function(num) {
+    if (typeof num !== 'number' || isNaN(num)) {
+        return false;
+    }
+    const isInvalid = function(n) {
+        if (n === Number.MAX_VALUE || n === Number.MIN_VALUE || n === Number.NEGATIVE_INFINITY || n === Number.POSITIVE_INFINITY) {
+            return true;
+        }
+        return false;
+    };
+    if (isInvalid(num)) {
+        return false;
+    }
+    return true;
+};
+
+const toNum = (num) => {
+    if (typeof (num) !== 'number') {
+        num = parseFloat(num);
+    }
+    if (isNaN(num)) {
+        num = 0;
+    }
+    num = Math.round(num);
+    return num;
+};
+
+const clamp = function(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+};
+
+const isWindow = (obj) => {
+    return Boolean(obj && obj === obj.window);
+};
+
+const isDocument = (obj) => {
+    return Boolean(obj && obj.nodeType === 9);
+};
+
+const isElement = (obj) => {
+    return Boolean(obj && obj.nodeType === 1);
+};
+
+// ===========================================================================================
+
+export const toRect = (obj) => {
+    if (obj) {
+        return {
+            left: toNum(obj.left || obj.x),
+            top: toNum(obj.top || obj.y),
+            width: toNum(obj.width),
+            height: toNum(obj.height)
+        };
+    }
+    return {
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0
+    };
+};
+
+export const getElement = (selector) => {
+    if (typeof selector === 'string' && selector) {
+        if (selector.startsWith('#')) {
+            return document.getElementById(selector.slice(1));
+        }
+        return document.querySelector(selector);
+    }
+
+    if (isDocument(selector)) {
+        return selector.body;
+    }
+    if (isElement(selector)) {
+        return selector;
+    }
+};
+
+export const getRect = (target, fixed) => {
+    if (!target) {
+        return toRect();
+    }
+
+    if (isWindow(target)) {
+        return {
+            left: 0,
+            top: 0,
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+    }
+
+    const elem = getElement(target);
+    if (!elem) {
+        return toRect(target);
+    }
+
+    const br = elem.getBoundingClientRect();
+    const rect = toRect(br);
+
+    // fix offset
+    if (!fixed) {
+        rect.left += window.scrollX;
+        rect.top += window.scrollY;
+    }
+
+    rect.width = elem.offsetWidth;
+    rect.height = elem.offsetHeight;
+
+    return rect;
+};
+
+// ===========================================================================================
+
+const calculators = {
+
+    bottom: (info, containerRect, targetRect) => {
+        info.space = containerRect.top + containerRect.height - targetRect.top - targetRect.height - info.height;
+        info.top = targetRect.top + targetRect.height;
+        info.left = Math.round(targetRect.left + targetRect.width * 0.5 - info.width * 0.5);
+    },
+
+    top: (info, containerRect, targetRect) => {
+        info.space = targetRect.top - info.height - containerRect.top;
+        info.top = targetRect.top - info.height;
+        info.left = Math.round(targetRect.left + targetRect.width * 0.5 - info.width * 0.5);
+    },
+
+    right: (info, containerRect, targetRect) => {
+        info.space = containerRect.left + containerRect.width - targetRect.left - targetRect.width - info.width;
+        info.top = Math.round(targetRect.top + targetRect.height * 0.5 - info.height * 0.5);
+        info.left = targetRect.left + targetRect.width;
+    },
+
+    left: (info, containerRect, targetRect) => {
+        info.space = targetRect.left - info.width - containerRect.left;
+        info.top = Math.round(targetRect.top + targetRect.height * 0.5 - info.height * 0.5);
+        info.left = targetRect.left - info.width;
+    }
+};
+
+// with order
+export const getDefaultPositions = () => {
+    return Object.keys(calculators);
+};
+
+const calculateSpace = (info, containerRect, targetRect) => {
+    const calculator = calculators[info.position];
+    calculator(info, containerRect, targetRect);
+    if (info.space >= 0) {
+        info.passed += 1;
+    }
+};
+
+// ===========================================================================================
+
+const calculateAlignOffset = (info, containerRect, targetRect, alignType, sizeType) => {
+
+    const popoverStart = info[alignType];
+    const popoverSize = info[sizeType];
+
+    const containerStart = containerRect[alignType];
+    const containerSize = containerRect[sizeType];
+
+    const targetStart = targetRect[alignType];
+    const targetSize = targetRect[sizeType];
+
+    const targetCenter = targetStart + targetSize * 0.5;
+
+    // size overflow
+    if (popoverSize > containerSize) {
+        const overflow = (popoverSize - containerSize) * 0.5;
+        info[alignType] = containerStart - overflow;
+        info.offset = targetCenter - containerStart + overflow;
+        return;
+    }
+
+    const space1 = popoverStart - containerStart;
+    const space2 = (containerStart + containerSize) - (popoverStart + popoverSize);
+
+    // both side passed, default to center
+    if (space1 >= 0 && space2 >= 0) {
+        if (info.passed) {
+            info.passed += 2;
+        }
+        info.offset = popoverSize * 0.5;
+        return;
+    }
+
+    // one side passed
+    if (info.passed) {
+        info.passed += 1;
+    }
+
+    if (space1 < 0) {
+        const min = containerStart;
+        info[alignType] = min;
+        info.offset = targetCenter - min;
+        return;
+    }
+
+    // space2 < 0
+    const max = containerStart + containerSize - popoverSize;
+    info[alignType] = max;
+    info.offset = targetCenter - max;
+
+};
+
+const calculateHV = (info, containerRect) => {
+    if (['top', 'bottom'].includes(info.position)) {
+        info.top = clamp(info.top, containerRect.top, containerRect.top + containerRect.height - info.height);
+        return ['left', 'width'];
+    }
+    info.left = clamp(info.left, containerRect.left, containerRect.left + containerRect.width - info.width);
+    return ['top', 'height'];
+};
+
+const calculateOffset = (info, containerRect, targetRect) => {
+
+    const [alignType, sizeType] = calculateHV(info, containerRect);
+
+    calculateAlignOffset(info, containerRect, targetRect, alignType, sizeType);
+
+    info.offset = clamp(info.offset, 0, info[sizeType]);
+
+};
+
+// ===========================================================================================
+
+const calculateDistance = (info, previousPositionInfo) => {
+    if (!previousPositionInfo) {
+        return;
+    }
+    // no change if position no change with previous
+    if (info.position === previousPositionInfo.position) {
+        return;
+    }
+    const ax = info.left + info.width * 0.5;
+    const ay = info.top + info.height * 0.5;
+    const bx = previousPositionInfo.left + previousPositionInfo.width * 0.5;
+    const by = previousPositionInfo.top + previousPositionInfo.height * 0.5;
+    const dx = Math.abs(ax - bx);
+    const dy = Math.abs(ay - by);
+    info.distance = Math.round(Math.sqrt(dx * dx + dy * dy));
+};
+
+// ===========================================================================================
+
+const calculatePositionInfo = (info, containerRect, targetRect, previousPositionInfo) => {
+    calculateSpace(info, containerRect, targetRect);
+    calculateOffset(info, containerRect, targetRect);
+    calculateDistance(info, previousPositionInfo);
+};
+
+// ===========================================================================================
+
+const calculateBestPosition = (containerRect, targetRect, infoMap, withOrder, previousPositionInfo) => {
+
+    // position space: +1
+    // align space:
+    //    two side passed: +2
+    //    one side passed: +1
+
+    const safePassed = 3;
+
+    if (previousPositionInfo) {
+        const prevInfo = infoMap[previousPositionInfo.position];
+        if (prevInfo) {
+            calculatePositionInfo(prevInfo, containerRect, targetRect);
+            if (prevInfo.passed >= safePassed) {
+                return prevInfo;
+            }
+            prevInfo.calculated = true;
+        }
+    }
+
+    const positionList = [];
+    Object.values(infoMap).forEach((info) => {
+        if (!info.calculated) {
+            calculatePositionInfo(info, containerRect, targetRect, previousPositionInfo);
+        }
+        positionList.push(info);
+    });
+
+    positionList.sort((a, b) => {
+        if (a.passed !== b.passed) {
+            return b.passed - a.passed;
+        }
+
+        if (withOrder && a.passed >= safePassed && b.passed >= safePassed) {
+            return a.index - b.index;
+        }
+
+        if (a.space !== b.space) {
+            return b.space - a.space;
+        }
+
+        return a.index - b.index;
+    });
+
+    // logTable(positionList);
+
+    return positionList[0];
+};
+
+// const logTable = (() => {
+//     let time_id;
+//     return (info) => {
+//         clearTimeout(time_id);
+//         time_id = setTimeout(() => {
+//             console.table(info);
+//         }, 10);
+//     };
+// })();
+
+// ===========================================================================================
+
+const getAllowPositions = (positions, defaultAllowPositions) => {
+    if (!positions) {
+        return;
+    }
+    if (Array.isArray(positions)) {
+        positions = positions.join(',');
+    }
+    positions = String(positions).split(',').map((it) => it.trim().toLowerCase()).filter((it) => it);
+    positions = positions.filter((it) => defaultAllowPositions.includes(it));
+    if (!positions.length) {
+        return;
+    }
+    return positions;
+};
+
+const isPositionChanged = (info, previousPositionInfo) => {
+    if (!previousPositionInfo) {
+        return true;
+    }
+
+    if (info.left !== previousPositionInfo.left) {
+        return true;
+    }
+
+    if (info.top !== previousPositionInfo.top) {
+        return true;
+    }
+
+    return false;
+};
+
+// ===========================================================================================
+
+// const log = (name, time) => {
+//     if (time > 0.1) {
+//         console.log(name, time);
+//     }
+// };
+
+export const getBestPosition = (containerRect, targetRect, popoverRect, positions, previousPositionInfo) => {
+
+    const defaultAllowPositions = getDefaultPositions();
+    let withOrder = true;
+    let allowPositions = getAllowPositions(positions, defaultAllowPositions);
+    if (!allowPositions) {
+        allowPositions = defaultAllowPositions;
+        withOrder = false;
+    }
+
+    // console.log('withOrder', withOrder);
+
+    // const start_time = performance.now();
+
+    const infoMap = {};
+    allowPositions.forEach((k, i) => {
+        infoMap[k] = {
+            position: k,
+            index: i,
+
+            top: 0,
+            left: 0,
+            width: popoverRect.width,
+            height: popoverRect.height,
+
+            space: 0,
+
+            offset: 0,
+            passed: 0,
+
+            distance: 0
+        };
+    });
+
+    // log('infoMap', performance.now() - start_time);
+
+
+    const bestPosition = calculateBestPosition(containerRect, targetRect, infoMap, withOrder, previousPositionInfo);
+
+    // check left/top
+    bestPosition.changed = isPositionChanged(bestPosition, previousPositionInfo);
+
+    return bestPosition;
+};
+
+// ===========================================================================================
+
+const getTemplatePath = (width, height, arrowOffset, arrowSize, borderRadius) => {
+    const p = (px, py) => {
+        return [px, py].join(',');
+    };
+
+    const px = function(num, alignEnd) {
+        const floor = Math.floor(num);
+        let n = num < floor + 0.5 ? floor + 0.5 : floor + 1.5;
+        if (alignEnd) {
+            n -= 1;
+        }
+        return n;
+    };
+
+    const pxe = function(num) {
+        return px(num, true);
+    };
+
+    const ls = [];
+
+    const innerLeft = px(arrowSize);
+    const innerRight = pxe(width - arrowSize);
+    arrowOffset = clamp(arrowOffset, innerLeft, innerRight);
+
+    const innerTop = px(arrowSize);
+    const innerBottom = pxe(height - arrowSize);
+
+    const startPoint = p(innerLeft, innerTop + borderRadius);
+    const arrowPoint = p(arrowOffset, 1);
+
+    const LT = p(innerLeft, innerTop);
+    const RT = p(innerRight, innerTop);
+
+    const AOT = p(arrowOffset - arrowSize, innerTop);
+    const RRT = p(innerRight - borderRadius, innerTop);
+
+    ls.push(`M${startPoint}`);
+    ls.push(`V${innerBottom - borderRadius}`);
+    ls.push(`Q${p(innerLeft, innerBottom)} ${p(innerLeft + borderRadius, innerBottom)}`);
+    ls.push(`H${innerRight - borderRadius}`);
+    ls.push(`Q${p(innerRight, innerBottom)} ${p(innerRight, innerBottom - borderRadius)}`);
+    ls.push(`V${innerTop + borderRadius}`);
+
+    if (arrowOffset < innerLeft + arrowSize + borderRadius) {
+        ls.push(`Q${RT} ${RRT}`);
+        ls.push(`H${arrowOffset + arrowSize}`);
+        ls.push(`L${arrowPoint}`);
+        if (arrowOffset < innerLeft + arrowSize) {
+            ls.push(`L${LT}`);
+            ls.push(`L${startPoint}`);
+        } else {
+            ls.push(`L${AOT}`);
+            ls.push(`Q${LT} ${startPoint}`);
+        }
+    } else if (arrowOffset > innerRight - arrowSize - borderRadius) {
+        if (arrowOffset > innerRight - arrowSize) {
+            ls.push(`L${RT}`);
+        } else {
+            ls.push(`Q${RT} ${p(arrowOffset + arrowSize, innerTop)}`);
+        }
+        ls.push(`L${arrowPoint}`);
+        ls.push(`L${AOT}`);
+        ls.push(`H${innerLeft + borderRadius}`);
+        ls.push(`Q${LT} ${startPoint}`);
+    } else {
+        ls.push(`Q${RT} ${RRT}`);
+        ls.push(`H${arrowOffset + arrowSize}`);
+        ls.push(`L${arrowPoint}`);
+        ls.push(`L${AOT}`);
+        ls.push(`H${innerLeft + borderRadius}`);
+        ls.push(`Q${LT} ${startPoint}`);
+    }
+    return ls.join('');
+};
+
+const getPathData = function(position, width, height, arrowOffset, arrowSize, borderRadius) {
+
+    const handlers = {
+
+        bottom: () => {
+            const d = getTemplatePath(width, height, arrowOffset, arrowSize, borderRadius);
+            return {
+                d,
+                transform: ''
+            };
+        },
+
+        top: () => {
+            const d = getTemplatePath(width, height, width - arrowOffset, arrowSize, borderRadius);
+            return {
+                d,
+                transform: `rotate(180,${width * 0.5},${height * 0.5})`
+            };
+        },
+
+        left: () => {
+            const d = getTemplatePath(height, width, arrowOffset, arrowSize, borderRadius);
+            const x = (width - height) * 0.5;
+            const y = (height - width) * 0.5;
+            return {
+                d,
+                transform: `translate(${x} ${y}) rotate(90,${height * 0.5},${width * 0.5})`
+            };
+        },
+
+        right: () => {
+            const d = getTemplatePath(height, width, height - arrowOffset, arrowSize, borderRadius);
+            const x = (width - height) * 0.5;
+            const y = (height - width) * 0.5;
+            return {
+                d,
+                transform: `translate(${x} ${y}) rotate(-90,${height * 0.5},${width * 0.5})`
+            };
+        }
+    };
+
+    return handlers[position]();
+};
+
+// ===========================================================================================
+
+// position style cache
+const styleCache = {
+    // position: '',
+    // top: {},
+    // bottom: {},
+    // left: {},
+    // right: {}
+};
+
+export const getPositionStyle = (info, options = {}) => {
+
+    const o = {
+        bgColor: '#fff',
+        borderColor: '#ccc',
+        borderRadius: 5,
+        arrowSize: 10
+    };
+    Object.keys(o).forEach((k) => {
+
+        if (hasOwn(options, k)) {
+            const d = o[k];
+            const v = options[k];
+
+            if (typeof d === 'string') {
+                // string
+                if (typeof v === 'string' && v) {
+                    o[k] = v;
+                }
+            } else {
+                // number
+                if (isNum(v) && v >= 0) {
+                    o[k] = v;
+                }
+
+            }
+
+        }
+    });
+
+    const key = [
+        info.width,
+        info.height,
+        info.offset,
+        o.arrowSize,
+        o.borderRadius,
+        o.bgColor,
+        o.borderColor
+    ].join('-');
+
+    const positionCache = styleCache[info.position];
+    if (positionCache && key === positionCache.key) {
+        const st = positionCache.style;
+        st.changed = styleCache.position !== info.position;
+        styleCache.position = info.position;
+        return st;
+    }
+
+    // console.log(options);
+
+    const data = getPathData(info.position, info.width, info.height, info.offset, o.arrowSize, o.borderRadius);
+    // console.log(data);
+
+    const viewBox = [0, 0, info.width, info.height].join(' ');
+    const svg = [
+        `<svg viewBox="${viewBox}" xmlns="http://www.w3.org/2000/svg">`,
+        `<path d="${data.d}" fill="${o.bgColor}" stroke="${o.borderColor}" transform="${data.transform}" />`,
+        '</svg>'
+    ].join('');
+
+    // console.log(svg);
+    const backgroundImage = `url("data:image/svg+xml;charset=utf8,${encodeURIComponent(svg)}")`;
+
+    const background = `${backgroundImage} center no-repeat`;
+
+    const padding = `${o.arrowSize + o.borderRadius}px`;
+
+    const style = {
+        background,
+        backgroundImage,
+        padding,
+        changed: true
+    };
+
+    styleCache.position = info.position;
+    styleCache[info.position] = {
+        key,
+        style
+    };
+
+    return style;
+};

custom_nodes/comfyui-manager/js/snapshot.css

@@ -0,0 +1,65 @@
+.snapshot-manager {
+	--grid-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+	z-index: 1099;
+	width: 80vw;
+	height: 75vh;
+	min-height: 30em;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	color: var(--fg-color);
+	font-family: arial, sans-serif;
+	text-underline-offset: 3px;
+	outline: none;
+	margin: calc(var(--spacing)*2);
+}
+
+.snapshot-manager button {
+	width: auto;
+	position: relative;
+	overflow: hidden;
+	font-size: 16px;
+	color: var(--input-text);
+	background-color: var(--comfy-input-bg);
+	border-color: var(--border-color);
+	margin: 0;
+	min-width: 100px;
+	padding: 4px 8px;
+}
+
+.snapshot-manager .snapshot-restore-btn {
+	background-color: #00158f !important;
+	border-color: #2025b9 !important;
+	color: white !important;
+}
+
+.snapshot-manager .snapshot-remove-btn  {
+	background-color: #970000 !important;
+	border-color: #be2127 !important;
+	color: white !important;
+}
+
+.snapshot-manager button:hover {
+	filter: brightness(125%);
+}
+
+.snapshot-manager .data-btns {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--spacing)*2);
+	padding: calc(var(--spacing)*2);
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+}
+
+.snapshot-footer {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	align-items: center;
+}
+
+.snapshot-manager .cn-flex-auto {
+	flex: auto;
+}

custom_nodes/comfyui-manager/js/snapshot.js

@@ -0,0 +1,311 @@
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js"
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+import { manager_instance, rebootAPI, show_message, handle403Response, loadCss } from  "./common.js";
+import { buildGuiFrame } from "./comfyui-gui-builder.js";
+
+loadCss("./snapshot.css");
+
+async function restore_snapshot(target) {
+	if(SnapshotManager.instance) {
+		try {
+			const response = await api.fetchApi(`/snapshot/restore?target=${target}`, { cache: "no-store" });
+
+			if(response.status == 403) {
+				await handle403Response(response);
+				return false;
+			}
+
+			if(response.status == 400) {
+				show_message(`Restore snapshot failed: ${target.title} / ${exception}`);
+			}
+
+			app.ui.dialog.close();
+			return true;
+		}
+		catch(exception) {
+			show_message(`Restore snapshot failed: ${target.title} / ${exception}`);
+			return false;
+		}
+		finally {
+			await SnapshotManager.instance.invalidateControl();
+			SnapshotManager.instance.updateMessage("<BR>To apply the snapshot, please <button id='cm-reboot-button2' class='p-button p-component'>RESTART</button> ComfyUI. And refresh browser.", 'cm-reboot-button2');
+		}
+	}
+}
+
+async function remove_snapshot(target) {
+	if(SnapshotManager.instance) {
+		try {
+			const response = await api.fetchApi(`/snapshot/remove?target=${target}`, { cache: "no-store" });
+
+			if(response.status == 403) {
+				await handle403Response(response);
+				return false;
+			}
+
+			if(response.status == 400) {
+				show_message(`Remove snapshot failed: ${target.title} / ${exception}`);
+			}
+
+			app.ui.dialog.close();
+			return true;
+		}
+		catch(exception) {
+			show_message(`Restore snapshot failed: ${target.title} / ${exception}`);
+			return false;
+		}
+		finally {
+			await SnapshotManager.instance.invalidateControl();
+		}
+	}
+}
+
+async function save_current_snapshot() {
+	try {
+		const response = await api.fetchApi('/snapshot/save', { cache: "no-store" });
+		app.ui.dialog.close();
+		return true;
+	}
+	catch(exception) {
+		show_message(`Backup snapshot failed: ${exception}`);
+		return false;
+	}
+	finally {
+		await SnapshotManager.instance.invalidateControl();
+		SnapshotManager.instance.updateMessage("<BR>Current snapshot saved.");
+	}
+}
+
+async function getSnapshotList() {
+	const response = await api.fetchApi(`/snapshot/getlist`);
+	const data = await response.json();
+	return data;
+}
+
+export class SnapshotManager extends ComfyDialog {
+	static instance = null;
+
+	restore_buttons = [];
+	message_box = null;
+	data = null;
+
+	content = $el("div.snapshot-manager");
+
+	clear() {
+		this.restore_buttons = [];
+		this.message_box = null;
+		this.data = null;
+	}
+
+	constructor(app, manager_dialog) {
+		super();
+		// this.manager_dialog = manager_dialog;
+		this.search_keyword = '';
+
+		const frame = buildGuiFrame(
+			'snapshot-manager-dialog', // dialog id
+			'Snapshot Manager', // title
+			'i.mdi.mdi-puzzle', // icon class
+			this.content, // dialog content element
+			this
+		);	// send this so we can attach close functions
+
+		this.element = frame;
+	}
+
+	async remove_item() {
+		caller.disableButtons();
+
+		await caller.invalidateControl();
+	}
+
+	createControls() {
+		return [
+			$el("button.p-button.p-component", {
+				type: "button",
+				textContent: "Close",
+				onclick: () => { this.close(); }
+				})
+		];
+	}
+
+	startRestore(target) {
+		const self = SnapshotManager.instance;
+
+		self.updateMessage(`<BR><font color="green">Restore snapshot '${target.name}'</font>`);
+
+		for(let i in self.restore_buttons) {
+			self.restore_buttons[i].disabled = true;
+			self.restore_buttons[i].style.backgroundColor = 'gray';
+		}
+	}
+
+	async invalidateControl() {
+		this.clear();
+		this.data = (await getSnapshotList()).items;
+
+		while (this.content.children.length) {
+			this.content.removeChild(this.content.children[0]);
+		}
+
+		await this.createGrid();
+		await this.createBottomControls();
+	}
+
+	updateMessage(msg, btn_id) {
+		this.message_box.innerHTML = msg;
+		if(btn_id) {
+			const rebootButton = document.getElementById(btn_id);
+			const self = this;
+			rebootButton.onclick = async function() {
+				if(await rebootAPI()) {
+					self.close();
+					self.manager_dialog.close();
+				}
+			};
+		}
+	}
+
+	async createGrid(models_json) {
+		var grid = document.createElement('table');
+		grid.setAttribute('id', 'snapshot-list-grid');
+
+		var thead = document.createElement('thead');
+		var tbody = document.createElement('tbody');
+
+		var headerRow = document.createElement('tr');
+		thead.style.position = "sticky";
+		thead.style.top = "0px";
+		thead.style.borderCollapse = "collapse";
+		thead.style.tableLayout = "fixed";
+
+		var header1 = document.createElement('th');
+		header1.innerHTML = '&nbsp;&nbsp;ID&nbsp;&nbsp;';
+		header1.style.width = "20px";
+		var header2 = document.createElement('th');
+		header2.innerHTML = 'Datetime';
+		header2.style.width = "100%";
+		var header_button = document.createElement('th');
+		header_button.innerHTML = 'Action';
+		header_button.style.width = "100px";
+
+		thead.appendChild(headerRow);
+		headerRow.appendChild(header1);
+		headerRow.appendChild(header2);
+		headerRow.appendChild(header_button);
+
+		headerRow.style.backgroundColor = "Black";
+		headerRow.style.color = "White";
+		headerRow.style.textAlign = "center";
+		headerRow.style.width = "100%";
+		headerRow.style.padding = "0";
+
+		grid.appendChild(thead);
+		grid.appendChild(tbody);
+
+		this.grid_rows = {};
+
+		if(this.data)
+			for (var i = 0; i < this.data.length; i++) {
+				const data = this.data[i];
+				var dataRow = document.createElement('tr');
+				var data1 = document.createElement('td');
+				data1.style.textAlign = "center";
+				data1.innerHTML = i+1;
+				var data2 = document.createElement('td');
+				data2.innerHTML = `&nbsp;${data}`;
+				var data_button = document.createElement('td');
+				data_button.style.textAlign = "center";
+				data_button.className = "data-btns";
+
+				var restoreBtn = document.createElement('button');
+				restoreBtn.className = "snapshot-restore-btn p-button p-component";
+				restoreBtn.innerHTML = 'Restore';
+				restoreBtn.style.width = "100px";
+
+				restoreBtn.addEventListener('click', function() {
+					restore_snapshot(data);
+				});
+
+				var removeBtn = document.createElement('button');
+				removeBtn.className = "snapshot-remove-btn p-button p-component";
+				removeBtn.innerHTML = 'Remove';
+				removeBtn.style.width = "100px";
+
+				removeBtn.addEventListener('click', function() {
+					remove_snapshot(data);
+				});
+
+				data_button.appendChild(restoreBtn);
+				data_button.appendChild(removeBtn);
+
+				dataRow.style.backgroundColor = "var(--bg-color)";
+				dataRow.style.color = "var(--fg-color)";
+				dataRow.style.textAlign = "left";
+
+				dataRow.appendChild(data1);
+				dataRow.appendChild(data2);
+				dataRow.appendChild(data_button);
+				tbody.appendChild(dataRow);
+
+				this.grid_rows[i] = {data:data, control:dataRow};
+			}
+
+		let self = this;
+		const panel = document.createElement('div');
+		panel.style.width = "100%";
+		panel.style.height = "100%";
+		panel.appendChild(grid);
+
+		function handleResize() {
+		  const parentHeight = self.element.clientHeight;
+		  const gridHeight = parentHeight - 200;
+
+		//   grid.style.height = gridHeight + "px";
+		}
+		window.addEventListener("resize", handleResize);
+
+		grid.style.position = "relative";
+		grid.style.display = "inline-block";
+		grid.style.width = "100%";
+		grid.style.height = "100%";
+		grid.style.overflowY = "scroll";
+
+		this.content.appendChild(panel);
+
+		handleResize();
+	}
+
+	async createBottomControls() {
+		var save_button = document.createElement("button");
+		save_button.className = "p-button p-component";
+		save_button.innerHTML = "Save snapshot";
+		save_button.onclick = () => { save_current_snapshot(); }
+		save_button.style.horizontalAlign = "right";
+		save_button.style.width = "170px";
+
+		this.message_box = $el('div', {id:'custom-download-message'}, [$el('br'), '']);
+		this.message_box.style.height = '60px';
+		this.message_box.style.verticalAlign = 'middle';
+
+		const footer = $el("div.snapshot-footer");
+		const spacer = $el("div.cn-flex-auto");
+		footer.appendChild(spacer);
+		footer.appendChild(save_button);
+
+		this.content.appendChild(this.message_box);
+		this.content.appendChild(footer);
+	}
+
+	async show() {
+		try {
+			this.invalidateControl();
+			this.element.style.display = "flex";
+			this.element.style.zIndex = 1099;
+		}
+		catch(exception) {
+			app.ui.dialog.show(`Failed to get external model list. / ${exception}`);
+		}
+	}
+}

custom_nodes/comfyui-manager/js/workflow-metadata.js

@@ -0,0 +1,84 @@
+/**
+ * Attaches metadata to the workflow on save
+ * - custom node pack version to all custom nodes used in the workflow
+ *
+ * Example metadata:
+ * "nodes": {
+ *   "1": {
+ *     type: "CheckpointLoaderSimple",
+ *     ...
+ *     properties: {
+ *       cnr_id: "comfy-core",
+ *       version: "0.3.8",
+ *     },
+ *   },
+ * }
+ *
+ * @typedef {Object} NodeInfo
+ * @property {string} ver - Version (git hash or semantic version)
+ * @property {string} cnr_id - ComfyRegistry node ID
+ * @property {boolean} enabled - Whether the node is enabled
+ */
+
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
+
+class WorkflowMetadataExtension {
+  constructor() {
+    this.name = "Comfy.CustomNodesManager.WorkflowMetadata";
+    this.installedNodes = {};
+    this.comfyCoreVersion = null;
+  }
+
+  /**
+   * Get the installed nodes info
+   * @returns {Promise<Record<string, NodeInfo>>} The mapping from node name to its info.
+   * ver can either be a git commit hash or a semantic version such as "1.0.0"
+   * cnr_id is the id of the node in the ComfyRegistry
+   * enabled is true if the node is enabled, false if it is disabled
+   */
+  async getInstalledNodes() {
+    const res = await api.fetchApi("/customnode/installed");
+    return await res.json();
+  }
+
+  async init() {
+    this.installedNodes = await this.getInstalledNodes();
+    this.comfyCoreVersion = (await api.getSystemStats()).system.comfyui_version;
+  }
+
+  /**
+   * Called when any node is created
+   * @param {LGraphNode} node The newly created node
+   */
+  nodeCreated(node) {
+    try {
+      // nodeData doesn't exist if node is missing or node is frontend only node
+      if (!node?.constructor?.nodeData?.python_module) return;
+
+      const nodeProperties = (node.properties ??= {});
+      const modules = node.constructor.nodeData.python_module.split(".");
+      const moduleType = modules[0];
+
+      if (moduleType === "custom_nodes") {
+        const nodePackageName = modules[1];
+        const { cnr_id, aux_id, ver } =
+          this.installedNodes[nodePackageName] ??
+          this.installedNodes[nodePackageName.toLowerCase()] ??
+          {};
+
+        if (cnr_id === "comfy-core") return; // don't allow hijacking comfy-core name
+        if (cnr_id) nodeProperties.cnr_id = cnr_id;
+        else nodeProperties.aux_id = aux_id;
+        if (ver) nodeProperties.ver = ver.trim();
+      } else if (["nodes", "comfy_extras", "comfy_api_nodes"].includes(moduleType)) {
+        nodeProperties.cnr_id = "comfy-core";
+        nodeProperties.ver = this.comfyCoreVersion;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}
+
+app.registerExtension(new WorkflowMetadataExtension());