mirror of
https://github.com/comfyanonymous/ComfyUI.git
synced 2025-01-11 10:25:16 +00:00
215 lines
5.8 KiB
HTML
215 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="lib/litegraph.css" />
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
<script type="text/javascript" src="lib/litegraph.core.js"></script>
|
|
|
|
<script type="module">
|
|
import { app } from "/scripts/app.js";
|
|
await app.setup();
|
|
window.app = app;
|
|
window.graph = app.graph;
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
return;
|
|
|
|
let runningNodeId = null;
|
|
let progress = null;
|
|
let clientId = null;
|
|
|
|
function clearGraph() {
|
|
graph.clear();
|
|
}
|
|
|
|
function loadTxt2Img() {
|
|
loadGraphData(graph, default_graph);
|
|
}
|
|
|
|
function saveGraph() {
|
|
var json = JSON.stringify(graph.serialize()); // convert the data to a JSON string
|
|
var blob = new Blob([json], { type: "application/json" });
|
|
var url = URL.createObjectURL(blob);
|
|
var a = document.createElement("a");
|
|
a.style = "display: none";
|
|
a.href = url;
|
|
a.download = "workflow.json";
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
setTimeout(function () {
|
|
document.body.removeChild(a);
|
|
window.URL.revokeObjectURL(url);
|
|
}, 0);
|
|
}
|
|
|
|
var input = document.createElement("input");
|
|
input.setAttribute("type", "file");
|
|
input.setAttribute("accept", ".json,image/png");
|
|
input.style.display = "none";
|
|
document.body.appendChild(input);
|
|
|
|
input.addEventListener("change", function () {
|
|
var file = input.files[0];
|
|
prompt_file_load(file);
|
|
});
|
|
|
|
function loadGraph() {
|
|
input.click();
|
|
}
|
|
|
|
document.addEventListener("paste", (e) => {
|
|
let data = (e.clipboardData || window.clipboardData).getData("text/plain");
|
|
console.log(data);
|
|
|
|
try {
|
|
data = data.slice(data.indexOf("{"));
|
|
j = JSON.parse(data);
|
|
} catch (err) {
|
|
data = data.slice(data.indexOf("workflow\n"));
|
|
data = data.slice(data.indexOf("{"));
|
|
j = JSON.parse(data);
|
|
}
|
|
|
|
if (Object.hasOwn(j, "version") && Object.hasOwn(j, "nodes") && Object.hasOwn(j, "extra")) {
|
|
loadGraphData(graph, j);
|
|
}
|
|
});
|
|
|
|
function deleteQueueElement(type, delete_id, then) {
|
|
fetch("/" + type, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ delete: [delete_id] }),
|
|
})
|
|
.then((data) => {
|
|
console.log(data);
|
|
then();
|
|
})
|
|
.catch((error) => console.error(error));
|
|
}
|
|
|
|
function loadQueue() {
|
|
loadItems("queue");
|
|
}
|
|
function loadHistory() {
|
|
loadItems("history");
|
|
}
|
|
function loadItems(type) {
|
|
fetch("/" + type)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
var queue_div = document.getElementById(type + "button-content");
|
|
queue_div.style.display = "block";
|
|
var see_queue_button = document.getElementById("see" + type + "button");
|
|
let old_w = see_queue_button.style.width;
|
|
see_queue_button.innerHTML = "Close";
|
|
|
|
let runningcontents;
|
|
if (type === "queue") {
|
|
runningcontents = document.getElementById("runningcontents");
|
|
runningcontents.innerHTML = "";
|
|
}
|
|
let queuecontents = document.getElementById(type + "contents");
|
|
queuecontents.innerHTML = "";
|
|
function append_to_list(list_element, append_to_element, append_delete, state) {
|
|
let number = list_element[0];
|
|
let id = list_element[1];
|
|
let prompt = list_element[2];
|
|
let workflow = list_element[3].extra_pnginfo.workflow;
|
|
let a = document.createElement("a");
|
|
a.innerHTML = number + ": ";
|
|
append_to_element.appendChild(a);
|
|
let button = document.createElement("button");
|
|
button.innerHTML = "Load";
|
|
button.style.fontSize = "10px";
|
|
button.workflow = workflow;
|
|
button.onclick = function (event) {
|
|
loadGraphData(graph, event.target.workflow);
|
|
if (state) {
|
|
nodeOutputs = state;
|
|
}
|
|
};
|
|
|
|
append_to_element.appendChild(button);
|
|
if (append_delete) {
|
|
let button = document.createElement("button");
|
|
button.innerHTML = "Delete";
|
|
button.style.fontSize = "10px";
|
|
button.delete_id = id;
|
|
button.onclick = function (event) {
|
|
deleteQueueElement(type, event.target.delete_id, () => loadItems(type));
|
|
};
|
|
append_to_element.appendChild(button);
|
|
}
|
|
append_to_element.appendChild(document.createElement("br"));
|
|
}
|
|
|
|
if (runningcontents) {
|
|
for (let x in data.queue_running) {
|
|
append_to_list(data.queue_running[x], runningcontents, false);
|
|
}
|
|
}
|
|
|
|
let items;
|
|
if (type === "queue") {
|
|
items = data.queue_pending;
|
|
} else {
|
|
items = Object.values(data);
|
|
}
|
|
items.sort((a, b) => a[0] - b[0]);
|
|
for (let i of items) {
|
|
append_to_list(type === "queue" ? i : i.prompt, queuecontents, true, i.outputs);
|
|
}
|
|
})
|
|
.catch((response) => {
|
|
console.log(response);
|
|
});
|
|
}
|
|
|
|
function seeItems(type) {
|
|
var queue_div = document.getElementById(type + "button-content");
|
|
if (queue_div.style.display == "block") {
|
|
closeItems(type);
|
|
} else {
|
|
loadItems(type);
|
|
}
|
|
}
|
|
|
|
function seeQueue() {
|
|
closeItems("history");
|
|
seeItems("queue");
|
|
}
|
|
|
|
function seeHistory() {
|
|
closeItems("queue");
|
|
seeItems("history");
|
|
}
|
|
|
|
function closeItems(type) {
|
|
var queue_div = document.getElementById(type + "button-content");
|
|
queue_div.style.display = "none";
|
|
var see_queue_button = document.getElementById("see" + type + "button");
|
|
see_queue_button.innerHTML = "See " + type[0].toUpperCase() + type.substr(1);
|
|
}
|
|
|
|
function clearItems(type) {
|
|
fetch("/" + type, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ clear: true }),
|
|
})
|
|
.then((data) => {
|
|
loadItems(type);
|
|
})
|
|
.catch((error) => console.error(error));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|