Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-01 03:31:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

I think I messed up the git again...

Browse Source
This commit is contained in:
tamat
2019-08-16 21:09:51 +02:00
parent 35773309fb
commit ea2a44ed97
10 changed files with 11727 additions and 9272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1446
build/litegraph.js
View File

File diff suppressed because it is too large Load Diff

2
demo/index.html
View File

@@ -27,7 +27,7 @@
<script type="text/javascript" src="../src/nodes/math3d.js"></script>
<script type="text/javascript" src="../src/nodes/strings.js"></script>
<script type="text/javascript" src="../src/nodes/interface.js"></script>
<script type="text/javascript" src="../src/nodes/graphics.js"></script>
<script type="text/javascript" src="../src/nodes/geometry.js"></script>
<script type="text/javascript" src="../src/nodes/input.js"></script>
<script type="text/javascript" src="../src/nodes/midi.js"></script>
<script type="text/javascript" src="../src/nodes/audio.js"></script>

16
demo/js/code.js
View File

@@ -13,7 +13,7 @@ window.onbeforeunload = function(){
//create scene selector
var elem = document.createElement("span");
elem.className = "selector";
elem.innerHTML = "Demo <select><option>Empty</option></select> <button id='save'>Save</button><button id='load'>Load</button>";
elem.innerHTML = "Demo <select><option>Empty</option></select> <button id='save'>Save</button><button id='load'>Load</button><button id='download'>Download</button>";
editor.tools.appendChild(elem);
var select = elem.querySelector("select");
select.addEventListener("change", function(e){
@@ -40,6 +40,20 @@ elem.querySelector("#load").addEventListener("click",function(){
console.log("loaded");
});
elem.querySelector("#download").addEventListener("click",function(){
var data = JSON.stringify( graph.serialize() );
var file = new Blob( [ data ] );
var url = URL.createObjectURL( file );
var element = document.createElement("a");
element.setAttribute('href', url);
element.setAttribute('download', "graph.JSON" );
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
setTimeout( function(){ URL.revokeObjectURL( url ); }, 1000*60 ); //wait one minute to revoke url
});
function addDemo( name, url )
{
var option = document.createElement("option");

16
src/litegraph.js
View File

@@ -127,6 +127,8 @@
}
}
if( !Object.hasOwnProperty( base_class.prototype, "shape") )
{
Object.defineProperty(base_class.prototype, "shape", {
set: function(v) {
switch (v) {
@@ -154,8 +156,12 @@
},
enumerable: true
});
}
var prev = this.registered_node_types[type];
if(prev)
console.log("replacing node type: " + type);
this.registered_node_types[type] = base_class;
if (base_class.constructor.name) {
this.Nodes[classname] = base_class;
@@ -176,6 +182,7 @@
);
}
//used to know which nodes create when dragging files to the canvas
if (base_class.supported_extensions) {
for (var i in base_class.supported_extensions) {
this.node_types_by_file_extension[
@@ -2330,9 +2337,13 @@
if (!this.properties) {
this.properties = {};
}
if( value === this.properties[name] )
return;
var prev_value = this.properties[name];
this.properties[name] = value;
if (this.onPropertyChanged) {
this.onPropertyChanged(name, value);
if( this.onPropertyChanged(name, value) === false ) //abort change
this.properties[name] = prev_value;
}
};
@@ -9825,6 +9836,9 @@ LGraphNode.prototype.executeAction = function(action)
extra: node
};
if(node)
options.title = node.type;
//check if mouse is in input
var slot = null;
if (node) {

194
src/nodes/base.js
View File

@@ -245,56 +245,17 @@
//Input for a subgraph
function GraphInput() {
this.addOutput("", "");
this.addOutput("", "number");
this.name_in_graph = "";
this.properties = {};
this.properties = {
name: "",
type: "number",
value: 0
};
var that = this;
Object.defineProperty(this.properties, "name", {
get: function() {
return that.name_in_graph;
},
set: function(v) {
if (v == "" || v == that.name_in_graph || v == "enabled") {
return;
}
if(that.graph)
{
if (that.name_in_graph) {
//already added
that.graph.renameInput(that.name_in_graph, v);
} else {
that.graph.addInput(v, that.properties.type);
}
} //what if not?!
that.name_widget.value = v;
that.name_in_graph = v;
},
enumerable: true
});
Object.defineProperty(this.properties, "type", {
get: function() {
return that.outputs[0].type;
},
set: function(v) {
if (v == "event") {
v = LiteGraph.EVENT;
}
that.outputs[0].type = v;
if (that.name_in_graph) {
//already added
that.graph.changeInputType(
that.name_in_graph,
that.outputs[0].type
);
}
that.type_widget.value = v;
},
enumerable: true
});
this.name_widget = this.addWidget(
"text",
"Name",
@@ -303,7 +264,7 @@
if (!v) {
return;
}
that.properties.name = v;
that.setProperty("name",v);
}
);
this.type_widget = this.addWidget(
@@ -311,18 +272,87 @@
"Type",
this.properties.type,
function(v) {
v = v || "";
that.properties.type = v;
that.setProperty("type",v);
}
);
this.value_widget = this.addWidget(
"number",
"Value",
this.properties.value,
function(v) {
that.setProperty("value",v);
}
);
this.widgets_up = true;
this.size = [180, 60];
this.size = [180, 90];
}
GraphInput.title = "Input";
GraphInput.desc = "Input of the graph";
GraphInput.prototype.onConfigure = function()
{
this.updateType();
}
GraphInput.prototype.updateType = function()
{
var type = this.properties.type;
this.type_widget.value = type;
if(type == "number")
{
this.value_widget.type = "number";
this.value_widget.value = 0;
}
else if(type == "bool")
{
this.value_widget.type = "toggle";
this.value_widget.value = true;
}
else if(type == "string")
{
this.value_widget.type = "text";
this.value_widget.value = "";
}
else
{
this.value_widget.type = null;
this.value_widget.value = null;
}
this.properties.value = this.value_widget.value;
}
GraphInput.prototype.onPropertyChanged = function(name,v)
{
if( name == "name" )
{
if (v == "" || v == this.name_in_graph || v == "enabled") {
return false;
}
if(this.graph)
{
if (this.name_in_graph) {
//already added
this.graph.renameInput( this.name_in_graph, v );
} else {
this.graph.addInput( v, this.properties.type );
}
} //what if not?!
this.name_widget.value = v;
this.name_in_graph = v;
}
else if( name == "type" )
{
v = v || "";
this.updateType(v);
}
else if( name == "value" )
{
}
}
GraphInput.prototype.getTitle = function() {
if (this.flags.collapsed) {
return this.properties.name;
@@ -338,15 +368,12 @@
GraphInput.prototype.onExecute = function() {
var name = this.properties.name;
//read from global input
var data = this.graph.inputs[name];
if (!data) {
return;
this.setOutputData(0, this.properties.value );
}
//put through output
this.setOutputData(0, data.value);
this.setOutputData(0, data.value === undefined ? this.properties.value : data.value);
};
GraphInput.prototype.onRemoved = function() {
@@ -685,6 +712,63 @@
LiteGraph.registerNodeType("basic/variable", Variable);
function DownloadData() {
this.size = [60, 30];
this.addInput("value", 0, { label: "" });
this.properties = { filename: "data.json" };
this.value = null;
var that = this;
this.addWidget("button","Download","", function(v){
if(!that.value)
return;
that.downloadAsFile();
});
}
DownloadData.title = "Download";
DownloadData.desc = "Download some data";
DownloadData.prototype.downloadAsFile = function()
{
if(this.value == null)
return;
var str = null;
if(this.value.constructor === String)
str = this.value;
else
str = JSON.stringify(this.value);
var file = new Blob([str]);
var url = URL.createObjectURL( file );
var element = document.createElement("a");
element.setAttribute('href', url);
element.setAttribute('download', this.properties.filename );
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
setTimeout( function(){ URL.revokeObjectURL( url ); }, 1000*60 ); //wait one minute to revoke url
}
DownloadData.prototype.onExecute = function() {
if (this.inputs[0]) {
this.value = this.getInputData(0);
}
};
DownloadData.prototype.getTitle = function() {
if (this.flags.collapsed) {
return this.properties.filename;
}
return this.title;
};
LiteGraph.registerNodeType("basic/download", DownloadData);
//Watch a value in the editor
function Watch() {
this.size = [60, 30];

1014
src/nodes/geometry.js Normal file
View File

File diff suppressed because it is too large Load Diff

194
src/nodes/gltextures.js
View File

@@ -4,7 +4,9 @@
//Works with Litegl.js to create WebGL nodes
global.LGraphTexture = null;
if (typeof GL != "undefined") {
if (typeof GL == "undefined")
return;
LGraphCanvas.link_type_colors["Texture"] = "#987";
function LGraphTexture() {
@@ -350,6 +352,7 @@
};
LGraphTexture.prototype.getResources = function(res) {
if(this.properties.name)
res[this.properties.name] = GL.Texture;
return res;
};
@@ -492,6 +495,8 @@
LGraphTextureOperation.title = "Operation";
LGraphTextureOperation.desc = "Texture shader operation";
LGraphTextureOperation.presets = {};
LGraphTextureOperation.prototype.getExtraMenuOptions = function(
graphcanvas
) {
@@ -564,6 +569,9 @@
height = texB.height;
}
if(!texB)
texB = GL.Texture.getWhiteTexture();
var type = LGraphTexture.getTextureType( this.properties.precision, tex );
if (!tex && !this._tex) {
@@ -671,6 +679,41 @@
}\n\
";
LGraphTextureOperation.registerPreset = function ( name, code )
{
LGraphTextureOperation.presets[name] = code;
}
LGraphTextureOperation.registerPreset("","");
LGraphTextureOperation.registerPreset("bypass","color");
LGraphTextureOperation.registerPreset("add","color + colorB * value");
LGraphTextureOperation.registerPreset("substract","(color - colorB) * value");
LGraphTextureOperation.registerPreset("mate","mix( color, colorB, color4B.a * value)");
LGraphTextureOperation.registerPreset("invert","vec3(1.0) - color");
LGraphTextureOperation.registerPreset("multiply","color * colorB * value");
LGraphTextureOperation.registerPreset("divide","(color / colorB) / value");
LGraphTextureOperation.registerPreset("difference","abs(color - colorB) * value");
LGraphTextureOperation.registerPreset("max","max(color, colorB) * value");
LGraphTextureOperation.registerPreset("min","min(color, colorB) * value");
LGraphTextureOperation.registerPreset("displace","texture2D(u_texture, uv + (colorB.xy - vec2(0.5)) * value).xyz");
LGraphTextureOperation.registerPreset("grayscale","vec3(color.x + color.y + color.z) * value / 3.0");
LGraphTextureOperation.registerPreset("saturation","mix( vec3(color.x + color.y + color.z) / 3.0, color, value )");
LGraphTextureOperation.registerPreset("threshold","vec3(color.x > colorB.x * value ? 1.0 : 0.0,color.y > colorB.y * value ? 1.0 : 0.0,color.z > colorB.z * value ? 1.0 : 0.0)");
//webglstudio stuff...
LGraphTextureOperation.prototype.onInspect = function(widgets)
{
var that = this;
widgets.addCombo("Presets","",{ values: Object.keys(LGraphTextureOperation.presets), callback: function(v){
var code = LGraphTextureOperation.presets[v];
if(!code)
return;
that.setProperty("pixelcode",code);
that.title = v;
widgets.refresh();
}});
}
LiteGraph.registerNodeType("texture/operation", LGraphTextureOperation);
//****************************************************
@@ -877,7 +920,7 @@
\n\
varying vec2 v_coord;\n\
uniform float time;\n\
";
";
LiteGraph.registerNodeType("texture/shader", LGraphTextureShader);
@@ -3050,7 +3093,7 @@
};
/*
LGraphTextureBlur.pixel_shader = "precision highp float;\n\
LGraphTextureBlur.pixel_shader = "precision highp float;\n\
precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
@@ -3071,7 +3114,7 @@
gl_FragColor = u_intensity * sum;\n\
}\n\
";
*/
*/
LiteGraph.registerNodeType("texture/blur", LGraphTextureBlur);
@@ -3511,17 +3554,17 @@
//from https://www.shadertoy.com/view/MsXSz4
LGraphTextureKuwaharaFilter.pixel_shader =
"\n\
precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
uniform float u_intensity;\n\
uniform vec2 u_resolution;\n\
uniform vec2 u_iResolution;\n\
#ifndef RADIUS\n\
precision highp float;\n\
varying vec2 v_coord;\n\
uniform sampler2D u_texture;\n\
uniform float u_intensity;\n\
uniform vec2 u_resolution;\n\
uniform vec2 u_iResolution;\n\
#ifndef RADIUS\n\
#define RADIUS 7\n\
#endif\n\
void main() {\n\
\n\
#endif\n\
void main() {\n\
\n\
const int radius = RADIUS;\n\
vec2 fragCoord = v_coord;\n\
vec2 src_size = u_iResolution;\n\
@@ -3601,8 +3644,8 @@
min_sigma2 = sigma2;\n\
gl_FragColor = vec4(m3, 1.0);\n\
}\n\
}\n\
";
}\n\
";
LiteGraph.registerNodeType(
"texture/kuwahara",
@@ -3689,35 +3732,35 @@
//from https://github.com/RaymondMcGuire/GPU-Based-Image-Processing-Tools/blob/master/lib_webgl/scripts/main.js
LGraphTextureXDoGFilter.xdog_pixel_shader =
"\n\
precision highp float;\n\
uniform sampler2D src;\n\n\
uniform float cvsHeight;\n\
uniform float cvsWidth;\n\n\
uniform float sigma;\n\
uniform float k;\n\
uniform float p;\n\
uniform float epsilon;\n\
uniform float phi;\n\
varying vec2 v_coord;\n\n\
float cosh(float val)\n\
{\n\
precision highp float;\n\
uniform sampler2D src;\n\n\
uniform float cvsHeight;\n\
uniform float cvsWidth;\n\n\
uniform float sigma;\n\
uniform float k;\n\
uniform float p;\n\
uniform float epsilon;\n\
uniform float phi;\n\
varying vec2 v_coord;\n\n\
float cosh(float val)\n\
{\n\
float tmp = exp(val);\n\
float cosH = (tmp + 1.0 / tmp) / 2.0;\n\
return cosH;\n\
}\n\n\
float tanh(float val)\n\
{\n\
}\n\n\
float tanh(float val)\n\
{\n\
float tmp = exp(val);\n\
float tanH = (tmp - 1.0 / tmp) / (tmp + 1.0 / tmp);\n\
return tanH;\n\
}\n\n\
float sinh(float val)\n\
{\n\
}\n\n\
float sinh(float val)\n\
{\n\
float tmp = exp(val);\n\
float sinH = (tmp - 1.0 / tmp) / 2.0;\n\
return sinH;\n\
}\n\n\
void main(void){\n\
}\n\n\
void main(void){\n\
vec3 destColor = vec3(0.0);\n\
float tFrag = 1.0 / cvsHeight;\n\
float sFrag = 1.0 / cvsWidth;\n\
@@ -3745,7 +3788,7 @@
float edge = ( H > epsilon )? 1.0 : 1.0 + tanh( phi * (H - epsilon));\n\
destColor = vec3(edge);\n\
gl_FragColor = vec4(destColor, 1.0);\n\
}";
}";
LiteGraph.registerNodeType("texture/xDoG", LGraphTextureXDoGFilter);
@@ -4505,13 +4548,15 @@
LiteGraph.registerNodeType("texture/perlin", LGraphTexturePerlin);
function LGraphTextureCanvas2D() {
this.addInput("v");
this.addOutput("out", "Texture");
this.properties = {
code: "",
width: 512,
height: 512,
clear: true,
precision: LGraphTexture.DEFAULT
precision: LGraphTexture.DEFAULT,
use_html_canvas: false
};
this._func = null;
this._temp_texture = null;
@@ -4528,21 +4573,24 @@
height: { type: "Number", precision: 0, step: 1 }
};
LGraphTextureCanvas2D.prototype.onPropertyChanged = function(
name,
value
) {
if (name == "code" && LiteGraph.allow_scripts) {
LGraphTextureCanvas2D.prototype.onPropertyChanged = function( name, value ) {
if (name == "code" )
this.compileCode( value );
}
LGraphTextureCanvas2D.prototype.compileCode = function( code ) {
this._func = null;
if( !LiteGraph.allow_scripts )
return;
try {
this._func = new Function( "canvas", "ctx", "time", "script", value );
this._func = new Function( "canvas", "ctx", "time", "script","v", code );
this.boxcolor = "#00FF00";
} catch (err) {
this.boxcolor = "#FF0000";
console.error("Error parsing script");
console.error(err);
}
}
};
LGraphTextureCanvas2D.prototype.onExecute = function() {
@@ -4550,14 +4598,11 @@
if (!func || !this.isOutputConnected(0)) {
return;
}
if (!global.enableWebGLCanvas) {
console.warn(
"cannot use LGraphTextureCanvas2D if Canvas2DtoWebGL is not included"
);
return;
this.executeDraw( func );
}
LGraphTextureCanvas2D.prototype.executeDraw = function( func_context ) {
var width = this.properties.width || gl.canvas.width;
var height = this.properties.height || gl.canvas.height;
var temp = this._temp_texture;
@@ -4570,9 +4615,30 @@
});
}
var v = this.getInputData(0);
var properties = this.properties;
var that = this;
var time = this.graph.getTime();
var ctx = gl;
var canvas = gl.canvas;
if( this.properties.use_html_canvas || !global.enableWebGLCanvas )
{
if(!this._canvas)
{
canvas = this._canvas = createCanvas(width.height);
ctx = this._ctx = canvas.getContext("2d");
}
else
{
canvas = this._canvas;
ctx = this._ctx;
}
canvas.width = width;
canvas.height = height;
}
if(ctx == gl) //using Canvas2DtoWebGL
temp.drawTo(function() {
gl.start2D();
if(properties.clear)
@@ -4582,10 +4648,10 @@
}
try {
if (func.draw) {
func.draw.call(that, gl.canvas, gl, time, func);
if (func_context.draw) {
func_context.draw.call(that, canvas, ctx, time, func_context, v);
} else {
func.call(that, gl.canvas, gl, time, func);
func_context.call(that, canvas, ctx, time, func_context,v);
}
that.boxcolor = "#00FF00";
} catch (err) {
@@ -4595,6 +4661,25 @@
}
gl.finish2D();
});
else //rendering to offscren canvas and uploading to texture
{
if(properties.clear)
ctx.clearRect(0,0,canvas.width,canvas.height);
try {
if (func_context.draw) {
func_context.draw.call(this, canvas, ctx, time, func_context, v);
} else {
func_context.call(this, canvas, ctx, time, func_context,v);
}
this.boxcolor = "#00FF00";
} catch (err) {
this.boxcolor = "#FF0000";
console.error("Error executing script");
console.error(err);
}
temp.uploadImage( canvas );
}
this.setOutputData(0, temp);
};
@@ -4723,5 +4808,4 @@
};
LiteGraph.registerNodeType( "texture/cubemapToTexture2D", LGraphCubemapToTexture2D );
} //litegl.js defined
})(this);

5
src/nodes/graphics.js
View File

@@ -96,7 +96,7 @@
if (this.flags.collapsed) {
return;
}
if (this.img && this.size[0] > 5 && this.size[1] > 5) {
if (this.img && this.size[0] > 5 && this.size[1] > 5 && this.img.width) {
ctx.drawImage(this.img, 0, 0, this.size[0], this.size[1]);
}
};
@@ -150,6 +150,9 @@
that.boxcolor = "#9F9";
that.setDirtyCanvas(true);
};
this.img.onerror = function() {
console.log("error loading the image:" + url);
}
};
GraphicsImage.prototype.onWidget = function(e, widget) {

23
src/nodes/math.js
View File

@@ -494,6 +494,25 @@
LiteGraph.registerNodeType("math/scale", MathScale);
//Gate
function Gate() {
this.addInput("v","boolean");
this.addInput("A");
this.addInput("B");
this.addOutput("out");
}
Gate.title = "Gate";
Gate.desc = "if v is true, then outputs A, otherwise B";
Gate.prototype.onExecute = function() {
var v = this.getInputData(0);
this.setOutputData(0, this.getInputData( v ? 1 : 2 ));
};
LiteGraph.registerNodeType("math/gate", Gate);
//Math Average
function MathAverageFilter() {
this.addInput("in", "number");
@@ -784,7 +803,8 @@
function MathCondition() {
this.addInput("A", "number");
this.addInput("B", "number");
this.addOutput("out", "boolean");
this.addOutput("true", "boolean");
this.addOutput("false", "boolean");
this.addProperty("A", 1);
this.addProperty("B", 1);
this.addProperty("OP", ">", "enum", { values: MathCondition.values });
@@ -850,6 +870,7 @@
}
this.setOutputData(0, result);
this.setOutputData(1, !result);
};
LiteGraph.registerNodeType("math/condition", MathCondition);

1
utils/deploy_files.txt
View File

@@ -9,6 +9,7 @@
../src/nodes/logic.js
../src/nodes/graphics.js
../src/nodes/gltextures.js
../src/nodes/geometry.js
../src/nodes/glfx.js
../src/nodes/midi.js
../src/nodes/audio.js