xinyun/ComfyUI-Manager
1
0
Fork 0
mirror of https://git.datalinker.icu/ltdrdata/ComfyUI-Manager synced 2025-12-09 22:24:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
johnqiao 2023-11-18 01:00:39 -07:00
parent 1a5b2dc36a
commit 676455b0eb
3 changed files with 111 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
js/comfyui-manager.js
View File

@ -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({
};
}
}
});
});

115
js/comfyui-share-common.js
View File

@ -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 = "";

5
js/comfyui-share-openart.js
View File

@ -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 {