Move share setting to ComfyUI Manager dialog and provide share options.

js/comfyui-manager.js

@@ -1,7 +1,7 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js"
 import { ComfyDialog, $el } from "../../scripts/ui.js";
-import { ShareDialog, SUPPORTED_OUTPUT_NODE_TYPES, getPotentialOutputsAndOutputNodes, ShareDialogChooser } from "./comfyui-share-common.js";
+import { ShareDialog, SUPPORTED_OUTPUT_NODE_TYPES, getPotentialOutputsAndOutputNodes, ShareDialogChooser, showOpenArtShareDialog, showShareDialog } from "./comfyui-share-common.js";
 import { CustomNodesInstaller } from "./custom-nodes-downloader.js";
 import { AlternativesInstaller } from "./a1111-alter-downloader.js";
 import { SnapshotManager } from "./snapshot.js";
@@ -401,12 +401,37 @@ class ManagerMenuDialog extends ComfyDialog {
 				}
 			});
 
+	    // share
+	    let share_combo = document.createElement("select");
+	    const share_options = [
+	      ['none', 'None'],
+	      ['openart', 'OpenArt AI'],
+	      ['matrix', 'Matrix Server'],
+	      ['comfyworkflows', 'ComfyWorkflows'],
+	      ['all', 'All'],
+	    ];
+	    for (const option of share_options) {
+          share_combo.appendChild($el('option', { value: option[0], text: `Share: ${option[1]}` }, []));
+        }
+        share_combo.addEventListener('change', function (event) {
+          const value = event.target.value;
+          localStorage.setItem("share_option", value);
+          const shareButton = document.getElementById("shareButton");
+          if (value === 'none') {
+            shareButton.style.display = "none";
+          } else {
+            shareButton.style.display = "inline-block";
+          }
+        });
+        share_combo.value = localStorage.getItem("share_option") || 'all';
+
 		return [
 			$el("div", {}, [this.local_mode_checkbox, checkbox_text, this.update_check_checkbox, uc_checkbox_text]),
 			$el("br", {}, []),
 			preview_combo,
 			badge_combo,
 			channel_combo,
+			share_combo,
 
 			$el("hr", {}, []),
 			$el("center", {}, ["!! EXPERIMENTAL !!"]),
@@ -582,37 +607,32 @@ app.registerExtension({
 			}
 		menu.append(managerButton);
 
-
 		const shareButton = document.createElement("button");
+		shareButton.id = "shareButton";
 		shareButton.textContent = "Share";
 		shareButton.onclick = () => {
+		    const shareOption = localStorage.getItem("share_option") || 'all';
+		    if (shareOption === 'openart') {
+		        showOpenArtShareDialog();
+			    return;
+		    } else if (shareOption === 'matrix' || shareOption === 'comfyworkflows') {
+		        showShareDialog();
+		        return;
+		    }
 
 			if(!ShareDialogChooser.instance) {
 				ShareDialogChooser.instance = new ShareDialogChooser();
 			}
-
 			ShareDialogChooser.instance.show();
-			return
 		}
 		// make the background color a gradient of blue to green
 		shareButton.style.background = "linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)";
 		shareButton.style.color = "black";
 
-		app.ui.settings.addSetting({
+		// Load share option from local storage to determine whether to show
-			id: "ComfyUIManager.ShowShareButtonInMainMenu",
+		// the share button.
-			name: "Show 'Share' button in the main menu",
+		const shouldShowShareButton = localStorage.getItem("share_option") !== 'none';
-			type: "boolean",
+		shareButton.style.display = shouldShowShareButton ? "inline-block" : "none";
-			defaultValue: true,
-			onChange: (value) => {
-				if (value) {
-					// show the button
-					shareButton.style.display = "inline-block";
-				} else {
-					// hide the button
-					shareButton.style.display = "none";
-				}
-			}
-		});
 
 		menu.append(shareButton);
 	},

js/comfyui-share-common.js

@@ -150,6 +150,39 @@ export function parseURLPath(urlPath) {
 	// Return the object with the parsed parameters
 	return parsedParams;
 }
+
+
+export const showOpenArtShareDialog = () => {
+  if (!OpenArtShareDialog.instance) {
+    OpenArtShareDialog.instance = new OpenArtShareDialog();
+  }
+  OpenArtShareDialog.instance.show();
+}
+
+export const showShareDialog = () => {
+  if (!ShareDialog.instance) {
+    ShareDialog.instance = new ShareDialog();
+  }
+  app.graphToPrompt().then(prompt => {
+    // console.log({ prompt })
+	return app.graph._nodes;
+  }).then(nodes => {
+    // console.log({ nodes });
+	const { potential_outputs, potential_output_nodes } = getPotentialOutputsAndOutputNodes(nodes);
+	if (potential_outputs.length === 0) {
+	  if (potential_output_nodes.length === 0) {
+	    // todo: add support for other output node types (animatediff combine, etc.)
+		const supported_nodes_string = SUPPORTED_OUTPUT_NODE_TYPES.join(", ");
+		alert(`No supported output node found (${supported_nodes_string}). To share this workflow, please add an output node to your graph and re-run your prompt.`);
+	  } else {
+	    alert("To share this, first run a prompt. Once it's done, click 'Share'.\n\nNOTE: Images of the Share target can only be selected in the PreviewImage, SaveImage, and VHS_VideoCombine nodes. In the case of VHS_VideoCombine, only the image/gif and image/webp formats are supported.");
+	  }
+	  return;
+	}
+	ShareDialog.instance.show({ potential_outputs, potential_output_nodes });
+  });
+}
+
 export class ShareDialogChooser extends ComfyDialog {
 	static instance = null;
 	constructor() {
@@ -166,62 +199,36 @@ export class ShareDialogChooser extends ComfyDialog {
 
 	}
 	createButtons() {
-		const handleShowOpenArtShareDialog = () => {
-			if (!OpenArtShareDialog.instance) {
-				OpenArtShareDialog.instance = new OpenArtShareDialog();
-			}
-			OpenArtShareDialog.instance.show()
-			this.close();
-		}
-
-		const handleShowShareDialog = () => {
-			if (!ShareDialog.instance) {
-				ShareDialog.instance = new ShareDialog();
-			}
-			app.graphToPrompt().then(prompt => {
-				// console.log({ prompt })
-				return app.graph._nodes;
-			}).then(nodes => {
-				// console.log({ nodes });
-				const { potential_outputs, potential_output_nodes } = getPotentialOutputsAndOutputNodes(nodes);
-
-				if (potential_outputs.length === 0) {
-					if (potential_output_nodes.length === 0) {
-						// todo: add support for other output node types (animatediff combine, etc.)
-						const supported_nodes_string = SUPPORTED_OUTPUT_NODE_TYPES.join(", ");
-						alert(`No supported output node found (${supported_nodes_string}). To share this workflow, please add an output node to your graph and re-run your prompt.`);
-					} else {
-						alert("To share this, first run a prompt. Once it's done, click 'Share'.\n\nNOTE: Images of the Share target can only be selected in the PreviewImage, SaveImage, and VHS_VideoCombine nodes. In the case of VHS_VideoCombine, only the image/gif and image/webp formats are supported.");
-					}
-					return;
-				}
-
-				ShareDialog.instance.show({ potential_outputs, potential_output_nodes });
-				this.close();
-			});
-		}
-
 		const buttons = [
 			{
 				key: "openart",
 				textContent: "OpenArt AI",
 				website: "https://openart.ai/workflows/",
 				description: "Share ComfyUI workflows and art on OpenArt.ai",
-				onclick: handleShowOpenArtShareDialog
+				onclick: () => {
+				  showOpenArtShareDialog();
+				  this.close();
+				}
 			},
 			{
 				key: "matrix",
 				textContent: "Matrix Server",
 				website: "https://app.element.io/#/room/%23comfyui_space%3Amatrix.org",
 				description: "Share your art on the official ComfyUI matrix server",
-				onclick: handleShowShareDialog
+				onclick: () => {
+				  showShareDialog();
+				  this.close();
+				}
 			},
 			{
 				key: "comfyworkflows",
 				textContent: "ComfyWorkflows",
 				website: "https://comfyworkflows.com",
 				description: "Share ComfyUI art on comfyworkflows.com",
-				onclick: handleShowShareDialog
+				onclick: () => {
+				  showShareDialog();
+				  this.close();
+				}
 			},
 		];
 
@@ -316,22 +323,22 @@ export class ShareDialogChooser extends ComfyDialog {
 			return container;
 		}
 
-
 		return [
-			$el("tr.td", { width: "100%" }, [
+		    $el("p", {
-				$el("font", { size: 6, color: "white" }, [`Where would you like to share your workflow?`]),
+		      textContent: 'Choose a platform to share your workflow',
-			]),
+			    style: {
-			$el("br", {}, []),
+				  'text-align': 'center',
+				  'color': 'white',
+				  'font-size': '18px',
+				  'margin-bottom': '10px',
+				},
+			  }
+			),
 
 			$el("div.cm-menu-container", {
 				id: "comfyui-share-container"
 			}, [
 				$el("div.cm-menu-column", [
-					$el("p", {
-						size: 3, color: "white", style: {
-							color: 'white'
-						}
-					}),
 					createShareButtonsWithDescriptions(),
 					$el("br", {}, []),
 				]),
@@ -391,12 +398,12 @@ export class ShareDialog extends ComfyDialog {
 		this.matrix_destination_checkbox = $el("input", { type: 'checkbox', id: "matrix_destination" }, [])
 		const matrix_destination_checkbox_text = $el("label", {}, [" ComfyUI Matrix server"])
 		this.matrix_destination_checkbox.style.color = "var(--fg-color)";
-		this.matrix_destination_checkbox.checked = false; //true;
+		this.matrix_destination_checkbox.checked = localStorage.getItem("share_option") === 'matrix'; //true;
 
 		this.comfyworkflows_destination_checkbox = $el("input", { type: 'checkbox', id: "comfyworkflows_destination" }, [])
 		const comfyworkflows_destination_checkbox_text = $el("label", {}, [" ComfyWorkflows.com"])
 		this.comfyworkflows_destination_checkbox.style.color = "var(--fg-color)";
-		this.comfyworkflows_destination_checkbox.checked = true;
+		this.comfyworkflows_destination_checkbox.checked = localStorage.getItem("share_option") !== 'matrix';
 
 		this.matrix_homeserver_input = $el("input", { type: 'text', id: "matrix_homeserver", placeholder: "matrix.org", value: ShareDialog.matrix_auth.homeserver || 'matrix.org' }, []);
 		this.matrix_username_input = $el("input", { type: 'text', placeholder: "Username", value: ShareDialog.matrix_auth.username || '' }, []);
@@ -453,8 +460,8 @@ export class ShareDialog extends ComfyDialog {
 					textContent: "Close",
 					onclick: () => {
 						// Reset state
-						this.matrix_destination_checkbox.checked = false;
+						this.matrix_destination_checkbox.checked = localStorage.getItem("share_option") === 'matrix';
-						this.comfyworkflows_destination_checkbox.checked = true;
+						this.comfyworkflows_destination_checkbox.checked = localStorage.getItem("share_option") !== 'matrix';
 						this.share_button.textContent = "Share";
 						this.share_button.style.display = "inline-block";
 						this.final_message.innerHTML = "";
@@ -625,8 +632,8 @@ export class ShareDialog extends ComfyDialog {
 					textContent: "Close",
 					onclick: () => {
 						// Reset state
-						this.matrix_destination_checkbox.checked = false;
+						this.matrix_destination_checkbox.checked = localStorage.getItem("share_option") === 'matrix';
-						this.comfyworkflows_destination_checkbox.checked = true;
+						this.comfyworkflows_destination_checkbox.checked = localStorage.getItem("share_option") !== 'matrix';
 						this.share_button.textContent = "Share";
 						this.share_button.style.display = "inline-block";
 						this.final_message.innerHTML = "";

js/comfyui-share-openart.js

@@ -4,9 +4,10 @@ import { ComfyDialog, $el } from "../../scripts/ui.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 = "https://openart.ai/api";
-const API_ENDPOINT = "http://localhost:8080/api";
+//const API_ENDPOINT = "http://localhost:8080/api";
 
 const style = `
 .openart-share-dialog a {