KenSchae
/
ComfyUI
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Nodes now support single line string properties. 

Resize nodes automatically if they are too small because of added properties.
pull/3/head
comfyanonymous 2 years ago
parent
a37261bb4b
commit
a34cde08cb
2 changed files with 87 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      nodes.py
  2. 150
      webshit/index.html

2
nodes.py
Unescape View File

@ -28,7 +28,7 @@ def filter_files_extensions(files, extensions):
class CLIPTextEncode: class CLIPTextEncode:
@classmethod @classmethod
def INPUT_TYPES(s): def INPUT_TYPES(s):
return {"required": {"text": ("STRING", ), "clip": ("CLIP", )}} return {"required": {"text": ("STRING", {"multiline": True}), "clip": ("CLIP", )}}
RETURN_TYPES = ("CONDITIONING",) RETURN_TYPES = ("CONDITIONING",)
FUNCTION = "encode" FUNCTION = "encode"

150
webshit/index.html
Unescape View File

@ -65,17 +65,29 @@ window.addEventListener("resize", resizeCanvas);
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} 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 loadGraphData(graph, graph_data)
{
graph.configure( graph_data);
for (let n in graph._nodes) {
n = graph._nodes[n];
s = n.computeSize();
s[0] = Math.max(n.size[0], s[0]);
s[1] = Math.max(n.size[1], s[1]);
n.size = s;
}
}
function afterLoadGraph() function afterLoadGraph()
{ {
let workflow = null; let workflow = null;
try { try {
workflow = JSON.parse(localStorage.getItem("workflow")); workflow = JSON.parse(localStorage.getItem("workflow"));
graph.configure(workflow); loadGraphData(graph, workflow);
} catch(err) { } catch(err) {
} }
if (!workflow) { if (!workflow) {
graph.configure(default_graph); loadGraphData(graph, default_graph);
} }
function saveGraph() { function saveGraph() {
@ -97,12 +109,13 @@ function onObjectInfo(json) {
min_height = 1; min_height = 1;
min_width = 1; min_width = 1;
for (let x in inp) { for (let x in inp) {
let default_val = min_val = max_val = step_val = undefined; let default_val = min_val = max_val = step_val = multiline = undefined;
if (inp[x].length > 1) { if (inp[x].length > 1) {
default_val = inp[x][1]['default']; default_val = inp[x][1]['default'];
min_val = inp[x][1]['min']; min_val = inp[x][1]['min'];
max_val = inp[x][1]['max']; max_val = inp[x][1]['max'];
step_val = inp[x][1]['step']; step_val = inp[x][1]['step'];
multiline = inp[x][1]['multiline'];
} }
let type = inp[x][0]; let type = inp[x][0];
@ -134,66 +147,75 @@ function onObjectInfo(json) {
// } // }
this._widgets += [w] this._widgets += [w]
} else if (type == "STRING") { } else if (type == "STRING") {
var w = { if (default_val == undefined) default_val = "";
type: "customtext", if (multiline == undefined) multiline = false;
name: x,
get value() { return this.input_div.innerText;}, if (multiline) {
set value(x) { this.input_div.innerText = x;}, var w = {
callback: function(v){console.log(v);}, type: "customtext",
options: {}, name: x,
draw: function(ctx, node, widget_width, y, H){ get value() { return this.input_div.innerText;},
var show_text = canvas.ds.scale > 0.5; set value(x) { this.input_div.innerText = x;},
// this.input_div.style.top = `${y}px`; callback: function(v){console.log(v);},
let t = ctx.getTransform(); options: {},
let margin = 15; draw: function(ctx, node, widget_width, y, H){
let x_div = t.a * margin * 2 + t.e; var show_text = canvas.ds.scale > 0.5;
let y_div = t.d * (y + H) + t.f; // this.input_div.style.top = `${y}px`;
let width_div = (widget_width - margin * 2) * t.a; let t = ctx.getTransform();
let height_div = (this.parent.size[1] - (y + H))* t.d; let margin = 15;
this.input_div.style.left = `${x_div}px`; let x_div = t.a * margin * 2 + t.e;
this.input_div.style.top = `${y_div}px`; let y_div = t.d * (y + H) + t.f;
this.input_div.style.width = width_div; let width_div = (widget_width - margin * 2) * t.a;
this.input_div.style.height = height_div; let height_div = (this.parent.size[1] - (y + H))* t.d;
this.input_div.style.position = 'absolute'; this.input_div.style.left = `${x_div}px`;
this.input_div.style.zIndex = 1; this.input_div.style.top = `${y_div}px`;
this.input_div.style.fontSize = t.d * 10.0; this.input_div.style.width = width_div;
this.input_div.style.height = height_div;
if (show_text) { this.input_div.style.position = 'absolute';
this.input_div.hidden = false; this.input_div.style.zIndex = 1;
} else { this.input_div.style.fontSize = t.d * 10.0;
this.input_div.hidden = true;
} if (show_text) {
this.input_div.hidden = false;
} else {
this.input_div.hidden = true;
}
ctx.save(); ctx.save();
// ctx.fillText(String(this.value).substr(0,30), 0, y + H * 0.7); // ctx.fillText(String(this.value).substr(0,30), 0, y + H * 0.7);
ctx.restore(); ctx.restore();
}, },
}; };
w.input_div = document.createElement('div'); w.input_div = document.createElement('div');
w.input_div.contentEditable = true; w.input_div.contentEditable = true;
w.input_div.style.backgroundColor = "#FFFFFF"; w.input_div.style.backgroundColor = "#FFFFFF";
w.input_div.style.overflow = 'hidden'; w.input_div.style.overflow = 'hidden';
document.addEventListener('click', function(event) { w.input_div.innerText = default_val;
if (!w.input_div.contains(event.target)) { document.addEventListener('click', function(event) {
w.input_div.blur(); if (!w.input_div.contains(event.target)) {
} w.input_div.blur();
}); }
w.parent = this; });
min_height = Math.max(min_height, 200); w.parent = this;
min_width = Math.max(min_width, 400); min_height = Math.max(min_height, 200);
ccc.parentNode.appendChild(w.input_div); 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 } ); w = this.addCustomWidget(w);
console.log(w, this); // w = this.addWidget("text", x, "", function(v){}, { multiline:true } );
this._widgets += [w] console.log(w, this);
this.onRemoved = function() { this._widgets += [w]
for (let y in this.widgets) { this.onRemoved = function() {
if (this.widgets[y].input_div) { for (let y in this.widgets) {
this.widgets[y].input_div.remove(); if (this.widgets[y].input_div) {
this.widgets[y].input_div.remove();
}
} }
} }
} } else {
w = this.addWidget("text", x, default_val, function(v){}, { multiline:false } );
this._widgets += [w];
}
} else { } else {
this.addInput(x, type); this.addInput(x, type);
} }
@ -219,7 +241,7 @@ function onObjectInfo(json) {
}; };
afterLoadGraph(); afterLoadGraph();
// graph.configure(JSON.parse(base_txt2img_graph)); // loadGraphData(graph, JSON.parse(base_txt2img_graph));
} }
fetch("object_info", {cache: "no-store"}) fetch("object_info", {cache: "no-store"})
@ -376,7 +398,7 @@ function prompt_file_load(file)
} }
console.log(txt_chunks); console.log(txt_chunks);
console.log(JSON.parse(txt_chunks["prompt"])); console.log(JSON.parse(txt_chunks["prompt"]));
graph.configure(JSON.parse(txt_chunks["workflow"])); loadGraphData(graph, JSON.parse(txt_chunks["workflow"]));
}; };
reader.readAsArrayBuffer(file); reader.readAsArrayBuffer(file);
} else if (file.type === "application/json" || file.name.endsWith(".json")) { } else if (file.type === "application/json" || file.name.endsWith(".json")) {
@ -384,7 +406,7 @@ function prompt_file_load(file)
reader.onload = function() { reader.onload = function() {
console.log(reader.result); console.log(reader.result);
var jsonData = JSON.parse(reader.result); var jsonData = JSON.parse(reader.result);
graph.configure(jsonData); loadGraphData(graph, jsonData);
}; };
reader.readAsText(file); reader.readAsText(file);
} }
@ -413,7 +435,7 @@ function clearGraph() {
} }
function loadTxt2Img() { function loadTxt2Img() {
graph.configure(default_graph); loadGraphData(graph, default_graph);
} }
function saveGraph() { function saveGraph() {

Write Preview
Loading…
Cancel
Save