From 4ef53f9f0a02f804ee1b724c561c9d15402ffbbe Mon Sep 17 00:00:00 2001 From: thecooltechguy Date: Wed, 8 Nov 2023 08:45:54 -0800 Subject: [PATCH] improved share ui --- js/comfyui-share.js | 420 +++++++++++++++++++++++++++----------------- 1 file changed, 263 insertions(+), 157 deletions(-) diff --git a/js/comfyui-share.js b/js/comfyui-share.js index fb6a551..4169a29 100644 --- a/js/comfyui-share.js +++ b/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", - }, []); - - 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; - } + style: { + backgroundColor: "blue" } + }, []); - 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; + this.final_message = $el("div", { + style: { + color: "white", + textAlign: "center", + // marginTop: "10px", + // backgroundColor: "black", + padding: "10px", } + }, []); - 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; + this.share_finalmessage_container = $el("div.cm-menu-container", { + id: "comfyui-share-finalmessage-container", + style: { + display: "none", } + }, [ + $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 - this.share_button.textContent = "Sharing..."; + // hide the final message + this.share_finalmessage_container.style.display = "none"; - 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 - }) - }); + // show the share container + this.share_container.style.display = "flex"; - 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; + this.close() } - } 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: " + response_json.comfyworkflows.url + ""; - if (response_json.matrix.success) { - this.final_message.innerHTML += "
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", {}, []), - + }), + ]) + ]); + this.share_container = $el("div.cm-menu-container", { + id: "comfyui-share-container" + }, [ + $el("div.cm-menu-column", [ $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: " + response_json.comfyworkflows.url + ""; + if (response_json.matrix.success) { + this.final_message.innerHTML += "
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"; }