wangbo/ComfyUI-Manager
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI-Manager.git synced 2025-12-17 10:22:59 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix bug: show all the outputs from the same node while sharing

Browse Source
This commit is contained in:
johnqiao 2023-11-25 15:50:41 -07:00
parent e53c707d99
commit ae95b8970b
2 changed files with 203 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,7 @@ export function getPotentialOutputsAndOutputNodes(nodes) {
// iterate over the images array and add each image to the potential_outputs array // iterate over the images array and add each image to the potential_outputs array
for (let j = 0; j < node.images.length; j++) { for (let j = 0; j < node.images.length; j++) {
potential_output_nodes.push(node); potential_output_nodes.push(node);
potential_outputs.push({ "type": "image", "image": node.images[j], "title": node.title }); potential_outputs.push({ "type": "image", "image": node.images[j], "title": node.title, "node_id": node.id });
} }
} }
} }
@ -62,7 +62,7 @@ export function getPotentialOutputsAndOutputNodes(nodes) {
// iterate over the images array and add each image to the potential_outputs array // iterate over the images array and add each image to the potential_outputs array
for (let j = 0; j < node.images.length; j++) { for (let j = 0; j < node.images.length; j++) {
potential_output_nodes.push(node); potential_output_nodes.push(node);
potential_outputs.push({ "type": "image", "image": node.images[j], "title": node.title }); potential_outputs.push({ "type": "image", "image": node.images[j], "title": node.title, "node_id": node.id });
} }
} }
} }
@ -81,7 +81,7 @@ export function getPotentialOutputsAndOutputNodes(nodes) {
// TODO // TODO
} }
potential_output_nodes.push(node); potential_output_nodes.push(node);
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, "node_id": node.id , "output": { "filename": parsedURLVals.filename, "subfolder": parsedURLVals.subfolder, "value": widgetValue, "format": parsedURLVals.format } });
} }
} else if (node.widgets[j].type === "preview") { } else if (node.widgets[j].type === "preview") {
const widgetValue = node.widgets[j].value; const widgetValue = node.widgets[j].value;
@ -98,7 +98,7 @@ export function getPotentialOutputsAndOutputNodes(nodes) {
// TODO // TODO
} }
potential_output_nodes.push(node); potential_output_nodes.push(node);
potential_outputs.push({ "type": "output", 'title': node.title, "output": { "filename": parsedURLVals.filename, "subfolder": parsedURLVals.subfolder, "value": `/view?filename=${parsedURLVals.filename}&subfolder=${parsedURLVals.subfolder}&type=${parsedURLVals.type}&format=${parsedURLVals.format}`, "format": parsedURLVals.format } }); potential_outputs.push({ "type": "output", 'title': node.title, "node_id": node.id , "output": { "filename": parsedURLVals.filename, "subfolder": parsedURLVals.subfolder, "value": `/view?filename=${parsedURLVals.filename}&subfolder=${parsedURLVals.subfolder}&type=${parsedURLVals.type}&format=${parsedURLVals.format}`, "format": parsedURLVals.format } });
} }
} }
} }
@ -856,7 +856,11 @@ export class ShareDialog extends ComfyDialog {
// order as `potential_output_nodes`. // order as `potential_output_nodes`.
const potential_output_to_order = {}; const potential_output_to_order = {};
potential_output_nodes.forEach((node, index) => { potential_output_nodes.forEach((node, index) => {
potential_output_to_order[node.id] = [node, potential_outputs[index]]; if (node.id in potential_output_to_order) {
potential_output_to_order[node.id][1].push(potential_outputs[index]);
} else {
potential_output_to_order[node.id] = [node, [potential_outputs[index]]];
}
}) })
// Sort the object `potential_output_to_order` by key (node ID) // Sort the object `potential_output_to_order` by key (node ID)
const sorted_potential_output_to_order = Object.fromEntries( const sorted_potential_output_to_order = Object.fromEntries(
@ -866,13 +870,14 @@ export class ShareDialog extends ComfyDialog {
const sorted_potential_output_nodes = [] const sorted_potential_output_nodes = []
for (const [key, value] of Object.entries(sorted_potential_output_to_order)) { for (const [key, value] of Object.entries(sorted_potential_output_to_order)) {
sorted_potential_output_nodes.push(value[0]); sorted_potential_output_nodes.push(value[0]);
sorted_potential_outputs.push(value[1]); sorted_potential_outputs.push(...value[1]);
} }
potential_output_nodes = sorted_potential_output_nodes; potential_output_nodes = sorted_potential_output_nodes;
potential_outputs = sorted_potential_outputs; potential_outputs = sorted_potential_outputs;
// console.log({ potential_outputs, potential_output_nodes }) // console.log({ potential_outputs, potential_output_nodes })
this.radio_buttons.innerHTML = ""; // clear the radio buttons this.radio_buttons.innerHTML = ""; // clear the radio buttons
let is_radio_button_checked = false; // only check the first radio button if multiple images from the same node
const new_radio_buttons = $el("div", { const new_radio_buttons = $el("div", {
id: "selectOutput-Options", id: "selectOutput-Options",
style: { style: {
@ -880,7 +885,7 @@ export class ShareDialog extends ComfyDialog {
'max-height': '400px', 'max-height': '400px',
} }
}, potential_outputs.map((output, index) => { }, potential_outputs.map((output, index) => {
const potential_output_node = potential_output_nodes[index]; const {node_id} = output;
const radio_button = $el("input", { type: 'radio', name: "selectOutputImages", value: index, required: index === 0 }, []) const radio_button = $el("input", { type: 'radio', name: "selectOutputImages", value: index, required: index === 0 }, [])
let radio_button_img; let radio_button_img;
if (output.type === "image" || output.type === "temp") { if (output.type === "image" || output.type === "temp") {
@ -903,8 +908,9 @@ export class ShareDialog extends ComfyDialog {
// Make the radio button checked if it's the selected node, // Make the radio button checked if it's the selected node,
// otherwise make the first radio button checked. // otherwise make the first radio button checked.
if (this.selectedNodeId) { if (this.selectedNodeId) {
if (this.selectedNodeId === potential_output_node.id) { if (this.selectedNodeId === node_id && !is_radio_button_checked) {
radio_button.checked = true; radio_button.checked = true;
is_radio_button_checked = true;
} }
} else { } else {
radio_button.checked = index === 0; radio_button.checked = index === 0;

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

@ -241,7 +241,12 @@ export class OpenArtShareDialog extends ComfyDialog {
// Output Upload Section // Output Upload Section
const outputUploadSection = $el("div", {style: sectionStyle}, [ const outputUploadSection = $el("div", {style: sectionStyle}, [
$el("label", { style: {...labelStyle, margin: "10px 0 0 0"} }, ["2️⃣ Image/Thumbnail (Required)"]), $el("label", {
style: {
...labelStyle,
margin: "10px 0 0 0"
}
}, ["2️⃣ Image/Thumbnail (Required)"]),
this.previewImage, this.previewImage,
this.uploadImagesInput, this.uploadImagesInput,
]); ]);
@ -259,7 +264,10 @@ export class OpenArtShareDialog extends ComfyDialog {
]); ]);
// OpenArt Contest Section // OpenArt Contest Section
this.joinContestCheckbox = $el("input",{type:'checkbox', id:"join_contest"},[]) this.joinContestCheckbox = $el("input", {
type: 'checkbox',
id: "join_contest"
}, [])
this.joinContestDescription = $el("a", { this.joinContestDescription = $el("a", {
style: { style: {
...hyperLinkStyle, ...hyperLinkStyle,
@ -536,7 +544,11 @@ export class OpenArtShareDialog extends ComfyDialog {
// order as `potential_output_nodes`. // order as `potential_output_nodes`.
const potential_output_to_order = {}; const potential_output_to_order = {};
potential_output_nodes.forEach((node, index) => { potential_output_nodes.forEach((node, index) => {
potential_output_to_order[node.id] = [node, potential_outputs[index]]; if (node.id in potential_output_to_order) {
potential_output_to_order[node.id][1].push(potential_outputs[index]);
} else {
potential_output_to_order[node.id] = [node, [potential_outputs[index]]];
}
}) })
// Sort the object `potential_output_to_order` by key (node ID) // Sort the object `potential_output_to_order` by key (node ID)
const sorted_potential_output_to_order = Object.fromEntries( const sorted_potential_output_to_order = Object.fromEntries(
@ -546,7 +558,7 @@ export class OpenArtShareDialog extends ComfyDialog {
const sorted_potential_output_nodes = [] const sorted_potential_output_nodes = []
for (const [key, value] of Object.entries(sorted_potential_output_to_order)) { for (const [key, value] of Object.entries(sorted_potential_output_to_order)) {
sorted_potential_output_nodes.push(value[0]); sorted_potential_output_nodes.push(value[0]);
sorted_potential_outputs.push(value[1]); sorted_potential_outputs.push(...value[1]);
} }
potential_output_nodes = sorted_potential_output_nodes; potential_output_nodes = sorted_potential_output_nodes;
potential_outputs = sorted_potential_outputs; potential_outputs = sorted_potential_outputs;
@ -591,20 +603,45 @@ export class OpenArtShareDialog extends ComfyDialog {
} }
}, },
potential_outputs.map((output, index) => { potential_outputs.map((output, index) => {
const radio_button = $el("input", { type: 'radio', name: "selectOutputImages", value: index, required: index === 0 }, []) const {node_id} = output;
const radio_button = $el("input", {
type: 'radio',
name: "selectOutputImages",
value: index,
required: index === 0
}, [])
let radio_button_img; let radio_button_img;
let filename; let filename;
if (output.type === "image" || output.type === "temp") { if (output.type === "image" || output.type === "temp") {
radio_button_img = $el("img", { src: `/view?filename=${output.image.filename}&subfolder=${output.image.subfolder}&type=${output.image.type}`, style: { width: "100px", height: "100px", objectFit: "cover", borderRadius: "5px" } }, []); radio_button_img = $el("img", {
src: `/view?filename=${output.image.filename}&subfolder=${output.image.subfolder}&type=${output.image.type}`,
style: {
width: "100px",
height: "100px",
objectFit: "cover",
borderRadius: "5px"
}
}, []);
filename = output.image.filename filename = output.image.filename
} else if (output.type === "output") { } else if (output.type === "output") {
radio_button_img = $el("img", { src: output.output.value, style: { width: "auto", height: "100px", objectFit: "cover", borderRadius: "5px" } }, []); radio_button_img = $el("img", {
src: output.output.value,
style: {
width: "auto",
height: "100px",
objectFit: "cover",
borderRadius: "5px"
}
}, []);
filename = output.filename filename = output.filename
} else { } else {
// unsupported output type // unsupported output type
// this should never happen // this should never happen
// TODO // TODO
radio_button_img = $el("img", { src: "", style: { width: "auto", height: "100px" } }, []); radio_button_img = $el("img", {
src: "",
style: {width: "auto", height: "100px"}
}, []);
} }
const radio_button_text = $el("span", { const radio_button_text = $el("span", {
style: { style: {
@ -633,7 +670,7 @@ export class OpenArtShareDialog extends ComfyDialog {
left: '3px', left: '3px',
borderRadius: '3px', borderRadius: '3px',
} }
}, [`Node: ${potential_output_nodes[index].id}`]) }, [`Node: ${node_id}`])
radio_button.style.color = "var(--fg-color)"; radio_button.style.color = "var(--fg-color)";
radio_button.checked = this.selectedOutputIndex === index; radio_button.checked = this.selectedOutputIndex === index;