Browse Source
Add YouML as an option to share workflows and convert them into interactive apps.pull/308/head
alexp
11 months ago
committed by
Alex Prokofiev
5 changed files with 658 additions and 5 deletions
@ -0,0 +1,568 @@ |
|||||||
|
import {app} from "../../scripts/app.js"; |
||||||
|
import {api} from "../../scripts/api.js"; |
||||||
|
import {ComfyDialog, $el} from "../../scripts/ui.js"; |
||||||
|
|
||||||
|
const BASE_URL = "https://youml.com"; |
||||||
|
//const BASE_URL = "http://localhost:3000";
|
||||||
|
const DEFAULT_HOMEPAGE_URL = `${BASE_URL}/?from=comfyui`; |
||||||
|
const TOKEN_PAGE_URL = `${BASE_URL}/my-token`; |
||||||
|
const API_ENDPOINT = `${BASE_URL}/api`; |
||||||
|
|
||||||
|
const style = ` |
||||||
|
.youml-share-dialog { |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
.youml-share-dialog .dialog-header { |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
margin: 0 0 10px 0; |
||||||
|
}
|
||||||
|
.youml-share-dialog .dialog-section { |
||||||
|
margin-bottom: 0; |
||||||
|
padding: 0; |
||||||
|
border-radius: 8px; |
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
}
|
||||||
|
.youml-share-dialog input, .youml-share-dialog textarea { |
||||||
|
display: block; |
||||||
|
min-width: 500px; |
||||||
|
width: 100%; |
||||||
|
padding: 10px; |
||||||
|
margin: 10px 0; |
||||||
|
border-radius: 4px; |
||||||
|
border: 1px solid #ddd; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.youml-share-dialog textarea { |
||||||
|
color: var(--input-text); |
||||||
|
background-color: var(--comfy-input-bg); |
||||||
|
}
|
||||||
|
.youml-share-dialog .workflow-description { |
||||||
|
min-height: 75px; |
||||||
|
}
|
||||||
|
.youml-share-dialog label { |
||||||
|
color: #f8f8f8; |
||||||
|
display: block; |
||||||
|
margin: 5px 0 0 0; |
||||||
|
font-weight: bold; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.youml-share-dialog .action-button {
|
||||||
|
padding: 10px 80px; |
||||||
|
margin: 10px 5px; |
||||||
|
border-radius: 4px; |
||||||
|
border: none; |
||||||
|
cursor: pointer; |
||||||
|
}
|
||||||
|
.youml-share-dialog .share-button { |
||||||
|
color: #fff; |
||||||
|
background-color: #007bff; |
||||||
|
}
|
||||||
|
.youml-share-dialog .close-button {
|
||||||
|
background-color: none; |
||||||
|
} |
||||||
|
.youml-share-dialog .action-button-panel {
|
||||||
|
text-align: right;
|
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.youml-share-dialog .status-message {
|
||||||
|
color: #fd7909; |
||||||
|
text-align: center; |
||||||
|
padding: 5px; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.youml-share-dialog .status-message a {
|
||||||
|
color: white; |
||||||
|
}
|
||||||
|
.youml-share-dialog .output-panel {
|
||||||
|
overflow: auto; |
||||||
|
max-height: 180px;
|
||||||
|
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); |
||||||
|
}
|
||||||
|
.youml-share-dialog .output-panel .output-image {
|
||||||
|
width: 100px; |
||||||
|
height: 100px; |
||||||
|
objectFit: cover; |
||||||
|
borderRadius: 5px; |
||||||
|
}
|
||||||
|
|
||||||
|
.youml-share-dialog .output-panel .radio-button { |
||||||
|
color:var(--fg-color); |
||||||
|
}
|
||||||
|
.youml-share-dialog .output-panel .radio-text {
|
||||||
|
color: gray; |
||||||
|
display: block; |
||||||
|
font-size: 12px; |
||||||
|
overflow-x: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
text-wrap: nowrap; |
||||||
|
max-width: 100px; |
||||||
|
} |
||||||
|
.youml-share-dialog .output-panel .node-id {
|
||||||
|
color: #FBFBFD; |
||||||
|
display: block; |
||||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||||
|
font-size: 12px; |
||||||
|
overflow-x: hidden; |
||||||
|
padding: 2px 3px; |
||||||
|
text-overflow: ellipsis; |
||||||
|
text-wrap: nowrap; |
||||||
|
max-width: 100px; |
||||||
|
position: absolute; |
||||||
|
top: 3px; |
||||||
|
left: 3px; |
||||||
|
border-radius: 3px; |
||||||
|
}
|
||||||
|
.youml-share-dialog .output-panel .output-label { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
margin-bottom: 10px; |
||||||
|
cursor: pointer; |
||||||
|
position: relative; |
||||||
|
border: 5px solid transparent; |
||||||
|
} |
||||||
|
.youml-share-dialog .output-panel .output-label:hover { |
||||||
|
border: 5px solid #007bff; |
||||||
|
} |
||||||
|
.youml-share-dialog .output-panel .output-label.checked { |
||||||
|
border: 5px solid #007bff; |
||||||
|
}
|
||||||
|
.youml-share-dialog .missing-output-message{ |
||||||
|
color: #fd7909; |
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom:10px
|
||||||
|
} |
||||||
|
.youml-share-dialog .select-output-message{ |
||||||
|
color: white; |
||||||
|
margin-bottom:5px
|
||||||
|
} |
||||||
|
`;
|
||||||
|
|
||||||
|
export class YouMLShareDialog extends ComfyDialog { |
||||||
|
static instance = null; |
||||||
|
|
||||||
|
constructor() { |
||||||
|
super(); |
||||||
|
$el("style", { |
||||||
|
textContent: style, |
||||||
|
parent: document.head, |
||||||
|
}); |
||||||
|
this.element = $el( |
||||||
|
"div.comfy-modal.youml-share-dialog", |
||||||
|
{ |
||||||
|
parent: document.body, |
||||||
|
}, |
||||||
|
[$el("div.comfy-modal-content", {}, [...this.createLayout()])] |
||||||
|
); |
||||||
|
this.selectedOutputIndex = 0; |
||||||
|
this.selectedNodeId = null; |
||||||
|
this.uploadedImages = []; |
||||||
|
this.selectedFile = null; |
||||||
|
} |
||||||
|
|
||||||
|
async loadToken() { |
||||||
|
let key = "" |
||||||
|
try { |
||||||
|
const response = await api.fetchApi(`/manager/youml/settings`) |
||||||
|
const settings = await response.json() |
||||||
|
return settings.token |
||||||
|
} catch (error) { |
||||||
|
} |
||||||
|
return key || ""; |
||||||
|
} |
||||||
|
|
||||||
|
async saveToken(value) { |
||||||
|
await api.fetchApi(`/manager/youml/settings`, { |
||||||
|
method: 'POST', |
||||||
|
headers: {'Content-Type': 'application/json'}, |
||||||
|
body: JSON.stringify({ |
||||||
|
token: value |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
createLayout() { |
||||||
|
// Header Section
|
||||||
|
const headerSection = $el("h3.dialog-header", { |
||||||
|
textContent: "Share your workflow to YouML.com", |
||||||
|
size: 3, |
||||||
|
}); |
||||||
|
|
||||||
|
// Workflow Info Section
|
||||||
|
this.nameInput = $el("input", { |
||||||
|
type: "text", |
||||||
|
placeholder: "Name (required)", |
||||||
|
}); |
||||||
|
this.descriptionInput = $el("textarea.workflow-description", { |
||||||
|
placeholder: "Description (optional, markdown supported)", |
||||||
|
}); |
||||||
|
const workflowMetadata = $el("div.dialog-section", {}, [ |
||||||
|
$el("label", {}, ["Workflow info"]), |
||||||
|
this.nameInput, |
||||||
|
this.descriptionInput, |
||||||
|
]); |
||||||
|
|
||||||
|
// Outputs Section
|
||||||
|
this.outputsSection = $el("div.dialog-section", { |
||||||
|
id: "selectOutputs", |
||||||
|
}, []); |
||||||
|
|
||||||
|
const outputUploadSection = $el("div.dialog-section", {}, [ |
||||||
|
$el("label", {}, ["Thumbnail"]), |
||||||
|
this.outputsSection, |
||||||
|
]); |
||||||
|
|
||||||
|
// API Token Section
|
||||||
|
this.apiTokenInput = $el("input", { |
||||||
|
type: "password", |
||||||
|
placeholder: "Copy & paste your API token", |
||||||
|
}); |
||||||
|
const getAPITokenButton = $el("button", { |
||||||
|
href: DEFAULT_HOMEPAGE_URL, |
||||||
|
target: "_blank", |
||||||
|
onclick: () => window.open(TOKEN_PAGE_URL, "_blank"), |
||||||
|
}, ["Get your API Token"]) |
||||||
|
|
||||||
|
const apiTokenSection = $el("div.dialog-section", {}, [ |
||||||
|
$el("label", {}, ["YouML API Token"]), |
||||||
|
this.apiTokenInput, |
||||||
|
getAPITokenButton, |
||||||
|
]); |
||||||
|
|
||||||
|
// Message Section
|
||||||
|
this.message = $el("div.status-message", {}, []); |
||||||
|
|
||||||
|
// Share and Close Buttons
|
||||||
|
this.shareButton = $el("button.action-button.share-button", { |
||||||
|
type: "submit", |
||||||
|
textContent: "Share", |
||||||
|
onclick: () => { |
||||||
|
this.handleShareButtonClick(); |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
const buttonsSection = $el( |
||||||
|
"div.action-button-panel", |
||||||
|
{}, |
||||||
|
[ |
||||||
|
$el("button.action-button.close-button", { |
||||||
|
type: "button", |
||||||
|
textContent: "Close", |
||||||
|
onclick: () => { |
||||||
|
this.close(); |
||||||
|
}, |
||||||
|
}), |
||||||
|
this.shareButton, |
||||||
|
] |
||||||
|
); |
||||||
|
|
||||||
|
// Composing the full layout
|
||||||
|
const layout = [ |
||||||
|
headerSection, |
||||||
|
workflowMetadata, |
||||||
|
outputUploadSection, |
||||||
|
apiTokenSection, |
||||||
|
this.message, |
||||||
|
buttonsSection, |
||||||
|
]; |
||||||
|
|
||||||
|
return layout; |
||||||
|
} |
||||||
|
|
||||||
|
async fetchYoumlApi(path, options, statusText) { |
||||||
|
if (statusText) { |
||||||
|
this.message.textContent = statusText; |
||||||
|
} |
||||||
|
|
||||||
|
const fullPath = new URL(API_ENDPOINT + path) |
||||||
|
|
||||||
|
const fetchOptions = Object.assign({}, options) |
||||||
|
|
||||||
|
fetchOptions.headers = { |
||||||
|
...fetchOptions.headers, |
||||||
|
"Authorization": `Bearer ${this.apiTokenInput.value}`, |
||||||
|
"User-Agent": "ComfyUI-Manager-Youml/1.0.0", |
||||||
|
} |
||||||
|
|
||||||
|
const response = await fetch(fullPath, fetchOptions); |
||||||
|
|
||||||
|
if (!response.ok) { |
||||||
|
throw new Error(response.statusText + " " + (await response.text())); |
||||||
|
} |
||||||
|
|
||||||
|
if (statusText) { |
||||||
|
this.message.textContent = ""; |
||||||
|
} |
||||||
|
const data = await response.json(); |
||||||
|
return { |
||||||
|
ok: response.ok, |
||||||
|
statusText: response.statusText, |
||||||
|
status: response.status, |
||||||
|
data, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
async uploadThumbnail(uploadFile, recipeId) { |
||||||
|
const form = new FormData(); |
||||||
|
form.append("file", uploadFile, uploadFile.name); |
||||||
|
try { |
||||||
|
const res = await this.fetchYoumlApi( |
||||||
|
`/v1/comfy/recipes/${recipeId}/thumbnail`, |
||||||
|
{ |
||||||
|
method: "POST", |
||||||
|
body: form, |
||||||
|
}, |
||||||
|
"Uploading thumbnail..." |
||||||
|
); |
||||||
|
|
||||||
|
} 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.saveToken(this.apiTokenInput.value); |
||||||
|
try { |
||||||
|
this.shareButton.disabled = true; |
||||||
|
this.shareButton.textContent = "Sharing..."; |
||||||
|
await this.share(); |
||||||
|
} catch (e) { |
||||||
|
alert(e.message); |
||||||
|
} finally { |
||||||
|
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.apiTokenInput.value) { |
||||||
|
throw new Error("API token is required"); |
||||||
|
} |
||||||
|
|
||||||
|
if (!this.selectedFile) { |
||||||
|
throw new Error("Thumbnail is required"); |
||||||
|
} |
||||||
|
|
||||||
|
if (!form_values.name) { |
||||||
|
throw new Error("Title is required"); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
try { |
||||||
|
let snapshotData = null; |
||||||
|
try { |
||||||
|
const snapshot = await api.fetchApi(`/snapshot/get_current`) |
||||||
|
snapshotData = await snapshot.json() |
||||||
|
} catch (e) { |
||||||
|
console.error("Failed to get snapshot", e) |
||||||
|
} |
||||||
|
|
||||||
|
const request = { |
||||||
|
name: this.nameInput.value, |
||||||
|
description: this.descriptionInput.value, |
||||||
|
workflowUiJson: JSON.stringify(workflowJSON), |
||||||
|
workflowApiJson: JSON.stringify(workflowAPIJSON), |
||||||
|
} |
||||||
|
|
||||||
|
if (snapshotData) { |
||||||
|
request.snapshotJson = JSON.stringify(snapshotData) |
||||||
|
} |
||||||
|
|
||||||
|
const response = await this.fetchYoumlApi( |
||||||
|
"/v1/comfy/recipes", |
||||||
|
{ |
||||||
|
method: "POST", |
||||||
|
headers: {"Content-Type": "application/json"}, |
||||||
|
body: JSON.stringify(request), |
||||||
|
}, |
||||||
|
"Uploading workflow..." |
||||||
|
); |
||||||
|
|
||||||
|
if (response.ok) { |
||||||
|
const {id, recipePageUrl, editorPageUrl} = response.data; |
||||||
|
if (id) { |
||||||
|
let messagePrefix = "Workflow has been shared." |
||||||
|
if (this.selectedFile) { |
||||||
|
try { |
||||||
|
await this.uploadThumbnail(this.selectedFile, id); |
||||||
|
} catch (e) { |
||||||
|
console.error("Thumbnail upload failed: ", e); |
||||||
|
messagePrefix = "Workflow has been shared, but thumbnail upload failed. You can create a thumbnail on YouML later." |
||||||
|
} |
||||||
|
} |
||||||
|
this.message.innerHTML = `${messagePrefix} To turn your workflow into an interactive app, ` + |
||||||
|
`<a href="${recipePageUrl}" target="_blank">visit it on YouML</a>`; |
||||||
|
|
||||||
|
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(potentialOutputs, potentialOutputNodes) { |
||||||
|
const potentialOutputsToOrder = {}; |
||||||
|
potentialOutputNodes.forEach((node, index) => { |
||||||
|
if (node.id in potentialOutputsToOrder) { |
||||||
|
potentialOutputsToOrder[node.id][1].push(potentialOutputs[index]); |
||||||
|
} else { |
||||||
|
potentialOutputsToOrder[node.id] = [node, [potentialOutputs[index]]]; |
||||||
|
} |
||||||
|
}) |
||||||
|
const sortedPotentialOutputsToOrder = Object.fromEntries( |
||||||
|
Object.entries(potentialOutputsToOrder).sort((a, b) => a[0].id - b[0].id) |
||||||
|
); |
||||||
|
const sortedPotentialOutputs = [] |
||||||
|
const sortedPotentiaOutputNodes = [] |
||||||
|
for (const [key, value] of Object.entries(sortedPotentialOutputsToOrder)) { |
||||||
|
sortedPotentiaOutputNodes.push(value[0]); |
||||||
|
sortedPotentialOutputs.push(...value[1]); |
||||||
|
} |
||||||
|
potentialOutputNodes = sortedPotentiaOutputNodes; |
||||||
|
potentialOutputs = sortedPotentialOutputs; |
||||||
|
|
||||||
|
|
||||||
|
// 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 = potentialOutputNodes.findIndex(node => node.id === this.selectedNodeId); |
||||||
|
if (index >= 0) { |
||||||
|
this.selectedOutputIndex = index; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
this.radioButtons = []; |
||||||
|
const newRadioButtons = $el("div.output-panel", |
||||||
|
{ |
||||||
|
id: "selectOutput-Options", |
||||||
|
}, |
||||||
|
potentialOutputs.map((output, index) => { |
||||||
|
const {node_id: nodeId} = output; |
||||||
|
const radioButton = $el("input.radio-button", { |
||||||
|
type: "radio", |
||||||
|
name: "selectOutputImages", |
||||||
|
value: index, |
||||||
|
required: index === 0 |
||||||
|
}, []) |
||||||
|
let radioButtonImage; |
||||||
|
let filename; |
||||||
|
if (output.type === "image" || output.type === "temp") { |
||||||
|
radioButtonImage = $el("img.output-image", { |
||||||
|
src: `/view?filename=${output.image.filename}&subfolder=${output.image.subfolder}&type=${output.image.type}`, |
||||||
|
}, []); |
||||||
|
filename = output.image.filename |
||||||
|
} else if (output.type === "output") { |
||||||
|
radioButtonImage = $el("img.output-image", { |
||||||
|
src: output.output.value, |
||||||
|
}, []); |
||||||
|
filename = output.output.filename |
||||||
|
} else { |
||||||
|
radioButtonImage = $el("img.output-image", { |
||||||
|
src: "", |
||||||
|
}, []); |
||||||
|
} |
||||||
|
const radioButtonText = $el("span.radio-text", {}, [output.title]) |
||||||
|
const nodeIdChip = $el("span.node-id", {}, [`Node: ${nodeId}`]) |
||||||
|
radioButton.checked = this.selectedOutputIndex === index; |
||||||
|
|
||||||
|
radioButton.onchange = async () => { |
||||||
|
this.selectedOutputIndex = parseInt(radioButton.value); |
||||||
|
|
||||||
|
// Remove the "checked" class from all radio buttons
|
||||||
|
this.radioButtons.forEach((ele) => { |
||||||
|
ele.parentElement.classList.remove("checked"); |
||||||
|
}); |
||||||
|
radioButton.parentElement.classList.add("checked"); |
||||||
|
|
||||||
|
this.fetchImageBlob(radioButtonImage.src).then((blob) => { |
||||||
|
const file = new File([blob], filename, { |
||||||
|
type: blob.type, |
||||||
|
}); |
||||||
|
this.selectedFile = file; |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
if (radioButton.checked) { |
||||||
|
this.fetchImageBlob(radioButtonImage.src).then((blob) => { |
||||||
|
const file = new File([blob], filename, { |
||||||
|
type: blob.type, |
||||||
|
}); |
||||||
|
this.selectedFile = file; |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
this.radioButtons.push(radioButton); |
||||||
|
|
||||||
|
return $el(`label.output-label${radioButton.checked ? '.checked' : ''}`, {}, |
||||||
|
[radioButtonImage, radioButtonText, radioButton, nodeIdChip]); |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
let header; |
||||||
|
if (this.radioButtons.length === 0) { |
||||||
|
header = $el("div.missing-output-message", {textContent: "Queue Prompt to see the outputs and select a thumbnail"}, []) |
||||||
|
} else { |
||||||
|
header = $el("div.select-output-message", {textContent: "Choose one from the outputs (scroll to see all)"}, []) |
||||||
|
} |
||||||
|
|
||||||
|
this.outputsSection.innerHTML = ""; |
||||||
|
this.outputsSection.appendChild(header); |
||||||
|
if (this.radioButtons.length > 0) { |
||||||
|
this.outputsSection.appendChild(newRadioButtons); |
||||||
|
} |
||||||
|
|
||||||
|
this.message.innerHTML = ""; |
||||||
|
this.message.textContent = ""; |
||||||
|
|
||||||
|
const token = await this.loadToken(); |
||||||
|
this.apiTokenInput.value = token; |
||||||
|
this.uploadedImages = []; |
||||||
|
|
||||||
|
this.element.style.display = "block"; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue