KenSchae
/
ComfyUI-Manager
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

improved share ui

pull/146/head
thecooltechguy 1 year ago
parent
44f3e2b0b4
commit
4ef53f9f0a
1 changed files with 263 additions and 157 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 420
      js/comfyui-share.js

420
js/comfyui-share.js vendored
Unescape View File

@ -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: <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", {}, []),
}),
])
]);
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: <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";
}

Write Preview
Loading…
Cancel
Save