diff --git a/js/comfyui-manager.js b/js/comfyui-manager.js index aae8b853..5dd9e18e 100644 --- a/js/comfyui-manager.js +++ b/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"; @@ -42,7 +42,7 @@ const style = ` #comfyworkflows-button { position: relative; overflow: hidden; - } + } .pysssss-workflow-arrow-2 { position: absolute; top: 0; @@ -235,16 +235,16 @@ async function updateAll(update_check_checkbox) { function newDOMTokenList(initialTokens) { const tmp = document.createElement(`div`); - + const classList = tmp.classList; if (initialTokens) { initialTokens.forEach(token => { classList.add(token); }); } - + return classList; - } + } // ----------- @@ -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 !!"]), @@ -466,14 +491,14 @@ class ManagerMenuDialog extends ComfyDialog { 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.) @@ -484,7 +509,7 @@ class ManagerMenuDialog extends ComfyDialog { } return; } - + ShareDialog.instance.show({ potential_outputs, potential_output_nodes }); }); }, @@ -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({ - id: "ComfyUIManager.ShowShareButtonInMainMenu", - name: "Show 'Share' button in the main menu", - type: "boolean", - defaultValue: true, - onChange: (value) => { - if (value) { - // show the button - shareButton.style.display = "inline-block"; - } else { - // hide the button - shareButton.style.display = "none"; - } - } - }); + // Load share option from local storage to determine whether to show + // the share button. + const shouldShowShareButton = localStorage.getItem("share_option") !== 'none'; + shareButton.style.display = shouldShowShareButton ? "inline-block" : "none"; menu.append(shareButton); }, @@ -712,4 +732,4 @@ app.registerExtension({ }; } } -}); \ No newline at end of file +}); diff --git a/js/comfyui-share-common.js b/js/comfyui-share-common.js index d213c2f6..d871c83a 100644 --- a/js/comfyui-share-common.js +++ b/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("font", { size: 6, color: "white" }, [`Where would you like to share your workflow?`]), - ]), - $el("br", {}, []), + $el("p", { + textContent: 'Choose a platform to share your workflow', + style: { + '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.comfyworkflows_destination_checkbox.checked = true; + this.matrix_destination_checkbox.checked = localStorage.getItem("share_option") === 'matrix'; + 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.comfyworkflows_destination_checkbox.checked = true; + this.matrix_destination_checkbox.checked = localStorage.getItem("share_option") === 'matrix'; + 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 = ""; diff --git a/js/comfyui-share-openart.js b/js/comfyui-share-openart.js index f8faac0c..a52c7678 100644 --- a/js/comfyui-share-openart.js +++ b/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 = "http://localhost:8080/api"; + const API_ENDPOINT = "https://openart.ai/api"; +//const API_ENDPOINT = "http://localhost:8080/api"; const style = ` .openart-share-dialog a {