wip

__init__.py

@@ -531,7 +531,6 @@ def check_custom_nodes_installed(json_obj, do_fetch=False, do_update_check=True,
     elif do_update_check:
         print(f"\x1b[2K\rUpdate check done.")
 
-
 @server.PromptServer.instance.routes.get("/customnode/getmappings")
 async def fetch_customnode_mappings(request):
     if request.rel_url.query["mode"] == "local":
@@ -1196,6 +1195,14 @@ async def channel_url_list(request):
 
     return web.Response(status=200)
 
+
+@server.PromptServer.instance.routes.post("/manager/share")
+async def share_art(request):
+    # get json data
+    json_data = await request.json()
+    print(json_data)
+    return web.Response(status=200)
+
 WEB_DIRECTORY = "js"
 NODE_CLASS_MAPPINGS = {}
 __all__ = ['NODE_CLASS_MAPPINGS']

js/comfyui-manager.js

@@ -1986,6 +1986,189 @@ class ManagerMenuDialog extends ComfyDialog {
 	}
 }
 
+class ShareDialog extends ComfyDialog {
+	static instance = null;
+
+	createButtons() {
+		this.is_nsfw_checkbox = $el("input", { type: 'checkbox', id: "is_nsfw" }, [])
+		const is_nsfw_checkbox_text = $el("label", {}, [" Is this NSFW?"])
+		this.is_nsfw_checkbox.style.color = "var(--fg-color)";
+		this.is_nsfw_checkbox.checked = false;
+
+		this.credits_input = $el("input", {
+			type: "text",
+			placeholder: "This will be used to give you credits",
+			required: false,
+		}, []);
+
+		this.title_input = $el("input", {
+			type: "text",
+			// placeholder: "ex: Zombie animation - AnimateDiff",
+			required: false,
+		}, []);
+
+		this.description_input = $el("textarea", {
+			// placeholder: "ex: ",
+			required: false,
+		}, []);
+
+		this.share_button = $el("button", {
+			type: "button",
+			textContent: "Share",
+		}, []);
+
+		this.final_message = $el("div", {}, []);
+
+		this.share_button.onclick = async () => {
+			// alert("Title: " + this.title_input.value + "\nDescription: " + this.description_input.value + "\nCredits: " + this.credits_input.value + "\nNSFW: " + this.is_nsfw_checkbox.checked);
+			const prompt = await app.graphToPrompt();
+			console.log(prompt);
+
+			const nodes = app.graph._nodes;
+
+			const potential_outputs = [];
+			const potential_output_nodes = [];
+
+			// iterate over the array of nodes to find the ones that are marked as SaveImage
+			// TODO: Add support for AnimateDiffCombine, etc. nodes that save videos/gifs, etc.
+			for (let i = 0; i < nodes.length; i++) {
+				const node = nodes[i];
+				if (node.type !== "SaveImage") {
+					continue;
+				}
+
+				if (node.type === "SaveImage") {
+					potential_output_nodes.push(node);
+
+					// check if node has an 'images' array property
+					if (node.hasOwnProperty("images") && Array.isArray(node.images)) {
+						// iterate over the images array and add each image to the potential_outputs array
+						for (let j = 0; j < node.images.length; j++) {
+							potential_outputs.push({ "type": "image", "image": node.images[j] });
+						}
+					}
+				}
+			}
+
+			if (potential_outputs.length === 0) {
+				if (potential_output_nodes.length === 0) {
+					// todo: add support for other output node types (animatediff combine, etc.)
+					alert("No SaveImage node found. To share this workflow, please run a SaveImage node to your graph and re-run your prompt.");
+				} else {
+					alert("To share this, please run a prompt first and then click 'Share'.");
+				}
+				this.close();
+				return;
+			}
+
+			// Change the text of the share button to "Sharing..." to indicate that the share process has started
+			this.share_button.textContent = "Sharing...";
+
+			const response = await api.fetchApi(`/manager/share`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					credits: this.credits_input.value,
+					title: this.title_input.value,
+					description: this.description_input.value,
+					is_nsfw: this.is_nsfw_checkbox.checked,
+					prompt,
+					potential_outputs,
+					potential_output_nodes
+				})
+			});
+
+			if (response.status != 200) {
+				alert("Failed to share your art. Please try again.");
+				this.close();
+				return;
+			}
+
+			this.final_message.innerHTML = "Your art has been shared: <a href='" + response.url + "' target='_blank'>" + response.url + "</a>";
+			this.final_message.style.color = "green";
+
+			// hide the share button
+			this.share_button.style.display = "none";
+			
+			// this.close();
+		}
+
+
+		const res =
+			[
+				$el("tr.td", { width: "100%" }, [
+					$el("font", { size: 6, color: "white" }, [`Share your art`]),
+					$el("div", { size: 3, color: "white" }, [
+						$el("a", {
+							href: `https://comfyworkflows.com/?ref=cms`,
+							target: `_blank`,
+							color: "white",
+							// style: `color:white;`
+						}, `comfyworkflows.com`)
+					])
+				]),
+				$el("p", { size: 4, color: "white" }, [`Get a public link for this art & workflow.`]),
+				// $el("br", {}, []),
+
+				$el("h2", {
+					textContent: "Your name/username (optional)",
+					size: 3,
+					color: "white"
+				}, []),
+				this.credits_input,
+				$el("br", {}, []),
+
+				$el("h2", {
+					textContent: "Title (optional)",
+					size: 3,
+					color: "white"
+				}, []),
+				this.title_input,
+				$el("br", {}, []),
+
+				$el("h2", {
+					textContent: "Description (optional)",
+					size: 3,
+					color: "white"
+				}, []),
+				this.description_input,
+				$el("br", {}, []),
+
+				$el("div", {}, [this.is_nsfw_checkbox, is_nsfw_checkbox_text]),
+				this.final_message,
+
+				$el("br", {}, []),
+				this.share_button,
+
+				$el("button", {
+					type: "button",
+					textContent: "Close",
+					onclick: () => this.close()
+				}),
+				$el("br", {}, []),
+			];
+
+		res[0].style.padding = "10px 10px 10px 10px";
+		res[0].style.backgroundColor = "black"; //"linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)";
+		res[0].style.textAlign = "center";
+		res[0].style.height = "45px";
+		return res;
+	}
+
+	constructor() {
+		super();
+		this.element = $el("div.comfy-modal", { parent: document.body },
+			[$el("div.comfy-modal-content",
+				[...this.createButtons()]),
+			]);
+	}
+
+	show() {
+		this.element.style.display = "block";
+	}
+}
+
+
 app.registerExtension({
 	name: "Comfy.ManagerMenu",
 
@@ -2005,6 +2188,20 @@ app.registerExtension({
 			ManagerMenuDialog.instance.show();
 		}
 		menu.append(managerButton);
+
+		const shareButton = document.createElement("button");
+		shareButton.textContent = "Share";
+		shareButton.onclick = () => {
+			if (!ShareDialog.instance)
+				ShareDialog.instance = new ShareDialog();
+			ShareDialog.instance.show();
+		}
+		// make the background color a gradient of blue to green
+		shareButton.style.background = "linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)";
+		shareButton.style.color = "black";
+		// shareButton.style.border = "none";
+		// shareButton.style.borderRadius = "15px";
+		menu.append(shareButton);
 	},
 
 	async beforeRegisterNodeDef(nodeType, nodeData, app) {