improved share ui

js/comfyui-share.js

@@ -9,6 +9,29 @@ export const SUPPORTED_OUTPUT_NODE_TYPES = [
 	"ADE_AnimateDiffCombine",
 ]
 
+var docStyle = document.createElement('style');
+docStyle.innerHTML = `
+.cm-menu-container {
+  column-gap: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.cm-menu-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.cm-title {
+	padding: 10px 10px 0 10p;
+	background-color: black;
+	text-align: center;
+	height: 45px;
+}
+`;
+document.head.appendChild(docStyle);
+
 export function getPotentialOutputsAndOutputNodes(nodes) {
 	const potential_outputs = [];
 	const potential_output_nodes = [];
@@ -59,7 +82,7 @@ export function getPotentialOutputsAndOutputNodes(nodes) {
 							if (parsedURLVals.type !== "output") {
 								// TODO
 							}
-							potential_outputs.push({ "type": "output", 'title' : node.title, "output": { "filename": parsedURLVals.filename, "subfolder": parsedURLVals.subfolder, "value": widgetValue, "format": parsedURLVals.format } });
+							potential_outputs.push({ "type": "output", 'title': node.title, "output": { "filename": parsedURLVals.filename, "subfolder": parsedURLVals.subfolder, "value": widgetValue, "format": parsedURLVals.format } });
 						}
 					}
 				}
@@ -81,7 +104,7 @@ export function getPotentialOutputsAndOutputNodes(nodes) {
 								// TODO
 								continue;
 							}
-							potential_outputs.push({ "type": "output", 'title' : node.title, "output": { "filename": parsedURLVals.filename, "subfolder": parsedURLVals.subfolder, "type": parsedURLVals.type, "value": widgetValue, "format": parsedURLVals.format } });
+							potential_outputs.push({ "type": "output", 'title': node.title, "output": { "filename": parsedURLVals.filename, "subfolder": parsedURLVals.subfolder, "type": parsedURLVals.type, "value": widgetValue, "format": parsedURLVals.format } });
 						}
 					}
 				}
@@ -178,163 +201,61 @@ export class ShareDialog extends ComfyDialog {
 		this.share_button = $el("button", {
 			type: "submit",
 			textContent: "Share",
-		}, []);
+			style: {
-
+				backgroundColor: "blue"
-		this.final_message = $el("div", {}, []);
-
-		// get the user's existing matrix auth and share key
-		ShareDialog.matrix_auth = { homeserver: "matrix.org", username: "", password: "" };
-		try {
-			api.fetchApi(`/manager/get_matrix_auth`)
-				.then(response => response.json())
-				.then(data => {
-					ShareDialog.matrix_auth = data;
-					this.matrix_homeserver_input.value = ShareDialog.matrix_auth.homeserver;
-					this.matrix_username_input.value = ShareDialog.matrix_auth.username;
-					this.matrix_password_input.value = ShareDialog.matrix_auth.password;
-				})
-				.catch(error => {
-					// console.log(error);
-				});
-		} catch (error) {
-			// console.log(error);
-		}
-
-		// get the user's existing comfyworkflows share key
-		ShareDialog.cw_sharekey = "";
-		try {
-			// console.log("Fetching comfyworkflows share key")
-			api.fetchApi(`/manager/get_comfyworkflows_auth`)
-				.then(response => response.json())
-				.then(data => {
-					ShareDialog.cw_sharekey = data.comfyworkflows_sharekey;
-					this.cw_sharekey_input.value = ShareDialog.cw_sharekey;
-				})
-				.catch(error => {
-					// console.log(error);
-				});
-		} catch (error) {
-			// console.log(error);
-		}
-
-		this.share_button.onclick = async () => {
-			const prompt = await app.graphToPrompt();
-			const nodes = app.graph._nodes;
-
-			// console.log({ prompt, nodes });
-
-			const destinations = [];
-			if (this.matrix_destination_checkbox.checked) {
-				destinations.push("matrix");
-			}
-			if (this.comfyworkflows_destination_checkbox.checked) {
-				destinations.push("comfyworkflows");
-			}
-
-			// if destinations includes matrix, make an api call to /manager/check_matrix to ensure that the user has configured their matrix settings
-			if (destinations.includes("matrix")) {
-				let definedMatrixAuth = !!this.matrix_homeserver_input.value && !!this.matrix_username_input.value && !!this.matrix_password_input.value;
-				if (!definedMatrixAuth) {
-					alert("Please set your Matrix account details.");
-					return;
-				}
 			}
+		}, []);
 
-			if (destinations.includes("comfyworkflows") && !this.cw_sharekey_input.value && !confirm("You have NOT set your ComfyWorkflows.com share key. Your art will NOT be connected to your account (it will be shared anonymously). Continue?")) {
+		this.final_message = $el("div", {
-				return;
+			style: {
+				color: "white",
+				textAlign: "center",
+				// marginTop: "10px",
+				// backgroundColor: "black",
+				padding: "10px",
 			}
+		}, []);
 
-			const { potential_outputs, potential_output_nodes } = getPotentialOutputsAndOutputNodes(nodes);
+		this.share_finalmessage_container = $el("div.cm-menu-container", {
-
+			id: "comfyui-share-finalmessage-container",
-			// console.log({ potential_outputs, potential_output_nodes })
+			style: {
-
+				display: "none",
-			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'.");
-				}
-				this.selectedOutputIndex = 0;
-				this.close();
-				return;
 			}
+		}, [
+			$el("div.cm-menu-column", [
+				this.final_message,
+				$el("button", {
+					type: "button",
+					textContent: "Close",
+					onclick: () => {
+						// Reset state
+						this.matrix_destination_checkbox.checked = false;
+						this.comfyworkflows_destination_checkbox.checked = true;
+						this.share_button.textContent = "Share";
+						this.share_button.style.display = "inline-block";
+						this.final_message.innerHTML = "";
+						this.final_message.style.color = "white";
+						this.credits_input.value = "";
+						this.title_input.value = "";
+						this.description_input.value = "";
+						this.is_nsfw_checkbox.checked = false;
+						this.selectedOutputIndex = 0;
 
-			// Change the text of the share button to "Sharing..." to indicate that the share process has started
+						// hide the final message
-			this.share_button.textContent = "Sharing...";
+						this.share_finalmessage_container.style.display = "none";
 
-			const response = await api.fetchApi(`/manager/share`, {
+						// show the share container
-				method: 'POST',
+						this.share_container.style.display = "flex";
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					matrix_auth: {
-						homeserver: this.matrix_homeserver_input.value,
-						username: this.matrix_username_input.value,
-						password: this.matrix_password_input.value,
-					},
-					cw_auth: {
-						cw_sharekey: this.cw_sharekey_input.value,
-					},
-					share_destinations: destinations,
-					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,
-					selected_output_index: this.selectedOutputIndex,
-					// potential_output_nodes
-				})
-			});
 
-			if (response.status != 200) {
+						this.close()
-				try {
-					const response_json = await response.json();
-					if (response_json.error) {
-						alert(response_json.error);
-						this.close();
-						return;
-					} else {
-						alert("Failed to share your art. Please try again.");
-						this.close();
-						return;
 					}
-				} catch (e) {
+				}),
-					alert("Failed to share your art. Please try again.");
+			])
-					this.close();
+		]);
-					return;
+		this.share_container = $el("div.cm-menu-container", {
-				}
+			id: "comfyui-share-container"
-			}
+		}, [
-
+			$el("div.cm-menu-column", [
-			const response_json = await response.json();
-
-			if (response_json.comfyworkflows.url) {
-				this.final_message.innerHTML = "Your art has been shared: <a href='" + response_json.comfyworkflows.url + "' target='_blank'>" + response_json.comfyworkflows.url + "</a>";
-				if (response_json.matrix.success) {
-					this.final_message.innerHTML += "<br>Your art has been shared in the ComfyUI Matrix server's #share channel!";
-				}
-			} else {
-				if (response_json.matrix.success) {
-					this.final_message.innerHTML = "Your art has been shared in the ComfyUI Matrix server's #share channel!";
-				}
-			}
-
-			this.final_message.style.color = "green";
-
-			// hide the share button
-			this.share_button.textContent = "Shared!";
-			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("br", {}, []),
-
 				$el("details", {
 					style: {
 						border: "1px solid #999",
@@ -464,14 +385,15 @@ export class ShareDialog extends ComfyDialog {
 				$el("br", {}, []),
 
 				$el("div", {}, [this.is_nsfw_checkbox, is_nsfw_checkbox_text]),
-				$el("br", {}, []),
+				// $el("br", {}, []),
 
+				// this.final_message,
+				// $el("br", {}, []),
+			]),
+			$el("div.cm-menu-column", [
 				this.radio_buttons,
 				$el("br", {}, []),
 
-				this.final_message,
-				$el("br", {}, []),
-
 				this.share_button,
 
 				$el("button", {
@@ -490,10 +412,179 @@ export class ShareDialog extends ComfyDialog {
 						this.description_input.value = "";
 						this.is_nsfw_checkbox.checked = false;
 						this.selectedOutputIndex = 0;
+
+						// hide the final message
+						this.share_finalmessage_container.style.display = "none";
+
+						// show the share container
+						this.share_container.style.display = "flex";
+
 						this.close()
 					}
 				}),
 				$el("br", {}, []),
+			]),
+		]);
+
+		// get the user's existing matrix auth and share key
+		ShareDialog.matrix_auth = { homeserver: "matrix.org", username: "", password: "" };
+		try {
+			api.fetchApi(`/manager/get_matrix_auth`)
+				.then(response => response.json())
+				.then(data => {
+					ShareDialog.matrix_auth = data;
+					this.matrix_homeserver_input.value = ShareDialog.matrix_auth.homeserver;
+					this.matrix_username_input.value = ShareDialog.matrix_auth.username;
+					this.matrix_password_input.value = ShareDialog.matrix_auth.password;
+				})
+				.catch(error => {
+					// console.log(error);
+				});
+		} catch (error) {
+			// console.log(error);
+		}
+
+		// get the user's existing comfyworkflows share key
+		ShareDialog.cw_sharekey = "";
+		try {
+			// console.log("Fetching comfyworkflows share key")
+			api.fetchApi(`/manager/get_comfyworkflows_auth`)
+				.then(response => response.json())
+				.then(data => {
+					ShareDialog.cw_sharekey = data.comfyworkflows_sharekey;
+					this.cw_sharekey_input.value = ShareDialog.cw_sharekey;
+				})
+				.catch(error => {
+					// console.log(error);
+				});
+		} catch (error) {
+			// console.log(error);
+		}
+
+		this.share_button.onclick = async () => {
+			const prompt = await app.graphToPrompt();
+			const nodes = app.graph._nodes;
+
+			// console.log({ prompt, nodes });
+
+			const destinations = [];
+			if (this.matrix_destination_checkbox.checked) {
+				destinations.push("matrix");
+			}
+			if (this.comfyworkflows_destination_checkbox.checked) {
+				destinations.push("comfyworkflows");
+			}
+
+			// if destinations includes matrix, make an api call to /manager/check_matrix to ensure that the user has configured their matrix settings
+			if (destinations.includes("matrix")) {
+				let definedMatrixAuth = !!this.matrix_homeserver_input.value && !!this.matrix_username_input.value && !!this.matrix_password_input.value;
+				if (!definedMatrixAuth) {
+					alert("Please set your Matrix account details.");
+					return;
+				}
+			}
+
+			if (destinations.includes("comfyworkflows") && !this.cw_sharekey_input.value && !confirm("You have NOT set your ComfyWorkflows.com share key. Your art will NOT be connected to your account (it will be shared anonymously). Continue?")) {
+				return;
+			}
+
+			const { potential_outputs, potential_output_nodes } = getPotentialOutputsAndOutputNodes(nodes);
+
+			// console.log({ potential_outputs, potential_output_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'.");
+				}
+				this.selectedOutputIndex = 0;
+				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({
+					matrix_auth: {
+						homeserver: this.matrix_homeserver_input.value,
+						username: this.matrix_username_input.value,
+						password: this.matrix_password_input.value,
+					},
+					cw_auth: {
+						cw_sharekey: this.cw_sharekey_input.value,
+					},
+					share_destinations: destinations,
+					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,
+					selected_output_index: this.selectedOutputIndex,
+					// potential_output_nodes
+				})
+			});
+
+			if (response.status != 200) {
+				try {
+					const response_json = await response.json();
+					if (response_json.error) {
+						alert(response_json.error);
+						this.close();
+						return;
+					} else {
+						alert("Failed to share your art. Please try again.");
+						this.close();
+						return;
+					}
+				} catch (e) {
+					alert("Failed to share your art. Please try again.");
+					this.close();
+					return;
+				}
+			}
+
+			const response_json = await response.json();
+
+			if (response_json.comfyworkflows.url) {
+				this.final_message.innerHTML = "Your art has been shared: <a href='" + response_json.comfyworkflows.url + "' target='_blank'>" + response_json.comfyworkflows.url + "</a>";
+				if (response_json.matrix.success) {
+					this.final_message.innerHTML += "<br>Your art has been shared in the ComfyUI Matrix server's #share channel!";
+				}
+			} else {
+				if (response_json.matrix.success) {
+					this.final_message.innerHTML = "Your art has been shared in the ComfyUI Matrix server's #share channel!";
+				}
+			}
+
+			this.final_message.style.color = "green";
+
+			// hide #comfyui-share-container and show #comfyui-share-finalmessage-container
+			this.share_container.style.display = "none";
+			this.share_finalmessage_container.style.display = "block";
+
+			// hide the share button
+			this.share_button.textContent = "Shared!";
+			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("br", {}, []),
+
+				this.share_finalmessage_container,
+				this.share_container,
 			];
 
 		res[0].style.padding = "10px 10px 10px 10px";
@@ -509,7 +600,7 @@ export class ShareDialog extends ComfyDialog {
 		const new_radio_buttons = $el("div", {
 			id: "selectOutput-Options",
 			style: {
-				'overflow-y': 'auto',
+				'overflow-y': 'scroll',
 				'max-height': '400px',
 			}
 		}, potential_outputs.map((output, index) => {
@@ -549,7 +640,7 @@ export class ShareDialog extends ComfyDialog {
 				}
 			}, [radio_button, radio_button_text, radio_button_img]);
 		}));
-		const header = $el("h4", {
+		const header = $el("h3", {
 			textContent: "Select an image to share",
 			size: 3,
 			color: "white",
@@ -558,9 +649,24 @@ export class ShareDialog extends ComfyDialog {
 				color: 'white',
 				backgroundColor: 'black',
 				padding: '10px',
+				'margin-top': '0px',
 			}
-		}, []);
+		}, [
+			$el("p", {
+				textContent: "Scroll to see all outputs",
+				size: 2,
+				color: "white",
+				style: {
+					'text-align': 'center',
+					color: 'white',
+					'margin-bottom': '5px',
+					'font-style': 'italic',
+					'font-size': '12px',
+				},
+			}, [])
+		]);
 		this.radio_buttons.appendChild(header);
+		// this.radio_buttons.appendChild(subheader);
 		this.radio_buttons.appendChild(new_radio_buttons);
 		this.element.style.display = "block";
 	}