Initial refactoring changes
- Moved to web folder - Splitting into individual files
This commit is contained in:
pythongosssss
GitHub
parent
3637e19eff
commit
5e25c77074
|
|
@ -0,0 +1,476 @@
|
||||||
|
<!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;
|
||||||
|
|
||||||
|
function postPrompt(number) {
|
||||||
|
let prompt = graphToPrompt();
|
||||||
|
let full_data = {client_id: clientId, prompt: prompt, extra_data: {extra_pnginfo: {workflow: graph.serialize()}}};
|
||||||
|
if (number == -1) {
|
||||||
|
full_data.front = true;
|
||||||
|
} else
|
||||||
|
if (number != 0) {
|
||||||
|
full_data.number = number;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch('/prompt', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(full_data)
|
||||||
|
})
|
||||||
|
.then(data => promptPosted(data))
|
||||||
|
.catch(error => console.error(error))
|
||||||
|
|
||||||
|
// console.log(JSON.stringify(prompt));
|
||||||
|
// console.log(JSON.stringify(graph.serialize()));
|
||||||
|
|
||||||
|
// restore initial values replaced by dynamic prompting
|
||||||
|
for (let x in graph._nodes_by_id) {
|
||||||
|
let n = graph._nodes_by_id[x];
|
||||||
|
for (let w in n.widgets) {
|
||||||
|
let wid = n.widgets[w];
|
||||||
|
if (wid.dynamic_prompt && wid.dynamic_prompt === true)
|
||||||
|
wid.value = wid.value_initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function prompt_file_load(file)
|
||||||
|
{
|
||||||
|
if (file.type === 'image/png') {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (event) => {
|
||||||
|
// Get the PNG data as a Uint8Array
|
||||||
|
const pngData = new Uint8Array(event.target.result);
|
||||||
|
const dataView = new DataView(pngData.buffer);
|
||||||
|
|
||||||
|
// Check that the PNG signature is present
|
||||||
|
if (dataView.getUint32(0) !== 0x89504e47) {
|
||||||
|
console.error('Not a valid PNG file');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start searching for chunks after the PNG signature
|
||||||
|
let offset = 8;
|
||||||
|
let txt_chunks = {}
|
||||||
|
// Loop through the chunks in the PNG file
|
||||||
|
while (offset < pngData.length) {
|
||||||
|
// Get the length of the chunk
|
||||||
|
const length = dataView.getUint32(offset);
|
||||||
|
// Get the chunk type
|
||||||
|
const type = String.fromCharCode(...pngData.slice(offset + 4, offset + 8));
|
||||||
|
if (type === 'tEXt') {
|
||||||
|
// Get the keyword
|
||||||
|
let keyword_end = offset + 8;
|
||||||
|
while (pngData[keyword_end] !== 0) {
|
||||||
|
keyword_end++;
|
||||||
|
}
|
||||||
|
const keyword = String.fromCharCode(...pngData.slice(offset + 8, keyword_end));
|
||||||
|
// Get the text
|
||||||
|
const text = String.fromCharCode(...pngData.slice(keyword_end + 1, offset + 8 + length));
|
||||||
|
txt_chunks[keyword] = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the next chunk
|
||||||
|
offset += 12 + length;
|
||||||
|
}
|
||||||
|
console.log(txt_chunks);
|
||||||
|
// console.log(JSON.parse(txt_chunks["prompt"]));
|
||||||
|
loadGraphData(graph, JSON.parse(txt_chunks["workflow"]));
|
||||||
|
};
|
||||||
|
reader.readAsArrayBuffer(file);
|
||||||
|
} else if (file.type === "application/json" || file.name.endsWith(".json")) {
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onload = function() {
|
||||||
|
console.log(reader.result);
|
||||||
|
var jsonData = JSON.parse(reader.result);
|
||||||
|
loadGraphData(graph, jsonData);
|
||||||
|
};
|
||||||
|
reader.readAsText(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get prompt from dropped PNG or json
|
||||||
|
document.addEventListener('drop', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
const file = event.dataTransfer.files[0];
|
||||||
|
console.log(file.type);
|
||||||
|
prompt_file_load(file);
|
||||||
|
});
|
||||||
|
|
||||||
|
let runningNodeId = null;
|
||||||
|
let progress = null;
|
||||||
|
let clientId = null;
|
||||||
|
const orig = LGraphCanvas.prototype.drawNodeShape;
|
||||||
|
LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolor, selected, mouse_over) {
|
||||||
|
const res = orig.apply(this, arguments);
|
||||||
|
|
||||||
|
if(node.id + "" === runningNodeId) {
|
||||||
|
const shape = node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE;
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.globalAlpha = 0.8;
|
||||||
|
ctx.beginPath();
|
||||||
|
if( shape == LiteGraph.BOX_SHAPE )
|
||||||
|
ctx.rect(-6,-6 + LiteGraph.NODE_TITLE_HEIGHT, 12 + size[0]+1, 12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT );
|
||||||
|
else if (shape == LiteGraph.ROUND_SHAPE || (shape == LiteGraph.CARD_SHAPE && node.flags.collapsed) )
|
||||||
|
ctx.roundRect(-6,-6 - LiteGraph.NODE_TITLE_HEIGHT, 12 +size[0]+1, 12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT , this.round_radius * 2);
|
||||||
|
else if (shape == LiteGraph.CARD_SHAPE)
|
||||||
|
ctx.roundRect(-6,-6 + LiteGraph.NODE_TITLE_HEIGHT, 12 +size[0]+1, 12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT , this.round_radius * 2, 2);
|
||||||
|
else if (shape == LiteGraph.CIRCLE_SHAPE)
|
||||||
|
ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5 + 6, 0, Math.PI*2);
|
||||||
|
ctx.strokeStyle = "#0f0"
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.strokeStyle = fgcolor;
|
||||||
|
ctx.globalAlpha = 1;
|
||||||
|
|
||||||
|
if(progress) {
|
||||||
|
ctx.fillStyle = "green";
|
||||||
|
ctx.fillRect(0, 0, size[0] * (progress.value / progress.max), 6);
|
||||||
|
ctx.fillStyle = bgcolor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateNodeProgress(v) {
|
||||||
|
progress = v;
|
||||||
|
graph.setDirtyCanvas(true, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setRunningNode(id) {
|
||||||
|
progress = null;
|
||||||
|
runningNodeId = id;
|
||||||
|
graph.setDirtyCanvas(true, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
(() => {
|
||||||
|
function updateStatus(data) {
|
||||||
|
document.getElementById("queuesize").innerHTML = "Queue size: " + (data ? data.exec_info.queue_remaining : "ERR");
|
||||||
|
}
|
||||||
|
|
||||||
|
//fix for colab and other things that don't support websockets.
|
||||||
|
function manually_fetch_queue() {
|
||||||
|
fetch('/prompt')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
updateStatus(data);
|
||||||
|
}).catch((response) => {updateStatus(null)});
|
||||||
|
}
|
||||||
|
|
||||||
|
let ws;
|
||||||
|
function createSocket(isReconnect) {
|
||||||
|
if(ws) return;
|
||||||
|
|
||||||
|
let opened = false;
|
||||||
|
ws = new WebSocket(`ws${window.location.protocol === "https:"? "s" : ""}://${location.host}/ws`);
|
||||||
|
|
||||||
|
ws.addEventListener("open", () => {
|
||||||
|
opened = true;
|
||||||
|
if(isReconnect) {
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ws.addEventListener("error", () => {
|
||||||
|
if(ws) ws.close();
|
||||||
|
manually_fetch_queue();
|
||||||
|
});
|
||||||
|
|
||||||
|
ws.addEventListener("close", () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
ws = null;
|
||||||
|
createSocket(true);
|
||||||
|
}, 300);
|
||||||
|
if(opened) {
|
||||||
|
updateStatus(null);
|
||||||
|
showModal("Reconnecting...");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ws.addEventListener("message", (event) => {
|
||||||
|
try {
|
||||||
|
const msg = JSON.parse(event.data);
|
||||||
|
switch(msg.type) {
|
||||||
|
case "status":
|
||||||
|
if(msg.data.sid) {
|
||||||
|
clientId = msg.data.sid;
|
||||||
|
}
|
||||||
|
updateStatus(msg.data.status);
|
||||||
|
break;
|
||||||
|
case "progress":
|
||||||
|
updateNodeProgress(msg.data)
|
||||||
|
break;
|
||||||
|
case "executing":
|
||||||
|
setRunningNode(msg.data.node);
|
||||||
|
break;
|
||||||
|
case "executed":
|
||||||
|
nodeOutputs[msg.data.node] = msg.data.output;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
throw new Error("Unknown message type")
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.warn("Unhandled message:", event.data)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
createSocket();
|
||||||
|
})();
|
||||||
|
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
|
<span id="menu" style="font-size: 15px;position: absolute; top: 50%; right: 0%; background-color: white; text-align: center; z-index: 100;width:170px">
|
||||||
|
<span id="queuesize">Queue size: X</span><br>
|
||||||
|
<button style="font-size: 20px;width: 100%;" id="queuebutton" onclick="postPrompt(0)">Queue Prompt</button><br>
|
||||||
|
<span style="left: 0%;">
|
||||||
|
<button style="font-size: 10px;" id="queuebutton" onclick="postPrompt(-1)">Queue Front</button>
|
||||||
|
<button style="font-size: 10px; width: 50%;" id="seequeuebutton" onclick="seeQueue()">See Queue</button>
|
||||||
|
<button style="font-size: 10px; width: 50%;" id="seehistorybutton" onclick="seeHistory()">See History</button>
|
||||||
|
<br>
|
||||||
|
</span>
|
||||||
|
<div id="queuebutton-content" style="background-color: #e1e1e1;min-width: 160px;display: none;z-index: 101;">
|
||||||
|
<span style="width:100%;padding: 3px;display:inline-block;">Running:</span>
|
||||||
|
<div id="runningcontents" style="background-color: #d0d0d0; padding: 5px;">
|
||||||
|
<a>1</a>
|
||||||
|
<button style="font-size: 10px;">Load</button>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<span style="left: 0%;padding: 3px;display:inline-block;">Queued:</span>
|
||||||
|
<div id="queuecontents" style="overflow-y: scroll;height: 100px;background-color: #d0d0d0;padding: 5px;">
|
||||||
|
<a>1</a>
|
||||||
|
<button style="font-size: 10px;">Load</button>
|
||||||
|
<button style="font-size: 10px;">Delete</button>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<span style="padding: 5px;display:inline-block;">
|
||||||
|
<button style="font-size: 12px;" onclick="clearItems('queue')">Clear Queue</button>
|
||||||
|
<button style="font-size: 12px;" onclick="loadQueue()">Refresh</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="historybutton-content" style="background-color: #e1e1e1;min-width: 160px;display: none;z-index: 101;">
|
||||||
|
<span style="width:100%;padding: 3px;display:inline-block;">History:</span>
|
||||||
|
<div id="historycontents" style="overflow-y: scroll;height: 100px;background-color: #d0d0d0;padding: 5px;">
|
||||||
|
</div>
|
||||||
|
<span style="padding: 5px;display:inline-block;">
|
||||||
|
<button style="font-size: 12px;" onclick="clearItems('history')">Clear History</button>
|
||||||
|
<button style="font-size: 12px;" onclick="loadHistory()">Refresh</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<button style="font-size: 20px;" onclick="saveGraph()">Save</button><br>
|
||||||
|
<button style="font-size: 20px;" onclick="loadGraph()">Load</button>
|
||||||
|
<br>
|
||||||
|
<button style="font-size: 20px;" onclick="clearGraph()">Clear</button><br>
|
||||||
|
<button style="font-size: 20px;" onclick="loadTxt2Img()">Load Default</button><br>
|
||||||
|
</span>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
class ComfyApi {
|
||||||
|
async getNodeDefs() {
|
||||||
|
const resp = await fetch("object_info", { cache: "no-store" });
|
||||||
|
return await resp.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
async queuePrompt(number, { output, workflow }) {
|
||||||
|
const body = {
|
||||||
|
client_id: this.clientId,
|
||||||
|
prompt: output,
|
||||||
|
extra_data: { extra_pnginfo: { workflow } },
|
||||||
|
};
|
||||||
|
|
||||||
|
if (number === -1) {
|
||||||
|
body.front = true;
|
||||||
|
} else if (number != 0) {
|
||||||
|
body.number = number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await fetch("/prompt", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.status !== 200) {
|
||||||
|
throw {
|
||||||
|
response: await res.text(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const api = new ComfyApi();
|
||||||
|
|
@ -0,0 +1,569 @@
|
||||||
|
import { ComfyWidgets } from "./widgets.js";
|
||||||
|
import { api } from "./api.js";
|
||||||
|
import { defaultGraph } from "./defaultGraph.js";
|
||||||
|
|
||||||
|
class ComfyDialog {
|
||||||
|
constructor() {
|
||||||
|
this.element = document.createElement("div");
|
||||||
|
this.element.classList.add("comfy-modal");
|
||||||
|
|
||||||
|
const content = document.createElement("div");
|
||||||
|
content.classList.add("comfy-modal-content");
|
||||||
|
this.textElement = document.createElement("p");
|
||||||
|
content.append(this.textElement);
|
||||||
|
|
||||||
|
const closeBtn = document.createElement("button");
|
||||||
|
closeBtn.type = "button";
|
||||||
|
closeBtn.textContent = "CLOSE";
|
||||||
|
content.append(closeBtn);
|
||||||
|
closeBtn.onclick = () => this.close();
|
||||||
|
|
||||||
|
this.element.append(content);
|
||||||
|
document.body.append(this.element);
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.element.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
show(html) {
|
||||||
|
this.textElement.innerHTML = html;
|
||||||
|
this.element.style.display = "flex";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class ComfyQueue {
|
||||||
|
constructor() {
|
||||||
|
this.element = document.createElement("div");
|
||||||
|
}
|
||||||
|
|
||||||
|
async update() {
|
||||||
|
if (this.element.style.display !== "none") {
|
||||||
|
await this.load();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async show() {
|
||||||
|
this.element.style.display = "block";
|
||||||
|
await this.load();
|
||||||
|
}
|
||||||
|
|
||||||
|
async load() {
|
||||||
|
const queue = await api.getQueue();
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
this.element.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
class ComfyUI {
|
||||||
|
constructor(app) {
|
||||||
|
this.app = app;
|
||||||
|
this.menuContainer = document.createElement("div");
|
||||||
|
this.menuContainer.classList.add("comfy-menu");
|
||||||
|
document.body.append(this.menuContainer);
|
||||||
|
|
||||||
|
this.dialog = new ComfyDialog();
|
||||||
|
this.queue = new ComfyQueue();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class ComfyApp {
|
||||||
|
constructor() {
|
||||||
|
this.ui = new ComfyUI(this);
|
||||||
|
this.nodeOutputs = {};
|
||||||
|
this.extensions = [
|
||||||
|
{
|
||||||
|
name: "TestExtension",
|
||||||
|
init(app) {
|
||||||
|
console.log("[ext:init]", app);
|
||||||
|
},
|
||||||
|
setup(app) {
|
||||||
|
console.log("[ext:setup]", app);
|
||||||
|
},
|
||||||
|
addCustomNodeDefs(defs, app) {
|
||||||
|
console.log("[ext:addCustomNodeDefs]", defs, app);
|
||||||
|
},
|
||||||
|
loadedGraphNode(node, app) {
|
||||||
|
// console.log("[ext:loadedGraphNode]", node, app);
|
||||||
|
},
|
||||||
|
getCustomWidgets(app) {
|
||||||
|
console.log("[ext:getCustomWidgets]", app);
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
beforeRegisterNode(nodeType, nodeData, app) {
|
||||||
|
// console.log("[ext:beforeRegisterNode]", nodeType, nodeData, app);
|
||||||
|
},
|
||||||
|
registerCustomNodes(app) {
|
||||||
|
console.log("[ext:registerCustomNodes]", app);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
#log(message, ...other) {
|
||||||
|
console.log("[comfy]", message, ...other);
|
||||||
|
}
|
||||||
|
|
||||||
|
#error(message, ...other) {
|
||||||
|
console.error("[comfy]", message, ...other);
|
||||||
|
}
|
||||||
|
|
||||||
|
#invokeExtensions(method, ...args) {
|
||||||
|
let results = [];
|
||||||
|
for (const ext of this.extensions) {
|
||||||
|
if (method in ext) {
|
||||||
|
try {
|
||||||
|
results.push(ext[method](...args, this));
|
||||||
|
} catch (error) {
|
||||||
|
this.#error(
|
||||||
|
`Error calling extension '${ext.name}' method '${method}'`,
|
||||||
|
{ error },
|
||||||
|
{ extension: ext },
|
||||||
|
{ args }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
async #invokeExtensionsAsync(method, ...args) {
|
||||||
|
return await Promise.all(
|
||||||
|
this.extensions.map(async (ext) => {
|
||||||
|
if (method in ext) {
|
||||||
|
try {
|
||||||
|
return await ext[method](...args, this);
|
||||||
|
} catch (error) {
|
||||||
|
this.#error(
|
||||||
|
`Error calling extension '${ext.name}' method '${method}'`,
|
||||||
|
{ error },
|
||||||
|
{ extension: ext },
|
||||||
|
{ args }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
#addNodeContextMenuHandler(node) {
|
||||||
|
node.prototype.getExtraMenuOptions = function (_, options) {
|
||||||
|
if (this.imgs) {
|
||||||
|
// If this node has images then we add an open in new tab item
|
||||||
|
let img;
|
||||||
|
if (this.imageIndex != null) {
|
||||||
|
// An image is selected so select that
|
||||||
|
img = this.imgs[this.imageIndex];
|
||||||
|
} else if (this.overIndex != null) {
|
||||||
|
// No image is selected but one is hovered
|
||||||
|
img = this.imgs[this.overIndex];
|
||||||
|
}
|
||||||
|
if (img) {
|
||||||
|
options.unshift({
|
||||||
|
content: "Open Image",
|
||||||
|
callback: () => window.open(img.src, "_blank"),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
#addDrawBackgroundHandler(node) {
|
||||||
|
const app = this;
|
||||||
|
node.prototype.onDrawBackground = function (ctx) {
|
||||||
|
if (!this.flags.collapsed) {
|
||||||
|
const output = app.nodeOutputs[this.id + ""];
|
||||||
|
if (output && output.images) {
|
||||||
|
if (this.images !== output.images) {
|
||||||
|
this.images = output.images;
|
||||||
|
this.imgs = null;
|
||||||
|
this.imageIndex = null;
|
||||||
|
Promise.all(
|
||||||
|
output.images.map((src) => {
|
||||||
|
return new Promise((r) => {
|
||||||
|
const img = new Image();
|
||||||
|
img.onload = () => r(img);
|
||||||
|
img.onerror = () => r(null);
|
||||||
|
img.src = "/view/" + src;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
).then((imgs) => {
|
||||||
|
if (this.images === output.images) {
|
||||||
|
this.imgs = imgs.filter(Boolean);
|
||||||
|
if (this.size[1] < 100) {
|
||||||
|
this.size[1] = 250;
|
||||||
|
}
|
||||||
|
app.graph.setDirtyCanvas(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.imgs) {
|
||||||
|
const canvas = graph.list_of_graphcanvas[0];
|
||||||
|
const mouse = canvas.graph_mouse;
|
||||||
|
if (!canvas.pointer_is_down && this.pointerDown) {
|
||||||
|
if (mouse[0] === this.pointerDown.pos[0] && mouse[1] === this.pointerDown.pos[1]) {
|
||||||
|
this.imageIndex = this.pointerDown.index;
|
||||||
|
}
|
||||||
|
this.pointerDown = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let w = this.imgs[0].naturalWidth;
|
||||||
|
let h = this.imgs[0].naturalHeight;
|
||||||
|
let imageIndex = this.imageIndex;
|
||||||
|
const numImages = this.imgs.length;
|
||||||
|
if (numImages === 1 && !imageIndex) {
|
||||||
|
this.imageIndex = imageIndex = 0;
|
||||||
|
}
|
||||||
|
let shiftY = this.type === "SaveImage" ? 55 : 0;
|
||||||
|
let dw = this.size[0];
|
||||||
|
let dh = this.size[1];
|
||||||
|
dh -= shiftY;
|
||||||
|
|
||||||
|
if (imageIndex == null) {
|
||||||
|
let best = 0;
|
||||||
|
let cellWidth;
|
||||||
|
let cellHeight;
|
||||||
|
let cols = 0;
|
||||||
|
let shiftX = 0;
|
||||||
|
for (let c = 1; c <= numImages; c++) {
|
||||||
|
const rows = Math.ceil(numImages / c);
|
||||||
|
const cW = dw / c;
|
||||||
|
const cH = dh / rows;
|
||||||
|
const scaleX = cW / w;
|
||||||
|
const scaleY = cH / h;
|
||||||
|
|
||||||
|
const scale = Math.min(scaleX, scaleY, 1);
|
||||||
|
const imageW = w * scale;
|
||||||
|
const imageH = h * scale;
|
||||||
|
const area = imageW * imageH * numImages;
|
||||||
|
|
||||||
|
if (area > best) {
|
||||||
|
best = area;
|
||||||
|
cellWidth = imageW;
|
||||||
|
cellHeight = imageH;
|
||||||
|
cols = c;
|
||||||
|
shiftX = c * ((cW - imageW) / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let anyHovered = false;
|
||||||
|
this.imageRects = [];
|
||||||
|
for (let i = 0; i < numImages; i++) {
|
||||||
|
const img = this.imgs[i];
|
||||||
|
const row = Math.floor(i / cols);
|
||||||
|
const col = i % cols;
|
||||||
|
const x = col * cellWidth + shiftX;
|
||||||
|
const y = row * cellHeight + shiftY;
|
||||||
|
if (!anyHovered) {
|
||||||
|
anyHovered = LiteGraph.isInsideRectangle(
|
||||||
|
mouse[0],
|
||||||
|
mouse[1],
|
||||||
|
x + this.pos[0],
|
||||||
|
y + this.pos[1],
|
||||||
|
cellWidth,
|
||||||
|
cellHeight
|
||||||
|
);
|
||||||
|
if (anyHovered) {
|
||||||
|
this.overIndex = i;
|
||||||
|
let value = 110;
|
||||||
|
if (canvas.pointer_is_down) {
|
||||||
|
if (!this.pointerDown || this.pointerDown.index !== i) {
|
||||||
|
this.pointerDown = { index: i, pos: [...mouse] };
|
||||||
|
}
|
||||||
|
value = 125;
|
||||||
|
}
|
||||||
|
ctx.filter = `contrast(${value}%) brightness(${value}%)`;
|
||||||
|
canvas.canvas.style.cursor = "pointer";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.imageRects.push([x, y, cellWidth, cellHeight]);
|
||||||
|
ctx.drawImage(img, x, y, cellWidth, cellHeight);
|
||||||
|
ctx.filter = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!anyHovered) {
|
||||||
|
this.pointerDown = null;
|
||||||
|
this.overIndex = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Draw individual
|
||||||
|
const scaleX = dw / w;
|
||||||
|
const scaleY = dh / h;
|
||||||
|
const scale = Math.min(scaleX, scaleY, 1);
|
||||||
|
|
||||||
|
w *= scale;
|
||||||
|
h *= scale;
|
||||||
|
|
||||||
|
let x = (dw - w) / 2;
|
||||||
|
let y = (dh - h) / 2 + shiftY;
|
||||||
|
ctx.drawImage(this.imgs[imageIndex], x, y, w, h);
|
||||||
|
|
||||||
|
const drawButton = (x, y, sz, text) => {
|
||||||
|
const hovered = LiteGraph.isInsideRectangle(
|
||||||
|
mouse[0],
|
||||||
|
mouse[1],
|
||||||
|
x + this.pos[0],
|
||||||
|
y + this.pos[1],
|
||||||
|
sz,
|
||||||
|
sz
|
||||||
|
);
|
||||||
|
let fill = "#333";
|
||||||
|
let textFill = "#fff";
|
||||||
|
let isClicking = false;
|
||||||
|
if (hovered) {
|
||||||
|
canvas.canvas.style.cursor = "pointer";
|
||||||
|
if (canvas.pointer_is_down) {
|
||||||
|
fill = "#1e90ff";
|
||||||
|
isClicking = true;
|
||||||
|
} else {
|
||||||
|
fill = "#eee";
|
||||||
|
textFill = "#000";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.pointerWasDown = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.fillStyle = fill;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.roundRect(x, y, sz, sz, [4]);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.fillStyle = textFill;
|
||||||
|
ctx.font = "12px Arial";
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.fillText(text, x + 15, y + 20);
|
||||||
|
|
||||||
|
return isClicking;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (numImages > 1) {
|
||||||
|
if (drawButton(x + w - 35, y + h - 35, 30, `${this.imageIndex + 1}/${numImages}`)) {
|
||||||
|
let i = this.imageIndex + 1 >= numImages ? 0 : this.imageIndex + 1;
|
||||||
|
if (!this.pointerDown || !this.pointerDown.index === i) {
|
||||||
|
this.pointerDown = { index: i, pos: [...mouse] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (drawButton(x + w - 35, y + 5, 30, `x`)) {
|
||||||
|
if (!this.pointerDown || !this.pointerDown.index === null) {
|
||||||
|
this.pointerDown = { index: null, pos: [...mouse] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set up the app on the page
|
||||||
|
*/
|
||||||
|
async setup() {
|
||||||
|
// Create and mount the LiteGraph in the DOM
|
||||||
|
const canvasEl = Object.assign(document.createElement("canvas"), { id: "graph-canvas" });
|
||||||
|
document.body.prepend(canvasEl);
|
||||||
|
|
||||||
|
this.graph = new LGraph();
|
||||||
|
const canvas = (this.canvas = new LGraphCanvas(canvasEl, this.graph));
|
||||||
|
this.ctx = canvasEl.getContext("2d");
|
||||||
|
|
||||||
|
this.graph.start();
|
||||||
|
|
||||||
|
function resizeCanvas() {
|
||||||
|
canvasEl.width = canvasEl.offsetWidth;
|
||||||
|
canvasEl.height = canvasEl.offsetHeight;
|
||||||
|
canvas.draw(true, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure the canvas fills the window
|
||||||
|
resizeCanvas();
|
||||||
|
window.addEventListener("resize", resizeCanvas);
|
||||||
|
|
||||||
|
await this.#invokeExtensionsAsync("init");
|
||||||
|
await this.registerNodes();
|
||||||
|
|
||||||
|
// Load previous workflow
|
||||||
|
let restored = false;
|
||||||
|
try {
|
||||||
|
const json = localStorage.getItem("workflow");
|
||||||
|
if (json) {
|
||||||
|
const workflow = JSON.parse(json);
|
||||||
|
this.loadGraphData(workflow);
|
||||||
|
restored = true;
|
||||||
|
}
|
||||||
|
} catch (err) {}
|
||||||
|
|
||||||
|
// We failed to restore a workflow so load the default
|
||||||
|
if (!restored) {
|
||||||
|
this.loadGraphData(defaultGraph);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save current workflow automatically
|
||||||
|
setInterval(() => localStorage.setItem("workflow", JSON.stringify(this.graph.serialize())), 1000);
|
||||||
|
|
||||||
|
await this.#invokeExtensionsAsync("setup");
|
||||||
|
}
|
||||||
|
|
||||||
|
async registerNodes() {
|
||||||
|
const app = this;
|
||||||
|
// Load node definitions from the backend
|
||||||
|
const defs = await api.getNodeDefs();
|
||||||
|
await this.#invokeExtensionsAsync("addCustomNodeDefs", defs);
|
||||||
|
|
||||||
|
// Generate list of known widgets
|
||||||
|
const widgets = Object.assign(
|
||||||
|
{},
|
||||||
|
ComfyWidgets,
|
||||||
|
...(await this.#invokeExtensionsAsync("getCustomWidgets")).filter(Boolean)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Register a node for each definition
|
||||||
|
for (const nodeId in defs) {
|
||||||
|
const nodeData = defs[nodeId];
|
||||||
|
const node = Object.assign(
|
||||||
|
function ComfyNode() {
|
||||||
|
const inputs = nodeData["input"]["required"];
|
||||||
|
const config = { minWidth: 1, minHeight: 1 };
|
||||||
|
for (const inputName in inputs) {
|
||||||
|
const inputData = inputs[inputName];
|
||||||
|
const type = inputData[0];
|
||||||
|
|
||||||
|
if (Array.isArray(type)) {
|
||||||
|
// Enums e.g. latent rotation
|
||||||
|
this.addWidget("combo", inputName, type[0], () => {}, { values: type });
|
||||||
|
} else if (`${type}:${inputName}` in widgets) {
|
||||||
|
// Support custom widgets by Type:Name
|
||||||
|
Object.assign(config, widgets[`${type}:${inputName}`](this, inputName, inputData, app) || {});
|
||||||
|
} else if (type in widgets) {
|
||||||
|
// Standard type widgets
|
||||||
|
Object.assign(config, widgets[type](this, inputName, inputData, app) || {});
|
||||||
|
} else {
|
||||||
|
// Node connection inputs
|
||||||
|
this.addInput(inputName, type);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const s = this.computeSize();
|
||||||
|
s[0] = Math.max(config.minWidth, s[0] * 1.5);
|
||||||
|
s[1] = Math.max(config.minHeight, s[1]);
|
||||||
|
this.size = s;
|
||||||
|
this.serialize_widgets = true;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: nodeData.name,
|
||||||
|
comfyClass: nodeData.name,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
node.prototype.comfyClass = nodeData.name;
|
||||||
|
|
||||||
|
this.#addNodeContextMenuHandler(node);
|
||||||
|
this.#addDrawBackgroundHandler(node, app);
|
||||||
|
|
||||||
|
await this.#invokeExtensionsAsync("beforeRegisterNode", node, nodeData);
|
||||||
|
LiteGraph.registerNodeType(nodeId, node);
|
||||||
|
node.category = nodeData.category;
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.#invokeExtensionsAsync("registerCustomNodes");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Populates the graph with the specified workflow data
|
||||||
|
* @param {*} graphData A serialized graph object
|
||||||
|
*/
|
||||||
|
loadGraphData(graphData) {
|
||||||
|
this.graph.configure(graphData);
|
||||||
|
|
||||||
|
for (const node of this.graph._nodes) {
|
||||||
|
const size = node.computeSize();
|
||||||
|
size[0] = Math.max(node.size[0], size[0]);
|
||||||
|
size[1] = Math.max(node.size[1], size[1]);
|
||||||
|
node.size = size;
|
||||||
|
|
||||||
|
if (node.widgets) {
|
||||||
|
// If you break something in the backend and want to patch workflows in the frontend
|
||||||
|
// This is the place to do this
|
||||||
|
for (let widget of node.widgets) {
|
||||||
|
if (node.type == "KSampler" || node.type == "KSamplerAdvanced") {
|
||||||
|
if (widget.name == "sampler_name") {
|
||||||
|
if (widget.value.startsWith("sample_")) {
|
||||||
|
wid.value = widget.value.slice(7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#invokeExtensions("loadedGraphNode", node);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
graphToPrompt() {
|
||||||
|
// TODO: Implement dynamic prompts
|
||||||
|
const workflow = this.graph.serialize();
|
||||||
|
const output = {};
|
||||||
|
for (const n of workflow.nodes) {
|
||||||
|
const inputs = {};
|
||||||
|
const node = this.graph.getNodeById(n.id);
|
||||||
|
const widgets = node.widgets;
|
||||||
|
|
||||||
|
// Store all widget values
|
||||||
|
if (widgets) {
|
||||||
|
for (const widget of widgets) {
|
||||||
|
if (widget.options.serialize !== false) {
|
||||||
|
inputs[widget.name] = widget.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store all node links
|
||||||
|
for (let i in node.inputs) {
|
||||||
|
const link = node.getInputLink(i);
|
||||||
|
if (link) {
|
||||||
|
inputs[node.inputs[i].name] = [String(link.origin_id), parseInt(link.origin_slot)];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
output[String(node.id)] = {
|
||||||
|
inputs,
|
||||||
|
class_type: node.comfyClass,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return { workflow, output };
|
||||||
|
}
|
||||||
|
|
||||||
|
async queuePrompt(number) {
|
||||||
|
const p = this.graphToPrompt();
|
||||||
|
|
||||||
|
try {
|
||||||
|
await api.queuePrompt(number, p);
|
||||||
|
} catch (error) {
|
||||||
|
this.ui.dialog.show(error.response || error.toString());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const n of p.workflow.nodes) {
|
||||||
|
const node = graph.getNodeById(n.id);
|
||||||
|
if (node.widgets) {
|
||||||
|
for (const widget of node.widgets) {
|
||||||
|
// Allow widgets to run callbacks after a prompt has been queued
|
||||||
|
// e.g. random seed after every gen
|
||||||
|
if (widget.afterQueued) {
|
||||||
|
widget.afterQueued();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.canvas.draw(true, true);
|
||||||
|
await this.ui.queue.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const app = new ComfyApp();
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
export const defaultGraph = {
|
||||||
|
last_node_id: 9,
|
||||||
|
last_link_id: 9,
|
||||||
|
nodes: [
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
type: "CLIPTextEncode",
|
||||||
|
pos: [413, 389],
|
||||||
|
size: { 0: 425.27801513671875, 1: 180.6060791015625 },
|
||||||
|
flags: {},
|
||||||
|
order: 3,
|
||||||
|
mode: 0,
|
||||||
|
inputs: [{ name: "clip", type: "CLIP", link: 5 }],
|
||||||
|
outputs: [{ name: "CONDITIONING", type: "CONDITIONING", links: [6], slot_index: 0 }],
|
||||||
|
properties: {},
|
||||||
|
widgets_values: ["bad hands"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
type: "CLIPTextEncode",
|
||||||
|
pos: [415, 186],
|
||||||
|
size: { 0: 422.84503173828125, 1: 164.31304931640625 },
|
||||||
|
flags: {},
|
||||||
|
order: 2,
|
||||||
|
mode: 0,
|
||||||
|
inputs: [{ name: "clip", type: "CLIP", link: 3 }],
|
||||||
|
outputs: [{ name: "CONDITIONING", type: "CONDITIONING", links: [4], slot_index: 0 }],
|
||||||
|
properties: {},
|
||||||
|
widgets_values: ["masterpiece best quality girl"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
type: "EmptyLatentImage",
|
||||||
|
pos: [473, 609],
|
||||||
|
size: { 0: 315, 1: 106 },
|
||||||
|
flags: {},
|
||||||
|
order: 1,
|
||||||
|
mode: 0,
|
||||||
|
outputs: [{ name: "LATENT", type: "LATENT", links: [2], slot_index: 0 }],
|
||||||
|
properties: {},
|
||||||
|
widgets_values: [512, 512, 1],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
type: "KSampler",
|
||||||
|
pos: [863, 186],
|
||||||
|
size: { 0: 315, 1: 262 },
|
||||||
|
flags: {},
|
||||||
|
order: 4,
|
||||||
|
mode: 0,
|
||||||
|
inputs: [
|
||||||
|
{ name: "model", type: "MODEL", link: 1 },
|
||||||
|
{ name: "positive", type: "CONDITIONING", link: 4 },
|
||||||
|
{ name: "negative", type: "CONDITIONING", link: 6 },
|
||||||
|
{ name: "latent_image", type: "LATENT", link: 2 },
|
||||||
|
],
|
||||||
|
outputs: [{ name: "LATENT", type: "LATENT", links: [7], slot_index: 0 }],
|
||||||
|
properties: {},
|
||||||
|
widgets_values: [8566257, true, 20, 8, "euler", "normal", 1],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
type: "VAEDecode",
|
||||||
|
pos: [1209, 188],
|
||||||
|
size: { 0: 210, 1: 46 },
|
||||||
|
flags: {},
|
||||||
|
order: 5,
|
||||||
|
mode: 0,
|
||||||
|
inputs: [
|
||||||
|
{ name: "samples", type: "LATENT", link: 7 },
|
||||||
|
{ name: "vae", type: "VAE", link: 8 },
|
||||||
|
],
|
||||||
|
outputs: [{ name: "IMAGE", type: "IMAGE", links: [9], slot_index: 0 }],
|
||||||
|
properties: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
type: "SaveImage",
|
||||||
|
pos: [1451, 189],
|
||||||
|
size: { 0: 210, 1: 26 },
|
||||||
|
flags: {},
|
||||||
|
order: 6,
|
||||||
|
mode: 0,
|
||||||
|
inputs: [{ name: "images", type: "IMAGE", link: 9 }],
|
||||||
|
properties: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
type: "CheckpointLoader",
|
||||||
|
pos: [26, 474],
|
||||||
|
size: { 0: 315, 1: 122 },
|
||||||
|
flags: {},
|
||||||
|
order: 0,
|
||||||
|
mode: 0,
|
||||||
|
outputs: [
|
||||||
|
{ name: "MODEL", type: "MODEL", links: [1], slot_index: 0 },
|
||||||
|
{ name: "CLIP", type: "CLIP", links: [3, 5], slot_index: 1 },
|
||||||
|
{ name: "VAE", type: "VAE", links: [8], slot_index: 2 },
|
||||||
|
],
|
||||||
|
properties: {},
|
||||||
|
widgets_values: ["v1-inference.yaml", "v1-5-pruned-emaonly.ckpt"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
links: [
|
||||||
|
[1, 4, 0, 3, 0, "MODEL"],
|
||||||
|
[2, 5, 0, 3, 3, "LATENT"],
|
||||||
|
[3, 4, 1, 6, 0, "CLIP"],
|
||||||
|
[4, 6, 0, 3, 1, "CONDITIONING"],
|
||||||
|
[5, 4, 1, 7, 0, "CLIP"],
|
||||||
|
[6, 7, 0, 3, 2, "CONDITIONING"],
|
||||||
|
[7, 3, 0, 8, 0, "LATENT"],
|
||||||
|
[8, 4, 2, 8, 1, "VAE"],
|
||||||
|
[9, 8, 0, 9, 0, "IMAGE"],
|
||||||
|
],
|
||||||
|
groups: [],
|
||||||
|
config: {},
|
||||||
|
extra: {},
|
||||||
|
version: 0.4,
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
function getNumberDefaults(inputData, defaultStep) {
|
||||||
|
let defaultVal = inputData[1]["default"];
|
||||||
|
let { min, max, step } = inputData[1];
|
||||||
|
|
||||||
|
if (defaultVal == undefined) defaultVal = 0;
|
||||||
|
if (min == undefined) min = 0;
|
||||||
|
if (max == undefined) max = 2048;
|
||||||
|
if (step == undefined) step = defaultStep;
|
||||||
|
|
||||||
|
return { val: defaultVal, config: { min, max, step: 10.0 * step } };
|
||||||
|
}
|
||||||
|
|
||||||
|
function seedWidget(node, inputName, inputData) {
|
||||||
|
const seed = ComfyWidgets.INT(node, inputName, inputData);
|
||||||
|
const randomize = node.addWidget("toggle", "Random seed after every gen", true, function (v) {}, {
|
||||||
|
on: "enabled",
|
||||||
|
off: "disabled",
|
||||||
|
serialize: false, // Don't include this in prompt.
|
||||||
|
});
|
||||||
|
|
||||||
|
randomize.afterQueued = () => {
|
||||||
|
if (randomize.value) {
|
||||||
|
seed.widget.value = Math.floor(Math.random() * 1125899906842624);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { widget: seed, randomize };
|
||||||
|
}
|
||||||
|
|
||||||
|
function addMultilineWidget(node, name, defaultVal, dynamicPrompt, app) {
|
||||||
|
const widget = {
|
||||||
|
type: "customtext",
|
||||||
|
name,
|
||||||
|
get value() {
|
||||||
|
return this.inputEl.value;
|
||||||
|
},
|
||||||
|
set value(x) {
|
||||||
|
this.inputEl.value = x;
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
dynamicPrompt,
|
||||||
|
},
|
||||||
|
draw: function (ctx, _, widgetWidth, y, widgetHeight) {
|
||||||
|
const visible = app.canvas.ds.scale > 0.5;
|
||||||
|
const t = ctx.getTransform();
|
||||||
|
const margin = 10;
|
||||||
|
console.log("back you go")
|
||||||
|
Object.assign(this.inputEl.style, {
|
||||||
|
left: `${t.a * margin + t.e}px`,
|
||||||
|
top: `${t.d * (y + widgetHeight - margin) + t.f}px`,
|
||||||
|
width: `${(widgetWidth - margin * 2 - 3) * t.a}px`,
|
||||||
|
height: `${(this.parent.size[1] - (y + widgetHeight) - 3) * t.d}px`,
|
||||||
|
position: "absolute",
|
||||||
|
zIndex: 1,
|
||||||
|
fontSize: `${t.d * 10.0}px`,
|
||||||
|
});
|
||||||
|
this.inputEl.hidden = !visible;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
widget.inputEl = document.createElement("textarea");
|
||||||
|
widget.inputEl.className = "comfy-multiline-input";
|
||||||
|
widget.inputEl.value = defaultVal;
|
||||||
|
document.addEventListener("click", function (event) {
|
||||||
|
if (!widget.inputEl.contains(event.target)) {
|
||||||
|
widget.inputEl.blur();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
widget.parent = node;
|
||||||
|
document.body.appendChild(widget.inputEl);
|
||||||
|
|
||||||
|
node.addCustomWidget(widget);
|
||||||
|
|
||||||
|
node.onRemoved = function () {
|
||||||
|
// When removing this node we need to remove the input from the DOM
|
||||||
|
for (let y in this.widgets) {
|
||||||
|
if (this.widgets[y].inputEl) {
|
||||||
|
this.widgets[y].inputEl.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return { minWidth: 400, minHeight: 200, widget };
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ComfyWidgets = {
|
||||||
|
"INT:seed": seedWidget,
|
||||||
|
"INT:noise_seed": seedWidget,
|
||||||
|
FLOAT(node, inputName, inputData) {
|
||||||
|
const { val, config } = getNumberDefaults(inputData, 0.5);
|
||||||
|
return { widget: node.addWidget("number", inputName, val, () => {}, config) };
|
||||||
|
},
|
||||||
|
INT(node, inputName, inputData) {
|
||||||
|
const { val, config } = getNumberDefaults(inputData, 1);
|
||||||
|
return {
|
||||||
|
widget: node.addWidget(
|
||||||
|
"number",
|
||||||
|
inputName,
|
||||||
|
val,
|
||||||
|
function (v) {
|
||||||
|
const s = this.options.step / 10;
|
||||||
|
this.value = Math.round(v / s) * s;
|
||||||
|
},
|
||||||
|
config
|
||||||
|
),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
STRING(node, inputName, inputData, app) {
|
||||||
|
const defaultVal = inputData[1].default || "";
|
||||||
|
const multiline = !!inputData[1].multiline;
|
||||||
|
const dynamicPrompt = !!inputData[1].dynamic_prompt;
|
||||||
|
|
||||||
|
if (multiline) {
|
||||||
|
return addMultilineWidget(node, inputName, defaultVal, dynamicPrompt, app);
|
||||||
|
} else {
|
||||||
|
return { widget: node.addWidget("text", inputName, defaultVal, () => {}, { dynamicPrompt }) };
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
body {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graph-canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comfy-multiline-input {
|
||||||
|
background-color: #ffffff;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 2px;
|
||||||
|
resize: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comfy-modal {
|
||||||
|
display: none; /* Hidden by default */
|
||||||
|
position: fixed; /* Stay in place */
|
||||||
|
z-index: 100; /* Sit on top */
|
||||||
|
padding: 30px 30px 10px 30px;
|
||||||
|
background-color: #ff0000; /* Modal background */
|
||||||
|
box-shadow: 0px 0px 20px #888888;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
max-width: 80vw;
|
||||||
|
max-height: 80vh;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comfy-modal-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comfy-modal p {
|
||||||
|
overflow: auto;
|
||||||
|
white-space: pre-line; /* This will respect line breaks */
|
||||||
|
margin-bottom: 20px; /* Add some margin between the text and the close button*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.comfy-modal button {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #aaaaaa;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comfy-modal button:hover,
|
||||||
|
.comfy-modal button:focus {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body {
|
||||||
|
background-color: #202020;
|
||||||
|
}
|
||||||
|
.comfy-multiline-input {
|
||||||
|
background-color: #202020;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-height: 850px) {
|
||||||
|
#menu {
|
||||||
|
margin-top: -70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
1117
webshit/index.html
1117
webshit/index.html
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue