diff --git a/README.md b/README.md index 192b466..43af28f 100644 --- a/README.md +++ b/README.md @@ -31,10 +31,15 @@ Clone this repository Then to start the GUI, run the following command flask --app 'gligen_gui:create_app(8188)' run --port 5000 + +If call comfyui interfaces not located on the local machine. + + flask --app 'gligen_gui:create_app(8188,"HOST_IP")' run --port 5000 Note that this assumes your ComfyUI instance is using port 8188. If not, replace 8188 with the correct port number. Finally, open http://127.0.0.1:5000/port/8188 in your browser to start using the GUI. However change 8188 in the URL to the port used by ComfyUI if it is different. +If call comfyui interfaces not located on the local machine. open http://127.0.0.1:5000/port/8188/host/HOST_IP ## How To Use diff --git a/gligen_gui/__init__.py b/gligen_gui/__init__.py index eb79a85..5cab740 100644 --- a/gligen_gui/__init__.py +++ b/gligen_gui/__init__.py @@ -8,14 +8,15 @@ global BOXES global BASE_PROMPT -def create_app(comfy_port=8188): +def create_app(comfy_port=8188,comfy_host="127.0.0.1"): app = flask.Flask(__name__, instance_relative_config=True) app.config['CORS_HEADERS'] = 'Content-Type' @app.route("/") @app.route("/port/") - def index(port_number=8188): - print(port_number) + @app.route("/port//host/") + def index(port_number=8188,host_name="127.0.0.1"): + print(f"{host_name}:{port_number}") return flask.render_template('base.html', version_number=VERSION) @@ -23,7 +24,7 @@ def index(port_number=8188): def get_object_info(class_name=None): print("Get Object Info: ", class_name) req = urllib.request.Request( - f"http://127.0.0.1:{comfy_port}/object_info/{class_name}") + f"http://{comfy_host}:{comfy_port}/object_info/{class_name}") try: response = urllib.request.urlopen(req) return response @@ -37,12 +38,12 @@ def get_endpoint(endpoint=None): if len(args) > 0: queries = urllib.parse.urlencode(dict(args)) try: - res = urllib.request.urlopen(f"http://127.0.0.1:{comfy_port}/{endpoint}?{queries}") + res = urllib.request.urlopen(f"http://{comfy_host}:{comfy_port}/{endpoint}?{queries}") return res except urllib.error.HTTPError as e: return e.read() - req = urllib.request.Request(f"http://127.0.0.1:{comfy_port}/{endpoint}") + req = urllib.request.Request(f"http://{comfy_host}:{comfy_port}/{endpoint}") try: response = urllib.request.urlopen(req) return response @@ -54,7 +55,7 @@ def get_endpoint(endpoint=None): def post_endpoint(endpoint=None): payload = flask.request.get_json() data = json.dumps(payload).encode('utf-8') - req = urllib.request.Request(f"http://127.0.0.1:{comfy_port}/{endpoint}", + req = urllib.request.Request(f"http://{comfy_host}:{comfy_port}/{endpoint}", data=data) try: response = urllib.request.urlopen(req) @@ -78,7 +79,8 @@ def post_inputs(): BOXES = [box[1] for box in input_args["boxes"]] BASE_PROMPT = input_args['positive_prompt'] return json.dumps({'success':True}), 200, {'ContentType':'application/json'} - - print(f"Go to: http://127.0.0.1:5000/port/{comfy_port}") - - return app \ No newline at end of file + if comfy_port != 8188 or comfy_host != "127.0.0.1": + print(f"Go to: http://{comfy_host}:5000/port/{comfy_port}/host/{comfy_host}") + else: + print(f"Go to: http://{comfy_host}:5000/") + return app diff --git a/gligen_gui/static/js/draw.js b/gligen_gui/static/js/draw.js index 6755892..ee2b5e6 100644 --- a/gligen_gui/static/js/draw.js +++ b/gligen_gui/static/js/draw.js @@ -99,10 +99,25 @@ function addBox(id, box) { State.boxMap.set(id, box); // setMap("boxes", State.boxMap); } - +function generateUUID() { + var d = new Date().getTime(); + var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0; + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { + var r = Math.random() * 16; + if (d > 0) { + r = (d + r) % 16 | 0; + d = Math.floor(d / 16); + } else { + r = (d2 + r) % 16 | 0; + d2 = Math.floor(d2 / 16); + } + return (c === 'x' ? r : (r & 0x7 | 0x8)).toString(16); + }); +} // Creates and returns a new box and box id function newBox(x, y, width, height) { - let new_id = crypto.randomUUID(); + // let new_id = crypto.randomUUID(); + let new_id = generateUUID(); let new_box = { x: x, y: y, diff --git a/gligen_gui/static/js/extra.js b/gligen_gui/static/js/extra.js index 3f62882..7b758f4 100644 --- a/gligen_gui/static/js/extra.js +++ b/gligen_gui/static/js/extra.js @@ -109,6 +109,13 @@ const State = { return localStorage.checkpoint_name; }, + set vae_name(val) { + localStorage.vae_name = val; + }, + get vae_name() { + return localStorage.vae_name || "default"; + }, + set sampler_name(val) { localStorage.sampler_name = val; }, @@ -192,6 +199,12 @@ const State = { get comfy_ui_port() { return localStorage.comfy_ui_port; }, + set comfy_ui_host(val) { + localStorage.comfy_ui_host = val; + }, + get comfy_ui_host() { + return localStorage.comfy_ui_host; + }, }; // Retrieves the map with the given name from local storage @@ -204,14 +217,24 @@ function setMap(name, m) { localStorage.setItem(name, JSON.stringify(Array.from(m))); } -function getPort() { +function getHostPort() { const currentUrl = new URL(window.location.href); + console.log(currentUrl.pathname); const split = currentUrl.pathname.split("/"); if (split.length === 2) { - return "8188"; + return Array("127.0.0.1","8188"); } + port = "8188"; + host = "127.0.0.1" if (split[1] === "port") { - return split[2]; + port = split[2]; } - console.log(currentUrl.pathname); + if (split.length === 5 && split[3] === "host") { + host = split[4]; + + } + + console.log("Split len = ",split.length); + return Array(host,port) + } \ No newline at end of file diff --git a/gligen_gui/static/js/nodes.js b/gligen_gui/static/js/nodes.js index 5c3a36c..ccc9ab5 100644 --- a/gligen_gui/static/js/nodes.js +++ b/gligen_gui/static/js/nodes.js @@ -10,6 +10,18 @@ function nodeCheckpointLoaderSimple(name) { }; } +function nodeVAELoader(name) { + return { + inputs: { + vae_name: name, + }, + class_type: "VAELoader", + _meta: { + title: "Load VAE", + } + } +} + function nodeKSampler( seed, steps, @@ -67,11 +79,11 @@ function nodeCLIPTextEncode(prompt, model_in) { }; } -function nodeVAEDecode(model_in, samples_in) { +function nodeVAEDecode(input_provider, provider_output_index, samples_in) { return { inputs: { samples: [String(samples_in), 0], - vae: [String(1), 2], + vae: [String(input_provider), provider_output_index], }, class_type: "VAEDecode", _meta: { diff --git a/gligen_gui/static/js/script.js b/gligen_gui/static/js/script.js index 606dd75..c58c679 100644 --- a/gligen_gui/static/js/script.js +++ b/gligen_gui/static/js/script.js @@ -142,10 +142,21 @@ function buildPrompt() { negativeID, latentID ); + + // if vae_name is set to "default", use vae provided by checkpoint loader + // if vae_name contains vae checkpoint name, load it and use in nodeVAEDecode + let vaeProviderId = 1; + let vaeProviderOutputIdx = 2; + if (State.vae_name != "default") { + idx += 1; + vaeProviderId = idx; + vaeProviderOutputIdx = 0; + prompt[String(idx)] = nodeVAELoader(State.vae_name); + } idx += 1; let vaedecodeID = idx; - prompt[String(vaedecodeID)] = nodeVAEDecode(modelID, ksamplerID); + prompt[String(vaedecodeID)] = nodeVAEDecode(vaeProviderId, vaeProviderOutputIdx, ksamplerID); idx += 1; let saveimageID = idx; @@ -171,7 +182,7 @@ function getImage(endpoint) { function initWebSocket() { const socket = new WebSocket( - `ws://127.0.0.1:${State.comfy_ui_port || "8188"}/ws?clientId=1122` + `ws://${State.comfy_ui_host || "127.0.0.1"}:${State.comfy_ui_port || "8188"}/ws?clientId=1122` ); socket.addEventListener("open", (event) => {}); socket.addEventListener("message", (event) => { @@ -283,6 +294,45 @@ function loadCheckpointList() { }); } +function loadVAEList() { + requestGET("/object_info/VAELoader", (endpoint, data) => { + let vae_list = + data.VAELoader.input.required.vae_name[0]; + + console.log("selected vae = " + State.vae_name); + + State.vae_list = vae_list; + let vae_dropdown = document.getElementById("vae"); + let vae_select = document.createElement("select"); + vae_dropdown.appendChild(vae_select); + let option = document.createElement("option"); + option.disabled = false; + option.selected = true; + option.innerHTML = "default"; + option.title = "default"; + option.value = "default"; + vae_select.appendChild(option); + vae_list.forEach((vae_name) => { + option = document.createElement("option"); + option.title = vae_name; + option.value = vae_name; + option.innerHTML = vae_name; + vae_select.appendChild(option); + }); + + vae_select.addEventListener("change", (event) => { + console.log(vae_select.value); + State.vae_name = vae_select.value; + }); + + if (State.vae_name) { + if (vae_list.includes(State.vae_name)) + vae_select.value = State.vae_name; + } + + }); +} + // Loads the list of samplers and populates the dropdown function loadSamplerList() { requestGET("/object_info/KSampler", (endpoint, data) => { @@ -653,9 +703,13 @@ function loadCanvasSize() { } window.addEventListener("load", () => { - const port = getPort(); + const hostport = getHostPort(); + const host = hostport[0] + const port = hostport[1] console.log("ComfyUI port = ", port); + console.log("ComfyUI host = ", host); State.comfy_ui_port = port; + State.comfy_ui_host = host; if (!State.seed) { State.seed = getSeed(); @@ -686,6 +740,7 @@ window.addEventListener("load", () => { loadCheckpointList(); loadSamplerList(); loadLoraList(); + loadVAEList(); State.selected_loras.forEach((value, key) => { addLora(null, key); }); diff --git a/gligen_gui/templates/base.html b/gligen_gui/templates/base.html index 7b0f870..46845c5 100644 --- a/gligen_gui/templates/base.html +++ b/gligen_gui/templates/base.html @@ -99,6 +99,11 @@
+
+ VAE + +
+
sampling