You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
465 lines
18 KiB
465 lines
18 KiB
<html> |
|
<head> |
|
<link rel="stylesheet" type="text/css" href="litegraph.css"> |
|
<script type="text/javascript" src="litegraph.core.js"></script> |
|
</head> |
|
<body style='width:100%; height:100%'> |
|
<canvas id='mycanvas' width='1000' height='1000' style='width: 100%; height: 100%;'></canvas> |
|
<script> |
|
var graph = new LGraph(); |
|
|
|
var canvas = new LGraphCanvas("#mycanvas", graph); |
|
|
|
const ccc = document.getElementById("mycanvas"); |
|
const ctx = ccc.getContext("2d"); |
|
|
|
// Resize the canvas to match the size of the canvas element |
|
function resizeCanvas() { |
|
ccc.width = ccc.offsetWidth; |
|
ccc.height = ccc.offsetHeight; |
|
canvas.draw(true, true); |
|
} |
|
// call the function when the page loads |
|
resizeCanvas(); |
|
// call the function when the window is resized |
|
window.addEventListener("resize", resizeCanvas); |
|
|
|
|
|
// var node_const = LiteGraph.createNode("basic/const"); |
|
// node_const.pos = [200,200]; |
|
// graph.add(node_const); |
|
// node_const.setValue(4.5); |
|
// |
|
// var node_watch = LiteGraph.createNode("basic/watch"); |
|
// node_watch.pos = [700,200]; |
|
// graph.add(node_watch); |
|
// |
|
// node_const.connect(0, node_watch, 0 ); |
|
|
|
//node constructor class |
|
// function MyAddNode() |
|
// { |
|
// this.addInput("A","number"); |
|
// this.addInput("B","number"); |
|
// this.addInput("XXX","TESTESTE"); |
|
// this.addInput("NNN","TESTES"); |
|
// this.addOutput("A+B","number"); |
|
// this.addOutput("TTT","TESTESTE"); |
|
// this.properties = { precision: 1 }; |
|
// } |
|
|
|
//name to show |
|
// MyAddNode.title = "Sum"; |
|
|
|
//function to call when the node is executed |
|
// MyAddNode.prototype.onExecute = function() |
|
// { |
|
// var A = this.getInputData(0); |
|
// if( A === undefined ) |
|
// A = 0; |
|
// var B = this.getInputData(1); |
|
// if( B === undefined ) |
|
// B = 0; |
|
// this.setOutputData( 0, A + B ); |
|
// } |
|
|
|
var default_graph = {"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,"sample_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} |
|
|
|
function afterLoadGraph() |
|
{ |
|
let workflow = null; |
|
try { |
|
workflow = JSON.parse(localStorage.getItem("workflow")); |
|
graph.configure(workflow); |
|
} catch(err) { |
|
} |
|
|
|
if (!workflow) { |
|
graph.configure(default_graph); |
|
} |
|
|
|
function saveGraph() { |
|
localStorage.setItem("workflow", JSON.stringify(graph.serialize())); |
|
} |
|
|
|
setInterval(saveGraph, 1000); |
|
|
|
} |
|
|
|
function onObjectInfo(json) { |
|
for (let key in json) { |
|
function MyNode() |
|
{ |
|
j = MyNode.__json_data; |
|
inp = j['input']['required']; |
|
this.class_comfy = MyNode.class_type_comfy; |
|
this._widgets = [] |
|
min_height = 1; |
|
min_width = 1; |
|
for (let x in inp) { |
|
let default_val = min_val = max_val = step_val = undefined; |
|
if (inp[x].length > 1) { |
|
default_val = inp[x][1]['default']; |
|
min_val = inp[x][1]['min']; |
|
max_val = inp[x][1]['max']; |
|
step_val = inp[x][1]['step']; |
|
} |
|
|
|
let type = inp[x][0]; |
|
if (Array.isArray(type)) { |
|
w = this.addWidget("combo", x, type[0], function(v){}, { values: type } ); |
|
this._widgets += [w] |
|
} else if (type == "INT") { |
|
if (default_val == undefined) default_val = 0; |
|
if (min_val == undefined) min_val = 0; |
|
if (max_val == undefined) max_val = 2048; |
|
if (step_val == undefined) step_val = 1; |
|
w = this.addWidget("number", x, default_val, function(v){let s = this.options.step / 10;this.value = Math.round( v / s ) * s;}, { min: min_val, max: max_val, step: 10.0 * step_val} ); |
|
this._widgets += [w] |
|
if (x == "seed") { |
|
w1 = this.addWidget("toggle", "Random seed after every gen", true, function(v){}, { on: "enabled", off:"disabled"} ); |
|
w1.to_randomize = w; |
|
this._widgets += [w1] |
|
} |
|
} else if (type == "FLOAT") { |
|
if (default_val == undefined) default_val = 0; |
|
if (min_val == undefined) min_val = 0; |
|
if (max_val == undefined) max_val = 2048; |
|
if (step_val == undefined) step_val = 0.5; |
|
|
|
// if (min_val == 0.0 && max_val == 1.0) { |
|
// w = this.slider = this.addWidget("slider", x, default_val, function(v){}, { min: min_val, max: max_val} ); |
|
// } else { |
|
w = this.addWidget("number", x, default_val, function(v){}, { min: min_val, max: max_val, step: 10.0 * step_val} ); |
|
// } |
|
this._widgets += [w] |
|
} else if (type == "STRING") { |
|
var w = { |
|
type: "customtext", |
|
name: x, |
|
get value() { return this.input_div.innerText;}, |
|
set value(x) { this.input_div.innerText = x;}, |
|
callback: function(v){console.log(v);}, |
|
options: {}, |
|
draw: function(ctx, node, widget_width, y, H){ |
|
var show_text = canvas.ds.scale > 0.5; |
|
// this.input_div.style.top = `${y}px`; |
|
let t = ctx.getTransform(); |
|
let margin = 15; |
|
let x_div = t.a * margin * 2 + t.e; |
|
let y_div = t.d * (y + H) + t.f; |
|
let width_div = (widget_width - margin * 2) * t.a; |
|
let height_div = (this.parent.size[1] - (y + H))* t.d; |
|
this.input_div.style.left = `${x_div}px`; |
|
this.input_div.style.top = `${y_div}px`; |
|
this.input_div.style.width = width_div; |
|
this.input_div.style.height = height_div; |
|
this.input_div.style.position = 'absolute'; |
|
this.input_div.style.zIndex = 1; |
|
this.input_div.style.fontSize = t.d * 10.0; |
|
|
|
if (show_text) { |
|
this.input_div.hidden = false; |
|
} else { |
|
this.input_div.hidden = true; |
|
} |
|
|
|
ctx.save(); |
|
// ctx.fillText(String(this.value).substr(0,30), 0, y + H * 0.7); |
|
ctx.restore(); |
|
}, |
|
}; |
|
w.input_div = document.createElement('div'); |
|
w.input_div.contentEditable = true; |
|
w.input_div.style.backgroundColor = "#FFFFFF"; |
|
w.input_div.style.overflow = 'hidden'; |
|
document.addEventListener('click', function(event) { |
|
if (!w.input_div.contains(event.target)) { |
|
w.input_div.blur(); |
|
} |
|
}); |
|
w.parent = this; |
|
min_height = Math.max(min_height, 200); |
|
min_width = Math.max(min_width, 400); |
|
ccc.parentNode.appendChild(w.input_div); |
|
|
|
w = this.addCustomWidget(w); |
|
// w = this.addWidget("text", x, "", function(v){}, { multiline:true } ); |
|
console.log(w, this); |
|
this._widgets += [w] |
|
this.onRemoved = function() { |
|
for (let y in this.widgets) { |
|
if (this.widgets[y].input_div) { |
|
this.widgets[y].input_div.remove(); |
|
} |
|
} |
|
} |
|
} else { |
|
this.addInput(x, type); |
|
} |
|
} |
|
|
|
out = j['output']; |
|
for (let x in out) { |
|
this.addOutput(out[x], out[x]); |
|
} |
|
s = this.computeSize(); |
|
s[0] *= 1.5; |
|
s[0] = Math.max(min_width, s[0]); |
|
s[1] = Math.max(min_height, s[1]); |
|
this.size = s; |
|
this.serialize_widgets = true; |
|
} |
|
MyNode.title = json[key]['name']; |
|
MyNode.class_type_comfy = json[key]['name']; |
|
MyNode.__json_data = json[key] |
|
|
|
LiteGraph.registerNodeType(key, MyNode); |
|
MyNode.category = "sd"; //TODO: proper categories |
|
}; |
|
|
|
afterLoadGraph(); |
|
// graph.configure(JSON.parse(base_txt2img_graph)); |
|
} |
|
|
|
fetch("object_info", {cache: "no-store"}) |
|
.then(response => response.json()) |
|
.then(json => onObjectInfo(json)); |
|
|
|
|
|
//register in the system |
|
graph.start(); |
|
// LiteGraph.registerNodeType("testing", MyAddNode); |
|
|
|
|
|
graph.onNodeRemoved = function(n) { |
|
for (let y in n.widgets) { |
|
if (n.widgets[y].input_div) { |
|
n.widgets[y].input_div.remove(); |
|
} |
|
} |
|
} |
|
|
|
function graphToPrompt() { |
|
let s = graph.serialize(); |
|
let output = {}; |
|
// console.log(s['nodes']); |
|
nodes = s['nodes'] |
|
|
|
for (let x in nodes) { |
|
let n = graph.getNodeById(nodes[x].id); |
|
let input_ = {}; |
|
for (let y in n.widgets) { |
|
input_[n.widgets[y].name] = n.widgets[y].value; |
|
} |
|
for (let y in n.inputs) { |
|
let parent_node = n.getInputNode(y); |
|
if (parent_node) { |
|
for (let z in parent_node.outputs) { |
|
let c_nodes = parent_node.getOutputNodes(z); |
|
// console.log(c_nodes, z); |
|
if (c_nodes) { |
|
for (let zz in c_nodes) { |
|
if (c_nodes[zz].id == n.id) { |
|
input_[n.inputs[y].name] = [String(parent_node.id), parseInt(z)]; |
|
break; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
let node = {} |
|
node['inputs'] = input_; |
|
node['class_type'] = n.class_comfy; |
|
// inputs = x['inputs'] |
|
// inputs['name'], inputs['id'] |
|
// console.log(x, n); |
|
// console.log(node); |
|
output[String(n.id)] = node; |
|
} |
|
|
|
return output; |
|
} |
|
|
|
|
|
function promptPosted(data) |
|
{ |
|
if (data.status == 400) { |
|
data.text().then(dt => alert(dt)); |
|
return; |
|
} |
|
|
|
let s = graph.serialize(); |
|
let output = {}; |
|
// console.log(s['nodes']); |
|
nodes = s['nodes'] |
|
|
|
for (let x in nodes) { |
|
let n = graph.getNodeById(nodes[x].id); |
|
for (let w in n.widgets) { |
|
let wid = n.widgets[w]; |
|
if (Object.hasOwn(wid, 'to_randomize')) { |
|
if (wid.value) { |
|
wid.to_randomize.value = Math.floor(Math.random() * 1125899906842624); |
|
} |
|
} |
|
} |
|
} |
|
|
|
canvas.draw(true, true); |
|
} |
|
|
|
function postPrompt() { |
|
let prompt = graphToPrompt(); |
|
let full_data = {prompt: prompt, extra_data: {extra_pnginfo: {workflow: graph.serialize()}}}; |
|
|
|
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())); |
|
} |
|
|
|
|
|
function promptToGraph(prompt) { |
|
for (let x in prompt) { |
|
|
|
} |
|
} |
|
|
|
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"])); |
|
graph.configure(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); |
|
graph.configure(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); |
|
}); |
|
|
|
|
|
setInterval(function(){ |
|
fetch('/prompt') |
|
.then(response => response.json()) |
|
.then(data => { |
|
document.getElementById("queuesize").innerHTML = "Queue size: " + data.exec_info.queue_remaining + ""; |
|
}).catch((response) => {document.getElementById("queuesize").innerHTML = "Queue size: ERR"}); |
|
}, 500); |
|
|
|
function clearGraph() { |
|
graph.clear(); |
|
} |
|
|
|
function loadTxt2Img() { |
|
graph.configure(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(); |
|
} |
|
|
|
|
|
</script> |
|
|
|
<span style="font-size: 15px;position: absolute; top: 50%; right: 0%; background-color: white; text-align: center;"> |
|
<span id="queuesize">Queue size: X</span><br> |
|
<button style="font-size: 20px;" id="queuebutton" onclick="postPrompt()">Queue Prompt</button><br> |
|
<br> |
|
<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>
|
|
|