add param comfyui host

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
 

gligen_gui/__init__.py

@@ -8,22 +8,23 @@
 
 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/<port_number>")
-  def index(port_number=8188):
-      print(port_number)
+  @app.route("/port/<port_number>/host/<host_name>")
+  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)
 
 
   @app.route("/object_info/<class_name>", methods=['GET'])
   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
+  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

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,

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)
+
 }

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: {

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);
   });

gligen_gui/templates/base.html

@@ -99,6 +99,11 @@
                 <div class="dropdown" id="checkpoint"></div>
               </fieldset>
               <div class="vertical-spacer-1_5"></div>
+              <fieldset>
+                <legend>VAE</legend>
+                <div class="dropdown" id="vae"></div>
+              </fieldset>
+              <div class="vertical-spacer-1_5"></div>
               <fieldset>
                 <legend>sampling</legend>
                 <div class="sampler-params-grid">