|
|
import {app} from "../../scripts/app.js"; |
|
|
import {api} from "../../scripts/api.js"; |
|
|
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 style = ` |
|
|
.openart-share-dialog a { |
|
|
color: #f8f8f8; |
|
|
} |
|
|
.openart-share-dialog a:hover { |
|
|
color: #007bff; |
|
|
} |
|
|
.output_label { |
|
|
border: 5px solid transparent; |
|
|
} |
|
|
.output_label:hover { |
|
|
border: 5px solid #59E8C6; |
|
|
} |
|
|
.output_label.checked { |
|
|
border: 5px solid #59E8C6; |
|
|
} |
|
|
`; |
|
|
|
|
|
// Shared component styles |
|
|
const sectionStyle = { |
|
|
marginBottom: 0, |
|
|
padding: 0, |
|
|
borderRadius: "8px", |
|
|
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)", |
|
|
display: "flex", |
|
|
flexDirection: "column", |
|
|
justifyContent: "center", |
|
|
}; |
|
|
|
|
|
export class OpenArtShareDialog extends ComfyDialog { |
|
|
static instance = null; |
|
|
|
|
|
constructor() { |
|
|
super(); |
|
|
$el("style", { |
|
|
textContent: style, |
|
|
parent: document.head, |
|
|
}); |
|
|
this.element = $el( |
|
|
"div.comfy-modal.openart-share-dialog", |
|
|
{ |
|
|
parent: document.body, |
|
|
style: { |
|
|
"overflow-y": "auto", |
|
|
}, |
|
|
}, |
|
|
[$el("div.comfy-modal-content", {}, [...this.createButtons()])] |
|
|
); |
|
|
this.selectedOutputIndex = 0; |
|
|
this.selectedNodeId = null; |
|
|
this.uploadedImages = []; |
|
|
this.selectedFile = null; |
|
|
} |
|
|
|
|
|
async readKey() { |
|
|
let key = "" |
|
|
try { |
|
|
key = await api.fetchApi(`/manager/get_openart_auth`) |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
return data.openart_key; |
|
|
}) |
|
|
.catch(error => { |
|
|
// console.log(error); |
|
|
}); |
|
|
} catch (error) { |
|
|
// console.log(error); |
|
|
} |
|
|
return key || ""; |
|
|
} |
|
|
|
|
|
async saveKey(value) { |
|
|
await api.fetchApi(`/manager/set_openart_auth`, { |
|
|
method: 'POST', |
|
|
headers: {'Content-Type': 'application/json'}, |
|
|
body: JSON.stringify({ |
|
|
openart_key: value |
|
|
}) |
|
|
}); |
|
|
} |
|
|
|
|
|
createButtons() { |
|
|
const inputStyle = { |
|
|
display: "block", |
|
|
minWidth: "500px", |
|
|
width: "100%", |
|
|
padding: "10px", |
|
|
margin: "10px 0", |
|
|
borderRadius: "4px", |
|
|
border: "1px solid #ddd", |
|
|
boxSizing: "border-box", |
|
|
}; |
|
|
|
|
|
const hyperLinkStyle = { |
|
|
display: "block", |
|
|
marginBottom: "15px", |
|
|
fontWeight: "bold", |
|
|
fontSize: "14px", |
|
|
}; |
|
|
|
|
|
const labelStyle = { |
|
|
color: "#f8f8f8", |
|
|
display: "block", |
|
|
margin: "10px 0 0 0", |
|
|
fontWeight: "bold", |
|
|
textDecoration: "none", |
|
|
}; |
|
|
|
|
|
const buttonStyle = { |
|
|
padding: "10px 80px", |
|
|
margin: "10px 5px", |
|
|
borderRadius: "4px", |
|
|
border: "none", |
|
|
cursor: "pointer", |
|
|
color: "#fff", |
|
|
backgroundColor: "#007bff", |
|
|
}; |
|
|
|
|
|
// upload images input |
|
|
this.uploadImagesInput = $el("input", { |
|
|
type: "file", |
|
|
multiple: false, |
|
|
style: inputStyle, |
|
|
accept: "image/*", |
|
|
}); |
|
|
|
|
|
this.uploadImagesInput.addEventListener("change", async (e) => { |
|
|
const file = e.target.files[0]; |
|
|
if (!file) { |
|
|
this.previewImage.src = ""; |
|
|
this.previewImage.style.display = "none"; |
|
|
return; |
|
|
} |
|
|
const reader = new FileReader(); |
|
|
reader.onload = async (e) => { |
|
|
const imgData = e.target.result; |
|
|
this.previewImage.src = imgData; |
|
|
this.previewImage.style.display = "block"; |
|
|
this.selectedFile = null |
|
|
// Once user uploads an image, we uncheck all radio buttons |
|
|
this.radioButtons.forEach((ele) => { |
|
|
ele.checked = false; |
|
|
ele.parentElement.classList.remove("checked"); |
|
|
}); |
|
|
|
|
|
// Add the opacity style toggle here to indicate that they only need |
|
|
// to upload one image or choose one from the outputs. |
|
|
this.outputsSection.style.opacity = 0.35; |
|
|
this.uploadImagesInput.style.opacity = 1; |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
}); |
|
|
|
|
|
// preview image |
|
|
this.previewImage = $el("img", { |
|
|
src: "", |
|
|
style: { |
|
|
width: "100%", |
|
|
maxHeight: "100px", |
|
|
objectFit: "contain", |
|
|
display: "none", |
|
|
marginTop: '10px', |
|
|
}, |
|
|
}); |
|
|
|
|
|
this.keyInput = $el("input", { |
|
|
type: "password", |
|
|
placeholder: "Copy & paste your API key", |
|
|
style: inputStyle, |
|
|
}); |
|
|
this.NameInput = $el("input", { |
|
|
type: "text", |
|
|
placeholder: "Title (required)", |
|
|
style: inputStyle, |
|
|
}); |
|
|
this.descriptionInput = $el("textarea", { |
|
|
placeholder: "Description (optional)", |
|
|
style: { |
|
|
...inputStyle, |
|
|
minHeight: "100px", |
|
|
}, |
|
|
}); |
|
|
|
|
|
// Header Section |
|
|
const headerSection = $el("h3", { |
|
|
textContent: "Share your workflow to OpenArt", |
|
|
size: 3, |
|
|
color: "white", |
|
|
style: { |
|
|
'text-align': 'center', |
|
|
color: 'white', |
|
|
margin: '0 0 10px 0', |
|
|
} |
|
|
}); |
|
|
|
|
|
// LinkSection |
|
|
this.communityLink = $el("a", { |
|
|
style: hyperLinkStyle, |
|
|
href: DEFAULT_HOMEPAGE_URL, |
|
|
target: "_blank" |
|
|
}, ["👉 Check out thousands of workflows shared from the community"]) |
|
|
this.getAPIKeyLink = $el("a", { |
|
|
style: { |
|
|
...hyperLinkStyle, |
|
|
color: "#59E8C6" |
|
|
}, |
|
|
href: DEFAULT_HOMEPAGE_URL, |
|
|
target: "_blank" |
|
|
}, ["👉 Get your API key here"]) |
|
|
const linkSection = $el( |
|
|
"div", |
|
|
{ |
|
|
style: { |
|
|
marginTop: "10px", |
|
|
display: "flex", |
|
|
flexDirection: "column", |
|
|
}, |
|
|
}, |
|
|
[ |
|
|
this.communityLink, |
|
|
this.getAPIKeyLink, |
|
|
] |
|
|
); |
|
|
|
|
|
// Account Section |
|
|
const accountSection = $el("div", {style: sectionStyle}, [ |
|
|
$el("label", {style: labelStyle}, ["1️⃣ OpenArt API Key"]), |
|
|
this.keyInput, |
|
|
]); |
|
|
|
|
|
// Output Upload Section |
|
|
const outputUploadSection = $el("div", {style: sectionStyle}, [ |
|
|
$el("label", { |
|
|
style: { |
|
|
...labelStyle, |
|
|
margin: "10px 0 0 0" |
|
|
} |
|
|
}, ["2️⃣ Image/Thumbnail (Required)"]), |
|
|
this.previewImage, |
|
|
this.uploadImagesInput, |
|
|
]); |
|
|
|
|
|
// Outputs Section |
|
|
this.outputsSection = $el("div", { |
|
|
id: "selectOutputs", |
|
|
}, []); |
|
|
|
|
|
// Additional Inputs Section |
|
|
const additionalInputsSection = $el("div", {style: sectionStyle}, [ |
|
|
$el("label", {style: labelStyle}, ["3️⃣ Workflow Information"]), |
|
|
this.NameInput, |
|
|
this.descriptionInput, |
|
|
]); |
|
|
|
|
|
// OpenArt Contest Section |
|
|
/* |
|
|
this.joinContestCheckbox = $el("input", { |
|
|
type: 'checkbox', |
|
|
id: "join_contest"s |
|
|
}, []) |
|
|
this.joinContestDescription = $el("a", { |
|
|
style: { |
|
|
...hyperLinkStyle, |
|
|
display: 'inline-block', |
|
|
color: "#59E8C6", |
|
|
fontSize: '12px', |
|
|
marginLeft: '10px', |
|
|
marginBottom: 0, |
|
|
}, |
|
|
href: "https://contest.openart.ai/", |
|
|
target: "_blank" |
|
|
}, ["🏆 I'm participating in the OpenArt workflow contest"]) |
|
|
this.joinContestLabel = $el("label", { |
|
|
style: { |
|
|
display: 'flex', |
|
|
alignItems: 'center', |
|
|
cursor: 'pointer', |
|
|
} |
|
|
}, [this.joinContestCheckbox, this.joinContestDescription]) |
|
|
const contestSection = $el("div", {style: sectionStyle}, [ |
|
|
this.joinContestLabel, |
|
|
]); |
|
|
*/ |
|
|
|
|
|
// Message Section |
|
|
this.message = $el( |
|
|
"div", |
|
|
{ |
|
|
style: { |
|
|
color: "#ff3d00", |
|
|
textAlign: "center", |
|
|
padding: "10px", |
|
|
fontSize: "20px", |
|
|
}, |
|
|
}, |
|
|
[] |
|
|
); |
|
|
|
|
|
this.shareButton = $el("button", { |
|
|
type: "submit", |
|
|
textContent: "Share", |
|
|
style: buttonStyle, |
|
|
onclick: () => { |
|
|
this.handleShareButtonClick(); |
|
|
}, |
|
|
}); |
|
|
|
|
|
// Share and Close Buttons |
|
|
const buttonsSection = $el( |
|
|
"div", |
|
|
{ |
|
|
style: { |
|
|
textAlign: "right", |
|
|
marginTop: "20px", |
|
|
display: "flex", |
|
|
justifyContent: "space-between", |
|
|
}, |
|
|
}, |
|
|
[ |
|
|
$el("button", { |
|
|
type: "button", |
|
|
textContent: "Close", |
|
|
style: { |
|
|
...buttonStyle, |
|
|
backgroundColor: undefined, |
|
|
}, |
|
|
onclick: () => { |
|
|
this.close(); |
|
|
}, |
|
|
}), |
|
|
this.shareButton, |
|
|
] |
|
|
); |
|
|
|
|
|
// Composing the full layout |
|
|
const layout = [ |
|
|
headerSection, |
|
|
linkSection, |
|
|
accountSection, |
|
|
outputUploadSection, |
|
|
this.outputsSection, |
|
|
additionalInputsSection, |
|
|
// contestSection, |
|
|
this.message, |
|
|
buttonsSection, |
|
|
]; |
|
|
|
|
|
return layout; |
|
|
} |
|
|
|
|
|
async fetchApi(path, options, statusText) { |
|
|
if (statusText) { |
|
|
this.message.textContent = statusText; |
|
|
} |
|
|
const addSearchParams = (url, params = {}) => |
|
|
new URL( |
|
|
`${url.origin}${url.pathname}?${new URLSearchParams([ |
|
|
...Array.from(url.searchParams.entries()), |
|
|
...Object.entries(params), |
|
|
])}` |
|
|
); |
|
|
|
|
|
const fullPath = addSearchParams(new URL(API_ENDPOINT + path), { |
|
|
workflow_api_key: this.keyInput.value, |
|
|
}); |
|
|
|
|
|
const response = await fetch(fullPath, options); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(response.statusText); |
|
|
} |
|
|
|
|
|
if (statusText) { |
|
|
this.message.textContent = ""; |
|
|
} |
|
|
const data = await response.json(); |
|
|
return { |
|
|
ok: response.ok, |
|
|
statusText: response.statusText, |
|
|
status: response.status, |
|
|
data, |
|
|
}; |
|
|
} |
|
|
|
|
|
async uploadThumbnail(uploadFile) { |
|
|
const form = new FormData(); |
|
|
form.append("file", uploadFile); |
|
|
try { |
|
|
const res = await this.fetchApi( |
|
|
`/workflows/upload_thumbnail`, |
|
|
{ |
|
|
method: "POST", |
|
|
body: form, |
|
|
}, |
|
|
"Uploading thumbnail..." |
|
|
); |
|
|
|
|
|
if (res.ok && res.data) { |
|
|
const {image_url, width, height} = res.data; |
|
|
this.uploadedImages.push({ |
|
|
url: image_url, |
|
|
width, |
|
|
height, |
|
|
}); |
|
|
} |
|
|
} catch (e) { |
|
|
if (e?.response?.status === 413) { |
|
|
throw new Error("File size is too large (max 20MB)"); |
|
|
} else { |
|
|
throw new Error("Error uploading thumbnail: " + e.message); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
async handleShareButtonClick() { |
|
|
this.message.textContent = ""; |
|
|
await this.saveKey(this.keyInput.value); |
|
|
try { |
|
|
this.shareButton.disabled = true; |
|
|
this.shareButton.textContent = "Sharing..."; |
|
|
await this.share(); |
|
|
} catch (e) { |
|
|
alert(e.message); |
|
|
} |
|
|
this.shareButton.disabled = false; |
|
|
this.shareButton.textContent = "Share"; |
|
|
} |
|
|
|
|
|
async share() { |
|
|
const prompt = await app.graphToPrompt(); |
|
|
const workflowJSON = prompt["workflow"]; |
|
|
const workflowAPIJSON = prompt["output"]; |
|
|
const form_values = { |
|
|
name: this.NameInput.value, |
|
|
description: this.descriptionInput.value, |
|
|
}; |
|
|
|
|
|
if (!this.keyInput.value) { |
|
|
throw new Error("API key is required"); |
|
|
} |
|
|
|
|
|
if (!this.uploadImagesInput.files[0] && !this.selectedFile) { |
|
|
throw new Error("Thumbnail is required"); |
|
|
} |
|
|
|
|
|
if (!form_values.name) { |
|
|
throw new Error("Title is required"); |
|
|
} |
|
|
|
|
|
const current_snapshot = await api.fetchApi(`/snapshot/get_current`) |
|
|
.then(response => response.json()) |
|
|
.catch(error => { |
|
|
// console.log(error); |
|
|
}); |
|
|
|
|
|
|
|
|
if (!this.uploadedImages.length) { |
|
|
if (this.selectedFile) { |
|
|
await this.uploadThumbnail(this.selectedFile); |
|
|
} else { |
|
|
for (const file of this.uploadImagesInput.files) { |
|
|
try { |
|
|
await this.uploadThumbnail(file); |
|
|
} catch (e) { |
|
|
this.uploadedImages = []; |
|
|
throw new Error(e.message); |
|
|
} |
|
|
} |
|
|
|
|
|
if (this.uploadImagesInput.files.length === 0) { |
|
|
throw new Error("No thumbnail uploaded"); |
|
|
} |
|
|
|
|
|
if (this.uploadImagesInput.files.length === 0) { |
|
|
throw new Error("No thumbnail uploaded"); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// const join_contest = this.joinContestCheckbox.checked; |
|
|
|
|
|
try { |
|
|
const response = await this.fetchApi( |
|
|
"/workflows/publish", |
|
|
{ |
|
|
method: "POST", |
|
|
headers: {"Content-Type": "application/json"}, |
|
|
body: JSON.stringify({ |
|
|
workflow_json: workflowJSON, |
|
|
upload_images: this.uploadedImages, |
|
|
form_values, |
|
|
advanced_config: { |
|
|
workflow_api_json: workflowAPIJSON, |
|
|
snapshot: current_snapshot, |
|
|
}, |
|
|
// join_contest, |
|
|
}), |
|
|
}, |
|
|
"Uploading workflow..." |
|
|
); |
|
|
|
|
|
if (response.ok) { |
|
|
const {workflow_id} = response.data; |
|
|
if (workflow_id) { |
|
|
const url = `https://openart.ai/workflows/-/-/${workflow_id}`; |
|
|
this.message.innerHTML = `Workflow has been shared successfully. <a href="${url}" target="_blank">Click here to view it.</a>`; |
|
|
this.previewImage.src = ""; |
|
|
this.previewImage.style.display = "none"; |
|
|
this.uploadedImages = []; |
|
|
this.NameInput.value = ""; |
|
|
this.descriptionInput.value = ""; |
|
|
this.radioButtons.forEach((ele) => { |
|
|
ele.checked = false; |
|
|
ele.parentElement.classList.remove("checked"); |
|
|
}); |
|
|
this.selectedOutputIndex = 0; |
|
|
this.selectedNodeId = null; |
|
|
this.selectedFile = null; |
|
|
} |
|
|
} |
|
|
} catch (e) { |
|
|
throw new Error("Error sharing workflow: " + e.message); |
|
|
} |
|
|
} |
|
|
|
|
|
async fetchImageBlob(url) { |
|
|
const response = await fetch(url); |
|
|
const blob = await response.blob(); |
|
|
return blob; |
|
|
} |
|
|
|
|
|
async show({potential_outputs, potential_output_nodes} = {}) { |
|
|
// Sort `potential_output_nodes` by node ID to make the order always |
|
|
// consistent, but we should also keep `potential_outputs` in the same |
|
|
// order as `potential_output_nodes`. |
|
|
const potential_output_to_order = {}; |
|
|
potential_output_nodes.forEach((node, 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) |
|
|
const sorted_potential_output_to_order = Object.fromEntries( |
|
|
Object.entries(potential_output_to_order).sort((a, b) => a[0].id - b[0].id) |
|
|
); |
|
|
const sorted_potential_outputs = [] |
|
|
const sorted_potential_output_nodes = [] |
|
|
for (const [key, value] of Object.entries(sorted_potential_output_to_order)) { |
|
|
sorted_potential_output_nodes.push(value[0]); |
|
|
sorted_potential_outputs.push(...value[1]); |
|
|
} |
|
|
potential_output_nodes = sorted_potential_output_nodes; |
|
|
potential_outputs = sorted_potential_outputs; |
|
|
|
|
|
this.message.innerHTML = ""; |
|
|
this.message.textContent = ""; |
|
|
this.element.style.display = "block"; |
|
|
this.previewImage.src = ""; |
|
|
this.previewImage.style.display = "none"; |
|
|
const key = await this.readKey(); |
|
|
this.keyInput.value = key; |
|
|
this.uploadedImages = []; |
|
|
|
|
|
// If `selectedNodeId` is provided, we will select the corresponding radio |
|
|
// button for the node. In addition, we move the selected radio button to |
|
|
// the top of the list. |
|
|
if (this.selectedNodeId) { |
|
|
const index = potential_output_nodes.findIndex(node => node.id === this.selectedNodeId); |
|
|
if (index >= 0) { |
|
|
this.selectedOutputIndex = index; |
|
|
} |
|
|
} |
|
|
|
|
|
this.radioButtons = []; |
|
|
const new_radio_buttons = $el("div", |
|
|
{ |
|
|
id: "selectOutput-Options", |
|
|
style: { |
|
|
'overflow-y': 'scroll', |
|
|
'max-height': '200px', |
|
|
|
|
|
'display': 'grid', |
|
|
'grid-template-columns': 'repeat(auto-fit, minmax(100px, 1fr))', |
|
|
'grid-template-rows': 'auto', |
|
|
'grid-column-gap': '10px', |
|
|
'grid-row-gap': '10px', |
|
|
'margin-bottom': '10px', |
|
|
'padding': '10px', |
|
|
'border-radius': '8px', |
|
|
'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.05)', |
|
|
'background-color': 'var(--bg-color)', |
|
|
} |
|
|
}, |
|
|
potential_outputs.map((output, index) => { |
|
|
const {node_id} = output; |
|
|
const radio_button = $el("input", { |
|
|
type: 'radio', |
|
|
name: "selectOutputImages", |
|
|
value: index, |
|
|
required: index === 0 |
|
|
}, []) |
|
|
let radio_button_img; |
|
|
let filename; |
|
|
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" |
|
|
} |
|
|
}, []); |
|
|
filename = output.image.filename |
|
|
} else if (output.type === "output") { |
|
|
radio_button_img = $el("img", { |
|
|
src: output.output.value, |
|
|
style: { |
|
|
width: "auto", |
|
|
height: "100px", |
|
|
objectFit: "cover", |
|
|
borderRadius: "5px" |
|
|
} |
|
|
}, []); |
|
|
filename = output.filename |
|
|
} else { |
|
|
// unsupported output type |
|
|
// this should never happen |
|
|
// TODO |
|
|
radio_button_img = $el("img", { |
|
|
src: "", |
|
|
style: {width: "auto", height: "100px"} |
|
|
}, []); |
|
|
} |
|
|
const radio_button_text = $el("span", { |
|
|
style: { |
|
|
color: 'gray', |
|
|
display: 'block', |
|
|
fontSize: '12px', |
|
|
overflowX: 'hidden', |
|
|
textOverflow: 'ellipsis', |
|
|
textWrap: 'nowrap', |
|
|
maxWidth: '100px', |
|
|
} |
|
|
}, [output.title]) |
|
|
const node_id_chip = $el("span", { |
|
|
style: { |
|
|
color: '#FBFBFD', |
|
|
display: 'block', |
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
|
|
fontSize: '12px', |
|
|
overflowX: 'hidden', |
|
|
padding: '2px 3px', |
|
|
textOverflow: 'ellipsis', |
|
|
textWrap: 'nowrap', |
|
|
maxWidth: '100px', |
|
|
position: 'absolute', |
|
|
top: '3px', |
|
|
left: '3px', |
|
|
borderRadius: '3px', |
|
|
} |
|
|
}, [`Node: ${node_id}`]) |
|
|
radio_button.style.color = "var(--fg-color)"; |
|
|
radio_button.checked = this.selectedOutputIndex === index; |
|
|
|
|
|
radio_button.onchange = async () => { |
|
|
this.selectedOutputIndex = parseInt(radio_button.value); |
|
|
|
|
|
// Remove the "checked" class from all radio buttons |
|
|
this.radioButtons.forEach((ele) => { |
|
|
ele.parentElement.classList.remove("checked"); |
|
|
}); |
|
|
radio_button.parentElement.classList.add("checked"); |
|
|
|
|
|
this.fetchImageBlob(radio_button_img.src).then((blob) => { |
|
|
const file = new File([blob], filename, { |
|
|
type: blob.type, |
|
|
}); |
|
|
this.previewImage.src = radio_button_img.src; |
|
|
this.previewImage.style.display = "block"; |
|
|
this.selectedFile = file; |
|
|
}) |
|
|
|
|
|
// Add the opacity style toggle here to indicate that they only need |
|
|
// to upload one image or choose one from the outputs. |
|
|
this.outputsSection.style.opacity = 1; |
|
|
this.uploadImagesInput.style.opacity = 0.35; |
|
|
}; |
|
|
|
|
|
if (radio_button.checked) { |
|
|
this.fetchImageBlob(radio_button_img.src).then((blob) => { |
|
|
const file = new File([blob], filename, { |
|
|
type: blob.type, |
|
|
}); |
|
|
this.previewImage.src = radio_button_img.src; |
|
|
this.previewImage.style.display = "block"; |
|
|
this.selectedFile = file; |
|
|
}) |
|
|
// Add the opacity style toggle here to indicate that they only need |
|
|
// to upload one image or choose one from the outputs. |
|
|
this.outputsSection.style.opacity = 1; |
|
|
this.uploadImagesInput.style.opacity = 0.35; |
|
|
} |
|
|
|
|
|
this.radioButtons.push(radio_button); |
|
|
|
|
|
return $el(`label.output_label${radio_button.checked ? '.checked' : ''}`, { |
|
|
style: { |
|
|
display: "flex", |
|
|
flexDirection: "column", |
|
|
alignItems: "center", |
|
|
justifyContent: "center", |
|
|
marginBottom: "10px", |
|
|
cursor: "pointer", |
|
|
position: 'relative', |
|
|
} |
|
|
}, [radio_button_img, radio_button_text, radio_button, node_id_chip]); |
|
|
}) |
|
|
); |
|
|
|
|
|
const header = |
|
|
$el("p", { |
|
|
textContent: this.radioButtons.length === 0 ? "Queue Prompt to see the outputs" : "Or choose one from the outputs (scroll to see all)", |
|
|
size: 2, |
|
|
color: "white", |
|
|
style: { |
|
|
color: 'white', |
|
|
margin: '0 0 5px 0', |
|
|
fontSize: '12px', |
|
|
}, |
|
|
}, []) |
|
|
this.outputsSection.innerHTML = ""; |
|
|
this.outputsSection.appendChild(header); |
|
|
this.outputsSection.appendChild(new_radio_buttons); |
|
|
} |
|
|
}
|
|
|
|
